/* ============================================================================
 *  پوسته‌ی فروشگاه
 * ============================================================================
 *  تمِ سایت (زمینه‌ی #151415، کارت‌های شیشه‌ای، نئون) حفظ شده، ولی رنگِ
 *  شاخصِ فروشگاه عمداً از هیچ بخشِ دیگری برداشته نشده: کیف‌پول طلایی است،
 *  حساب کاربری صورتی، تیم بنفش، روم‌ها فیروزه‌ای/سبز/قرمز. برای فروشگاه
 *  «کهربا روی ابسیدین» انتخاب شده تا از هر جای دیگری قابلِ تشخیص باشد،
 *  و هر دسته‌ی محصول رنگِ خودش را دارد — چون دسته‌بندی مهم‌ترین چیزی است
 *  که چشم باید در یک نگاه بگیرد.
 *
 *  قانونِ سرعت: هیچ backdrop-filter روی عناصرِ تکرارشونده (کارتِ محصول)
 *  نیست، سایه‌ها کوچک‌اند، و شبکه‌ی محصول‌ها با content-visibility تنبل
 *  رندر می‌شود تا اسکرول روی موبایلِ ضعیف هم روان بماند.
 * ========================================================================== */

/* فونتِ متن از خودِ دامنه‌ی فروشگاه سرو می‌شود. اگر از web.codpedia.ir
   می‌آمد، مرورگر بدونِ هدرِ CORS بارگذاری‌اش نمی‌کرد و متن با فونتِ
   پیش‌فرضِ سیستم نشان داده می‌شد. */
@font-face{
  font-family:'IRANSansX';
  src:url('/assets/fonts/IRANSansX-Regular.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --bg:#141315; --panel:#1b1a1f; --panel-2:#232128;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --txt:#eceaf0; --muted:#9d97a8;
  --amber:#ffb43d; --amber-2:#ff8a1f; --amber-soft:rgba(255,180,61,.12);
  --ok:#3bd887; --bad:#ff6b74; --warn:#ffc233;
  --r:16px; --r-sm:11px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); direction:rtl;
  font-family:'IRANSansX',Tahoma,sans-serif; font-size:15px; line-height:1.85;
  padding-bottom:86px; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ── سربرگ ─────────────────────────────────────────────────────────────── */
.sh-head{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 14px;background:rgba(20,19,21,.94);border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px)
}
.sh-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.sh-brand img{width:30px;height:30px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(224,38,38,.45))}
.sh-head-actions{display:flex;align-items:center;gap:8px}
.sh-icon-btn{position:relative;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:var(--panel-2);border:1px solid var(--line);font-size:19px}
.sh-badge{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--amber);color:#2a1a00;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sh-login-btn{padding:9px 18px;border-radius:12px;font-weight:800;font-size:13.5px;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#2a1a00}

.sh-main{padding:16px 14px 20px;max-width:1080px;margin:0 auto}

/* ── نمادهای اعتماد (پایینِ فروشگاه) ───────────────────────────────────────
   به‌جای دو مربعِ جدا (که فاصله‌ی بالا/پایینش با نوارِ ثابتِ پایین هماهنگ
   نبود)، یک نوارِ افقیِ یکپارچه — دقیقاً مثلِ نوارهای اعتمادِ فروشگاه‌های
   بزرگ. خودِ نوار پس‌زمینه/بوردر دارد، پس برای جداشدن از محتوای بالا و
   نوارِ پایین نیازی به فاصله‌ی زیاد نیست؛ فاصله‌ی بالا و پایین طوری
   حساب شده که با احتسابِ ۸۶پیکسل فضای رزروشده‌ی سراسریِ سایت برای نوارِ
   ثابت (که در پایینِ صفحه با گپِ ۱۲پیکسلی جا خوش کرده)، عمق‌شان از دو طرف
   یکسان دیده شود. */
.sh-trust{
  display:flex;align-items:stretch;justify-content:center;gap:0;
  margin:23px 0 0;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);overflow:hidden
}
.sh-trust-item{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 14px;text-decoration:none;color:var(--muted);
  transition:background .15s
}
.sh-trust-item:hover{background:var(--panel-2)}
.sh-trust-item img{width:30px;height:30px;object-fit:contain;border-radius:6px;flex:0 0 auto}
.sh-trust-icon{color:var(--amber);flex:0 0 auto}
.sh-trust-item span{font-size:12px;font-weight:700;color:var(--txt);line-height:1.5}
.sh-trust-sep{width:1px;background:var(--line);flex:0 0 auto}

/* ── نوارِ پایین ────────────────────────────────────────────────────────── */
.sh-tabbar{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:60;
  display:flex;gap:4px;width:calc(100% - 24px);max-width:520px;padding:7px;
  background:rgba(27,26,31,.96);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.5)
}
.sh-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;
  border-radius:999px;color:var(--muted);font-size:11px;font-weight:600}
.sh-tabbar a i{font-size:19px;line-height:1}
.sh-tabbar a.is-active{background:linear-gradient(135deg,rgba(255,180,61,.28),rgba(255,138,31,.12));color:var(--amber)}

/* ── فیلترها ───────────────────────────────────────────────────────────── */
.sh-search{display:flex;gap:8px;margin-bottom:12px}
.sh-search input{flex:1;min-width:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--panel);
  border:1px solid var(--line);color:var(--txt)}
.sh-search input::placeholder{color:#6e6878}
.sh-search select{padding:12px 10px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--line)}

.sh-cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sh-cats::-webkit-scrollbar{display:none}
.sh-cat{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.sh-cat i{font-size:16px}
.sh-cat.is-on{color:#2a1a00;background:linear-gradient(135deg,var(--amber),var(--amber-2));border-color:transparent}

.sh-notice{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin-bottom:14px;
  border-radius:var(--r-sm);background:rgba(255,194,51,.09);border:1px solid rgba(255,194,51,.3);
  color:#ffdf9b;font-size:12.5px;line-height:1.9}
.sh-notice i{flex:0 0 auto;margin-top:3px}

/* ── شبکه‌ی محصول ──────────────────────────────────────────────────────── */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
@media(min-width:760px){.sh-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}}

.sh-card{
  position:relative;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  /* رندرِ تنبل: کارت‌های بیرون از دید اصلاً چیده نمی‌شوند */
  content-visibility:auto;contain-intrinsic-size:260px;
}
.sh-card:active{transform:scale(.985)}
.sh-card-media{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,var(--acc-soft,rgba(255,180,61,.14)),transparent 62%),#171619;
  border-bottom:1px solid var(--line)}
.sh-card-media img{width:74%;height:74%;object-fit:contain}
/* میزبانِ قاب باید خودش position داشته باشد، وگرنه لایه‌های absoluteِ قاب
   به نزدیک‌ترین والدِ position‌دار (کارت) می‌چسبند و قاب از جای آواتار
   بیرون می‌افتد. */
.sh-frame-host{flex:0 0 auto}
.sh-card-media .sh-avatar-preview{width:78px;height:78px;border-radius:50%;object-fit:cover}
.sh-card-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.sh-card-title{font-size:13.5px;font-weight:800;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-card-sub{font-size:11.5px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sh-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.sh-price{display:flex;flex-direction:column;line-height:1.35}
.sh-price b{font-size:14.5px;font-weight:800;color:var(--amber)}
.sh-price b i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted)}
.sh-price .sh-cpc{font-style:normal;font-size:10.5px;color:#7ad7ff;font-weight:700}
.sh-price s{font-size:11px;color:#6e6878}
.sh-price span{font-size:10.5px;color:var(--muted)}
.sh-add{width:36px;height:36px;flex:0 0 auto;border-radius:11px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#2a1a00;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.sh-add[disabled]{background:var(--panel-2);color:#5f5a69;cursor:not-allowed}

.sh-tags{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.sh-tag{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;line-height:1.7}
.sh-tag-off{background:#e0434c;color:#fff}
.sh-tag-new{background:var(--amber);color:#2a1a00}
.sh-tag-own{background:rgba(59,216,135,.18);color:#7cefb0;border:1px solid rgba(59,216,135,.42)}
.sh-tag-out{background:rgba(255,255,255,.1);color:#c9c3d8}
.sh-fav{position:absolute;top:8px;left:8px;width:31px;height:31px;border-radius:50%;border:1px solid var(--line);
  background:rgba(15,14,17,.75);color:#8b8497;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sh-fav.is-on{color:#ff5f7a;border-color:rgba(255,95,122,.5)}
.sh-days{position:absolute;bottom:8px;right:8px;padding:3px 9px;border-radius:999px;font-size:10.5px;
  background:rgba(15,14,17,.8);border:1px solid var(--line);color:var(--muted)}

/* رنگِ هر دسته — تنها چیزی که کارت‌ها را از هم جدا می‌کند، پس عمداً پررنگ */
.sh-card[data-type="cp"]      {--acc:#ffcc33;--acc-soft:rgba(255,204,51,.16)}
.sh-card[data-type="ingame"]  {--acc:#ff8a1f;--acc-soft:rgba(255,138,31,.16)}
.sh-card[data-type="frame"]   {--acc:#a06bff;--acc-soft:rgba(160,107,255,.16)}
.sh-card[data-type="avatar"]  {--acc:#5ad1ff;--acc-soft:rgba(90,209,255,.16)}
.sh-card[data-type="bubble"]  {--acc:#3bd887;--acc-soft:rgba(59,216,135,.16)}
.sh-card[data-type="theme"]   {--acc:#ff5fae;--acc-soft:rgba(255,95,174,.16)}
.sh-card-type{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--acc)}

.sh-cp-coin{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#3a2600;
  background:radial-gradient(circle at 34% 28%,#fff3c4,#ffcc33 45%,#d99b14);
  box-shadow:0 6px 18px rgba(217,155,20,.35)}

/* ── خالی/بارگذاری ─────────────────────────────────────────────────────── */
.sh-empty{text-align:center;padding:52px 20px;color:var(--muted)}
.sh-empty i{font-size:40px;display:block;margin-bottom:10px;color:#4a4553}
.sh-skel{border-radius:var(--r);background:linear-gradient(90deg,#1b1a1f,#232128,#1b1a1f);
  background-size:200% 100%;animation:shSkel 1.3s linear infinite;height:258px}
@keyframes shSkel{to{background-position:-200% 0}}

/* ── کارت/پنل عمومی ────────────────────────────────────────────────────── */
.sh-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.sh-panel h2{margin:0 0 12px;font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:7px}
.sh-panel h2 i{color:var(--amber)}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.sh-row:last-child{border-bottom:none}
.sh-muted{color:var(--muted);font-size:12.5px}

.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 18px;border-radius:13px;
  border:none;cursor:pointer;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#2a1a00}
.sh-btn[disabled]{opacity:.5;cursor:not-allowed}
.sh-btn-ghost{background:var(--panel-2);color:var(--txt);border:1px solid var(--line-2)}
/* پرداخت با CPC رنگِ خودش را دارد تا با پرداختِ بانکی اشتباه گرفته نشود */
.sh-btn-cpc{background:linear-gradient(135deg,#7ad7ff,#3b9fd6);color:#04263a}
.sh-btn-danger{background:rgba(255,107,116,.13);color:#ff9aa1;border:1px solid rgba(255,107,116,.36)}
.sh-btn-block{width:100%}
.sh-input{width:100%;padding:13px 14px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--txt)}
.sh-input::placeholder{color:#6e6878}
.sh-label{display:block;font-size:12.5px;font-weight:700;margin:0 0 6px;color:#d3ccdd}
.sh-field{margin-bottom:13px}

/* ── سبد خرید ──────────────────────────────────────────────────────────── */
.sh-line{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.sh-line:last-of-type{border-bottom:none}
.sh-line-media{flex:0 0 auto;width:58px;height:58px;border-radius:12px;background:#171619;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sh-line-body{flex:1;min-width:0}
.sh-line-title{font-size:13.5px;font-weight:700}
.sh-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.sh-qty button{width:28px;height:28px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);cursor:pointer}
.sh-qty b{min-width:22px;text-align:center}
.sh-sum{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px}
.sh-sum.total{border-top:1px solid var(--line-2);margin-top:6px;padding-top:12px;font-size:16px;font-weight:800}
.sh-sum.total b{color:var(--amber)}

/* ── وضعیت سفارش ───────────────────────────────────────────────────────── */
.sh-status{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800}
.sh-st-pending {background:rgba(255,255,255,.08);color:#c9c3d8}
.sh-st-doing   {background:rgba(255,194,51,.14);color:#ffd77a;border:1px solid rgba(255,194,51,.35)}
.sh-st-done    {background:rgba(59,216,135,.14);color:#7cefb0;border:1px solid rgba(59,216,135,.35)}
.sh-st-badlogin{background:rgba(255,107,116,.14);color:#ff9aa1;border:1px solid rgba(255,107,116,.42);cursor:pointer}
.sh-st-canceled,.sh-st-refunded{background:rgba(255,255,255,.06);color:#8b8497}

/* ── کمد ──────────────────────────────────────────────────────────────── */
.sh-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
.sh-inv-item{position:relative;padding:13px 10px;border-radius:14px;background:var(--panel-2);
  border:1px solid var(--line);text-align:center;cursor:pointer}
.sh-inv-item.is-on{border-color:var(--amber);background:rgba(255,180,61,.09)}
.sh-inv-item .t{font-size:12px;font-weight:700;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.sh-inv-item .d{font-size:10.5px;color:var(--muted);margin-top:2px}
/* پیش‌نمایشِ کمد باید با نوعِ آیتم اندازه‌اش را عوض کند: قاب گرد و ثابت
   است، ولی حباب و تم مستطیل‌اند و در یک دایره‌ی ۶۶ پیکسلی له می‌شوند. */
.sh-inv-preview{width:100%;min-height:74px;margin:0 auto;display:flex;
  align-items:center;justify-content:center;padding:2px 0}
.sh-inv-preview .rm-chat-bubble{font-size:11px;line-height:1.7;max-width:100%;
  padding:7px 11px;text-align:right}
.sh-inv-preview .sh-theme-chip{width:86px;height:66px}
.sh-inv-preview img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sh-inv-on{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;
  background:var(--amber);color:#2a1a00;font-size:11px;display:none;align-items:center;justify-content:center}
.sh-inv-item.is-on .sh-inv-on{display:flex}

/* ── مودال ─────────────────────────────────────────────────────────────── */
.sh-modal{position:fixed;inset:0;z-index:100;background:rgba(8,7,10,.82);display:none;
  align-items:flex-end;justify-content:center;padding:0}
.sh-modal.is-open{display:flex}
@media(min-width:640px){.sh-modal{align-items:center;padding:22px}}
.sh-modal-box{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--line-2);border-radius:22px 22px 0 0;padding:20px 18px 26px}
@media(min-width:640px){.sh-modal-box{border-radius:22px}}
.sh-modal-close{position:sticky;top:0;float:left;width:32px;height:32px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--line);cursor:pointer;font-size:16px}

/* ── توست ──────────────────────────────────────────────────────────────── */
.sh-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);z-index:200;
  max-width:88vw;padding:11px 20px;border-radius:999px;font-size:13.5px;font-weight:700;
  background:#2b2a31;border:1px solid var(--line-2);color:var(--txt);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.sh-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sh-toast.ok{background:linear-gradient(135deg,#3bd887,#1f8f57);color:#04331a;border-color:transparent}
.sh-toast.bad{background:linear-gradient(135deg,#ff7a7a,#c8323a);color:#fff;border-color:transparent}

/* ── ورود ─────────────────────────────────────────────────────────────── */
.sh-auth{max-width:400px;margin:6vh auto;padding:26px 22px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:22px}
.sh-auth h1{font-size:18px;margin:0 0 6px;text-align:center}
.sh-auth p{margin:0 0 20px;text-align:center;color:var(--muted);font-size:13px}
.sh-otp{display:flex;justify-content:center;gap:8px;direction:ltr}
.sh-otp input{width:46px;height:54px;text-align:center;font-size:21px;font-weight:800;border-radius:12px;
  background:var(--panel-2);border:1.5px solid var(--line);color:var(--txt);-moz-appearance:textfield}
.sh-otp input::-webkit-outer-spin-button,.sh-otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sh-otp input:focus{border-color:var(--amber);outline:none}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}