/* =========================================================
   نابغه مارکت — Design tokens (ruby/gold premium theme)
   ========================================================= */
:root{
  --bg: #FFFFFF;
  --bg-blush: #FFF6F7;
  --bg-soft: #F7F9FC;
  --surface: #FFFFFF;
  --surface-2: #FCF2F3;
  --surface-3: #F7E7E9;
  --border: #F1DEE1;
  --border-soft: #F7E9EB;

  --text: #1B1220;
  --text-muted: #786470;
  --text-faint: #AC98A0;

  --ruby: #C81243;
  --ruby-light: #FF4368;
  --ruby-deep: #7E0B31;
  --ruby-ink: #590824;
  --gold: #F0B429;
  --gold-deep: #A66C10;
  --danger: #E4534F;
  --info: #2E7CB8;

  /* legacy aliases so existing component rules pick up the new palette automatically */
  --mint: var(--ruby-light);
  --mint-deep: var(--ruby);
  --mint-dim: var(--ruby-deep);
  --amber: var(--gold);
  --amber-deep: var(--gold-deep);
  --amber-dim: var(--gold-deep);

  /* fixed dark "ink" palette, used for accent boxes and staff panels */
  --ink-900: #140810;
  --ink-800: #1F0F1B;
  --ink-700: #2B1524;
  --ink-600: #3A1E30;
  --ink-border: #40202F;
  --ink-text: #F7ECEF;
  --ink-text-muted: #C79AA8;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-card: 0 14px 34px -18px rgba(89,8,36,0.28);
  --shadow-pop: 0 30px 70px -24px rgba(89,8,36,0.38);

  --font-fa: 'Vazirmatn', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

/* Dark-accent scope: used for the whole staff panels (admin/management) */
body.theme-dark{
  --bg: var(--ink-900);
  --bg-soft: #180B14;
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --surface-3: var(--ink-600);
  --border: var(--ink-border);
  --border-soft: #24121D;
  --text: var(--ink-text);
  --text-muted: var(--ink-text-muted);
  --text-faint: #8C6D7A;
  --shadow-card: 0 10px 30px -12px rgba(0,0,0,0.55);
  --shadow-pop: 0 20px 50px -15px rgba(0,0,0,0.65);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0; width:100%; overflow-x:hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-fa);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body:not(.theme-dark){
  background:
    radial-gradient(900px 480px at 92% -8%, rgba(200,18,67,0.12) 0%, transparent 60%),
    radial-gradient(700px 420px at 4% 18%, rgba(240,180,41,0.09) 0%, transparent 55%),
    radial-gradient(1000px 520px at 50% 120%, rgba(200,18,67,0.08) 0%, transparent 60%),
    var(--bg-blush);
}
body.theme-dark{
  background: radial-gradient(1200px 600px at 15% -10%, rgba(200,18,67,0.18) 0%, transparent 60%),
              radial-gradient(1000px 500px at 100% 0%, rgba(240,180,41,0.12) 0%, transparent 55%),
              var(--ink-900);
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--ruby); outline-offset: 2px; }

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.mono{ font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* =========================================================
   Animated background (orbs + sparkles) — light pages only
   ========================================================= */
.bg-orbs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
body.theme-dark .bg-orbs{ display:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.orb1{
  width:420px; height:420px; top:-140px; right:-100px;
  background: radial-gradient(circle, rgba(200,18,67,0.30), transparent 70%);
  animation: orbFloat1 20s ease-in-out infinite;
}
.orb2{
  width:380px; height:380px; bottom:-160px; left:-120px;
  background: radial-gradient(circle, rgba(240,180,41,0.20), transparent 70%);
  animation: orbFloat2 24s ease-in-out infinite;
}
.orb3{
  width:320px; height:320px; top:38%; left:52%;
  background: radial-gradient(circle, rgba(200,18,67,0.16), transparent 70%);
  animation: orbFloat3 28s ease-in-out infinite;
}
@keyframes orbFloat1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-50px,40px) scale(1.1); } }
@keyframes orbFloat2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(40px,-35px) scale(1.06); } }
@keyframes orbFloat3{ 0%,100%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-46%,-56%) scale(1.15); } }
@media (max-width:640px){
  .orb1, .orb2{ width:260px; height:260px; filter:blur(50px); }
  .orb3{ width:200px; height:200px; filter:blur(50px); }
}

.sparkle{ position:absolute; border-radius:50%; animation: twinkle 4s ease-in-out infinite; }
.sparkle.red{ background: var(--ruby-light); box-shadow: 0 0 22px 6px rgba(255,67,104,0.5); }
.sparkle.gold{ background: var(--gold); box-shadow: 0 0 20px 6px rgba(240,180,41,0.45); }
.sparkle.orange{ background: #FF8A3D; box-shadow: 0 0 20px 6px rgba(255,138,61,0.45); }
.s1{ width:6px; height:6px; top:14%; left:12%; animation-delay:0s; }
.s2{ width:5px; height:5px; top:22%; left:78%; animation-delay:.8s; }
.s3{ width:7px; height:7px; top:62%; left:88%; animation-delay:1.6s; }
.s4{ width:5px; height:5px; top:78%; left:8%; animation-delay:2.2s; }
.s5{ width:4px; height:4px; top:45%; left:35%; animation-delay:3s; }
.s6{ width:6px; height:6px; top:8%; left:52%; animation-delay:1.2s; }
.s7{ width:5px; height:5px; top:33%; left:92%; animation-delay:2.6s; }
.s8{ width:6px; height:6px; top:55%; left:18%; animation-delay:.4s; }
.s9{ width:4px; height:4px; top:88%; left:60%; animation-delay:1.9s; }
.s10{ width:7px; height:7px; top:5%; left:30%; animation-delay:3.4s; }
.s11{ width:5px; height:5px; top:70%; left:46%; animation-delay:2.9s; }
.s12{ width:6px; height:6px; top:38%; left:64%; animation-delay:1.5s; }
@keyframes twinkle{ 0%,100%{ opacity:0; transform:scale(0.6); } 50%{ opacity:1; transform:scale(1.15); } }
@media (max-width:640px){
  .sparkle.red{ box-shadow: 0 0 14px 4px rgba(255,67,104,0.45); }
  .sparkle.gold{ box-shadow: 0 0 13px 4px rgba(240,180,41,0.4); }
  .sparkle.orange{ box-shadow: 0 0 13px 4px rgba(255,138,61,0.4); }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.92rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-sm{ padding: 9px 16px; font-size: 0.82rem; }
.btn-block{ width:100%; }

.btn-primary{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(200,18,67,0.55);
}
.btn-primary:hover{ box-shadow: 0 16px 34px -10px rgba(200,18,67,0.7); transform: translateY(-1px); }

.btn-mint{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(200,18,67,0.4);
}

.btn-green{
  background: linear-gradient(135deg, #34D8B8, #0E9A80);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(14,154,128,0.45);
}
.btn-green:hover{ filter: brightness(1.05); }

.btn-outline{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover{ border-color: var(--ruby); color: var(--ruby); }

.btn-ghost{
  background: var(--surface-2);
  color: var(--text);
}
.btn-ghost:hover{ background: var(--surface-3); }

.btn-danger{ background: rgba(228,83,79,0.08); color: var(--danger); border-color: rgba(228,83,79,0.3); }
.btn-danger:hover{ background: rgba(228,83,79,0.15); }

.btn-dark{
  background: linear-gradient(135deg, var(--ink-700), var(--ink-900));
  color: var(--ink-text); border: 1px solid var(--ink-border);
}
.btn-dark:hover{ filter: brightness(1.15); }

.btn-track{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff; font-weight:800;
  box-shadow: 0 10px 20px -8px rgba(200,18,67,0.5);
}
.btn-track:hover{ filter:brightness(1.08); }

.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* =========================================================
   Header / Nav
   ========================================================= */
/* position:sticky is broken here — confirmed by direct testing: with
   overflow-x:hidden set on html/body (needed elsewhere on the site to
   stop full-bleed sections causing horizontal scroll), sticky elements
   stop tracking the viewport and scroll away like normal content.
   position:fixed does NOT have this problem (verified working), so the
   header uses that instead — main{} below reserves matching space via a
   JS-measured --header-h custom property, since the header's real height
   varies (taller on mobile panel pages, which add a second tab row). */
.site-header{
  position: fixed; top:0; inset-inline:0; z-index:60;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
body.theme-dark .site-header{ background: rgba(20,8,16,0.85); }
main{ padding-top: var(--header-h, 71px); }

.header-inner{
  display:flex; align-items:center; justify-content: space-between;
  height: 70px;
  gap: 14px;
  /* .header-inner also carries the generic .container class (for its
     markup/padding), but the header itself should reach the true edges
     of the screen — not sit centered inside .container's 1180px cap,
     which on a wide monitor left the logo/actions stranded well short of
     the actual left/right edges. */
  max-width: none; margin-inline: 0; padding-inline: 24px;
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:0.95rem; white-space:nowrap; }
.brand-mark{
  width:40px; height:40px; border-radius: 12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; font-weight:900; font-size:1.1rem;
  box-shadow: 0 8px 18px -6px rgba(200,18,67,0.55);
  flex-shrink:0;
}
.brand-mark.has-logo{
  background:none; box-shadow:none; border-radius:14%;
}
.brand-mark.has-logo img{ object-fit:contain !important; }
.brand-wordmark{ height:36px; width:auto; display:block; max-width:180px; object-fit:contain; }
@media (max-width:460px){ .brand-wordmark{ height:30px; max-width:130px; } }
.main-nav{ display:none; align-items:center; gap: 30px; font-size:0.93rem; color: var(--text-muted); }
/* Store links (محصولات/پیگیری سفارش/ارتباط با ما) don't belong in the user
   panel's header — its own sidebar/tab row already covers navigation there. */
body.panel-page .main-nav{ display:none; }
.main-nav a{ position:relative; padding:6px 2px; font-weight:600; }
.main-nav a::after{
  content:""; position:absolute; right:0; bottom:-2px; width:0; height:2px;
  background: linear-gradient(90deg, var(--ruby-light), var(--ruby-deep)); transition: width .2s ease; border-radius:2px;
}
.main-nav a:hover{ color: var(--text); }
.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.login-pill{
  display:flex; align-items:center; gap:9px;
  padding:11px 22px 11px 17px; border-radius:var(--radius-pill);
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; font-weight:800; font-size:0.9rem; letter-spacing:-0.01em;
  border:1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 26px -8px rgba(200,18,67,0.6), 0 0 0 0 rgba(200,18,67,0.4);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: pillGlow 2.4s ease-in-out infinite;
}
.login-pill:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 34px -8px rgba(200,18,67,0.75); animation-play-state: paused; }
@keyframes pillGlow{
  0%,100%{ box-shadow: 0 10px 26px -8px rgba(200,18,67,0.6), 0 0 0 0 rgba(200,18,67,0.35); }
  50%{ box-shadow: 0 10px 26px -8px rgba(200,18,67,0.6), 0 0 0 7px rgba(200,18,67,0); }
}
.login-pill .avatar-ic{
  width:21px; height:21px; border-radius:50%; background:rgba(255,255,255,0.24);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.login-pill .avatar-ic svg{ width:12px; height:12px; stroke:#fff; }

.search-wrap{ position:relative; }
.search-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  cursor:pointer; transition: background .15s ease;
}
.search-toggle:hover{ background: var(--surface-3); }
.search-toggle svg{ width:18px; height:18px; stroke:currentColor; }

/* Redundant with the panel's own nav once you're actually inside it. */
body.panel-page .header-actions .login-pill{ display:none; }

/* پشتیبانی + theme-toggle: a bit smaller than their defaults so both sit
   comfortably side by side in the header without crowding. */
.header-support-btn{ padding:7px 13px; font-size:0.78rem; }
.header-theme-toggle{ width:34px; height:34px; font-size:0.9rem; }

.search-panel{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; width:290px;
  background: linear-gradient(160deg, var(--ruby-ink), var(--ink-900));
  border:1px solid var(--ink-border); border-radius:16px;
  box-shadow: var(--shadow-pop); padding:12px; display:none; z-index:70;
}
.search-panel.open{ display:block; }
.search-panel input,
#searchInput{
  margin-bottom:8px; background: rgba(255,255,255,0.1) !important; border:1px solid var(--ink-border) !important;
  color: var(--ink-text) !important;
}
#searchInput::placeholder{ color: rgba(247,236,239,0.6) !important; }
.search-results{
  max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
}
.search-result-item{
  display:flex; align-items:center; gap:9px;
  padding:8px 9px; border-radius:10px; font-size:0.85rem; color:var(--ink-text);
  transition: background .15s ease;
}
.search-result-item:hover{ background: rgba(255,255,255,0.08); }
.search-result-item .thumb{
  width:34px; height:34px; border-radius:8px; flex-shrink:0; object-fit:cover;
  background: rgba(255,255,255,0.1);
}
.search-result-item .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.search-result-item .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-result-item .price{ font-family:var(--font-mono); color:var(--gold); font-size:0.76rem; flex-shrink:0; direction:ltr; }
.search-empty{ padding:12px 10px; font-size:0.82rem; color:var(--ink-text-muted); text-align:center; }

@media (max-width:640px){
  .search-panel{
    position:fixed; top:72px; left:12px; right:12px; inset-inline-end:auto;
    width:auto; max-width:none;
  }
}

@media (max-width:460px){
  .login-pill{ padding:10px; gap:0; }
  .login-pill .label-text{ display:none; }
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:var(--surface-2); border:1px solid var(--border);
  border-radius: 11px; cursor:pointer;
  align-items:center;
}
.nav-toggle span{ width:17px; height:2px; background: var(--text); border-radius:2px; }

.mobile-menu{
  display:none;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}
.mobile-menu.open{ display:block; }
.mobile-menu .container{ padding: 16px 16px 22px; display:flex; flex-direction:column; gap:14px; }
.mobile-menu a{ color: var(--text-muted); font-size: 0.95rem; font-weight:600; }
.mobile-menu .login-pill{ justify-content:center; animation:none; color:#fff; }
.mobile-theme-toggle{
  background:none; border:none; padding:0; margin:0; font-family:inherit; width:100%; text-align: start;
  color: var(--text-muted); font-size: 0.95rem; font-weight:600; cursor:pointer;
}

@media (min-width: 900px){
  .main-nav{ display:flex; }
  .header-actions{ display:flex; }
  .nav-toggle{ display:none; }
}

/* =========================================================
   Flash messages
   ========================================================= */
.flash-container{ padding-top: 12px; }
.flash-stack{ display:flex; flex-direction:column; gap:9px; margin-bottom: 4px; }
.flash{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 11px 15px; border-radius: var(--radius-sm);
  font-size: 0.86rem; border:1px solid var(--border);
  background: var(--surface-2);
}
.flash-success{ border-color: rgba(14,154,128,0.3); background: #EAFBF6; color: #0B6B57; }
.flash-danger{ border-color: rgba(228,83,79,0.3); background: #FFF1F1; color: #B23A3A; }
.flash-warning{ border-color: rgba(166,108,16,0.3); background: #FFF8EA; color: #8A5A0E; }
.flash-info{ border-color: rgba(46,124,184,0.3); background: #EEF6FD; color: #2B6693; }
body.theme-dark .flash-success{ border-color: rgba(52,216,184,0.4); background: rgba(52,216,184,0.08); color:#bdf3e6; }
body.theme-dark .flash-danger{ border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); color:#ffc9c9; }
body.theme-dark .flash-warning{ border-color: rgba(245,184,78,0.4); background: rgba(245,184,78,0.08); color:#ffe3ae; }
body.theme-dark .flash-info{ border-color: rgba(90,169,230,0.4); background: rgba(90,169,230,0.08); color:#c7e3fb; }
.flash-close{ background:none; border:none; color: inherit; font-size:1.1rem; cursor:pointer; line-height:1; }

/* =========================================================
   Hero (compact + centered on mobile)
   ========================================================= */
.hero{ padding:46px 0 20px; position:relative; overflow:hidden; }
.hero-grid{ display:flex; flex-direction:column; gap:32px; }
.hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--radius-pill);
  background:#fff; border:1px solid var(--border);
  font-size:0.76rem; color:var(--ruby); font-weight:700;
  box-shadow: var(--shadow-card); width:fit-content;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ruby); box-shadow:0 0 0 4px rgba(200,18,67,0.18); }
.hero h1{
  font-size:clamp(1.5rem, 4.6vw, 2.9rem); line-height:1.32; font-weight:800; margin:16px 0 12px; letter-spacing:-0.01em;
}
.hero h1 .grad{
  background: linear-gradient(120deg, var(--ruby-light), var(--ruby-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ color:var(--text-muted); font-size:clamp(0.86rem, 2.2vw, 1.05rem); max-width:52ch; margin:0 auto 22px; }
.hero p.lead .emph-b{
  font-weight:700; color:var(--ruby-deep);
  background:#FDECEC; padding:2px 8px; border-radius:8px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-trust-mini{ display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; justify-content:center; }
.hero-trust-mini span{ display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--text-muted); font-weight:600; }
.hero-trust-mini .ic{ color:var(--ruby); }

/* Hero visual: card-stack illustration (placeholder for a future banner image) */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:260px; padding:8px 12px; overflow:hidden; }
.visual-glow{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,18,67,0.35), transparent 70%);
  filter: blur(10px); z-index:0;
}
.card-stack{ position:relative; z-index:1; width:100%; aspect-ratio: 1/1.15; max-width:260px; margin:0 auto; }
.stack-card{
  position:absolute; inset:0;
  /* موقعیت (چرخش/جابه‌جایی/مقیاس/شفافیت) از JS و به‌صورتِ inline style
     ست می‌شود (هروی‌ویژوال، ۱۴۰۵/۰۷/۰۴) — این transition همان چیزی‌ست که
     جابه‌جاییِ بینِ موقعیت‌ها را به «ورق‌خوردنِ» نرم و انیمیشنی تبدیل می‌کند.
     تکونِ ریزِ زندهٔ هر کارت (پایین‌تر) رویِ یک لایهٔ داخلیِ جدا (stack-card-inner)
     است — اگر رویِ همین المان می‌بود، انیمیشنِ CSS هر تیک، transformِ
     JS را بازنویسی/خراب می‌کرد. */
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .8s ease;
  will-change: transform, opacity;
}
.stack-card-inner{
  position:absolute; inset:0; border-radius:22px; padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow: var(--shadow-pop); border:1px solid rgba(255,255,255,0.14);
  /* تکونِ ریزِ دائمی — کارت‌هایِ پشتی «زنده» به‌نظر برسند؛ کارتِ جلو
     (stack-card.is-front) پایین‌تر خاموش/کمرنگ می‌شود تا محتوایش ثابت و
     خوانا بماند (خواستِ کاربر، ۱۴۰۵/۰۷/۰۴). animation-delay منفی‌ِ هرکارت
     (اینلاین، از Jinja) باعث می‌شود فازِ تکون‌ها با هم یکی نباشد. */
  animation: cardIdleWobble 4s ease-in-out infinite;
}
.stack-card.is-front .stack-card-inner{ animation-play-state: paused; }
@keyframes cardIdleWobble{
  0%, 100% { transform: rotate(0deg) translate(0,0); }
  25%      { transform: rotate(3.2deg) translate(5px,-7px); }
  50%      { transform: rotate(-2.6deg) translate(-6px,5px); }
  75%      { transform: rotate(2deg) translate(4px,6px); }
}
.stack-card-inner.theme-a{
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900)); color: var(--ink-text);
}
.stack-card-inner.theme-b{
  background: linear-gradient(150deg, var(--ruby-light), var(--ruby-ink)); color:#fff;
}
.stack-card-inner.theme-c{
  background: linear-gradient(150deg,#fff,#FBE9EC); color: var(--text);
  border:1px solid var(--border); box-shadow: var(--shadow-card);
}
.stack-card-inner.theme-d{
  background: linear-gradient(150deg, var(--gold), var(--gold-deep)); color:#2B1B00;
}
.stack-card-inner.theme-e{
  background: linear-gradient(150deg, #4FA3D1, var(--info)); color:#fff;
}
.stack-card-inner .cap{ font-size:0.68rem; opacity:.75; font-weight:700; }
.stack-card-inner .name{ font-weight:800; font-size:1rem; }
.stack-card-inner .chip{
  align-self:flex-start; font-size:0.65rem; font-weight:800; padding:4px 10px; border-radius:var(--radius-pill);
  background: rgba(255,255,255,0.18);
}
.stack-card-inner.theme-c .chip{ background: var(--surface-2); color:var(--ruby); }
@media (prefers-reduced-motion: reduce){
  .stack-card{ transition: none; }
  .stack-card-inner{ animation: none; }
}

@media (max-width:639px){
  .hero-visual{ min-height:225px; padding:8px 16px 16px; }
  .card-stack{ max-width:220px; }
}
@media (min-width:640px){ .card-stack{ max-width:310px; } }
@media (min-width:980px){
  .hero-grid{ flex-direction:row; align-items:center; }
  .hero-copy{ flex:1.05; }
  .hero-visual{ flex:0.95; }
}

/* =========================================================
   Ticker (live clock + rotating trust messages)
   ========================================================= */
.ticker-wrap{ padding-top:6px; padding-bottom:8px; }
.ticker{
  background: linear-gradient(120deg, var(--ink-900), var(--ruby-ink) 60%, var(--ink-900));
  background-size:220% 220%;
  animation: tickerbg 12s ease infinite;
  border-radius: var(--radius-lg);
  border:1px solid var(--ink-border);
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px;
  color:var(--ink-text);
  box-shadow: var(--shadow-pop);
  overflow:hidden; min-width:0;
  max-width:96%; margin:0 auto; width:96%;
}
@keyframes tickerbg{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.ticker .clock-mini{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; order:2; }
.ticker .clock-time{ font-family:var(--font-mono); font-weight:800; font-size:1.25rem; direction:ltr; }
.ticker .clock-date{ font-size:0.72rem; color:var(--ink-text-muted); }

.usd-rate-mini{
  display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; order:1;
  padding-inline-end:16px; border-inline-end:1px solid var(--ink-border);
}
.usd-rate-mini .ic{
  width:38px; height:38px; border-radius:50%;
  background: rgba(240,180,41,0.13);
  display:flex; align-items:center; justify-content:center;
}
.usd-rate-mini .ic-dollar{
  font-size:1.2rem; font-weight:800; font-family:var(--font-mono);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.usd-rate-value{ font-family:var(--font-mono); font-weight:800; font-size:1.1rem; direction:ltr; text-align:right; }
.usd-rate-value span{ font-family:inherit; font-weight:700; font-size:0.7rem; color:var(--ink-text-muted); direction:rtl; }
.usd-rate-label{ font-size:0.72rem; color:var(--ink-text-muted); }

.ticker-msg-wrap{
  order:3; flex:1 1 100%; min-width:0; overflow:hidden; position:relative; height:auto;
}
.ticker-msg{
  position:relative; inset:auto; display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:600;
  opacity:0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; min-width:0;
  white-space:normal; line-height:1.5;
}
.ticker-msg.show{ opacity:1; transform:translateY(0); }
.ticker-msg .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); flex-shrink:0; }

@media (min-width:641px){
  .ticker{ flex-wrap:nowrap; }
  .ticker-msg-wrap{ order:2; flex:1 1 auto; height:22px; }
  .ticker-msg{ position:absolute; inset:0; white-space:nowrap; line-height:normal; }
  .ticker .clock-mini{ order:3; }
}

@media (max-width:640px){
  .ticker-wrap{ padding-top:4px; padding-bottom:6px; }
  .ticker{ padding:10px 12px; gap:6px 10px; border-radius: var(--radius-md); }
  .ticker .clock-mini{ gap:6px; }
  .ticker .clock-time{ font-size:0.94rem; }
  .ticker .clock-date{ font-size:0.62rem; }
  .usd-rate-mini{ gap:6px; padding-inline-end:10px; }
  .usd-rate-mini .ic{ width:24px; height:24px; font-size:0.84rem; }
  .usd-rate-value{ font-size:0.8rem; }
  .usd-rate-label{ font-size:0.62rem; }
  .ticker-msg{ font-size:0.76rem; gap:6px; }
}

.btn-track{ display:inline-flex; align-items:center; gap:6px; }
.btn-track-ico{ display:none; width:16px; height:16px; flex-shrink:0; }

@media (max-width:640px){
  .ticker-track-row{ margin-top:8px; padding-top:8px; gap:6px; flex-wrap:nowrap; }
  .ticker-track-row .ico{ display:none; }
  .ticker-track-row input{ flex-basis:auto; padding:7px 10px; font-size:0.72rem; border-radius:8px; }
  .ticker-track-row .btn-track{ padding:7px 10px; border-radius:8px; }
  .btn-track-text{ display:none; }
  .btn-track-ico{ display:block; }
}

/* =========================================================
   Ticker bar + quick order-tracking row (merged into one card)
   ========================================================= */
.ticker-track-row{
  display:flex; align-items:center; gap:10px; width:100%;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--ink-border);
  position:relative; z-index:1; order:4;
}
.ticker-track-row .ico{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ticker-track-row input{
  flex:1; min-width:0; background: rgba(255,255,255,0.07); border:1px solid var(--ink-border);
  color:var(--ink-text); border-radius:10px; padding:10px 14px; font-family:inherit; font-size:0.82rem;
}
.ticker-track-row input::placeholder{ color: var(--ink-text-muted); }
.ticker-track-row input:focus{ outline:none; border-color: var(--gold); background: rgba(255,255,255,0.1); }
.ticker-track-row .btn-track{ flex-shrink:0; padding:10px 20px; border-radius:10px; }

/* =========================================================
   Shared / reservation ticket-card row
   ========================================================= */
.feature-row{ padding:10px 0 6px; }

/* The shared/reservation ticket cards: their own slim, full-width row — nothing else shares it */
.duo-row{ display:grid; grid-template-columns:1fr; gap:14px; min-width:0; align-items:stretch; margin-top:14px; }
.duo-row > *{ min-width:0; }
@media (min-width:640px){ .duo-row{ grid-template-columns: 1fr 1fr; } }
.duo-item{ display:flex; flex-direction:column; min-width:0; }

.banner-card{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; min-height:220px;
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  border:1px solid var(--ink-border); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-pop);
}
.banner-card .glow{ position:absolute; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(200,18,67,0.4), transparent 70%); }
.banner-card .content{ position:relative; z-index:1; text-align:center; color:var(--ink-text); padding:20px; }
.banner-card .content .picto{
  width:56px; height:56px; margin:0 auto 12px; border-radius:16px; background:rgba(255,255,255,0.08);
  border:1px dashed rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.banner-card .content h4{ margin:0 0 4px; font-size:0.95rem; }
.banner-card .content p{ margin:0; color:var(--ink-text-muted); font-size:0.78rem; }

.desktop-only-block{ display:none; }
@media (min-width:640px){ .desktop-only-block{ display:block; } }

/* Auto-fill so this row works whether there are 2 services or 6 — no hardcoded column count */
.services-stack{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:480px){ .services-stack{ grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }

.banner-card-mini{ min-height:84px; }
.banner-card-mini .content{ padding:10px 14px; }
.banner-card-mini .content .picto{ width:30px; height:30px; font-size:0.9rem; margin:0 auto 5px; }
.banner-card-mini .content h4{ font-size:0.76rem; }
.banner-card-mini .content p{ font-size:0.64rem; }

/* Each "other service" tile: banner image flush on top + a real caption underneath
   (title/subtitle always shown, not just as a no-image fallback). */
.service-item{ display:flex; flex-direction:column; min-width:0; }
.service-banner{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom:none; }
.service-caption{
  background: var(--surface); border:1px solid var(--border-soft); border-top:none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding:12px 14px;
}
.service-caption h4{ margin:0 0 4px; font-size:0.85rem; color:var(--text); }
.service-caption p{ margin:0; font-size:0.74rem; color:var(--text-muted); line-height:1.6; }

/* Ticket-header banners: sit flush on top of the shared/reservation cards below them (no
   gap, no border between) so each pair reads as one continuous "ticket with a photo header"
   — rounded on top, seam in the middle, rounded again at the card's bottom. */
.duo-banner{
  min-height:110px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom:none;
}
.duo-banner .content{ padding:10px 16px; color: var(--text); }
.duo-banner .content .picto{ width:32px; height:32px; font-size:0.95rem; margin:0 auto 6px; background:none; }
.duo-banner .content h4{ font-size:0.78rem; }
.duo-banner .content p{ font-size:0.66rem; color: var(--text-muted); }

.duo-banner--rose{ background: linear-gradient(150deg, #FFFFFF, var(--bg-blush)); border: 1.5px solid rgba(200,18,67,0.16); border-bottom:none; }
.duo-banner--rose .content .picto{ border-color: rgba(200,18,67,0.3); color: var(--ruby-deep); }
.duo-banner--gold{ background: linear-gradient(150deg, #FFFFFF, #FFF8E8); border: 1.5px solid rgba(240,180,41,0.32); border-bottom:none; }
.duo-banner--gold .content .picto{ border-color: rgba(240,180,41,0.35); color: var(--gold-deep); }

.duo-item .shared-card{ border-top:none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
@media (max-width:640px){ .duo-banner{ min-height:84px; } }

/* =========================================================
   Wallet top-up promo (admin banner slot "special"): a real CTA module with a
   heading + description on top of a background image, not a bare image tile.
   ========================================================= */
.wallet-cta{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  min-height:150px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--ruby-ink), var(--ink-900));
  box-shadow: var(--shadow-pop); padding:30px 22px; text-align:center;
}
.wallet-cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.wallet-cta-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(160deg, rgba(20,8,16,0.9), rgba(89,8,36,0.72));
}
.wallet-cta .glow1{ position:absolute; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(240,180,41,0.32), transparent 70%); top:-90px; right:-50px; z-index:1; }
.wallet-cta .glow2{ position:absolute; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(255,67,104,0.35), transparent 70%); bottom:-70px; left:-40px; z-index:1; }
.wallet-cta-body{ position:relative; z-index:2; color:#fff; max-width:480px; }
.wallet-cta-ico{
  display:inline-flex; width:46px; height:46px; border-radius:14px; align-items:center; justify-content:center;
  font-size:1.3rem; background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  margin-bottom:12px; box-shadow: 0 10px 20px -8px rgba(240,180,41,0.5);
}
.wallet-cta-body h3{ margin:0 0 8px; font-size:1.15rem; }
.wallet-cta-body p{ margin:0 0 18px; font-size:0.85rem; color:rgba(255,255,255,0.82); line-height:1.7; }
@media (max-width:640px){
  .wallet-cta{ padding:24px 16px; min-height:0; }
  .wallet-cta-body h3{ font-size:1rem; }
  .wallet-cta-body p{ font-size:0.8rem; }
}

/* ---------- Shared accounts / reservation: a matching pair of soft, light ticket cards
   (same shape + seat-dot mechanics), differentiated by a rose vs. gold accent so they
   read as siblings sitting next to each other rather than two unrelated components. ---------- */
.shared-card{
  background: linear-gradient(160deg, #FFFFFF, var(--bg-blush));
  border: 1.5px solid rgba(200,18,67,0.16); border-radius: var(--radius-lg);
  padding: 15px 18px; box-shadow: var(--shadow-card); position:relative; overflow:hidden;
  color: var(--text); min-width:0; width:100%;
}
.shared-card::before{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,18,67,0.12), transparent 70%);
  top:-90px; left:-70px; pointer-events:none;
}
.shared-ribbon{
  position:absolute; top:16px; left:-34px; width:140px; text-align:center;
  transform: rotate(-45deg); z-index:2;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#241505; font-size:0.62rem; font-weight:800; padding:5px 0;
  box-shadow: 0 4px 10px -3px rgba(0,0,0,0.3);
}

.shared-head{ position:relative; z-index:1; margin-bottom:11px; }
.shared-head-title h3{ margin:0 0 6px; font-size:1.02rem; font-weight:800; letter-spacing:0.01em; color: var(--text); }
.shared-head-title h3::after{
  content:""; display:block; width:30px; height:3px; margin-top:6px; border-radius:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.shared-head-title span.sub{ display:block; font-size:0.76rem; color:var(--text-muted); margin-top:6px; }

.shared-list{ display:flex; flex-direction:column; position:relative; z-index:1; min-width:0; }
@media (min-width:640px){
  /* desktop: show only the first shared product; mobile is untouched */
  .shared-list > .capacity-row:not(.view-all-shared-row):nth-of-type(n+2){ display:none; }
}
a.capacity-row{ display:block; border-radius: 10px; transition: background .15s ease; min-width:0; }
a.capacity-row:hover{ background: var(--surface-2); }
.capacity-row.soon{ opacity: 0.55; }
.shared-card .text-muted{ color: var(--text-muted); }
.shared-row{
  display:flex; flex-direction:column; gap:6px; padding: 8px 0;
  border-bottom: 1px solid var(--border-soft); min-width:0;
}
.shared-list .capacity-row:last-child .shared-row{ border-bottom:none; padding-bottom:0; }
.shared-list .capacity-row:first-child .shared-row{ padding-top:0; }

.shared-info-top{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.shared-name{
  font-size:0.86rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width:0; width:100%; display:block;
}
.shared-price{ font-family:var(--font-mono); font-size:0.72rem; color:var(--ruby-deep); direction:ltr; white-space:nowrap; }

.seat-row{ display:flex; align-items:center; gap:10px; }
.seat-dots{ display:flex; gap:4px; direction:ltr; }
.seat-dots span{
  width:9px; height:9px; border-radius:50%;
  border: 1.5px solid rgba(200,18,67,0.22);
  background: transparent;
  transition: transform .2s ease;
}
.seat-dots span.filled{
  border-color: transparent;
  background: linear-gradient(135deg, var(--gold), var(--ruby));
  box-shadow: 0 0 0 3px rgba(240,180,41,0.18);
}
.capacity-row.full .seat-dots span.filled{
  background: linear-gradient(135deg, var(--ruby), var(--ruby-deep));
  box-shadow: 0 0 0 3px rgba(200,18,67,0.2);
}
.seat-label{ font-size:0.68rem; color:var(--text-muted); white-space:nowrap; }
.seat-label b{ color:var(--text); font-family:var(--font-mono); font-weight:700; }
.capacity-almost-badge{ font-size:0.66rem; color:var(--gold-deep); font-weight:700; margin-inline-start:4px; }

/* "View all shared accounts" CTA card — takes the place of empty placeholder slots */
a.capacity-row.view-all-shared-row{
  border: 1.5px dashed rgba(240,180,41,0.45);
  border-radius: 12px; margin-top: 6px; padding: 12px 14px;
  background: rgba(240,180,41,0.06);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
a.capacity-row.view-all-shared-row:hover{
  background: rgba(240,180,41,0.12); border-color: var(--gold);
  transform: translateY(-2px);
}
.view-all-shared-ico{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  animation: viewAllPulse 2.4s ease-in-out infinite;
}
@keyframes viewAllPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(240,180,41,0.35); }
  50%{ box-shadow: 0 0 0 7px rgba(240,180,41,0); }
}
.view-all-shared-arrow{
  font-size:1.15rem; color: var(--gold-deep); flex-shrink:0;
  transition: transform .2s ease;
}
a.capacity-row.view-all-shared-row:hover .view-all-shared-arrow{ transform: translateX(-4px); }

@media (max-width:640px){
  .shared-card{ padding:16px 15px; }
  .shared-head-title h3{ font-size:0.9rem; }
  .shared-head-title span.sub{ font-size:0.7rem; }
  .shared-name{ font-size:0.8rem; }
  .seat-dots span{ width:8px; height:8px; }
  .seat-label{ font-size:0.64rem; }
  .shared-ribbon{ font-size:0.56rem; width:120px; top:14px; left:-32px; }
  .shared-row{ padding: 9px 0; gap:6px; }
}

/* Gold variant of .shared-card — used for "اختصاصی رزروی" so the pair reads as two soft,
   related cards (rose vs. gold accent) instead of a light/dark mismatch. */
.shared-card--gold{
  background: linear-gradient(160deg, #FFFFFF, #FFF8E8);
  border-color: rgba(240,180,41,0.32);
}
.shared-card--gold::before{
  background: radial-gradient(circle, rgba(240,180,41,0.16), transparent 70%);
}
.shared-card--gold .shared-row{ border-bottom-color: var(--border-soft); }
.shared-card--gold .shared-price{ color: var(--gold-deep); }
.shared-card--gold .seat-dots span{ border-color: rgba(240,180,41,0.32); }
.shared-card--gold .seat-dots span.filled{
  background: linear-gradient(135deg, var(--gold-deep), var(--gold)); box-shadow: 0 0 0 3px rgba(240,180,41,0.2);
}
.shared-card--gold .capacity-row.full .seat-dots span.filled{
  background: linear-gradient(135deg, var(--ruby), var(--gold)); box-shadow: 0 0 0 3px rgba(240,180,41,0.22);
}

/* ---- Homepage اشتراکی/رزروی teaser cards (generic, no real numbers) ---- */
.duo-link{ display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; cursor:pointer; }
.teaser-card{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
.duo-link:hover .teaser-cta-arrow{ transform: translateX(-4px); }
.teaser-copy{
  position:relative; z-index:1; margin:0 0 16px; font-size:0.82rem; line-height:1.9;
  color: var(--text-muted);
}
.teaser-fill{
  position:relative; z-index:1; display:flex; gap:6px; direction:ltr;
  flex-wrap:wrap; margin-bottom:8px;
}
.teaser-fill span{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(214,51,108,0.30); background:transparent;
  animation: teaserFill 3.4s ease-in-out infinite;
}
@keyframes teaserFill{
  0%, 12%   { background:transparent; box-shadow:none; transform:scale(1); }
  38%, 74%  { background: linear-gradient(135deg, var(--ruby), var(--gold));
              box-shadow: 0 0 0 3px rgba(214,51,108,0.18); transform:scale(1.12); }
  100%      { background:transparent; box-shadow:none; transform:scale(1); }
}
.teaser-fill--gold span{ border-color: rgba(240,180,41,0.34); }
.teaser-fill--gold span{ animation-name: teaserFillGold; }
@keyframes teaserFillGold{
  0%, 12%   { background:transparent; box-shadow:none; transform:scale(1); }
  38%, 74%  { background: linear-gradient(135deg, var(--gold-deep), var(--gold));
              box-shadow: 0 0 0 3px rgba(240,180,41,0.2); transform:scale(1.12); }
  100%      { background:transparent; box-shadow:none; transform:scale(1); }
}
.teaser-fill-label{
  position:relative; z-index:1; display:block; font-size:0.7rem; color: var(--text-muted);
  margin-bottom:16px;
}
.teaser-cta{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:800; color: var(--ruby);
}
.shared-card--gold .teaser-cta{ color: var(--gold-deep); }
.teaser-cta-arrow{ transition: transform .15s ease; }
@media (prefers-reduced-motion: reduce){
  .teaser-fill span{ animation:none; background: linear-gradient(135deg, var(--ruby), var(--gold)); }
  .teaser-fill--gold span{ background: linear-gradient(135deg, var(--gold-deep), var(--gold)); }
}

/* ---- «پلن سازمانی» teaser box — blue accent, full width under the pair ---- */
.duo-item--org{ --org:#2563EB; --org-deep:#1E3A8A; --org-light:#3B82F6; margin-top:2px; }
.duo-banner--org{
  background: linear-gradient(150deg,#FFFFFF,#EEF3FF);
  border:1.5px solid rgba(37,99,235,0.20); border-bottom:none;
}
.duo-banner--org .content .picto{ border-color: rgba(37,99,235,0.30); color: var(--org-deep); }
.duo-banner--org .glow{ background: radial-gradient(circle, rgba(37,99,235,0.35), transparent 70%); }
.shared-card--org{
  background: linear-gradient(160deg,#FFFFFF,#EEF3FF);
  border-color: rgba(37,99,235,0.22);
}
.shared-card--org::before{ background: radial-gradient(circle, rgba(37,99,235,0.14), transparent 70%); }
.shared-card--org .shared-head-title h3::after{
  background: linear-gradient(90deg, var(--org-light), var(--org-deep));
}
.shared-ribbon--org{
  background: linear-gradient(135deg, var(--org-light), var(--org-deep));
  color:#fff; width:150px; left:-36px;
}
.teaser-cta--org{ color: var(--org-deep); }
.duo-item--org .duo-link:hover .teaser-cta-arrow{ transform: translateX(-4px); }
.org-perks{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;
}
.org-perks span{
  font-size:0.74rem; font-weight:700; color: var(--org-deep); line-height:1.6;
  background: rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.18);
  border-radius:999px; padding:5px 11px;
}
.org-perks span::before{ content:"✓ "; color: var(--org-light); font-weight:900; }
@media (max-width:640px){
  .org-perks{ gap:6px; margin:0 0 13px; }
  .org-perks span{ font-size:0.66rem; padding:3px 8px; line-height:1.5; }
  .org-perks span::before{ content:"✓"; margin-inline-end:3px; }
}
body.theme-dark .duo-banner--org,
body.theme-dark .shared-card--org{
  background: linear-gradient(160deg, rgba(37,99,235,0.10), rgba(30,58,138,0.14));
}
body.theme-dark .org-perks span{ color:#BFD4FF; background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.28); }
body.theme-dark .teaser-cta--org{ color:#93B4FF; }

/* ================= باکسِ «استودیوی نابغه» (صفحهٔ اصلی) =================
   نسخهٔ چهارم (۱۴۰۵/۰۷/۱۱): رنگ از آبی به نارنجیِ‌مایل‌به‌قرمز (هم‌خوان‌تر
   با رنگِ اصلیِ سایت: ruby/gold) تغییر کرد؛ آیکون‌هایِ تزئینیِ پس‌زمینه
   پررنگ‌تر شدند؛ و یک تصویرِ پس‌زمینهٔ اختیاری (از پنلِ مدیریت → بنرها →
   «studio_promo_bg») اضافه شد — پشتِ یک لایهٔ نیمه‌شفافِ هم‌رنگِ سطح، تا
   همیشه خوانا بماند، حتی اگر تصویر تغییر کند. */
.studio-promo{
  --sp-accent: #E0552F;
  --sp-accent-deep: #A83D1E;
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:18px; max-width:900px; margin:0 auto; text-decoration:none; color:inherit;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--sp-accent) 8%, transparent), transparent 55%),
    var(--surface);
  border:1.5px solid color-mix(in srgb, var(--sp-accent) 26%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding:32px 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.studio-promo:hover{
  transform: translateY(-4px); color:inherit;
  border-color: color-mix(in srgb, var(--sp-accent) 48%, var(--border));
  box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--sp-accent) 45%, transparent), var(--shadow-pop);
}
.studio-promo-glow{
  position:absolute; z-index:0; pointer-events:none; inset-inline-start:-60px; top:-60px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-accent) 18%, transparent), transparent 75%);
}

/* تصویرِ پس‌زمینهٔ اختیاری — زیرِ همه‌چیز (z-index منفی). نسخهٔ پنلِ شیشه‌ای
   (باکسِ سفیدِ جدا دورِ متن) به‌نظرِ کاربر به‌هم‌ریخته/زشت شد — نسخه‌ای که
   کاربر واقعاً پسندید همین مَوجِ یکدستِ روی کلِ کارت بود؛ فقط درصدش کمی
   بیشتر شد (نسبت به اولین تلاشِ «خیلی کم» که خوانایی را کم می‌کرد) و یک
   سایه‌ی نرمِ روشن زیرِ خودِ متن اضافه شد تا بدونِ هیچ باکس/قابِ اضافه،
   همیشه خوانا بماند — روی هر قسمتِ عکس که باشد. */
.studio-promo-bgimg{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover;
  opacity:.95;
}
.studio-promo-bgimg-wash{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 55%, transparent));
}
.studio-promo--has-bg .studio-promo-eyebrow,
.studio-promo--has-bg .studio-promo-body h2,
.studio-promo--has-bg .studio-promo-body p{
  text-shadow: 0 1px 2px color-mix(in srgb, var(--surface) 75%, transparent), 0 0 14px color-mix(in srgb, var(--surface) 55%, transparent);
}
.studio-promo--has-bg .studio-promo-body p{
  color: var(--text); font-weight:600;
}
.studio-promo--has-bg .sp-feature{
  color: var(--text); background: color-mix(in srgb, var(--surface) 65%, transparent);
}

/* پس‌زمینهٔ نقطه‌ایِ تزئینی — نقاطِ کوچکِ نارنجی‌رنگ، چشمک‌زنِ آرام؛
   مختصاتشان با --x/--y (درصد از کارت) روی خودِ هر <i> در HTML تنظیم شده. */
.studio-promo-dots{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.studio-promo-dots i{
  position:absolute; inset-inline-start:var(--x); top:var(--y); width:5px; height:5px; border-radius:50%;
  background: var(--sp-accent); opacity:.3;
  animation: studioDotTwinkle 3.4s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes studioDotTwinkle{ 0%,100%{ opacity:.18; } 50%{ opacity:.6; } }

/* ریزآیکون‌هایِ امکانات — دیگر پس‌زمینه نیستند (خواستِ کاربر: «لازم نیست
   در بک‌گراند باشند»)، حالا یک ردیفِ واقعی و کاملاً دیده‌شده، زیرِ توضیح،
   تک‌رنگ و خیلی کوچک، با یک مِوجِ شناوریِ ملایمِ پشت‌سرهم (--d روی هرکدام
   کمی عقب‌تر از قبلی) برایِ حسِ «زنده و جذاب». */
.studio-promo-features{ position:relative; z-index:1; display:flex; gap:9px; margin-top:12px; }
.sp-feature{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  flex-shrink:0; color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 13%, transparent);
  animation: studioIcoFloat 2.8s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.sp-feature svg{ width:17px; height:17px; }
@media (prefers-reduced-motion: reduce){
  .studio-promo-dots i, .sp-feature{ animation:none; }
}
.studio-promo-ico{
  position:relative; z-index:1; flex-shrink:0; width:58px; height:58px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-deep));
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sp-accent) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--sp-accent) 10%, transparent);
  animation: studioIcoFloat 3.6s ease-in-out infinite;
}
@keyframes studioIcoFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce){ .studio-promo-ico{ animation:none; } }
.studio-promo-ico svg{ width:26px; height:26px; }
.studio-promo-body{ position:relative; z-index:1; flex:1; min-width:0; }
.studio-promo-eyebrow{ display:block; font-size:0.72rem; font-weight:800; color: var(--sp-accent-deep); margin-bottom:3px; }
.studio-promo-body h2{ margin:0 0 4px; font-size:1.12rem; font-weight:900; color: var(--text); }
.studio-promo-body p{ margin:0; font-size:0.82rem; color: var(--text-muted); line-height:1.7; }
.studio-promo-cta{
  position:relative; z-index:1; flex-shrink:0; font-size:0.86rem; font-weight:800; color:#fff; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-deep));
  padding:10px 20px; border-radius:12px;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--sp-accent) 65%, transparent);
  transition: box-shadow .2s ease, transform .2s ease;
}
.studio-promo:hover .studio-promo-cta{ box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--sp-accent) 80%, transparent); transform: scale(1.03); }
.studio-promo-arrow{ display:inline-block; transition: transform .15s ease; }
.studio-promo:hover .studio-promo-arrow{ transform: translateX(-4px); }
@media (max-width:640px){
  /* موبایل — نسخهٔ جمع‌وجورتر (خواستِ کاربر، ۱۴۰۵/۰۷/۱۱): آیکون و تیتر در
     یک ردیف (نه هرکدام یک ردیفِ جداگانه)، توضیح زیرش، دکمه کوچک‌تر و
     وسط‌چین (نه کشیده‌شده به تمامِ عرض که بی‌تناسب به‌نظر می‌رسید). */
  .studio-promo{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:22px 18px;
  }
  .studio-promo-ico{ width:42px; height:42px; border-radius:13px; }
  .studio-promo-ico svg{ width:20px; height:20px; }
  .studio-promo-body{ flex:1 1 0; min-width:0; }
  .studio-promo-eyebrow{ font-size:0.66rem; }
  .studio-promo-body h2{ font-size:1rem; margin-bottom:2px; }
  .studio-promo-body p{ font-size:0.78rem; line-height:1.6; }
  .studio-promo-features{ gap:7px; margin-top:10px; }
  .sp-feature{ width:30px; height:30px; }
  .sp-feature svg{ width:14px; height:14px; }
  .studio-promo-cta{
    flex-basis:100%; justify-content:center; padding:9px 18px; font-size:0.82rem; margin-top:2px;
  }
  /* کمتر — تا در فضایِ کوچکِ موبایل شلوغ نشود */
  .studio-promo-dots i:nth-child(n+5){ display:none; }
}

/* ================= کارت تبلیغاتی فشرده «اشتراک ChatGPT Plus» (صفحهٔ اصلی) =================
   عکس واقعی خودِ محصول (نه یک بنر عمومی بی‌ربط) کنار یک متن کوتاه، در یک کارت
   جمع‌وجور افقی — نه یک بنر تمام‌عرض — تا هم واضح باشد مال ChatGPT است، هم
   اندازه‌اش با اهمیت «فقط یک محصول» هم‌خوانی داشته باشد. */
.cgpt-promo{
  display:flex; align-items:stretch; max-width:720px; margin:0 auto; text-decoration:none; color:inherit;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow:hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.cgpt-promo:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.cgpt-promo-img{
  flex:0 0 40%; max-width:260px; position:relative; overflow:hidden; background: var(--ink-900);
}
.cgpt-promo-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cgpt-promo-body{ flex:1; min-width:0; padding:18px 20px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.cgpt-promo-ribbon{ font-size:0.7rem; font-weight:800; color: var(--ruby); }
.cgpt-promo-body h3{ margin:0; font-size:1.05rem; font-weight:900; color: var(--text); }
.cgpt-promo-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; }
.cgpt-promo-price .now{ font-size:1.02rem; font-weight:900; color: var(--ruby); font-family: var(--font-mono); }
.cgpt-promo-price .now b{ font-family:inherit; font-size:0.72rem; font-weight:700; }
.cgpt-promo-price .old{ font-size:0.76rem; color: var(--text-faint); text-decoration:line-through; font-family: var(--font-mono); }
.cgpt-promo-price .off{
  font-size:0.68rem; font-weight:800; color:#0E9A80; background: rgba(14,154,128,0.1);
  border:1px solid rgba(14,154,128,0.25); border-radius:999px; padding:2px 8px;
}
.cgpt-promo-body p{ margin:2px 0 8px; font-size:0.8rem; color: var(--text-muted); line-height:1.75; }
.cgpt-promo-cta{ font-size:0.84rem; font-weight:800; color: var(--ruby); }
.cgpt-promo-arrow{ display:inline-block; transition: transform .15s ease; }
.cgpt-promo:hover .cgpt-promo-arrow{ transform: translateX(-4px); }
@media (max-width:560px){
  .cgpt-promo{ flex-direction:column; }
  .cgpt-promo-img{ flex:none; max-width:none; width:100%; aspect-ratio: 16/9; }
  .cgpt-promo-body{ padding:14px 16px; }
}

/* جفتِ باکسِ تبلیغاتی کنارِ هم — دسکتاپ دو ستون، موبایل زیرِ هم (خواستِ
   صریحِ کاربر، ۱۴۰۵/۰۷/۱۱): هر .cgpt-promo داخلِ این ردیف دیگر max-width/
   margin:auto خودش را ندارد، چون عرض را خودِ گرید تقسیم می‌کند. */
.cgpt-promo-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px; max-width:980px; margin:0 auto;
}
.cgpt-promo-row .cgpt-promo{ max-width:none; margin:0; }
@media (max-width:860px){
  .cgpt-promo-row{ grid-template-columns:1fr; gap:14px; }
}
/* دسکتاپ: عکسِ همه‌ی باکس‌های cgpt-promo (اشتراکی‌ها + دستیارهای هوش مصنوعی)
   کمی عریض‌تر — ارتفاع همان می‌ماند (خواستِ کاربر، ۱۴۰۵/۰۷/۱۷). */
@media (min-width:861px){
  /* فقط عرضِ عکس بیشتر شود، نه ارتفاع: ستونِ متن همان ~۲۹۰px قبلی می‌ماند
     (وگرنه متن بیشتر می‌شکند و کارت بلندتر می‌شود) و فضای اضافه از عریض‌ترشدنِ
     ردیف به عکس می‌رسد. */
  .cgpt-promo-row{ max-width:1120px; }
  .cgpt-promo-row .cgpt-promo-img{ flex:0 0 auto; width:min(260px, max(40%, calc(100% - 290px))); max-width:none; }
}

/* باکسِ تبلیغاتیِ «هنوز فعال نشده» — محصولی که اعلام شده ولی هنوز قابلِ‌خرید
   نیست (مثلِ سدنیسِ اشتراکی)؛ کاملاً کم‌رنگ/خاکستری تا آشکارا غیرفعال به
   نظر برسد، و دیگر یک لینکِ واقعی هم نیست (یک <div> ساده). */
.cgpt-promo--disabled{
  filter: grayscale(0.9); opacity:0.5; cursor:default;
}
.cgpt-promo--disabled:hover{ transform:none; box-shadow: var(--shadow-card); }
.cgpt-promo-ribbon--soon{ color: var(--text-faint); }
.cgpt-promo-cta--disabled{ color: var(--text-faint); }

/* ================= صفحهٔ «پلن سازمانی» /enterprise ================= */
.ent-page{ --org:#2563EB; --org-deep:#1E3A8A; --org-light:#3B82F6; }
.ent-perks{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 22px;
}
.ent-perks span{
  font-size:0.78rem; font-weight:700; color: var(--org-deep); line-height:1.6;
  background: rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.18);
  border-radius:999px; padding:6px 13px;
}
.ent-perks span::before{ content:"✓ "; color: var(--org-light); font-weight:900; }
.ent-card{
  background: linear-gradient(160deg,#FFFFFF,#EEF3FF);
  border:1.5px solid rgba(37,99,235,0.22); border-radius: var(--radius-lg);
  padding:22px; box-shadow: var(--shadow-card);
}
.ent-block{ margin-bottom:18px; }
.ent-label{ font-size:0.82rem; font-weight:800; color: var(--text); margin-bottom:9px; }
.ent-choices{ display:flex; flex-wrap:wrap; gap:8px; }
.ent-choice{
  font: inherit; font-size:0.85rem; font-weight:700; cursor:pointer;
  padding:9px 14px; border-radius:12px; color: var(--org-deep);
  background:#fff; border:1.5px solid rgba(37,99,235,0.25); transition: all .12s ease;
}
.ent-choice:hover{ border-color: var(--org-light); }
.ent-choice.is-on{
  background: linear-gradient(135deg, var(--org-light), var(--org-deep));
  color:#fff; border-color: transparent;
}
.ent-hint{ font-size:0.74rem; color: var(--text-muted); margin:8px 2px 0; }
.ent-off{ font-size:0.68rem; opacity:.9; }
.ent-choice.is-on .ent-off{ background: rgba(255,255,255,0.22); border-radius:6px; padding:1px 5px; }
.ent-breakdown{
  margin:6px 0 18px; padding:14px 16px; border-radius:14px;
  background: rgba(37,99,235,0.05); border:1px solid rgba(37,99,235,0.14);
}
.ent-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:0.86rem; }
.ent-row span{ color: var(--text-muted); }
.ent-row b{ font-weight:800; color: var(--text); }
.ent-row.ent-total{ border-top:1px dashed rgba(37,99,235,0.28); margin-top:4px; padding-top:11px; }
.ent-row.ent-total span{ color: var(--text); font-weight:800; }
.ent-row.ent-total b{ font-size:1.05rem; color: var(--org-deep); }
.ent-buy{ width:100%; }
.btn.ent-buy[disabled]{ opacity:.55; cursor:not-allowed; }
.ent-soon{ font-size:0.78rem; color: var(--text-muted); margin:10px 0 0; text-align:center; line-height:1.9; }
.ent-note{ font-size:0.74rem; color: var(--text-muted); margin:14px 0 0; line-height:2; }
.ent-how{ margin-top:26px; }
.ent-how h2{ font-size:1.05rem; margin:0 0 10px; }
.ent-how ol{ margin:0; padding-inline-start:20px; color: var(--text-muted); font-size:0.88rem; line-height:2.1; }
.ent-how ol b{ color: var(--text); }
body.theme-dark .ent-card{ background: linear-gradient(160deg, rgba(37,99,235,0.10), rgba(30,58,138,0.14)); }
body.theme-dark .ent-choice{ background: rgba(59,130,246,0.10); color:#BFD4FF; }
body.theme-dark .ent-perks span{ color:#BFD4FF; background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.28); }
@media (max-width:640px){
  .ent-card{ padding:16px; }
  .ent-perks span{ font-size:0.68rem; padding:4px 9px; }
  .ent-choice{ font-size:0.78rem; padding:8px 11px; flex:1 1 auto; text-align:center; }
  .ent-row{ font-size:0.8rem; }
}

#products{ scroll-margin-top: calc(var(--header-h, 71px) + 14px); }
#special-features{ scroll-margin-top: calc(var(--header-h, 71px) + 14px); }
#business-assistants{ scroll-margin-top: calc(var(--header-h, 71px) + 14px); }

/* لینکِ ساده‌ی «پرش به بخش» — فقط نوشته + فلشِ درحال‌تپش رو به پایین، بدونِ
   باکس/بک‌گراندِ دکمه‌ای (خواستِ صریحِ کاربر، ۱۴۰۵/۰۷/۱۱)؛ هم برایِ میان‌برِ
   موبایلِ بالایِ صفحه (#products) و هم برایِ لینکِ همیشه‌نمایانِ پایینِ
   «خدمات کاربردی نابغه» (به سمتِ دستیارهای کسب‌وکار) استفاده می‌شود. */
.inline-jump-wrap{ text-align:center; margin-top:14px; }
.inline-jump-link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color: var(--ruby); font-weight:700; font-size:0.86rem; text-decoration:none;
}
.inline-jump-link:hover{ color: var(--ruby-deep); }
.inline-jump-arrow{ display:inline-flex; animation: jtpBounce 1.5s ease-in-out infinite; }
@keyframes jtpBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media (prefers-reduced-motion: reduce){ .inline-jump-arrow{ animation:none; } }

/* =========================================================
   "چرا نابغه مارکت؟" — homepage trust / benefits section
   ========================================================= */
.whyus{ scroll-margin-top: 84px; }

/* compact animated teaser that lives up in the page and scrolls down to .whyus */
/* قبلاً بوردرِ رنگی با یک ترفندِ دو-لایه‌ایِ background-clip (padding-box +
   border-box) به‌همراه انیمیشنِ background-position ساخته می‌شد — این
   ترکیب روی برخی مرورگرها/GPUها گاهی در وسطِ انیمیشن کل جعبه را یک لحظه
   بدون پس‌زمینه/محتوا رندر می‌کند (گزارشِ کاربر: «یک وقتایی خالی میشه»).
   جایگزینِ پایدارتر: پس‌زمینهٔ خودِ جعبه ساده و ثابت، رنگِ بوردر هم ثابت —
   جلوه‌های متحرک (glow/spark/arrow) که المان‌های جدا هستند دست‌نخورده
   می‌مانند. */
.whyus-teaser{
  position:relative; display:flex; align-items:center; gap:14px;
  width:100%; padding:16px 22px; border-radius: var(--radius-pill);
  text-decoration:none; color:var(--text); overflow:hidden;
  background: var(--surface);
  border:1.5px solid rgba(200,18,67,0.32);
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.whyus-teaser:hover{ transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: rgba(200,18,67,0.5); }

.whyus-teaser-glow{
  position:absolute; inset:-40% -10%; z-index:0; pointer-events:none;
  background: radial-gradient(240px 120px at var(--x,20%) 50%, rgba(240,180,41,0.22), transparent 70%);
  animation: whyusGlowSweep 5s ease-in-out infinite alternate;
}
@keyframes whyusGlowSweep{ from{ --x: 8%; } to{ --x: 92%; } }

.whyus-teaser-spark{ position:relative; z-index:1; font-size:1.15rem; animation: whyusSpark 2.4s ease-in-out infinite; }
@keyframes whyusSpark{ 0%,100%{ transform: scale(1) rotate(0); opacity:.85; } 50%{ transform: scale(1.25) rotate(12deg); opacity:1; } }

.whyus-teaser-text{ position:relative; z-index:1; flex:1; font-size:0.9rem; font-weight:600; line-height:1.8; }
.whyus-teaser-text b{ color: var(--ruby); }
.whyus-teaser-cta{
  display:inline-block; margin-inline-start:6px; padding:3px 12px; border-radius: var(--radius-pill);
  font-size:0.78rem; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--ruby), var(--ruby-light));
  box-shadow: 0 8px 18px -8px rgba(200,18,67,0.6);
}
.whyus-teaser-arrow{
  position:relative; z-index:1; display:inline-flex; width:34px; height:34px; flex-shrink:0;
  align-items:center; justify-content:center; border-radius:50%;
  color: var(--ruby); background: rgba(200,18,67,0.10);
  animation: whyusBounce 1.5s ease-in-out infinite;
}
.whyus-teaser-arrow svg{ width:18px; height:18px; }
@keyframes whyusBounce{ 0%,100%{ transform: translateY(-3px); } 50%{ transform: translateY(4px); } }

@media (max-width: 640px){
  .whyus-teaser{ padding:14px 16px; gap:10px; }
  .whyus-teaser-text{ font-size:0.82rem; }
}
@media (prefers-reduced-motion: reduce){
  .whyus-teaser{ animation:none; }
  .whyus-teaser-glow, .whyus-teaser-spark, .whyus-teaser-arrow{ animation:none; }
}

.whyus-shell{
  position:relative;
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(200,18,67,0.09), transparent 70%),
    radial-gradient(520px 280px at 0% 100%, rgba(240,180,41,0.10), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  overflow:hidden;
}
.whyus-shell::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background: linear-gradient(90deg, var(--ruby), var(--gold), var(--ruby-light), var(--ruby));
  background-size:300% 100%; animation: whyusBorderFlow 8s linear infinite;
}
.whyus-deco-glow{
  position:absolute; inset:-20% -10% auto -10%; height:70%; z-index:0; pointer-events:none;
  background: radial-gradient(closest-side, rgba(200,18,67,0.08), transparent 70%);
  filter: blur(30px); animation: whyusGlowPulse 7s ease-in-out infinite;
}
@keyframes whyusGlowPulse{ 0%,100%{ opacity:.7; transform: scale(1); } 50%{ opacity:1; transform: scale(1.04); } }
.whyus-head{ position:relative; z-index:1; text-align:center; max-width:640px; margin:0 auto 22px; }
.whyus-head .eyebrow{ justify-content:center; }
.whyus-head h2{
  margin:8px 0 0; font-size:1.32rem; font-weight:800; letter-spacing:0.01em; color:var(--text);
}
.whyus-lead{ margin:10px 0 0; font-size:0.86rem; line-height:1.9; color:var(--text-muted); }

.whyus-grid{
  position:relative; z-index:1; display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* flip cards: front = icon+title only, back = the description — revealed on
   click/tap/Enter (see the small script at the bottom of the page) so the
   section shows a lot less text at once. */
.whyus-card{
  position:relative; perspective: 1200px; cursor:pointer;
  border-radius: var(--radius-md);
  opacity:0; transform: translateY(14px);
  outline:none;
}
.whyus-card.in-view{ animation: whyusCardIn .55s ease forwards; animation-delay: calc(var(--i, 0) * .08s); }
@keyframes whyusCardIn{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .whyus-card{ opacity:1; transform:none; }
  .whyus-card.in-view{ animation:none; }
}
.whyus-flip-inner{
  position:relative; min-height:150px; width:100%; height:100%;
  transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.9,.3,1.1);
}
.whyus-card.is-flipped .whyus-flip-inner{ transform: rotateY(180deg); }
.whyus-card:hover .whyus-flip-inner{ transform: rotateY(6deg); }
.whyus-card.is-flipped:hover .whyus-flip-inner{ transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce){ .whyus-flip-inner{ transition:none; } }

.whyus-flip-front, .whyus-flip-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius: var(--radius-md); padding:16px; display:flex; flex-direction:column;
  box-shadow: 0 10px 26px -18px rgba(0,0,0,0.25);
}
.whyus-flip-front{
  background: var(--surface); border:1px solid var(--border-soft); align-items:flex-start;
}
.whyus-card:hover .whyus-flip-front, .whyus-card.is-flipped .whyus-flip-front{
  border-color: color-mix(in srgb, var(--wc, var(--ruby)) 55%, var(--border-soft));
}
.whyus-flip-front::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2.5px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--wc, var(--ruby));
}
.whyus-flip-back{
  transform: rotateY(180deg); justify-content:center; color:#fff; text-align:center;
  background: linear-gradient(150deg, var(--wc, var(--ruby)), color-mix(in srgb, var(--wc, var(--ruby)) 55%, #1B1220));
}
.whyus-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:10px; border-radius:50%;
  color: var(--wc, var(--ruby));
  background: color-mix(in srgb, var(--wc, var(--ruby)) 14%, transparent);
  transition: transform .3s ease;
}
.whyus-card:hover .whyus-ico{ transform: scale(1.1) rotate(-6deg); }
.whyus-ico svg{ width:21px; height:21px; }
.whyus-ico--gold{ color: var(--gold-deep); }
.whyus-flip-front h3{ margin:0 0 auto; font-size:0.92rem; font-weight:800; color:var(--text); }
.whyus-flip-hint{
  margin-top:10px; font-size:0.68rem; font-weight:700; color: var(--wc, var(--ruby));
  display:inline-flex; align-items:center; gap:4px;
}
.whyus-flip-hint::after{ content:"←"; font-size:0.85rem; transition: transform .2s ease; }
.whyus-card:hover .whyus-flip-hint::after{ transform: translateX(-3px); }
.whyus-flip-back p{ margin:0; font-size:0.8rem; line-height:1.85; }

.whyus-card--wide{
  grid-column: 1 / -1;
  text-decoration:none; color:inherit; cursor:pointer;
}
.whyus-wide-content{ display:flex; gap:16px; align-items:center; padding:18px 20px; }
.whyus-card--nai{
  padding:1.4px; background: linear-gradient(120deg, var(--ruby-light), var(--gold), var(--ruby));
  background-size:220% 220%; animation: whyusBorderFlow2 7s ease infinite;
}
@keyframes whyusBorderFlow{ to{ background-position: -300% 0; } }
@keyframes whyusBorderFlow2{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.whyus-card--nai::after{ display:none; }
.whyus-card--nai > *{ position:relative; z-index:1; }
.whyus-card--nai::before{
  content:""; position:absolute; inset:1.4px; z-index:0; border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, var(--surface), #FFF9EC);
}
.whyus-card--nai:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(240,180,41,0.5); }
.whyus-card--wide .whyus-ico{ flex-shrink:0; margin-bottom:0; width:48px; height:48px; }
.whyus-card--wide .whyus-ico svg{ width:24px; height:24px; }
.whyus-wide-body{ min-width:0; flex:1; }
.whyus-wide-body h3{ margin:2px 0 6px; font-size:0.96rem; }
.whyus-wide-body p{ font-size:0.8rem; }
.whyus-wide-note{
  display:inline-block; margin-top:10px; padding:5px 11px; border-radius: var(--radius-pill);
  font-size:0.7rem; font-weight:700; color: var(--gold-deep);
  background: rgba(240,180,41,0.14); border:1px solid rgba(240,180,41,0.3);
}
.whyus-wide-arrow{
  flex-shrink:0; font-size:1.3rem; color: var(--gold-deep); transition: transform .2s ease;
}
.whyus-card--nai:hover .whyus-wide-arrow{ transform: translateX(-6px); }

@media (prefers-reduced-motion: reduce){
  .whyus-shell::before, .whyus-deco-glow, .whyus-card--nai{ animation:none !important; }
}

@media (max-width: 640px){
  .whyus-shell{ padding: 18px 12px 16px; }
  .whyus-head{ margin-bottom:16px; }
  .whyus-head h2{ font-size:1.06rem; }
  .whyus-lead{ font-size:0.8rem; line-height:1.75; }
  .whyus-grid{ gap:9px; grid-template-columns: repeat(2, 1fr); }
  .whyus-card--span2{ grid-column: span 2; }
  .whyus-card--span2 .whyus-flip-inner{ min-height:84px; }
  .whyus-card--span2 .whyus-flip-front{ flex-direction:row; align-items:center; gap:10px; }
  .whyus-card--span2 .whyus-ico{ margin-bottom:0; }
  .whyus-card--span2 .whyus-flip-front h3{ flex:1; }
  .whyus-card--span2 .whyus-flip-hint{ margin-top:0; flex-shrink:0; }

  .whyus-flip-inner{ min-height:104px; }
  .whyus-flip-front, .whyus-flip-back{ padding:11px; }
  .whyus-ico{ width:32px; height:32px; margin-bottom:6px; }
  .whyus-ico svg{ width:16px; height:16px; }
  .whyus-flip-front h3{ font-size:0.76rem; line-height:1.35; }
  .whyus-flip-hint{ margin-top:6px; font-size:0.6rem; }
  .whyus-flip-back p{ font-size:0.7rem; line-height:1.6; }

  .whyus-wide-content{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px 16px; }
  .whyus-wide-arrow{ display:none; }
}

/* =========================================================
   Section headers
   ========================================================= */
.section{ padding: 40px 0; }
.section-head{ display:flex; flex-direction:column; gap:6px; margin-bottom: 22px; }
.section-head .eyebrow{ color: var(--ruby); font-weight:700; font-size:0.78rem; }
.section-head h2{ margin:0; font-size: clamp(1.2rem, 3.6vw, 1.6rem); font-weight:800; }
.section-head p{ margin:0; color: var(--text-muted); font-size:0.88rem; max-width: 60ch; }
.section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Category chips (used on the dedicated products page) */
.category-chips{ display:flex; gap:9px; overflow-x:auto; padding-bottom:6px; margin-bottom: 18px; scrollbar-width:none; }
.category-chips::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: var(--surface-2); border:1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted); cursor:pointer; font-weight:600;
  transition: all .15s ease;
}
.chip.active, .chip:hover{ background: var(--surface-3); color: var(--text); border-color: var(--ruby); }

/* Search bar (products page) */
.search-bar{ display:flex; gap:10px; margin-bottom: 16px; }
.search-bar input{ flex:1; }
@media (max-width: 480px){ .search-bar{ flex-direction:column; } }

/* =========================================================
   Product cards
   ========================================================= */
.product-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 620px){ .product-grid{ grid-template-columns: repeat(3, 1fr); gap:18px; } }
@media (min-width: 960px){ .product-grid{ grid-template-columns: repeat(4, 1fr); } }

.ticket-card{
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
}
.ticket-card:hover{ transform: translateY(-4px); border-color: rgba(200,18,67,0.3); box-shadow: var(--shadow-card); }

.ticket-media{
  position:relative; aspect-ratio: 1 / 1; width:100%;
  background: linear-gradient(135deg, rgba(200,18,67,0.10), rgba(240,180,41,0.08));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ticket-media img{ width:100%; height:100%; object-fit: cover; }
.ticket-media .placeholder-ico{ font-size: 2rem; opacity: .55; }
/* Mobile (2-column) cards are narrow enough that two corner badges side by
   side can run into each other — stack them at the same corner instead,
   and only move to opposite corners once there's room (≥620px). */
.ticket-badge{
  position:absolute; top:8px; inset-inline-start:8px;
  background: linear-gradient(135deg, #f6b93b, #e67e22);
  color:#fff; font-size: 0.54rem; font-weight:800; white-space:nowrap;
  padding: 4px 8px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 12px rgba(230,126,34,0.45);
}
.ticket-badge-off{
  position:absolute; top:8px; inset-inline-end:8px;
  background: rgba(20,8,16,0.82); color:#fff;
  font-size: 0.54rem; font-weight:800; white-space:nowrap;
  padding: 4px 8px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.25);
}

/* Distinct from the plain admin badge above — reserved for products that
   support "اشتراکی" and/or "رزرو اختصاصی", the two headline features we
   want to stand out more than a generic "پرفروش" label: a soft white ring
   and a gentle breathing glow so it actually catches the eye instead of
   blending into the corner. */
.ticket-badge-special{
  position:absolute; top:32px; inset-inline-start:8px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color:#fff; font-size: 0.54rem; font-weight:800; white-space:nowrap;
  padding: 4px 8px; border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.6);
  animation: ticket-badge-glow 2.4s ease-in-out infinite;
}
/* no پرفروش/تخفیف badge above it → sit at the very top instead of leaving a gap */
.ticket-badge-special.no-primary-badge{ top:8px; }
@keyframes ticket-badge-glow{
  0%, 100% { box-shadow: 0 4px 14px rgba(124,58,237,0.55); }
  50% { box-shadow: 0 4px 20px rgba(219,39,119,0.75); }
}
.ticket-delivery{
  position:absolute; bottom:8px; inset-inline-end:8px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  color: var(--ruby); font-size: 0.58rem; font-weight:700;
  padding: 4px 8px; border-radius: var(--radius-pill);
  display:flex; align-items:center; gap:4px;
}

.ticket-body{ padding: 10px 11px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ticket-cat{ font-size: 0.64rem; color: var(--text-faint); font-weight:700; }
.ticket-body h3{ margin:0; font-size:0.78rem; font-weight:800; line-height:1.4; }
.ticket-body p.desc{ margin:0; color: var(--text-muted); font-size: 0.68rem; flex:1; display:none; }

/* Price block: one "main" row (the price everyone sees first) and,
   only when the product also offers شریکی/رزرو اختصاصی, a thin divider
   followed by a short list of alternative modes — each alternative row
   uses the exact same font-size/weight as the others so no one price
   looks more "official" than another; only the main price above the
   divider is meant to stand out. */
.ticket-prices{ display:flex; flex-direction:column; gap:3px; margin-top:2px; }

.price-row{ display:flex; align-items:baseline; gap:6px; flex-wrap: wrap; }
.price-now{ font-family: var(--font-mono); font-weight:800; font-size: 0.86rem; color: var(--text); direction: ltr; }
.price-old{ font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-faint); text-decoration: line-through; direction: ltr; }
.price-unit{ font-size: 0.6rem; color: var(--text-muted); }
.discount-pill{
  background: #FDECEC; color: var(--ruby); font-size:0.62rem; font-weight:800;
  padding: 2px 7px; border-radius: var(--radius-pill);
}

.price-mode-label{ font-size: 0.62rem; font-weight:700; color: var(--text-faint); white-space:nowrap; }

.price-divider{ border-top: 1px dashed var(--border); margin: 3px 0; }

.price-alt-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.price-alt-value{
  font-family: var(--font-mono); font-weight:700; font-size: 0.68rem;
  color: var(--text); direction: ltr; white-space:nowrap;
}
.price-alt-value small{ font-size: 0.58rem; font-weight:600; color: var(--text-muted); }
.price-alt-value.price-alt-soon{
  font-family: var(--font-fa); font-weight:800; color: var(--gold-deep);
  background: rgba(240,180,41,0.16); border-radius: var(--radius-pill); padding:1px 9px;
}
.price-alt-more{ justify-content:flex-start; }
.price-alt-more .price-mode-label{ color: var(--ruby); font-style:italic; white-space:normal; }

.ticket-actions{ display:flex; gap:8px; margin-top: 4px; }
.ticket-actions .btn{ flex:1; }
.ticket-actions{ display:none; }

@media (min-width: 620px){
  .ticket-body p.desc{ display: block; }
  .ticket-body h3{ font-size: 0.92rem; }
  .ticket-body{ padding: 15px 17px 17px; gap:9px; }
  .price-now{ font-size: 1rem; }
  .price-unit{ font-size: 0.68rem; }
  .price-mode-label{ font-size: 0.66rem; }
  .price-alt-value{ font-size: 0.74rem; }
  .ticket-badge{ font-size: 0.68rem; padding: 6px 12px; }
  /* desktop: swap sides — yellow (فروش ویژه / تخفیف) on the left,
     purple-pink (اشتراکی/رزروی / طرح ویژه) on the right */
  .ticket-badge{ inset-inline-start:auto; inset-inline-end:8px; }
  .ticket-badge + .ticket-badge-off{ top:34px; }
  .ticket-badge-special,
  .ticket-badge-special.no-primary-badge{
    top:8px; inset-inline-end:auto; inset-inline-start:8px;
    font-size: 0.72rem; padding: 7px 13px;
  }
  .ticket-actions{ display:flex; }
  .ticket-actions .btn-outline{ display: inline-flex; }
}

/* View-all products button */
.view-all-wrap{ display:flex; justify-content:center; margin-top: 28px; }
.btn-view-all{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 30px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); color: var(--ink-text); font-weight:700; font-size:0.92rem;
  box-shadow: 0 16px 34px -14px rgba(20,8,16,0.55);
  border: 1px solid var(--ink-border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-view-all:hover{ transform: translateY(-2px); }
.btn-view-all .count{ font-family: var(--font-mono); background: rgba(255,255,255,0.14); padding: 3px 9px; border-radius: var(--radius-pill); font-size:0.78rem; }

/* Pagination (products page) */
.pagination-row{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top: 26px; flex-wrap:wrap; }

.page-nav-btn{
  flex-shrink:0; padding:10px 16px; border-radius:12px;
  background: var(--surface); border:1.5px solid var(--border-soft);
  color: var(--text); font-size:0.8rem; font-weight:700; text-decoration:none;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.page-nav-btn:hover{ border-color: var(--ruby-light); background: var(--surface-2); transform: translateY(-1px); }

.page-num-list{
  display:flex; align-items:center; gap:6px;
  max-width: 100%; overflow-x:auto; scrollbar-width:none; padding:2px;
}
.page-num-list::-webkit-scrollbar{ display:none; }
.page-num-box{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background: var(--surface); border:1.5px solid var(--border-soft);
  color: var(--text-muted); font-size:0.8rem; font-weight:700; font-family: var(--font-mono);
  text-decoration:none; transition: all .2s ease;
}
.page-num-box:hover{ border-color: var(--ruby-light); color: var(--text); transform: translateY(-1px); }
.page-num-box.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  border-color:transparent; color:#fff;
  box-shadow: 0 8px 18px -8px rgba(200,18,67,0.55);
}
.page-num-dots{
  flex-shrink:0; width:24px; text-align:center; color: var(--text-faint); font-weight:700;
}

@media (max-width:480px){
  .page-nav-btn{ padding:9px 12px; font-size:0.74rem; }
  .page-num-box{ width:34px; height:34px; font-size:0.76rem; }
  /* show fewer number boxes on narrow screens — hide the later mid-range
     ones (keeps first few + the ellipsis + last page always visible) */
  .page-num-list > .page-num-box:nth-child(n+5):not(:last-child){ display:none; }
}

/* =========================================================
   Feature strip — a slow, endless "train" of capability chips scrolling across
   a light, soft-branded background (bright, not another dark card).
   ========================================================= */
.feature-strip{
  position:relative; overflow:hidden;
  background: linear-gradient(120deg, #FFFFFF, var(--bg-blush) 50%, var(--surface-2));
  border-radius: var(--radius-lg); border:1px solid var(--border);
  padding:18px 0; box-shadow: var(--shadow-card);
  /* Forced LTR here (page stays RTL): a block wider than its container always flushes
     against its containing block's start edge — under RTL that's the right edge, which
     left chip 0 with nothing but empty space to its right for new chips to scroll in from.
     Under LTR, chip 0 flushes left with the whole rest of the (5x-duplicated) track
     extending off-screen to the right — exactly the reserve a leftward marquee needs to
     never run dry. Chip text direction is restored to rtl below so Persian still reads
     correctly inside each chip. */
  direction: ltr;
}
.feature-strip::before, .feature-strip::after{
  content:""; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
.feature-strip::before{ right:0; background: linear-gradient(to left, var(--bg-blush), transparent); }
.feature-strip::after{ left:0; background: linear-gradient(to right, var(--surface-2), transparent); }
.feature-track{
  display:flex; align-items:center; gap:10px; width:max-content;
}
/* JS (main.js) measures the real rendered pixel width of one chip-set and sets
   --feature-shift, then adds this class — animating by an exact measured pixel amount
   instead of a guessed percentage, so the loop is pixel-perfect on every device/browser
   regardless of font metrics. Until JS runs, the strip just sits still (no broken motion). */
.feature-track.feature-track-animate{
  animation: featureTrain 38s linear infinite;
}
.feature-strip:hover .feature-track{ animation-play-state: paused; }
@keyframes featureTrain{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--feature-shift, 0px))); }
}
.feature-chip{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:9px 16px; border-radius: var(--radius-pill);
  background: #fff; border:1px solid rgba(200,18,67,0.16);
  color: var(--text); font-size:0.8rem; font-weight:700; white-space:nowrap;
  box-shadow: 0 4px 12px -8px rgba(89,8,36,0.25);
  direction: rtl; /* restore correct Persian text order within each chip (see .feature-strip) */
}
.feature-chip .ico{ font-size:1rem; }
@media (max-width:640px){
  .feature-strip{ padding:14px 0; }
  .feature-chip{ padding:8px 13px; font-size:0.74rem; }
}
@media (prefers-reduced-motion: reduce){
  .feature-track{ animation: none; }
}

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner{
  border-radius:var(--radius-lg); padding:40px 26px; text-align:center; position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--ruby-ink), var(--ink-900));
  color:#fff; box-shadow: var(--shadow-pop);
}
.cta-banner .glow1{ position:absolute; width:260px; height:260px; border-radius:50%; background: radial-gradient(circle, rgba(255,67,104,0.4), transparent 70%); top:-100px; right:-60px; }
.cta-banner .glow2{ position:absolute; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(240,180,41,0.25), transparent 70%); bottom:-80px; left:-40px; }
.cta-banner h2{ position:relative; z-index:1; margin:0 0 10px; font-size:clamp(1.15rem,3.4vw,1.7rem); }
.cta-banner p{ position:relative; z-index:1; margin:0 0 22px; color:rgba(255,255,255,0.78); font-size:0.9rem; }
.cta-banner .ctas{ position:relative; z-index:1; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.cta-banner .btn-outline{ border-color: rgba(255,255,255,0.3); color:#fff; }
.cta-banner .btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.08); }

/* =========================================================
   Generic cards / panels layout
   ========================================================= */
.card{
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 20px;
}
.card + .card{ margin-top: 16px; }

/* Subtle red/burgundy glow accents for the user panel's light (default) theme */
body.panel-page:not(.theme-dark) .card,
body.panel-page:not(.theme-dark) .stat-card{
  position:relative; overflow:hidden;
}
body.panel-page:not(.theme-dark) .card::before,
body.panel-page:not(.theme-dark) .stat-card::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:170px; height:170px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,18,67,0.09), transparent 70%);
  top:-70px; left:-60px;
}
body.panel-page:not(.theme-dark) .card::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, rgba(240,180,41,0.06), transparent 70%);
  bottom:-60px; right:-50px;
}
body.panel-page:not(.theme-dark) .card > *,
body.panel-page:not(.theme-dark) .stat-card > *{
  position:relative; z-index:1;
}

/* Shop header — light, editorial style: search is its own hero element,
   filters live separately below in a soft card (not a loud dark band) */
.shop-header-wrap{ position:relative; overflow:hidden; padding-top: 26px; padding-bottom: 4px; }
@media (min-width:640px){ .shop-header-wrap{ padding-top: 38px; } }

/* Colorful wash behind the header zone — gives the glass panels something
   to actually blur/refract, otherwise the frosted effect isn't visible */
.shop-header-wrap::before{
  content:""; position:absolute; inset:-60px; z-index:0; pointer-events:none;
  background:
    radial-gradient(480px 320px at 12% 10%, rgba(255,67,104,0.16), transparent 60%),
    radial-gradient(460px 300px at 88% 20%, rgba(240,180,41,0.14), transparent 60%),
    radial-gradient(420px 300px at 45% 100%, rgba(200,18,67,0.1), transparent 60%);
}
.shop-header-wrap > .container{ position:relative; z-index:1; }

/* Glass panel wrapping the title, search, and filter summary */
.shop-header-glass{
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 22px;
  padding: 20px 16px;
  box-shadow: 0 20px 46px -26px rgba(60,20,35,0.25), inset 0 1px 0 rgba(255,255,255,0.85);
  margin-bottom: 16px;
}
@media (min-width:640px){ .shop-header-glass{ padding: 32px 30px; border-radius: 28px; margin-bottom:20px; } }

.shop-header-top{ text-align:center; margin-bottom:22px; }
.shop-header-top .eyebrow{
  display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  font-size:0.7rem; font-weight:700; color: var(--ruby);
}
.shop-header-top h1{
  font-size:1.4rem; font-weight:800; margin:13px 0 6px; color: var(--text);
  background: linear-gradient(120deg, var(--text), var(--ruby-deep) 140%);
  -webkit-background-clip:text; background-clip:text;
}
.shop-header-top p{ font-size:0.82rem; color: var(--text-muted); margin:0; }
@media (min-width:640px){
  .shop-header-top{ margin-bottom:28px; }
  .shop-header-top h1{ font-size:2rem; }
  .shop-header-top p{ font-size:0.92rem; }
}

/* Search — the visual hero of this section, a large soft pill */
.shop-search-elegant{
  position:relative; display:flex; align-items:center; gap:8px;
  max-width:640px; margin:0 auto 24px;
  background:#fff; border:1.5px solid var(--border-soft); border-radius:999px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 14px 34px -18px rgba(120,20,50,0.28);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shop-search-elegant:focus-within{
  border-color: var(--ruby-light);
  box-shadow: 0 16px 38px -16px rgba(200,18,67,0.3);
}
.shop-search-ico{ width:19px; height:19px; stroke: var(--text-faint); flex-shrink:0; }
.shop-search-elegant input[type=search]{
  flex:1; min-width:0; border:none; background:transparent; padding:11px 4px;
  font-family:inherit; font-size:0.86rem; color: var(--text);
}
.shop-search-elegant input[type=search]::placeholder{ color: var(--text-faint); }
.shop-search-elegant input[type=search]:focus{ outline:none; }
.shop-search-elegant button{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  border:none; border-radius:999px; padding:11px 22px; font-weight:800; font-size:0.82rem; cursor:pointer;
  flex-shrink:0; box-shadow: 0 8px 18px -8px rgba(200,18,67,0.5);
}
@media (max-width:480px){
  .shop-search-elegant{ padding:5px 5px 5px 15px; }
  .shop-search-elegant button{ padding:10px 16px; font-size:0.76rem; }
  .shop-search-elegant input[type=search]{ font-size:0.8rem; }
}

/* Filters — its own glass panel, separate from the header, with a subtle
   decorative accent line and gentle entrance animations */
.shop-filters-card{
  position:relative; overflow:hidden;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 18px; padding: 16px 16px 4px;
  box-shadow: 0 18px 40px -26px rgba(60,20,35,0.22), inset 0 1px 0 rgba(255,255,255,0.8);
}
.shop-filters-card::after{
  content:""; position:absolute; inset-inline-start:0; top:0; height:3px; width:100%;
  background: linear-gradient(90deg, var(--ruby-light), var(--gold), var(--ruby-light));
  background-size:200% 100%; animation: filterAccentShift 6s linear infinite;
}
@keyframes filterAccentShift{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
@media (min-width:640px){ .shop-filters-card{ padding: 22px 24px 8px; border-radius:22px; } }

.shop-filter-group{
  position:relative; z-index:1; margin-bottom:16px; min-width:0;
  opacity:0; transform:translateY(6px);
  animation: filterGroupIn .45s cubic-bezier(.16,.84,.44,1) forwards;
}
.shop-filter-group:nth-child(1){ animation-delay:.04s; }
.shop-filter-group:nth-child(2){ animation-delay:.1s; }
.shop-filter-group:nth-child(3){ animation-delay:.16s; }
@keyframes filterGroupIn{ to{ opacity:1; transform:translateY(0); } }

.shop-filter-label{
  font-size:0.7rem; color: var(--text-faint); margin:0 0 9px; font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.shop-filter-label::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background: linear-gradient(135deg, var(--ruby-light), var(--gold));
}
.shop-chip-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:3px; min-width:0; }
.shop-chip-row::-webkit-scrollbar{ display:none; }
.shop-chip-row a{
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  padding: 7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--border-soft);
  color: var(--text-muted); font-size:0.73rem; font-weight:700; white-space:nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.shop-chip-row a:hover{
  border-color: var(--ruby-light); color: var(--text); transform: translateY(-2px);
  box-shadow: 0 6px 14px -8px rgba(200,18,67,0.35);
}
.shop-chip-row a:active{ transform: translateY(0) scale(0.96); }
.shop-chip-row a.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  border-color:transparent; color:#fff;
  box-shadow: 0 8px 18px -8px rgba(200,18,67,0.55);
  animation: chipActivePop .35s cubic-bezier(.34,1.4,.64,1);
}
@keyframes chipActivePop{ 0%{ transform:scale(0.9); } 60%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* ===== نوع محصول — segmented toggle switch (binary choice, distinct from chips) ===== */
.shop-toggle-switch{
  display:inline-flex; background: rgba(200,18,67,0.06); border:1px solid rgba(200,18,67,0.14);
  border-radius:999px; padding:4px; gap:2px;
}
.shop-toggle-switch a{
  padding:9px 18px; border-radius:999px; font-size:0.76rem; font-weight:700;
  color: var(--text-muted); text-decoration:none; transition: all .25s cubic-bezier(.4,0,.2,1);
}
.shop-toggle-switch a.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  box-shadow: 0 6px 16px -6px rgba(200,18,67,0.55);
}

/* ===== مرتب‌سازی / زیردسته — elegant styled dropdown select ===== */
.shop-select-wrap{
  position:relative; max-width:320px;
  border-radius:14px; overflow:hidden;
  background: linear-gradient(135deg, rgba(240,180,41,0.08), rgba(200,18,67,0.06));
  border:1.5px solid rgba(200,18,67,0.18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.shop-select-wrap:hover, .shop-select-wrap:focus-within{
  border-color: var(--ruby-light); box-shadow: 0 8px 20px -12px rgba(200,18,67,0.4);
}
.shop-select-wrap select{
  appearance:none; -webkit-appearance:none; width:100%;
  background:transparent; border:none; cursor:pointer;
  padding:12px 40px 12px 16px; font-family:inherit; font-size:0.8rem; font-weight:700;
  color: var(--text);
}
.shop-select-wrap select:focus{ outline:none; }
.shop-select-chevron{
  position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke: var(--ruby); pointer-events:none;
}

/* ===== دسته‌بندی — featured spotlight tile(s). Designed to look special even
   with a single category, and to gracefully grow into a small grid later ===== */
.shop-category-spotlight{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.spotlight-tile{
  position:relative; overflow:hidden; display:flex; align-items:center; gap:10px;
  padding:12px 20px 12px 16px; border-radius:16px; text-decoration:none;
  background: linear-gradient(135deg, #fff, var(--surface-2));
  border:1.5px solid var(--border-soft);
  box-shadow: 0 8px 20px -14px rgba(90,10,35,0.25);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.spotlight-tile:hover{ transform: translateY(-2px); border-color: var(--ruby-light); }
.spotlight-ico{
  width:34px; height:34px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  background: linear-gradient(135deg, rgba(255,67,104,0.14), rgba(240,180,41,0.14));
}
.spotlight-name{ font-size:0.82rem; font-weight:800; color: var(--text); }
.spotlight-tile.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  border-color:transparent;
  box-shadow: 0 12px 26px -12px rgba(200,18,67,0.55);
}
.spotlight-tile.active .spotlight-ico{ background: rgba(255,255,255,0.22); }
.spotlight-tile.active .spotlight-name{ color:#fff; }
.spotlight-tile.active::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(160px 80px at 90% 0%, rgba(255,255,255,0.25), transparent 70%);
}
.spotlight-clear{
  font-size:0.72rem; font-weight:700; color: var(--text-faint); text-decoration:none;
  padding:8px 4px; transition: color .2s ease;
}
.spotlight-clear:hover{ color: var(--ruby); }

/* Two-column layout — desktop only. Right column: نوع محصول + مرتب‌سازی.
   Left column: دسته‌بندی + زیردسته. On mobile this has no effect at all,
   so the existing (liked) mobile layout — نوع محصول full row, مرتب‌سازی
   full row, دسته‌بندی+زیردسته paired side by side — stays exactly the same. */
.shop-filter-columns{ display:contents; }
.shop-filter-col{ display:contents; }
@media (min-width:641px){
  .shop-filter-columns{
    display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start;
  }
  .shop-filter-col{ display:flex; flex-direction:column; gap:18px; }
}

/* Category + subcategory: on mobile (nested inside the left column, which
   is display:contents there) they pair up side by side. On desktop
   (nested inside a flex-column .shop-filter-col) they simply stack. */
.shop-catsub-row{ display:contents; }
@media (max-width:640px){
  .shop-catsub-row{
    display:flex; flex-wrap:wrap; gap:14px 16px; align-items:flex-start;
    margin-bottom:16px;
  }
  .shop-catsub-row .shop-filter-group{ flex:1 1 150px; min-width:0; margin-bottom:0; }
  .shop-catsub-row .shop-category-spotlight{ flex-wrap:wrap; }
}

/* Compact filter summary (mobile only) + attractive filter-toggle icon */
.shop-filter-summary{ display:none; }
.selected-filters-label{ font-size:0.66rem; color: var(--text-faint); font-weight:700; margin:0 0 7px; }
.shop-filter-summary-text{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-mini{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 8px 5px 11px; border-radius:999px;
  background: linear-gradient(135deg, rgba(255,67,104,0.16), rgba(200,18,67,0.1));
  border:1px solid rgba(200,18,67,0.2);
  font-size:0.7rem; font-weight:700; color: var(--ruby-deep); white-space:nowrap;
}
.chip-mini-remove{
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background: rgba(200,18,67,0.16); color: var(--ruby-deep);
  font-size:0.72rem; line-height:1; text-decoration:none;
  transition: background .15s ease, color .15s ease;
}
.chip-mini-remove:hover{ background: var(--ruby); color:#fff; }
.shop-filter-magic-btn{
  position:relative; flex-shrink:0; cursor:pointer; border:none;
  display:flex; align-items:center; gap:6px;
  padding: 10px 16px 10px 14px; border-radius:999px;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; font-family:inherit; font-size:0.74rem; font-weight:800;
  box-shadow: 0 10px 24px -10px rgba(200,18,67,0.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
.shop-filter-magic-btn:active{ transform: scale(0.94); }
.shop-filter-magic-btn svg{ width:17px; height:17px; stroke:#fff; fill:#fff; flex-shrink:0; }

@media (max-width:640px){
  .shop-filter-summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:2px 2px 16px; margin-bottom:0;
  }
  .shop-filter-summary-text{ min-width:0; }

  /* full-bleed, edge-to-edge, sharp corners on mobile only — desktop stays
     rounded and contained within the page's normal padding */
  .shop-header-glass, .shop-filters-card{
    width:100vw; margin-inline-start: calc(50% - 50vw);
    border-radius:0; border-left:none; border-right:none;
  }

  .shop-filters-card{ display:none; }
  .shop-filters-card.mobile-open{
    display:flex; align-items:flex-end; justify-content:center;
    position:fixed; inset:0; z-index:200;
    width:auto; margin-inline-start:0;
    background: rgba(18,24,38,0.55); backdrop-filter: blur(4px);
    padding:0; border:none; border-radius:0;
  }
  .shop-filters-inner{
    position:relative;
    background:#fff; width:100%; max-height:78vh; overflow-y:auto;
    border-radius: 22px 22px 0 0; padding:22px 16px 26px;
    animation: sheetUp .32s cubic-bezier(.2,.9,.3,1);
  }
  .shop-filters-inner::before{
    content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:38px; height:4px; border-radius:4px; background: var(--border);
  }
  @keyframes sheetUp{ from{ transform: translateY(28px); opacity:0.4; } to{ transform: translateY(0); opacity:1; } }
  .shop-filters-modal-header{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
    padding-bottom:12px; border-bottom:1px solid var(--border-soft);
  }
  .shop-filters-modal-header h3{ margin:0; font-size:1rem; }
  .shop-filters-modal-header .modal-close{
    border-color: var(--border-soft); background: var(--surface-2); color: var(--text);
  }
  .shop-filters-modal-header .modal-close:hover{ background: var(--surface-3); }

  .shop-toggle-switch a{ padding:8px 14px; font-size:0.72rem; }
  .shop-select-wrap{ max-width:100%; }
  .shop-select-wrap select{ padding:11px 36px 11px 14px; font-size:0.78rem; }
  .spotlight-tile{ padding:10px 16px 10px 14px; }
  .spotlight-ico{ width:30px; height:30px; font-size:1rem; }
  .spotlight-name{ font-size:0.78rem; }
}
@media (min-width:641px){
  .shop-filters-modal-header{ display:none; }
}


.page-hero{ padding-top: 30px; padding-bottom: 10px; }
.page-hero h1{ font-size: 1.5rem; margin: 0 0 6px; font-weight:800; }
.page-hero p{ color: var(--text-muted); margin:0; font-size:0.9rem; }

/* Panel pages (user panel): plain white, no decorative background.
   Kept as pure white on mobile (content fills most of the screen anyway),
   but on a large desktop viewport a flat #fff wall next to white cards
   reads as glare — a barely-there tint plus a soft ambient glow keeps it
   "white" while giving the eye something to rest on. */
body.panel-page:not(.theme-dark){ background: #fff; }
body.panel-page .bg-orbs{ display:none; }
body.panel-page .page-hero{ padding-top: 22px; padding-bottom: 4px; }
body.panel-page .page-hero h1{ font-size: 1.2rem; }
body.panel-page .page-hero p{ font-size: 0.82rem; }

/* No footer anywhere in the user panel, mobile or desktop — on desktop
   the fixed full-height sidebar (see .panel-flow > .grid-sidebar) has
   nothing below it to collide with, same as نابغه‌فایل's panel view, which
   simply has no footer either; on mobile it's just extra noise below an
   already-complete panel nav. */
body.panel-page .site-footer{ display:none; }

@media (min-width: 900px){
  /* Stays white (not --bg-soft, which reads as grey/"whitesmoke" at this
     scale) — just a bare whisper of the brand red so it isn't a totally
     flat #fff, per explicit request to keep it looking white above all. */
  body.panel-page:not(.theme-dark){
    background: #fff;
    background-image: radial-gradient(900px circle at 100% 0%, rgba(200,18,67,0.035), transparent 55%);
    background-attachment: fixed;
  }
}

/* Panel grid (user/admin/management): lets the sidebar sit visually above the
   title on mobile, while keeping a normal side-by-side layout on desktop —
   without needing to move any markup around. */
/* Panel flow: sidebar appears first (mobile: above title) via simple flex
   column order; on desktop, sidebar becomes a fixed-width side column while
   hero+title stay stacked together in the remaining space. Deliberately
   avoids CSS Grid here — grid tracks can be forced wider than the viewport
   by a flex-scrolling child (like the tab bar) unless min-width:0 is set on
   every single level, which is fragile. Flexbox in column mode doesn't have
   that failure mode since item width is stretched, not content-driven. */
/* No longer wrapped in .container (see user/*.html) — the sidebar needs to
   reach the true edge of the viewport, so .panel-flow now spans full width
   itself and the content column supplies its own inset padding instead. */
.panel-flow{
  display:flex; flex-direction:column; gap:16px;
  padding-top: 0; padding-bottom: 48px;
  width:100%; min-width:0;
}
.panel-flow > .grid-sidebar{ width:100%; min-width:0; }
.panel-flow .panel-right{ display:contents; }
.panel-flow .grid-hero{ padding-top:16px; padding-inline:16px; min-width:0; width:100%; box-sizing:border-box; }
.panel-flow .grid-main{ display:flex; flex-direction:column; gap:14px; min-width:0; width:100%; padding-inline:16px; box-sizing:border-box; }

@media (min-width: 900px){
  /* .grid-sidebar is position:fixed (see below — confirmed working, unlike
     sticky, on this site) — out of normal flow entirely, so .panel-right
     just reserves its width via padding instead of any flex sizing. */
  .panel-flow{ padding-top:0; }
  .panel-flow .panel-right{ display:block; min-width:0; margin-inline-start:230px; }
  .panel-flow .grid-hero{ padding-top:30px; padding-inline:32px; max-width:1000px; margin-inline:auto; }
  .panel-flow .grid-main{ padding-inline:32px; padding-bottom:32px; max-width:1000px; margin-inline:auto; }

  /* flash-container (the "سفارش شما با موفقیت ثبت شد" banner) is rendered
     centered/full-width by base.html, above .panel-flow — with no idea the
     fixed sidebar exists. Without this, its start edge lands underneath
     the sidebar (z-index:55) and gets visually clipped on panel pages. */
  body.panel-page .flash-container{
    max-width:none; width:calc(100% - 230px);
    margin-inline-start:230px; margin-inline-end:0;
    padding-inline:32px; box-sizing:border-box;
  }
}

@media (max-width: 640px){
  .panel-flow{ gap:12px; }
  .card{ padding: 15px; }
  .card + .card{ margin-top: 12px; }
}

/* Panel shell (admin / management panels — simple, unchanged layout;
   these panels don't use the banded/reordering system built for the user panel) */
.panel-shell{ display:flex; flex-direction:column; gap:16px; padding-top: 16px; padding-bottom: 48px; }
.panel-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }

@media (min-width: 900px){
  .panel-shell{ flex-direction: row; align-items:flex-start; }
  .panel-main{ flex:1; min-width:0; }
}

@media (max-width: 640px){
  .panel-shell{ padding-top: 12px; gap:12px; }
}

/* On mobile the equivalent tab links live inside the (fixed) header
   instead (.panel-tabs-row, see navbar.html), so .grid-sidebar (the full
   tab column) is simply hidden there; it only reappears, as a fixed
   full-height column, at desktop width (see the media query below).
   Still "white" (not a bold colored band) but with a soft brand-tinted
   gradient + two whisper-quiet glow accents instead of flat #fff, so it
   reads as a designed panel rather than a plain unstyled box. */
.panel-flow > .grid-sidebar{
  display:none;
  position:relative; overflow:hidden;
  background:
    linear-gradient(90deg, var(--ruby-light), var(--gold) 55%, var(--ruby-deep)) top / 100% 4px no-repeat,
    linear-gradient(165deg, #fff 0%, var(--bg-blush) 55%, #ffefd9 100%);
  border-inline-end: 1px solid var(--border-soft);
  box-shadow: -10px 0 28px -20px rgba(20,8,16,0.18);
}
.panel-flow > .grid-sidebar::before, .panel-flow > .grid-sidebar::after{
  content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
}
.panel-flow > .grid-sidebar::before{
  width:260px; height:260px; top:-100px; inset-inline-end:-100px;
  background: radial-gradient(circle, rgba(240,180,41,0.4), transparent 68%);
}
.panel-flow > .grid-sidebar::after{
  width:240px; height:240px; bottom:-90px; inset-inline-start:-90px;
  background: radial-gradient(circle, rgba(200,18,67,0.28), transparent 68%);
}
body.theme-dark .panel-flow > .grid-sidebar{
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.panel-sidebar{
  position:relative; z-index:1;
  display:flex; gap:10px; overflow-x:auto;
  padding: 0 0 10px; margin-bottom:-10px;
  width:100%; max-width:100%; min-width:0;
  /* always-visible, styled scroll indicator so users know there's more to scroll */
  scrollbar-width: thin; scrollbar-color: rgba(120,100,112,0.4) transparent;
}
.panel-sidebar::-webkit-scrollbar{ height:5px; }
.panel-sidebar::-webkit-scrollbar-track{ background: rgba(120,100,112,0.12); border-radius:10px; }
.panel-sidebar::-webkit-scrollbar-thumb{ background: rgba(120,100,112,0.45); border-radius:10px; }

/* ===== Default tab styling — used by admin/management panels (simple,
   clean segmented-pill look; no colored band, no thick borders) ===== */
.panel-sidebar a{
  flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:6px;
  padding: 10px 15px; border-radius: var(--radius-pill);
  background: transparent; border: none;
  font-size: 0.8rem; color: var(--text-muted); font-weight:700;
  white-space: nowrap; cursor:pointer; font-family:inherit;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.panel-sidebar a.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(200,18,67,0.55);
}
.panel-sidebar a:not(.active):hover{ background: var(--surface-3); color: var(--text); }
body.theme-dark .panel-sidebar a.active{ color: #fff; }

/* ===== Grouped / collapsible management sidebar (.mgnav) ===================
   Overrides the horizontal pill-strip above: a vertical accordion at every
   width. Groups collapse by default; JS + the server open the active one. */
.panel-shell .panel-sidebar.mgnav{
  flex-direction:column; overflow:visible; gap:3px;
  width:100%; padding:8px; margin-bottom:0; align-self:stretch;
}
.mgnav .mgnav-group{ display:flex; flex-direction:column; }
.mgnav .mgnav-head{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:10px 12px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-md); font-family:inherit; font-weight:800;
  font-size:0.82rem; color:#f5f5f5; text-align:start; letter-spacing:.1px;
  transition:background .14s ease, color .14s ease;
}
.mgnav .mgnav-head:hover{ background:var(--surface-3); color:#fff; }
.mgnav .mgnav-group.is-open > .mgnav-head{ color:#fff; }
.mgnav .mgnav-head .mgnav-chev{ color:#f5f5f5; }
.mgnav .mgnav-title{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mgnav .mgnav-chev{ font-size:0.72rem; opacity:.6; transition:transform .16s ease; }
.mgnav .mgnav-group.is-open > .mgnav-head .mgnav-chev{ transform:rotate(180deg); }
.mgnav .mgnav-ico{ font-size:0.95rem; line-height:1; flex-shrink:0; width:1.15em; text-align:center; }
/* collapsed by default — visibility is driven ONLY by the .is-open class on
   the group (a `hidden` attribute loses to this rule's display, so don't rely
   on it). */
.mgnav .mgnav-sub{
  display:none; flex-direction:column; gap:2px;
  padding:3px 0 7px; margin-inline-start:9px;
  border-inline-start:2px solid var(--border-soft);
}
.mgnav .mgnav-group.is-open > .mgnav-sub{ display:flex; }
.mgnav .mgnav-link,
.mgnav .mgnav-solo{
  display:flex; align-items:center; gap:9px; justify-content:flex-start;
  padding:9px 12px; border-radius:var(--radius-md);
  font-size:0.8rem; font-weight:700; color:var(--text-muted);
  white-space:normal; line-height:1.35; text-decoration:none;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.mgnav .mgnav-link:hover,
.mgnav .mgnav-solo:hover{ background:var(--surface-3); color:var(--text); }
.mgnav .mgnav-link.active,
.mgnav .mgnav-solo.active{
  background:linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; box-shadow:0 8px 18px -8px rgba(200,18,67,0.55);
}
.mgnav .mgnav-solo{ font-weight:800; }
.mgnav .mgnav-divider{
  font-size:0.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted); opacity:.55;
  padding:8px 12px 2px; margin-top:4px;
  border-top:1px solid var(--border-soft);
}
/* ── provider toggle button (irMarket / AiToolsPro) ── */
.mgnav .mgnav-provider-toggle{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:8px 12px; margin-top:6px;
  border:none; border-radius:var(--radius-md); cursor:pointer;
  background:linear-gradient(135deg, #e85d04 0%, #c1121f 100%);
  color:#fff; font-size:0.78rem; font-weight:800;
  box-shadow:0 4px 12px -4px rgba(200,30,10,0.45);
  transition:filter .15s ease, box-shadow .15s ease;
}
.mgnav .mgnav-provider-toggle:hover{ filter:brightness(1.12); box-shadow:0 6px 16px -4px rgba(200,30,10,0.6); }
.mgnav .mgnav-provider-ico{ font-size:0.85rem; flex-shrink:0; }
.mgnav .mgnav-provider-label{ flex:1; text-align:right; }
.mgnav .mgnav-provider-chev{ font-size:0.65rem; opacity:.85; transition:transform .16s ease; flex-shrink:0; }
.mgnav .mgnav-provider-toggle.is-open .mgnav-provider-chev{ transform:rotate(180deg); }
/* provider section container — hidden by default, slides open */
.mgnav .mgnav-provider-section{
  display:none; flex-direction:column; gap:1px;
  padding:3px 0 4px 8px;
  border-right:2px solid color-mix(in srgb, #e85d04 40%, transparent);
  margin-right:8px;
}
.mgnav .mgnav-provider-section.is-open{ display:flex; }
/* slightly indented link inside a provider section */
.mgnav .mgnav-provider-link{
  font-size:0.77rem; padding:7px 10px;
}
.mgnav .mgnav-provider-link.active{
  background:linear-gradient(135deg, #e85d04, #c1121f);
  box-shadow:0 6px 14px -6px rgba(200,30,10,0.5);
}
.mgnav .mgnav-badge{
  margin-inline-start:auto; background:var(--danger); color:#fff; border-radius:20px;
  font-size:0.68rem; font-weight:800; padding:1px 7px; line-height:1.5; flex-shrink:0;
}
.mgnav .mgnav-solo.active .mgnav-badge{ background:#fff; color:var(--ruby-deep); }
.mgnav .mgnav-footer{
  display:flex; flex-direction:column; gap:2px;
  margin-top:10px; padding-top:8px; border-top:1px solid var(--border-soft);
}
.mgnav .mgnav-danger{ color:var(--ruby); }
.mgnav .mgnav-danger:hover{ background:color-mix(in srgb, var(--ruby) 10%, transparent); color:var(--ruby); }
/* open group gets a faint tint + an inline-start accent so the expanded
   section reads as one visual block with its children */
.mgnav .mgnav-group.is-open{
  background:color-mix(in srgb, var(--ruby) 7%, transparent);
  border-radius:var(--radius-md);
}
.mgnav .mgnav-group.is-open > .mgnav-head{
  box-shadow:inset 3px 0 0 var(--ruby-light);
}
.mgnav .mgnav-head:focus-visible,
.mgnav .mgnav-link:focus-visible,
.mgnav .mgnav-solo:focus-visible,
.mgnav-close:focus-visible,
.mgnav-menubtn:focus-visible{
  outline:2px solid var(--ruby-light); outline-offset:2px;
}

/* ---- drawer chrome (mobile only; hidden on desktop) -------------------- */
.mgnav-drawerhead{ display:none; }
.mgnav-header-actions{ display:none; }   /* lives in the header; shown on mobile admin/management */
.mgnav-menubtn{ display:none; }
.mgnav-bell{ display:none; }
.mgnav-scrim{ display:none; }

/* staff panels (admin / management) get the same compact hero as the user
   panel — they aren't `body.panel-page`, so spell it out here */
body.staff-panel .page-hero{ padding-top:20px; padding-bottom:4px; }
body.staff-panel .page-hero h1{ font-size:1.2rem; }
body.staff-panel .page-hero p{ font-size:0.82rem; }

@media (min-width: 900px){
  .panel-shell .panel-sidebar.mgnav{
    width:264px; flex-shrink:0; align-self:flex-start;
    position:sticky; top:calc(var(--header-h, 71px) + 14px);
    max-height:calc(100vh - var(--header-h, 71px) - 28px); overflow-y:auto;
  }
  /* thin brand accent along the top of the sidebar card (specificity kept
     above `body.theme-dark .panel-shell .panel-sidebar`) */
  body.staff-panel .panel-shell .panel-sidebar.mgnav{
    background:
      linear-gradient(90deg, var(--ruby-light), var(--gold) 55%, var(--ruby-deep)) top/100% 3px no-repeat,
      var(--surface-2);
  }
  .mgnav .mgnav-head{ font-size:0.85rem; padding:11px 13px; }
  .mgnav .mgnav-link, .mgnav .mgnav-solo{ font-size:0.82rem; padding:10px 13px; }
}
body.theme-dark .mgnav .mgnav-sub{ border-inline-start-color: var(--border-soft); }

/* ===== Mobile: management sidebar becomes an off-canvas drawer ==========
   The whole site is dir="rtl", so these use PHYSICAL right/left on purpose
   (logical `inset-inline-end` resolves to the *left* in RTL — that bug parked
   the drawer half-open in the middle of the screen). */
@media (max-width: 899px){
  /* header: the menu button takes the brand's place; the brand itself moves
     to the top of the drawer (see .mgnav-drawerhead below) */
  body.staff-panel .site-header .brand{ display:none; }
  body.staff-panel .site-header .nav-toggle{ display:none; }

  .mgnav-header-actions{ display:flex; align-items:center; gap:8px; }
  .mgnav-menubtn{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 14px; border:none; cursor:pointer;
    border-radius:var(--radius-pill); font-family:inherit; font-weight:800;
    font-size:0.83rem; color:#fff;
    background:linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
    box-shadow:0 8px 18px -8px rgba(200,18,67,0.55);
    transition:transform .14s ease;
  }
  .mgnav-menubtn:active{ transform:scale(0.95); }
  .mgnav-menubtn-bars{ display:inline-flex; flex-direction:column; gap:3px; width:16px; }
  .mgnav-menubtn-bars span{ height:2px; border-radius:2px; background:currentColor; display:block; }
  .mgnav-menubtn-label{ line-height:1; }

  .mgnav-bell{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--surface-2); border:1.5px solid var(--border); color:var(--text);
    transition:transform .14s ease;
  }
  .mgnav-bell:active{ transform:scale(0.92); }
  .mgnav-bell svg{ width:19px; height:19px; }
  .mgnav-bell-badge{
    position:absolute; top:-4px; inset-inline-end:-4px; min-width:18px; height:18px;
    padding:0 4px; border-radius:999px; background:var(--danger); color:#fff;
    font-size:0.65rem; font-weight:800; line-height:18px; text-align:center;
    box-shadow:0 0 0 2px var(--bg);
  }

  /* the drawer itself — docked to the right edge, slides in from the right */
  body.staff-panel .panel-shell .panel-sidebar.mgnav{
    position:fixed; z-index:99;
    top:0; bottom:0; right:0; left:auto;
    width:86vw; max-width:340px; min-width:0; margin:0;
    border:none; border-radius:0; align-self:auto;
    padding:0 10px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
    background:var(--surface-2);
    box-shadow:-26px 0 64px -22px rgba(0,0,0,0.55);
    transform:translateX(105%);            /* parked fully off the right edge */
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    -webkit-overflow-scrolling:touch;
  }
  body.staff-panel.mgnav-open .panel-shell .panel-sidebar.mgnav{ transform:translateX(0); }

  .mgnav-drawerhead{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    position:sticky; top:0; z-index:2;
    margin:0 -10px 8px; padding:12px 14px;
    background:var(--surface-2);
    border-bottom:1px solid var(--border-soft);
  }
  .mgnav-drawerhead::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--ruby-light), var(--gold) 55%, var(--ruby-deep));
  }
  .mgnav-brand{ display:flex; align-items:center; gap:9px; min-width:0; text-decoration:none; }
  .mgnav-brand .brand-mark{ width:34px; height:34px; border-radius:11px; font-size:1rem; flex-shrink:0; }
  .mgnav-brand .brand-wordmark{ height:28px; max-width:150px; }
  .mgnav-brand > span{
    font-weight:800; font-size:0.95rem; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .mgnav-close{
    flex-shrink:0; width:34px; height:34px; border:none; cursor:pointer;
    border-radius:50%; font-size:0.95rem; line-height:1; font-family:inherit;
    color:#f5f5f5; background:var(--surface-3);
    transition:background .14s ease, color .14s ease, transform .12s ease;
  }
  .mgnav-close:hover{ background:var(--ruby); color:#fff; }
  .mgnav-close:active{ transform:scale(0.9); }

  /* dim + blur behind the drawer */
  body.staff-panel .mgnav-scrim{
    display:block; position:fixed; inset:0; z-index:98; border:0;
    background:rgba(8,4,8,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
  }
  body.staff-panel .mgnav-scrim.is-open{ opacity:1; visibility:visible; }

  body.staff-panel.mgnav-open{ overflow:hidden; }

  /* roomier tap targets inside the drawer */
  .mgnav .mgnav-head{ font-size:0.88rem; padding:13px 12px; }
  .mgnav .mgnav-link, .mgnav .mgnav-solo{ font-size:0.85rem; padding:12px 12px; }
  /* the in-drawer "back to shop / logout" block */
  .mgnav .mgnav-footer{ margin-top:14px; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce){
  body.staff-panel .panel-shell .panel-sidebar.mgnav{ transition:none; }
  body.staff-panel .mgnav-scrim{ transition:none; }
}

/* "پنل من" — desktop-only now (see .grid-sidebar's display:none on mobile
   above; mobile's equivalent is the header's own "⋮" kebab menu instead,
   see navbar.html/.header-kebab). Sits above the tab column as its own
   full-width block and expands inline (native <details>). */
.panel-sidebar-wrap{ display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; width:100%; min-width:0; }
.panel-my-account summary{
  display:flex; align-items:center; gap:8px; width:100%;
  padding: 10px 15px; border-radius: var(--radius-pill);
  background: transparent; border:none; cursor:pointer; list-style:none;
  font-size: 0.8rem; color: var(--text-muted); font-weight:700;
}
.panel-my-account summary::-webkit-details-marker{ display:none; }
.panel-my-account summary .chevron{ margin-inline-start:auto; transition: transform .15s ease; }
.panel-my-account summary .chevron svg{ width:13px; height:13px; }
.panel-my-account[open] summary .chevron{ transform: rotate(180deg); }
.panel-my-account summary.active, .panel-my-account[open] summary{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; box-shadow: 0 8px 18px -8px rgba(200,18,67,0.55);
}
.panel-my-account summary:hover{ background: var(--surface-3); color: var(--text); }
.panel-my-account-menu{
  display:flex; flex-direction:column; gap:2px; margin-top:6px; padding:6px;
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-md);
}
.panel-my-account-menu a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px;
  font-size:0.82rem; font-weight:700; color: var(--text);
}
.panel-my-account-menu a svg{ width:17px; height:17px; flex-shrink:0; }
.panel-my-account-menu a:hover{ background: var(--surface-2); }
.panel-my-account-menu a.danger{ color: var(--ruby); }

/* Header "⋮" kebab menu (mobile — see navbar.html) — deliberately plain
   white, anchored right next to its own trigger, unlike the colored-band
   glass styling used by the desktop "پنل من" block above. */
.header-kebab{ position:relative; }
.header-kebab summary{
  list-style:none; cursor:pointer; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-2); border:1px solid var(--border); color:var(--text);
  font-size:1.15rem; font-weight:800; line-height:1;
}
.header-kebab summary::-webkit-details-marker{ display:none; }
.header-kebab summary:hover{ background: var(--surface-3); }
.header-kebab-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:190px;
  background:#fff; border:1px solid var(--border-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); padding:6px; z-index:70;
  display:flex; flex-direction:column; gap:2px;
}
.header-kebab-menu a{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px;
  font-size:0.85rem; font-weight:700; color:#1a0510;
}
.header-kebab-menu a:hover{ background:#f4f4f6; }
.header-kebab-menu a.danger{ color: var(--ruby); }

@media (min-width: 900px){
  .header-kebab{ display:none; }
}

/* Mobile panel tab row — merged into the sticky site header itself (not a
   second independently-positioned element) so it reliably stays pinned to
   the very top of the screen while scrolling, exactly like the header. */
.panel-tabs-row{
  display:flex; gap:6px; overflow-x:auto; padding:8px 16px 10px;
  border-top:1px solid var(--border-soft);
  scrollbar-width:none;
}
.panel-tabs-row::-webkit-scrollbar{ display:none; }
.panel-tabs-row a{
  flex-shrink:0; display:flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius: var(--radius-pill);
  font-size:0.74rem; font-weight:700; color: var(--text-muted);
  background: var(--surface-2); white-space:nowrap;
}
.panel-tabs-row a.active{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
}
/* آیکن‌هایِ SVG به‌جایِ ایموجیِ خام (خواستِ کاربر، ۱۴۰۵/۰۷/۰۵) — همان
   ماکروی icon() که سایدبارِ دسکتاپ استفاده می‌کند. */
.panel-tabs-row a .tab-ico{ display:flex; align-items:center; }
.panel-tabs-row a .tab-ico svg{ width:15px; height:15px; }
@media (min-width: 900px){
  .panel-tabs-row{ display:none; }
}

/* the surrounding pill-track background (admin/management only get this,
   since user panel's .grid-sidebar already supplies its own colored band) */
.panel-shell .panel-sidebar{
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill); padding: 5px;
}
body.theme-dark .panel-shell .panel-sidebar{ background: var(--surface-2); border-color: var(--border-soft); }

@media (min-width: 900px){
  .panel-shell .panel-sidebar{
    border-radius: var(--radius-lg); padding: 8px; gap:4px;
    width: 230px;
  }
}



/* ===== Desktop user-panel sidebar links — plain and clean (white
   background from .grid-sidebar above), bare icons with no chip/background
   behind them, matching نابغه‌فایل's panel sidebar and this same project's
   own mobile "سایر"-equivalent preference for icons with nothing boxed
   behind them. ===== */
.grid-sidebar .panel-sidebar a, .grid-sidebar .panel-my-account summary{
  color: var(--text-muted);
  transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease;
}
.grid-sidebar .panel-sidebar a .tab-ico, .grid-sidebar .panel-my-account summary .tab-ico{
  background:none; border:none; color:inherit; transition: color .18s ease;
}
.grid-sidebar .panel-sidebar a .tab-ico svg, .grid-sidebar .panel-my-account summary .tab-ico svg{
  width:19px; height:19px;
}
.grid-sidebar .panel-sidebar a:not(.active):hover, .grid-sidebar .panel-my-account summary:hover{
  background:#fff; color: var(--text);
  box-shadow: 0 6px 16px -8px rgba(20,8,16,0.14);
  transform: translateY(-1px);
}
.grid-sidebar .panel-sidebar a.active,
.grid-sidebar .panel-my-account summary.active, .grid-sidebar .panel-my-account[open] summary{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff;
  box-shadow: 0 10px 22px -8px rgba(200,18,67,0.55);
}
.grid-sidebar .panel-my-account-menu{
  background: var(--bg-soft); border: 1px solid var(--border-soft);
}
.grid-sidebar .panel-my-account-menu a{ color: var(--text); }
.grid-sidebar .panel-my-account-menu a:hover{ background: var(--surface); }

/* "خروج از حساب" — deliberately distinct (red, separated by a divider,
   pinned last) since it's the one destructive, lower-priority action. */
.grid-sidebar .panel-sidebar a.side-link-danger{
  color: var(--ruby); margin-top: 10px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.grid-sidebar .panel-sidebar a.side-link-danger:hover{
  background: color-mix(in srgb, var(--ruby) 10%, transparent); color: var(--ruby);
}

body.theme-dark .grid-sidebar .panel-sidebar a:not(.active):hover, body.theme-dark .grid-sidebar .panel-my-account summary:hover{
  background: var(--surface-2); color: var(--text);
}
body.theme-dark .grid-sidebar .panel-my-account-menu{ background: var(--surface-2); border-color: var(--border-soft); }
body.theme-dark .grid-sidebar .panel-sidebar a.side-link-danger:hover{ background: color-mix(in srgb, var(--ruby) 16%, transparent); }

@media (min-width: 900px){
  /* Same approach as نابغه‌فایل's desktop sidebar: a plain, static
     height:calc(100vh - header) — no JS involved at all, so it can never
     visibly react to scrolling. نابغه‌فایل's panel view has no footer to
     worry about; this project's does, so the footer is simply hidden on
     panel pages instead (see body.panel-page .site-footer below), the
     same underlying fix — remove the thing the sidebar would collide
     with, rather than shrinking the sidebar to dodge it. */
  .panel-flow > .grid-sidebar{
    display:block; position:fixed; top:var(--header-h, 71px); inset-inline-start:0;
    width:230px; height:calc(100vh - var(--header-h, 71px)); z-index:55; overflow:hidden;
    padding: 24px 14px; border-radius: 0;
  }
  .panel-sidebar-wrap{ gap:8px; }
  .panel-sidebar{
    flex-direction:column; flex-shrink:0; overflow:visible; gap:8px; padding:0; margin-bottom:0;
  }
  .panel-sidebar a, .panel-my-account summary{
    flex-direction:row; width:100%; justify-content:flex-start; padding:12px 14px; font-size:0.85rem; gap:12px;
  }
  .panel-sidebar a .tab-ico, .panel-my-account summary .tab-ico{ width:32px; height:32px; font-size:0.95rem; }
}

/* Stat cards */
.stat-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (min-width:700px){ .stat-grid{ grid-template-columns: repeat(4,1fr); gap:12px; } }

/* ── supplier category chips ─────────────────────────────────────── */
.cat-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  max-height:112px; overflow:hidden; transition:max-height .3s ease;
}
.cat-chips.is-expanded{ max-height:none; }
.cat-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px; border:1px solid var(--border-soft);
  background:var(--surface-2); color:var(--text-muted);
  font-size:0.74rem; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.cat-chip:hover{ background:var(--surface-3); color:var(--text); border-color:var(--border); }
.cat-chip--active{
  background:linear-gradient(135deg,var(--ruby-light),var(--ruby-deep));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px -4px rgba(200,18,67,.45);
}
.cat-chip-cnt{
  background:rgba(255,255,255,.18); color:inherit;
  font-size:0.65rem; font-weight:800; padding:1px 5px; border-radius:10px;
  min-width:18px; text-align:center;
}
.cat-chip--active .cat-chip-cnt{ background:rgba(255,255,255,.3); }
.stat-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 16px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card .label{ color: var(--text-muted); font-size:0.78rem; margin-bottom:7px; }
.stat-card .value{ font-family: var(--font-mono); font-size: 1.5rem; font-weight:800; }
.stat-card.mint .value{ color: var(--ruby); }
.stat-card.amber .value{ color: var(--gold-deep); }
.stat-card.danger .value{ color: var(--danger); }
body.theme-dark .stat-card.mint .value{ color: var(--ruby-light); }
body.theme-dark .stat-card.amber .value{ color: var(--gold); }

@media (max-width:640px){
  .stat-card{ padding: 12px; }
  .stat-card .label{ font-size:0.7rem; margin-bottom:4px; }
  .stat-card .value{ font-size: 1.15rem; }
}

/* Badges / status pills */
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight:700; white-space:nowrap;
}
.status-pending{ background: #FFF4E0; color: var(--gold-deep); }
.status-in_progress{ background: #E7F1FC; color: var(--info); }
.status-referred_to_management{ background: rgba(200,18,67,0.1); color: var(--ruby-deep); }
.status-completed{ background: #E3FBF4; color: #0E9A80; }
.status-cancelled{ background: #FDEDED; color: var(--danger); }
.status-open{ background: #FFF4E0; color: var(--gold-deep); }
.status-answered{ background: #E7F1FC; color: var(--info); }
.status-closed{ background: var(--surface-3); color: var(--text-muted); }

body.theme-dark .status-pending{ background: rgba(240,180,41,0.14); color: var(--gold); }
body.theme-dark .status-in_progress{ background: rgba(90,169,230,0.14); color: #5AA9E6; }
body.theme-dark .status-referred_to_management{ background: rgba(255,67,104,0.16); color: var(--ruby-light); }
body.theme-dark .status-completed{ background: rgba(52,216,184,0.14); color: #34D8B8; }
body.theme-dark .status-cancelled{ background: rgba(255,107,107,0.14); color: #FF6B6B; }
body.theme-dark .status-open{ background: rgba(240,180,41,0.14); color: var(--gold); }
body.theme-dark .status-answered{ background: rgba(90,169,230,0.14); color: #5AA9E6; }
body.theme-dark .status-closed{ background: rgba(140,160,190,0.14); color: var(--text-muted); }

/* Tables */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--border-soft); }
table{ width:100%; border-collapse: collapse; background: var(--surface); min-width: 640px; }
th, td{ padding: 12px 15px; text-align: right; font-size: 0.86rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th{ color: var(--text-muted); font-weight:700; font-size:0.76rem; background: var(--surface-2); }

/* "سفارش‌های من" search box */
.orders-search-wrap{ position:relative; margin-bottom:16px; }
.orders-search-wrap svg{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-muted); pointer-events:none; stroke:currentColor;
}
.orders-search-wrap input{
  width:100%; padding-block:10px; padding-inline-start:40px; padding-inline-end:14px;
  border:1px solid var(--border-soft); border-radius: var(--radius-pill);
  font-size:0.85rem; font-family:inherit; background: var(--surface); color: var(--text);
}
.orders-search-wrap input:focus{ outline:none; border-color: var(--ruby-light); }

/* Orders: table on desktop, compact stacked cards on mobile — a
   horizontally-scrolling table felt cramped on a small screen. */
.orders-list-mobile{ display:none; }
@media (max-width:640px){
  .orders-table-desktop{ display:none; }
  .orders-list-mobile{ display:flex; flex-direction:column; gap:10px; }
}
.order-row-card{
  border:1px solid var(--border-soft); border-radius: var(--radius-md);
  padding:12px; display:flex; flex-direction:column; gap:6px;
}
.order-row-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.order-row-card-number{ font-size:0.76rem; font-weight:700; color: var(--text-muted); }
.order-row-card-product{ font-size:0.85rem; font-weight:700; }
.order-row-card-bottom{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.order-row-card-price{ font-size:0.82rem; font-weight:800; }
.order-row-card-date{ font-size:0.72rem; color: var(--text-muted); }
.order-row-card-bottom .btn{ margin-inline-start:auto; }
tr:last-child td{ border-bottom:none; }
td.mono, th.mono{ direction:ltr; text-align:left; }

/* Forms */
.form-group{ margin-bottom: 16px; }
label{ display:block; font-size: 0.84rem; color: var(--text-muted); margin-bottom: 7px; font-weight:600; }
input[type=text], input[type=tel], input[type=number], input[type=password], input[type=email], input[type=search], textarea, select{
  width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font-family: inherit; font-size: 0.9rem;
}
input:focus, textarea:focus, select:focus{ border-color: var(--ruby); background:#fff; }
body.theme-dark input:focus, body.theme-dark textarea:focus, body.theme-dark select:focus{ background: var(--bg-soft); }
textarea{ resize: vertical; min-height: 110px; }
/* minmax(0, 1fr) نه فقط 1fr — وگرنه یک متنِ بلندِ بی‌فاصله (مثلِ برچسبِ
   یک واریانتِ طولانی) اندازه‌ی سلولِ گرید را به‌جایِ کوچک‌شدن، به عرضِ
   کاملِ محتوا می‌رساند و کلِ فرم را در گوشی از صفحه بیرون می‌زند. */
.form-row{ display:grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px){ .form-row.cols-2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .form-row.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input{ width:auto; }
.checkbox-row label{ margin:0; color: var(--text); }
.hint{ font-size:0.78rem; color: var(--text-faint); margin-top:6px; }

/* Image upload box (big, per request) */
.image-drop{
  aspect-ratio: 16/9; width:100%;
  border: 2px dashed var(--border); border-radius: var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background: var(--bg-soft); color: var(--text-muted); text-align:center; padding: 20px;
  overflow:hidden; position:relative; cursor:pointer;
}
.image-drop img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-drop .icon{ font-size:2.2rem; }

/* Auth cards */
.auth-wrap{ min-height: calc(100vh - 70px - 220px); display:flex; align-items:center; justify-content:center; padding-top: 44px; padding-bottom: 44px; }
.otp-countdown-wrap{ display:flex; justify-content:center; margin: 6px 0 18px; }
.otp-countdown-ring{ position:relative; width:66px; height:66px; }
.otp-countdown-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.otp-ring-bg{ fill:none; stroke:var(--border-soft); stroke-width:3; }
.otp-ring-progress{
  fill:none; stroke:url(#otpRingGradient); stroke-width:3; stroke-linecap:round;
  stroke-dasharray: 106.8; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}
.otp-countdown-text{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:800; font-size:0.8rem; color:var(--ruby-deep); direction:ltr;
  transition: color .3s ease;
}
.otp-countdown-text.urgent{ color:var(--danger); animation: otpUrgentPulse 1s ease-in-out infinite; }
@keyframes otpUrgentPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
.link-btn{
  background:none; border:none; color:var(--text-muted); font-size:0.78rem; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:0;
}
.link-btn.ruby{ color:var(--ruby); }
.link-btn:disabled{ color:var(--text-faint) !important; cursor:not-allowed; text-decoration:none !important; }

.auth-card{
  width:100%; max-width: 400px; margin: 0 auto;
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-pop);
}
.auth-card .brand-mark{ margin: 0 auto 16px; }
.auth-card h1{ font-size: 1.25rem; text-align:center; margin: 0 0 6px; }
.auth-card p.sub{ text-align:center; color: var(--text-muted); font-size:0.85rem; margin: 0 0 22px; }

/* Countdown / order detail */
.order-hero{
  background: linear-gradient(150deg, #FFF3F4, #FFE9EB);
  border: 1px solid rgba(200,18,67,0.18); border-radius: var(--radius-lg);
  padding: 20px 20px 18px; text-align:center; color: var(--text);
}
body.theme-dark .order-hero{
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  border-color: var(--ink-border); color: var(--ink-text);
}

/* Light, soft-red balance card — used for the wallet balance (fits the light theme better than a dark box) */
.balance-card{
  background: linear-gradient(150deg, #FFF3F4, #FFE9EB);
  border: 1px solid rgba(200,18,67,0.18);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  position: relative; overflow: hidden;
}
.balance-card::before{
  content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,18,67,0.12), transparent 70%);
  top:-70px; inset-inline-end:-60px; pointer-events:none;
}
.balance-card > *{ position:relative; z-index:1; }
.balance-card .label{ color: var(--text-muted); font-size:0.85rem; margin-bottom:6px; }
.balance-card .amount{ font-family: var(--font-mono); font-size:2.2rem; font-weight:800; color: var(--ruby-deep); direction:ltr; }
.balance-card .unit{ color: var(--text-muted); font-size:0.85rem; margin-top:2px; }

body.theme-dark .balance-card{
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  border-color: var(--ink-border);
}
body.theme-dark .balance-card .label{ color: var(--ink-text-muted); }
body.theme-dark .balance-card .amount{ color: var(--gold); }
body.theme-dark .balance-card .unit{ color: var(--ink-text-muted); }

/* دو کیف‌پولِ روی داشبورد — محصولات (ruby) و مرکزیِ نابغه/AI (لهجهٔ رنگیِ
   ruby+gold، هم‌سو با برندینگِ Nabeghe AI در nabeghe_ai_hub.css) — کنارِ
   هم، با ظاهرِ متفاوت تا در نگاهِ اول اشتباه گرفته نشوند. کیف‌پولِ ارزی
   عمداً این‌جا نشان داده نمی‌شود (فقط از سایدبار/تبِ «پرداخت ارزی» قابل
   دسترسی است) چون کاربران را گیج می‌کرد — ۱۴۰۵/۰۷/۰۶. */
.wallet-duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .wallet-duo-grid{ grid-template-columns:1fr; } }
.balance-card--ai{
  background: linear-gradient(150deg, #FFF3F4, #FFF9EC);
  border-color: rgba(166,108,16,0.2);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ruby-light), var(--gold)) 1;
}
.balance-card--ai::before{ background: radial-gradient(circle, rgba(200,18,67,0.12), transparent 70%); }
.balance-card--ai .amount{
  background: linear-gradient(90deg, var(--ruby), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.balance-card--ai .ai-credit-loading{ color: var(--text-muted); font-size:0.85rem; font-weight:600; -webkit-text-fill-color: var(--text-muted); }
.ai-credit-badge{
  display:inline-block; font-size:0.6rem; font-weight:800; letter-spacing:0.03em;
  padding:1px 6px; border-radius:6px; margin-inline-start:4px; vertical-align:middle;
  background: linear-gradient(90deg, var(--ruby-light), var(--gold)); color:#2b0a10;
}
body.theme-dark .balance-card--ai{
  background: linear-gradient(150deg, var(--ink-700), var(--ink-900));
  border-color: var(--ink-border);
}
body.theme-dark .balance-card--ai .amount{
  background: linear-gradient(90deg, var(--ruby-light), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.theme-dark .balance-card--ai .ai-credit-loading{ color: var(--ink-text-muted); -webkit-text-fill-color: var(--ink-text-muted); }

/* نسخهٔ مینیمالِ کیف‌پول‌ها — جایگزینِ دو کارتِ بزرگِ بالایِ داشبورد؛ حالا
   یک نوارِ باریک، پایینِ صفحه (خواستِ کاربر، ۱۴۰۵/۰۷/۱۱: «اهمیتش زیاد
   نیست»، پس نباید جایِ زیادی بگیرد یا بالایِ صفحه باشد). */
.wallet-mini-strip{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:12px 18px; margin-top:16px;
}
.wallet-mini-item{ display:flex; align-items:center; gap:8px; flex:1 1 220px; min-width:0; }
.wallet-mini-label{ font-size:0.78rem; color: var(--text-muted); white-space:nowrap; }
.wallet-mini-amount{ font-size:0.86rem; font-weight:800; color: var(--text); white-space:nowrap; }
.wallet-mini-link{
  margin-inline-start:auto; font-size:0.76rem; font-weight:700; color: var(--ruby);
  text-decoration:none; background:none; border:none; cursor:pointer; padding:0; font-family:inherit; white-space:nowrap;
}
.wallet-mini-link:hover{ color: var(--ruby-deep); }
.wallet-mini-sep{ width:1px; height:18px; background: var(--border); flex-shrink:0; }
@media (max-width:560px){
  .wallet-mini-strip{ gap:10px 0; padding:12px 14px; }
  .wallet-mini-sep{ display:none; }
  .wallet-mini-item{ flex:1 1 100%; width:100%; }
}

.ai-amount-pick{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ai-amount-pick button{
  flex:1 1 auto; padding:8px 10px; border-radius:9px; border:1px solid var(--ink-border);
  background: rgba(255,255,255,0.06); color: var(--ink-text); font-size:0.78rem; font-family:inherit;
  cursor:pointer; transition: background .12s;
}
.ai-amount-pick button:hover{ background: rgba(255,255,255,0.14); }

/* صفحهٔ «پرداخت ارزی» (ادغامِ کیف‌پول + بین‌المللیِ قبلی، ۱۴۰۵/۰۷/۰۵) */
.fx-balance-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background: linear-gradient(150deg, #FFF9EC, #FDF0D5); border:1px solid rgba(166,108,16,0.22);
  border-radius: var(--radius-lg); padding:20px 22px;
}
body.theme-dark .fx-balance-card{ background: linear-gradient(150deg, var(--ink-700), var(--ink-900)); border-color: var(--ink-border); }
.fx-balance-amount{ font-size:1.5rem; font-weight:800; color: var(--gold-deep); direction:ltr; }
.fx-balance-amount span{ font-size:0.8rem; font-weight:600; color: var(--text-muted); }
body.theme-dark .fx-balance-amount{ color: var(--gold); }
.fx-balance-note{ margin:8px 2px 0; }
.fx-recent-list{ display:flex; flex-direction:column; gap:6px; }
.fx-recent-row{
  display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; background: var(--surface-2); text-decoration:none; color: var(--text);
  font-size:0.82rem; transition: background .12s;
}
.fx-recent-row:hover{ background: var(--surface-3); }
.fx-recent-num{ color: var(--text-muted); font-size:0.76rem; }
.fx-recent-mid{ color: var(--text-muted); }
@media (max-width:600px){
  .fx-recent-row{ grid-template-columns:1fr 1fr; row-gap:4px; }
  .fx-recent-num{ display:none; }
}
.transfer-dir-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.transfer-dir-opt{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px;
  border:1.5px solid var(--border); cursor:pointer; font-size:0.85rem;
}
.transfer-dir-opt:has(input:checked){ border-color: var(--ruby); background: var(--surface-2); }
.transfer-balances-hint{
  display:flex; justify-content:space-between; gap:10px; font-size:0.78rem; color: var(--text-muted);
  background: var(--surface-2); border-radius:9px; padding:8px 12px; margin-bottom:14px;
}
.order-number-big{ font-family: var(--font-mono); font-size: 1.5rem; font-weight:800; color: var(--ruby-deep); direction:ltr; letter-spacing:0.03em; }
body.theme-dark .order-number-big{ color: var(--ruby-light); }

.countdown{
  font-family: var(--font-mono); direction:ltr;
  font-size: 2.6rem; font-weight:800; color: var(--ruby-deep); margin: 10px 0 4px;
  letter-spacing: 0.03em;
}
body.theme-dark .countdown{ color: var(--gold); }
.countdown-label{ color: var(--text-muted); font-size:0.82rem; }
body.theme-dark .countdown-label{ color: var(--ink-text-muted); }

.timeline{ display:flex; justify-content:space-between; margin: 20px 0 4px; position:relative; }
.timeline::before{
  content:""; position:absolute; top:13px; left:8%; right:8%; height:2px; background: var(--border-soft); z-index:0;
}
body.theme-dark .timeline::before{ background: var(--ink-border); }
.timeline-step{ flex:1; text-align:center; position:relative; z-index:1; }
.timeline-dot{
  width:26px; height:26px; border-radius:50%; background: var(--surface-2); border:2px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 8px; font-size:0.76rem; color: var(--text-faint);
}
body.theme-dark .timeline-dot{ background: var(--ink-600); border-color: var(--ink-border); color: var(--ink-text-muted); }
.timeline-step.done .timeline-dot{ background: var(--ruby-light); border-color: var(--ruby-light); color:#fff; }
.timeline-step.current .timeline-dot{ background: var(--gold); border-color: var(--gold); color:#241505; }
.timeline-step span.lbl{ font-size:0.72rem; color: var(--text-faint); }
body.theme-dark .timeline-step span.lbl{ color: var(--ink-text-muted); }
.timeline-step.done span.lbl, .timeline-step.current span.lbl{ color: var(--text); }
body.theme-dark .timeline-step.done span.lbl, body.theme-dark .timeline-step.current span.lbl{ color: var(--ink-text); }

/* Wizard stepper — adapts to light/dark panel theme (unlike .timeline which is fixed-dark) */
/* Price breakdown rows (replaces a rigid <table> so it never overflows on mobile) */
.breakdown-row{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
  gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.breakdown-row:last-child{ border-bottom:none; }
.breakdown-row .label{ font-size:0.82rem; color: var(--text-muted); flex:1 1 180px; min-width:0; }
.breakdown-row .value{ font-weight:700; color: var(--text); white-space:nowrap; flex-shrink:0; }
.breakdown-row.total{ padding-top:12px; }
.breakdown-row.total .label{ font-weight:800; color: var(--text); }
.breakdown-row.total .value{ font-size:1.1rem; font-weight:800; color: var(--ruby); }

@media (max-width:480px){
  .breakdown-row{ padding:8px 0; }
  .breakdown-row .label{ font-size:0.76rem; flex-basis:100%; }
  .breakdown-row .value{ font-size:0.86rem; }
  .breakdown-row.total .value{ font-size:1rem; }
  .fee-rates-link{ font-size:0.68rem; }
}

/* Terms & conditions box (step 1 of the intl-payment wizard) */
.rules-box{
  max-height: 260px; overflow-y:auto;
  background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 16px 18px; font-size:0.85rem; color: var(--text-muted); line-height:1.9;
}
.rules-box p{ margin: 0 0 10px; }
.rules-box ul{ margin:0 0 12px; padding-inline-start: 20px; list-style: disc; }
.rules-box li{ margin-bottom:8px; }
.rules-box .note{
  font-weight:700; color: var(--text); background: rgba(200,18,67,0.07);
  padding:10px 12px; border-radius:8px; margin-top:14px; margin-bottom:0;
}

/* Merged currency + amount input group (step 3) */
.currency-amount-group{
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow:hidden;
}
.currency-amount-group > div{ padding: 10px 14px 12px; }
.currency-amount-group > div:first-child{ border-bottom: 1px solid var(--border); }
.currency-amount-group label{ margin-bottom:5px; }
.currency-amount-group select, .currency-amount-group input{
  border:none; border-radius:0; background:transparent; padding:6px 0;
}
.currency-amount-group select:focus, .currency-amount-group input:focus{ border-color:transparent; }

.wizard-timeline{ display:flex; justify-content:space-between; position:relative; }
.wizard-timeline::before{
  content:""; position:absolute; top:13px; left:8%; right:8%; height:2px; background: var(--border); z-index:0;
}
.wizard-step-indicator{ flex:1; text-align:center; position:relative; z-index:1; }
.wizard-step-indicator .dot{
  width:26px; height:26px; border-radius:50%; background: var(--surface-2); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 8px; font-size:0.76rem; color: var(--text-muted);
  font-family: var(--font-mono); font-weight:700;
}
.wizard-step-indicator.done .dot{ background: var(--ruby-light); border-color: var(--ruby-light); color:#fff; }
.wizard-step-indicator.current .dot{ background: var(--gold); border-color: var(--gold); color:#241505; }
.wizard-step-indicator span.lbl{ font-size:0.72rem; color: var(--text-muted); }
.wizard-step-indicator.done span.lbl, .wizard-step-indicator.current span.lbl{ color: var(--text); font-weight:600; }

/* Currency selection chips */
.currency-chip.active{ background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff; border-color: transparent; }

/* Wallet top-up amount presets */
.amount-preset.btn-primary{ background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff; border-color:transparent; }

/* "View fee rates" link + modal */
.fee-rates-link{
  display:inline-flex; align-items:center; gap:4px; margin-inline-start:8px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:0.72rem; font-weight:700; color: var(--ruby-deep);
  text-decoration: underline; text-underline-offset:3px;
}
.fee-rates-link:hover{ color: var(--ruby); }

.modal-overlay{
  display:none; position:fixed; inset:0; z-index:200;
  background: rgba(11,7,10,0.72); backdrop-filter: blur(5px);
  align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.open{ display:flex; }

.modal-box{
  background: linear-gradient(165deg, var(--ink-700), var(--ink-900));
  border: 1px solid var(--ink-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.6);
  padding: 26px 24px;
  width:100%; max-width:440px; max-height:82vh; overflow-y:auto;
  color: var(--ink-text);
  position: relative;
}
.modal-box::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(200,18,67,0.22), transparent 70%);
  top:-90px; inset-inline-end:-70px;
}
.modal-box > *{ position:relative; z-index:1; }

.modal-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; }
.modal-header h3{ color: var(--ink-text); font-size:1.05rem; font-weight:800; }
.modal-header h3::after{
  content:""; display:block; width:32px; height:3px; margin-top:9px; border-radius:2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.modal-box .text-muted{ color: var(--ink-text-muted) !important; }

.modal-close{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--ink-border); background: rgba(255,255,255,0.06);
  color: var(--ink-text); font-size:1.15rem; line-height:1; cursor:pointer;
  transition: background .15s ease;
}
.modal-close:hover{ background: rgba(255,255,255,0.14); }

.fee-tier-list{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.fee-tier-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-radius:10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--ink-border);
  border-inline-start: 3px solid var(--gold-deep);
}
.fee-tier-row.flat{ border-inline-start-color: var(--ruby-light); }
.fee-tier-row .range{ font-size:0.84rem; color: var(--ink-text); font-weight:500; }
.fee-tier-row .badge{
  font-family: var(--font-mono); font-size:0.76rem; font-weight:800;
  padding:6px 12px; border-radius: var(--radius-pill); white-space:nowrap;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#241505;
}
.fee-tier-row.flat .badge{
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
}

/* Ticket thread */
.ticket-thread{ display:flex; flex-direction:column; gap:12px; }
.msg{ max-width: 82%; padding: 12px 15px; border-radius: var(--radius-md); font-size:0.88rem; }
.msg-user{ background: var(--surface-2); align-self:flex-start; border-bottom-right-radius:4px; }
.msg-staff{ background: #FDECEF; border:1px solid rgba(200,18,67,0.18); align-self:flex-end; border-bottom-left-radius:4px; }
body.theme-dark .msg-user{ background: var(--surface-3); }
body.theme-dark .msg-staff{ background: rgba(255,67,104,0.14); border:1px solid rgba(255,67,104,0.28); }
.msg .meta{ font-size:0.68rem; color: var(--text-faint); margin-top:6px; }

/* Empty state */
.empty-state{ text-align:center; padding: 44px 18px; color: var(--text-muted); }
.empty-state .icon{ font-size: 2.2rem; margin-bottom: 12px; }

/* Utility */
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-muted{ color: var(--text-muted); }
.small{ font-size:0.82rem; }

/* Footer — fixed dark accent regardless of page theme */
.site-footer{
  border-top: 1px solid var(--ink-border);
  padding: 40px 0 0; margin-top: 40px;
  background: var(--ink-900); color: var(--ink-text);
}
.footer-inner{ display:flex; flex-direction:column; gap: 26px; padding-bottom: 26px; }
.footer-brand{ display:flex; gap:12px; max-width: 380px; }
.footer-title{ font-weight:800; margin-bottom:6px; }
.footer-desc{ color: var(--ink-text-muted); font-size:0.83rem; margin:0; }
.footer-cols-row{ display:flex; gap:36px; }
.footer-col{ display:flex; flex-direction:column; gap:9px; }
.footer-col h4{ margin:0 0 4px; font-size:0.83rem; color: var(--ink-text-muted); }
.footer-col a{ font-size:0.86rem; color: var(--ink-text); }
.footer-col a:hover{ color: var(--ruby-light); }
.footer-bottom{ border-top:1px solid var(--ink-border); padding: 15px 18px; text-align:center; color: var(--text-faint); font-size:0.78rem; }
@media (min-width: 760px){ .footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }

@media (max-width: 640px){
  .site-footer{ padding-top: 28px; margin-top: 28px; }
  .footer-inner{ gap: 18px; padding-bottom: 18px; }
  .footer-brand{ max-width: 100%; gap:10px; }
  .footer-brand .brand-mark{ width:34px; height:34px; font-size:0.95rem; }
  .footer-title{ font-size:0.92rem; margin-bottom:4px; }
  .footer-desc{ font-size:0.74rem; line-height:1.55; }
  .footer-cols-row{ gap:28px; padding-top:14px; border-top:1px solid var(--ink-border); }
  .footer-col{ gap:7px; }
  .footer-col h4{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.02em; }
  .footer-col a{ font-size:0.8rem; }
  .footer-bottom{ padding: 12px 16px; font-size: 0.7rem; }
}

/* Contact page — one unified glass panel, small compact typography */
.contact-wrap{ position:relative; overflow:hidden; padding: 34px 0 60px; }
.contact-wrap::before{
  content:""; position:absolute; inset:-60px; z-index:0; pointer-events:none;
  background:
    radial-gradient(420px 300px at 15% 10%, rgba(255,67,104,0.14), transparent 60%),
    radial-gradient(380px 260px at 85% 90%, rgba(200,18,67,0.1), transparent 60%);
}
.contact-wrap .container{ position:relative; z-index:1; }

.contact-glass{
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 24px 50px -28px rgba(90,10,35,0.28), inset 0 1px 0 rgba(255,255,255,0.85);
}

.contact-head{ text-align:center; margin-bottom:20px; }
.contact-head .eyebrow{
  display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px;
  background: rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.9);
  font-size:0.66rem; font-weight:700; color: var(--ruby);
}
.contact-head h1{ font-size:1.2rem; font-weight:800; margin:10px 0 6px; color:var(--text); }
.contact-head p{ font-size:0.74rem; color:var(--text-muted); line-height:1.7; margin:0; }

.contact-items{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.contact-item{
  display:flex; gap:10px; align-items:flex-start;
  background: rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.6);
  border-radius:13px; padding:11px 13px;
}
.contact-ico{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0.92rem;
  background: rgba(200,18,67,0.08);
}
.contact-item div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-item b{ font-size:0.78rem; font-weight:700; color:var(--text); }
.contact-item span{ font-size:0.71rem; color:var(--text-muted); line-height:1.6; }
.contact-item a{ font-size:0.7rem; font-weight:700; color:var(--ruby); text-decoration:none; margin-top:2px; }
.contact-item a:hover{ text-decoration:underline; }

.contact-phone{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: linear-gradient(135deg, rgba(255,67,104,0.1), rgba(200,18,67,0.06));
  border:1px solid rgba(200,18,67,0.18); border-radius:13px; padding:11px 15px;
}
.contact-phone span{ font-size:0.73rem; font-weight:700; color:var(--text-muted); }
.contact-phone a{ font-size:0.96rem; font-weight:800; color:var(--ruby-deep); text-decoration:none; direction:ltr; }

@media (min-width:640px){
  .contact-glass{ padding:34px 32px; }
  .contact-head h1{ font-size:1.45rem; }
}

/* Shared-service fulfillment card (customer order detail) — this is the most
   important element on the page, styled to be immediately unmissable and
   professional: solid white, strong elevation, clear visual hierarchy. */
.fulfillment-card{
  position:relative; overflow:hidden;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 26px 22px 24px;
  box-shadow: 0 20px 46px -24px rgba(90,10,35,0.28);
}
.fulfillment-card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; height:5px; width:100%;
  background: linear-gradient(90deg, var(--ruby-light), var(--gold), var(--ruby-light));
}
.fulfillment-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  font-size:0.78rem; font-weight:800; margin-bottom:16px;
  box-shadow: 0 8px 18px -8px rgba(200,18,67,0.5);
}
.fulfillment-greeting{ font-size:1.05rem; font-weight:800; color:var(--text); margin:0 0 8px; }
.fulfillment-intro{ font-size:0.86rem; color:var(--text-muted); line-height:1.8; margin:0 0 20px; }
.fulfillment-token-wrap{
  background: linear-gradient(150deg, #FFF6F7, #FFEEF0);
  border: 1.5px solid rgba(200,18,67,0.2); border-radius:16px;
  padding:16px 18px; margin-bottom:20px; text-align:center;
}
.fulfillment-token-label{ display:block; font-size:0.76rem; font-weight:700; color:var(--ruby-deep); margin-bottom:8px; }
.fulfillment-token-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:12px;
  background: rgba(255,255,255,0.75); border: 1.5px dashed rgba(200,18,67,0.35);
  border-radius:12px; padding:14px 16px; cursor:pointer; font-family:inherit;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.fulfillment-token-btn:hover{ background:#fff; border-color: var(--ruby-light); }
.fulfillment-token-btn:active{ transform: scale(0.98); }
.fulfillment-token-box{
  font-size:1.05rem; font-weight:800; color:var(--ruby-deep);
  direction:ltr; word-break:break-all; letter-spacing:0.02em;
}
/* توکن/رمز/ایمیل حالا یک <input readonly> واقعی است، نه یک <span> در جریانِ
   متن — تا انتخابِ دستیِ کاربر (به‌جای زدنِ دکمهٔ کپی) هرگز از مرزِ همین
   مقدار بیرون نزند و برچسب/راهنمای کناری را هم با خودش کپی نکند. */
input.fulfillment-token-box{
  border:none; background:transparent; outline:none; width:100%; padding:0;
  font-family:inherit; text-align:center; cursor:pointer;
}
textarea.fulfillment-token-box{
  border:none; background:transparent; outline:none; width:100%; padding:0;
  font-family:inherit; text-align:center; resize:none; cursor:pointer;
  word-break:break-word;
}
.fulfillment-copy-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  transition: background .2s ease;
}
.fulfillment-copy-icon svg{ width:15px; height:15px; }
.fulfillment-token-btn.copied .fulfillment-copy-icon{ background: #0E9A80; }
.fulfillment-token-btn.copied .ico-copy{ display:none; }
.fulfillment-token-btn.copied .ico-check{ display:block !important; }
.fulfillment-copy-hint{
  display:block; margin-top:8px; font-size:0.72rem; color:var(--text-faint); text-align:center;
  transition: color .2s ease;
}
.fulfillment-copy-hint.copied{ color:#0E9A80; font-weight:700; }
.fulfillment-panel-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; border-radius:14px; margin-bottom:8px;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
  color:#fff; font-size:0.92rem; font-weight:800; text-decoration:none;
  box-shadow: 0 14px 30px -14px rgba(200,18,67,0.55);
  transition: transform .15s ease;
}
.fulfillment-panel-cta:hover{ transform: translateY(-1px); color:#fff; }
.fulfillment-panel-cta:active{ transform: scale(0.98); }
.fulfillment-panel-sub{ text-align:center; font-size:0.74rem; color:var(--text-faint); margin:0 0 20px; }
.fulfillment-h{ font-size:0.86rem; font-weight:800; color:var(--text); margin:18px 0 10px; }
.fulfillment-guide-links{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.fulfillment-guide-links button{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:12px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  color:var(--text); font-size:0.8rem; font-weight:700; text-decoration:none;
  font-family:inherit; cursor:pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.fulfillment-guide-links button:hover{ border-color: var(--ruby-light); background:#fff; }
.fulfillment-guide-links button:active{ transform: scale(0.96); }
.fulfillment-list{ margin:0; padding-inline-start:20px; color:var(--text-muted); font-size:0.83rem; line-height:1.85; }
.fulfillment-list li{ margin-bottom:7px; }
.fulfillment-list li:last-child{ margin-bottom:0; }
.fulfillment-signoff{
  text-align:center; font-size:0.82rem; color:var(--text-muted);
  margin: 22px 0 0; padding-top:16px; border-top:1px solid var(--border-soft);
}

/* Compact order-info summary strip — replaces the old full-width table.
   Uses grid (not flex-wrap) so items always align into clean, even
   columns/rows regardless of how long each value's text happens to be —
   flex-wrap let short/long items wrap unevenly and look disorganized. */
.order-meta-strip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:12px 16px;
  background: var(--surface-2); border:1px solid var(--border-soft);
  border-radius:14px; padding:14px 18px;
}
.order-meta-item{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.order-meta-item-wide{ grid-column:span 2; }
.order-meta-item .lbl{ font-size:0.62rem; color:var(--text-faint); font-weight:700; white-space:nowrap; }
.order-meta-item .val{ font-size:0.76rem; color:var(--text); font-weight:800; overflow-wrap:anywhere; word-break:break-word; }

/* Admin guide-media management grid */
.hr-soft{ border:none; border-top:1px solid var(--ink-border); margin:18px 0; }
.guide-media-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.guide-media-thumb{
  position:relative; width:110px; height:110px; border-radius:10px; overflow:hidden;
  border:1px solid var(--ink-border); flex-shrink:0;
}
.guide-media-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.guide-media-thumb-actions{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:4px;
  background: rgba(0,0,0,0.55); opacity:0; transition: opacity .2s ease;
}
.guide-media-thumb:hover .guide-media-thumb-actions{ opacity:1; }
.guide-media-thumb-actions form{ margin:0; }
.guide-media-thumb-actions button{
  width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,0.15); color:#fff; font-size:0.7rem;
}
.guide-media-thumb-actions a{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.15); color:#fff; text-decoration:none;
}
.guide-media-thumb-actions a:hover{ background: rgba(255,255,255,0.3); }
.guide-media-thumb-actions button.danger{ background: rgba(228,83,79,0.7); }
.guide-media-thumb-actions button:hover{ background: rgba(255,255,255,0.3); }
.guide-media-thumb-actions button.danger:hover{ background: rgba(228,83,79,0.9); }

/* ===== Customer-facing guide modals (image carousel + video) ===== */
.guide-modal-overlay{
  display:none; position:fixed; inset:0; z-index:9500;
  background: rgba(20,8,14,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  align-items:center; justify-content:center; padding:20px;
}
.guide-modal-overlay.on{ display:flex; animation: guideModalFade .25s ease; }
@keyframes guideModalFade{ from{ opacity:0; } to{ opacity:1; } }

.guide-modal-box{
  position:relative; width:100%; max-width:520px;
  background:#fff; border-radius:22px; padding:14px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55);
  animation: guideModalPop .3s cubic-bezier(.34,1.3,.64,1);
}
@keyframes guideModalPop{ from{ opacity:0; transform:scale(0.92) translateY(10px); } to{ opacity:1; transform:scale(1) translateY(0); } }

.guide-modal-close{
  position:absolute; top:-14px; inset-inline-end:-14px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep)); color:#fff;
  font-size:1.2rem; line-height:1; box-shadow: 0 8px 18px -6px rgba(200,18,67,0.5);
}

.guide-carousel{ position:relative; overflow:hidden; border-radius:16px; background:#111; }
.guide-carousel-track{
  direction:ltr; display:flex; transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.guide-carousel-slide{ flex:0 0 100%; display:flex; align-items:center; justify-content:center; max-height:70vh; }
.guide-carousel-slide img{ width:100%; height:100%; max-height:70vh; object-fit:contain; display:block; }

.guide-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,0.85); color:var(--ruby-deep); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4); transition: background .2s ease, transform .15s ease;
}
.guide-carousel-arrow:hover{ background:#fff; }
.guide-carousel-arrow:active{ transform: translateY(-50%) scale(0.9); }
.guide-carousel-arrow.prev{ right:12px; }
.guide-carousel-arrow.next{ left:12px; }

.guide-carousel-dots{
  position:absolute; bottom:12px; inset-inline-start:0; inset-inline-end:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.guide-dot{
  width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.45); cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.guide-dot.active{ background: var(--gold); transform: scale(1.3); }

.guide-modal-video{ max-width:640px; }

/* Referred-orders alert card on management dashboard — unmissable */
.referred-alert-card{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, rgba(255,67,104,0.16), rgba(200,18,67,0.08));
  border: 1.5px solid rgba(255,67,104,0.35);
  border-radius: var(--radius-lg); padding:16px 18px; margin-bottom:18px;
  text-decoration:none; color: var(--ink-text);
  transition: transform .18s ease, border-color .18s ease;
  animation: referredAlertPulse 2.2s ease-in-out infinite;
}
.referred-alert-card:hover{ transform: translateY(-2px); border-color: var(--ruby-light); }
@keyframes referredAlertPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,67,104,0.3); }
  50%{ box-shadow: 0 0 0 8px rgba(255,67,104,0); }
}
.referred-alert-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background: linear-gradient(135deg, var(--ruby-light), var(--ruby-deep));
}
.referred-alert-text{ display:flex; flex-direction:column; gap:3px; flex:1; }
.referred-alert-text strong{ font-size:0.95rem; color: var(--ink-text); }
.referred-alert-text span{ font-size:0.78rem; color: var(--ink-text-muted); }
.referred-alert-arrow{ font-size:1.2rem; color: var(--ruby-light); flex-shrink:0; }

/* Product detail page — prominent price card + compact info strips */
.pd-price-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.pd-price-main{ display:flex; align-items:baseline; gap:8px; }
.pd-price-now{ font-size:1.6rem; font-weight:800; color: var(--ruby-ink); font-family:inherit; direction:ltr; display:inline-block; }
.pd-price-unit{ font-size:1.05rem; color: var(--text-muted); font-weight:700; }
.pd-price-side{ display:flex; align-items:center; gap:10px; }
.pd-price-old{ font-size:0.95rem; color: var(--text-faint); text-decoration:line-through; direction:ltr; }
.pd-discount-pill{
  display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#241505;
  font-size:0.76rem; font-weight:800;
}

.pd-price-meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:13px; padding-top:12px; border-top:1px solid var(--border-soft);
}
.pd-price-meta-item{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.74rem; font-weight:700; color: var(--text-muted);
}
.pd-price-meta-item.stock{ color: var(--gold-deep); }

.pd-info-strip{
  display:flex; align-items:flex-start; gap:7px;
  border-radius: 8px; padding:8px 11px; margin-bottom:14px;
  font-size:0.71rem; line-height:1.6; font-weight:600;
}
.pd-info-ico{ flex-shrink:0; font-size:0.85rem; }
.pd-info-blue{
  background: #EAF4FD; border-inline-start:3px solid #2E7CB8; color: #1A5A88;
}
.pd-info-yellow{
  background: #FFF6DD; border-inline-start:3px solid #C98A0A; color: #7A5205;
}
body.theme-dark .pd-info-blue{ background: rgba(90,169,230,0.14); color: #8FC4EE; }
body.theme-dark .pd-info-yellow{ background: rgba(240,180,41,0.14); color: #F0C766; }

.pd-fixed-source{
  display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border:1px solid var(--border-soft); font-size:0.85rem; font-weight:700;
}
.pd-fixed-source-ico{ flex-shrink:0; font-size:1rem; }

.pd-duration-badge{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid rgba(46,124,184,0.3);
  border-radius: var(--radius-sm); padding:12px 14px; font-size:0.9rem; font-weight:700; color: var(--text);
  box-sizing:border-box;
}

.pd-unified-card{
  background: linear-gradient(135deg, rgba(46,124,184,0.07), rgba(46,124,184,0.02));
  border: 1.5px solid rgba(46,124,184,0.25);
  border-radius: 14px; padding: 16px 16px 2px; margin-bottom:14px;
}
.pd-unified-label{
  display:flex; align-items:center; gap:6px;
  font-size:0.82rem; font-weight:800; color: #1A5A88; margin-bottom:12px;
}
body.theme-dark .pd-unified-label{ color: #8FC4EE; }
.pd-unified-card select{
  width:100%; background:#fff; border:1px solid rgba(46,124,184,0.3);
  border-radius:var(--radius-sm); padding:12px 14px; font-family:inherit; font-size:0.9rem; font-weight:700;
  color: var(--text); box-sizing:border-box;
}
body.theme-dark .pd-unified-card select{ background: var(--surface-2); }

/* "افزودن VPS برای اجرای ایجنت" add-on inside the service-details card */
.pd-agent-vps{ margin: 4px 0 14px; }
.pd-agent-vps-check{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:12px 14px; border:1.5px solid rgba(240,180,41,0.4);
  border-radius: var(--radius-sm); background: rgba(240,180,41,0.08);
  transition: border-color .15s ease, background .15s ease;
}
.pd-agent-vps-check:hover{ border-color: var(--gold); background: rgba(240,180,41,0.13); }
.pd-agent-vps-check input{ margin-top:3px; flex-shrink:0; }
.pd-agent-vps-body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pd-agent-vps-title{ font-size:0.85rem; font-weight:800; color: var(--text); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pd-agent-vps-price{
  font-size:0.78rem; font-weight:800; color: var(--gold-deep);
  background: rgba(240,180,41,0.18); border-radius: var(--radius-pill); padding:2px 10px;
}
.pd-agent-vps-note{ font-size:0.76rem; line-height:1.9; color: var(--text-muted); }

/* product shown but purchase disabled (out of stock / under update / …) */
.pd-unavailable{
  display:flex; gap:12px; align-items:flex-start;
  margin:14px 0; padding:14px 16px; border-radius:14px;
  background: linear-gradient(135deg, rgba(228,83,79,0.10), rgba(228,83,79,0.03));
  border: 1.5px solid rgba(228,83,79,0.4);
}
.pd-unavailable-ico{ font-size:1.3rem; line-height:1.3; flex-shrink:0; }
.pd-unavailable strong{ display:block; font-size:0.92rem; color: var(--text); }
.pd-unavailable p{ margin:4px 0 0; font-size:0.82rem; line-height:1.9; color: var(--text-muted); }

/* "به‌زودی" demand-collection card for an اشتراکی/رزروی option that's shown but not yet active */
.pd-demand-card{
  margin-top:16px; padding:16px; border-radius:14px;
  background: linear-gradient(135deg, rgba(240,180,41,0.10), rgba(240,180,41,0.03));
  border: 1.5px solid rgba(240,180,41,0.35);
}
.pd-demand-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; }
.pd-demand-ico{ font-size:1.15rem; line-height:1.4; flex-shrink:0; }
.pd-demand-head strong{ font-size:0.9rem; color: var(--text); }
.pd-demand-form{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding-top:10px; border-top:1px dashed rgba(240,180,41,0.35);
}
.pd-demand-form + .pd-demand-form{ margin-top:4px; }
.pd-demand-tag{ font-size:0.8rem; font-weight:800; color: var(--gold-deep); min-width:110px; }
.pd-demand-form input[type="tel"]{ flex:1; min-width:150px; }

.pd-buy-btn{
  box-shadow: 0 14px 28px -14px rgba(200,18,67,0.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pd-buy-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(200,18,67,0.6); }

.pd-account-fields{
  background: linear-gradient(135deg, rgba(200,18,67,0.05), rgba(200,18,67,0.015));
  border:1.5px solid rgba(200,18,67,0.22);
  border-radius: 14px; padding:16px; margin-bottom:16px;
  animation: pdAccountFieldsIn .25s ease;
}
.pd-account-fields-header{
  display:flex; align-items:center; gap:6px;
  font-size:0.85rem; font-weight:800; color: var(--ruby-deep); margin-bottom:14px;
}
@keyframes pdAccountFieldsIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

/* Download-icon overlay for uploaded image previews in the management panel */
.img-dl-wrap{ position:relative; }
.img-dl-btn{
  position:absolute; bottom:8px; left:8px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  background: rgba(15,8,12,0.68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
  text-decoration:none; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.5);
}
.img-dl-wrap:hover .img-dl-btn{ opacity:1; transform: translateY(0); }
.img-dl-btn:hover{ background: var(--ruby); }
.img-dl-btn svg{ width:15px; height:15px; }

/* Supplier-mapping page: grouped-by-product cards with collapsible sub-products */
.smg-group{ padding:14px 16px; }
.smg-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  cursor:pointer;
}
.smg-group-title{ display:flex; flex-direction:column; gap:2px; }
.smg-group-title a{ font-weight:700; }
.smg-group-stats{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.smg-chip{
  font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:999px;
  background: var(--surface-2); color: var(--text-muted);
}
.smg-chip-variant{ background: rgba(240,180,41,.15); color: var(--gold-deep); }
.smg-chip-warn{ background: rgba(220,38,38,.15); color:#dc2626; }
.smg-toggle-btn{ white-space:nowrap; }
.smg-group-body{ margin-top:14px; }
.smg-reorder-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-bottom:10px;
}
.smg-move-btn{
  border:1px solid var(--border); background: var(--bg-soft); color: var(--text);
  border-radius:6px; width:24px; height:22px; font-size:.7rem; cursor:pointer; line-height:1;
  margin-inline-end:2px;
}
.smg-move-btn:hover{ border-color: var(--ruby-light); color: var(--ruby); }

/* Shared-account batch management ("the bus" system) */
.sb-hidden{ display:none !important; }
.sb-settings-form{
  background: var(--surface-2); border:1px solid var(--ink-border); border-radius:12px;
  padding:14px 16px; margin-bottom:16px;
}
.sb-batch-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:14px; }
.sb-batch-cell{ display:flex; flex-direction:column; }
.sb-batch-cell .sb-batch-card{ flex:1; }
.sb-batch-actions{ margin:0; }
.sb-batch-card{
  display:block; text-decoration:none; color:inherit;
  background: var(--surface-2); border:1.5px solid var(--ink-border); border-radius:14px;
  padding:14px 16px; border-inline-start:4px solid var(--ink-border);
  transition: transform .15s ease, border-color .15s ease;
}
.sb-batch-card:hover{ transform: translateY(-2px); border-color: var(--ruby-light); }
.sb-batch-card.sb-status-pending{ border-inline-start-color: var(--gold); }
.sb-batch-card.sb-status-active{ border-inline-start-color: #34D8B8; }
.sb-batch-card.sb-status-closed{ border-inline-start-color: var(--ink-border); opacity:0.7; }
.sb-batch-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.sb-batch-id{ font-size:0.82rem; font-weight:800; color: var(--ink-text); }

.sb-capacity-bar-wrap{ display:flex; flex-direction:column; gap:6px; }
.sb-capacity-bar{
  width:100%; height:8px; border-radius:999px; background: var(--ink-600); overflow:hidden;
}
.sb-capacity-bar-lg{ height:12px; }
.sb-capacity-fill{
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--ruby-light), var(--gold));
  transition: width .3s ease;
}
.sb-capacity-label{ font-size:0.74rem; font-weight:700; color: var(--ink-text-muted); direction:ltr; text-align:left; }

.sb-days-row{ font-size:0.78rem; font-weight:700; color: var(--gold); margin-top:8px; }
.sb-days-row.muted{ color: var(--ink-text-muted); font-weight:600; }

/* Product page: main-product vs join-active-batch choice */
.pd-batch-choice-main{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  background: linear-gradient(135deg, rgba(240,180,41,0.1), rgba(255,67,104,0.04));
  border: 1.5px solid rgba(240,180,41,0.4); border-radius:14px;
  padding:14px 16px; margin-bottom:12px;
}
.pd-batch-choice-main input[type=radio]{ margin-top:3px; accent-color: var(--gold-deep); flex-shrink:0; }
.pd-batch-choice-main-body{ display:flex; flex-direction:column; gap:3px; }
.pd-batch-choice-main-body strong{ font-size:0.9rem; color: var(--text); }
.pd-batch-choice-main-body span{ font-size:0.76rem; color: var(--text-muted); }
.pd-batch-locked-note{ color: var(--ruby-deep) !important; font-weight:700; }
.pd-batch-choice-main:has(input:disabled){ opacity:.6; cursor:not-allowed; }
.pd-batch-choice-main input:disabled{ cursor:not-allowed; }

.pd-batch-alt-label{ font-size:0.76rem; color: var(--text-faint); margin:4px 0 8px; font-weight:600; }
/* بردرِ نقطه‌چینِ قرمز طبقِ خواستِ کاربر — تا این گزینه‌ها بینِ بقیه واضح‌تر دیده بشن (۱۴۰۵/۰۷/۱۰) */
.pd-batch-choice-alt{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background: var(--surface-2); border:1.5px dashed var(--ruby); border-radius:10px;
  padding:9px 13px; margin-bottom:8px; transition: background .15s ease;
}
.pd-batch-choice-alt:hover{ background: rgba(200,18,67,0.06); }
.pd-batch-choice-alt input[type=radio]{ accent-color: var(--ruby); flex-shrink:0; }
.pd-batch-alt-body{ display:flex; align-items:center; justify-content:space-between; flex:1; gap:8px; flex-wrap:wrap; }
.pd-batch-alt-body > span:first-child{ font-size:0.75rem; color: var(--text-muted); }
.pd-batch-alt-price{ font-size:0.85rem; font-weight:800; color: var(--ruby-deep); direction:ltr; }
.pd-batch-alt-onlyopt{
  display:inline-block; font-size:0.66rem; font-weight:800; color:#fff; background: var(--ruby);
  padding:1px 8px; border-radius:999px; margin-inline-start:6px;
}

/* ترتیبِ نمایشِ ردیفِ نوع‌سرویس/مدت‌زمان/باکسِ اشتراکی — در دسکتاپ باکسِ
   اشتراکی زیرِ هر دو فیلد می‌آید، در موبایل بلافاصله زیرِ «نوع سرویس»
   (قبل از فیلدِ مدت‌زمان) — طبقِ خواستِ صریحِ کاربر (۱۴۰۵/۰۷/۱۰). با CSS
   order، نه جابه‌جاییِ DOM با جاوااسکریپت. */
.pd-order-1{ order:1; }
.pd-order-2{ order:2; }
.pd-order-3{ order:3; grid-column:1/-1; }
@media (max-width:639px){
  .pd-order-3{ order:2; }
  .pd-order-2{ order:3; }
}
/* Product page: "cinema seat" style 5-day reservation calendar */
.pd-resv-months{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.pd-resv-month-tab{
  padding:8px 16px; border-radius: var(--radius-pill); border:1.5px solid var(--border);
  background: var(--surface); font-family:inherit; font-weight:700; font-size:0.8rem;
  color: var(--text-muted); cursor:pointer; transition: all .15s ease;
}
.pd-resv-month-tab.active{
  background: linear-gradient(135deg, var(--ruby), var(--ruby-light)); border-color: transparent;
  color:#fff; box-shadow: 0 8px 18px -10px rgba(200,18,67,0.5);
}

.pd-resv-panel{ display:none; }
.pd-resv-panel.active{ display:block; }

.pd-resv-seat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
@media (max-width:480px){ .pd-resv-seat-grid{ grid-template-columns: repeat(2, 1fr); } }

.pd-resv-seat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border-radius: var(--radius-md); padding:14px 8px; text-align:center;
  border:1.5px solid var(--border); background: var(--surface); cursor:pointer;
  font-family:inherit; transition: all .15s ease;
}
.pd-resv-seat .ico{ font-size:1.25rem; }
.pd-resv-seat .range{ font-size:0.76rem; font-weight:800; color: var(--text); direction:ltr; }
.pd-resv-seat .idx{ font-size:0.64rem; color: var(--text-faint); font-weight:700; }

.pd-resv-seat:hover:not(.taken):not(.mine){ border-color: var(--ruby-light); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.pd-resv-seat.selected{
  border-color: var(--ruby); background: linear-gradient(135deg, rgba(200,18,67,0.08), rgba(240,180,41,0.05));
  box-shadow: 0 10px 22px -14px rgba(200,18,67,0.45);
}
.pd-resv-seat.selected .range{ color: var(--ruby-deep); }
.pd-resv-seat.taken{ cursor:not-allowed; opacity:0.5; background: var(--surface-2); }
.pd-resv-seat.taken .range{ text-decoration: line-through; }
.pd-resv-seat.mine{ cursor:pointer; border-color:#0E9A80; background: rgba(14,154,128,0.08); }
.pd-resv-seat.mine .range{ color:#0E9A80; }

.pd-resv-summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background: var(--surface-2); border-radius: var(--radius-md); padding:12px 16px; margin-top:14px;
}

.pd-batch-toggle-more{
  display:block; width:100%; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:0.78rem; font-weight:700; color: var(--ruby);
  padding:6px 0; text-align:center;
}
.pd-batch-toggle-more:hover{ color: var(--ruby-deep); text-decoration:underline; }

/* =========================================================
   صفحهٔ جزئیاتِ محصول — بازطراحیِ کاملِ ظاهر (۱۴۰۵/۰۷/۰۶)
   نکته: position:sticky عمداً استفاده نشده — طبقِ یادداشتِ بالای
   .site-header، به‌خاطرِ overflow-x:hidden رویِ html/body در کلِ سایت
   خراب است؛ ستونِ تصویر این‌جا یک ستونِ سادهٔ (غیرِ sticky) است.
   ========================================================= */
.pd-section{ padding-top:22px; }

.pd-layout{ display:grid; grid-template-columns: 1fr; gap:28px; align-items:start; }
@media (min-width: 900px){
  /* توضیحاتِ محصول فقط در نمایشِ کامپیوتر زیرِ عکس می‌آید (ستونِ راست، ردیفِ
     دوم) — در موبایل عمداً همان‌جایِ قبلی (زیرِ کلِ باکسِ خرید) می‌ماند، چون
     ترتیبِ DOM طبیعی (عکس ← اطلاعات/خرید ← توضیحات) برایِ موبایل بهتر است؛
     ۱۴۰۵/۰۷/۰۷. */
  .pd-layout{
    grid-template-columns: minmax(340px, 440px) 1fr; grid-template-rows: auto auto; gap:28px 40px;
  }
  .pd-media-col{ grid-column:1; grid-row:1; }
  .pd-desc-block{ grid-column:1; grid-row:2; margin-top:0; align-self:start; }
  .pd-info-col{ grid-column:2; grid-row:1 / 3; }
}

.pd-gallery-frame{
  position:relative; aspect-ratio:1/1; border-radius: var(--radius-lg); overflow:hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--border-soft); box-shadow: var(--shadow-card);
}
.pd-gallery-img{ width:100%; height:100%; object-fit:cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pd-gallery-frame:hover .pd-gallery-img{ transform: scale(1.045); }
.pd-gallery-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:4.5rem; opacity:.5;
}
.pd-gallery-badge{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  background: linear-gradient(120deg, var(--ruby), var(--ruby-light));
  color:#fff; font-size:0.76rem; font-weight:800; padding:6px 14px; border-radius:999px;
  box-shadow: 0 10px 22px -10px rgba(200,18,67,0.6);
}

/* توضیحات، زیرِ عکس (نشان‌های قدیمیِ اعتماد، ردیفِ اشتراک‌گذاری، و شمارشِ
   بازدید — هر سه حذف شدند — ۱۴۰۵/۰۷/۰۷ تا ۱۴۰۵/۰۷/۰۹) */
.pd-desc-block{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border-soft); }
.pd-desc-heading{ margin:0 0 10px; font-size:0.95rem; font-weight:800; }

/* دسته‌بندی + عنوان — بالایِ عکس، تمام‌عرض (نه کنارِ باکسِ خرید)، طبقِ
   خواستِ کاربر — ۱۴۰۵/۰۷/۰۹ */
.pd-cat-pill{
  display:inline-block; font-size:0.72rem; font-weight:800; color: var(--ruby-deep);
  background: rgba(200,18,67,0.08); border:1px solid rgba(200,18,67,0.18);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.pd-title{ margin:0 0 22px; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight:800; line-height:1.35; }
@media (max-width:899px){
  .pd-gallery-frame{ max-width:250px; margin:0 auto; }
  .pd-title{ font-size:1.15rem; margin-bottom:16px; }
  .pd-cat-pill{ font-size:0.68rem; padding:3px 10px; }
}
.pd-rating-inline{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer;
  font-size:0.86rem; margin-bottom:12px; background:none; border:none; padding:0; font-family:inherit;
}
.pd-rating-stars{ color:#f5b301; letter-spacing:1px; }
.pd-rating-value{ font-weight:800; color: var(--text); }
.pd-rating-count{ color: var(--text-muted); }
.pd-rating-inline:hover .pd-rating-value{ text-decoration:underline; }
.pd-short-desc{ color: var(--text-muted); font-size:0.94rem; line-height:1.9; margin-bottom:18px; }

/* قیمت — دیگر داخلِ باکس نیست؛ مستقیماً زیرِ عکس، بدون کارت/هایلایت،
   با یک تایپوگرافیِ بزرگ و واضح (طبقِ بازخوردِ کاربر — ۱۴۰۵/۰۷/۰۹) */
.pd-price-standalone{
  margin-top:18px; border:1.5px dashed rgba(200,18,67,0.38);
  background: rgba(200,18,67,0.045); border-radius: var(--radius-md);
  padding:14px 18px;
}
.pd-price-standalone .pd-price-now{
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight:800; color: var(--ruby-ink);
  font-family:inherit; direction:ltr; display:inline-block; transition: transform .18s ease;
}
.pd-price-standalone .pd-price-unit{ font-size:1.05rem; }
@keyframes pdPriceFlash{ 0%{ transform:scale(1.12); color: var(--gold-deep); } 100%{ transform:scale(1); } }
.pd-price-flash{ animation: pdPriceFlash .32s ease; }
.pd-discount-pill{
  background: linear-gradient(120deg, var(--gold), #d99a1a); color:#2b1400;
  font-size:0.78rem; font-weight:800; padding:4px 11px; border-radius:999px;
}
@media (max-width:899px){
  .pd-price-standalone{ text-align:center; }
  .pd-price-standalone .pd-price-top{ justify-content:center; }
}

/* پنلِ یکپارچهٔ خرید — قیمت + جزئیاتِ سرویس + اکانت + کدها همه با یک
   پس‌زمینه/سایه‌ی مشترک، فقط با یک خط‌جداکنندهٔ ظریف بینشان (نه چند
   کارتِ شناورِ جدا با فاصله، طبقِ بازخوردِ کاربر — ۱۴۰۵/۰۷/۰۷). */
.pd-buy-panel{
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
  border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow:hidden; margin-bottom:18px;
}
.pd-buy-panel .pd-unified-card{
  background:transparent; border:none; border-radius:0; margin-bottom:0;
  border-top:1px solid var(--border-soft); padding:20px 22px;
}
.pd-buy-panel > .pd-unified-card:first-child,
.pd-buy-panel > form:first-child > .pd-unified-card:first-child{ border-top:none; }
/* دیگر یک ردیفِ مستقلِ بعدِ کلِ کارتِ «جزئیاتِ سرویس» نیست — حالا همون‌جا،
   بلافاصله زیرِ ردیفِ نوع‌سرویس/مدت‌زمان، عضو شده (۱۴۰۵/۰۷/۱۰) */
#batchChoiceGroup{ margin-top:16px; }
.pd-buy-panel .pd-account-fields{
  background:transparent; border:none; border-radius:0; margin:0;
  border-top:1px solid var(--border-soft); padding:20px 22px;
}
/* افزودنیِ VPS/گارانتی حالا این‌جا، درست بالایِ کدها، جای درستش‌ست
   (نه داخلِ «جزئیاتِ سرویس» و نه بالایِ «اطلاعاتِ اکانت» — طبقِ گزارشِ
   کاربر — ۱۴۰۵/۰۷/۰۹) */
.pd-buy-panel #agentVpsGroup, .pd-buy-panel #warrantyGroup{
  margin:0; padding:16px 20px 4px; border-top:1px solid var(--border-soft);
}
.pd-buy-panel .pd-codes-widget{ padding:16px 20px; border-top:1px solid var(--border-soft); }
.pd-buy-panel .pd-buy-btn-wrap{ padding:16px 20px; }

/* جمع‌وجورترشدنِ کلِ محتوایِ داخلِ پنلِ خرید — طبقِ بازخوردِ کاربر، فیلدها
   خیلی بزرگ بودن (۱۴۰۵/۰۷/۰۸) */
.pd-buy-panel .pd-unified-card{ padding:14px 20px; }
.pd-buy-panel .pd-unified-label{ font-size:0.78rem; margin-bottom:10px; }
.pd-buy-panel .form-group{ margin-bottom:10px; }
.pd-buy-panel label{ font-size:0.74rem; margin-bottom:4px; }
.pd-buy-panel .form-row{ gap:10px; }
.pd-buy-panel .pd-picker-trigger{ padding:9px 11px; font-size:0.8rem; }
.pd-buy-panel .pd-picker-trigger-ico{ font-size:1rem; }
.pd-buy-panel .pd-fixed-source{ padding:9px 11px; font-size:0.8rem; }
.pd-buy-panel .pd-duration-badge{ padding:9px 11px; font-size:0.8rem; }
.pd-buy-panel .pd-info-strip{ padding:8px 10px; font-size:0.7rem; margin-bottom:10px; }
.pd-buy-panel .pd-batch-choice-main{ padding:11px 13px; margin-bottom:10px; }
.pd-buy-panel .pd-batch-choice-alt{ padding:8px 12px; margin-bottom:6px; }
.pd-buy-panel .pd-batch-choice-main-body strong{ font-size:0.82rem; }
.pd-buy-panel .pd-batch-choice-main-body span{ font-size:0.72rem; }
.pd-buy-panel .pd-account-fields{ padding:14px 20px; }
.pd-buy-panel .pd-account-fields-header{ font-size:0.76rem; margin-bottom:10px; }
.pd-buy-panel .pd-addon-toggle{ padding:10px 38px 10px 10px; }
.pd-buy-panel .pd-addon-title{ font-size:0.78rem; }
.pd-buy-panel .pd-code-apply-btn{ padding:8px 14px; font-size:0.76rem; }
.pd-buy-panel .pd-buy-btn{ padding:12px; font-size:0.9rem; }

.pd-unified-card{
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding:20px 22px; margin-bottom:16px;
}
.pd-buy-btn{ font-size:1rem; padding:15px; border-radius:14px; }

/* دکمهٔ «انتخابگر» جایگزینِ select های ساده — کلیک می‌کنه، مدالِ زیبا با
   آیکن باز می‌شه (۱۴۰۵/۰۷/۰۷). خودِ select همچنان در DOM و مخفیه، پس
   name/value واقعی‌اش با فرم ارسال می‌شه — این فقط لایه‌ی ظاهریه. */
.pd-picker-trigger{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  padding:13px 14px; border-radius: var(--radius-sm); border:1.5px solid var(--border);
  background: var(--bg-soft); cursor:pointer; font-family:inherit; font-size:0.9rem; color: var(--text);
  transition: border-color .15s, background .15s;
}
.pd-picker-trigger:hover{ border-color: var(--ruby-light); }
.pd-picker-trigger.pd-picker-invalid{ border-color: var(--ruby); box-shadow: 0 0 0 2px rgba(200,18,67,.15); }
.pd-picker-trigger-ico{ font-size:1.15rem; flex-shrink:0; }
.pd-picker-trigger-label{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-picker-trigger-chevron{ color: var(--text-faint); font-size:0.8rem; flex-shrink:0; }

.pd-picker-options{ display:flex; flex-direction:column; gap:8px; margin-top:6px; max-height:52vh; overflow-y:auto; }
.pd-picker-option{
  display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:10px;
  border:1.5px solid var(--ink-border); background: rgba(255,255,255,0.04); color: var(--ink-text);
  cursor:pointer; font-family:inherit; font-size:0.88rem; text-align:start; width:100%;
  transition: border-color .15s, background .15s;
}
.pd-picker-option:hover{ border-color: var(--gold); background: rgba(255,255,255,0.08); }
.pd-picker-option.selected{ border-color: var(--gold); background: rgba(240,180,41,0.13); }
.pd-picker-option-ico{ font-size:1.15rem; flex-shrink:0; }
.pd-picker-option-label{ flex:1; font-weight:700; }
.pd-picker-option.selected::after{ content:'✓'; color: var(--gold); font-weight:800; }

/* کارتِ افزودنیِ ویژه (VPS ایجنت/گارانتیِ اختیاری) — با دکمهٔ ⓘ برایِ
   بازکردنِ توضیحاتِ کامل (جدا از تیک، به‌صورتِ position:absolute تا در
   موبایل با عنوان/قیمت رقابت نکنه و نشکنه)، به‌جایِ نمایشِ همیشگیِ متنِ
   توضیح — ۱۴۰۵/۰۷/۰۷، بازطراحیِ ریسپانسیو در ۱۴۰۵/۰۷/۰۸. */
.pd-addon-card{
  position:relative; border:1.5px solid rgba(240,180,41,0.35); border-radius:14px; margin:4px 0 12px;
  background: linear-gradient(135deg, rgba(240,180,41,0.08), rgba(240,180,41,0.02)); overflow:hidden;
}
.pd-addon-toggle{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:12px 40px 12px 12px; /* فضایِ خالیِ سمتِ چپ برایِ دکمهٔ ⓘ */
}
.pd-addon-body{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:1; min-width:0; }
.pd-addon-title-row{ display:flex; align-items:center; gap:6px; min-width:0; }
.pd-addon-ico{ font-size:1.1rem; flex-shrink:0; }
.pd-addon-title{ font-weight:800; font-size:0.82rem; }
.pd-addon-price{
  font-size:0.73rem; font-weight:800; color: var(--gold-deep); background: rgba(240,180,41,0.15);
  padding:2px 8px; border-radius:999px; white-space:nowrap;
}
.pd-addon-info-btn{
  position:absolute; top:10px; inset-inline-end:10px; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:0.78rem;
  color: var(--text-muted); flex-shrink:0;
}
.pd-addon-info-btn:hover{ border-color: var(--gold-deep); color: var(--gold-deep); }
.pd-addon-details{
  max-height:0; overflow:hidden; transition: max-height .25s ease, padding .25s ease;
  padding:0 12px; font-size:0.76rem; color:var(--text-muted); line-height:1.8;
}
.pd-addon-details p{ margin:0; }
.pd-addon-card.info-open .pd-addon-details{ max-height:200px; padding:0 12px 12px; }

/* چک‌باکس/رادیوِ سفارشی با انیمیشنِ واردشدنِ تیک/نقطه — برایِ همه‌ی
   گزینه‌های صفحه (افزودنی‌ها، دسته‌های اشتراکی، گیرندهٔ اکانت) — ۱۴۰۵/۰۷/۰۸ */
.pd-addon-toggle input[type=checkbox],
.pd-batch-choice-main input[type=radio],
.pd-batch-choice-alt input[type=radio],
.pd-fancy-radio input[type=radio]{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.pd-fancy-check-mark{
  width:21px; height:21px; border-radius:7px; border:2px solid var(--border);
  background: var(--surface); display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; transition: border-color .18s, background .18s;
}
.pd-fancy-check-mark svg{
  width:12px; height:12px; stroke:#fff; stroke-width:3.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:24; stroke-dashoffset:24; transition: stroke-dashoffset .22s ease .04s;
}
input:checked ~ .pd-fancy-check-mark{
  background: linear-gradient(135deg, var(--gold), var(--gold-deep)); border-color: var(--gold-deep);
  animation: pdCheckPop .28s ease;
}
input:checked ~ .pd-fancy-check-mark svg{ stroke-dashoffset:0; }
@keyframes pdCheckPop{ 0%{ transform:scale(0.75); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } }

.pd-fancy-radio{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-weight:600; font-size:0.85rem; }
.pd-fancy-radio-mark{
  width:19px; height:19px; border-radius:50%; border:2px solid var(--border); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition: border-color .18s;
}
.pd-fancy-radio-mark::after{
  content:''; width:0; height:0; border-radius:50%; background: var(--ruby); transition: width .18s ease, height .18s ease;
}
input:checked ~ .pd-fancy-radio-mark{ border-color: var(--ruby); animation: pdCheckPop .28s ease; }
input:checked ~ .pd-fancy-radio-mark::after{ width:9px; height:9px; }
.pd-batch-choice-main input:checked ~ .pd-fancy-radio-mark,
.pd-batch-choice-alt input:checked ~ .pd-fancy-radio-mark{ border-color: var(--gold-deep); }
.pd-batch-choice-main input:checked ~ .pd-fancy-radio-mark::after,
.pd-batch-choice-alt input:checked ~ .pd-fancy-radio-mark::after{ background: var(--gold-deep); }

/* ویجتِ فشرده و مشترکِ «کد تخفیف» + «کد معرف» — هر دو با دکمهٔ اعمال
   (۱۴۰۵/۰۷/۰۷) */
.pd-codes-widget{ display:flex; flex-direction:column; }
.pd-code-row{ display:flex; align-items:center; gap:8px; }
.pd-code-ico{ font-size:1rem; flex-shrink:0; width:20px; text-align:center; }
.pd-code-input{ flex:1; }
.pd-code-apply-btn{
  flex-shrink:0; padding:10px 16px; border-radius: var(--radius-sm); border:1.5px solid var(--ruby);
  background:none; color: var(--ruby); font-weight:800; font-size:0.82rem; cursor:pointer; font-family:inherit;
}
.pd-code-apply-btn:hover{ background: var(--ruby); color:#fff; }
.pd-code-apply-btn:disabled{ opacity:.5; cursor:not-allowed; border-color: var(--border); color: var(--text-faint); }
.pd-code-apply-btn:disabled:hover{ background:none; color: var(--text-faint); }
.pd-code-msg{ font-size:0.76rem; margin:6px 0 14px 28px; min-height:1px; }
.pd-codes-divider{ height:1px; background: var(--border-soft); margin:2px 0 12px; }
.pd-code-applied-chip{ font-size:0.78rem; color: var(--text-muted); background: var(--surface-2); padding:9px 12px; border-radius:10px; margin-top:2px; }

/* بخشِ نظراتِ مشتریان — دیگر تب نیست، یک بخشِ مستقلِ تمام‌عرض (۱۴۰۵/۰۷/۰۷) */
.pd-reviews-section{ margin-top:44px; padding-top:32px; border-top:1px solid var(--border-soft); }
.pd-reviews-heading{ font-size:1.1rem; font-weight:800; margin:0 0 22px; display:flex; align-items:center; gap:8px; }
.pd-tab-count{
  background: var(--surface-3); color: var(--text-muted); font-size:0.7rem; font-weight:800;
  padding:2px 8px; border-radius:999px;
}
.pd-desc-text{ white-space:pre-line; color: var(--text-muted); font-size:0.92rem; line-height:2; }

/* خلاصهٔ امتیازها */
.pd-rating-summary{
  display:flex; gap:32px; flex-wrap:wrap; align-items:center; margin-bottom:26px;
  padding-bottom:24px; border-bottom:1px solid var(--border-soft);
}
.pd-rating-big{ text-align:center; flex-shrink:0; }
.pd-rating-big-num{ font-size:2.6rem; font-weight:800; color: var(--ruby-ink); line-height:1; }
.pd-rating-big .pd-rating-stars{ font-size:1rem; display:block; margin:6px 0 4px; }
.pd-rating-bars{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:7px; }
.pd-rating-bar-row{ display:grid; grid-template-columns:44px 1fr 26px; align-items:center; gap:10px; }
.pd-rating-bar-label{ font-size:0.76rem; color: var(--text-muted); white-space:nowrap; }
.pd-rating-bar-track{ height:8px; border-radius:99px; background: var(--surface-3); overflow:hidden; }
.pd-rating-bar-fill{ display:block; height:100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius:99px; }
.pd-rating-bar-count{ text-align:end; }

.pd-review-list{ display:flex; flex-direction:column; }
.pd-review-item{ padding:16px 0; border-bottom:1px solid var(--border-soft); }
.pd-review-item:last-child{ border-bottom:none; }
.pd-review-head{ display:flex; justify-content:space-between; align-items:center; }
.pd-review-stars{ color:#f5b301; }
.pd-review-comment{ margin:8px 0; line-height:1.9; }
.pd-review-form{ margin-top:20px; border-top:1px solid var(--border-soft); padding-top:20px; }

/* نوارِ شناورِ خریدِ موبایل — فقط زیرِ ۷۰۰px، فقط وقتی کارتِ قیمتِ اصلی از دیدِ کاربر خارج شده */
.pd-mobile-bar{
  display:none; position:fixed; bottom:0; inset-inline:0; z-index:55;
  align-items:center; justify-content:space-between; gap:14px;
  background: var(--surface); border-top:1px solid var(--border-soft);
  padding:12px 16px; padding-left:84px; box-shadow: 0 -14px 30px -18px rgba(0,0,0,0.25);
  transform: translateY(100%); transition: transform .25s ease;
}
/* padding-left (فیزیکی، نه inline-start) عمداً برای جا خالی گذاشتن زیرِ
   حبابِ شناورِ ویجتِ چت (#cw-fab: position:fixed; bottom:16px; left:24px;
   z-index:9999) است — این حباب در همهٔ صفحاتِ سایت ثابت است. */
.pd-mobile-bar.show{ transform: translateY(0); }
.pd-mobile-bar-price{ display:flex; align-items:baseline; gap:5px; font-weight:800; }
.pd-mobile-bar-price .mono{ font-size:1.1rem; color: var(--ruby-ink); }
@media (max-width:700px){ .pd-mobile-bar{ display:flex; } }

/* ── ویزاردِ «کدنویسیِ پیشرفته با agent» (templates/nabeghe_env/coding_agent.html) ── */
.ca-tool-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin:14px 0; }
.ca-tool-card{
  display:flex; align-items:center; justify-content:center; text-align:center; gap:6px;
  border:1.5px solid var(--border); border-radius:12px; padding:14px 10px; cursor:pointer;
  font-weight:700; font-size:0.85rem; transition: border-color .15s, background .15s;
}
.ca-tool-card input{ position:absolute; opacity:0; pointer-events:none; }
.ca-tool-card:hover{ border-color: var(--ruby); }
.ca-tool-card.active{ border-color: var(--ruby); background: rgba(200,18,67,0.06); color: var(--ruby); }
.ca-other-note{ max-width:320px; }
.ca-choice-row{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.ca-upgrade-links{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ca-price-box{
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  border-radius:12px; background: var(--bg-soft, #f7f5f2); border:1.5px solid var(--border);
  margin:14px 0; font-size:0.95rem;
}
.ca-price-box b{ font-size:1.15rem; color: var(--ruby); }