/* app_ticket.css - «خرید بلیط» */

.tk-body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Vazirmatn", Tahoma, sans-serif;
}

.tk-header{
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--s4) 14px;
  background:linear-gradient(160deg, var(--ink) 0%, var(--go-dark) 100%);
  color:#fff; text-align:center; border-radius:0 0 22px 22px;
}
.tk-header h1{ font-size:18px; font-weight:900; margin:0; }

/* ---------- سن + جایگاه‌ها (نمودار) ---------- */
.tk-hall{ padding:var(--s5) var(--s5) var(--s4); display:flex; flex-direction:column; align-items:center; gap:6px; }
.tk-stage{
  width:70%; height:34px; border-radius:8px;
  background:linear-gradient(135deg,#2C3E60,var(--ink));
  color:#fff; display:grid; place-items:center;
  font-size:var(--fs-sm); font-weight:800; letter-spacing:.15em;
  box-shadow:0 4px 10px rgba(16,25,43,.25);
}

.tk-rows{ width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:4px; }
.tk-row{
  height:52px; border-radius:8px; border:none;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:var(--fs-sm); font-weight:800; color:var(--text-2);
  background:var(--surface); box-shadow:var(--sh-1);
  transition:transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.tk-row__remaining{ font-size:11px; font-weight:700; opacity:.75; }
/* هر ردیف کمی عریض‌تر از قبلی - حس فاصله گرفتن از سن */
.tk-row:nth-child(1){ width:78%; }
.tk-row:nth-child(2){ width:86%; }
.tk-row:nth-child(3){ width:93%; }
.tk-row:nth-child(4){ width:100%; }
.tk-row:nth-child(5){ width:100%; margin-top:4px; border-top:2px dashed var(--surface-2); padding-top:6px; height:58px; }

.tk-row.is-sel{ background:var(--alert); color:#fff; transform:scale(1.02); }
.tk-row.is-full{ opacity:.45; pointer-events:none; }
.tk-row:active{ transform:scale(.98); }

/* ---------- جزئیات و فرم ---------- */
.tk-wrap{ padding:0 var(--s5) var(--s6); max-width:420px; margin:0 auto; }
.tk-hint{ text-align:center; color:var(--text-3); font-size:var(--fs-sm); padding:var(--s4) 0; }

.tk-info, .tk-form{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3);
}
.tk-info{ margin-top:var(--s4); }
.tk-form{ margin-top:var(--s4); }

.tk-info__row{ display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-sm); color:var(--text-2); }
.tk-info__row b{ color:var(--text); font-weight:800; }
.tk-info__row--total{ padding-top:8px; border-top:1px dashed var(--surface-2); font-size:15px; }
.tk-info__row--total b{ color:var(--go-dark); font-size:16px; }

.tk-msg{ border-radius:var(--r-sm); padding:10px var(--s4); font-size:var(--fs-sm); }
.tk-msg--error{ background:var(--danger-soft); color:var(--danger); }

/* ---------- شمارنده‌ی تعداد بلیط (بدون تایپ دستی) ---------- */
.tk-stepper{ display:flex; align-items:center; justify-content:center; gap:var(--s4); }
.tk-stepper__btn{
  width:44px; height:44px; border-radius:var(--r-md); background:var(--surface-2);
  color:var(--text); font-size:20px; font-weight:800; display:grid; place-items:center;
}
.tk-stepper__btn:active{ background:var(--go-soft); }
.tk-stepper__btn:disabled{ opacity:.4; pointer-events:none; }
.tk-stepper__value{ min-width:48px; text-align:center; font-size:20px; font-weight:900; }

/* ---------- انتخاب سانس ---------- */
.tk-showtimes{ display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3); }
.tk-showtime-card{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s4); text-align:center; display:flex; flex-direction:column; gap:4px;
}
.tk-showtime-card b{ font-size:16px; font-weight:900; }
.tk-showtime-card span{ font-size:var(--fs-sm); color:var(--text-2); }
.tk-showtime-card:active{ transform:scale(.98); }

.tk-selected-showtime{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--s5); font-size:var(--fs-sm); color:var(--text-2);
}

/* ---------- نتیجه‌ی پرداخت ---------- */
.tk-success, .tk-fail{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s6) var(--s5); margin-bottom:var(--s4);
}
.tk-success svg{ width:48px; height:48px; color:var(--go); }
.tk-fail svg{ width:48px; height:48px; color:var(--danger); }
.tk-success b, .tk-fail b{ font-size:var(--fs-body); }

/* ---------- کارت بلیط ---------- */
.tk-ticket{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s5); margin-bottom:var(--s3);
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  border:1.5px dashed var(--surface-2);
}
.tk-ticket__head{ display:flex; flex-direction:column; gap:2px; }
.tk-ticket__head b{ font-size:16px; font-weight:900; }
.tk-ticket__head span{ font-size:var(--fs-sm); color:var(--text-2); }
.tk-ticket__qr{ width:160px; height:160px; }
.tk-ticket__qr svg{ width:100%; height:100%; display:block; }
.tk-ticket__code{ font-size:20px; font-weight:900; letter-spacing:.08em; color:var(--go-dark); }
.tk-ticket__note{ font-size:var(--fs-xs); color:var(--text-3); }

/* ---------- چاپ/PDF ---------- */
@media print{
  .no-print, .tk-header--no-print{ display:none !important; }
  body{ background:#fff; }
  .tk-ticket{ box-shadow:none; border:1.5px dashed #999; page-break-inside:avoid; }
}