/*
 * Vayomeie — glassmorphism overlay (refined)
 * Loaded only when feature_glassmorphism = '1'.
 *
 * Note: assets/css/style.css already applies a baked-in glassmorphism
 * to several surfaces (.header.scrolled, .product-card__info,
 * .search-overlay, .modal, .cart-drawer, mobile .header).
 *
 * To avoid stacking blur on blur (which made the page feel over-frosted),
 * this file ONLY enhances the surfaces that are NOT already glassy in the
 * base, and keeps blur values modest (≤10px).
 *
 * Body attribute selector: body[data-feat-glassmorphism="1"]
 */

body[data-feat-glassmorphism="1"] {

    /* ------------------------------------------------------------
       Header / Nav — gentle tint + light blur (idle state).
       The base style.css already tints .header.scrolled at 0.85.
       We only override the idle state to make the glass visible
       even before the user scrolls.
       ------------------------------------------------------------ */
    .header {
        background: rgba(253, 235, 199, 0.45);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
                backdrop-filter: saturate(160%) blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    /* When already-scrolled, base style.css supplies its own rule —
       just nudge it a touch lighter so it doesn't feel dense. */
    .header.scrolled {
        background: rgba(250, 249, 246, 0.7) !important;
        -webkit-backdrop-filter: saturate(160%) blur(12px);
                backdrop-filter: saturate(160%) blur(12px);
    }

    /* ------------------------------------------------------------
       Buttons — subtle inset-light glass
       ------------------------------------------------------------ */
    .btn--primary {
        background: rgba(176, 137, 104, 0.82) !important;
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 4px 14px rgba(176, 137, 104, 0.22),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .btn--primary:hover {
        background: rgba(140, 107, 79, 0.9) !important;
    }

    .btn--outline,
    .btn--secondary {
        background: rgba(255, 255, 255, 0.32) !important;
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        border: 1px solid rgba(176, 137, 104, 0.45) !important;
        color: var(--text-dark, #2A1A1A) !important;
    }
    .btn--outline:hover,
    .btn--secondary:hover {
        background: rgba(255, 255, 255, 0.55) !important;
        border-color: var(--clay, #B08968) !important;
    }

    /* ------------------------------------------------------------
       Product cards — light frame + soft hover lift
       (Base style.css already glassifies .product-card__info, so we
       intentionally do NOT add backdrop-filter to .product-card itself.)
       ------------------------------------------------------------ */
    .product-card {
        background: rgba(255, 255, 255, 0.30);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .product-card:hover {
        transform: translateY(-3px);
        border-color: rgba(176, 137, 104, 0.45);
        box-shadow: 0 12px 32px rgba(42, 26, 26, 0.10);
    }
    /* Badge needs contrast — tinted clay glass with white text remains legible. */
    .product-card__badge {
        background: rgba(176, 137, 104, 0.85) !important;
        color: #fff !important;
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 2px 8px rgba(176, 137, 104, 0.35);
    }
    .product-card__badge--prebook {
        background: rgba(74, 124, 89, 0.85) !important;
    }

    /* ------------------------------------------------------------
       New homepage sections — light glass on the inner surfaces
       ------------------------------------------------------------ */
    .brand-carousel__viewport {
        background: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(6px);
                backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }
    .raw-marquee__media {
        background: rgba(253, 235, 199, 0.55) !important;
        -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.45);
    }
}

/* ------------------------------------------------------------
   Browsers without backdrop-filter support: opaque fallbacks
   so the site never appears broken.
   ------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body[data-feat-glassmorphism="1"] .header        { background: rgba(253, 235, 199, 0.95); }
    body[data-feat-glassmorphism="1"] .product-card  { background: rgba(255, 255, 255, 0.95); }
    body[data-feat-glassmorphism="1"] .btn--primary  { background: rgba(176, 137, 104, 0.95) !important; }
    body[data-feat-glassmorphism="1"] .btn--outline,
    body[data-feat-glassmorphism="1"] .btn--secondary{ background: rgba(255, 255, 255, 0.85) !important; }
}