/**
 * ZedShelter — Small Screen UI Layer for Frontend & User Accounts
 *
 * Strictly guarded presentation layer for smartphones and mobile touch devices (<= 782px).
 * DESKTOP (> 782px) is 100% UNTOUCHED and pristine.
 *
 * Features:
 * - Mobile horizontal touch carousel tabs for User Dashboard (replaces vertical 7-item stack).
 * - Guaranteed >= 16px base font on all inputs/selects to prevent iOS auto-zoom.
 * - Minimum 44px touch targets across forms, amenity pills, and buttons.
 * - Sticky mobile bottom action bar for Single Property (Call, WhatsApp, Enquire, Favourite).
 * - Site-wide mobile bottom navigation bar (Home, Explore, + Add, Favourites, Account).
 * - Safe-area-inset support for notch/home indicators.
 * - High-contrast touch feedback.
 *
 * @package ZedShelter
 */

/* ==========================================================================
   DESKTOP DEFAULT (> 782px) — Strictly hide all mobile-specific frontend layers
   ========================================================================== */
@media screen and (min-width: 783px) {
    #zs-mobile-bottom-nav,
    #zs-property-mobile-bar,
    .zs-mobile-only,
    .zs-card-track-nav,
    [data-zs-track-nav],
    .zs-mobile-card-stack,
    .zs-filter-nav-btn,
    .zs-overview-nav {
        display: none !important;
    }

    .zs-card-track,
    [data-zs-track] {
        display: grid !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        gap: 1.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .zs-card-track > *,
    [data-zs-track] > * {
        flex: unset !important;
        max-width: unset !important;
        scroll-snap-align: unset !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .zs-key-facts-deck {
        display: grid !important;
        overflow: visible !important;
    }

    .zs-filter-pill-track {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .zs-amenity-folded {
        display: flex !important;
    }
}

.zs-dashboard-grid {
    display: grid;
    grid-template-columns: 100%;
    gap: 1.5rem;
    align-items: start;
    width: 100%;
}

@media screen and (min-width: 1024px) {
    .zs-dashboard-grid {
        display: grid !important;
        grid-template-columns: 280px minmax(0, 1fr) !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    .zs-dashboard-mobile-nav {
        display: none !important;
    }

    .zs-dashboard-desktop-sidebar {
        display: block !important;
        width: 280px !important;
        max-width: 280px !important;
        min-width: 280px !important;
        flex-shrink: 0 !important;
        grid-column: 1 / 2 !important;
    }

    .zs-dashboard-main-content {
        min-width: 0 !important;
        width: 100% !important;
        grid-column: 2 / 3 !important;
    }
}

@media screen and (min-width: 1280px) {
    .zs-dashboard-grid {
        grid-template-columns: 300px minmax(0, 1fr) !important;
    }

    .zs-dashboard-desktop-sidebar {
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
    }
}

@media screen and (max-width: 1023px) {
    .zs-dashboard-desktop-sidebar {
        display: none !important;
    }

    .zs-dashboard-mobile-nav {
        display: block !important;
    }

    .zs-dashboard-main-content {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   MOBILE VIEWPORT (<= 782px) — Active presentation layer for smartphones
   ========================================================================== */
@media screen and (max-width: 782px) {

    /* --- 1. Global Touch Ergonomics & Form Zoom Prevention --- */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important; /* Critical: prevents iOS auto-zoom on focus */
        min-height: 44px !important;
        line-height: 1.4 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    button,
    .btn,
    a.btn,
    input[type="submit"] {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Body clearance when mobile bottom nav or single-property bar is mounted */
    body.has-zs-mobile-bottom-nav {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.has-zs-prop-mobile-bar {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* --- 2. User Accounts & Dashboard Mobile Experience --- */
    /* Hide tall desktop vertical sidebar on mobile */
    .zs-dashboard-desktop-sidebar {
        display: none !important;
    }

    /* Display horizontal swipeable tab bar at top of dashboard */
    .zs-dashboard-mobile-nav {
        display: block !important;
        margin-bottom: 1.25rem;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .zs-dashboard-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .zs-dashboard-tabs-track {
        display: inline-flex;
        gap: 8px;
        padding: 4px 2px;
        min-width: 100%;
    }

    .zs-dashboard-tab-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 15px;
        min-height: 42px;
        border-radius: 9999px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        transition: all 0.15s ease;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .zs-dashboard-tab-pill svg {
        width: 16px;
        height: 16px;
        color: #64748b;
    }

    .zs-dashboard-tab-pill:active {
        transform: scale(0.97);
        background: #f1f5f9;
    }

    .zs-dashboard-tab-pill.is-active {
        background: #800080 !important;
        border-color: #800080 !important;
        color: #ffffff !important;
        box-shadow: 0 2px 6px rgba(128, 0, 128, 0.25) !important;
    }

    .zs-dashboard-tab-pill.is-active svg {
        color: #ffffff !important;
    }

    /* Dashboard Main Container: comfortable padding */
    .page-template-page-dashboard .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .page-template-page-dashboard .bg-white.rounded-lg.shadow-md {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    /* Add Listing Form: Market selector tiles on mobile */
    .dashboard-add-listing .grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .dashboard-add-listing .grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 > button {
        padding: 12px 10px !important;
        min-height: 90px !important;
    }

    /* Amenities & feature checkboxes: touch-sized rows */
    .dashboard-add-listing label.flex.items-center,
    .form-group label.flex.items-center {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 4px 0;
    }

    /* My Listings: Horizontal touch filters */
    .dashboard-my-listings .border-b.border-gray-200 nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding-bottom: 2px !important;
    }

    .dashboard-my-listings .border-b.border-gray-200 nav::-webkit-scrollbar {
        display: none !important;
    }

    .dashboard-my-listings .border-b.border-gray-200 nav a {
        white-space: nowrap !important;
        padding-bottom: 8px !important;
        font-size: 13px !important;
    }

    /* Action buttons in listing cards: touch friendly */
    .dashboard-my-listings .flex.items-center.space-x-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .dashboard-my-listings .flex.items-center.space-x-3 a,
    .dashboard-my-listings .flex.items-center.space-x-3 button {
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Overview Stats: 2-column touch cards */
    .dashboard-overview .grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    /* --- 3. Authentication Screens (Login, Register, Forgot Password) --- */
    .page-template-page-login .max-w-md,
    .page-template-page-register .max-w-2xl,
    .page-template-page-forgot-password .max-w-md {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-template-page-login .bg-white.rounded-lg.shadow-md.p-8,
    .page-template-page-register .bg-white.rounded-lg.shadow-md.p-8 {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }

    .page-template-page-login h1,
    .page-template-page-register h1 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* Account type radio cards in register page */
    .page-template-page-register label.relative.flex.flex-col {
        padding: 1rem !important;
        min-height: 100px !important;
        border-radius: 10px !important;
    }

    /* --- 4. Single Property Sticky Contact Bar --- */
    #zs-property-mobile-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99995 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid #e5e7eb !important;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) 12px !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .zs-property-mobile-bar-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    .zs-prop-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex: 1 !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        transition: transform 0.1s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .zs-prop-btn:active {
        transform: scale(0.97) !important;
    }

    .zs-prop-btn-call {
        background: #0f766e !important;
        color: #ffffff !important;
    }

    .zs-prop-btn-whatsapp {
        background: #25D366 !important;
        color: #ffffff !important;
    }

    .zs-prop-btn-message {
        background: #800080 !important;
        color: #ffffff !important;
    }

    .zs-prop-btn-fav-wrap {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .zs-prop-btn-fav-wrap button,
    .zs-prop-btn-fav-wrap .favourite-heart-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- 5. Site-Wide Mobile Bottom Navigation Bar --- */
    #zs-mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99990 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)) 6px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* When property action bar is active on single property page, yield bottom nav */
    body.has-zs-prop-mobile-bar #zs-mobile-bottom-nav {
        display: none !important;
    }

    .zs-mobile-bottom-nav-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        height: 54px !important;
    }

    .zs-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        min-height: 48px !important;
        text-decoration: none !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        gap: 3px !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: color 0.15s ease !important;
    }

    .zs-nav-item svg {
        width: 22px !important;
        height: 22px !important;
        transition: transform 0.15s ease !important;
    }

    .zs-nav-item:active svg {
        transform: scale(0.9) !important;
    }

    .zs-nav-item.is-active {
        color: #800080 !important;
        font-weight: 700 !important;
    }

    .zs-nav-item.is-active svg {
        color: #800080 !important;
    }

    /* Elevated center "Add Listing" button */
    .zs-nav-item-add {
        position: relative !important;
        top: -10px !important;
    }

    .zs-nav-add-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #800080 0%, #008000 100%) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(128, 0, 128, 0.35) !important;
        border: 3px solid #ffffff !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .zs-nav-add-btn:active {
        transform: scale(0.92) !important;
    }

    .zs-nav-item-add span {
        font-size: 10px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        margin-top: -2px !important;
    }

    /* --- 6. Single Property Page Layout Tuning --- */
    .single-property .property-hero-section {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        border-radius: 0 !important;
    }

    .single-property .property-hero-section img {
        border-radius: 0 !important;
    }

    .single-property .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .single-property .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 10px 12px !important;
    }

    /* --- 7. Modal Form (Contact Owner) Mobile Optimization --- */
    #contact-owner-modal [data-modal-card] {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 88vh !important;
        border-radius: 12px !important;
    }

    #contact-owner-modal input,
    #contact-owner-modal textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    /* --- 8. GSAP 3D Mobile Card Stacking & Snap Track Architecture --- */
    .zs-card-track-nav,
    [data-zs-track-nav] {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.5rem 0.25rem 0.75rem 0.25rem !important;
        margin-bottom: 0.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .zs-card-track-nav-inner {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .zs-track-prev,
    .zs-track-next {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9999px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.15s ease !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .zs-track-prev:active,
    .zs-track-next:active {
        transform: scale(0.92) !important;
        background: #f1f5f9 !important;
    }

    .zs-track-count {
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #475569 !important;
        padding: 4px 10px !important;
        background: #f1f5f9 !important;
        border-radius: 9999px !important;
        letter-spacing: 0.05em !important;
        min-width: 44px !important;
        text-align: center !important;
        border: 1px solid #e2e8f0 !important;
    }

    .zs-card-track,
    [data-zs-track] {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 16px !important;
        padding: 8px 4px 20px 4px !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        perspective: 1000px !important;
    }

    .zs-card-track::-webkit-scrollbar,
    [data-zs-track]::-webkit-scrollbar {
        display: none !important;
    }

    .zs-card-track > *,
    [data-zs-track] > * {
        flex: 0 0 86% !important;
        max-width: 86% !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        transform-origin: center center !important;
        transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease, box-shadow 0.35s ease !important;
        will-change: transform, opacity !important;
    }

    /* --- 9. Dedicated Vertical Mobile Card Stack for Lists and Tables --- */
    .zs-mobile-card-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .zs-stacked-record {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 14px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    }

    .zs-stacked-record:active {
        transform: scale(0.99) !important;
    }

    .zs-record-header {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .zs-record-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }

    .zs-record-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .zs-record-meta-item {
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        padding: 6px 10px !important;
    }

    .zs-record-meta-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        letter-spacing: 0.04em !important;
    }

    .zs-record-meta-value {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin-top: 2px !important;
    }

    .zs-record-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .zs-record-actions > a,
    .zs-record-actions > button {
        flex: 1 !important;
        min-height: 42px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    /* --- 10. Breadcrumbs Small Screen UI Treatment (Approach A) --- */
    .breadcrumbs,
    .zs-breadcrumbs {
        margin-bottom: 0.75rem !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .breadcrumbs ol,
    .zs-breadcrumbs ol {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        padding: 4px 0 !important;
        margin: 0 !important;
    }

    .breadcrumbs ol::-webkit-scrollbar,
    .zs-breadcrumbs ol::-webkit-scrollbar {
        display: none !important;
    }

    .breadcrumbs li,
    .zs-breadcrumbs li {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
    }

    .breadcrumbs li a,
    .zs-breadcrumbs li a {
        display: inline-block !important;
        font-size: 13px !important;
        color: #475569 !important;
        text-decoration: none !important;
    }

    /* Hide long redundant current page title on single properties & single posts on small screens */
    .breadcrumbs-has-single .zs-breadcrumb-current-single,
    .zs-breadcrumbs-has-single .zs-breadcrumb-current-single,
    .single-property .breadcrumbs li[aria-current="page"],
    .single-property .breadcrumbs .zs-breadcrumb-current,
    .single-property .breadcrumbs li:last-child {
        display: none !important;
    }

    /* Remove trailing slash from the parent item on mobile */
    .breadcrumbs-has-single li.zs-breadcrumb-parent::after,
    .zs-breadcrumbs-has-single li.zs-breadcrumb-parent::after,
    .single-property .breadcrumbs li.zs-breadcrumb-parent::after,
    .single-property .breadcrumbs li:nth-last-child(2)::after,
    .breadcrumbs li:has(+ .zs-breadcrumb-current-single)::after,
    .breadcrumbs li:has(+ [aria-current="page"])::after {
        display: none !important;
        content: "" !important;
        margin: 0 !important;
    }

    /* Highlight the parent category/town as the current contextual link */
    .breadcrumbs-has-single li.zs-breadcrumb-parent a,
    .zs-breadcrumbs-has-single li.zs-breadcrumb-parent a,
    .single-property .breadcrumbs li.zs-breadcrumb-parent a,
    .single-property .breadcrumbs li:nth-last-child(2) a {
        color: #800080 !important;
        font-weight: 700 !important;
    }

    /* --- 11. Key Facts Bar Horizontal Glance Deck --- */
    .zs-key-facts-deck {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    .zs-key-facts-deck::-webkit-scrollbar {
        display: none !important;
    }

    .zs-key-facts-deck > div {
        flex: 0 0 auto !important;
        min-width: 110px !important;
        box-sizing: border-box !important;
    }

    /* --- 12. Amenities Progressive Folding Card --- */
    .zs-amenities-card .zs-amenities-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .zs-amenities-card .zs-amenity-folded {
        display: none;
    }

    /* --- 13. Search Interfaces: Filter Bar Horizontal Swipe Track with GSAP Navigation --- */
    #customise-results-bar {
        overflow: visible !important;
        position: relative !important;
    }

    .zs-filter-pill-carousel {
        position: relative !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .zs-filter-nav-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 9999px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        z-index: 20 !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.15s ease, background-color 0.15s ease !important;
    }

    .zs-filter-nav-btn:active {
        transform: scale(0.9) !important;
        background: #f1f5f9 !important;
    }

    .zs-filter-pill-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 4px 2px !important;
        gap: 8px !important;
        width: 100% !important;
        scroll-behavior: smooth !important;
    }

    .zs-filter-pill-track::-webkit-scrollbar {
        display: none !important;
    }

    .zs-filter-pill-track > * {
        flex-shrink: 0 !important;
    }

    /* --- 14. Search Interfaces: Mobile Card-Stacking Bottom Sheet for Popovers --- */
    .zed-popover,
    .zed-popover-wide {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.32) !important;
        z-index: 999999 !important;
        padding: 1.25rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom, 0px)) 1.25rem !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
        background-color: #ffffff !important;
    }

    /* Grab handle at top of mobile bottom sheet */
    .zed-popover::before {
        content: "";
        display: block;
        width: 44px;
        height: 5px;
        background: #cbd5e1;
        border-radius: 9999px;
        margin: -4px auto 14px auto;
    }

    .zed-notch {
        display: none !important;
    }

    /* --- 15. Advanced Search Panel: Vertically Scrolling GSAP Card Stack on Mobile --- */
    #advanced-search-panel {
        max-height: 82vh !important;
        flex-direction: column !important;
        padding: 1.15rem 1rem !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
    }

    /* Strict tuck-away support for Alpine x-show */
    #advanced-search-panel[style*="display: none"],
    #advanced-search-panel[style*="display:none"],
    #advanced-search-panel.hidden,
    #advanced-search-panel[hidden] {
        display: none !important;
    }

    #advanced-search-panel:not([style*="display: none"]):not([style*="display:none"]):not(.hidden):not([hidden]) {
        display: flex !important;
    }

    .zs-adv-card-deck {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        scroll-snap-type: y mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        gap: 0.85rem !important;
        padding: 0.25rem 0.15rem 8rem 0.15rem !important;
        scrollbar-width: thin !important;
        scroll-behavior: smooth !important;
    }

    .zs-adv-card-deck::-webkit-scrollbar {
        width: 4px;
    }

    .zs-adv-card-deck::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }

    .zs-adv-step-card {
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        min-height: 250px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 18px !important;
        padding: 1.15rem 1rem !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .zs-adv-step-card:focus-within {
        border-color: #0d9488 !important;
        box-shadow: 0 6px 18px rgba(13, 148, 136, 0.12) !important;
    }
}

@media (min-width: 783px) {
    #advanced-search-panel {
        max-height: none !important;
        overflow: visible !important;
    }

    #advanced-search-panel[style*="display: none"],
    #advanced-search-panel[style*="display:none"],
    #advanced-search-panel.hidden,
    #advanced-search-panel[hidden] {
        display: none !important;
    }

    #advanced-search-panel:not([style*="display: none"]):not([style*="display:none"]):not(.hidden):not([hidden]) {
        display: block !important;
    }

    .zs-adv-card-deck {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .zs-adv-step-card {
        display: block !important;
        min-height: auto !important;
        margin-bottom: 1.25rem !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   10. Dashboard Overview 3D Metric Card Stack & Mode Switch (< 640px)
   ========================================================================== */
@media screen and (max-width: 639px) {
    .zs-overview-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 2px 12px 2px !important;
        gap: 8px !important;
    }

    .zs-stack-nav-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.15s ease !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
    }

    .zs-stack-nav-btn:active {
        transform: scale(0.94) !important;
        background: #f8fafc !important;
    }

    .zs-stack-toggle-btn {
        height: 34px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.15s ease !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
    }

    .zs-stack-toggle-btn:active {
        transform: scale(0.96) !important;
        background: #f8fafc !important;
    }

    /* Stacked Deck View */
    .zs-overview-cards-container.zs-cards-stacked-mode {
        display: block !important;
        position: relative !important;
        height: 185px !important;
        margin-bottom: 24px !important;
        perspective: 1200px !important;
        perspective-origin: center top !important;
        overflow: visible !important;
        touch-action: pan-x pan-y !important;
    }

    .zs-overview-cards-container.zs-cards-stacked-mode .zs-overview-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
        transform-origin: center top !important;
        will-change: transform, opacity !important;
        border-radius: 20px !important;
        background-color: #ffffff !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* Column List View */
    .zs-overview-cards-container:not(.zs-cards-stacked-mode) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

    .zs-overview-cards-container:not(.zs-cards-stacked-mode) .zs-overview-card {
        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}