/**
 * auth-pages.css — Authentication page styles: login/signup cards, OTP input,
 * auth segmented tabs, step indicators, split brand panel, validation colors.
 *
 * Loaded in: templates/layouts/auth.html.twig, templates/layouts/auth-public.html.twig
 * Depends on: design-tokens.css, foundation.css, app.css (shared tokens)
 */

/* =====================================================================
   9. AUTH PAGES
   ===================================================================== */
.kp-auth-card {
  width: 100%;
  max-width: 420px;
}

/* OTP single-line input */
.kp-otp-input {
  text-align: center;
  font-size: 1.5rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 8px;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── 9a. Auth segmented tabs (pill toggle — bilgilcer.tr style) ── */
.kp-auth-tabs {
  display: flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 5px;
  gap: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border);
}
.kp-auth-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-3);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kp-auth-tab:hover {
  color: var(--text-2);
}
.kp-auth-tab.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.kp-auth-tab iconify-icon {
  flex-shrink: 0;
}

/* ── 9a2. Auth input icon addon ── */
.kp-input-icon {
  background: var(--surface-1);
  border-color: var(--border);
  color: var(--text-3);
}

/* ── 9a3. Auth input validation colors ── */
.kp-input-valid .kp-input-icon { border-color: var(--success); color: var(--success); }
.kp-input-invalid .kp-input-icon { border-color: var(--danger); color: var(--danger); }
.kp-input-warning .kp-input-icon { border-color: var(--warning); color: var(--warning); }
.kp-input-warning .form-control {
  border-color: var(--warning);
}
.kp-input-warning .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.25);
}

/* ── 9b. Split auth brand panel ── */
.kp-auth-brand-panel {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
[data-theme="dark"] .kp-auth-brand-panel {
  background: var(--surface-3);
  border-right: 1px solid var(--border);
}

/* ── 9b. OTP individual digit boxes ── */
.kp-otp-box {
  width: 3rem;
  height: 3.5rem;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-2);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  padding: 0;
}
.kp-otp-box:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

/* ── 9c. Signup step indicator ── */
.kp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: var(--surface-3);
  color: var(--text-3);
  flex-shrink: 0;
}
.kp-step.is-active {
  background: var(--primary);
  color: #fff;
}
.kp-step.is-completed {
  background: var(--success);
  color: #fff;
}