/* ============================================================
   1860 TRAVELS — LIQUID GLASS LAYER
   Frosted-glass (blur + saturation) treatment for a small set
   of homepage surfaces: navbar, carousel arrows, card action
   buttons and price tags.

   Deliberately restrained:
   - Cards and form inputs stay SOLID (readability + contrast).
   - Only a handful of glass surfaces per viewport (backdrop-filter
     is GPU-expensive, especially on mid-range Android).

   Loaded LAST (after 1860-mobile.css) so it wins cascade ties.
   Remove this single <link> to drop the effect entirely — every
   rule is wrapped in @supports, so unsupported browsers keep the
   original solid styles untouched.
   ============================================================ */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    /* ── NAVBAR — always frosted, not just after scroll ── */
    .t-navbar {
        background: rgba(246, 245, 241, 0.55);
        -webkit-backdrop-filter: blur(26px) saturate(1.7);
        backdrop-filter: blur(26px) saturate(1.7);
        border-bottom-color: rgba(255, 255, 255, 0.4);
    }
    .t-navbar.scrolled {
        background: rgba(246, 245, 241, 0.65);
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
    }

    /* Nav dropdown menus — small floating glass panels */
    .t-nav-drop-menu {
        background: rgba(246, 244, 239, 0.94);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        backdrop-filter: blur(24px) saturate(1.5);
        border-color: rgba(255, 255, 255, 0.55);
        box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35);
    }

    /* ── HERO ── */
    .t-hero-eyebrow {
        background: rgba(255, 255, 255, 0.14);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
    }

    /* (Booking bar intentionally NOT glassed — tried it, the frosted
       form read poorly over the hero gradient. It stays solid white.) */

    /* ── CAROUSEL ARROWS (Top Deals / Destinations / Flight Deals) ──
       !important needed: 1860-mobile.css sets a solid background
       with !important at ≤991px and loads just before this file. */
    .top-deals-nav,
    .carousel-nav,
    .t-car-btn {
        background: rgba(255, 255, 255, 0.6) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.5);
        backdrop-filter: blur(12px) saturate(1.5);
        border-color: rgba(255, 255, 255, 0.65);
    }
    .top-deals-nav:hover,
    .t-car-btn:hover {
        background: var(--amber, #F3A316) !important;
    }

    /* ── DEAL-CARD OVERLAYS (sit over photos — ideal glass hosts) ── */
    .top-deal-image-wrapper .action-btn {
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
    }
    .top-deal-image-wrapper .action-btn:hover { background: var(--blue, #048ED3); }
    .top-deal-image-wrapper .wishlist-btn:hover { background: #e0245e; }

    .top-deal-price-tag {
        background: rgba(10, 12, 8, 0.5);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        backdrop-filter: blur(14px) saturate(1.4);
        border-color: rgba(255, 255, 255, 0.24);
    }
}

/* ── ACCESSIBILITY: user prefers reduced transparency → solid ── */
@media (prefers-reduced-transparency: reduce) {
    .t-navbar,
    .t-nav-drop-menu,
    .top-deals-nav,
    .carousel-nav,
    .t-car-btn,
    .top-deal-image-wrapper .action-btn,
    .top-deal-price-tag {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .t-navbar { background: var(--bg, #f6f5f1) !important; }
    .t-nav-drop-menu { background: var(--bg-2, #ede9e1) !important; }
    .top-deals-nav, .carousel-nav, .t-car-btn { background: #fff !important; }
    .top-deal-image-wrapper .action-btn { background: rgba(255, 255, 255, 0.92) !important; }
    .top-deal-price-tag { background: rgba(10, 12, 8, 0.66) !important; }
}