/* ============================================================
   MOBILE-ONLY UX ENHANCEMENTS
   Scope: all rules gated behind max-width: 991px so desktop
   (>991px) is completely unaffected.
   ============================================================ */

/* Hidden by default (desktop); only shown inside the mobile
   media query below. Keeps desktop markup a no-op. */
#mobileQuickActions,
.mobile-qa-overlay {
    display: none;
}

@media (max-width: 991px) {

    /* ---------- 1. Auto-hide header (logo bar) on scroll ---------- */
    .header-top {
        max-height: var(--header-top-h, 140px);
        overflow: hidden;
        transition: max-height .25s ease, opacity .2s ease,
                    padding-top .25s ease, padding-bottom .25s ease,
                    border-color .25s ease;
    }
    body.header-hide-logo .header-top {
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom-color: transparent;
    }

    main {
        margin-top: var(--header-full-offset, 145px) !important;
        transition: margin-top .25s ease;
    }
    body.header-hide-logo main {
        margin-top: var(--header-collapsed-offset, 54px) !important;
    }

    /* Keep the green mobile action bar (and its icons) fully intact —
       no visual changes, it just moves up as the logo bar collapses. */
    .mobile-action-bar {
        position: relative;
        z-index: 2;
    }

    /* ---------- 2. Mobile Quick Actions FAB (replaces right-side FAB) ---------- */
    #desktopFabStrip {
        display: none !important;
    }

    /* Bottom-left circular FAB, mirroring the chat widget's bottom-right
       position/size/elevation so the two never collide and read as one
       consistent "floating controls" language. */
    #mobileQuickActions {
        position: fixed;
        left: max(20px, calc(env(safe-area-inset-left, 0px) + 20px));
        bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
        z-index: 1042;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-qa-fab {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: var(--accent-color);
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0,0,0,.3);
        transition: transform .15s ease, box-shadow .15s ease;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .mobile-qa-fab:active {
        transform: scale(.93);
    }
    #mobileQuickActions.open .mobile-qa-fab {
        box-shadow: 0 6px 24px rgba(0,0,0,.38);
    }

    /* Speed-dial menu: stacks upward from the FAB, anchored to the same
       left edge, and only exists visually/interactively while open. */
    .mobile-qa-panel {
        position: absolute;
        left: 6px;
        bottom: 70px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mobile-qa-item {
        display: flex;
        align-items: center;
        gap: 10px;
        transform: scale(.7);
        opacity: 0;
        transform-origin: left bottom;
        pointer-events: none;
        transition: transform .22s cubic-bezier(.34,1.3,.64,1), opacity .2s ease;
    }
    #mobileQuickActions.open .mobile-qa-item {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }
    /* Slight per-item stagger so the fan-out reads as a single fluid motion */
    .mobile-qa-item:nth-child(1) { transition-delay: .06s; }
    .mobile-qa-item:nth-child(2) { transition-delay: .03s; }
    .mobile-qa-item:nth-child(3) { transition-delay: 0s; }

    .mobile-qa-mini {
        width: 46px;
        height: 46px;
        min-height: 44px;
        border-radius: 50%;
        background: #1a2a4a;
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,.25);
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .mobile-qa-mini:active {
        background: #243a64;
    }

    .mobile-qa-item-label {
        background: #1a2a4a;
        color: #fff;
        font-size: .72rem;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }

    .mobile-qa-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        background: #dc3545;
        color: #fff;
        font-size: .58rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        line-height: 1;
    }

    /* Invisible full-screen tap-catcher — lets "tap outside" dismiss the
       menu without darkening the page (menu should overlay, page shouldn't dim). */
    .mobile-qa-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1041;
        background: transparent;
    }
    #mobileQuickActions.open + .mobile-qa-overlay {
        display: block;
    }

    /* ---------- 7. Reduce whitespace / tighten card density ---------- */
    .body-style-section,
    .browse-by-section,
    .about-home-section,
    .featured-section,
    .cta-boxes-section,
    .reviews-section,
    .dual-cta-section,
    .inventory-strip-section,
    .services-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .st-form-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    .section-desc-center {
        margin-bottom: 26px;
    }

    .inventory-card .card-body {
        padding: .85rem;
    }
    .inventory-card .card-img-top-link,
    .inventory-card .card-img-placeholder {
        height: 185px;
    }
    #vehicleGrid > [class*="col-"] {
        margin-bottom: 1rem !important;
    }
}

/* ---------- 6. Reduced-motion support ---------- */
@media (prefers-reduced-motion: reduce) {
    .header-top,
    main,
    .mobile-qa-fab,
    .mobile-qa-item {
        transition: none !important;
    }
}