/* Athlete SMS login: phone step + one-time-code step.
   The code field is ONE real, full-size input (so iOS/Android autofill and paste attach to it);
   the six slots are a purely visual mirror drawn on top of it. */
.hiat-auth-card>.lg-title{margin:0 0 22px;text-align:center;font-size:1.05rem;font-weight:600!important}
.lg-form{display:grid;gap:12px}
.lg-label{margin:0!important;font-size:.88rem;font-weight:600;color:var(--text)}
.lg-error{min-height:1.4em;margin:0;font-size:.86rem;line-height:1.6}
.lg-hint{margin:2px 0 0;text-align:center;font-size:.8rem;line-height:1.8;color:var(--muted)}
.lg-resend{display:flex;justify-content:center;align-items:center;min-height:36px;font-size:.88rem;font-variant-numeric:tabular-nums}
.lg-resend .hiat-muted{display:inline!important}

.hiat-auth-card .lg-form input.lg-phone{min-height:60px;padding-inline:18px;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font-size:1.4rem;font-weight:600;letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums}
.hiat-auth-card .lg-form input.lg-phone::placeholder{color:var(--muted);opacity:.55;font-weight:400}
.hiat-auth-card .lg-form input.lg-phone:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.hiat-auth-card .lg-form input.lg-phone[aria-invalid=true]{border-color:var(--error)}

.lg-recipient{display:grid;gap:4px;margin:-6px 0 6px;text-align:center}
.lg-recipient p{margin:0;font-size:.88rem;color:var(--muted)}
.lg-recipient div{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.lg-recipient b{font-size:1.1rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* One plate, six cells: reads like a race-number plate rather than six separate boxes. */
.otp-plate{position:relative;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);cursor:text;transition:border-color .15s,box-shadow .15s}
.otp-plate.is-focused{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.otp-plate.has-error{border-color:var(--error);box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 12%,transparent)}
.hiat-auth-card .otp-plate input.otp-real{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;outline:0;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;text-align:center}
.otp-plate input.otp-real::selection{background:transparent}
.otp-plate input.otp-real:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 99999s}
.otp-slots{position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--otp-n,6),1fr);pointer-events:none}
.otp-slot{position:relative;display:grid;place-items:center;height:clamp(62px,18vw,76px);font:600 1.9rem/1 Vazirmatn,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--text)}
.otp-slot+.otp-slot::before{content:"";position:absolute;inset-block:24%;inset-inline-start:0;width:1px;background:var(--border)}
.otp-slot.is-active::after{content:"";position:absolute;inset-inline:26%;bottom:13px;height:3px;border-radius:3px;background:var(--primary);animation:otp-caret 1.05s steps(1,end) infinite}
.otp-plate.is-busy .otp-slot{opacity:.55}
.otp-plate.shake-a{animation:otp-shake-a .32s ease-in-out}
.otp-plate.shake-b{animation:otp-shake-b .32s ease-in-out}
@keyframes otp-caret{50%{opacity:0}}
@keyframes otp-shake-a{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes otp-shake-b{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.otp-plate,.otp-slot.is-active::after{animation:none!important;transition:none!important}}
@media (max-width:360px){.otp-slot{font-size:1.6rem}}

/* Unfinished gateway payments: continue or cancel, with the remaining hold time. */
.hiat-pending{display:grid;gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--border);border-inline-start:4px solid var(--primary);border-radius:18px;background:var(--surface)}
.hiat-pending h2{margin:0;font-size:1.05rem}
.hiat-pending.is-compact{margin:12px 0;padding:12px 14px;border-radius:14px}
.hiat-pending-item{display:grid;gap:12px}
.hiat-pending-item+.hiat-pending-item{padding-top:12px;border-top:1px solid var(--border)}
.hiat-pending-info{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.hiat-pending-info strong{font-size:.95rem}
.hiat-pending-amount{font-weight:700;font-variant-numeric:tabular-nums}
.hiat-pending-time{grid-column:1/-1;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hiat-pending-actions{display:flex;flex-wrap:wrap;gap:10px}
.hiat-pending-actions>*{flex:1 1 140px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.hiat-pending-confirm{display:grid;gap:10px}
.hiat-pending-confirm p{margin:0;font-size:.86rem;line-height:1.9;color:var(--muted)}
.hiat-button.hiat-danger{background:var(--error);border-color:var(--error);color:#fff}
.hiat-pending .hiat-small{margin:0;color:var(--muted)}

/* ===== Membership card: identical iPhone-style proportions on screen, in the print preview and on paper ===== */
/* On-screen 3D card: info + photo sit about 10px higher on an iPhone 13 (358px wide card); scales with the card. */
.hiat-card-viewport .khz-member-front-data{position:relative;top:-2.8cqw}
/* Print preview + paper: the card pair is the size container (exactly like .hiat-card-viewport on screen), so every size is a fraction of the card width.
   Never viewport units (they depend on the page/paper size) and never fixed px. */
#print-membership-card{container-type:inline-size}
#print-membership-card>.khz-membership-face{box-sizing:border-box}
#print-membership-card .khz-member-front-data{grid-template-columns:24% minmax(0,1fr);gap:6%;width:100%;position:relative;top:-2.8cqw}
#print-membership-card .khz-member-details{gap:1.7cqw;max-height:100%}
#print-membership-card .khz-member-name,#print-membership-card .khz-member-back-details strong{font-size:3.6cqw;line-height:1.5}
#print-membership-card .khz-member-number,#print-membership-card .khz-member-back-details b{font-size:4.6cqw;line-height:1.2}
#print-membership-card .khz-member-fields{font-size:2.4cqw;gap:.8cqw 2cqw;line-height:1.5}
#print-membership-card .khz-member-validity{font-size:2.2cqw;white-space:nowrap;line-height:1.5}
#print-membership-card .khz-member-status{font-size:2cqw;padding:.6cqw 1.6cqw;line-height:1.5;max-width:100%;white-space:normal}
#print-membership-card .khz-member-back-details{gap:2cqw}
#print-membership-card .khz-member-back-details span,#print-membership-card .khz-member-qr{font-size:2.4cqw}
#print-membership-card .khz-member-photo{font-size:3.4cqw;border-radius:2cqw}
#print-membership-card .khz-member-qr{border-radius:2cqw}
@media print{
  @page{size:A4 portrait;margin:12mm}
  #print-membership-card{width:90mm!important}
  #print-membership-card>.khz-membership-face{width:90mm!important;height:60mm!important;min-height:60mm!important;aspect-ratio:auto!important}
}