@import url('/vendor/vazirmatn/400.css');
@import url('/vendor/vazirmatn/500.css');
@import url('/vendor/vazirmatn/700.css');
@import url('/vendor/vazirmatn/800.css');
@import url('/vendor/naskh/700.css');

/* Theme carried over from the emigroup MVP: ink-teal band, paper body, brass for seals and primary actions */
:root {
  --ink: #0E3A44;
  --ink-2: #165260;
  --ink-3: #1F6A7B;
  --brass: #A97A22;
  --brass-2: #8E6516;
  --brass-soft: #F3E7CC;
  --paper: #F4F6F4;
  --surface: #FFFFFF;
  --surface-2: #F9FAF9;
  --line: #DCE3E1;
  --line-2: #C6D1CE;
  --fg: #16262A;
  --muted: #5B6D70;
  --on-ink: #F2F6F5;
  --ok: #1E7A4C; --ok-bg: #E3F3EA;
  --warn: #9A6200; --warn-bg: #FDF1D8;
  --bad: #A23A2C; --bad-bg: #F8E6E2;
  --display: "Noto Naskh Arabic", "Vazirmatn", Tahoma, serif;
  --body: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  --r: 12px;
  --shadow: 0 1px 2px rgba(14, 58, 68, .06), 0 8px 24px rgba(14, 58, 68, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0B2B33; --ink-2: #123C46; --ink-3: #1A5160; --brass: #D2A447; --brass-2: #E1B75E; --brass-soft: #3A3020;
    --paper: #0F1719; --surface: #162124; --surface-2: #1B282B; --line: #26363A; --line-2: #33474C; --fg: #E4ECEA; --muted: #93A6A8;
    --on-ink: #EAF2F0; --ok: #5BC48E; --ok-bg: #16322A; --warn: #E5B354; --warn-bg: #3A2E14; --bad: #E58474; --bad-bg: #3A1F1B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #0B2B33; --ink-2: #123C46; --ink-3: #1A5160; --brass: #D2A447; --brass-2: #E1B75E; --brass-soft: #3A3020;
  --paper: #0F1719; --surface: #162124; --surface-2: #1B282B; --line: #26363A; --line-2: #33474C; --fg: #E4ECEA; --muted: #93A6A8;
  --on-ink: #EAF2F0; --ok: #5BC48E; --ok-bg: #16322A; --warn: #E5B354; --warn-bg: #3A2E14; --bad: #E58474; --bad-bg: #3A1F1B;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.8;
  direction: rtl; min-height: 100dvh; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.45; margin: 0; text-wrap: balance; font-weight: 700 }
p { margin: 0 }
a { color: inherit }
img { max-width: 100%; display: block }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px }
.num, .ltr { font-variant-numeric: tabular-nums }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block }
.muted { color: var(--muted) }
.sm { font-size: 13px }
.xs { font-size: 12px }
.hide, [hidden] { display: none !important }
.wrap { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)) }
.stack { display: flex; flex-direction: column; gap: 14px }
.row { display: flex; gap: 10px; align-items: center }
.grow { flex: 1 }

/* ---------- event band ---------- */
.band {
  background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 0 54px;
}
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 12% 130%, transparent 0 18px, rgba(169, 122, 34, .13) 18px 19px);
}
.band .wrap { position: relative; z-index: 1 }
.org { display: flex; align-items: center; gap: 10px; font-size: 12.5px; opacity: .9 }
.seal {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brass); display: grid; place-items: center; flex-shrink: 0;
  color: var(--brass); font-weight: 800; font-size: 12px; letter-spacing: .5px; font-family: var(--body);
}
.band h1 { font-size: clamp(22px, 6vw, 30px); margin-top: 16px }
.band .sub { opacity: .82; font-size: 14px; margin-top: 6px; max-width: 46ch }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 99px;
  padding: 3px 12px; font-size: 13px; background: rgba(255, 255, 255, .05)
}
.chip.brass { border-color: var(--brass); color: #F6E3B8; background: rgba(169, 122, 34, .14) }
.chip svg { width: 15px; height: 15px }
.banner-img { background: #fff; border-radius: 10px; padding: 8px; margin-top: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25) }
.banner-img img { width: 100%; border-radius: 6px }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 22px 18px;
}
@media (min-width: 480px) { .card { padding: 28px 26px } }
.lift { margin-top: -34px; position: relative; z-index: 2 }
.card h2 { font-size: 22px }
.eyebrow { font-size: 12px; letter-spacing: .04em; color: var(--brass); font-weight: 700 }

/* ---------- form ---------- */
.field { display: flex; flex-direction: column; gap: 6px }
.field label { font-weight: 500; font-size: 14.5px }
.req { color: var(--bad); margin-inline-start: 2px }
.input {
  width: 100%; min-height: 52px; border: 1.5px solid var(--line-2); background: var(--surface-2); border-radius: 12px;
  padding: 12px 14px; font-size: 16px; /* 16px stops iOS zoom */ transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--muted); opacity: .7 }
.input:focus { outline: none; border-color: var(--ink-3); background: var(--surface); box-shadow: 0 0 0 3px rgba(31, 106, 123, .15) }
.field.err .input { border-color: var(--bad); background: var(--bad-bg) }
.field.okv .input { border-color: var(--ok) }
.msg { font-size: 13px; color: var(--bad); min-height: 0; display: flex; gap: 6px; align-items: flex-start }
.msg:empty { display: none }
.msg svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px }
.hint { font-size: 12.5px; color: var(--muted) }
.input.ltr-in { direction: ltr; text-align: right; letter-spacing: .04em }
.input.ltr-in::placeholder { text-align: right }

.mobile-row { display: flex; gap: 8px }
.mobile-row .input { flex: 1; min-width: 0 }
.verified-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 13px; font-weight: 700 }
.verified-badge svg { width: 16px; height: 16px }

.otp-box { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 14px; background: var(--surface-2) }
.otp-cells { display: flex; gap: 8px; direction: ltr; justify-content: center }
.otp-cells input {
  width: 100%; max-width: 54px; aspect-ratio: 1 / 1.1; min-height: 52px; text-align: center; font-size: 22px; font-weight: 700;
  border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 0;
}
.otp-cells input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px rgba(31, 106, 123, .15) }
.otp-box.err .otp-cells input { border-color: var(--bad) }
.linkbtn { background: none; border: 0; padding: 4px 2px; color: var(--ink-3); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
:root[data-theme="dark"] .linkbtn { color: var(--brass) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .linkbtn { color: var(--brass) } }
.linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: default }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 12px; border: 0;
  padding: 10px 18px; font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: filter .15s, transform .05s, background .15s;
}
.btn:active { transform: translateY(1px) }
.btn svg { width: 20px; height: 20px; flex-shrink: 0 }
.btn-primary { background: var(--ink); color: var(--on-ink) }
:root[data-theme="dark"] .btn-primary { background: var(--ink-3) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { background: var(--ink-3) } }
.btn-primary:hover { filter: brightness(1.12) }
.btn-brass { background: var(--brass); color: #fff }
.btn-brass:hover { filter: brightness(1.07) }
.btn-ghost { background: var(--surface); color: var(--fg); border: 1.5px solid var(--line-2) }
.btn-ghost:hover { border-color: var(--brass) }
.btn-soft { background: var(--surface-2); border: 1px solid var(--line); color: var(--fg) }
.btn-ok { background: var(--ok); color: #fff }
.btn-bad { background: var(--bad); color: #fff }
.btn-sm { min-height: 40px; padding: 6px 12px; font-size: 14px; border-radius: 10px }
.btn-xs { min-height: 32px; padding: 2px 10px; font-size: 13px; border-radius: 8px }
.btn-block { width: 100% }
.btn[disabled], .btn.loading { opacity: .6; cursor: not-allowed; filter: none }
.btn.loading::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .8s linear infinite
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------- selfie ---------- */
fieldset.selfie { border: 1.5px solid var(--line); border-radius: 14px; padding: 6px 14px 16px; margin: 0 }
fieldset.selfie legend { padding-inline: 8px; font-weight: 700; font-size: 14.5px }
.opt { color: var(--muted); font-weight: 500; font-size: 13px }
.cam {
  position: relative; margin-top: 10px; aspect-ratio: 4 / 3; border: 2px dashed var(--line-2); border-radius: 12px; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center; color: var(--muted); font-size: 14px; text-align: center
}
.cam video, .cam img, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.cam video { transform: scaleX(-1) }
.cam .oval {
  position: absolute; inset: 10% 26%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .28); pointer-events: none
}
.cam.live { border-style: solid; border-color: var(--ink-3) }
.cam .ph { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px }
.cam .ph svg { width: 40px; height: 40px; margin: 0 auto 6px; opacity: .5 }
.cam-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap }
.cam-actions .btn { flex: 1 }

/* ---------- notes, alerts ---------- */
.note { font-size: 13px; color: var(--muted); line-height: 1.9 }
.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px }
.alert.bad { background: var(--bad-bg); color: var(--bad) }
.alert.ok { background: var(--ok-bg); color: var(--ok) }
.alert.warn { background: var(--warn-bg); color: var(--warn) }
.alert.info { background: var(--brass-soft); color: var(--fg) }

.foot { text-align: center; padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--muted) }
.foot a { color: var(--muted) }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--ink); color: var(--on-ink); border: 1px solid var(--brass); padding: 10px 18px; border-radius: 10px;
  z-index: 100; font-size: 14px; transition: .25s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) }

/* ---------- ticket ---------- */
.ticket {
  background: var(--ink); color: var(--on-ink); border-radius: 18px; overflow: hidden; position: relative;
  box-shadow: 0 14px 40px rgba(14, 58, 68, .28); border: 1px solid var(--ink-2)
}
.ticket::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 105% -10%, transparent 0 16px, rgba(169, 122, 34, .12) 16px 17px);
}
.t-head { padding: 20px 20px 14px; position: relative; display: flex; gap: 12px; align-items: center }
.t-head .t-ttl { font-size: 13px; opacity: .85 }
.t-head b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.5 }
.t-body { background: var(--surface); color: var(--fg); margin: 0 12px; border-radius: 14px; padding: 18px; position: relative; text-align: center }
.qr-tile { width: min(240px, 70vw); margin: 0 auto; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--line) }
.qr-tile img { width: 100%; aspect-ratio: 1; image-rendering: pixelated }
.t-code { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: .12em; direction: ltr; font-variant-numeric: tabular-nums; color: var(--ink) }
:root[data-theme="dark"] .t-code { color: var(--brass) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .t-code { color: var(--brass) } }
.t-name { font-family: var(--display); font-size: 21px; margin-top: 10px }
.t-meta { display: flex; justify-content: center; gap: 6px 14px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; margin-top: 4px }
.perf { height: 26px; position: relative; margin: 0 12px }
.perf::before { content: ""; position: absolute; top: 50%; inset-inline: 14px; border-top: 2px dashed rgba(255, 255, 255, .25) }
.perf::after, .perf i { content: ""; position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); transform: translateY(-50%) }
.perf::after { right: -24px }
.perf i { left: -24px }
.t-foot { padding: 4px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 13px; position: relative }
.t-foot span { display: block; opacity: .7; font-size: 11.5px }
.t-foot b { font-weight: 700 }
.t-status { position: absolute; top: 14px; left: 14px; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); font-weight: 700 }
.t-status.blocked { background: var(--bad-bg); color: var(--bad) }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.actions .btn { min-height: 50px; font-size: 14.5px }
.map-link {
  display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 16px; border-radius: 14px;
  background: var(--brass-soft); border: 1px solid rgba(169, 122, 34, .35)
}
.map-link .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brass); color: #fff; display: grid; place-items: center; flex-shrink: 0 }
.map-link .ic svg { width: 24px; height: 24px }
.map-link b { display: block; font-size: 15px }
.map-link small { color: var(--muted); font-size: 12.5px }
.map-link .arr { margin-inline-start: auto; width: 20px; height: 20px; opacity: .6 }

.success-head { text-align: center }
.success-head .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 8px }
.success-head .tick svg { width: 30px; height: 30px }

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

@media print {
  @page { size: A5 portrait; margin: 10mm }
  body { background: #fff !important; color: #000 }
  .no-print, .foot, .toast { display: none !important }
  .band { display: none }
  .wrap { max-width: none; padding: 0 }
  .ticket { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact }
  .perf::after, .perf i { background: #fff }
  .lift { margin-top: 0 }
}