/* ===== Bayt ul-Ahzan - "Luxury glass & water" look =====
   Loaded ONLY when the owner picks this look (admin -> Website content -> Colours and logo -> "Look of the website"):
   includes/header*.html print {% site_look %} which sets html[data-bh-look="glass"] and links this file + js/glass.js.
   It is a layer ON TOP of theme.css: every colour is still a palette variable (--c-*, --rgb-*), so the admin colour schemes
   (green, royal blue, mourning, own colours) and dark mode keep working. The Imam az-Zaman atmosphere (salam, dua pattern,
   hero, rays) is NOT removed - it only gets glass and water around it. Behaviour: js/glass.js. ===== */

html[data-bh-look="glass"] {
    --gl-blur: 18px;
    --gl-a: rgba(255,255,255,.80);          /* glass surface, top-left */
    --gl-b: rgba(255,255,255,.46);          /* glass surface, bottom-right */
    --gl-line: rgba(255,255,255,.85);       /* glass rim */
    --gl-hi: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.3);
    --gl-shadow: 0 26px 52px -26px rgba(var(--rgb-ink), .45), 0 6px 18px -8px rgba(var(--rgb-ink), .16);
    --gl-wave: var(--c-bg);                 /* colour the waves melt into (page background) */
}

/* ---------- ambient "water light" behind the whole page ---------- */
html[data-bh-look="glass"] body::before {
    content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none;
    background:
        radial-gradient(38% 34% at 16% 20%, rgba(var(--rgb-accent-light), .36), transparent 72%),
        radial-gradient(34% 38% at 84% 14%, rgba(var(--rgb-turq), .28), transparent 72%),
        radial-gradient(42% 38% at 72% 84%, rgba(var(--rgb-primary), .22), transparent 72%),
        radial-gradient(30% 32% at 10% 82%, rgba(var(--rgb-accent), .24), transparent 72%);
    animation: bh-gl-drift 36s ease-in-out infinite alternate; will-change: transform;
}
@keyframes bh-gl-drift { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); } to { transform: translate3d(3%, 2.5%, 0) scale(1.1); } }

/* ---------- navigation: frosted glass with a moving water-line ---------- */
html[data-bh-look="glass"] .sticky-top.bg-white, html[data-bh-look="glass"] .navbar.bg-white, html[data-bh-look="glass"] .navbar-light {
    background-color: rgba(var(--rgb-bg), .56) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
}
html[data-bh-look="glass"] .bh-navwrap {
    border-bottom: 1px solid var(--gl-line); box-shadow: 0 14px 34px -18px rgba(var(--rgb-ink), .45), inset 0 -1px 0 rgba(255,255,255,.5);
    position: sticky;
}
html[data-bh-look="glass"] .bh-navwrap::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--rgb-accent-light), .9), rgba(255,255,255,.95), rgba(var(--rgb-accent-light), .9), transparent) 0 0 / 55% 100% no-repeat;
    animation: bh-gl-line 7s ease-in-out infinite alternate;
}
@keyframes bh-gl-line { from { background-position: -10% 0; } to { background-position: 110% 0; } }
html[data-bh-look="glass"] .navbar .dropdown-menu, html[data-bh-look="glass"] .modal-content {
    background: linear-gradient(160deg, var(--gl-a), var(--gl-b)) !important; border: 1px solid var(--gl-line);
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(1.5); backdrop-filter: blur(var(--gl-blur)) saturate(1.5);
    box-shadow: var(--gl-shadow), var(--gl-hi); border-radius: 16px;
}
html[data-bh-look="glass"] .dropdown-item:hover, html[data-bh-look="glass"] .dropdown-item:focus { background: rgba(var(--rgb-accent-light), .22); }

/* ---------- cards, panels: frosted glass with a rim light and a soft spotlight that follows the pointer ---------- */
html[data-bh-look="glass"] .card, html[data-bh-look="glass"] .testimonial-item, html[data-bh-look="glass"] .team-item,
html[data-bh-look="glass"] .service-item, html[data-bh-look="glass"] .bh-donate-card, html[data-bh-look="glass"] .bh-prayer-card,
html[data-bh-look="glass"] .bh-quiz, html[data-bh-look="glass"] .bh-dua-files, html[data-bh-look="glass"] .bh-lib-card {
    position: relative; isolation: isolate;
    background: linear-gradient(150deg, var(--gl-a), var(--gl-b)); border: 1px solid var(--gl-line);
    -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(1.5); backdrop-filter: blur(var(--gl-blur)) saturate(1.5);
    box-shadow: var(--gl-shadow), var(--gl-hi); border-radius: 20px;
}
html[data-bh-look="glass"] .card::after, html[data-bh-look="glass"] .testimonial-item::after, html[data-bh-look="glass"] .team-item::after,
html[data-bh-look="glass"] .service-item::after, html[data-bh-look="glass"] .bh-donate-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.75), rgba(var(--rgb-accent-light), .18) 45%, transparent 70%);
}
html[data-bh-look="glass"] .card:hover::after, html[data-bh-look="glass"] .testimonial-item:hover::after, html[data-bh-look="glass"] .team-item:hover::after,
html[data-bh-look="glass"] .service-item:hover::after, html[data-bh-look="glass"] .bh-donate-card:hover::after { opacity: 1; }
html[data-bh-look="glass"] .card:hover { box-shadow: 0 34px 60px -26px rgba(var(--rgb-ink), .5), var(--gl-hi); }

/* soft section bands let the water light shine through */
html[data-bh-look="glass"] .product, html[data-bh-look="glass"] .bh-hadith-day, html[data-bh-look="glass"] .bh-members {
    background: linear-gradient(180deg, rgba(var(--rgb-bg), .34), rgba(var(--rgb-bg), .08));
}
html[data-bh-look="glass"] .container-fluid.bg-white:not(.bh-navwrap), html[data-bh-look="glass"] .container-xxl.bg-white, html[data-bh-look="glass"] section.bg-white,
html[data-bh-look="glass"] .container-fluid.bg-light, html[data-bh-look="glass"] .container-xxl.bg-light {
    background-color: rgba(var(--rgb-bg), .42) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-bh-look="glass"] .section-title h1, html[data-bh-look="glass"] .section-title .display-6 { text-shadow: 0 2px 18px rgba(255,255,255,.7); }

/* ---------- buttons: liquid glass with a light sweep ---------- */
html[data-bh-look="glass"] .btn { position: relative; overflow: hidden; isolation: isolate; }
html[data-bh-look="glass"] .btn-primary {
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 52%), linear-gradient(135deg, var(--c-primary-2), var(--c-primary-dark));
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 18px -10px rgba(0,0,0,.35), 0 14px 26px -10px rgba(var(--rgb-primary), .6);
}
html[data-bh-look="glass"] .btn-primary:hover, html[data-bh-look="glass"] .btn-primary:focus {
    background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 52%), linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
    border-color: rgba(255,255,255,.5);
}
html[data-bh-look="glass"] .bh-btn-gold {
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--c-accent-light), var(--c-accent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 26px -10px rgba(var(--rgb-accent), .65);
}
html[data-bh-look="glass"] .btn-primary::before, html[data-bh-look="glass"] .bh-btn-gold::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 42%; left: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .7s ease;
}
html[data-bh-look="glass"] .btn-primary:hover::before, html[data-bh-look="glass"] .bh-btn-gold:hover::before { left: 120%; }
html[data-bh-look="glass"] .btn-outline-primary { background: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--gl-hi); }
html[data-bh-look="glass"] .form-control, html[data-bh-look="glass"] .form-select {
    background-color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: inset 0 2px 6px rgba(var(--rgb-ink), .06);
}
/* click ripple (created by glass.js) */
.bh-gl-ripple {
    position: absolute; z-index: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.7), rgba(var(--rgb-accent-light), .35) 55%, transparent 70%);
    animation: bh-gl-ripple .75s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes bh-gl-ripple { to { transform: scale(24); opacity: 0; } }

/* ---------- title bands (all pages) and the footer: waves ---------- */
html[data-bh-look="glass"] .bh-header { box-shadow: inset 0 -1px 0 rgba(255,255,255,.35); }
.bh-gl-waves { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; overflow: hidden; pointer-events: none; z-index: 1; }
.bh-gl-waves.top { bottom: auto; top: -1px; transform: scaleY(-1); height: 48px; }
.bh-gl-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: bh-gl-wave 22s linear infinite; will-change: transform; }
.bh-gl-wave path { fill: var(--gl-wave); }
.bh-gl-wave.w1 { opacity: 1; }
.bh-gl-wave.w2 { opacity: .55; height: 82%; animation-duration: 31s; animation-direction: reverse; bottom: 4px; }
.bh-gl-wave.w3 { opacity: .28; height: 100%; animation-duration: 47s; bottom: 9px; }
@keyframes bh-gl-wave { to { transform: translateX(-50%); } }
html[data-bh-look="glass"] .bh-welcome .bh-gl-waves { height: 84px; }
html[data-bh-look="glass"] .footer { position: relative; }
html[data-bh-look="glass"] .footer .container { position: relative; z-index: 2; }

/* ---------- home hero: video / photo + water light, the Imam az-Zaman elements stay on top ---------- */
html[data-bh-look="glass"] .bh-welcome::before { z-index: 1; }
html[data-bh-look="glass"] .bh-welcome .bh-mahdi-rays { z-index: 1; }
.bh-gl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: var(--photo-filter, none); }
.bh-gl-hero-shade {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--rgb-ov-a), var(--hero-a)) 0%, rgba(var(--rgb-ov-b), var(--hero-b)) 40%, rgba(var(--rgb-ov-a), var(--hero-c)) 100%);
}
.bh-gl-caustics { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .9; }
/* fallback without WebGL: two slow drifting lights */
html[data-bh-look="glass"] .bh-welcome::after {
    content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(30% 36% at 30% 30%, rgba(var(--rgb-accent-light), .28), transparent 70%), radial-gradient(34% 30% at 72% 62%, rgba(255,255,255,.16), transparent 70%);
    animation: bh-gl-drift 24s ease-in-out infinite alternate;
}
html[data-bh-look="glass"] .bh-welcome.has-gl::after { display: none; }
html[data-bh-look="glass"] .bh-welcome-hadith {
    background: linear-gradient(150deg, rgba(var(--rgb-ink-2), .42), rgba(var(--rgb-ink-2), .62)); border: 1px solid rgba(255,255,255,.34);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 30px 60px -28px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.08); border-radius: 26px;
}
html[data-bh-look="glass"] .bh-welcome-salam { text-shadow: 0 0 30px rgba(var(--rgb-accent-light), .7), 0 0 4px rgba(255,255,255,.35), 0 2px 12px rgba(0,0,0,.6); }

/* ---------- dark mode: the same glass, tinted by the scheme ---------- */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    html[data-bh-look="glass"][data-bh-mode="dark"] {
        --gl-a: color-mix(in srgb, var(--bh-d-surface) 82%, transparent);
        --gl-b: color-mix(in srgb, var(--bh-d-surface) 46%, transparent);
        --gl-line: rgba(255,255,255,.16);
        --gl-hi: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.04);
        --gl-shadow: 0 28px 56px -26px rgba(0,0,0,.75), 0 6px 18px -8px rgba(0,0,0,.4);
        --gl-wave: var(--bh-d-bg);
    }
    html[data-bh-look="glass"][data-bh-mode="dark"] body::before { opacity: .55; }
    html[data-bh-look="glass"][data-bh-mode="dark"] .sticky-top.bg-white, html[data-bh-look="glass"][data-bh-mode="dark"] .navbar.bg-white,
    html[data-bh-look="glass"][data-bh-mode="dark"] .navbar-light { background-color: color-mix(in srgb, var(--c-ink-4) 66%, transparent) !important; }
    html[data-bh-look="glass"][data-bh-mode="dark"] .card, html[data-bh-look="glass"][data-bh-mode="dark"] .testimonial-item,
    html[data-bh-look="glass"][data-bh-mode="dark"] .team-item, html[data-bh-look="glass"][data-bh-mode="dark"] .service-item,
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-donate-card, html[data-bh-look="glass"][data-bh-mode="dark"] .bh-quiz,
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-dua-files, html[data-bh-look="glass"][data-bh-mode="dark"] .bh-lib-card {
        background: linear-gradient(150deg, var(--gl-a), var(--gl-b)); border-color: var(--gl-line); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .card::after, html[data-bh-look="glass"][data-bh-mode="dark"] .bh-donate-card::after {
        background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), rgba(var(--rgb-accent-light), .12) 45%, transparent 70%); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .dropdown-menu, html[data-bh-look="glass"][data-bh-mode="dark"] .navbar .dropdown-menu {
        background: linear-gradient(160deg, var(--gl-a), var(--gl-b)) !important; }
    html[data-bh-look="glass"][data-bh-mode="dark"] .container-fluid.bg-white:not(.bh-navwrap), html[data-bh-look="glass"][data-bh-mode="dark"] .container-xxl.bg-white,
    html[data-bh-look="glass"][data-bh-mode="dark"] section.bg-white, html[data-bh-look="glass"][data-bh-mode="dark"] .container-fluid.bg-light,
    html[data-bh-look="glass"][data-bh-mode="dark"] .container-xxl.bg-light { background-color: color-mix(in srgb, var(--bh-d-bg-2) 55%, transparent) !important; }
    html[data-bh-look="glass"][data-bh-mode="dark"] .product, html[data-bh-look="glass"][data-bh-mode="dark"] .bh-hadith-day,
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-members { background: linear-gradient(180deg, color-mix(in srgb, var(--bh-d-bg-2) 60%, transparent), transparent); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .form-control, html[data-bh-look="glass"][data-bh-mode="dark"] .form-select {
        background-color: color-mix(in srgb, var(--bh-d-bg-2) 70%, transparent); border-color: var(--gl-line); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .btn-outline-primary { background: rgba(255,255,255,.06); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .section-title h1, html[data-bh-look="glass"][data-bh-mode="dark"] .section-title .display-6 { text-shadow: none; }
}

/* ---------- phones: lighter blur (battery), fewer moving parts ---------- */
@media (max-width: 767.98px) {
    html[data-bh-look="glass"] { --gl-blur: 10px; }
    .bh-gl-waves { height: 44px; } html[data-bh-look="glass"] .bh-welcome .bh-gl-waves { height: 58px; }
    .bh-gl-wave.w3 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-bh-look="glass"] body::before, html[data-bh-look="glass"] .bh-navwrap::after, html[data-bh-look="glass"] .bh-welcome::after, .bh-gl-wave, .bh-gl-ripple { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    html[data-bh-look="glass"] .card, html[data-bh-look="glass"] .bh-donate-card, html[data-bh-look="glass"] .navbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* waves in the page title bands stay below the title text */
.bh-header .bh-gl-waves { height: 38px; z-index: 0; }
@media (max-width: 767.98px) { .bh-header .bh-gl-waves { height: 26px; } }

/* ======================================================================================================
   LIQUID WATER MENU BAR (glass look): the bar is a floating drop of water. Inside: two slowly moving water
   surfaces, a light that travels across, and a "drop" that flows (stretches) from one menu item to the next.
   glass.js adds .bh-gl-liquid (water layer) and .bh-gl-blob (the drop). Menu items, dropdowns and links are unchanged.
   ====================================================================================================== */
html[data-bh-look="glass"] .bh-navwrap.sticky-top.bg-white {
    background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0; box-shadow: none; padding-block: 8px 4px;
}
html[data-bh-look="glass"] .bh-navwrap::after { display: none; }
html[data-bh-look="glass"] .bh-navwrap > .navbar {
    position: relative; isolation: isolate; max-width: 1720px; margin-inline: auto;
    border: 1px solid rgba(255,255,255,.7); border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(var(--rgb-bg), .42) 44%, rgba(var(--rgb-accent-light), .30) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.9); backdrop-filter: blur(20px) saturate(1.9);
    box-shadow: 0 20px 40px -22px rgba(var(--rgb-primary), .6), 0 3px 8px -4px rgba(var(--rgb-primary), .25),
                inset 0 2px 0 rgba(255,255,255,.85), inset 0 -12px 22px -14px rgba(var(--rgb-accent-light), .95);
}
html[data-bh-look="glass"] .bh-navwrap .bh-gl-liquid { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.bh-gl-liquid .lq-glow {
    position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
    background: radial-gradient(210px 110px at var(--nx, 50%) var(--ny, 0%), rgba(255,255,255,.75), rgba(var(--rgb-accent-light), .22) 55%, transparent 75%);
}
.bh-navwrap > .navbar:hover .lq-glow { opacity: 1; }
.bh-gl-liquid .lq-sheen {
    position: absolute; top: -40%; bottom: -40%; left: 0; width: 38%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg); animation: bh-gl-sheen 11s ease-in-out infinite;
}
@keyframes bh-gl-sheen { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
.bh-gl-liquid .lq-wave { position: absolute; left: 0; bottom: -1px; width: 200%; height: 52%; will-change: transform; animation: bh-gl-lq 13s linear infinite; }
.bh-gl-liquid .lq-wave path { fill: rgba(var(--rgb-accent-light), .42); }
.bh-gl-liquid .lq-wave.b { height: 40%; bottom: 2px; animation-duration: 19s; animation-direction: reverse; }
.bh-gl-liquid .lq-wave.b path { fill: rgba(255,255,255,.55); }
@keyframes bh-gl-lq { to { transform: translateX(-50%); } }
.bh-gl-liquid .lq-ring {
    position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(var(--rgb-accent-light), .35), inset 0 0 8px rgba(255,255,255,.5);
    animation: bh-gl-ring 1.1s cubic-bezier(.15,.7,.25,1) forwards;
}
@keyframes bh-gl-ring { to { transform: scale(20); opacity: 0; } }

/* the water drop that flows between the menu items (wide screens only: the menu is a row there) */
html[data-bh-look="glass"] .bh-nav-main { position: relative; }
html[data-bh-look="glass"] .bh-nav-main > .nav-link, html[data-bh-look="glass"] .bh-nav-main > .nav-item { position: relative; z-index: 1; }
.bh-gl-blob {
    position: absolute; z-index: 0; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; pointer-events: none;
    border-radius: 58% 42% 56% 44% / 52% 58% 42% 48%;
    background: radial-gradient(130% 150% at 30% 12%, rgba(255,255,255,.95), rgba(var(--rgb-accent-light), .55) 52%, rgba(var(--rgb-turq), .42) 100%);
    box-shadow: inset 0 2px 1px rgba(255,255,255,.95), inset 0 -7px 12px rgba(var(--rgb-primary), .22), 0 10px 20px -10px rgba(var(--rgb-primary), .7);
    animation: bh-gl-morph 5.5s ease-in-out infinite alternate; will-change: left, right;
}
.bh-gl-blob.on { opacity: 1; }
@keyframes bh-gl-morph {
    0% { border-radius: 58% 42% 56% 44% / 52% 58% 42% 48%; }
    50% { border-radius: 46% 54% 44% 56% / 58% 46% 54% 42%; }
    100% { border-radius: 54% 46% 60% 40% / 44% 54% 46% 56%; }
}
@media (max-width: 1199.98px) {
    .bh-gl-blob { display: none; }
    html[data-bh-look="glass"] .bh-navwrap > .navbar { border-radius: 26px; }
}
@media (max-width: 767.98px) {
    html[data-bh-look="glass"] .bh-navwrap.sticky-top.bg-white { padding-block: 6px 2px; }
    .bh-gl-liquid .lq-wave.b { display: none; }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-navwrap.sticky-top.bg-white { background: transparent !important; }
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-navwrap > .navbar {
        border-color: rgba(255,255,255,.18);
        background: linear-gradient(180deg, color-mix(in srgb, var(--bh-d-surface-2) 72%, transparent) 0%, color-mix(in srgb, var(--bh-d-bg-2) 58%, transparent) 50%, color-mix(in srgb, var(--c-primary) 46%, transparent) 100%) !important;
        box-shadow: 0 22px 44px -22px rgba(0,0,0,.85), 0 3px 8px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -12px 22px -14px rgba(var(--rgb-accent-light), .55);
    }
    html[data-bh-look="glass"][data-bh-mode="dark"] .lq-wave path { fill: rgba(var(--rgb-accent-light), .22); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .lq-wave.b path { fill: rgba(255,255,255,.1); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .lq-sheen { background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .lq-glow { background: radial-gradient(210px 110px at var(--nx, 50%) var(--ny, 0%), rgba(255,255,255,.22), rgba(var(--rgb-accent-light), .16) 55%, transparent 75%); }
    html[data-bh-look="glass"][data-bh-mode="dark"] .bh-gl-blob {
        background: radial-gradient(130% 150% at 30% 12%, rgba(255,255,255,.34), rgba(var(--rgb-accent-light), .34) 52%, rgba(var(--rgb-turq), .3) 100%);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -7px 12px rgba(0,0,0,.25), 0 10px 20px -10px rgba(0,0,0,.7);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bh-gl-liquid .lq-sheen, .bh-gl-liquid .lq-wave, .bh-gl-liquid .lq-ring, .bh-gl-blob { animation: none !important; }
}