/* ==========================
   THEMES
   بک‌گراند مه‌آلود و شکیل با رنگ‌بندی سراسری
========================== */

html{
    min-height:100%;
    background:#0D47A1;
    overscroll-behavior-y:none;
}

body{
    --theme-color: var(--main-color, #0f172a);
    min-height:100vh;
    background-color:var(--theme-color);
    background:
        radial-gradient(48% 32% at 50% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 72%),
        linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(7,12,24,.10) 36%, rgba(4,7,15,.28) 100%),
        linear-gradient(160deg, var(--theme-color) 0%, var(--theme-color) 72%, rgba(5,8,22,.72) 100%);
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% 100%;
    transition:background .35s ease, color .25s ease;
    position:relative;
    isolation:isolate;
}

/* لایه‌های مه‌آلود */
body::before,
body::after{
    content:"";
    position:fixed;
    inset:-8%;
    pointer-events:none;
    z-index:0;
}

body::before{
    opacity:.95;
    background:
        radial-gradient(46% 34% at 12% 14%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,0) 72%),
        radial-gradient(38% 28% at 86% 10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 24%, rgba(255,255,255,0) 74%),
        radial-gradient(52% 36% at 54% 76%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 74%),
        radial-gradient(34% 26% at 22% 82%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 24%, rgba(255,255,255,0) 76%);
    filter:blur(28px);
}

body::after{
    opacity:.82;
    background:
        radial-gradient(62% 40% at 28% 36%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 32%, rgba(255,255,255,0) 78%),
        radial-gradient(54% 38% at 74% 58%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 80%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(255,255,255,.05) 100%);
    filter:blur(54px);
}
/* آبی‌ها */
body.theme1  { --main-color:#0D47A1; }
body.theme2  { --main-color:#1976D2; }
body.theme3  { --main-color:#0B3D91; }
body.theme4  { --main-color:#1565C0; }
body.theme5  { --main-color:#00ACC1; }
body.theme6  { --main-color:#283593; }
body.theme7  { --main-color:#4FC3F7; }
body.theme8  { --main-color:#1A237E; }

/* سبزها */
body.theme9  { --main-color:#2E7D32; }
body.theme10 { --main-color:#1B5E20; }
body.theme11 { --main-color:#43A047; }
body.theme12 { --main-color:#66BB6A; }
body.theme13 { --main-color:#76FF03; }
body.theme14 { --main-color:#556B2F; }

/* قرمز / نارنجی / صورتی */
body.theme15 { --main-color:#C62828; }
body.theme16 { --main-color:#B71C1C; }
body.theme17 { --main-color:#FF7043; }
body.theme18 { --main-color:#F4511E; }
body.theme19 { --main-color:#FB8C00; }
body.theme20 { --main-color:#E91E63; }

/* بنفش‌ها */
body.theme21 { --main-color:#6A1B9A; }
body.theme22 { --main-color:#4A148C; }
body.theme23 { --main-color:#BA68C8; }
body.theme24 { --main-color:#8E24AA; }
body.theme25 { --main-color:#CE93D8; }
body.theme26 { --main-color:#3949AB; }

/* زرد / طلایی / قهوه‌ای */
body.theme27 { --main-color:#FDD835; }
body.theme28 { --main-color:#FBC02D; }
body.theme29 { --main-color:#FFC107; }
body.theme30 { --main-color:#8D6E63; }
body.theme31 { --main-color:#5D4037; }
body.theme32 { --main-color:#A1887F; }

/* طوسی‌ها / نئوترال */
body.theme33 { --main-color:#BDBDBD; }
body.theme34 { --main-color:#9E9E9E; }
body.theme35 { --main-color:#757575; }
body.theme36 { --main-color:#424242; }
body.theme37 { --main-color:#212121; }
body.theme38 { --main-color:#CFD8DC; }
body.theme39 { --main-color:#78909C; }
body.theme40 { --main-color:#90A4AE; }


/* ==========================
   GLOBAL THEME LAYER SUPPORT
   لایه مه‌آلود زیر تمام اجزای صفحات می‌ماند
========================== */
body > :not(.share-btn):not(.floating-buttons):not(.search-results){
    position:relative;
    z-index:1;
}

.theme-accent-bg{
    background:var(--theme-color) !important;
}

.theme-accent-text{
    color:var(--theme-color) !important;
}

@media(max-width:768px){
    html{
        background:#0D47A1;
        overscroll-behavior-y:none;
    }

    body{
        /* نسخه موبایل بدون لایه fixed و blur سنگین؛ برای جلوگیری از نوار تیره و پرش هنگام اسکرول */
        background-color:var(--theme-color) !important;
        background:
            radial-gradient(58% 34% at 14% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.11) 34%, rgba(255,255,255,0) 76%),
            radial-gradient(52% 30% at 88% 16%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 74%),
            radial-gradient(62% 38% at 54% 78%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 78%),
            linear-gradient(160deg, rgba(255,255,255,.04) 0%, rgba(7,12,24,.10) 42%, rgba(4,7,15,.30) 100%),
            linear-gradient(160deg, var(--theme-color) 0%, var(--theme-color) 74%, rgba(5,8,22,.60) 100%) !important;
        background-attachment:scroll !important;
        background-repeat:no-repeat !important;
        background-position:top center !important;
        background-size:100% auto !important;
        overscroll-behavior-y:none;
        -webkit-font-smoothing:antialiased;
    }

    body::before,
    body::after{
        display:none !important;
    }
}

/* ==========================
   FLOATING ACTION BUTTONS
   دکمه معرفی و اشتراک‌گذاری باید همیشه معلق بماند
========================== */
.share-btn{
    position:fixed !important;
    right:12px !important;
    bottom:18px !important;
    z-index:9999 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    margin:0 !important;
    padding:10px 14px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.28) !important;
    color:#fff !important;
    background:rgba(15,23,42,.58) !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 12px 32px rgba(0,0,0,.38) !important;
    cursor:pointer;
    font-size:13px !important;
    font-weight:900;
    white-space:nowrap;
    text-decoration:none;
}

.share-btn:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.24) !important;
}

@media(max-width:420px){
    .share-btn{
        right:10px !important;
        bottom:14px !important;
        font-size:12px !important;
        padding:9px 12px !important;
    }
}


/* محافظ موبایل: دکمه اشتراک همیشه روی viewport شناور بماند */
@media(max-width:768px){
    .share-btn{
        position:fixed !important;
        right:10px !important;
        bottom:max(14px, env(safe-area-inset-bottom)) !important;
        z-index:2147483000 !important;
        transform:none !important;
        will-change:auto !important;
    }
}

/* ==========================
   AUTO TEXT CONTRAST SUPPORT
   خوانایی متن بر اساس پس‌زمینه همان بخش به صورت خودکار تنظیم می‌شود.
========================== */
body:not(.settings-page){
    color:#f8fafc;
}

[data-auto-contrast="dark"]{
    --auto-text:#f8fafc;
    --auto-muted:rgba(248,250,252,.72);
    color:var(--auto-text);
}

[data-auto-contrast="light"]{
    --auto-text:#0f172a;
    --auto-muted:rgba(15,23,42,.70);
    color:var(--auto-text);
}

[data-auto-contrast] :where(
    h1,h2,h3,h4,h5,h6,p,span,a,div,li,label,strong,small,th,td,
    .title,.subtitle,.cat-title,.cat-meta,.product-title,.product-price,
    .product-spec-title,.product-desc-title,.product-spec-table th,.product-spec-table td,
    .product-desc-body,.breadcrumb,.current,.sep
):not(:where(
    button,button *,input,textarea,select,option,
    .btn,.btn *,.button,.button *,
    .share-btn,.share-btn *,
    .social-option-direct,.social-option-direct *,
    .social-option-group,.social-option-group *,
    .phone-call-btn,.phone-call-btn *,
    .phone-close-btn,.phone-close-btn *,
    .close-btn,.close-btn *,
    .badge,.badge *,
    .status,.status *
)){
    color:var(--auto-text);
}

[data-auto-contrast] :where(.muted,.hint,.subtitle,.cat-meta,.breadcrumb .sep,.product-desc-body small):not(:where(
    button,button *,.btn,.btn *,.button,.button *
)){
    color:var(--auto-muted);
}

body:not(.settings-page) :where(input::placeholder,textarea::placeholder){
    color:rgba(148,163,184,.82);
}

body:not(.settings-page) .theme-accent-bg{
    background:var(--theme-color, var(--main-color, #0f172a)) !important;
}

body:not(.settings-page) .theme-accent-text{
    color:var(--theme-color, var(--main-color, #0f172a)) !important;
}

body:not(.settings-page) .site-preloader{
    background-color:var(--theme-color, var(--main-color, #0f172a)) !important;
}


/* ==========================
   GLOBAL FLAT OVERRIDES
   حالت فلت + خوانایی بالا
========================== */
html,
body{
    background-image:none !important;
}

body{
    background:var(--theme-color, #0f172a) !important;
    color:var(--theme-text, #f8fafc) !important;
    transition:background .25s ease, color .25s ease;
}

body::before,
body::after{
    display:none !important;
    background:none !important;
}

body:not(.settings-page){
    --glass-bg:var(--theme-surface, rgba(255,255,255,.10));
    --glass-bg-strong:var(--theme-surface-strong, rgba(255,255,255,.16));
    --glass-border:var(--theme-border, rgba(255,255,255,.18));
    --text-main:var(--theme-text, #f8fafc);
    --text-soft:var(--theme-text-soft, rgba(248,250,252,.78));
    --shadow-soft:var(--theme-shadow, 0 14px 32px rgba(0,0,0,.24));
}

body:not(.settings-page) :where(.container,.card,.bank-card,.group,.toolbar-btn,.share-btn,.subcats,.search-results,.search-item,.viewer-title,.viewer-price,.viewer-more,.viewer-nav-row,.viewer-nav,.product-desc-card,.main-image-box,.gallery-thumb){
    background-image:none !important;
}

body:not(.settings-page) :where(.container,.card,.bank-card,.group,.subcats,.search-results,.product-desc-card,.main-image-box,.gallery-thumb,.viewer-nav-row){
    background-color:var(--theme-surface, rgba(255,255,255,.10)) !important;
    border-color:var(--theme-border, rgba(255,255,255,.18)) !important;
    box-shadow:var(--theme-shadow, 0 14px 32px rgba(0,0,0,.24)) !important;
}

body:not(.settings-page) :where(.toolbar-btn,.share-btn,.viewer-more,.viewer-nav,.icons a,.social-icon,.copy-btn,.home-btn,.btn,.button){
    background:var(--theme-button-bg, rgba(255,255,255,.14)) !important;
    color:var(--theme-button-text, #f8fafc) !important;
    border-color:var(--theme-button-border, rgba(255,255,255,.18)) !important;
}

body:not(.settings-page) :where(input,textarea,select){
    background:var(--theme-input-bg, #fff) !important;
    color:var(--theme-input-text, #0f172a) !important;
    border-color:var(--theme-border, rgba(255,255,255,.18)) !important;
}

body:not(.settings-page) :where(input::placeholder,textarea::placeholder){
    color:var(--theme-input-placeholder, rgba(71,85,105,.85)) !important;
}

body:not(.settings-page) :where(h1,h2,h3,h4,h5,h6,p,span,div,a,li,label,strong,small,th,td,.title,.subtitle,.cat-title,.cat-meta,.product-title,.product-price,.product-desc-title,.product-desc-body,.breadcrumb,.current,.sep){
    color:inherit;
}


/* ==========================
   VISIBLE CRYSTAL BACKGROUND
   رنگ اصلی از پنل تغییر رنگ می‌آید؛ این لایه‌ها فقط شکست نور و خطوط کریستالی اضافه می‌کنند
========================== */
body:not(.settings-page){
    background-color:var(--theme-color, #0f172a) !important;
    background-image:
        linear-gradient(125deg, rgba(255,255,255,.075) 0 12%, transparent 12% 38%, rgba(255,255,255,.050) 38% 47%, transparent 47% 100%),
        linear-gradient(35deg, transparent 0 18%, rgba(255,255,255,.050) 18% 25%, transparent 25% 64%, rgba(255,255,255,.060) 64% 70%, transparent 70% 100%) !important;
    background-size:520px 520px, 460px 460px !important;
    background-position:left top, right 120px !important;
    background-repeat:repeat !important;
    background-attachment:fixed !important;
    overflow-x:hidden;
}

body:not(.settings-page)::before,
body:not(.settings-page)::after{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    pointer-events:none !important;
    z-index:0 !important;
}

body:not(.settings-page)::before{
    inset:0 !important;
    background:
        radial-gradient(circle at 17% 10%, rgba(255,255,255,.30), rgba(255,255,255,.12) 16%, transparent 38%),
        radial-gradient(circle at 84% 18%, rgba(255,255,255,.23), rgba(255,255,255,.09) 17%, transparent 39%),
        radial-gradient(circle at 45% 88%, rgba(255,255,255,.18), rgba(255,255,255,.07) 19%, transparent 42%),
        linear-gradient(118deg, transparent 0 31%, rgba(255,255,255,.16) 32%, transparent 34% 100%),
        linear-gradient(56deg, transparent 0 66%, rgba(255,255,255,.12) 67%, transparent 69% 100%) !important;
    opacity:.88 !important;
}

body:not(.settings-page)::after{
    inset:-14% !important;
    background:
        linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.18) 28.5%, transparent 30% 100%),
        linear-gradient(25deg, transparent 0 46%, rgba(255,255,255,.12) 46.5%, transparent 48% 100%),
        linear-gradient(152deg, transparent 0 58%, rgba(255,255,255,.10) 58.5%, transparent 60% 100%),
        repeating-linear-gradient(135deg, transparent 0 78px, rgba(255,255,255,.055) 79px, transparent 81px) !important;
    background-size:360px 360px, 420px 420px, 500px 500px, 100% 100% !important;
    background-position:center top, right 70px, left 160px, center !important;
    opacity:.58 !important;
    transform:rotate(-2deg);
    mix-blend-mode:screen;
}

body:not(.settings-page) > :not(.share-btn):not(.floating-buttons):not(.search-results){
    position:relative;
    z-index:1;
}

@media(max-width:768px){
    body:not(.settings-page){
        background-size:390px 390px, 350px 350px !important;
        background-position:left top, right 80px !important;
        background-attachment:fixed !important;
    }
    body:not(.settings-page)::before{
        opacity:.82 !important;
        background:
            radial-gradient(circle at 14% 6%, rgba(255,255,255,.28), rgba(255,255,255,.11) 18%, transparent 43%),
            radial-gradient(circle at 88% 22%, rgba(255,255,255,.20), rgba(255,255,255,.08) 18%, transparent 42%),
            linear-gradient(116deg, transparent 0 33%, rgba(255,255,255,.15) 34%, transparent 36% 100%),
            linear-gradient(54deg, transparent 0 68%, rgba(255,255,255,.11) 69%, transparent 71% 100%) !important;
    }
    body:not(.settings-page)::after{
        opacity:.48 !important;
        background-size:300px 300px, 340px 340px, 400px 400px, 100% 100% !important;
    }
}


/* ==========================
   SIMPLE FLAT UI SURFACES
   گرادینت فقط برای بک‌گراند کریستالی کلی می‌ماند؛ اجزای سایت ساده و فلت هستند
========================== */
body:not(.settings-page) :where(
    .container,.group,.contact-group,.about-group,.section,.bank-card,.pay-box,
    .catalog-hero-inner,.hero-logo-card,.clean-hero-content,.home-section-head,
    .cat,.icons a,.social-icon,.phone-slide-open,.phone-football-card,.phone-football-info,
    .social-football-card,.social-football-info,.social-option,.phone-football-call,.phone-football-close,.social-football-close,
    .category-toolbar,.subcats,.toolbar-btn,.card,.product-viewer-card,.viewer-title,.viewer-price,.viewer-more,.viewer-nav-row,.viewer-nav,
    .breadcrumb,.title,.back-btn,.share-btn,.main-image-box,.gallery-thumb,.product-desc-card,.product-spec-card,
    .search-results,.search-item,.search-box,.search-wrap,.customer-card,.customer-club-card,.club-box,.form-box,.content-box,.info-card
){
    background-image:none !important;
}

body:not(.settings-page) :where(
    .container,.group,.contact-group,.about-group,.section,.bank-card,.pay-box,
    .catalog-hero-inner,.hero-logo-card,.clean-hero-content,.home-section-head,
    .phone-football-card,.phone-football-info,.social-football-card,.social-football-info,
    .category-toolbar,.subcats,.card,.product-viewer-card,.viewer-title,.viewer-price,.viewer-nav-row,
    .breadcrumb,.title,.main-image-box,.gallery-thumb,.product-desc-card,.product-spec-card
){
    background-color:var(--theme-surface, rgba(255,255,255,.10)) !important;
}

body:not(.settings-page) :where(.phone-football-call,.social-option-direct,.social-option-group){
    background:#16a34a !important;
}

body:not(.settings-page) :where(.phone-football-close,.social-football-close){
    background:#dc2626 !important;
}

body:not(.settings-page) :where(.toolbar-btn,.share-btn,.viewer-more,.viewer-nav,.icons a,.social-icon,.phone-slide-open,.copy-btn,.home-btn,.btn,.button){
    background-image:none !important;
}

body:not(.settings-page) :where(.phone-football-card,.social-football-card,.social-option,.phone-football-call,.phone-football-close,.social-football-close)::before,
body:not(.settings-page) :where(.phone-football-card,.social-football-card,.social-option,.phone-football-call,.phone-football-close,.social-football-close)::after,
body:not(.settings-page) :where(.cat,.pay-box,.bank-card,.section)::before,
body:not(.settings-page) :where(.cat,.pay-box,.bank-card,.section)::after{
    background-image:none !important;
}


/* share buttons: black glass with white text */
.share-btn,
button.toolbar-btn[onclick*="share"]{
    background:rgba(15,23,42,.76) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}
.share-btn:hover,
button.toolbar-btn[onclick*="share"]:hover{
    background:rgba(15,23,42,.88) !important;
}
.share-btn *,
button.toolbar-btn[onclick*="share"] *{
    color:#ffffff !important;
}


/* ==== FINAL REQUEST: remove decorative background, keep solid theme color ==== */
html,
body:not(.settings-page){
    background-color:var(--theme-color, #0f172a) !important;
    background-image:none !important;
    background-attachment:scroll !important;
    background-repeat:no-repeat !important;
}
body:not(.settings-page)::before,
body:not(.settings-page)::after{
    content:none !important;
    display:none !important;
    background:none !important;
}

/* all floating/share buttons: black glass + white text */
body:not(.settings-page) .share-btn,
body:not(.settings-page) button.toolbar-btn[onclick*="share"],
body:not(.settings-page) .toolbar-btn[onclick*="share"],
body:not(.settings-page) .viewer-more{
    background:rgba(15,23,42,.78) !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.28) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.30) !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}
body:not(.settings-page) .share-btn:hover,
body:not(.settings-page) button.toolbar-btn[onclick*="share"]:hover,
body:not(.settings-page) .toolbar-btn[onclick*="share"]:hover,
body:not(.settings-page) .viewer-more:hover{
    background:rgba(15,23,42,.90) !important;
    color:#ffffff !important;
}

/* about and address sections must stay white */
body:not(.settings-page).home-catalog .about-group .section{
    background:#ffffff !important;
    background-image:none !important;
    color:#111827 !important;
    border:1px solid rgba(148,163,184,.35) !important;
    box-shadow:0 12px 28px rgba(15,23,42,.10) !important;
}

body:not(.settings-page).home-catalog .about-group .section,
body:not(.settings-page).home-catalog .about-group .section *{
    color:#111827 !important;
}


/* ===== generic title badges ===== */
body:not(.settings-page) .container > .title,
body:not(.settings-page) .section-title,
body:not(.settings-page) .category-page-title{
    display:table;
    margin-right:auto;
    margin-left:auto;
    padding:10px 18px;
    border-radius:16px;
    background:rgba(15,23,42,.78);
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 10px 24px rgba(15,23,42,.14);
    text-align:center;
    line-height:1.7;
}

body:not(.settings-page) .category-page-title{
    background:rgba(15,23,42,.64);
    padding:8px 16px;
    border-radius:14px;
}