/* =========================================================
   checkout.css — پرداخت: روش‌ها، کد تخفیف، پنجره نتیجه، کارت‌به‌کارت و رسید
   (مشترک بین صفحه محصولات و پیگیری سفارش)
   ========================================================= */

.pay-list { display: grid; gap: .55rem; }
.pay-option { position: relative; }
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option label {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: 10px 12px; cursor: pointer;
  background: rgba(10, 8, 16, .4); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, background .2s, transform .25s var(--ease);
}
.pay-option label:hover { border-color: var(--line-strong); }
.pay-option input:checked + label { border-color: transparent; background: linear-gradient(rgba(22, 17, 36, .95), rgba(22, 17, 36, .95)) padding-box, var(--grad-border) border-box; }
.pay-option input:focus-visible + label { outline: 2px solid var(--magenta); outline-offset: 2px; }
.pay-option input:checked + label .radio-dot { border-color: var(--magenta); }
.pay-option input:checked + label .radio-dot::after { transform: scale(1); }
.pay-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #d6ddf8; background: rgba(202, 198, 221, .08); border: 1px solid var(--line); transition: color .25s, background .25s; }
.pay-ico svg { width: 20px; height: 20px; }
.pay-option input:checked + label .pay-ico { color: #fff; background: var(--grad-brand); border-color: transparent; }
.pay-text { display: grid; line-height: 1.6; min-width: 0; }
.pay-text b { font-size: 14px; color: var(--text-strong); font-weight: 600; }
.pay-text small { font-size: 12px; color: var(--muted); }

/* کد تخفیف */
.coupon-row { display: flex; align-items: stretch; gap: .5rem; }
.coupon-row .input-wrap { flex: 1; min-width: 0; min-height: 46px; }
.coupon-row .input-wrap input { height: 44px; min-width: 0; width: 100%; text-transform: uppercase; letter-spacing: .04em; }
.coupon-row .btn { flex: none; min-height: 46px; height: auto; padding-inline: 16px; }
.coupon-msg.is-ok { color: #7fe0ac; }
.coupon-msg.is-bad { color: var(--error); }
.phone-block .input-wrap { min-height: 46px; }
.phone-block .input-wrap input { height: 44px; }
.summary-extras .field-label { margin-bottom: .5rem; }

/* ---------- پنجره نتیجه سفارش ---------- */
.pay-modal { width: min(500px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
.pay-modal .modal-body { padding: 1.4rem; }
.pay-lead { margin-bottom: .4rem; line-height: 2; }
.pay-dl { margin: 1rem 0 !important; }
.pay-dl .total dd { font-size: 1.15rem; color: #fff; }
.support-text { margin: 1rem 0; padding: 1rem; direction: rtl; white-space: pre-wrap; font: inherit; font-size: 13.5px; line-height: 2; color: var(--text-strong); background: rgba(10, 8, 16, .5); border: 1px solid var(--line); border-radius: 12px; }

.manual-panel { display: grid; gap: .9rem; }
.manual-amount { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; text-align: center; border-radius: 12px; background: rgba(243, 60, 192, .08); border: 1px solid rgba(243, 60, 192, .3); }
.manual-amount > span { font-size: 13px; color: var(--text-soft); }
.manual-amount .copy-row { justify-content: center; padding: 0; }
.manual-amount .copy-val { font-size: 1.05rem; font-weight: 700; color: #fff; }
.pay-card { display: grid; gap: .3rem; padding: 12px 14px; border-radius: 14px; background: linear-gradient(140deg, rgba(67, 73, 255, .16), rgba(243, 60, 192, .1)), rgba(10, 8, 16, .6); border: 1px solid var(--line-strong); }
.pay-card-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 13px; color: var(--text-soft); }
.pay-card-head span:last-child { color: var(--text-strong); font-weight: 600; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .8rem; padding: 4px 0; }
.copy-label { font-size: 12.5px; color: var(--muted); }
.copy-val { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; min-height: 44px; padding: 3px 8px; border-radius: 8px; font-size: 14px; color: var(--text-strong); overflow-wrap: anywhere; text-align: start; transition: background .2s; }
@media (hover: hover) { .copy-val:hover { background: rgba(202, 198, 221, .1); } }
.copy-val svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.manual-note { padding: .7rem .9rem; font-size: 13px !important; color: #ffd8a8 !important; background: rgba(240, 160, 32, .08); border: 1px solid rgba(240, 160, 32, .3); border-radius: 12px; white-space: pre-line; }

.receipt-form { display: grid; gap: .7rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.receipt-form .field-label { margin-bottom: 0; }
.receipt-form .input-wrap { min-height: 46px; }
.receipt-form .input-wrap input { height: 44px; }
.receipt-state { font-size: 13px !important; color: #7fe0ac !important; }
.file-drop { display: grid; gap: .6rem; padding: 14px; cursor: pointer; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: 12px; transition: border-color .2s, background .2s; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--magenta); background: rgba(243, 60, 192, .05); }
.file-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-drop-text { font-size: 13.5px; color: var(--text-soft); }
.file-drop-text small { display: block; color: var(--muted); font-size: 12px; }
.file-preview { max-height: 160px; margin-inline: auto; border-radius: 10px; object-fit: contain; }

/* تیک انیمیشنی موفقیت */
.done-box { display: grid; justify-items: center; gap: .8rem; padding: 1.2rem 0 .4rem; text-align: center; }
.done-check { width: 64px; height: 64px; }
.done-check circle { fill: rgba(47, 191, 113, .12); stroke: #2fbf71; stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .7s var(--ease) forwards; }
.done-check path { fill: none; stroke: #2fbf71; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: draw .45s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (min-width: 480px) {
  .manual-amount { flex-direction: row; align-items: center; text-align: start; }
  .manual-amount .copy-row { justify-content: space-between; }
  .pay-option label { padding: 11px 14px; }
  .coupon-row .btn { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .done-check circle, .done-check path { animation: none; stroke-dashoffset: 0; }
}
.login-note { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--r-md, 14px); font-size: 13.5px; line-height: 1.9; color: var(--text); background: rgba(255, 194, 51, .09); border: 1px solid rgba(255, 194, 51, .3); }
.login-note a { color: #ffd470; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }