/* ============================================================
   mobile.css — Mobile-only App-Like Styling (max-width: 768px)
   Liquid Glass Design · Bottom Navigation · App Top Bar
   ============================================================ */

@media (max-width: 768px) {

    /* ─── Hide Desktop Nav Only (not mobile bottom nav) ───────── */
    nav {
        display: none !important;
    }

    /* ─── Mobile Top Bar ───────────────────────────────────── */
    .mobile-topbar {
        display: flex !important;
        position: fixed;
        top: 15px;
        left: 15px;
        right: 15px;
        z-index: 1100;
        padding: 10px 16px;
        gap: 12px;
        align-items: center;
        justify-content: center;
        border-radius: 50px;

        /* Liquid Glass */
        background: rgba(10, 10, 10, 0.35);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border: 1px solid rgba(212, 175, 55, 0.25);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .mobile-topbar .mob-btn-secondary {
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--accent-color);
        border: 1.5px solid rgba(212, 175, 55, 0.5);
        background: rgba(212, 175, 55, 0.08);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .mobile-topbar .mob-btn-secondary:active {
        background: rgba(212, 175, 55, 0.22);
    }

    .mobile-topbar .mob-btn-book {
        flex: 1;
        text-align: center;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-decoration: none;
        color: #000;
        background: linear-gradient(135deg, #D4AF37, #B8860B);
        border: none;
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .mobile-topbar .mob-btn-book:active {
        transform: scale(0.96);
    }

    /* ─── Body offset: 0 (hero bleeds behind topbar) ─── */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        padding-bottom: 80px !important;
    }

    /* Fixed top spacing for auth pages */
    .auth-container {
        padding-top: 100px !important;
    }

    /* ─── Hero Section Mobile ─────────────────────────────── */
    .hero {
        margin-top: 0 !important;
        height: 100vh;
        min-height: 600px;
        padding: 58px 6% 0;
        /* top padding = topbar height so content is below topbar */
        border-radius: 0;
        overflow: hidden;
    }

    .hero h1 {
        font-size: 2.3rem !important;
        line-height: 1.15;
        margin-bottom: 1rem;
    }

    .hero p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.8rem;
    }

    .hero-btns .btn-book {
        padding: 0.9rem 2rem !important;
        font-size: 0.9rem !important;
        border-radius: 50px !important;
    }

    /* ─── Liquid Glass Cards ───────────────────────────────── */
    .fleet-card,
    .about-card {
        background: rgba(26, 26, 26, 0.6) !important;
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    /* ─── Sections Mobile ──────────────────────────────────── */
    section {
        padding: 60px 5% !important;
    }

    .section-title {
        font-size: 1.9rem !important;
    }

    /* ─── Prevent iOS zoom on input focus ───────────────────── */
    input,
    select,
    textarea {
        font-size: 16px !important;
        touch-action: manipulation;
    }

    /* ─── Booking Container Glass ───────────────────────────── */
    .booking-container {
        background: rgba(20, 20, 20, 0.7) !important;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(212, 175, 55, 0.15) !important;
        border-radius: 24px !important;
        padding: 1.8rem 1.4rem !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }

    /* ─── Bottom Navigation Bar (App-Like) ─────────────────── */
    .mobile-bottomnav {
        display: flex !important;
        position: fixed !important;
        top: auto !important;
        /* CRITICAL: cancels nav { top: 0 } from style.css */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1100 !important;
        padding: 8px 0 12px;
        align-items: center;
        justify-content: space-around;

        /* Liquid Glass */
        background: rgba(8, 8, 8, 0.88) !important;
        backdrop-filter: blur(30px) saturate(200%);
        -webkit-backdrop-filter: blur(30px) saturate(200%);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6);
    }

    .mobile-bottomnav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        font-family: 'Outfit', sans-serif;
        transition: all 0.25s ease;
        padding: 4px 10px;
        border-radius: 12px;
        min-width: 52px;
    }

    .mobile-bottomnav a i {
        font-size: 1.22rem;
        transition: all 0.25s ease;
    }

    .mobile-bottomnav a:hover,
    .mobile-bottomnav a.active {
        color: var(--accent-color);
    }

    .mobile-bottomnav a:hover i,
    .mobile-bottomnav a.active i {
        color: var(--accent-color);
        filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
        transform: translateY(-2px);
    }

    /* Book center button — elevated gold pill */
    .mobile-bottomnav .mob-book-center {
        background: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
        color: #000 !important;
        border-radius: 50px;
        padding: 8px 18px;
        margin-top: -14px;
        box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5);
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .mobile-bottomnav .mob-book-center i {
        color: #000 !important;
        filter: none !important;
    }

    .mobile-bottomnav .mob-book-center:hover i {
        transform: translateY(-2px);
        filter: none !important;
    }

    /* ─── Footer Mobile ────────────────────────────────────── */
    footer {
        padding: 50px 6% 30px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* ─── Fix hero ::after z-index on mobile ──────────────── */
    .hero-content {
        z-index: 3 !important;
    }

    /* ─── Contact Section Mobile Fixes ──────────────────────── */
    #contact .form-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    #contact .form-grid>div:first-child {
        padding: 40px 30px !important;
    }

    #contact .form-grid>div:last-child {
        padding: 40px 25px !important;
    }

    #contact .form-grid form>div:first-child {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    #contact .section-title {
        font-size: 2.1rem !important;
    }
}

/* ─── Hide mobile elements on desktop ─────────────────────── */
.mobile-topbar,
.mobile-bottomnav {
    display: none;
}