/* =============================================================================
   KAR — sign in and create account
   The split layout: the car and what an account holds on one side, the form on
   the other. Loaded after kar.css, index.css and login.css on login.html and
   register.html only; everything is scoped under .auth-page / .auth-layout.
   ============================================================================= */

.auth-page main,
.auth-page .page-wrapper > main { flex: 1 1 auto; display: flex; padding: 0; }
.auth-page #main_body { flex: 1 1 auto; display: flex; }

.auth-layout { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 980px) { .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Visual panel ──────────────────────────────────────────────────────────── */
.auth-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 280px;
  padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 64px);
  background: var(--c-inverse);
  color: var(--c-inverse-text);
}
@media (min-width: 980px) { .auth-visual { order: -1; min-height: calc(100vh - var(--header-h)); } }
.auth-visual::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('/images/hero-car-v2.jpg') 42% 58% / cover no-repeat;
}
.auth-visual::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7, 13, 31, 0.15) 0%, rgba(7, 13, 31, 0.55) 45%, rgba(7, 13, 31, 0.92) 100%);
}
.auth-visual-inner { position: relative; max-width: 32rem; }

.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--kar-copper-lit); }
.auth-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }

.auth-visual h2.auth-visual-title {
  margin: 14px 0 0;
  font-family: var(--font-display); font-stretch: var(--stretch-display);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.08; color: #fff; text-align: left; text-wrap: balance;
}
.auth-visual p.auth-visual-lead { margin: 14px 0 0; max-width: 30rem; font-size: var(--fs-md); line-height: 1.6; color: var(--c-inverse-text-2); }

.auth-wordmark { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--c-inverse-rule); font-size: var(--fs-xs); color: var(--c-inverse-text-3); }
.auth-wordmark strong { color: #fff; font-weight: 700; font-stretch: 118%; letter-spacing: -0.01em; }

.auth-visual .unlock-box { margin-top: 24px; padding: 0; border: 0; background: none; }
.auth-visual .unlock-box-label { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-inverse-text-3); }
.auth-visual .unlock-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-inverse-rule); }
.auth-visual .unlock-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--c-inverse-rule); font-size: var(--fs-sm); line-height: 1.5; color: var(--c-inverse-text); }
.auth-visual .unlock-list li .ul-icon { flex-shrink: 0; color: var(--kar-copper-lit); }
.auth-visual .unlock-list li .ul-icon:empty::before { content: "✓"; }
.auth-visual .unlock-free { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--c-inverse-text-2); }
.auth-visual .unlock-free strong { color: #fff; font-weight: 600; }

/* ── Form panel ────────────────────────────────────────────────────────────── */
.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) var(--kar-gutter); }

.auth-layout .login-container { width: min(440px, 100%); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.auth-layout .login-container h2 { margin: 0; font-size: clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem); }
.auth-sub, .auth-layout .register-tagline { margin: 10px 0 28px; font-size: var(--fs-md); line-height: 1.55; color: var(--c-text-2); text-align: left; }
.auth-layout .register-tagline strong { color: var(--c-text); font-weight: 600; }

.auth-layout .form-group { margin-bottom: 16px; }
.auth-layout .form-group input { min-height: 50px; }

.auth-layout .password-wrapper { position: relative; width: 100%; }
.auth-layout .password-wrapper input { padding-right: 52px; }
.auth-layout .toggle-password {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 4px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--c-text-3); cursor: pointer;
}
.auth-layout .toggle-password:hover { color: var(--c-text); background: var(--c-bg); }
.auth-layout .toggle-password svg { width: 19px; height: 19px; pointer-events: none; }

.auth-layout .password-hint { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.auth-layout .strength-bar-wrap { height: 3px; margin-top: 8px; background: var(--c-rule-soft); overflow: hidden; }
.auth-layout .strength-bar-wrap:not(:has(.strength-bar[style])) { background: transparent; }
.auth-layout .strength-bar { height: 100%; width: 0%; transition: width var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease); }
.auth-layout .strength-label { margin-top: 5px; font-size: var(--fs-xs); font-weight: 600; }

.auth-layout .button-group { margin-top: 22px; }

.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-rule); }

.auth-google { display: flex; justify-content: center; min-height: 44px; margin-bottom: 4px; }

.auth-layout #login-error,
.auth-layout .success-message,
.auth-layout #logout-success,
.auth-layout .account-exist,
.auth-layout #account-exists {
  margin: 0 0 18px; padding: 11px 14px;
  border: 0; border-left: 2px solid;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; text-align: left;
}
.auth-layout #login-error, .auth-layout .account-exist, .auth-layout #account-exists { border-left-color: var(--c-neg); background: var(--c-neg-soft); color: #6d2015; }
.auth-layout .success-message, .auth-layout #logout-success { border-left-color: var(--c-pos); background: var(--c-pos-soft); color: #134a30; }

.auth-layout .auth-note { margin: 4px 0 14px; font-size: var(--fs-xs); line-height: 1.55; color: var(--c-text-3); text-align: left; }
.auth-layout .auth-note a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 3px; }

.auth-layout .login-links { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-rule); text-align: left; font-size: var(--fs-sm); color: var(--c-text-3); }
.auth-layout .login-links p { margin: 0 0 10px; }
.auth-layout .login-links p:last-child { margin-bottom: 0; }
.auth-layout .login-links a.register-button {
  display: inline-flex; align-items: center; min-height: 38px; margin-left: 6px; padding: 0 14px;
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-md);
  color: var(--c-text) !important; font-weight: 600; text-decoration: none;
}
.auth-layout .login-links a.register-button:hover { background: var(--c-text); color: var(--c-bg) !important; }

@media (min-width: 1500px) {
  .auth-visual-inner { max-width: 36rem; }
}