/* ═══════════════════════════════════════════════════════════
   Public matte glass — theme-aware (works with --t-* dynamic colors)
   Reference: frosted panels + luminous atmosphere, Apple-like depth
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Matte frost fill — tinted by card/theme, never hard-coded orange.
       Opaque enough to read as a *surface*: below ~60% a light card over the
       tinted atmosphere just looks washed out instead of frosted. */
    --glass-bg:
        color-mix(in srgb, var(--t-card-bg) 66%, transparent);
    --glass-bg-strong:
        color-mix(in srgb, var(--t-card-bg) 82%, transparent);
    --glass-bg-soft:
        color-mix(in srgb, var(--t-card-bg) 46%, transparent);
    /* Chrome (header / footer / dark heroes). A dark tint at ~50% over a light
       page averages to flat grey — keep it dense and let sheen + glow + edge
       light carry the glass feel. */
    --glass-bg-dark:
        color-mix(in srgb, var(--t-header-bg) 90%, transparent);
    --glass-bg-dark-strong:
        color-mix(in srgb, var(--t-header-bg) 95%, transparent);
    --glass-bg-footer:
        color-mix(in srgb, var(--t-footer-bg) 94%, transparent);

    /* Light catching the top of the material + a theme-coloured glow inside it */
    --glass-sheen:
        linear-gradient(180deg,
            color-mix(in srgb, #fff 7%, transparent),
            transparent 38%);
    --glass-sheen-light:
        linear-gradient(165deg,
            color-mix(in srgb, #fff 42%, transparent),
            color-mix(in srgb, #fff 0%, transparent) 48%);
    --chrome-glow:
        radial-gradient(90% 160% at 100% -30%, color-mix(in srgb, var(--t-primary) 30%, transparent), transparent 60%),
        radial-gradient(70% 140% at 0% 130%, color-mix(in srgb, var(--t-primary-dark) 22%, transparent), transparent 60%);
    --glass-fill: var(--glass-sheen-light), var(--glass-bg);

    --glass-border:
        color-mix(in srgb, #ffffff 42%, var(--t-border));
    --glass-border-bright:
        color-mix(in srgb, #ffffff 62%, transparent);
    --glass-border-dark:
        color-mix(in srgb, #ffffff 14%, transparent);

    --glass-blur: 22px;
    --glass-blur-strong: 28px;
    --glass-sat: 165%;
    --glass-radius: 22px;
    --glass-radius-sm: 16px;

    --glass-shadow:
        0 10px 36px color-mix(in srgb, var(--t-text-base) 10%, transparent),
        0 1px 0 color-mix(in srgb, #ffffff 55%, transparent) inset;
    --glass-shadow-lift:
        0 18px 48px color-mix(in srgb, var(--t-text-base) 14%, transparent),
        0 1px 0 color-mix(in srgb, #ffffff 65%, transparent) inset;

    /* Atmospheric glow from theme primary — like the warm bokeh in the ref */
    --atmosphere-a: color-mix(in srgb, var(--t-primary) 34%, transparent);
    --atmosphere-b: color-mix(in srgb, var(--t-primary-dark) 22%, transparent);
    --atmosphere-c: color-mix(in srgb, var(--t-primary-light) 90%, transparent);

    --spring: cubic-bezier(0.22, 1, 0.36, 1);
    --press: cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ── Atmosphere (fixed luminous wash; glass reads against it) ── */
body {
    position: relative;
    min-height: 100vh;
    background-color: var(--t-body-bg);
    background-image:
        radial-gradient(ellipse 90% 55% at 8% -8%, var(--atmosphere-a), transparent 58%),
        radial-gradient(ellipse 70% 45% at 96% 4%, var(--atmosphere-b), transparent 52%),
        radial-gradient(ellipse 55% 35% at 50% 108%, var(--atmosphere-c), transparent 60%),
        radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--t-primary) 10%, transparent), transparent 42%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--t-body-bg) 88%, var(--t-primary-light)),
            var(--t-body-bg) 40%,
            color-mix(in srgb, var(--t-body-bg) 92%, var(--t-primary-light)));
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle 180px at 18% 28%, color-mix(in srgb, #fff 55%, var(--atmosphere-a)), transparent 70%),
        radial-gradient(circle 220px at 82% 62%, color-mix(in srgb, #fff 40%, var(--atmosphere-b)), transparent 72%);
    opacity: .55;
    filter: blur(2px);
}

body > * {
    position: relative;
    z-index: 1;
}

/* Shared matte glass mixin via utility */
.glass-surface,
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

.glass-surface--strong {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
}

/* ── HEADER: frosted chrome ──
   The material lives on ::before, not on the header itself: an element with
   backdrop-filter becomes a "backdrop root", so the mobile menu / mega panel
   inside it could only blur the header's own pixels, not the page. */
.site-header {
    position: sticky !important;   /* layout.css drops to relative ≤1499px — then nothing ever passes under the glass */
    top: 0;
    isolation: isolate;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--glass-border-dark);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--t-header-bg) 30%, transparent);
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--glass-sheen), var(--chrome-glow), var(--glass-bg-dark);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}

.header-nav .h-link {
    border-radius: 12px;
    transition: background .18s var(--spring), color .18s var(--spring), transform .15s var(--press);
}
.header-nav .h-link:active {
    transform: scale(0.97);
}
.header-nav .h-link:hover {
    background: color-mix(in srgb, #fff 12%, transparent);
}

.h-dropdown,
.mega-panel {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lift) !important;
    border-radius: var(--glass-radius-sm) !important;
}

/* Mobile nav glass (already partially glass — reinforce) */
.mobile-nav-panel {
    background: var(--glass-bg-dark-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%) !important;
    border-left: 1px solid var(--glass-border-dark);
}

/* Hamburger panel (≤1499px) — theme header tint instead of the fixed navy */
@media (max-width: 1499px) {
    .header-nav {
        background: var(--glass-sheen), var(--glass-bg-dark-strong) !important;
        border-color: var(--glass-border-dark) !important;
    }
}

/* ── FOOTER: same chrome material, anchored to the bottom ── */
.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--glass-sheen), var(--chrome-glow), var(--glass-bg-footer) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
    border-top: 1px solid var(--glass-border-dark);
    border-radius: 28px 28px 0 0;
    box-shadow:
        0 -12px 40px color-mix(in srgb, var(--t-footer-bg) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
    color: color-mix(in srgb, var(--t-nav-text) 82%, transparent);
}
.site-footer p,
.footer-col ul li a,
.footer-bottom .footer-credit,
.footer-bottom .footer-credit a {
    color: color-mix(in srgb, var(--t-nav-text) 82%, transparent);
}
.footer-bottom .f-links a {
    color: color-mix(in srgb, var(--t-nav-text) 62%, transparent);
}
.footer-col ul li a:hover,
.footer-bottom .f-links a:hover,
.footer-bottom .footer-credit a:hover {
    color: var(--t-primary);
}
.footer-top {
    border-bottom-color: var(--glass-border-dark);
}

/* Glass tiles sitting on the dark chrome */
.site-footer .trust-item,
.site-footer .t-icon {
    background: var(--glass-sheen), color-mix(in srgb, #fff 7%, transparent) !important;
    border: 1px solid var(--glass-border-dark);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.site-footer .t-icon { color: var(--t-primary); }
.site-footer a.t-icon:hover {
    background: var(--t-primary) !important;
    color: #fff;
}
.trust-item {
    border: 1px solid var(--glass-border-dark);
    backdrop-filter: blur(10px);
}

/* ── Product cards ── */
.pc-wrap {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    transition:
        transform .4s var(--spring),
        box-shadow .4s var(--spring),
        border-color .25s ease !important;
}
.pc-wrap:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: var(--glass-shadow-lift) !important;
    border-color: var(--glass-border-bright) !important;
    border-top-color: var(--t-primary) !important;
}
.pc-wrap:active {
    transform: translateY(-2px) scale(0.99);
    transition-duration: .12s;
}
/* لبهٔ بالای خود کارت، قبل از عکس — رنگ تم، با درخشش نازک مثل نور روی لبهٔ شیشه */
.pc-wrap {
    border-top: 3px solid var(--t-primary) !important;
    box-shadow:
        var(--glass-shadow),
        inset 0 1px 0 color-mix(in srgb, #fff 72%, var(--t-primary)) !important;
}

.pc-compare-btn,
.pc-wishlist-btn {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-color: var(--glass-border) !important;
}

/* ── Global public panels (real class names from page CSS) ── */
.auth-box,
.ct-empty,
.ct-item,
.ct-sum-box,
.ct-form-section,
.ct-coupon-box,
.about-empty,
.about-body,
.about-hero,
.co-form-box,
.co-info-card,
.faq-hero,
.faq-item,
.faq-contact-card,
.faq-quick-links,
.faq-empty,
.pl-sidebar-box,
.pl-price-box,
.pl-empty,
.pl-sortbar,
.pl-attr-group,
.pd-img-box,
.pd-price-box,
.pd-attrs,
.bp-card,
.bp-empty,
.bp-listen,
.bp-docs,
.ai-search-hero,
.ai-explanation,
.ai-product-card,
.ai-no-results,
.trust-bar,
.stat-item,
.cat-card,
.hero-fallback {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* Dark-tinted glass heroes (header-bg based — follows theme) */
.about-hero,
.faq-hero,
.co-info-card {
    background: var(--glass-sheen), var(--chrome-glow), var(--glass-bg-dark) !important;
    color: var(--t-nav-text);
    border-color: var(--glass-border-dark) !important;
    box-shadow:
        0 12px 40px color-mix(in srgb, #000 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
}

.trust-bar,
.stat-item,
.cat-card {
    border-radius: var(--glass-radius-sm) !important;
}

.cat-card,
.stat-item,
.bp-card,
.ct-item {
    transition: transform .35s var(--spring), box-shadow .35s var(--spring), border-color .25s ease !important;
}
.cat-card:hover,
.stat-item:hover,
.bp-card:hover,
.ct-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow-lift) !important;
    border-color: var(--glass-border-bright) !important;
}

/* Product list sidebar / filters */
.pl-filter-group,
.pl-cat-list,
.pl-attr-box {
    background: transparent;
}

/* Cart summary sticky glass */
.ct-sum-box,
.ct-form-section,
.ct-coupon-box {
    border-radius: var(--glass-radius-sm) !important;
}

/* Contact form head strip */
.co-form-head {
    background: color-mix(in srgb, var(--t-card-bg) 35%, transparent) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px);
}

/* Auth extras */
.auth-google-btn {
    background: var(--glass-bg-strong) !important;
    border-color: var(--glass-border) !important;
    backdrop-filter: blur(10px);
}

/* Blog article body — soften, don't force padding if already styled */
.bp-article-content {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
}

.bp-comments-wrap {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: var(--glass-shadow);
    padding: 20px;
}

/* Product details info column — only when not already padded heavily */
.pd-info-col > .pd-price-box,
.pd-attrs {
    border-radius: var(--glass-radius-sm);
}

/* Hero slider glass controls already partial — reinforce matte */
.slider-arrow {
    background: color-mix(in srgb, #fff 22%, transparent) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid color-mix(in srgb, #fff 40%, transparent) !important;
    transition: transform .2s var(--press), background .2s ease !important;
}
.slider-arrow:active { transform: translateY(-50%) scale(0.94); }

.slide-btn {
    transition: transform .25s var(--spring), box-shadow .25s ease, background .2s ease !important;
}
.slide-btn:active { transform: scale(0.97); }

/* Forms on glass */
.auth-field input,
.auth-field .form-control,
.ct-qty input,
.contact-form .form-control,
.contact-form textarea,
.pl-search input,
.auth-otp-digit {
    background: var(--glass-bg-soft) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: var(--glass-border) !important;
}

.auth-field input:focus,
.contact-form .form-control:focus,
.contact-form textarea:focus {
    background: var(--glass-bg-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--t-primary) 55%, var(--glass-border)) !important;
}

/* Buttons — glowing primary (theme-aware) */
.btn-primary,
.ct-shop-btn,
.ct-checkout-btn,
.ct-submit-btn,
.auth-submit,
.slide-btn,
.pc-btn,
.hero-cta,
.promo-btn.glow,
.co-submit,
.faq-contact-btn,
.pl-empty-btn,
.pl-price-apply {
    border: 1px solid color-mix(in srgb, #fff 28%, transparent) !important;
    background: linear-gradient(135deg, var(--t-primary), var(--t-primary-dark)) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        0 8px 26px color-mix(in srgb, var(--t-primary) 40%, transparent) !important;
    transition: transform .2s var(--press), filter .18s ease, box-shadow .25s var(--spring) !important;
}
.btn-primary:hover,
.ct-shop-btn:hover,
.ct-checkout-btn:hover,
.ct-submit-btn:hover,
.auth-submit:hover,
.slide-btn:hover,
.pc-btn:hover,
.hero-cta:hover,
.faq-contact-btn:hover,
.pl-empty-btn:hover {
    color: #fff !important;
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 12px 34px color-mix(in srgb, var(--t-primary) 52%, transparent) !important;
}
.btn-primary:active,
.ct-shop-btn:active,
.ct-checkout-btn:active,
.ct-submit-btn:active,
.auth-submit:active,
.slide-btn:active,
.pc-btn:active,
.see-all-btn:active {
    transform: scale(0.97);
}

/* promo-btn on dark banners stays light/shiny */
.promo-btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 8px 28px rgba(0, 0, 0, .22) !important;
}

/* Compare floating bar */
.compare-bar {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow-lift) !important;
}

/* AI chat floating */
.ai-chat-panel,
.ai-chat-window {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Bootstrap cards on public pages */
main .card:not(.admin-card) {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius-sm);
}

/* Text on glass — slightly stronger for vibrancy */
.pc-title,
.auth-title,
.ct-title,
.about-body,
.contact-card {
    color: var(--t-text-base);
}

/* ── Accessibility ── */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg: var(--t-card-bg);
        --glass-bg-strong: var(--t-card-bg);
        --glass-bg-soft: var(--t-card-bg);
        --glass-bg-dark: var(--t-header-bg);
        --glass-bg-dark-strong: var(--t-header-bg);
    }
    body::before { display: none; }
    .site-header,
    .site-footer,
    .pc-wrap,
    .glass-surface,
    .auth-box,
    .ct-item,
    .ct-summary-card,
    .about-body,
    .contact-card,
    .pl-sidebar,
    .pd-info,
    .blog-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-wrap,
    .pc-wrap:hover,
    .pc-wrap:active,
    .header-nav .h-link,
    .slide-btn,
    .slider-arrow,
    .btn-primary,
    .ct-shop-btn,
    .auth-submit {
        transition: none !important;
        transform: none !important;
    }
    body {
        background-attachment: scroll;
    }
}

/* Safari / older: ensure something still looks frosted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --glass-bg: color-mix(in srgb, var(--t-card-bg) 92%, var(--t-primary-light));
        --glass-bg-strong: var(--t-card-bg);
        --glass-bg-dark: color-mix(in srgb, var(--t-header-bg) 94%, #000);
    }
}