/* ─────────────────────────────────────────────────────────
   Tracks Travel – نظام OTP العربي
   Aesthetic: Luxury Desert — deep navy + burnished gold
   Direction: RTL Arabic-first
───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Amiri:wght@400;700&display=swap');

:root {
  --t-navy:         #0c1628;
  --t-navy-card:    rgba(16,28,55,0.82);
  --t-gold:         #c9922a;
  --t-gold-lt:      #e8b84b;
  --t-gold-bright:  #f5cc6a;
  --t-gold-glow:    rgba(201,146,42,.35);
  --t-gold-dim:     rgba(201,146,42,.10);
  --t-amber:        #d4711e;
  --t-border:       rgba(201,146,42,.25);
  --t-border-focus: rgba(232,184,75,.7);
  --t-text:         #f2e8d5;
  --t-muted:        rgba(220,200,170,.55);
  --t-error:        #e05c5c;
  --t-success:      #4ecb8d;
  --t-radius:       16px;
  --t-shadow:       0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(201,146,42,.15);
  --t-font-head:    'Amiri', serif;
  --t-font-body:    'Tajawal', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Wrapper ── */
.tracks-otp-wrap {
  font-family: var(--t-font-body);
  direction: rtl;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: transparent;
}

/* ── Card ── */
.tracks-step {
  background: var(--t-navy-card);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-radius: 24px;
  box-shadow: var(--t-shadow);
  padding: 2.8rem 2.6rem;
  width: 100%;
  max-width: 440px;
  animation: tracksSlideUp .5s cubic-bezier(.22,1,.36,1) both;
  border: 1px solid var(--t-border);
  position: relative;
  overflow: hidden;
}

/* Gold shimmer top bar */
.tracks-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--t-gold) 30%, var(--t-gold-bright) 50%, var(--t-gold) 70%, transparent 100%);
  animation: shimmerBar 3s ease-in-out infinite;
}

.tracks-step::after {
  content: '✦';
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  font-size: .85rem;
  color: var(--t-gold);
  opacity: .4;
}

@keyframes shimmerBar {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

@keyframes tracksSlideUp {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Brand header ── */
.tracks-brand {
  text-align: center;
  margin-bottom: 1.8rem;
}
.tracks-icon {
  font-size: 2.6rem;
  display: block;
  margin-bottom: .6rem;
  filter: drop-shadow(0 0 12px var(--t-gold-glow));
  animation: floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.tracks-brand h2 {
  font-family: var(--t-font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--t-gold-lt);
  margin: 0 0 .4rem;
  text-shadow: 0 0 30px var(--t-gold-glow);
}
.tracks-brand p {
  color: var(--t-muted);
  font-size: .95rem;
  margin: 0;
  font-weight: 300;
}

/* ── Tab switcher ── */
.tracks-tabs {
  display: flex;
  flex-direction: row-reverse;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 1.8rem;
  border: 1px solid var(--t-border);
  gap: 3px;
}
.tracks-tab {
  flex: 1;
  padding: .65rem;
  border: none;
  border-radius: 9px;
  font-family: var(--t-font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--t-muted);
  transition: background .25s, color .25s, box-shadow .25s;
}
.tracks-tab.active {
  background: linear-gradient(135deg, var(--t-gold) 0%, var(--t-gold-lt) 100%);
  color: var(--t-navy);
  box-shadow: 0 3px 14px var(--t-gold-glow);
  font-weight: 700;
}

/* ── Fields ── */
.tracks-field { margin-bottom: 1.1rem; }
.tracks-field label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--t-gold);
  margin-bottom: .4rem;
  opacity: .85;
}
.tracks-field input,
.tracks-field select {
  width: 100%;
  padding: .82rem 1.1rem;
  border: 1.5px solid var(--t-border);
  border-radius: var(--t-radius);
  font-family: var(--t-font-body);
  font-size: 1rem;
  color: var(--t-text);
  background: rgba(255,255,255,.05);
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
  direction: rtl;
  text-align: right;
}
.tracks-field input::placeholder { color: rgba(220,200,170,.25); }
.tracks-field input:focus,
.tracks-field select:focus {
  outline: none;
  border-color: var(--t-border-focus);
  box-shadow: 0 0 0 3px rgba(232,184,75,.14);
  background: rgba(255,255,255,.07);
}
.tracks-field select option { background: #0e1e3a; color: var(--t-text); }

/* ── Phone row ── */
.tracks-phone-row {
  display: flex;
  flex-direction: row-reverse;
  gap: .6rem;
}
.tracks-phone-row select {
  width: auto;
  min-width: 118px;
  flex-shrink: 0;
  text-align: center;
  direction: ltr;
}
.tracks-phone-row input {
  flex: 1;
  direction: ltr;
  text-align: left;
}

/* ── reCAPTCHA ── */
#tracks-recaptcha,
#tracks-login-recaptcha { margin: .5rem 0; min-height: 0; }

/* ── Primary button ── */
.tracks-btn {
  width: 100%;
  padding: .95rem 1rem;
  background: linear-gradient(135deg, var(--t-gold) 0%, var(--t-gold-lt) 60%, var(--t-amber) 100%);
  color: var(--t-navy);
  border: none;
  border-radius: var(--t-radius);
  font-family: var(--t-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .7rem;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-shadow: 0 4px 22px var(--t-gold-glow);
  position: relative;
  overflow: hidden;
}
.tracks-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 60%);
  pointer-events: none;
}
.tracks-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 30px var(--t-gold-glow); opacity: .95; }
.tracks-btn:active { transform: translateY(0); }
.tracks-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.tracks-btn--ghost {
  background: transparent;
  color: var(--t-gold-lt);
  border: 1.5px solid var(--t-border);
  margin-top: .5rem;
  box-shadow: none;
  font-weight: 500;
}
.tracks-btn--ghost::after { display: none; }
.tracks-btn--ghost:hover { background: var(--t-gold-dim); border-color: var(--t-gold); opacity: 1; box-shadow: none; }

/* ── OTP digit boxes ── */
.tracks-otp-boxes {
  display: flex;
  flex-direction: row-reverse;
  gap: .55rem;
  justify-content: center;
  margin: 1.6rem 0;
}
.tracks-otp-digit {
  width: 52px;
  height: 60px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--t-text);
  border: 1.5px solid var(--t-border);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s;
  outline: none;
  caret-color: var(--t-gold-lt);
  direction: ltr;
}
.tracks-otp-digit:focus {
  border-color: var(--t-border-focus);
  box-shadow: 0 0 0 3px rgba(232,184,75,.18);
  background: rgba(255,255,255,.07);
  transform: scale(1.08);
}
.tracks-otp-digit.filled {
  border-color: var(--t-gold);
  background: var(--t-gold-dim);
  color: var(--t-gold-bright);
  box-shadow: 0 0 12px rgba(201,146,42,.2);
}

/* ── Error ── */
.tracks-error {
  color: var(--t-error);
  font-size: .87rem;
  min-height: 1.2em;
  text-align: center;
  margin: .4rem 0;
  font-weight: 500;
}

/* ── Success step ── */
.tracks-success-icon { animation: tracksBounce .6s ease both .2s; }
@keyframes tracksBounce {
  0%   { transform: scale(.3) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.tracks-success-card {
  background: rgba(78,203,141,.06);
  border-radius: var(--t-radius);
  padding: 1.2rem 1.5rem;
  margin: 1.2rem 0;
  border-right: 3px solid var(--t-success);
  text-align: right;
}
.tracks-success-card p { margin: .45rem 0; color: var(--t-text); font-size: .97rem; }

/* ── Switch link ── */
.tracks-switch-link {
  text-align: center;
  font-size: .88rem;
  color: var(--t-muted);
  margin-top: 1.2rem;
}
.tracks-switch-link a,
.tracks-switch-link button {
  color: var(--t-gold-lt);
  text-decoration: none;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--t-font-body);
  font-size: .88rem;
  padding: 0;
}
.tracks-switch-link a:hover,
.tracks-switch-link button:hover { color: var(--t-gold-bright); text-decoration: underline; }

/* ── Resend timer ── */
#tracks-resend-timer,
#tracks-login-resend-timer { font-size: .84rem; color: var(--t-gold); font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 480px) {
  .tracks-step { padding: 2rem 1.5rem; }
  .tracks-otp-digit { width: 44px; height: 52px; font-size: 1.3rem; }
  .tracks-brand h2 { font-size: 1.7rem; }
}