/* Pakstoor :: pks-phone-verify.css :: v1.0-000002 :: 2026-10-20 */
/*
  Copyright (c) 2026 Pakstoor (Pty) Ltd. All rights reserved.
  Mobile number verification card (js/pks-phone-verify.js): login step (#phoneVerifyStep) and /account (#phone).
  Colour roles (Brand Pack v1.0): orange = the primary action and focus (text on orange #141414; orange text in
  light mode #B5520F), green = the verified outcome, yellow-amber = warnings (expiry, limits), red = errors.
  Existing tokens only; dark is the default, light overrides sit under [data-theme="light"].
*/
.pkv {
  --pkv-surface: var(--bg-1, #1F1F1F);
  --pkv-line: var(--line-2, #3A3A3A);
  --pkv-ink: var(--ink, #ECEFF2);
  --pkv-ink-dim: var(--ink-dim, #8B939D);
  --pkv-brand: var(--pk-brand, #F47A20);
  --pkv-brand-hover: var(--pk-brand-hover, #FF8A3D);
  --pkv-brand-ink: var(--pk-brand-ink, #141414);
  --pkv-brand-text: var(--pk-brand-text, #F47A20);
  --pkv-ok: var(--success, #5EA872);
  --pkv-warn: var(--pk-warn, #E8B339);
  --pkv-danger: var(--danger, #D85145);
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  color: var(--pkv-ink);
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.pkv *, .pkv *::before, .pkv *::after { box-sizing: border-box; }
.pkv[hidden] { display: none !important; }

.pkv-card {
  background: var(--pkv-surface);
  border: 1px solid var(--pkv-line);
  border-radius: var(--r-5, 16px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* On /login the auth form already provides the panel. */
.pkv--login .pkv-card { background: transparent; border: 0; padding: 0; }
/* login.css fades every direct child of .auth-form in after a 0.3 s delay; each screen swap re-inserts the card,
   so keep the fade but drop the delay (no blank card between "Send code" and the code screen). */
.auth-page-login .auth-form.pkv > .pkv-card { animation-delay: 0s; animation-duration: 240ms; }
.pkv--account { margin: 0 0 20px; }

.pkv-head { display: flex; align-items: center; gap: 12px; }
.pkv-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pkv-brand-text); background: var(--pk-brand-wash, rgba(244, 122, 32, .10));
}
.pkv-title { margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 700; color: var(--pkv-ink); }
.pkv-text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--pkv-ink); }
.pkv-hint, .pkv-note { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--pkv-ink-dim); }
.pkv-label { display: block; margin: 4px 0 0; font-size: .95rem; font-weight: 600; color: var(--pkv-ink); }

.pkv-input {
  display: block; width: 100%; height: 56px; margin: 0;
  padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--pkv-line); background: var(--bg, #141414); color: var(--pkv-ink);
  font-family: var(--font-mono, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 24px; letter-spacing: .35em; text-align: center;
  -webkit-appearance: none; appearance: none;
}
.pkv-input::placeholder { color: var(--pkv-ink-dim); opacity: .45; }
.pkv-input:focus { outline: none; border-color: var(--pkv-brand); box-shadow: 0 0 0 3px var(--pk-brand-wash-2, rgba(244, 122, 32, .18)); }
/* Review 2026-10-20: core.css input[type=text]:focus (light blue) and light-mode.css input:focus:not(...) !important
   out-rank the rule above; same id-weighted pattern as pks-brand.css so the focus ring is always brand orange. */
html:not(#pkb):not(#pkc) body .pkv .pkv-input:focus { outline: none !important; border-color: var(--pkv-brand) !important; box-shadow: 0 0 0 3px var(--pk-brand-wash-2, rgba(244, 122, 32, .18)) !important; }

.pkv-countdown { margin: 0; min-height: 1.3em; font-size: .9rem; color: var(--pkv-ink-dim); font-variant-numeric: tabular-nums; }
.pkv-msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.45; border: 1px solid var(--pkv-line); }
.pkv-msg[hidden] { display: none; }
.pkv-msg--ok { color: var(--pkv-ok); border-color: rgba(94, 168, 114, .45); background: var(--success-wash, rgba(94, 168, 114, .10)); }
.pkv-msg--warn { color: var(--pkv-warn); border-color: rgba(232, 179, 57, .45); background: rgba(232, 179, 57, .10); }
.pkv-msg--error { color: var(--pkv-danger); border-color: rgba(216, 81, 69, .45); background: var(--danger-wash, rgba(216, 81, 69, .10)); }

.pkv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.pkv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; border: 1px solid transparent; white-space: normal; text-align: center;
}
.pkv-btn:disabled { opacity: .55; cursor: not-allowed; }
.pkv-btn:focus-visible, .pkv-link:focus-visible { outline: 2px solid var(--pkv-brand); outline-offset: 2px; }
.pkv-btn--primary { background: var(--pkv-brand); color: var(--pkv-brand-ink); border-color: var(--pkv-brand); }
.pkv-btn--primary:hover:not(:disabled) { background: var(--pkv-brand-hover); border-color: var(--pkv-brand-hover); }
.pkv-btn--ghost { background: transparent; color: var(--pkv-ink); border-color: var(--pkv-line); }
.pkv-btn--ghost:hover:not(:disabled) { border-color: var(--pkv-ink-dim); }
.pkv-btn--text { background: transparent; color: var(--pkv-brand-text); border-color: transparent; padding: 0 12px; font-variant-numeric: tabular-nums; }
.pkv-btn--text:disabled { color: var(--pkv-ink-dim); }

.pkv-change-hint { margin-top: -6px; }
.pkv-foot { margin: 0; font-size: .9rem; color: var(--pkv-ink-dim); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pkv-link { color: var(--pkv-brand-text); text-decoration: underline; text-underline-offset: 2px; }
.pkv-sep { color: var(--pkv-ink-dim); }

.pkv-card--success { align-items: center; text-align: center; }
.pkv-tick {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pkv-ok); background: var(--success-wash, rgba(94, 168, 114, .12)); border: 1px solid rgba(94, 168, 114, .45);
}
.pkv-success { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--pkv-ok); }

/* Light theme */
:root[data-theme="light"] .pkv {
  --pkv-surface: #FFFFFF;
  --pkv-line: rgba(20, 20, 20, .14);
  --pkv-ink: #141414;
  --pkv-ink-dim: #5A6270;
  --pkv-brand-text: var(--pk-brand-text-light, #B5520F);
  --pkv-ok: #2F7A45;
  --pkv-warn: var(--pk-warn-light, #8A6500);
  --pkv-danger: #B23A30;
}
:root[data-theme="light"] .pkv-input { background: #FFFFFF; }
/* Phones: full-width actions, primary first, resend as a text button under it. */
@media (max-width: 540px) {
  .pkv-card { padding: 18px 16px; }
  .pkv--login .pkv-card { padding: 0; }
  .pkv-title { font-size: 1.2rem; }
  .pkv-input { height: 48px; font-size: 24px; }
  .pkv-actions { flex-direction: column; align-items: stretch; }
  .pkv-btn { width: 100%; }
  .pkv-btn--text { min-height: 44px; }
}