/* ============================================================================
   MOBILE / TABLET RESPONSIVE LAYER — phones & tablets only (320px–1199px).
   Every rule in this file is wrapped in @media (max-width: 1199.98px) blocks,
   so desktop/laptop screens (>=1200px) are structurally unaffected.
   Loaded LAST on every layout so these rules win at small widths.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
   1. GLOBAL — applies to phone + tablet on every portal
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* Prevent accidental horizontal scroll from wide fixed-width blocks */
    html,
    body {
        overflow-x: clip;
    }

    /* Any bare table becomes swipeable instead of blowing out the page */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   2. TOUCH & FORM POLISH — phone + tablet
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {

    /* 16px+ inputs stop iOS Safari auto-zoom on focus */
    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* Apple HIG 44px minimum touch target for primary interactive elements */
    .btn,
    .btn-apex,
    button[type="submit"],
    a.nav-link,
    .cp-nav-item,
    .page-link {
        min-height: 44px;
    }

    .btn,
    .btn-apex {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Buttons read small on phone/tablet at their desktop sizes (Bootstrap's
       own --bs-btn-font-size is as low as 0.875rem/14px, and .btn-sm drops to
       ~12px) -- bump every button site-wide (marketing pages' .btn-apex,
       and every portal's Bootstrap .btn, including .btn-sm/.btn-lg variants
       which set their own --bs-btn-font-size) to one consistent, legible,
       thumb-friendly size. */
    .btn,
    .btn-apex,
    button[type="submit"] {
        --bs-btn-font-size: 1rem;
        font-size: 1.5rem;
    }
}

/* Touch devices: neutralise hover-only affordances (any width below desktop) */
@media (max-width: 1199.98px) and (hover: none) {

    [data-bs-toggle="tooltip"] {
        pointer-events: auto;
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        /* hover dropdowns are unreliable on touch — JS click path still works */
        pointer-events: auto;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   3. MARKETING SITE + BOOKING FLOW  (layout/main.blade.php pages)
   ──────────────────────────────────────────────────────────────────────────── */

/* Tablet: 768–1199px */
@media (min-width: 768px) and (max-width: 1199.98px) {

    .container-apex {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Phone + small tablet: sticky bottom CTA bar — visible up to 767px
   (extends the theme's own 720px cutoff to the full phone bucket) */
@media (min-width: 721px) and (max-width: 767.98px) {

    .mobile-cta-bar {
        display: flex;
    }

    body {
        padding-bottom: 76px;
    }
}

/* Phone: 320–767px */
@media (max-width: 767.98px) {

    /* CTA bar: exactly two equal buttons (Book Shop / Book Mobile), thumb-sized,
       with safe-area padding for notch / home-indicator devices */
    .mobile-cta-bar {
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-cta-bar .btn-apex {
        min-height: 48px;
        font-size: 17px;
        white-space: nowrap;
    }

    .mobile-cta-bar .btn-apex svg {
        width: 21px;
        height: 21px;
    }

    /* Header's mobile Book Now button (nav-cta-group) already gets a
       bigger font via its own @media (max-width:1024px) rule -- just
       enlarge its icon here to match. */
    .nav-cta-group .btn-apex-lg svg,
    .nav-cta-group .btn-apex-lg .bbd-chev {
        width: 23px;
        height: 23px;
    }

    /* Slide-out drawer's own Book at Shop / Book Mobile buttons and the
       tap-to-open Book Now dropdown (both-modes-enabled businesses) --
       same small icons/text as everywhere else on phone. */
    .mobile-menu .btn-apex {
        font-size: 17px;
    }

    .mobile-menu .btn-apex svg {
        width: 20px;
        height: 20px;
    }

    .bbd-menu a {
        font-size: 1rem;
        padding: 13px 14px;
    }

    .bbd-menu a svg {
        width: 18px;
        height: 18px;
    }

    /* Every other "Book Now" button site-wide (partials/book-btn.blade.php
       and partials/book-cta-pair.blade.php, used in dozens of places --
       service cards, seasonal/packages/membership pages, the footer, FAQ,
       locations section, etc.) shares the same small chevron/arrow icon
       classes. Bump them here; the hero CTA and the sticky mobile-cta-bar
       above both already set a larger size on more specific selectors
       (.hero-cta .btn-apex svg / .mobile-cta-bar .btn-apex svg), so they
       keep their own bigger icons rather than being pulled back down to
       this general size. */
    .bbd-chev,
    .bkbtn-arrow {
        width: 16px;
        height: 16px;
    }

    /* Hero "Book Now" CTA -- the single most important button on the whole
       site (first thing a mobile visitor sees), so it gets a bigger, bolder
       treatment than the general button bump above. */
    .hero-cta .btn-apex {
        font-size: 19px;
        padding: 16px 20px;
    }

    .hero-cta .btn-apex svg {
        width: 20px;
        height: 20px;
    }

    /* "Every service your car needs, under one roof" services grid -- each
       card's "Book now" pill/link reads too small on phone at its desktop
       size (as low as 0.8rem/12.8px). */
    .sc-learn,
    .sc-learn-pill,
    .sc-back-cta {
        font-size: 15px;
        padding: 12px 22px;
    }

    /* Content-section button pairs (Book at Shop/Book Mobile, Buy a gift
       card/Amount Check, etc.) are plain flex-wrap rows with no explicit
       width -- side by side when there's room, otherwise each button just
       wraps at its own natural (now-larger, since the button font-size
       bump above widened them) content width, which can leave two
       differently-sized buttons stacked with uneven, slightly odd-looking
       edges instead of a clean stack. Force a deliberate full-width stack
       here instead of leaving it to organic wrap. */
    .wcu-cta,
    .gc-cta-row,
    .sd-cta-row,
    .abt-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .wcu-cta .btn-apex,
    .gc-cta-row .btn-apex,
    .sd-cta-row .btn-apex,
    .abt-cta-row .btn-apex {
        width: 100%;
    }

    /* Membership page: the plan-card CTA ("Start Detail plan"), the Gold
       highlight banner CTA ("Become a Detail Member"), the private-events
       CTA ("Book a Private Event") and the approach-section CTA ("View
       Membership Plans") each sit alone in a single-column grid item on
       phone (.mem-card in .mem-grid, .mem-highlight-content in
       .mem-highlight-banner, etc). .btn-apex's desktop padding (14px 50px)
       plus its own mobile font-size bump above (1.5rem) makes labels this
       long wider than the column -- and a grid item's automatic minimum
       width defaults to its content's min-content size, so the button was
       forcing the whole column past the edge of the phone screen (silently
       clipped by body's overflow-x:hidden/clip rather than causing a visible
       scrollbar). Let these columns shrink to the viewport, then give their
       buttons a phone-sized width/padding instead of their desktop min-content. */
    .mem-card,
    .mem-highlight-content,
    .mem-private-content,
    .mem-approach-content {
        min-width: 0;
    }

    .mem-card .btn-apex,
    .mem-highlight-banner .btn-apex,
    .mem-private-content .btn-apex,
    .mem-approach-content .btn-apex,
    .bk11-cta-row .btn-apex {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        white-space: normal;
    }

    /* Membership hero stats (47% / 3 / $180 / 2.4k) rely on flex-wrap to
       fall into rows, which only wraps 2-per-line if the fonts happen to be
       narrow enough -- on phone, force a real 2-column grid so it's always
       exactly 2 per row regardless of font metrics. */
    .mem-hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }

    /* Membership page: Monthly/Annual billing toggle. "Annual" carries an
       inline "Save 15%" pill that wraps onto its own line at phone widths,
       leaving it taller than the single-line "Monthly" button next to it;
       also give both a real touch target (no min-height of their own
       otherwise, unlike .btn-apex). [data-bill] only matches these two
       buttons -- .account-tab itself is shared with account.blade.php's
       unrelated tab group, so it's left alone. */
    [data-bill] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 44px;
        white-space: nowrap;
        font-size: 13px;
    }

    /* Marketing sections: kill fixed side-by-side splits that survive the
       theme's own queries */
    .page-header {
        padding-top: 90px;
    }

    /* Booking pages: summary/cart panels stack under the form. .mb-summary
       (book-mobile.blade.php) carries Bootstrap's sticky-top utility class
       for a desktop "sticky sidebar that follows scroll" effect -- on phone
       that instead pins the summary card mid-scroll, where it visually
       overlaps the wizard's fixed bottom-nav "Next" button. Force it back
       into normal flow here. */
    .booking-summary,
    .cart-panel,
    .order-summary,
    .mb-summary {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 16px;
    }

    /* Step indicators become compact */
    .steps,
    .step-indicator,
    .booking-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    /* Package grids forced to 3-up via inline styles collapse to 1-col
       (!important is required to beat the inline declaration) */
    .pkg-grid {
        grid-template-columns: 1fr !important;
    }

    /* Booking calendar: comfortable touch cells */
    .bk-cal-cell {
        min-height: 44px;
    }

    .bk-cal-nav {
        min-width: 44px;
        min-height: 44px;
    }

    /* Add-on tiles single column on phone (theme switches at 420px only) */
    #addon-tiles {
        grid-template-columns: 1fr !important;
    }

    /* Wizard nav buttons: full-width, thumb-friendly */
    .bk-nav-btns .btn-apex,
    .book-nav .btn-apex {
        flex: 1;
        min-height: 48px;
        font-size: 17px;
    }

    .bk-nav-btns .btn-apex svg,
    .book-nav .btn-apex svg {
        width: 21px;
        height: 21px;
    }
}

/* Tablet: inline 3-up package grids go 2-up */
@media (min-width: 768px) and (max-width: 991.98px) {

    .pkg-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   4. CUSTOMER PORTAL  (/my — customerportal/layout/app.blade.php)
   ──────────────────────────────────────────────────────────────────────────── */

/* Phone: app-style bottom tab bar */
@media (max-width: 767.98px) {

    .cp-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 950;
        background: var(--cp-card, #fff);
        border-top: 1px solid var(--cp-border, #e5e9f0);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
    }

    .cp-tabbar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px;
        min-height: 48px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--cp-text-muted, #8a93a3);
        text-decoration: none;
        border-radius: 10px;
    }

    .cp-tabbar a i {
        font-size: 20px;
        line-height: 1;
    }

    .cp-tabbar a.active {
        color: var(--cp-accent, #00d4ff);
    }

    /* Content clears the tab bar */
    .cp-content {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .cp-content .table-responsive table {
        min-width: 560px;
        /* keeps columns readable; container scrolls */
    }
}

/* Tablet 768–991px: lg-only grids (which Bootstrap stacks to 1-col here)
   upgrade to a 2-col layout — better use of iPad width */
@media (min-width: 768px) and (max-width: 991.98px) {

    .cp-content .row>.col-lg-3,
    .cp-content .row>.col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   5. CLIENT ADMIN DASHBOARD + STAFF PORTAL (clientportal/layout/app.blade.php)
   Theme (Zenix) already collapses the sidebar; this fills the gaps.
   ──────────────────────────────────────────────────────────────────────────── */

/* Phone + tablet */
@media (max-width: 1199.98px) {

    /* Every admin table scrolls inside its card instead of breaking layout */
    .card .table,
    .content-body table.table {
        min-width: 640px;
    }

    .card-body:has(> .table),
    .card-body:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Charts hug their container */
    .apexcharts-canvas,
    .apexcharts-canvas svg {
        max-width: 100% !important;
    }

}

/* Phone only */
@media (max-width: 767.98px) {

    /* Modals become full-screen sheets */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        overflow-y: auto;
        width: 100%;
    }

    /* Page title rows / filter toolbars wrap instead of overflowing */
    .page-titles,
    .card-header,
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Kanban boards become horizontal swipe lanes on phone — one ~85vw
       column at a time with the next peeking in (app-style), instead of a
       tall vertical stack of all four status columns */
    .kanban-board,
    .kb-wrap {
        display: flex !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
    }

    .kanban-board>.kanban-col,
    .kb-wrap>.kb-col {
        flex: 0 0 85vw;
        max-width: 85vw;
        scroll-snap-align: start;
    }

    /* Admin content padding tightens */
    .content-body .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Bare tables (no .table-responsive wrapper — ~27 admin pages) become
       self-scrolling blocks on phone instead of blowing out the viewport */
    .content-body table.table:not(.dataTable) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables length/filter/info/pagination stack neatly */
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        margin-top: 8px;
    }

    .dataTables_filter input {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* Staff live-track: action buttons stick to the bottom, thumb-reachable */
@media (max-width: 767.98px) {

    .lt-actions {
        position: sticky;
        bottom: 0;
        z-index: 40;
        background: inherit;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    .lt-actions .btn,
    .lt-actions button,
    .lt-actions a {
        min-height: 48px;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   6. LIVE MAPS & TRACKING — full-bleed on phone
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    #map,
    #track-map,
    #lt-map,
    .track-map,
    .live-map,
    [id*="map-canvas"] {
        width: 100% !important;
        min-height: 55vh;
    }
}