/* styles-gate.css — self-contained dark SportTech gate stylesheet
 * gate.html does NOT link styles.css; all --vex-* tokens are re-declared here.
 * No hardcoded hex values in component rules — only :root token declarations.
 */

/* ─── 1. Token block (verbatim from styles.css :root) ─── */
:root {
  color-scheme: dark;

  --vex-green-violet: #12ab13;
  --vex-neon-green: #8ee62e;
  --vex-deep-green: #4fcb3a;
  --vex-olive-green: #4a8f2a;
  --vex-jet-black: #252524;
  --vex-graphite: #10110f;
  --vex-paper: #ffffff;
  --vex-shell: #f3f5ef;
  --vex-mist: #e8ece3;
  --vex-ink: #181914;
  --vex-muted: #565f51;
  --vex-border: rgba(37, 37, 36, 0.1);
  --vex-glow: rgba(142, 230, 46, 0.22);
  --vex-shadow-soft: 0 10px 28px rgba(16, 20, 14, 0.08);
  --vex-shadow-deep: 0 24px 60px rgba(14, 18, 13, 0.16);
  --vex-radius-page: 24px;
  --vex-radius-panel: 22px;
  --vex-radius-card: 18px;
  --vex-radius-control: 12px;
  --vex-texture-url: none;
  --vex-poster-url: none;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --text-1: 12px;
  --text-2: 14px;
  --text-3: 16px;
  --text-4: 20px;
  --text-5: 28px;

  --surface-1: rgba(255, 255, 255, 0.84);
  --surface-2: rgba(255, 255, 255, 0.72);
  --surface-dark: linear-gradient(180deg, #141612 0%, #0b0d0a 100%);
  --surface-dark-border: rgba(255, 255, 255, 0.06);

  --vex-danger: #c1272d;
  --vex-warning: #8a6500;
  --vex-success: #2e7d32;
  --vex-surface: var(--vex-shell);
  --vex-text: var(--vex-ink);
  --vex-focus: 2px solid var(--vex-green-violet);
}

/* ─── 2. Base reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans Arabic", "Avenir Next", "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-3);
  line-height: 1.5;
}

button,
input,
select {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ─── 3. body — dark SportTech centred shell ─── */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top right, var(--vex-glow), transparent 22%),
    var(--surface-dark);
  color: var(--vex-paper);
}

/* ─── 4. Language toggle (fixed top-right) ─── */
.gate-lang-toggle {
  position: fixed;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--surface-dark-border);
  border-radius: var(--vex-radius-control);
  color: var(--vex-paper);
  font-size: var(--text-2);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.gate-lang-toggle:hover {
  border-color: rgba(18, 171, 19, 0.28);
}

.gate-lang-toggle:focus-visible {
  outline: var(--vex-focus);
  outline-offset: 2px;
}

/* ─── 5. Gate card ─── */
.gate-card {
  max-width: 400px;
  width: calc(100% - 2 * var(--space-5));
  background: var(--vex-jet-black);
  border: 1px solid var(--surface-dark-border);
  border-radius: var(--vex-radius-card);
  box-shadow: var(--vex-shadow-deep);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ─── 6. Logo ─── */
.gate-logo {
  display: block;
  margin: 0 auto var(--space-2);
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ─── 7. Title block ─── */
.gate-title-block {
  text-align: center;
}

.gate-title-block h1,
.gate-heading {
  font-size: var(--text-4);
  font-weight: 600;
  line-height: 1.2;
  color: var(--vex-paper);
  margin: 0;
}

.gate-title-block p,
.gate-subtitle {
  font-size: var(--text-3);
  font-weight: 400;
  line-height: 1.5;
  color: var(--vex-muted);
  margin: 0;
}

/* ─── 7b. Wizard step sections — only one visible at a time (gate.js: showStep) ─── */
/* Enforce [hidden] even when a parent uses display:flex/grid */
.gate-step[hidden],
[hidden] {
  display: none !important;
}

/* ─── 8. Form field wrapper ─── */
.gate-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gate-field label {
  font-size: var(--text-2);
  font-weight: 400;
  color: var(--vex-paper);
}

.gate-field input {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--space-4);
  padding-block: var(--space-3);
  border-radius: var(--vex-radius-control);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--surface-dark-border);
  color: var(--vex-paper);
  font-size: var(--text-3);
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.gate-field input::placeholder {
  color: var(--vex-muted);
}

.gate-field input:hover {
  border-color: rgba(18, 171, 19, 0.28);
}

.gate-field input:focus-visible {
  outline: var(--vex-focus);
  outline-offset: 2px;
}

.gate-field input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.04);
}

.gate-field input[aria-invalid="true"] {
  border-color: var(--vex-danger);
  box-shadow: 0 0 0 3px rgba(193, 39, 45, 0.12);
}

/* ─── 8b. Onboard step: stacked label+input pairs with extra gap ─── */
.gate-onboard-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

/* ─── 9. PIN input special rule ─── */
/* direction: ltr is CRITICAL — must always apply even inside html[dir="rtl"] */
.gate-pin-input {
  direction: ltr;
  text-align: center;
  letter-spacing: 0.25em;
  font-size: var(--text-4);
}

/* ─── 10. Primary button (Send / Verify) ─── */
.gate-btn-primary {
  display: block;
  width: 100%;
  min-height: 48px;
  background: var(--vex-green-violet);
  color: var(--vex-neon-green);
  font-size: var(--text-3);
  font-weight: 600;
  border: none;
  border-radius: var(--vex-radius-control);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gate-btn-primary:hover {
  background: var(--vex-olive-green);
  box-shadow: 0 0 0 4px var(--vex-glow);
  transform: translateY(-1px);
}

.gate-btn-primary:focus-visible {
  outline: var(--vex-focus);
  outline-offset: 2px;
}

.gate-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.gate-btn-primary:disabled,
.gate-btn-primary[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* ─── 11. Loading spinner ─── */
.gate-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: var(--vex-neon-green);
  border-radius: 50%;
  animation: gate-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-inline-end: var(--space-1);
}

@keyframes gate-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── 12. Status / error region ─── */
.gate-status {
  min-height: 20px;
  font-size: var(--text-2);
  text-align: center;
}

.gate-status--error {
  color: var(--vex-danger);
}

.gate-status--success {
  color: var(--vex-success);
}

/* ─── 13. Sub-actions row (Step 2 only) ─── */
.gate-subactions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ─── 14. Resend countdown + resend button ─── */
.gate-resend-countdown {
  font-size: var(--text-2);
  color: var(--vex-muted);
  opacity: .6;
}

.gate-resend-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vex-neon-green);
  font-size: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.gate-resend-btn:focus-visible {
  outline: var(--vex-focus);
  outline-offset: 2px;
}

/* ─── 15. "Use another number" link ─── */
.gate-use-another {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--vex-muted);
  font-size: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  transition: color 160ms ease;
}

.gate-use-another:hover {
  color: var(--vex-paper);
}

.gate-use-another:focus-visible {
  outline: var(--vex-focus);
  outline-offset: 2px;
}

.gate-use-another:active {
  color: var(--vex-neon-green);
}

/* ─── 16. Accessibility: reduced motion ─── */
/* styles.css is NOT linked by gate.html — this block must exist independently */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}