/* ═══════════════════════════════════════════════════════════════
   صفحهٔ سبد خرید — هم‌خوان با صفحهٔ سبد سایت اصلی
   ═══════════════════════════════════════════════════════════════ */

/* حالت سبد خالی */
.cart-empty{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:38px 22px 34px; text-align:center; margin:6px 0 22px;
}
.cart-empty .ce-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:84px; height:84px; border-radius:50%;
  background:var(--teal-50); color:var(--teal-600); margin-bottom:14px;
}
.cart-empty .ce-txt{
  font-size:16px; color:var(--ink); font-weight:700; margin:0 0 18px;
}

/* جعبهٔ «اطمینان در خرید» */
.cart-trust{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 20px; margin-top:22px;
}
.cart-trust .ct-grid{
  display:grid; grid-template-columns:1fr 216px; gap:22px; align-items:center;
}
.cart-trust .ct-text{
  font-size:13.5px; line-height:2.1; color:#33525b; margin:0 0 12px;
}
.cart-trust .ct-support{
  font-size:13.5px; color:var(--ink); font-weight:700; margin:0 0 14px;
}
.cart-trust .ct-phone{
  display:inline-block; margin-inline-start:6px; color:var(--teal-600);
  font-weight:800; text-decoration:none; direction:ltr;
}
.cart-trust .ct-phone:hover{ color:var(--teal-700); text-decoration:underline }
.cart-trust .ct-links{ display:flex; gap:8px; flex-wrap:wrap }
.cart-trust .ct-badge{
  margin:0; text-align:center; background:#f6fafb; border:1px solid var(--line);
  border-radius:12px; padding:14px 10px;
}
.cart-trust .ct-badge img{
  width:200px; height:200px; max-width:100%; height:auto; object-fit:contain; display:block; margin:0 auto;
}
.cart-trust .ct-badge figcaption{
  font-size:12px; color:var(--muted); margin-top:8px;
}
@media (max-width:900px){
  .cart-trust .ct-grid{ grid-template-columns:1fr; }
  .cart-trust .ct-badge{ max-width:260px; margin:0 auto }
}

/* ── هم‌ترازی فیلدهای دوستونهٔ فرم تسویه حساب ──
   بدون این، فیلدی که «توضیح» دارد ردیف را بلند می‌کند و چون .field یک گرید
   کشیده است، ورودی فیلد بی‌توضیح هم کشیده و پایین‌تر می‌افتد (بالا/پایین شدن). */
.hp .form-grid > .field{ align-content:start }
/* جای یک خط «توضیح» برای همهٔ فیلدها رزرو می‌شود تا ردیف‌ها هم‌ارتفاع بمانند */
.hp .form-grid > .field > .hint{ min-height:21px }

/* ── درگاه‌های پرداخت در صفحهٔ پرداخت ── */
.pay-gws{
  border:0; padding:0; margin:0 0 16px;
  display:grid; gap:10px;
}
.pay-gws-legend{
  font-size:13.5px; font-weight:800; color:var(--ink, #123);
  margin:0 0 8px; padding:0;
}
.pay-gw{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid #dbe7ea; border-radius:12px;
  padding:12px 13px; cursor:pointer; background:#fff;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.pay-gw:hover{ border-color:#a9cfd7; background:#fbfdfe }
.pay-gw input[type=radio]{ width:auto; margin-top:3px; accent-color:#008193 }
.pay-gw:has(input:checked){
  border-color:#008193; background:#f2fafb;
  box-shadow:0 0 0 3px rgba(0,129,147,.10);
}
.pay-gw-body{ display:block }
.pay-gw-title{ display:block; font-size:14.5px; color:var(--ink, #123) }
.pay-gw-desc{ display:block; font-size:12.5px; color:var(--muted, #6b8792); margin-top:3px; line-height:1.9 }

/* یادداشت دلخواه مدیر زیر درگاه‌ها */
.pay-note{
  border:1px solid #f0dcae; background:#fffaf0; color:#6b4f12;
  border-radius:10px; padding:10px 12px; margin:0 0 16px;
  font-size:13px; line-height:2;
}
.pay-note b{ color:#8a5d00 }
.pay-note a{ color:#008193 }
.pay-note p{ margin:0 0 6px }
.pay-note p:last-child{ margin:0 }

/* ── خلاصهٔ سبد خرید روی هاور آیکن سبد (دسکتاپ) ── */
.cart-wrap{ position:relative }
.cart-pop{
  position:absolute; top:calc(100% + 10px); left:0; z-index:60;
  width:350px; max-width:88vw;
  background:#fff; border:1px solid #e2ecef; border-radius:16px;
  box-shadow:0 18px 44px rgba(0,60,70,.16);
  padding:12px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  text-align:right;
}
.cart-wrap:hover .cart-pop,
.cart-wrap:focus-within .cart-pop{ opacity:1; visibility:visible; transform:translateY(0) scale(1) }
.cart-wrap::after{ content:''; position:absolute; top:100%; left:0; right:0; height:12px }
.cart-pop::before{
  content:''; position:absolute; top:-7px; left:22px; width:12px; height:12px;
  background:#fff; border-left:1px solid #e2ecef; border-top:1px solid #e2ecef;
  transform:rotate(45deg); border-top-left-radius:3px;
}
.cart-pop-head{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted,#6b8792); padding:2px 4px 9px; border-bottom:1px dashed #e6eef1 }
.cart-pop-head b{ color:var(--ink,#123); font-size:13.5px }
.cart-pop-list{ list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto }
.cart-pop-list li{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; padding:10px 4px; border-bottom:1px solid #f1f6f7; position:relative }
.cart-pop-list li:last-child{ border-bottom:0 }
.cp-name{ grid-column:1/2; font-size:13px; font-weight:700; color:var(--ink,#123); text-decoration:none; line-height:1.7; padding-left:22px }
.cp-name:hover{ color:var(--teal,#008193) }
.cp-meta{ grid-column:1/2; display:flex; gap:8px; font-size:11.5px; color:var(--muted,#6b8792) }
.cp-price{ grid-column:2/3; grid-row:1/3; font-size:13px; font-weight:800; color:var(--ink,#123); white-space:nowrap }
.cp-price i{ font-style:normal; font-size:11px; font-weight:600; color:var(--muted,#6b8792) }
.cp-del{
  position:absolute; left:2px; top:9px; width:20px; height:20px; padding:0;
  border:1px solid #f0c4c0; background:#fff; color:#b3261e; border-radius:50%;
  font-size:11px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s, background .15s;
}
.cart-pop-list li:hover .cp-del{ opacity:1 }
.cp-del:hover{ background:#fff5f5 }
.cart-pop-sum{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 0; padding:10px 4px 0; border-top:2px solid #eef5f6; font-size:13px }
.cart-pop-sum b{ font-size:16px }
.cart-pop-sum i{ font-style:normal; font-size:11px; font-weight:600; color:var(--muted,#6b8792) }
.cart-pop-actions{ display:flex; gap:8px; margin-top:11px }
.cart-pop-actions a{ flex:1 1 0; text-align:center; padding:9px 10px; border-radius:10px; font-size:13px; font-weight:800; text-decoration:none }
.cp-checkout{ background:#5aab2c; color:#fff }
.cp-checkout:hover{ background:#4d9424 }
.cp-cart{ background:#f2f8f9; color:var(--teal,#008193); border:1px solid #dcebee }
.cart-pop-empty{ text-align:center; padding:16px 8px }
.cart-pop-empty span{ font-size:30px; display:block; margin-bottom:6px; opacity:.6 }
.cart-pop-empty p{ margin:0 0 10px; font-size:13px; color:var(--muted,#6b8792) }
.cp-del.is-busy{ opacity:.4 }
@media (max-width:900px){ .cart-pop{ display:none } }

/* ── پنل کاربری: مدیریت دستگاه‌ها ── */
.pn-inline{ display:flex; gap:7px; align-items:center; flex-wrap:wrap }
.pn-inline input[type=text]{ padding:6px 9px; border:1px solid #d8e3e7; border-radius:7px; font:inherit; font-size:12.5px }
.pn-danger{
  background:#fff; border:1px solid #f0c4c0; color:#b3261e; border-radius:7px;
  padding:5px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
.pn-danger:hover{ background:#fff5f5; border-color:#e0a3a3 }
.pn-note{ margin:0 0 14px; padding:9px 12px; border-radius:9px; font-size:13px; line-height:1.9 }
.pn-note.ok{ background:#eaf8ef; border:1px solid #bfe6cd; color:#1f8a3b; font-weight:700 }
.pn-note.err{ background:#fff5f5; border:1px solid #f0c4c0; color:#b3261e; font-weight:700 }
.pn-tbl tr.is-off td{ color:#93a7ae }
.pn-tbl tr.is-off s{ color:#b3261e }

/* ── محدودیت تعداد در سبد (تک‌فروشی / تعداد انتخابی) ── */
.qty-note{
  display:block; font-size:11.5px; color:var(--muted, #6b8792);
  margin-top:5px; font-weight:600;
}
.qty-fixed{
  display:inline-flex; gap:7px; align-items:center;
  font-size:13px; font-weight:800; color:var(--ink, #123);
}
.qty-fixed .qty-note{ margin:0 }
.pp-qty-note{
  margin:9px 0 0; padding:8px 11px; border-radius:9px;
  background:#fff8e6; border:1px dashed #efd79a; color:#7a5a10;
  font-size:12.5px; line-height:1.9;
}
.pp-qty-note b{ color:#8a5d00 }

/* ── تأیید پیامکی شمارهٔ موبایل در فرم خرید ── */
.phone-row{ display:flex; gap:8px; align-items:stretch }
.phone-row input{ flex:1 1 auto; min-width:0 }
.otp-send{ flex:0 0 auto; white-space:nowrap; font-size:12.5px; padding:0 12px }
.otp-box{
  border:1px solid #cfe2e6; background:#f7fbfc; border-radius:10px;
  padding:11px 12px; margin-top:9px;
}
.otp-box > label{ display:block; font-size:12.5px; font-weight:700; margin:0 0 6px; color:var(--ink, #123) }
.otp-row{ display:flex; gap:8px; align-items:stretch }
.otp-row input{
  flex:1 1 auto; min-width:0; text-align:center; letter-spacing:5px;
  font-size:17px; font-weight:800;
}
.otp-btn{ flex:0 0 auto; padding:0 14px; font-size:13px }
.otp-actions{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:7px }
.otp-link{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--teal, #008193); font:inherit; font-size:12.5px; font-weight:700;
  text-decoration:underline;
}
.otp-debug{
  margin:9px 0 0; padding:7px 9px; border-radius:8px;
  background:#fff8e6; border:1px dashed #efd79a; color:#7a5a10;
  font-size:12.5px; font-weight:700; direction:ltr; text-align:center;
}
.otp-ok{
  margin:9px 0 0; font-size:13px; font-weight:800; color:#1f8a3b;
  background:#eaf8ef; border:1px solid #bfe6cd; border-radius:8px; padding:7px 10px;
}
.otp-msg{ margin:8px 0 0; font-size:12.5px; line-height:1.9; color:var(--muted, #6b8792) }
.otp-msg.is-err{ color:#b3261e; font-weight:700 }
.otp-msg.is-ok{ color:#1f8a3b; font-weight:700 }
#paySubmit[disabled]{ opacity:.55; cursor:not-allowed }

/* ── توضیحات سفارش در تسویه حساب: پیش‌فرض بسته تا کاربر گیج نشود ── */.co-note{
  border:1px solid var(--line, #e3ebee);
  border-radius:10px;
  background:#fafcfd;
  padding:10px 13px;
}
.co-note > summary{
  cursor:pointer;
  font-weight:700;
  font-size:13.5px;
  color:var(--ink, #123);
  list-style:none;
  display:flex;
  align-items:center;
  gap:7px;
}
.co-note > summary::-webkit-details-marker{ display:none }
.co-note > summary::before{
  content:'＋';
  font-weight:700;
  color:#008193;
  font-size:14px;
  line-height:1;
}
.co-note[open] > summary::before{ content:'−' }
.co-note > summary:hover{ color:#008193 }
.co-note .co-opt{ font-weight:600; color:var(--muted, #6b8792); font-size:12.5px }
.co-note textarea{
  width:100%;
  font:inherit;
  font-size:13.5px;
  border:1px solid #d8e3e7;
  border-radius:8px;
  padding:9px 11px;
}