/* ==========================================================================
   RideCleaner auth experience (Login / Register)
   Scoped to Areas/Identity/Pages/Account/_AuthLayout.cshtml only — does not
   affect any other page in the app. Tokens mirror RideCleaner.Marketing's
   site.css so the auth screens read as the same product, not a different one.
   ========================================================================== */

:root {
  --brand-blue: #2f6fed;
  --brand-blue-dark: #1d54c4;
  --brand-blue-light: #eaf1ff;
  --ink: #0b0f19;
  --ink-soft: #4b5567;
  --ink-faint: #8891a3;
  --bg-soft: #f6f8fb;
  --border: #e7eaf2;
  --success: #16a34a;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
}

@media (prefers-color-scheme: dark) {
  /* Auth surfaces intentionally stay light/branded regardless of OS theme —
     matches the marketing site, which is light-only today. */
}

/* This layout doesn't load Bootstrap (deliberately, for a clean full-bleed
   design), so its box-sizing reset needs to happen here — without it,
   `width:100%` inputs add their own padding/border on top and overflow
   their container. */
*, *::before, *::after {
  box-sizing: border-box;
}

.auth-body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.auth-shell {
  display: grid;
  grid-template-columns: 45fr 55fr;
  min-height: 100vh;
}

/* ===== Left: brand / value panel ===== */
.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, #17233f 0%, transparent 60%),
    linear-gradient(180deg, #0a0e1a 0%, #0c1120 100%);
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 26px);
  pointer-events: none;
}

.auth-brand .brand-watermark {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 320px;
  height: 320px;
  opacity: 0.05;
  color: #5b8dff;
  pointer-events: none;
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  max-width: 440px;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
  margin-bottom: 56px;
}
.auth-logo svg { color: #fff; flex-shrink: 0; }
.auth-logo .dot { color: #5b8dff; }

.auth-brand-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7fa2ff;
  margin-bottom: 14px;
}

.auth-brand-content h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
}
.auth-brand-content h1 .accent { color: #5b8dff; }

.auth-brand-content .lede {
  color: #b7c0d6;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 32px;
}

.auth-benefits {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.94rem;
  color: #e7ebf5;
  font-weight: 500;
}
.auth-benefits svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #5b8dff;
}

.auth-trust-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #93a0bd;
  font-size: 0.82rem;
  font-weight: 600;
}
.auth-trust-row svg { color: #5b8dff; flex-shrink: 0; }
.auth-trust-row .sep { color: #465066; }

/* ===== Right: form panel ===== */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: #fff;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card .auth-mobile-logo { display: none; }

.auth-card h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.auth-card .auth-subtitle {
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0 0 32px;
}

/* ===== Fields ===== */
.af-field { margin-bottom: 20px; }
.af-field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}

.af-input-wrap { position: relative; }
.af-input-wrap svg.af-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
  transition: color 0.15s ease;
}

.af-field .form-control {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.96rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.af-field .form-control::placeholder { color: var(--ink-faint); }

.af-field .form-control:hover { border-color: #c9d1e0; }

.af-field .form-control:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px var(--brand-blue-light);
}
.af-field .form-control:focus ~ svg.af-icon,
.af-input-wrap:focus-within svg.af-icon { color: var(--brand-blue); }

.af-field .form-control.input-validation-error {
  border-color: var(--danger);
}
.af-field .form-control.input-validation-error:focus {
  box-shadow: 0 0 0 4px var(--danger-bg);
}

.af-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.af-password-toggle:hover { background: var(--bg-soft); color: var(--ink-soft); }
.af-password-toggle svg { width: 18px; height: 18px; }
.af-password-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

@keyframes af-fade-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

span.field-validation-error {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--danger);
  animation: af-fade-in 0.2s ease-out;
}
span.field-validation-valid { display: none; }

div.validation-summary-valid { display: none; }
div.validation-summary-errors {
  background: var(--danger-bg);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 20px;
  color: var(--danger);
  font-size: 0.86rem;
  font-weight: 600;
  animation: af-fade-in 0.25s ease-out;
}
div.validation-summary-errors ul { margin: 0; padding-left: 18px; }
div.validation-summary-errors li { list-style: disc; }

/* ===== Checkbox / row actions ===== */
.af-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 0.88rem;
}
.af-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-weight: 500;
  cursor: pointer;
}
.af-remember input[type="checkbox"] {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  accent-color: var(--brand-blue);
  cursor: pointer;
}
.af-forgot {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}
.af-forgot:hover { text-decoration: underline; }

/* ===== Primary button ===== */
.af-submit {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand-blue);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(47, 111, 237, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.af-submit:hover { background: var(--brand-blue-dark); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47, 111, 237, 0.34); }
.af-submit:active { transform: translateY(0) scale(0.99); }
.af-submit:focus-visible { outline: 2px solid var(--brand-blue-dark); outline-offset: 2px; }
.af-submit:disabled { cursor: default; opacity: 0.85; transform: none; }

.af-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: af-spin 0.7s linear infinite;
  display: none;
}
.af-submit.is-loading .af-spinner { display: inline-block; }
.af-submit.is-loading .af-btn-label-default { display: none; }
.af-submit .af-btn-label-loading { display: none; }
.af-submit.is-loading .af-btn-label-loading { display: inline; }

@keyframes af-spin { to { transform: rotate(360deg); } }

/* ===== Footer link / auxiliary note ===== */
.af-switch {
  text-align: center;
  margin-top: 28px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.af-switch a { color: var(--brand-blue); font-weight: 700; text-decoration: none; }
.af-switch a:hover { text-decoration: underline; }

.af-footnote {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink-faint);
  text-align: center;
}
.af-footnote a { color: var(--ink-soft); text-decoration: underline; }

/* ===== Entrance animation ===== */
.auth-animate {
  animation: af-panel-in 0.4s ease-out both;
}
@keyframes af-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-animate,
  span.field-validation-error,
  div.validation-summary-errors { animation: none !important; }
  .af-submit:hover { transform: none; }
}

/* ===== Responsive ===== */
@media (max-width: 1199.98px) {
  .auth-shell { grid-template-columns: 42fr 58fr; }
  .auth-brand { padding: 48px 40px; }
}

/* Tablet: still two columns, just narrower/denser — the brand panel stays,
   it just says less. Full hide-and-stack only happens below 767.98px. */
@media (max-width: 991.98px) and (min-width: 768px) {
  .auth-shell { grid-template-columns: 34fr 66fr; }
  .auth-brand { padding: 40px 28px; }
  .auth-brand-content h1 { font-size: 1.5rem; }
  .auth-brand-content .lede { font-size: 0.92rem; margin-bottom: 24px; }
  .auth-benefits { gap: 10px; margin-bottom: 24px; }
  .auth-benefits li { font-size: 0.86rem; }
  .auth-trust-row { font-size: 0.76rem; }
  .auth-panel { padding: 40px 28px; }
}

@media (max-width: 767.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-panel { padding: 40px 24px; min-height: 100vh; }
  .auth-card .auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
    margin-bottom: 40px;
  }
  .auth-card .auth-mobile-logo svg { color: var(--ink); }
  .auth-card .auth-mobile-logo .dot { color: var(--brand-blue); }
}

@media (max-width: 575.98px) {
  .auth-panel { padding: 32px 20px; }
  .auth-card h2 { font-size: 1.4rem; }
  .af-field .form-control { height: 50px; font-size: 1rem; }
  .af-submit { height: 50px; }
}