/* ============================================================
   INVENTORY - MOBILE RESPONSIVE (Clean rewrite)
   DVCSales Navy: #203864 | Gold: #B8892A
   ============================================================ */

/* Score badges */
.score-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.score-excellent { background: #dcfce7; color: #15803d; }
.score-good { background: #dbeafe; color: #1e40af; }
.score-fair { background: #fef9c3; color: #854d0e; }
.score-high { background: #fee2e2; color: #b91c1c; }
.m-sub { display: none; }

/* Hidden on desktop */
.sticky-footer { display: none; }
.mobile-bottom-nav { display: none; }

@media (max-width: 767px) {

    /* ── Header ── */
    div.mobile-header, .mobile-header {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: #203864 !important;
        height: 50px !important;
    }

    /* ── Reset everything ── */
    html, body { background: white !important; }
    body { padding-bottom: 260px !important; }
    .dec25-plane-banner { display: none !important; }
    .dec25-header-spacer { display: none !important; }
    .dec25-topbar { display: none !important; height: 0 !important; }
    .dec25-header { display: none !important; height: 0 !important; }
    .dec25-plane-banner { display: none !important; }
    .mobile-search-bar { display: none !important; }
    .dec25-footer { display: none !important; }
    .hide-mobile { display: none !important; }
    .mobile-filter-btn { display: none !important; }

    /* ── Layout ── */
    .sidebar-col { display: none !important; }
    .filters-col { display: none !important; }
    .listings-grid { display: block !important; padding: 0 !important; }
    .main-col { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: white !important; }
    .listings-table tbody tr:nth-child(even) { background: #FFFBF5 !important; }
    section.font-roboto > div, .font-roboto > section > div { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }

    /* ── H1 Title (RED debug) ── */
    .page-title-h1 {
        display: block !important;
        background: white !important;
        color: #203864 !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        border-bottom: 1px solid #e5e7eb !important;
        position: fixed !important;
        top: 50px !important;
        left: 0 !important; right: 0 !important;
        z-index: 90 !important;
    }
    .page-title-h1 + p { display: none !important; }

    /* ── Top bar - HIDDEN ── */
    .top-bar { display: none !important; }
    .top-bar-buttons { display: none !important; }
    .favorites-btn { display: none !important; }
    .share-btn { display: none !important; }

    /* ── Table ── */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
        margin: 0 !important;
    }
    .main-col { padding-top: 50px !important; }
    .listings-table { font-size: 14px !important; min-width: 420px; }
    .listings-table thead th {
        background: #203864 !important;
        color: white !important;
        padding: 10px 6px !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }
    .listings-table thead .header-group { background: #1a3050 !important; font-size: 9px !important; padding: 4px 6px !important; }
    .listings-table .year-header { font-size: 9px !important; padding: 4px 6px !important; }
    .listings-table tbody tr { border-bottom: 1px solid #f0f0f0 !important; background: white !important; }
    .listings-table tbody tr.striped { background: #FFFBF5 !important; }
    .listings-table tbody tr:nth-child(even) { background: #FFFBF5 !important; }
    .listings-table tbody tr:first-child td { padding-top: 15px !important; }
    .table-container { background: white !important; }
    .listings-table { background: white !important; }
    .listings-table tbody { background: white !important; }
    .listings-table tbody td { padding: 9px 6px !important; white-space: nowrap !important; font-size: 14px !important; }
    .m-sub { display: block !important; font-size: 10px; font-weight: 400; color: #999; margin-top: 1px; }
    .listings-table tbody td.resort-name { font-size: 14px !important; font-weight: 700 !important; color: #333 !important; }
    .listings-table tbody td.price { color: #203864 !important; font-weight: 700 !important; font-size: 14px !important; }
    .year-col { font-size: 12px !important; color: #555 !important; }
    .view-btn { padding: 5px 12px !important; font-size: 10px !important; background: #203864 !important; border-radius: 5px !important; }
    .fav-heart { font-size: 14px !important; }
    .vp-col { font-size: 11px !important; }

    /* ── Hide SEO/FAQ/text below table ── */
    .faq-section { display: none !important; }
    .listings-grid ~ * { display: none !important; }
    .sticky-footer { display: block !important; }
    .mobile-bottom-nav { display: flex !important; }
    section.font-roboto > div > p { display: none !important; }
    section.font-roboto ~ section { display: none !important; }
    section.font-roboto ~ div:not(.sticky-footer):not(.wheel-footer) { display: none !important; }
    .fav-modal-overlay, .share-modal-overlay, .share-accordion, .toast-container { display: none !important; }

    /* ── Sticky footer with picker wheels (YELLOW debug) ── */
    .sticky-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0; right: 0;
        z-index: 100;
        background: #F7F2E0 !important;
        border-top: 3px solid #203864;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        display: flex !important;
        flex-direction: column;
        padding: 8px 0 24px 0 !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    }
    .sticky-footer-inner { display: flex; height: 220px; }
    .bottom-picker { flex: 1; position: relative; overflow: hidden; border-right: 1px solid #d4c9a8; background: #fff; display: block !important; border-radius: 8px; margin: 0 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    .bottom-picker:last-child { border-right: none; }
    .bottom-picker .picker-label { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: white; z-index: 5; background: #203864; padding: 6px 0; border-radius: 8px 8px 0 0; }
    .picker-wrapper { position: relative; height: 100%; overflow: hidden; perspective: 200px; }
    .picker-wrapper::before, .picker-wrapper::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; z-index: 3; pointer-events: none; }
    .picker-wrapper::before { top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%); }
    .picker-wrapper::after { bottom: 0; background: linear-gradient(0deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%); }
    .picker-highlight { position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); height: 40px; background: rgba(32,56,100,0.12); border: 2.5px solid #203864; border-radius: 8px; z-index: 4; pointer-events: none; box-shadow: 0 1px 4px rgba(32,56,100,0.2); }
    .picker-column { position: relative; z-index: 2; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 90px 0 90px; transform-style: preserve-3d; }
    .picker-column::-webkit-scrollbar { display: none; }
    .picker-item-old { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; color: #aaa; scroll-snap-align: center; cursor: pointer; transition: color 0.15s; text-decoration: none; white-space: nowrap; padding: 0 4px; scroll-snap-stop: always; }
    .picker-item:hover { color: #666; }
    /* removed - was overriding new picker */
    .picker-column .picker-item.active { color: #203864 !important; font-weight: 900 !important; font-size: 1.1rem !important; opacity: 1 !important; }

    /* ── Bottom nav (ORANGE debug) ── */
    .mobile-bottom-nav { display: flex !important; background: #F7F2E0 !important; border-top: 1px solid #e8e0d0; }
    .mobile-bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 0.56rem; font-weight: 600; color: #bbb; text-decoration: none; }
    .mobile-bottom-nav a.active { color: #203864; }
    .mobile-bottom-nav a svg { width: 20px; height: 20px; }

    /* ── VP tooltip ── */
    .vp-tooltip .vp-tooltip-text { width: 180px !important; font-size: 10px !important; }
}

    /* ── Scroll Wheel Picker ── */
    .wheel-footer { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 200; background: #F7F2E0; border-top: 3px solid #203864; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); padding: 6px 0 0 0; }
    .wheel-inner { display: flex; height: 200px; }
    .wheel-col { flex: 1; position: relative; overflow: hidden; border-right: 1px solid #d4c9a8; background: #fff; border-radius: 8px; margin: 0 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    .wheel-col:last-child { border-right: none; }
    .wheel-col .wlabel { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #fff; z-index: 5; background: #203864; padding: 5px 0; border-radius: 8px 8px 0 0; }
    .wheel-wrap { position: relative; height: 100%; overflow: hidden; perspective: 200px; }
    .wheel-wrap::before, .wheel-wrap::after { content: ""; position: absolute; left: 0; right: 0; height: 35%; z-index: 3; pointer-events: none; }
    .wheel-wrap::before { top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%); }
    .wheel-wrap::after { bottom: 0; background: linear-gradient(0deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%); }
    .wheel-hl { position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); height: 44px; background: rgba(32,56,100,0.08); border: 3px solid #203864; border-radius: 8px; z-index: 4; pointer-events: none; box-shadow: 0 2px 8px rgba(32,56,100,0.2); }
    .wheel-scroll { position: relative; z-index: 2; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 78px 0; transform-style: preserve-3d; }
    .wheel-scroll::-webkit-scrollbar { display: none; }
    .wi { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 400; color: #ccc; scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; white-space: nowrap; padding: 0 6px; }
    .wheel-col:first-child .wi { justify-content: flex-start; padding-left: 10px; }
    .wi.active { color: #203864 !important; font-weight: 900 !important; font-size: 1.1rem !important; opacity: 1 !important; transform: scale(1) !important; }
    .wheel-nav { display: flex; background: #203864; padding: 6px 0; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
    .wheel-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; font-size: 0.55rem; font-weight: 600; color: rgba(255,255,255,0.6); text-decoration: none; }
    .wheel-nav a.wn-active { color: #fff; }
    body { padding-bottom: 270px !important; }