/* =============================================================
   auth.css — shared layout + components for login / register / OTP
   Used by users/login.html, verify_otp.html, phone_register.html,
   role_selection.html, complete_register.html.
   Tokens from design-system.css.
   ============================================================= */

body.auth-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #F8FAFC 0%, #E6F7F4 100%);
  font-family: var(--ds-font);
  color: var(--ds-ink);
}

.auth-shell {
  display: grid;
  grid-template-columns: 5fr 6fr;
  min-height: 100vh;
  direction: rtl;
}

/* Left "hero" column — brand + copy.
   Cityscape photo lives at /static/images/background.jpeg; the brand-teal
   gradient is laid over it at ~75% opacity so copy stays readable while the
   photograph still reads as a city/real-estate image. */
.auth-hero {
  background:
    linear-gradient(160deg, rgba(0, 166, 147, 0.78) 0%, rgba(0, 91, 93, 0.92) 100%),
    url('/static/images/background.jpeg') center/cover no-repeat;
  color: #fff;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(110, 231, 183, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(255, 133, 82, 0.16) 0%, transparent 50%);
  pointer-events: none;
}
.auth-hero__logo {
  font-size: var(--ds-text-2xl);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.auth-hero__logo i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-lg);
}
.auth-hero__body { position: relative; max-width: 420px; }
.auth-hero__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 14px;
}
.auth-hero__subtitle {
  font-size: var(--ds-text-base);
  line-height: 1.9;
  opacity: 0.92;
}
.auth-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 10px;
}
.auth-hero__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ds-text-base);
}
.auth-hero__bullets li i {
  color: #6EE7B7;
  background: rgba(255, 255, 255, 0.15);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-sm);
}
.auth-hero__footer { position: relative; font-size: var(--ds-text-sm); opacity: 0.7; }

/* Right column — form card */
.auth-panel {
  background: var(--ds-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.auth-card__head { text-align: center; }
.auth-card__title  { font-size: var(--ds-text-2xl); font-weight: 800; color: var(--ds-ink); margin: 0 0 6px; }
.auth-card__sub    { font-size: var(--ds-text-base); color: var(--ds-muted); margin: 0; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field__control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: 0 14px;
  min-height: 52px;
  transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
}
.auth-field__control:focus-within {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.15);
}
.auth-field__control input {
  flex: 1;
  border: none;
  background: transparent;
  font: 500 1rem var(--ds-font);
  color: var(--ds-ink);
  outline: none;
  padding: 0;
  direction: rtl;
  text-align: right;
  min-height: 52px;
}
.auth-field__control input[type="tel"],
.auth-field__control input[type="number"] { direction: ltr; text-align: left; }
.auth-field__control input::placeholder { color: var(--ds-muted-2); }
.auth-field__control .icon-left,
.auth-field__control .icon-right { color: var(--ds-muted-2); }
.auth-field__control .icon-left  { margin-inline-end: 10px; }
.auth-field__control .icon-right { margin-inline-start: 10px; cursor: pointer; background: none; border: none; }

.auth-field__label {
  font-size: var(--ds-text-sm);
  font-weight: 600;
  color: var(--ds-ink-2);
}
.auth-field__help  { font-size: var(--ds-text-xs); color: var(--ds-muted); }
.auth-hint {
  display: block;
  margin-top: 6px;
  font-size: var(--ds-text-xs);
  color: var(--ds-muted);
  line-height: 1.6;
  /* Persian-numeral feature */
  font-feature-settings: "tnum";
}
.auth-field__error {
  font-size: var(--ds-text-sm);
  color: var(--ds-danger);
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-field__error i { font-size: var(--ds-text-xs); }

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ds-brand);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-md);
  padding: 14px 20px;
  min-height: 52px;
  font: 700 1rem var(--ds-font);
  cursor: pointer;
  transition: background var(--ds-fast), transform var(--ds-fast), box-shadow var(--ds-fast);
  box-shadow: var(--ds-shadow-brand);
}
.auth-submit:hover  { background: var(--ds-brand-700); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
.auth-submit .spin {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auth-spin 0.75s linear infinite;
  display: none;
}
.auth-submit.is-loading .spin { display: inline-block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.auth-alt {
  text-align: center;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}
.auth-alt a {
  color: var(--ds-brand);
  font-weight: 700;
  text-decoration: none;
}
.auth-alt a:hover { text-decoration: underline; }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
}
.auth-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.auth-row label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ds-brand); }

/* OTP — 6 boxed inputs */
.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
  direction: ltr;
}
.otp-boxes input {
  width: 52px;
  height: 60px;
  border-radius: var(--ds-radius-md);
  border: 1.5px solid var(--ds-line);
  font-size: var(--ds-text-xl);
  font-weight: 700;
  text-align: center;
  background: var(--ds-surface);
  color: var(--ds-ink);
  transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
  font-variant-numeric: tabular-nums;
}
.otp-boxes input:focus {
  outline: none;
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.15);
}
.otp-timer {
  font-size: var(--ds-text-sm);
  color: var(--ds-muted);
  text-align: center;
  direction: ltr;
}

/* Role cards — role_selection page */
.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.role-card {
  position: relative;
  padding: 20px;
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  text-align: center;
  cursor: pointer;
  transition: all var(--ds-fast);
  /* A coloured rail down the inset-inline-start side gives each role a
     distinct visual identity at a glance. The colour is controlled
     per-role by the [data-role] modifier below. */
  border-inline-start-width: 4px;
}
.role-card:hover { border-color: var(--ds-brand); background: var(--ds-brand-50); }
.role-card[data-role="seller"]   { border-inline-start-color: var(--ds-brand); }
.role-card[data-role="counselor"]{ border-inline-start-color: var(--ds-accent); }
.role-card[data-role="agent"]    { border-inline-start-color: var(--ds-brand-800); }
.role-card[data-role="seller"]   .role-card__icon { background: var(--ds-brand-50); color: var(--ds-brand); }
.role-card[data-role="counselor"].role-card__icon,
.role-card[data-role="counselor"] .role-card__icon {
  background: rgba(255, 133, 82, 0.12); color: var(--ds-accent);
}
.role-card[data-role="agent"]    .role-card__icon { background: var(--ds-brand-100); color: var(--ds-brand-800); }
.role-card input[type="radio"] { position: absolute; opacity: 0; }
.role-card input[type="radio"]:checked + .role-card__inner {
  color: var(--ds-brand-800);
}
.role-card:has(input:checked) {
  border-color: var(--ds-brand);
  background: var(--ds-brand-50);
  box-shadow: var(--ds-shadow-md);
}
.role-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-brand-50);
  color: var(--ds-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-lg);
  margin-bottom: 10px;
}
.role-card__title { font-size: var(--ds-text-base); font-weight: 700; margin: 0 0 4px; color: var(--ds-ink); }
.role-card__desc  { font-size: var(--ds-text-xs); color: var(--ds-muted); margin: 0; line-height: 1.5; }

/* Responsive */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-panel { padding: 48px 20px 32px; }
}
@media (max-width: 480px) {
  .auth-card { max-width: 100%; }
  .otp-boxes input { width: 44px; height: 54px; font-size: var(--ds-text-lg); }
  .role-grid { grid-template-columns: 1fr; }
}

/* Owner Sec 9: divider + alternate auth buttons under the password form. */
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
  margin: 18px 0 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ds-line);
}

.auth-alt-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.auth-alt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-line);
  background: #fff;
  color: var(--ds-ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color var(--ds-fast), background var(--ds-fast);
  cursor: pointer;
}
.auth-alt-btn:hover { border-color: var(--ds-brand); background: var(--ds-brand-50); }
.auth-alt-btn--otp i { color: var(--ds-brand); }
.auth-alt-btn--google:hover { background: #f7f7f7; border-color: var(--ds-line); }