/* ============================================================
   مای پیکسل — استایل بخش‌های جدید
   ============================================================ */

/* ── مودال حساب کاربری: جمع‌وجور برای دسکتاپ و موبایل ── */
.account-modal{width:min(340px,90vw); padding:20px 19px 19px; border-radius:19px;}
.account-modal .modal-close{top:13px; inset-inline-end:13px; width:28px; height:28px; border-radius:9px;}
.account-modal .modal-close svg{width:13px; height:13px;}

.account-modal .modal-brand{gap:6px; margin-bottom:14px;}
.account-modal .modal-brand svg{width:30px; height:30px;}
.account-modal .modal-brand h3{font-size:.92rem;}
.account-modal .modal-brand p{font-size:.72rem; line-height:1.7;}

.account-modal .auth-tabs{border-radius:11px; padding:3px; margin-bottom:14px;}
.account-modal .auth-tabs .indicator{top:3px; bottom:3px; width:calc(50% - 3px); border-radius:9px;}
.account-modal .auth-tab{padding:8px 6px; font-size:.83rem;}

.account-modal .form-field{
  padding:10px 13px; margin-bottom:9px; border-radius:11px; font-size:.86rem;
}
.account-modal .form-row{gap:8px;}
.account-modal .form-hint{font-size:.75rem; margin-bottom:11px; line-height:1.7;}
.account-modal .form-error{font-size:.76rem; margin-bottom:9px;}

.account-modal .btn,
.account-modal .btn-block{
  padding:11px 14px; border-radius:12px; font-size:.87rem; min-height:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
/* svgهای بدون width/height نباید دکمه را کش بدهند */
.account-modal .btn > svg,
.account-modal .btn-block > svg,
.account-modal .account-user svg{width:16px; height:16px; flex-shrink:0;}
.account-modal .account-avatar svg{width:21px; height:21px;}
.account-modal .google-btn{padding:10px; border-radius:12px; font-size:.83rem; gap:8px;}
.account-modal .google-btn svg{width:16px; height:16px;}
.account-modal .divider{margin:15px 0 12px; font-size:.74rem; gap:10px;}

.account-modal .otp-row{gap:7px; margin:4px 0 11px;}
.account-modal .otp-box{width:40px; height:47px; font-size:1.12rem; border-radius:11px;}
.account-modal .otp-meta{font-size:.76rem; margin-bottom:12px;}
.account-modal .back-link{font-size:.78rem; margin-top:11px;}

/* حالت وارد شده — منوی میان‌بر */
.account-modal .account-user{text-align:center;}
.account-modal .account-avatar{width:46px; height:46px; margin:0 auto 9px;}
.account-modal .account-avatar svg{width:21px; height:21px;}
.account-modal .account-user h4{font-size:.94rem; margin-bottom:3px;}
.account-modal .account-user .phone{font-size:.75rem; margin-bottom:14px;}

.account-links{
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
  margin-bottom:13px; text-align:start;
}
.account-links a{
  display:flex; align-items:center; gap:8px; padding:10px 11px; border-radius:12px;
  font-size:.79rem; font-weight:600; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  transition:all .22s cubic-bezier(.3,1.3,.5,1);
}
.account-links a svg{width:16px; height:16px; flex-shrink:0; color:var(--cyan); opacity:.85;}
.account-links a:hover{
  color:var(--cyan); border-color:rgba(46,230,245,.34);
  background:rgba(46,230,245,.08); transform:translateY(-2px);
}
.account-links .soon-tag{display:none;}

@media (max-width:520px){
  .account-modal{width:min(330px,93vw); padding:18px 16px 16px;}
  .account-modal .otp-box{width:37px; height:44px; font-size:1.02rem;}
  .account-modal .form-field{padding:9px 12px; font-size:.84rem;}
  .account-modal .btn,
  .account-modal .btn-block{padding:10px 12px; font-size:.85rem;}
  .account-links a{padding:9px; font-size:.75rem; gap:6px;}
  .account-links a svg{width:14px; height:14px;}
}

/* ============================================================
   انیمیشن‌های عمومی
   ============================================================ */
@keyframes mpFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@keyframes mpPop{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);}}
@keyframes mpShimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
@keyframes mpHeartPop{0%{transform:scale(1);} 40%{transform:scale(1.32);} 70%{transform:scale(.92);} 100%{transform:scale(1);}}
@keyframes mpRing{0%{box-shadow:0 0 0 0 rgba(46,230,245,.45);} 100%{box-shadow:0 0 0 14px rgba(46,230,245,0);}}

/* ورود پلکانی کارت‌ها هنگام تعویض دسته‌بندی */
.stagger-in > *{
  opacity:0;
  animation:mpFadeUp .46s cubic-bezier(.22,.9,.3,1) forwards;
}
.stagger-in > *:nth-child(1){animation-delay:.02s}
.stagger-in > *:nth-child(2){animation-delay:.06s}
.stagger-in > *:nth-child(3){animation-delay:.1s}
.stagger-in > *:nth-child(4){animation-delay:.14s}
.stagger-in > *:nth-child(5){animation-delay:.18s}
.stagger-in > *:nth-child(6){animation-delay:.22s}
.stagger-in > *:nth-child(7){animation-delay:.26s}
.stagger-in > *:nth-child(8){animation-delay:.3s}
.stagger-in > *:nth-child(n+9){animation-delay:.34s}

/* محو شدن شبکه قبل از رندر جدید */
.grid-swap{opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease;}

@media (prefers-reduced-motion:reduce){
  .stagger-in > *{animation:none; opacity:1;}
  .grid-swap{transition:none;}
}

/* ============================================================
   چیپ‌های فیلتر و دسته‌بندی — با انیمیشن انتخاب
   ============================================================ */
.chip{
  flex:0 0 auto; position:relative; overflow:visible; isolation:isolate;
  transition:color .22s ease, border-color .28s ease, background .26s ease;
}
.chip::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,rgba(46,230,245,.24),rgba(11,114,133,.3));
  opacity:0; transform:scale(.75); transition:opacity .26s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.chip.active::after{opacity:1; transform:scale(1);}
.chip:active{transform:scale(.96);}
/* هیچ transform عمودی و سایه بیرونی روی چیپ‌ها نیست تا در نوار افقی بریده نشوند */
.chip.active{box-shadow:inset 0 0 0 1px rgba(46,230,245,.45);}

/* موج کلیک */
.ripple{position:relative; overflow:hidden;}
.ripple > .rip{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(46,230,245,.45),transparent 70%);
  transform:scale(0); animation:ripGrow .55s ease-out forwards;
}
@keyframes ripGrow{to{transform:scale(2.6); opacity:0;}}

/* کارت دسته‌بندی */
.cat-row{transition:transform .26s cubic-bezier(.25,1.2,.4,1), border-color .26s ease, background .26s ease;}
.cat-row:hover{transform:translateY(-3px);}
.cat-row.active{border-color:rgba(46,230,245,.5); background:rgba(46,230,245,.07);}

/* ============================================================
   ستاره‌ها و امتیاز
   ============================================================ */
.stars{display:inline-flex; gap:2px; align-items:center;}
.stars svg{width:15px; height:15px;}
.stars .s-on{color:#F5C451;}
.stars .s-off{color:rgba(255,255,255,.16);}
.rating-line{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-2);}
.rating-big{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.rating-score{font-size:2rem; font-weight:800; color:#F5C451; line-height:1;}

/* انتخاب امتیاز در فرم دیدگاه */
.star-pick{display:flex; gap:6px; flex-direction:row-reverse; justify-content:flex-end;}
.star-pick button{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.2); transition:all .2s ease;
}
.star-pick button svg{width:19px; height:19px;}
.star-pick button:hover,
.star-pick button:hover ~ button,
.star-pick button.on,
.star-pick button.on ~ button{
  color:#F5C451; border-color:rgba(245,196,81,.4); background:rgba(245,196,81,.1);
  transform:translateY(-2px);
}

/* ============================================================
   صفحه محصول — گالری، تنوع، مزایا/معایب
   ============================================================ */
.prod-layout{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:36px; align-items:start;}
@media (max-width:900px){ .prod-layout{grid-template-columns:1fr; gap:24px;} }

.gallery-main{
  position:relative; aspect-ratio:1/1; border-radius:22px; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(46,230,245,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.gallery-main img{width:100%; height:100%; object-fit:cover; animation:mpPop .35s ease;}
.gallery-main .ph{width:36%; color:rgba(46,230,245,.4);}
.gallery-thumbs{display:flex; gap:9px; margin-top:11px; overflow-x:auto; padding-bottom:4px;}
.gallery-thumbs button{
  flex:0 0 auto; width:66px; height:66px; border-radius:14px; overflow:hidden;
  border:1.6px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  display:grid; place-items:center; transition:border-color .22s, transform .22s;
}
.gallery-thumbs button:hover{transform:translateY(-2px);}
.gallery-thumbs button.on{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(46,230,245,.14);}
.gallery-thumbs img{width:100%; height:100%; object-fit:cover;}
.gallery-thumbs svg{width:40%; color:rgba(46,230,245,.45);}

/* دکمه‌های سایز و رنگ */
.opt-group{margin-top:20px;}
.opt-group > label{
  display:block; font-size:.78rem; font-weight:600; color:var(--text-2); margin-bottom:9px;
}
.opt-group > label .picked{color:var(--cyan); font-weight:700;}
.size-row{display:flex; gap:9px; flex-wrap:wrap;}
.size-btn{
  min-width:60px; padding:10px 14px; border-radius:13px; font-size:.86rem; font-weight:600;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.11); color:var(--text-1);
  transition:all .24s cubic-bezier(.3,1.3,.5,1); position:relative;
}
.size-btn small{display:block; font-size:.65rem; color:var(--text-3); font-weight:500; margin-top:2px;}
.size-btn:hover{border-color:rgba(46,230,245,.35); transform:translateY(-2px);}
.size-btn.on{
  border-color:var(--cyan); color:var(--cyan);
  background:linear-gradient(135deg,rgba(46,230,245,.16),rgba(11,114,133,.2));
  box-shadow:0 0 0 3px rgba(46,230,245,.12);
}
.size-btn.on small{color:rgba(46,230,245,.75);}

.color-row{display:flex; gap:11px; flex-wrap:wrap;}
.color-btn{
  display:flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:30px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.11);
  font-size:.83rem; font-weight:600; color:var(--text-1);
  transition:all .24s cubic-bezier(.3,1.3,.5,1);
}
html[dir="rtl"] .color-btn{padding:7px 8px 7px 13px;}
.color-btn .swatch{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.35);
  transition:transform .24s cubic-bezier(.3,1.5,.5,1);
}
.color-btn:hover{border-color:rgba(46,230,245,.35); transform:translateY(-2px);}
.color-btn:hover .swatch{transform:scale(1.12);}
.color-btn.on{
  border-color:var(--cyan); color:var(--cyan);
  background:linear-gradient(135deg,rgba(46,230,245,.16),rgba(11,114,133,.2));
  box-shadow:0 0 0 3px rgba(46,230,245,.12);
}
.color-btn.on .swatch{transform:scale(1.1); border-color:var(--cyan);}

/* نقاط قوت و ضعف */
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px;}
@media (max-width:640px){ .proscons{grid-template-columns:1fr;} }
.pc-box{padding:16px 17px; border-radius:16px; border:1px solid; animation:mpFadeUp .4s ease both;}
.pc-box h4{display:flex; align-items:center; gap:7px; font-size:.84rem; font-weight:700; margin-bottom:11px;}
.pc-box h4 svg{width:16px; height:16px;}
.pc-box ul{list-style:none; display:flex; flex-direction:column; gap:8px;}
.pc-box li{display:flex; gap:8px; font-size:.83rem; line-height:1.85; color:var(--text-2);}
.pc-box li::before{content:''; width:5px; height:5px; border-radius:50%; margin-top:.75em; flex-shrink:0;}
.pc-pros{background:rgba(46,213,115,.06); border-color:rgba(46,213,115,.22);}
.pc-pros h4{color:#2ED573;}
.pc-pros li::before{background:#2ED573;}
.pc-cons{background:rgba(255,107,107,.06); border-color:rgba(255,107,107,.22);}
.pc-cons h4{color:#FF6B6B;}
.pc-cons li::before{background:#FF6B6B;}

/* گارانتی اصالت */
.warranty{
  position:relative; overflow:hidden; margin-top:20px;
  display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:16px;
  background:linear-gradient(135deg,rgba(46,230,245,.08),rgba(255,255,255,.02));
  border:1px solid rgba(46,230,245,.2);
}
.warranty .shield{
  flex-shrink:0; width:40px; height:40px; display:grid; place-items:center;
  color:var(--cyan);
}
.warranty .shield svg{width:36px; height:36px;}
.warranty b{display:block; font-size:.87rem; font-weight:700; margin-bottom:3px;}
.warranty span{font-size:.76rem; color:var(--text-3); line-height:1.7;}
.warranty::after{
  content:''; position:absolute; inset-inline-end:-30px; top:-40px;
  width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle,rgba(46,230,245,.15),transparent 70%);
  pointer-events:none;
}

/* دکمه قلب و اشتراک */
.prod-tools{display:flex; gap:9px; align-items:center; margin-top:16px; flex-wrap:wrap;}
.tool-btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px;
  border-radius:13px; font-size:.85rem; font-weight:600; color:var(--text-1);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11);
  transition:all .22s ease;
}
.tool-btn svg{width:18px; height:18px;}
.tool-btn:hover{border-color:rgba(46,230,245,.34); background:rgba(46,230,245,.07); color:var(--cyan);}
.tool-btn.icon-only{width:44px; padding:0; justify-content:center;}

.wish-btn.on{
  color:#FF6B8B; border-color:rgba(255,107,139,.4); background:rgba(255,107,139,.1);
}
.wish-btn.on:hover{color:#FF6B8B; border-color:rgba(255,107,139,.55); background:rgba(255,107,139,.15);}
.wish-btn.bump svg{animation:mpHeartPop .45s cubic-bezier(.3,1.5,.5,1);}
.wish-btn:disabled{opacity:.55; cursor:not-allowed;}

/* قلب روی کارت محصول */
.card-wish{
  position:absolute; top:10px; inset-inline-end:10px; z-index:3;
  width:34px; height:34px; display:grid; place-items:center; border-radius:11px;
  background:rgba(8,11,14,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.13); color:var(--text-2);
  opacity:0; transform:scale(.85); transition:all .24s ease;
}
.prod-card:hover .card-wish,
.card-wish.on{opacity:1; transform:scale(1);}
.card-wish svg{width:16px; height:16px;}
.card-wish.on{color:#FF6B8B; border-color:rgba(255,107,139,.4); background:rgba(255,107,139,.15);}
.card-wish.bump svg{animation:mpHeartPop .45s cubic-bezier(.3,1.5,.5,1);}

/* ============================================================
   پاپ‌آپ اشتراک‌گذاری
   ============================================================ */
.share-pop{
  position:fixed; top:50%; inset-inline-start:50%; transform:translate(50%,-50%) scale(.94);
  width:min(340px,92vw); z-index:96; padding:22px 20px 20px; border-radius:20px;
  background:rgba(11,14,18,.98); backdrop-filter:blur(24px);
  border:1px solid var(--glass-border); box-shadow:0 30px 90px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .26s ease, transform .28s cubic-bezier(.2,.9,.3,1.2);
}
html[dir="ltr"] .share-pop{transform:translate(-50%,-50%) scale(.94);}
.share-pop.open{opacity:1; pointer-events:auto; transform:translate(50%,-50%) scale(1);}
html[dir="ltr"] .share-pop.open{transform:translate(-50%,-50%) scale(1);}
.share-pop h3{font-size:.98rem; font-weight:700; margin-bottom:4px;}
.share-pop > p{font-size:.76rem; color:var(--text-3); margin-bottom:17px;}
.share-net{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:15px;}
.share-net a{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px;
  border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); font-size:.72rem; color:var(--text-2);
  transition:all .24s cubic-bezier(.3,1.3,.5,1);
}
.share-net a svg{width:23px; height:23px; color:var(--cyan);}
.share-net a:hover{
  transform:translateY(-3px); color:var(--cyan);
  border-color:rgba(46,230,245,.34); background:rgba(46,230,245,.08);
}
.copy-row{display:flex; gap:8px;}
.copy-row input{
  flex:1; height:42px; border-radius:12px; padding:0 12px; font-size:.76rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:var(--text-2); font-family:'JetBrains Mono',monospace; direction:ltr; text-align:left;
}
.copy-row button{
  flex-shrink:0; height:42px; padding:0 16px; border-radius:12px; font-size:.82rem; font-weight:600;
  background:linear-gradient(135deg,rgba(46,230,245,.9),rgba(11,114,133,.95));
  color:#04252B; transition:transform .18s;
}
.copy-row button:active{transform:scale(.95);}

/* ============================================================
   دیدگاه‌ها
   ============================================================ */
.review-list{display:flex; flex-direction:column; gap:13px; margin-top:18px;}
.review{padding:17px 18px; border-radius:16px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); animation:mpFadeUp .4s ease both;}
.review-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.review-head b{font-size:.87rem;}
.review-head .when{font-size:.72rem; color:var(--text-3); margin-inline-start:auto;}
.tag-buyer{font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:20px;
  background:rgba(46,213,115,.14); color:#2ED573; border:1px solid rgba(46,213,115,.28);}
.review-body{font-size:.86rem; line-height:2; color:var(--text-2);}
.review-pc{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:12px;}
@media (max-width:560px){ .review-pc{grid-template-columns:1fr;} }
.review-pc div{font-size:.78rem; line-height:1.9;}
.review-pc .rp{color:#2ED573;} .review-pc .rc{color:#FF6B6B;}
.review-pc ul{list-style:none; margin-top:5px; color:var(--text-2);}
.review-pc li{display:flex; gap:6px;}
.review-pc li::before{content:'—'; opacity:.5;}
.review-reply{margin-top:11px; padding:11px 13px; border-radius:12px;
  background:rgba(46,230,245,.06); border-inline-start:2.5px solid var(--cyan);
  font-size:.79rem; line-height:1.9; color:var(--text-2);}
.review-del{margin-inline-start:8px; color:var(--text-3); font-size:.72rem;}
.review-del:hover{color:var(--danger);}

.review-form{padding:19px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09); margin-top:18px;}
.review-gate{padding:22px; border-radius:18px; text-align:center;
  background:rgba(46,230,245,.05); border:1px dashed rgba(46,230,245,.28);}
.review-gate p{font-size:.85rem; color:var(--text-2); margin-bottom:13px; line-height:1.9;}

/* ============================================================
   تاریخچه جستجو
   ============================================================ */
.sr-section{padding:6px 4px 2px;}
.sr-section-head{display:flex; align-items:center; justify-content:space-between;
  padding:4px 9px 8px; font-size:.72rem; color:var(--text-3); font-weight:600;}
.sr-section-head button{font-size:.7rem; color:var(--text-3);}
.sr-section-head button:hover{color:var(--danger);}
.sr-hist{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  font-size:.84rem; color:var(--text-2); transition:background .18s; cursor:pointer; width:100%;}
.sr-hist:hover{background:rgba(255,255,255,.05); color:var(--text-1);}
.sr-hist svg{width:15px; height:15px; color:var(--text-3); flex-shrink:0;}
.sr-hist .x{margin-inline-start:auto; opacity:.45; padding:3px;}
.sr-hist .x:hover{opacity:1; color:var(--danger);}

/* ============================================================
   آدرس‌ها
   ============================================================ */
.addr-list{display:flex; flex-direction:column; gap:9px;}
.addr-card{
  position:relative; display:block; width:100%; text-align:start;
  padding:13px 15px; padding-inline-end:74px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.09);
  transition:border-color .22s, background .22s, box-shadow .22s;
}
.addr-card:hover{border-color:rgba(46,230,245,.28); background:rgba(46,230,245,.04);}
.addr-card.on{border-color:var(--cyan); background:rgba(46,230,245,.07);
  box-shadow:inset 0 0 0 1px rgba(46,230,245,.35);}

/* svgهای بدون width/height نباید کادر را کش بدهند */
.addr-card svg{width:14px; height:14px; flex-shrink:0;}

.addr-card .ttl{
  display:flex; align-items:center; gap:7px; font-size:.83rem; font-weight:700;
  margin-bottom:5px; line-height:1.5;
}
.addr-card .ttl svg{color:var(--cyan);}
.addr-card .body{
  display:block; font-size:.76rem; color:var(--text-2); line-height:1.75;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.addr-card .who{
  display:flex; align-items:center; gap:6px; font-size:.71rem; color:var(--text-3); margin-top:6px;
}
.addr-card .acts{position:absolute; top:10px; inset-inline-end:10px; display:flex; gap:4px;}
.addr-card .acts [role="button"]{
  width:26px; height:26px; display:grid; place-items:center; cursor:pointer;
  border-radius:8px; background:rgba(255,255,255,.05); color:var(--text-3); transition:all .18s;
}
.addr-card .acts svg{width:12px; height:12px;}
.addr-card .acts [role="button"]:hover{background:rgba(46,230,245,.14); color:var(--cyan);}
.addr-card .acts .del:hover{background:rgba(255,107,107,.14); color:var(--danger);}
@media (max-width:520px){
  .addr-card{padding:11px 13px; padding-inline-end:66px;}
  .addr-card .ttl{font-size:.79rem;}
  .addr-card .body{font-size:.73rem;}
}
.tag-default{font-size:.63rem; font-weight:700; padding:2px 8px; border-radius:20px;
  background:rgba(46,230,245,.14); color:var(--cyan); border:1px solid rgba(46,230,245,.28);}

/* انتخاب تحویل‌گیرنده */
.receiver-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px;}
.receiver-pick button{
  padding:13px 10px; border-radius:13px; font-size:.85rem; font-weight:600; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
  transition:all .24s cubic-bezier(.3,1.3,.5,1);
}
.receiver-pick button:hover{transform:translateY(-2px); border-color:rgba(46,230,245,.3);}
.receiver-pick button.on{
  border-color:var(--cyan); color:var(--cyan);
  background:linear-gradient(135deg,rgba(46,230,245,.16),rgba(11,114,133,.2));
}
.slide-fields{overflow:hidden; max-height:0; opacity:0;
  transition:max-height .38s cubic-bezier(.3,1,.4,1), opacity .28s ease, margin .3s ease;}
.slide-fields.open{max-height:260px; opacity:1; margin-top:12px;}

/* ============================================================
   تسویه حساب
   ============================================================ */
.checkout-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:26px; align-items:start;}
@media (max-width:900px){ .checkout-grid{grid-template-columns:1fr;} }
.co-step{padding:20px; border-radius:20px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09); margin-bottom:16px;}
.co-step > h3{display:flex; align-items:center; gap:10px; font-size:.94rem; font-weight:700; margin-bottom:15px;}
.co-step .num{width:26px; height:26px; display:grid; place-items:center; border-radius:9px;
  background:rgba(46,230,245,.14); color:var(--cyan); font-size:.8rem; font-weight:800;}
.co-summary{position:sticky; top:calc(var(--header-h) + 16px); padding:21px; border-radius:20px;}
.co-line{display:flex; justify-content:space-between; align-items:center;
  font-size:.86rem; padding:9px 0; color:var(--text-2);}
.co-line.total{font-size:1.05rem; font-weight:800; color:var(--text-1);
  border-top:1px solid rgba(255,255,255,.1); margin-top:8px; padding-top:15px;}
.co-line .off{color:#2ED573;}
.coupon-row{display:flex; gap:8px; margin:14px 0;}
.coupon-row input{flex:1; height:42px; border-radius:12px; padding:0 13px; font-size:.85rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--text-1);}
.coupon-row button{flex-shrink:0; height:42px; padding:0 16px; border-radius:12px;
  font-size:.83rem; font-weight:600; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); color:var(--text-1); transition:all .2s;}
.coupon-row button:hover{border-color:rgba(46,230,245,.35); color:var(--cyan);}
.pay-list{display:flex; flex-direction:column; gap:9px;}
.pay-opt{display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.1);
  font-size:.86rem; font-weight:600; transition:all .24s cubic-bezier(.3,1.2,.5,1); width:100%; text-align:start;}
.pay-opt:hover{transform:translateY(-2px); border-color:rgba(46,230,245,.3);}
.pay-opt.on{border-color:var(--cyan); background:rgba(46,230,245,.08);}
.pay-opt .dot{width:17px; height:17px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(255,255,255,.22); transition:all .22s;}
.pay-opt.on .dot{border-color:var(--cyan); box-shadow:inset 0 0 0 4px var(--cyan);}

/* موفقیت سفارش */
.order-done{text-align:center; padding:46px 24px; border-radius:24px;}
.order-done .tick{width:76px; height:76px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; color:#2ED573;
  background:rgba(46,213,115,.12); border:2px solid rgba(46,213,115,.3);
  animation:mpRing 1.4s ease-out .2s, mpPop .5s cubic-bezier(.3,1.5,.5,1);}
.order-done .tick svg{width:38px; height:38px;}
.order-done .code{display:inline-block; margin:16px 0 8px; padding:13px 26px; border-radius:15px;
  font-family:'JetBrains Mono',monospace; font-size:1.25rem; font-weight:700; letter-spacing:2px;
  color:var(--cyan); background:rgba(46,230,245,.1); border:1px dashed rgba(46,230,245,.4);}

/* ============================================================
   فوتر — نمادهای اعتماد
   ============================================================ */
.trust-row{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  padding-top:22px; margin-top:24px; border-top:1px solid rgba(255,255,255,.07);
}
.trust-badge{
  display:flex; align-items:center; gap:10px; padding:10px 15px; border-radius:15px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  transition:all .26s cubic-bezier(.3,1.2,.5,1); min-width:118px;
}
.trust-badge:hover{transform:translateY(-3px); border-color:rgba(46,230,245,.32);
  background:rgba(46,230,245,.06);}
.trust-badge svg{width:28px; height:28px; flex-shrink:0; color:var(--cyan);}
.trust-badge span{display:flex; flex-direction:column; line-height:1.5;}
.trust-badge b{font-size:.76rem; font-weight:700; color:var(--text-1);}
.trust-badge small{font-size:.63rem; color:var(--text-3);}
.trust-badge.off{opacity:.5; cursor:default;}
.trust-badge.off:hover{transform:none; border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.035);}

@media (max-width:560px){
  .trust-row{gap:9px;}
  .trust-badge{flex:1 1 calc(50% - 5px); min-width:0; padding:9px 11px;}
  .trust-badge svg{width:24px; height:24px;}
  .trust-badge b{font-size:.72rem;}
  .trust-badge small{font-size:.6rem;}
}

/* ============================================================
   صفحات راهنما (مرجوعی، حمل و نقل)
   ============================================================ */
.info-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin:22px 0;}
.info-card{padding:19px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09); animation:mpFadeUp .4s ease both;}
.info-card .ic{width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:rgba(46,230,245,.1); color:var(--cyan); margin-bottom:13px;}
.info-card .ic svg{width:21px; height:21px;}
.info-card h4{font-size:.9rem; font-weight:700; margin-bottom:8px;}
.info-card p{font-size:.81rem; color:var(--text-2); line-height:2;}
.rule-list{display:flex; flex-direction:column; gap:11px; margin:18px 0;}
.rule{display:flex; gap:12px; padding:14px 16px; border-radius:15px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);}
.rule .n{width:24px; height:24px; flex-shrink:0; border-radius:8px; display:grid; place-items:center;
  background:rgba(46,230,245,.12); color:var(--cyan); font-size:.75rem; font-weight:800;}
.rule p{font-size:.83rem; color:var(--text-2); line-height:2;}

/* ============================================================
   لیست علاقه‌مندی خالی و حالت‌های خالی
   ============================================================ */
.empty-state{text-align:center; padding:56px 22px;}
.empty-state svg{width:56px; height:56px; color:rgba(46,230,245,.28); margin-bottom:16px;}
.empty-state h4{font-size:1rem; font-weight:700; margin-bottom:8px;}
.empty-state p{font-size:.85rem; color:var(--text-3); margin-bottom:18px; line-height:1.9;}

/* اسکلت بارگذاری */
.skel{border-radius:16px; background:linear-gradient(90deg,
  rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
  background-size:200% 100%; animation:mpShimmer 1.5s infinite linear;}

/* ============================================================
   تب‌های حساب کاربری
   ============================================================ */
.acct-tabs{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  padding:4px 2px 8px; margin-bottom:20px;
}
.acct-tabs::-webkit-scrollbar{display:none;}
.acct-tabs button{
  flex:0 0 auto; position:relative; isolation:isolate; overflow:visible;
  padding:9px 16px; border-radius:12px; font-size:.83rem; font-weight:600; white-space:nowrap;
  color:var(--text-2); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  transition:color .22s ease, border-color .26s ease;
}
/* پس‌زمینه‌ی متحرک به‌جای جابه‌جایی عمودی، تا در نوار افقی بریده نشود */
.acct-tabs button::after{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,rgba(46,230,245,.2),rgba(11,114,133,.26));
  opacity:0; transform:scale(.78);
  transition:opacity .26s ease, transform .32s cubic-bezier(.3,1.5,.5,1);
}
.acct-tabs button:hover{color:var(--text-1); border-color:rgba(46,230,245,.28);}
.acct-tabs button:active{transform:scale(.96);}
.acct-tabs button.on{
  color:var(--cyan); border-color:rgba(46,230,245,.45);
  box-shadow:inset 0 0 0 1px rgba(46,230,245,.25);
}
.acct-tabs button.on::after{opacity:1; transform:scale(1);}
@media (max-width:520px){
  .acct-tabs button{padding:8px 13px; font-size:.79rem;}
}

/* ============================================================
   مسیر راهنما (breadcrumb) — جایگزین دکمه برگشت
   ============================================================ */
.crumb{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-bottom:20px; font-size:.79rem; color:var(--text-3);
  padding:9px 14px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
}
.crumb a{color:var(--text-2); transition:color .18s;}
.crumb a:hover{color:var(--cyan);}
.crumb-home{display:inline-flex; align-items:center; gap:6px;}
.crumb-home svg{width:14px; height:14px;}
.crumb-sep{display:inline-flex; opacity:.35;}
.crumb-sep svg{width:12px; height:12px;}
html[dir="ltr"] .crumb-sep svg{transform:scaleX(-1);}
.crumb-now{color:var(--text-1); font-weight:600;
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:560px){
  .crumb{font-size:.74rem; padding:8px 11px; gap:5px;}
  .crumb-now{max-width:130px;}
  .crumb-home span{display:none;}
}

/* ============================================================
   گالری اسلایدری
   ============================================================ */
.gallery-main{overflow:hidden; cursor:grab; user-select:none; outline:none;}
.gallery-main:active{cursor:grabbing;}
.gallery-main:focus-visible{box-shadow:0 0 0 3px rgba(46,230,245,.3);}
/* در RTL چیدمان پیش‌فرض flex اسلاید اول را سمت راست می‌گذارد — نیازی به row-reverse نیست */
.gal-track{display:flex; width:100%; height:100%; will-change:transform;}
.gal-slide{flex:0 0 100%; width:100%; height:100%; display:grid; place-items:center; overflow:hidden;
  direction:inherit;}
.gal-slide img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
.gal-slide .ph{width:36%; color:rgba(46,230,245,.4);}

.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:rgba(8,11,14,.62); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); color:var(--text-1);
  opacity:0; transition:all .24s ease;
}
.gal-nav svg{width:19px; height:19px;}
.gallery-main:hover .gal-nav{opacity:1;}
.gal-nav:hover{background:rgba(46,230,245,.85); color:#04252B; border-color:transparent;}
.gal-nav:disabled{opacity:0 !important; pointer-events:none;}
.gal-nav.prev{inset-inline-start:12px;}
.gal-nav.next{inset-inline-end:12px; transform:translateY(-50%) scaleX(-1);}
html[dir="ltr"] .gal-nav.prev{transform:translateY(-50%) scaleX(1);}
html[dir="ltr"] .gal-nav.next{transform:translateY(-50%) scaleX(-1);}

.gal-dots{
  position:absolute; inset-inline:0; bottom:13px; z-index:3;
  display:flex; justify-content:center; gap:7px;
}
.gal-dots button{
  width:7px; height:7px; border-radius:20px; background:rgba(255,255,255,.35);
  transition:all .28s cubic-bezier(.3,1.4,.5,1);
}
.gal-dots button.on{width:22px; background:var(--cyan);}

.gal-count{
  position:absolute; top:12px; inset-inline-end:12px; z-index:3;
  font-size:.7rem; font-weight:600; padding:4px 10px; border-radius:20px;
  background:rgba(8,11,14,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12); color:var(--text-2);
  font-family:'JetBrains Mono',monospace;
}

@media (max-width:900px){
  .gal-nav{opacity:1; width:34px; height:34px;}
  .gal-nav svg{width:16px; height:16px;}
}

/* ============================================================
   امتیازدهی با عدد
   ============================================================ */
.rate-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.rate-num{
  display:inline-flex; align-items:baseline; gap:3px; padding:7px 13px; border-radius:12px;
  background:rgba(245,196,81,.1); border:1px solid rgba(245,196,81,.26);
}
.rate-num b{font-size:1.28rem; font-weight:800; color:#F5C451; line-height:1;}
.rate-num small{font-size:.75rem; color:rgba(245,196,81,.6);}
.rate-num em{
  font-style:normal; font-size:.75rem; color:var(--text-2);
  margin-inline-start:8px; padding-inline-start:9px;
  border-inline-start:1px solid rgba(245,196,81,.25);
}

/* ============================================================
   مرجوعی — بررسی دو مرحله‌ای
   ============================================================ */
.hint-line{
  font-size:.79rem; color:var(--text-3); line-height:1.9; margin-bottom:16px;
  padding:11px 14px; border-radius:12px;
  background:rgba(46,230,245,.05); border-inline-start:2.5px solid rgba(46,230,245,.4);
}
.ret-msg{
  display:none; align-items:flex-start; gap:10px; margin-top:14px;
  padding:13px 15px; border-radius:14px; font-size:.83rem; line-height:1.85;
}
.ret-msg.show{display:flex; animation:mpFadeUp .32s ease;}
.ret-msg svg{width:18px; height:18px; flex-shrink:0; margin-top:2px;}
.ret-msg.ok{background:rgba(46,213,115,.08); border:1px solid rgba(46,213,115,.28); color:#2ED573;}
.ret-msg.err{background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.28); color:#FF6B6B;}
.ret-msg.warn{background:rgba(255,184,76,.08); border:1px solid rgba(255,184,76,.28); color:#FFB84C;}

.ret-form{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .45s cubic-bezier(.3,1,.4,1), opacity .3s ease, margin .3s ease;
}
.ret-form.open{max-height:760px; opacity:1; margin-top:18px;}
.ret-items{
  padding:13px 15px; border-radius:13px; margin-bottom:16px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
}
.ret-items b{font-size:.79rem; color:var(--text-2); display:block; margin-bottom:8px;}
.ret-items ul{list-style:none; display:flex; flex-direction:column; gap:6px;}
.ret-items li{font-size:.82rem; color:var(--text-1);}
.ret-items .muted{color:var(--text-3); font-size:.75rem;}

/* ============================================================
   بنرهای تبلیغاتی
   ============================================================ */
.banner-slot{display:none;}
.banner-slot.has{display:block; margin:34px auto; max-width:1220px; padding:0 24px;}
@media (max-width:640px){ .banner-slot.has{margin:24px auto; padding:0 16px;} }

.bn-slider{
  position:relative; overflow:hidden; border-radius:20px; cursor:grab; user-select:none;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
}
.bn-slider:active{cursor:grabbing;}
.bn-track{display:flex; will-change:transform;}
.bn-slide{
  position:relative; flex:0 0 100%; display:block; aspect-ratio:1200/300;
  overflow:hidden; text-decoration:none;
}
html[dir="rtl"] .bn-slide{direction:rtl;}
@media (max-width:760px){ .bn-slide{aspect-ratio:16/9;} }
.bn-slide img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
.bn-fallback{
  position:absolute; inset:0; display:grid; place-items:center; color:rgba(46,230,245,.35);
  background:linear-gradient(135deg,rgba(46,230,245,.1),rgba(255,255,255,.02));
}
.bn-fallback svg{width:60px; height:60px;}
.bn-text{
  position:absolute; inset-inline-start:0; inset-block-end:0; width:100%;
  padding:26px 28px 24px; display:flex; flex-direction:column; gap:6px;
  background:linear-gradient(transparent, rgba(4,6,8,.86));
}
.bn-text b{font-size:1.15rem; font-weight:800; color:#fff;}
.bn-text em{font-style:normal; font-size:.85rem; color:rgba(255,255,255,.78); line-height:1.8;}
@media (max-width:640px){
  .bn-text{padding:16px 17px 15px;}
  .bn-text b{font-size:.95rem;}
  .bn-text em{font-size:.76rem;}
}

.bn-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(8,11,14,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); color:#fff; opacity:0; transition:all .24s;
}
.bn-nav svg{width:18px; height:18px;}
.bn-slider:hover .bn-nav{opacity:1;}
.bn-nav:hover{background:rgba(46,230,245,.85); color:#04252B;}
.bn-nav.prev{inset-inline-start:12px;}
.bn-nav.next{inset-inline-end:12px; transform:translateY(-50%) scaleX(-1);}
html[dir="ltr"] .bn-nav.prev{transform:translateY(-50%) scaleX(1);}
html[dir="ltr"] .bn-nav.next{transform:translateY(-50%) scaleX(-1);}
@media (max-width:760px){ .bn-nav{opacity:1; width:32px; height:32px;} .bn-nav svg{width:15px;height:15px;} }

.bn-dots{position:absolute; inset-inline:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:7px;}
.bn-dots button{width:7px; height:7px; border-radius:20px; background:rgba(255,255,255,.4);
  transition:all .28s cubic-bezier(.3,1.4,.5,1);}
.bn-dots button.on{width:22px; background:var(--cyan);}

/* ============================================================
   نمادهای اعتماد در ستون برند فوتر
   ============================================================ */
.trust-row{
  display:flex; gap:9px; flex-wrap:wrap; align-items:stretch;
  margin-top:18px; padding-top:0; border-top:none; max-width:290px;
}
.trust-badge{
  flex:1 1 auto; min-width:0; gap:8px; padding:9px 11px; border-radius:13px;
}
.trust-badge svg{width:23px; height:23px;}
.trust-badge b{font-size:.71rem;}
.trust-badge small{font-size:.6rem;}
@media (max-width:560px){
  .trust-row{max-width:none; gap:8px;}
  .trust-badge{flex:1 1 calc(33.333% - 6px); padding:9px 7px; flex-direction:column;
    text-align:center; gap:5px;}
  .trust-badge svg{width:21px; height:21px;}
  .trust-badge b{font-size:.67rem;}
  .trust-badge small{font-size:.56rem;}
}

/* ============================================================
   فیلترها — بهینه برای موبایل
   ============================================================ */
.chip-scroll{padding:3px 2px 5px !important;}

.filter-toggle{display:none;}

@media (max-width:820px){
  .filter-bar{padding:0; border:none; background:none; margin-bottom:18px;}

  /* دکمه باز/بسته کردن فیلترها */
  .filter-toggle{
    display:flex; align-items:center; gap:9px; width:100%;
    padding:12px 15px; border-radius:14px; font-size:.86rem; font-weight:600;
    color:var(--text-1); background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1); transition:all .22s;
  }
  .filter-toggle > svg:first-child{width:17px; height:17px; color:var(--cyan);}
  .filter-toggle .caret{margin-inline-start:auto; width:14px; height:14px;
    color:var(--text-3); transition:transform .3s cubic-bezier(.3,1,.4,1);}
  .filter-toggle.open .caret{transform:rotate(90deg);}
  .filter-toggle .fcount{
    font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px;
    background:rgba(46,230,245,.16); color:var(--cyan); border:1px solid rgba(46,230,245,.3);
  }

  /* دسته‌بندی‌ها همیشه دیده می‌شوند (نوار افقی جمع‌وجور) */
  .filter-bar > .filter-row:first-child{
    margin:0 0 10px; padding:0; border:none;
  }
  .filter-bar .chip{padding:7px 13px; font-size:.8rem;}

  /* بقیه فیلترها جمع می‌شوند */
  .filter-collapse{
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .38s cubic-bezier(.3,1,.4,1), opacity .26s ease, margin .3s ease;
  }
  .filter-collapse.open{max-height:420px; opacity:1; margin-top:10px;}

  .filter-bar .filter-row + .filter-row{
    margin-top:0; padding-top:0; border-top:none;
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    padding:14px; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  }
  .filter-bar .field{
    padding:8px 11px; border-radius:11px; font-size:.8rem;
    flex-direction:column; align-items:flex-start; gap:3px;
  }
  .filter-bar .field label{font-size:.68rem;}
  .filter-bar .field select,
  .filter-bar .field input{font-size:.82rem; width:100%;}
  .filter-bar .switch{grid-column:1/-1; padding:4px 2px;}
  .filter-bar .result-count{
    grid-column:1/-1; margin:0; text-align:center; font-size:.78rem;
    padding-top:9px; border-top:1px solid rgba(255,255,255,.07);
  }
  .filter-bar .btn{grid-column:1/-1; padding:9px; font-size:.82rem;}
}

@media (max-width:420px){
  .filter-bar .filter-row + .filter-row{grid-template-columns:1fr;}
}

/* ============================================================
   فیلد با لیبل شناور
   ============================================================ */
.ff-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.ff-grid .wide{grid-column:1/-1;}
@media (max-width:560px){ .ff-grid{grid-template-columns:1fr;} }

.ff{position:relative; display:block;}
.ff input, .ff textarea, .ff select{
  width:100%; padding:23px 14px 8px; border-radius:13px; font-size:.88rem;
  font-family:inherit; color:var(--text-1); outline:none;
  background:rgba(255,255,255,.045); border:1.5px solid rgba(255,255,255,.11);
  transition:border-color .22s, background .22s, box-shadow .22s;
  appearance:none;
}
.ff.has-ic input, .ff.has-ic textarea, .ff.has-ic select{padding-inline-start:42px;}
.ff textarea{resize:vertical; min-height:88px; line-height:1.85;}
.ff select{cursor:pointer; padding-inline-end:38px;}
.ff select option{background:#0D1116; color:var(--text-1);}

.ff-lbl{
  position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  font-size:.87rem; color:var(--text-3); pointer-events:none;
  transition:all .2s cubic-bezier(.3,1,.4,1); max-width:calc(100% - 28px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ff.has-ic .ff-lbl{inset-inline-start:42px;}
.ff textarea ~ .ff-lbl{top:24px; transform:none;}

.ff input:focus ~ .ff-lbl,
.ff textarea:focus ~ .ff-lbl,
.ff select:focus ~ .ff-lbl,
.ff.filled .ff-lbl{
  top:7px; transform:none; font-size:.64rem; line-height:1.2; font-weight:600; color:var(--cyan);
}
.ff input:focus, .ff textarea:focus, .ff select:focus{
  border-color:rgba(46,230,245,.55); background:rgba(46,230,245,.05);
  box-shadow:0 0 0 3px rgba(46,230,245,.1);
}
.ff input:disabled, .ff textarea:disabled{opacity:.55; cursor:not-allowed;}

.ff-ic{
  position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-3); pointer-events:none;
}
.ff-ic svg{width:100%; height:100%;}
.ff textarea ~ .ff-ic{top:24px; transform:none;}
.ff-caret{
  position:absolute; inset-inline-end:13px; top:50%; transform:translateY(-50%) rotate(90deg);
  width:13px; height:13px; color:var(--text-3); pointer-events:none;
}
.ff-caret svg{width:100%; height:100%;}
.ff-hint{
  display:block; font-size:.68rem; color:var(--text-3); margin-top:5px; padding-inline-start:3px;
  opacity:0; max-height:0; transition:opacity .2s, max-height .2s;
}
.ff input:focus ~ .ff-hint, .ff textarea:focus ~ .ff-hint{opacity:1; max-height:34px;}

.ff-check{
  display:flex; align-items:center; gap:9px; margin-top:14px;
  font-size:.83rem; color:var(--text-2); cursor:pointer;
}
.ff-check input{position:absolute; opacity:0; pointer-events:none;}
.ff-check .bx{
  width:20px; height:20px; flex-shrink:0; border-radius:7px; display:grid; place-items:center;
  border:1.6px solid rgba(255,255,255,.22); color:transparent; transition:all .18s;
}
.ff-check .bx svg{width:11px; height:11px;}
.ff-check input:checked + .bx{background:var(--cyan); border-color:var(--cyan); color:#04252B;}

/* تحویل‌گیرنده */
.rec-block{margin-top:18px;}
.rec-q{display:block; font-size:.82rem; font-weight:600; color:var(--text-2); margin-bottom:9px;}
.receiver-pick button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 10px; font-size:.84rem;
}
.receiver-pick button svg{width:16px; height:16px;}
.slide-fields.open{max-height:300px;}

/* ============================================================
   دکمه خرید با استپر تعداد
   ============================================================ */
.buy-row{display:flex; gap:9px; align-items:center; margin-top:22px; flex-wrap:wrap;}
.buy-row .btn{flex:1; min-width:150px; display:flex; align-items:center; justify-content:center; gap:8px;}
.buy-row .btn svg{width:17px; height:17px;}
.buy-row .go-cart{flex:0 1 auto; min-width:120px;}

.qty-stepper{
  display:flex; align-items:center; gap:2px; flex:1; min-width:140px; height:46px;
  border-radius:13px; padding:4px;
  background:rgba(46,230,245,.09); border:1.5px solid rgba(46,230,245,.34);
}
.qty-stepper button{
  width:38px; height:100%; display:grid; place-items:center; border-radius:10px;
  color:var(--cyan); transition:background .18s;
}
.qty-stepper button svg{width:15px; height:15px;}
.qty-stepper button:hover:not(:disabled){background:rgba(46,230,245,.18);}
.qty-stepper button:disabled{opacity:.35; cursor:not-allowed;}
.qty-stepper .qv{
  flex:1; text-align:center; font-size:1rem; font-weight:800; color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
@media (max-width:520px){
  .buy-row .btn, .qty-stepper{min-width:0;}
  .buy-row .go-cart{flex:1 1 100%;}
}

/* ============================================================
   ردیف افقی محصولات (پروموشن)
   ============================================================ */
.hscroll{position:relative; margin:0 -6px;}
.hs-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity;
  /* فضای بالا و پایین لازم است وگرنه هاورِ کارت‌ها از کادر بریده می‌شود */
  padding:14px 6px 16px; scrollbar-width:none;
}
.hs-track::-webkit-scrollbar{display:none;}
.hs-cell{flex:0 0 246px; scroll-snap-align:start;}
.hs-cell .prod-card{height:100%;}
@media (max-width:640px){ .hs-cell{flex:0 0 200px;} }
@media (max-width:400px){ .hs-cell{flex:0 0 172px;} }

.hs-nav{
  position:absolute; top:38%; z-index:4;
  width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  background:rgba(10,13,17,.9); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); color:var(--text-1);
  opacity:0; transition:all .24s ease;
}
.hs-nav svg{width:17px; height:17px;}
.hscroll:hover .hs-nav{opacity:1;}
.hs-nav:hover{background:rgba(46,230,245,.85); color:#04252B; border-color:transparent;}
.hs-nav:disabled{opacity:0 !important; pointer-events:none;}
.hscroll.no-nav .hs-nav{display:none;}
.hs-nav.prev{inset-inline-start:-4px;}
.hs-nav.next{inset-inline-end:-4px; transform:scaleX(-1);}
html[dir="ltr"] .hs-nav.prev{transform:scaleX(1);}
html[dir="ltr"] .hs-nav.next{transform:scaleX(-1);}
@media (max-width:820px){ .hs-nav{display:none;} }

/* ============================================================
   کارت‌های ردیفی حساب کاربری
   ============================================================ */
.acct-card{
  max-width:560px; padding:20px; border-radius:18px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
}
.acct-card-head{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.acct-card-head svg{width:19px; height:19px; color:var(--cyan);}
.acct-card-head h3{font-size:.95rem; font-weight:700;}
.acct-card .btn{width:100%; margin-top:16px;}

.row-list{display:flex; flex-direction:column; gap:9px;}
.row-card{
  display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:15px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:border-color .22s, transform .22s cubic-bezier(.3,1.2,.5,1), background .22s;
}
.row-card:not(.static):hover{
  border-color:rgba(46,230,245,.3); background:rgba(46,230,245,.05); transform:translateY(-2px);
}
.rc-ic{
  width:40px; height:40px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
  background:rgba(46,230,245,.09); color:var(--cyan); overflow:hidden;
}
.rc-ic svg{width:19px; height:19px;}
.rc-ic img{width:100%; height:100%; object-fit:cover;}
.rc-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.rc-main > b{font-size:.86rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rc-main > b.mono{font-family:'JetBrains Mono',monospace; color:var(--cyan); letter-spacing:.5px;}
.rc-main > span{font-size:.74rem; color:var(--text-3);}
.rc-sub{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rc-sub em{font-style:normal; font-size:.72rem; color:var(--text-3);}
.rc-text{
  font-size:.79rem; color:var(--text-2); line-height:1.85; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rc-reply{
  font-size:.74rem; color:var(--text-2); line-height:1.8; margin-top:6px;
  padding:7px 10px; border-radius:9px;
  background:rgba(46,230,245,.06); border-inline-start:2px solid rgba(46,230,245,.45);
}
.rc-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0;}
.rc-side > b{font-size:.84rem; font-weight:700; white-space:nowrap;}
.rc-go{flex-shrink:0; width:14px; height:14px; color:var(--text-3); opacity:.5;}
.rc-go svg{width:100%; height:100%;}
html[dir="rtl"] .rc-go svg{transform:scaleX(-1);}
.rc-del{
  width:26px; height:26px; display:grid; place-items:center; border-radius:8px;
  color:var(--text-3); transition:all .18s;
}
.rc-del svg{width:13px; height:13px;}
.rc-del:hover{background:rgba(255,107,107,.14); color:var(--danger);}

.pill{
  font-size:.66rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap;
  border:1px solid transparent;
}
.pill.p-ok{background:rgba(46,213,115,.13); color:#2ED573; border-color:rgba(46,213,115,.28);}
.pill.p-warn{background:rgba(255,184,76,.13); color:#FFB84C; border-color:rgba(255,184,76,.28);}
.pill.p-cyan{background:rgba(46,230,245,.13); color:var(--cyan); border-color:rgba(46,230,245,.28);}
.pill.p-off{background:rgba(255,255,255,.06); color:var(--text-3); border-color:rgba(255,255,255,.1);}

@media (max-width:560px){
  .row-card{padding:11px 12px; gap:9px; align-items:flex-start;}
  .rc-ic{width:34px; height:34px; border-radius:10px;}
  .rc-ic svg{width:16px; height:16px;}
  .rc-main > b{font-size:.81rem;}
  .rc-side{gap:5px;}
  .rc-side > b{font-size:.78rem;}
  .rc-go{display:none;}
}

.empty-box{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px;
  padding:38px 22px; border-radius:18px;
  background:rgba(255,255,255,.025); border:1px dashed rgba(255,255,255,.11);
}
.eb-ic{width:44px; height:44px; display:grid; place-items:center; border-radius:14px;
  background:rgba(46,230,245,.08); color:rgba(46,230,245,.6);}
.eb-ic svg{width:21px; height:21px;}
.empty-box b{font-size:.92rem; font-weight:700;}
.empty-box span{font-size:.79rem; color:var(--text-3); line-height:1.85; max-width:330px;}
.empty-box .btn{margin-top:6px;}

.prod-grid.compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
@media (max-width:520px){ .prod-grid.compact{grid-template-columns:1fr 1fr; gap:10px;} }

/* افزودن آدرس */
.add-addr{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-bottom:13px; padding:12px; border-radius:14px; font-size:.86rem;
}
.add-addr svg{width:16px; height:16px;}
.addr-empty{
  display:flex; align-items:center; gap:11px; padding:16px; border-radius:15px; margin-bottom:11px;
  background:rgba(255,255,255,.025); border:1px dashed rgba(255,255,255,.11);
}
.addr-empty svg{width:20px; height:20px; color:var(--text-3); flex-shrink:0;}
.addr-empty b{display:block; font-size:.85rem; margin-bottom:2px;}
.addr-empty span{font-size:.75rem; color:var(--text-3);}

/* دروازه ورود */
.gate-card{
  text-align:center; padding:48px 26px; border-radius:22px; max-width:460px; margin:0 auto;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
}
.gate-ic{
  width:62px; height:62px; margin:0 auto 18px; display:grid; place-items:center; border-radius:20px;
  background:radial-gradient(circle,rgba(46,230,245,.2),transparent 70%);
  border:1px solid rgba(46,230,245,.3); color:var(--cyan);
}
.gate-ic svg{width:26px; height:26px;}
.gate-card h3{font-size:1.1rem; font-weight:800; margin-bottom:9px;}
.gate-card p{font-size:.85rem; color:var(--text-2); line-height:2; margin-bottom:22px;}
.gate-acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ============================================================
   اقدام‌های صفحه پیگیری
   ============================================================ */
.track-acts{
  display:flex; gap:9px; flex-wrap:wrap; margin:16px 0 4px;
  padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
}
.track-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:12px;
  font-size:.83rem; font-weight:600; color:var(--text-1);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.11);
  transition:all .22s cubic-bezier(.3,1.2,.5,1);
}
.track-btn svg{width:15px; height:15px; color:var(--cyan);}
.track-btn em{
  font-style:normal; font-size:.68rem; color:var(--text-3);
  padding-inline-start:8px; margin-inline-start:2px;
  border-inline-start:1px solid rgba(255,255,255,.13);
}
.track-btn:hover{transform:translateY(-2px); border-color:rgba(46,230,245,.35); background:rgba(46,230,245,.07);}
.track-btn.danger svg{color:var(--danger);}
.track-btn.danger:hover{border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.08); color:var(--danger);}
.track-btn.ghost{margin-inline-start:auto;}
.track-note{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  font-size:.79rem; color:var(--text-3); line-height:1.7;
  background:rgba(255,255,255,.025); border:1px dashed rgba(255,255,255,.1);
}
.track-note svg{width:15px; height:15px; flex-shrink:0;}
@media (max-width:560px){
  .track-acts{gap:7px;}
  .track-btn{flex:1 1 auto; justify-content:center; padding:10px 12px; font-size:.79rem;}
  .track-btn.ghost{margin:0; flex-basis:100%;}
}
.sheet-lead{font-size:.83rem; color:var(--text-2); line-height:2; margin-bottom:16px;}

/* ============================================================
   نتایج جستجو: گروه‌ها و دسته‌بندی‌ها
   ============================================================ */
.sr-group + .sr-group{border-top:1px solid rgba(255,255,255,.07); margin-top:6px; padding-top:6px;}
.sr-group-head{
  padding:7px 12px 5px; font-size:.7rem; font-weight:700; color:var(--text-3);
  letter-spacing:.3px;
}
.sr-loading{padding:22px; text-align:center; font-size:.83rem; color:var(--text-3);}
.sr-cats{display:flex; flex-wrap:wrap; gap:7px; padding:2px 10px 10px;}
.sr-cat{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:11px;
  font-size:.8rem; font-weight:600; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  transition:all .2s cubic-bezier(.3,1.3,.5,1);
}
.sr-cat-ic{width:17px; height:17px; color:var(--cyan); opacity:.85; flex-shrink:0;}
.sr-cat-ic svg{width:100%; height:100%;}
.sr-cat em{
  font-style:normal; font-size:.66rem; color:var(--text-3);
  padding:1px 6px; border-radius:20px; background:rgba(255,255,255,.07);
}
.sr-cat:hover{
  color:var(--cyan); border-color:rgba(46,230,245,.34);
  background:rgba(46,230,245,.08); transform:translateY(-2px);
}
.sr-item mark{background:rgba(46,230,245,.22); color:var(--cyan); border-radius:3px; padding:0 2px;}

/* ============================================================
   صفحه پلتفرم‌ها
   ============================================================ */
.plat-intro{padding:26px 24px; border-radius:20px; margin-bottom:32px;}
.plat-intro h3{font-size:1.1rem; font-weight:800; margin-bottom:10px;}
.plat-intro p{font-size:.88rem; color:var(--text-2); line-height:2.1; margin-bottom:18px;}
.plat-facts{display:flex; gap:10px; flex-wrap:wrap;}
.plat-facts span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px;
  font-size:.76rem; color:var(--text-2);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.plat-facts svg{width:15px; height:15px; color:var(--cyan); flex-shrink:0;}
.plat-facts b{font-weight:600;}

.plat-title{font-size:1.15rem; font-weight:800; margin-bottom:6px;}
.plat-sub{font-size:.85rem; color:var(--text-3); margin-bottom:20px;}
.plat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px;}
@media (max-width:520px){ .plat-grid{grid-template-columns:1fr 1fr; gap:10px;} }
@media (max-width:360px){ .plat-grid{grid-template-columns:1fr;} }

.plat-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:20px 18px; border-radius:18px; position:relative; overflow:hidden;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  transition:all .28s cubic-bezier(.3,1.2,.5,1);
}
.plat-card:not(.off):hover{
  transform:translateY(-4px); border-color:rgba(46,230,245,.34); background:rgba(46,230,245,.05);
}
.plat-ic{
  width:46px; height:46px; display:grid; place-items:center; border-radius:14px; margin-bottom:5px;
  background:rgba(46,230,245,.09); color:var(--cyan); overflow:hidden;
}
.plat-ic svg{width:24px; height:24px;}
.plat-ic img{width:100%; height:100%; object-fit:contain; padding:6px;}
.plat-card b{font-size:.95rem; font-weight:700;}
.plat-card em{font-style:normal; font-size:.7rem; color:var(--text-3); letter-spacing:.4px;}
.plat-desc{font-size:.78rem; color:var(--text-2); line-height:1.9; margin-top:4px;}
.plat-go{
  display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:12px;
  font-size:.76rem; font-weight:600; color:var(--cyan);
}
.plat-go svg{width:12px; height:12px;}
html[dir="rtl"] .plat-go svg{transform:scaleX(-1);}
.plat-card.off{opacity:.55;}
.plat-card.off .plat-go{color:var(--text-3);}

.plat-foot{
  margin-top:34px; padding:22px; border-radius:18px; text-align:center;
  background:rgba(46,230,245,.05); border:1px solid rgba(46,230,245,.16);
}
.plat-foot p{font-size:.84rem; color:var(--text-2); margin-bottom:16px; line-height:1.9;}
.plat-foot .btn{margin:0 5px 8px;}
@media (max-width:520px){
  .plat-intro{padding:20px 17px;}
  .plat-card{padding:16px 14px;}
  .plat-ic{width:38px; height:38px;}
  .plat-ic svg{width:20px; height:20px;}
  .plat-card b{font-size:.87rem;}
  .plat-desc{display:none;}
}

/* ============================================================
   اصلاحات عمومی
   ============================================================ */
/* عنصر با hidden نباید به‌خاطر display:flex دیده شود */
[hidden]{display:none !important;}

/* svgهای بدون width/height نباید دکمه‌ها را کش بدهند */
.btn > svg,
.btn-block > svg,
.track-btn > svg,
.add-addr > svg,
.gate-card .btn > svg{width:16px; height:16px; flex-shrink:0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;}

/* ============================================================
   صفحه محصول در موبایل — جلوگیری از بیرون‌زدگی عکس
   ============================================================ */
.prod-layout > *{min-width:0;}
.gallery-main{max-width:100%;}
.gal-track{max-width:100%;}
.gal-slide{min-width:0;}
.gallery-thumbs{max-width:100%;}

@media (max-width:900px){
  .prod-layout{grid-template-columns:minmax(0,1fr);}
  .gallery-main{aspect-ratio:4/3; border-radius:18px;}
  .gallery-thumbs button{width:56px; height:56px; border-radius:12px;}
}
@media (max-width:520px){
  .gallery-main{aspect-ratio:1/1;}
  .gallery-thumbs button{width:50px; height:50px;}
  .gal-count{font-size:.65rem; padding:3px 8px;}
}

/* ============================================================
   بکگراند بلور کارت پلتفرم
   ============================================================ */
.plat-card{overflow:hidden;}
.plat-bg{
  position:absolute; inset:-14px; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(13px) saturate(1.15); opacity:.34;
  transform:scale(1.08); transition:opacity .32s ease, transform .5s ease;
}
.plat-card.has-bg::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(6,9,12,.62), rgba(6,9,12,.86));
}
.plat-card.has-bg:not(.off):hover .plat-bg{opacity:.5; transform:scale(1.14);}
.plat-body{position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:flex-start; gap:7px; width:100%; height:100%;}
.plat-card.has-bg{border-color:rgba(255,255,255,.16);}
.plat-card.has-bg .plat-ic{background:rgba(8,11,14,.55); backdrop-filter:blur(6px);}
.plat-card.has-bg b{text-shadow:0 1px 10px rgba(0,0,0,.6);}

/* نماد اعتماد با لوگوی آپلودی */
.trust-badge img{width:24px; height:24px; object-fit:contain; flex-shrink:0;}

/* ============================================================
   اقدام‌های پیگیری کنار وضعیت سفارش
   ============================================================ */
.track-top-side{
  display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex-shrink:0;
}
.track-acts{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
  margin:0; padding:0; border:none;
}
.track-acts .track-btn{
  padding:7px 11px; font-size:.76rem; border-radius:10px; gap:6px;
}
.track-acts .track-btn svg{width:13px; height:13px;}
.track-acts .track-btn.ghost{margin:0;}
.track-note{
  flex-basis:100%; justify-content:flex-end; text-align:end;
  padding:8px 11px; font-size:.73rem; margin-top:2px;
}
@media (max-width:700px){
  .track-top{flex-direction:column; align-items:stretch; gap:13px;}
  .track-top-side{align-items:stretch;}
  .track-acts{justify-content:flex-start;}
  .track-acts .track-btn{flex:1 1 auto; justify-content:center;}
  .track-note{justify-content:flex-start; text-align:start;}
}

/* ============================================================
   کارت‌های کانال پشتیبانی
   ============================================================ */
.info-card.chan{position:relative; overflow:hidden; display:block;}
.chan-bg{
  position:absolute; inset:-14px; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(13px) saturate(1.15); opacity:.34;
  transform:scale(1.08); transition:opacity .32s ease, transform .5s ease;
}
.chan.has-bg::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(6,9,12,.6), rgba(6,9,12,.87));
}
a.chan.has-bg:hover .chan-bg{opacity:.5; transform:scale(1.14);}
.chan.has-bg{border-color:rgba(255,255,255,.16);}
.chan-body{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start;}
.chan .ii{
  width:42px; height:42px; display:grid; place-items:center; border-radius:13px; margin-bottom:12px;
  background:rgba(46,230,245,.1); color:var(--cyan); overflow:hidden; flex-shrink:0;
}
.chan .ii svg{width:21px; height:21px;}
.chan .ii img{width:100%; height:100%; object-fit:contain; padding:5px;}
.chan.has-bg .ii{background:rgba(8,11,14,.55); backdrop-filter:blur(6px);}
.chan h3{font-size:.92rem; font-weight:700; margin-bottom:7px;}
.chan.has-bg h3{text-shadow:0 1px 10px rgba(0,0,0,.6);}
.chan p{font-size:.8rem; color:var(--text-2); line-height:1.95;}
.chan-val{
  font-family:'JetBrains Mono',monospace; font-size:.87rem !important;
  color:var(--cyan) !important; margin-top:5px;
}
.chan-go{
  display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  font-size:.75rem; font-weight:600; color:var(--cyan);
}
.chan-go svg{width:12px; height:12px;}
html[dir="rtl"] .chan-go svg{transform:scaleX(-1);}
a.chan{transition:transform .26s cubic-bezier(.3,1.2,.5,1), border-color .26s, background .26s;}
a.chan:hover{transform:translateY(-3px); border-color:rgba(46,230,245,.34);}
.chan.plain{cursor:default;}
@media (max-width:520px){
  .chan .ii{width:36px; height:36px; border-radius:11px; margin-bottom:10px;}
  .chan .ii svg{width:18px; height:18px;}
  .chan h3{font-size:.86rem;}
  .chan-val{font-size:.82rem !important;}
}

/* ============================================================
   جلوگیری از بریدگی کارت‌ها هنگام هاور در نوار افقی
   ============================================================ */
.hscroll{margin:-14px -6px -16px;}
.hs-nav{top:50%; transform:translateY(-50%);}
.hs-nav.next{transform:translateY(-50%) scaleX(-1);}
html[dir="ltr"] .hs-nav.prev{transform:translateY(-50%) scaleX(1);}
html[dir="ltr"] .hs-nav.next{transform:translateY(-50%) scaleX(-1);}

/* ============================================================
   موجودی بر اساس ترکیب سایز و رنگ
   ============================================================ */
.stock-line{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;}
.stock-line b{font-weight:800; color:var(--cyan);}
.stock-line b.low{color:#FFB84C;}
.stock-line b.none{color:var(--danger);}
.stock-line .combo{
  font-style:normal; font-size:.72rem; padding:2px 8px; border-radius:20px;
  background:rgba(255,255,255,.06); color:var(--text-2);
}
.stock-line.pop{animation:mpPop .3s cubic-bezier(.3,1.4,.5,1);}

/* گزینه‌های ناموجود */
.size-btn.sold, .color-btn.sold{
  opacity:.42; position:relative;
}
.size-btn.sold::before, .color-btn.sold::before{
  content:''; position:absolute; inset-inline:8px; top:50%;
  height:1.5px; background:var(--danger); opacity:.55; transform:rotate(-8deg);
}
.size-btn.sold:hover, .color-btn.sold:hover{transform:none; border-color:rgba(255,107,107,.4);}
.size-btn.sold.on, .color-btn.sold.on{
  opacity:.7; border-color:rgba(255,107,107,.5); color:var(--danger);
  background:rgba(255,107,107,.08); box-shadow:none;
}

/* ============================================================
   انتخاب اقلام مرجوعی
   ============================================================ */
.ret-items-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;}
.ret-all{
  font-size:.74rem; font-weight:600; color:var(--cyan); padding:4px 10px; border-radius:9px;
  background:rgba(46,230,245,.09); border:1px solid rgba(46,230,245,.24); transition:all .2s;
}
.ret-all:hover{background:rgba(46,230,245,.16);}

.ret-item{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:13px;
  background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.09);
  cursor:pointer; margin-bottom:8px;
  transition:border-color .22s, background .22s;
}
.ret-item:last-child{margin-bottom:0;}
.ret-item:hover{border-color:rgba(46,230,245,.26);}
.ret-item.on{border-color:var(--cyan); background:rgba(46,230,245,.07);}
.ret-item input[type="checkbox"]{position:absolute; opacity:0; pointer-events:none;}
.ret-item .bx{
  width:20px; height:20px; flex-shrink:0; border-radius:7px; display:grid; place-items:center;
  border:1.6px solid rgba(255,255,255,.22); color:transparent; transition:all .18s;
}
.ret-item .bx svg{width:11px; height:11px;}
.ret-item.on .bx{background:var(--cyan); border-color:var(--cyan); color:#04252B;}
.ri-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.ri-main b{font-size:.84rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ri-main em{font-style:normal; font-size:.72rem; color:var(--text-3);}
.ri-price{font-size:.75rem; color:var(--cyan);}
.ri-qty{
  display:flex; align-items:center; gap:3px; flex-shrink:0; padding:3px;
  border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.ri-qty button{
  width:26px; height:26px; display:grid; place-items:center; border-radius:7px;
  color:var(--cyan); transition:background .18s;
}
.ri-qty button svg{width:12px; height:12px;}
.ri-qty button:hover:not(:disabled){background:rgba(46,230,245,.16);}
.ri-qty button:disabled{opacity:.3; cursor:not-allowed;}
.ri-qty b{min-width:22px; text-align:center; font-size:.86rem; font-weight:800; color:var(--cyan);}
.ri-qty small{font-size:.65rem; color:var(--text-3); padding-inline:4px; white-space:nowrap;}

.ret-quick{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.ret-quick .track-btn.ghost{margin-inline-start:auto;}
@media (max-width:560px){
  .ret-item{padding:10px; gap:8px;}
  .ri-main b{font-size:.79rem;}
  .ri-qty small{display:none;}
  .ret-quick .track-btn{flex:1 1 auto; justify-content:center;}
  .ret-quick .track-btn.ghost{margin:0; flex-basis:100%;}
}

/* ============================================================
   انیمیشن تب‌های حساب کاربری و محتوایشان
   ============================================================ */
.acct-tabs{position:relative;}
.acct-tabs button{transform-origin:center;}
.acct-tabs button svg{width:15px; height:15px;}
.acct-tabs button.on{
  animation:tabPick .42s cubic-bezier(.3,1.5,.5,1);
}
@keyframes tabPick{
  0%{transform:scale(.9)}
  55%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.acct-tabs button::before{
  content:''; position:absolute; inset-inline:14px; bottom:3px; height:2px; border-radius:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:center;
  transition:transform .34s cubic-bezier(.3,1.3,.4,1);
}
.acct-tabs button.on::before{transform:scaleX(1);}

/* محتوای تب هنگام تعویض محو و بالا می‌آید */
#acctBody{animation:mpFadeUp .38s cubic-bezier(.22,.9,.3,1) both;}
#acctBody.swapping{opacity:0; transform:translateY(10px); transition:opacity .16s ease, transform .16s ease;}
#acctBody .row-card,
#acctBody .addr-card,
#acctBody .prod-card{
  opacity:0; animation:mpFadeUp .42s cubic-bezier(.22,.9,.3,1) forwards;
}
#acctBody .row-card:nth-child(1),#acctBody .addr-card:nth-child(1){animation-delay:.03s}
#acctBody .row-card:nth-child(2),#acctBody .addr-card:nth-child(2){animation-delay:.07s}
#acctBody .row-card:nth-child(3),#acctBody .addr-card:nth-child(3){animation-delay:.11s}
#acctBody .row-card:nth-child(4),#acctBody .addr-card:nth-child(4){animation-delay:.15s}
#acctBody .row-card:nth-child(5),#acctBody .addr-card:nth-child(5){animation-delay:.19s}
#acctBody .row-card:nth-child(n+6),#acctBody .addr-card:nth-child(n+6){animation-delay:.23s}
#acctBody .acct-card,#acctBody .empty-box{animation:mpFadeUp .4s cubic-bezier(.22,.9,.3,1) both;}

@media (prefers-reduced-motion:reduce){
  .acct-tabs button.on{animation:none;}
  #acctBody,#acctBody *{animation:none !important; opacity:1 !important;}
}

/* ============================================================
   صفحه ۴۰۴
   ============================================================ */
#page-404 .wrap{display:grid; place-items:center; min-height:62vh;}
.nf{text-align:center; max-width:520px; padding:20px 0;}
.nf-art{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:22px;}
.nf-num{font-size:5.2rem; font-weight:800; line-height:1; color:var(--cyan);
  text-shadow:0 0 40px rgba(46,230,245,.3);}
.nf-pix{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:6px;}
.nf-pix i{width:15px; height:15px; border-radius:4px; background:rgba(46,230,245,.22);
  animation:nfBlink 2.6s infinite;}
.nf-pix i:nth-child(1){animation-delay:0s}    .nf-pix i:nth-child(2){animation-delay:.15s}
.nf-pix i:nth-child(3){animation-delay:.3s}   .nf-pix i:nth-child(4){animation-delay:.45s}
.nf-pix i:nth-child(5){animation-delay:.6s}   .nf-pix i:nth-child(6){animation-delay:.75s}
.nf-pix i:nth-child(7){animation-delay:.9s}   .nf-pix i:nth-child(8){animation-delay:1.05s}
.nf-pix i:nth-child(9){animation-delay:1.2s}
@keyframes nfBlink{0%,100%{background:rgba(46,230,245,.18); transform:scale(1)}
  45%{background:var(--cyan); transform:scale(1.14)}}
.nf h2{font-size:1.5rem; font-weight:800; margin-bottom:10px;}
.nf > p{font-size:.88rem; color:var(--text-2); line-height:2; margin-bottom:22px;}
.nf-acts{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:28px;}
.nf-search span{display:block; font-size:.8rem; color:var(--text-3); margin-bottom:10px;}
.nf-box{display:flex; gap:8px; max-width:360px; margin:0 auto;}
.nf-box input{flex:1; height:46px; padding:0 15px; border-radius:13px; font-size:.88rem;
  color:var(--text-1); background:rgba(255,255,255,.045); border:1.5px solid rgba(255,255,255,.11);}
.nf-box input:focus{outline:none; border-color:rgba(46,230,245,.5); background:rgba(46,230,245,.05);}
.nf-box button{width:46px; height:46px; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(135deg,rgba(46,230,245,.9),rgba(11,114,133,.95)); color:#04252B;}
.nf-box button svg{width:19px; height:19px;}
.nf-path{margin-top:20px; font-size:.72rem; color:var(--text-3); font-family:'JetBrains Mono',monospace;}
.nf-path span{padding:3px 10px; border-radius:8px; background:rgba(255,255,255,.05);}
@media (max-width:520px){
  .nf-num{font-size:3.6rem}
  .nf-pix i{width:11px; height:11px}
  .nf h2{font-size:1.2rem}
  .nf-acts .btn{flex:1 1 auto}
}

/* ============================================================
   قوانین و مقررات
   ============================================================ */
.terms{padding:28px 30px; border-radius:20px; max-width:860px;}
.terms h3{font-size:1rem; font-weight:800; color:var(--cyan);
  margin:24px 0 10px; padding-top:18px; border-top:1px solid rgba(255,255,255,.07);}
.terms h3:first-child{margin-top:0; padding-top:0; border-top:none;}
.terms p{font-size:.88rem; color:var(--text-2); line-height:2.15; margin-bottom:11px;}
.terms ul{list-style:none; margin:8px 0 14px; display:flex; flex-direction:column; gap:8px;}
.terms li{display:flex; gap:9px; font-size:.86rem; color:var(--text-2); line-height:2;}
.terms li::before{content:''; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); margin-top:.85em; flex-shrink:0;}
.terms b{color:var(--text-1);}
.terms a{color:var(--cyan);}
.terms-foot{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}
@media (max-width:560px){ .terms{padding:20px 18px;} .terms h3{font-size:.94rem;} }

/* ============================================================
   بازگشت وجه در فرم لغو
   ============================================================ */
.refund-box{margin-top:18px; padding:15px 16px; border-radius:15px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);}
.refund-box.need{background:rgba(255,184,76,.06); border-color:rgba(255,184,76,.26);}
.rb-head{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.rb-head svg{width:16px; height:16px; color:var(--cyan);}
.refund-box.need .rb-head svg{color:#FFB84C;}
.rb-head b{font-size:.85rem; font-weight:700;}
.refund-box > p{font-size:.77rem; color:var(--text-3); line-height:1.9; margin-bottom:13px;}
.refund-box #ckCard{font-family:'JetBrains Mono',monospace; letter-spacing:2px;}

/* ردیف سفارش با دکمه فاکتور */
.order-row{cursor:default;}
.rc-acts{display:flex; gap:5px; flex-shrink:0;}
.rc-btn{width:32px; height:32px; display:grid; place-items:center; border-radius:10px;
  color:var(--text-3); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09); transition:all .2s;}
.rc-btn svg{width:15px; height:15px;}
.rc-btn:hover{color:var(--cyan); border-color:rgba(46,230,245,.34); background:rgba(46,230,245,.09);}
@media (max-width:560px){ .rc-btn{width:29px; height:29px;} .rc-btn svg{width:13px;height:13px;} }

/* ============================================================
   تم روشن — اصلاح جاهایی که سفید روی سفید می‌افتند
   ============================================================ */
html[data-theme="light"] body{
  background:var(--black);
  background-image:radial-gradient(60rem 40rem at 50% -10%, var(--hero-glow), transparent 60%);
}

/* شیشه در تم روشن: سفید نیمه‌شفاف با لبه‌ی تیره */
html[data-theme="light"] .glass{
  background:var(--glass-bg);
  border-color:var(--glass-border);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .glass::before{
  background:linear-gradient(90deg, transparent, rgba(10,139,158,.4), transparent);
}

/* کارت‌ها و ورودی‌ها */
html[data-theme="light"] .prod-card,
html[data-theme="light"] .cat-row,
html[data-theme="light"] .info-card,
html[data-theme="light"] .row-card,
html[data-theme="light"] .addr-card,
html[data-theme="light"] .acct-card,
html[data-theme="light"] .co-step,
html[data-theme="light"] .plat-card,
html[data-theme="light"] .review,
html[data-theme="light"] .rule,
html[data-theme="light"] .empty-box,
html[data-theme="light"] .ret-item,
html[data-theme="light"] .terms{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
html[data-theme="light"] .ff input,
html[data-theme="light"] .ff textarea,
html[data-theme="light"] .ff select,
html[data-theme="light"] .form-field,
html[data-theme="light"] .nf-box input,
html[data-theme="light"] .coupon-row input{
  background:#fff; border-color:var(--line); color:var(--text-1);
}
html[data-theme="light"] .ff input:focus,
html[data-theme="light"] .ff textarea:focus,
html[data-theme="light"] .ff select:focus{
  background:#fff; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-glow);
}
html[data-theme="light"] .ff select option{background:#fff; color:var(--text-1);}

/* دکمه‌ها و چیپ‌ها */
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .chip,
html[data-theme="light"] .size-btn,
html[data-theme="light"] .color-btn,
html[data-theme="light"] .track-btn,
html[data-theme="light"] .tool-btn,
html[data-theme="light"] .acct-tabs button,
html[data-theme="light"] .sr-cat{
  background:#fff; border-color:var(--line); color:var(--text-2);
}
html[data-theme="light"] .btn-primary{color:#fff;}
html[data-theme="light"] .qty-stepper{background:rgba(10,139,158,.07); border-color:rgba(10,139,158,.28);}

/* پنل‌ها و مودال‌ها */
html[data-theme="light"] .side-panel,
html[data-theme="light"] .cart-drawer,
html[data-theme="light"] .account-modal,
html[data-theme="light"] .share-pop,
html[data-theme="light"] #mpSheet,
html[data-theme="light"] .search-results,
html[data-theme="light"] .search-sheet{
  background:rgba(255,255,255,.97);
  border-color:var(--line);
  box-shadow:var(--shadow-lg);
}
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .panel-overlay,
html[data-theme="light"] .cart-overlay{background:var(--scrim);}

/* بج‌ها و برچسب‌ها */
html[data-theme="light"] .badge-cat,
html[data-theme="light"] .pill.p-off,
html[data-theme="light"] .tag-default{background:rgba(10,139,158,.1); color:var(--cyan);}
html[data-theme="light"] .stars .s-off{color:rgba(14,26,29,.16);}
html[data-theme="light"] .prod-visual{
  background:linear-gradient(150deg, rgba(10,139,158,.06), rgba(14,26,29,.02));
}
html[data-theme="light"] .gallery-main{
  background:linear-gradient(150deg, rgba(10,139,158,.07), rgba(14,26,29,.02));
  border-color:var(--line);
}
html[data-theme="light"] footer{background:var(--surface-2); border-top:1px solid var(--line);}
html[data-theme="light"] .hero-blob{opacity:.5;}
html[data-theme="light"] .pixel{background:rgba(10,139,158,.4);}

/* پس‌زمینه بلور کارت‌ها در تم روشن روشن‌تر */
html[data-theme="light"] .plat-card.has-bg::after,
html[data-theme="light"] .chan.has-bg::after{
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.9));
}
html[data-theme="light"] .plat-card.has-bg b,
html[data-theme="light"] .chan.has-bg h3{text-shadow:none;}
html[data-theme="light"] .plat-bg,
html[data-theme="light"] .chan-bg{opacity:.45;}

/* ============================================================
   دکمه تغییر تم
   ============================================================ */
.theme-btn{
  position:relative; width:40px; height:40px; flex-shrink:0;
  display:grid; place-items:center; border-radius:12px;
  background:var(--card-2); border:1px solid var(--line);
  color:var(--text-2); overflow:hidden;
  transition:color .22s, border-color .22s, background .22s;
}
.theme-btn:hover{color:var(--cyan); border-color:var(--cyan-glow); background:var(--card);}
.theme-btn svg{width:18px; height:18px; grid-area:1/1;
  transition:opacity .28s ease, transform .38s cubic-bezier(.3,1.4,.5,1);}
.theme-btn .ic-sun{opacity:0; transform:rotate(-90deg) scale(.6);}
.theme-btn .ic-moon{opacity:1; transform:rotate(0) scale(1);}
html[data-theme="light"] .theme-btn .ic-sun{opacity:1; transform:rotate(0) scale(1);}
html[data-theme="light"] .theme-btn .ic-moon{opacity:0; transform:rotate(90deg) scale(.6);}

/* در پنل همبرگری، روبه‌روی دکمه بستن */
.panel-head-acts{display:flex; align-items:center; gap:8px;}
.panel-head-acts .theme-btn{width:36px; height:36px; border-radius:11px;}
.panel-head-acts .theme-btn svg{width:16px; height:16px;}

/* گذار نرم هنگام تعویض تم — فقط یک بار */
html.theme-switching,
html.theme-switching *{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease !important;
}
@media (prefers-reduced-motion:reduce){
  html.theme-switching, html.theme-switching *{transition:none !important;}
}

/* گزینه‌های غیرقابل انتخاب */
.size-btn:disabled, .color-btn:disabled{
  opacity:.3; cursor:not-allowed; filter:grayscale(.7);
}
.size-btn:disabled:hover, .color-btn:disabled:hover{
  transform:none; border-color:var(--line);
}
.size-btn:disabled::before, .color-btn:disabled::before{opacity:.8;}
.color-btn:disabled .swatch{transform:none;}

/* ============================================================
   بهینه‌سازی موبایل
   backdrop-filter و blur روی GPU موبایل خیلی گران‌اند.
   زیر ۹۰۰px با پس‌زمینه‌ی مات جایگزین می‌شوند — ظاهر تقریباً یکی،
   ولی هر فریم اسکرول ده‌ها میلی‌ثانیه سبک‌تر می‌شود.
   ============================================================ */
@media (max-width:900px){
  .glass,
  .navbar,
  .side-panel,
  .cart-drawer,
  .account-modal,
  .share-pop,
  #mpSheet,
  .search-results,
  .search-sheet,
  .card-wish,
  .gal-nav,
  .gal-count,
  .bn-nav,
  .hs-nav,
  .plat-card.has-bg .plat-ic,
  .chan.has-bg .ii{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .glass,
  .navbar{background:rgba(11,15,19,.94);}
  html[data-theme="light"] .glass,
  html[data-theme="light"] .navbar{background:rgba(255,255,255,.96);}

  .side-panel, .cart-drawer, .account-modal, .share-pop,
  #mpSheet, .search-results, .search-sheet{background:rgba(10,14,18,.985);}
  html[data-theme="light"] .side-panel,
  html[data-theme="light"] .cart-drawer,
  html[data-theme="light"] .account-modal,
  html[data-theme="light"] .share-pop,
  html[data-theme="light"] #mpSheet,
  html[data-theme="light"] .search-results,
  html[data-theme="light"] .search-sheet{background:rgba(255,255,255,.99);}

  .card-wish, .gal-nav, .gal-count, .bn-nav{background:rgba(8,11,14,.8);}

  /* blur پس‌زمینه‌ی کارت‌ها سبک‌تر */
  .plat-bg, .chan-bg{filter:blur(8px) saturate(1.1);}

  /* هیرو: بلاب و پیکسل‌ها سبک‌تر */
  .hero-blob{filter:blur(38px); opacity:.55;}
  .pixel:nth-child(n+8){display:none;}

  /* سایه‌های بزرگ روی موبایل کم‌هزینه‌تر */
  .prod-card, .row-card, .addr-card, .info-card{box-shadow:none;}
}

/* بخش‌های خارج از دید رندر نمی‌شوند تا اسکرول سبک بماند */
@supports (content-visibility: auto){
  /* فوتر عمداً بیرون است: کوچک است و innerText محتوای skip‌شده را خالی برمی‌گرداند */
  .block, .banner-slot.has{
    content-visibility:auto;
    contain-intrinsic-size:auto 420px;
  }
  /* هیرو و هدر همیشه رندر شوند */
  .hero, .navbar, .side-panel{content-visibility:visible;}
}

/* تصاویر تا وارد دید نشده‌اند دانلود نشوند */
.prod-card img, .hs-cell img, .gallery-thumbs img,
.media-item img, .rc-ic img{ content-visibility:auto; }

/* شتاب‌دهی فقط روی چیزهایی که واقعاً حرکت می‌کنند */
.gal-track, .bn-track, .side-panel, .cart-drawer{ will-change:transform; }
.page:not(.active){ content-visibility:hidden; }

@media (prefers-reduced-motion:reduce){
  .hero-blob, .pixel{animation:none !important;}
}

/* ============================================================
   پرداخت
   ============================================================ */
.pay-result{
  display:flex; align-items:flex-start; gap:12px; margin:16px 0 4px;
  padding:15px 17px; border-radius:15px; animation:mpFadeUp .38s ease;
}
.pay-result .pr-ic{width:22px; height:22px; flex-shrink:0;}
.pay-result .pr-ic svg{width:100%; height:100%;}
.pay-result .pr-body{display:flex; flex-direction:column; gap:4px;}
.pay-result b{font-size:.92rem; font-weight:700;}
.pay-result span span{font-size:.79rem; line-height:1.9; opacity:.85;}
.pay-result.ok{background:rgba(46,213,115,.09); border:1px solid rgba(46,213,115,.3); color:#2ED573;}
.pay-result.warn{background:rgba(255,184,76,.09); border:1px solid rgba(255,184,76,.3); color:#FFB84C;}
.pay-result.err{background:rgba(255,107,107,.09); border:1px solid rgba(255,107,107,.3); color:#FF6B6B;}

.track-btn.pay-now{
  background:linear-gradient(135deg, rgba(46,230,245,.92), rgba(11,114,133,.95));
  border-color:transparent; color:#04252B; font-weight:700;
}
.track-btn.pay-now svg{color:#04252B;}
.track-btn.pay-now em{
  border-inline-start-color:rgba(4,37,43,.28); color:#04252B; font-weight:700; opacity:.9;
}
.track-btn.pay-now:hover{filter:brightness(1.08); transform:translateY(-2px);}
.track-btn.pay-now:disabled{opacity:.6; cursor:wait;}