/* =========================================================
   اخبار طلا | Price Board — Rebuilt CSS
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --bg:#e9e5df;
  --surface:rgba(255,255,255,.88);
  --surface-hover:rgba(255,255,255,.95);
  --border:rgba(185,152,83,.20);
  --gold:#d4af37;
  --gold-light:#f4e4a6;
  --gold-dark:#8f6b2f;
  --text:#2e2a26;
  --text-light:#756656;
  --green:#16a34a;
  --red:#dc2626;
  --live:#22c55e;
  --radius:18px;
  --card-shadow:0 8px 24px rgba(185,152,83,.14),0 2px 8px rgba(120,100,65,.06);
  --card-shadow-hover:0 12px 30px rgba(185,152,83,.18),0 3px 10px rgba(120,100,65,.07);
}

body {
    direction: rtl;
    min-height: 100vh;

    background: linear-gradient(
        180deg,
        #537F72 100%
    );

    color: var(--text);

    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;

    transition:
        background .35s ease,
        color .35s ease;
}
body.dark{
  --bg:#0f172a;--surface:#18233d;--surface-hover:#1d2a48;
  --border:rgba(255,255,255,.07);--text:#fff;--text-light:#aebbd2;
  --card-shadow:0 10px 28px rgba(0,0,0,.34),0 0 0 1px rgba(212,175,55,.04);
  --card-shadow-hover:0 14px 34px rgba(0,0,0,.42),0 0 0 1px rgba(212,175,55,.08);
  background:radial-gradient(circle at 50% -10%,rgba(37,48,75,.45),rgba(37,48,75,0) 45%),linear-gradient(180deg,#0b1324 0%,#0f172a 50%,#111a2d 100%);
}

img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,h5,h6{font-weight:700}
::selection{background:#d4af37;color:#fff}

.container{position:relative;width:min(1700px,95%);margin:auto;padding:30px 0 48px}

header{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:28px;margin-bottom:30px;padding:18px 22px;border:1px solid rgba(255,255,255,.38);
  border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.22));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 28px rgba(100,85,65,.07);
  transition:background .35s,border-color .35s,box-shadow .35s;
}
body.dark header{background:linear-gradient(135deg,rgba(28,37,61,.94),rgba(18,26,44,.84));border-color:rgba(255,255,255,.06);box-shadow:0 14px 34px rgba(0,0,0,.34)}
.header-right{display:flex;align-items:center;gap:18px}

.logo,.brand-title{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.brand-name{font-family:"Vazirmatn",Tahoma,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#8f6b2f,#c7a35a,#9a7535);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-subtitle{margin-top:5px;font-family:"Vazirmatn",Tahoma,sans-serif;font-size:13px;font-weight:500;color:#77716a;white-space:nowrap}
body.dark .brand-subtitle{color:#aebbd2}
.dot{width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--live);box-shadow:0 0 10px rgba(34,197,94,.4);animation:liveDot 2s infinite}
@keyframes liveDot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.live-box{min-width:165px;display:flex;flex-direction:column;align-items:flex-end;padding:14px 16px;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:rgba(255,255,255,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);user-select:none}
body.dark .live-box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.07)}
.live-status{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:6px;color:var(--green);font-size:13px;font-weight:700}
.live-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--live);box-shadow:0 0 11px rgba(34,197,94,.45);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.45}}
.clock{margin-bottom:4px;color:var(--text);font-size:30px;font-weight:700;letter-spacing:1.5px;font-variant-numeric:tabular-nums}
.update-text{color:var(--text-light);font-size:12px}
#shamsiDate{direction:rtl;unicode-bidi:plaintext;margin-top:4px;color:#888;font-size:11px;font-weight:400;opacity:.8}
body.dark #shamsiDate{color:#aebbd2}

.theme-switch{display:flex;align-items:center;gap:10px}
.theme-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:#f5f2ea;color:#7b5b2a;font-size:20px;cursor:pointer;transition:transform .3s,background .3s,color .3s}
.theme-icon:hover{transform:rotate(15deg)}
body.dark .theme-icon{background:#263248;color:#ffd86b}
.switch{position:relative;display:inline-block;width:64px;height:34px}
.switch input{display:none}
.slider{position:absolute;inset:0;cursor:pointer;border-radius:50px;background:#ddd2c5;box-shadow:inset 0 2px 6px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.1);transition:.35s}
.slider::before{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.18);transition:.35s}
.switch input:checked+.slider{background:#2563eb}.switch input:checked+.slider::before{transform:translateX(30px)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px}

.card{position:relative;min-width:0;overflow:hidden;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--card-shadow);transition:transform .25s,background .28s,border-color .28s,box-shadow .28s}
.card::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,#d4af37,#f4e4a6,#d4af37);opacity:.45}
.card:hover{transform:translateY(-3px);background:var(--surface-hover);border-color:rgba(212,175,55,.30);box-shadow:var(--card-shadow-hover)}
.card:active{transform:scale(.99)}

.icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto 9px;border-radius:14px;background:rgba(255,255,255,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.dark .icon{background:rgba(255,255,255,.05)}
.icon img{width:34px;height:34px;object-fit:contain;transition:transform .3s}
.card:hover .icon img{transform:scale(1.05)}
.title{margin-bottom:6px;color:var(--text-light);text-align:center;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.price{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-bottom:9px;color:var(--text);font-family:"Segoe UI",Arial,sans-serif;font-size:25px;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.price .unit{color:#8b8b8b;font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
body.dark .price .unit{color:#cfcfcf}
.ounce-price{direction:ltr;display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
.ounce-price .currency-symbol{color:#8b6b32;font-size:.9em;font-weight:700;line-height:1}
.ounce-price #ounce-price{font-size:1em}
.rial-symbol{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;margin-right:4px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:8px;font-weight:700;line-height:1;vertical-align:super}
.currency-name{display:inline-block}

.change{width:100%;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 0;border-radius:10px;font-size:12px;font-weight:700}
.change.up{color:#15803d;background:rgba(22,163,74,.10)}
.change.down{color:#dc2626;background:rgba(220,38,38,.10)}

.flash-up{animation:priceUp .7s ease}.flash-down{animation:priceDown .7s ease}
@keyframes priceUp{0%{background:var(--surface)}40%{background:#eaf8ef;box-shadow:0 0 22px rgba(22,163,74,.18),var(--card-shadow)}100%{background:var(--surface)}}
@keyframes priceDown{0%{background:var(--surface)}40%{background:#fceeee;box-shadow:0 0 22px rgba(220,38,38,.15),var(--card-shadow)}100%{background:var(--surface)}}
body.dark .flash-up{animation:priceUpDark .7s ease}body.dark .flash-down{animation:priceDownDark .7s ease}
@keyframes priceUpDark{0%{background:#18233d}40%{background:#21402d}100%{background:#18233d}}
@keyframes priceDownDark{0%{background:#18233d}40%{background:#4a2020}100%{background:#18233d}}

.services{margin-top:40px}
.services h2{margin-bottom:18px;text-align:center;font-size:23px;font-weight:800;background:linear-gradient(135deg,#8f6b2f,#c7a35a,#9a7535);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:125px;padding:20px;border:1px solid rgba(185,152,83,.16);border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 7px 20px rgba(185,152,83,.10);text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.service-card:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.28);box-shadow:0 11px 26px rgba(185,152,83,.15)}
.service-card i{margin-bottom:11px;color:var(--gold);font-size:30px}.service-card span{display:block;font-size:16px;font-weight:700}
.service-card img{width:42px;height:42px;margin-bottom:11px;object-fit:contain}

.market-status{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:40px;color:#15803d;background:#ecfdf5;font-size:13px;font-weight:700}
.market-status::before{content:"";width:9px;height:9px;border-radius:50%;background:#22c55e;animation:pulseBadge 1.5s infinite}
@keyframes pulseBadge{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}
body.dark .market-status{color:#4ade80;background:#173126}
.rate-source{margin-top:8px;color:#8a7c70;font-size:12px;font-weight:500;line-height:1.7;text-align:left;opacity:.9}
body.dark .rate-source{color:#aab7cf}

.fade-in{animation:fadeIn .7s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.card.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:translateX(-100%);animation:loading 1.2s infinite}
body.dark .card.loading::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
@keyframes loading{to{transform:translateX(100%)}}

::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#c8b79e;border:2px solid var(--bg);border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#ae9a7e}
body.dark ::-webkit-scrollbar-thumb{background:#334155}body.dark ::-webkit-scrollbar-thumb:hover{background:#475569}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.container::after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:36px;background:radial-gradient(ellipse,rgba(0,0,0,.035),transparent);pointer-events:none}
body.dark .container::after{background:radial-gradient(ellipse,rgba(255,255,255,.015),transparent)}

/* Desktop theme icon position — mobile remains untouched */
@media (min-width:701px){#themeToggle{position:absolute;top:2px;right:6px;left:auto;margin:0;z-index:20}}

@media (max-width:900px){.container{width:94%}.grid{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}.brand-name{font-size:27px}}

@media (max-width:768px){
  .container{width:96%;padding:12px 0 35px}
  header{flex-direction:column;justify-content:center;align-items:stretch;gap:14px;margin-bottom:20px;padding:14px}
  .header-right{width:100%;justify-content:center}.brand-title{align-items:center;text-align:center}
  .brand-name{font-size:23px}.brand-subtitle{font-size:10px;margin-top:3px}
  .live-box{width:100%;min-width:0;align-items:center;padding:10px 12px}.clock{font-size:24px;letter-spacing:1px}#shamsiDate{font-size:10px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card{padding:10px 10px;border-radius:14px}.icon{width:43px;height:43px;margin-bottom:7px;border-radius:12px}.icon img{width:29px;height:29px}
  .title{margin-bottom:5px;font-size:12px}.price{gap:4px;margin-bottom:7px;font-size:18px}.price .unit{font-size:10px}.rial-symbol{width:12px;height:12px;flex-basis:12px;margin-right:3px;font-size:7px}
  .change{min-height:27px;padding:5px 0;border-radius:9px;font-size:10px}
  .services{margin-top:30px}.services h2{margin-bottom:14px;font-size:20px}.service-grid{grid-template-columns:1fr;gap:10px}.service-card{min-height:100px;padding:16px}.service-card i{font-size:27px;margin-bottom:8px}.service-card span{font-size:14px}.rate-source{font-size:11px}
}

@media (max-width:420px){
  .container{width:97%}.grid{gap:8px}.card{padding:9px 8px}.icon{width:40px;height:40px}.icon img{width:27px;height:27px}.price{font-size:17px}.change{font-size:9px}.brand-name{font-size:21px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body {
    direction: rtl;
    min-height: 100vh;

    background: linear-gradient(
        180deg,
        #537F72 100%
    );

    color: var(--text);

    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;

    transition:
        background .35s ease,
        color .35s ease;
}
#themeToggle,
#themeToggle:hover,
#themeToggle:focus,
#themeToggle:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;

    padding: 0 !important;
    margin: 0 !important;

    position: relative;
    top: -6px;
}
.site-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #35c76f,
        #c9a44c
    );

    box-shadow:
        0 0 0 3px rgba(201, 164, 76, 0.10),
        0 0 12px rgba(201, 164, 76, 0.45);

    animation: livePulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes livePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        box-shadow:
            0 0 0 3px rgba(201, 164, 76, 0.10),
            0 0 10px rgba(201, 164, 76, 0.35);
    }

    50% {
        transform: scale(1.18);
        opacity: .82;
        box-shadow:
            0 0 0 5px rgba(201, 164, 76, 0.04),
            0 0 17px rgba(201, 164, 76, 0.60);
    }
}
/* =========================================
   ماه — گوشه بالا سمت راست
   ========================================= */

#themeToggle {
    position: fixed !important;

    top: 10px !important;
    right: 10px !important;

    left: auto !important;
    bottom: auto !important;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;

    width: auto !important;
    height: auto !important;

    font-size: 18px !important;
    line-height: 1 !important;

    cursor: pointer;

    z-index: 9999;

    /* برعکس کردن ماه */
    transform: scaleX(-1);
}


/* حذف کامل هر نوع هاله هنگام کلیک/هاور */

#themeToggle:hover,
#themeToggle:focus,
#themeToggle:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* اگر ماه داخل span یا i قرار دارد */

#themeToggle span,
#themeToggle i {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}


/* موبایل */

@media (max-width: 700px) {

    #themeToggle {
        top: 10px !important;
        right: 14px !important;

        font-size: 25px !important;
    }

}
.logo .dot {
    display: none !important;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================
   عنوان «اخبار طلا»
   حالت روز و شب
   ========================================= */

/* ☀️ حالت روز */
.brand-name {
    background: none !important;
    background-image: none !important;

    color: #F3D9A2 !important;

    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #F3D9A2 !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.16);

    transition:
        color .35s ease,
        background .35s ease,
        text-shadow .35s ease;
}


/* 🌙 حالت شب — گرادیان طلایی */
body.dark .brand-name {

    background: linear-gradient(
        90deg,
        #F3D9A2,
        #D4AF55,
        #FFE7A3,
        #C9A44C
    ) !important;

    background-size: 200% auto !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    animation:
        goldTitleGradient 4s ease-in-out infinite;

    text-shadow:
        0 0 12px rgba(212, 175, 85, 0.18);
}


/* حرکت خیلی ظریف گرادیان */
@keyframes goldTitleGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}
/* =========================================
   حالت روز - موبایل
   ========================================= */

@media (max-width: 700px) {

    body:not(.dark) .brand-name {

        background: none !important;
        background-image: none !important;

        color: #111111 !important;

        -webkit-background-clip: initial !important;
        background-clip: initial !important;

        -webkit-text-fill-color: #111111 !important;

        text-shadow: none !important;
    }

}
/* =========================================
   زیرعنوان خدمات اخبار طلا
   ========================================= */

.services-subtitle {
    margin-top: 8px;

    text-align: center;

    font-size: 14px;
    font-weight: 500;

    color: #FFF4D6 !important;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.30);

    opacity: 0.95;

    line-height: 1.8;
}


/* =========================================
   حالت شب
   ========================================= */

body.dark .services-subtitle {
    color: #E8C978 !important;

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.45);
}


/* =========================================
   موبایل
   ========================================= */

@media (max-width: 700px) {

    .services-subtitle {
        font-size: 13px;
        margin-top: 6px;
    }

}
/* =========================================
   USD کنار اونس طلا
   طلایی ثابت در روز و شب
   ========================================= */

.ounce-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.currency-badge {
    width: auto;
    height: auto;

    display: inline-block;

    margin: 0;
    padding: 0;

    background: transparent !important;
    background-image: none !important;

    border: none !important;
    box-shadow: none !important;

    color: #D4AF55 !important;

    -webkit-text-fill-color: #D4AF55 !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .2px;

    position: relative;
    top: -4px;

    animation: none !important;
}