/* ============================================================================
   Account pages — Sign In / Sign Up / Continue with Email / Verification
   Used together with _LayoutMinimal.cshtml.
   ========================================================================== */

.page--account {
  background: var(--color-white);
}

.account-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.account-page__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 20px 40px;
  width: 100%;
}

/* ------- Logo ------------------------------------------------------------ */

.account-logo {
  display: inline-flex;
  margin-bottom: var(--space-7);
}
.account-logo img {
  width: 84px;        /* Figma: logo mark ~84px */
  height: auto;
}

/* ------- Headings / labels ------------------------------------------------ */

.account-heading {
  /* Figma: 28/38px, weight 400, #333. */
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin-bottom: var(--space-5);
  text-align: center;
}
.account-subheading {
  /* Figma: 18/25px, #949494. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: #949494;
  margin-bottom: var(--space-6);
  text-align: center;
  max-width: 530px;
}
.account-email-display {
  /* Figma: 28/38px, weight 400, #333. */
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-normal);
  color: var(--color-body-strong);
  margin-bottom: var(--space-5);
  text-align: center;
}

/* ------- The grey card --------------------------------------------------- */

.account-card {
  /* Figma: #EFEFEF card, radius 10, 20px padding, 530px wide (input cards). */
  background: #EFEFEF;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 530px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.account-card--stacked { gap: 10px; }
.account-card--otp { padding: 20px; }
/* Figma: the Sign In provider-button card is narrower (418px), ~16px inset, 17px gap. */
.page--account-signin .account-card {
  max-width: 418px;
  padding: 16px;
  gap: 17px;
}

/* ------- OAuth + email buttons inside the card --------------------------- */

.account-btn {
  /* Figma: 56px white buttons, radius 6, no border; 18px/400 label. */
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 20px;
  background: var(--color-white);
  border-radius: 6px;
  color: var(--color-body-strong);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.account-btn:hover { background: #FAFAFA; color: var(--color-body-strong); }
/* Brand logos are SVGs of differing aspect ratios — normalise to a fixed slot
   and let object-fit keep each one's proportions/colours. */
.account-btn__icon { width: 24px; height: 24px; object-fit: contain; }
.account-btn__label { flex: 1; text-align: center; padding-inline-end: 24px; /* offset icon width so text is visually centered */ }

/* ------- Form inputs ----------------------------------------------------- */

.account-input {
  /* Figma: white field, 70px tall, radius 6, 18px text, #949494 placeholder. */
  width: 100%;
  padding: 23px 20px;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  font-family: inherit;   /* locale font: Noto Sans (LTR) / Noto Naskh Arabic (RTL) */
}
.account-input:focus {
  outline: none;
  border-color: var(--color-pink);
}
.account-input::placeholder {
  color: #949494;
}

/* ------- OTP cells ------------------------------------------------------- */

.account-otp {
  display: flex;
  justify-content: space-between;
  gap: 9px;
}
.account-otp__cell {
  /* Figma: 74×117 white cells, radius 6, 40px bold digits. */
  flex: 1;
  width: 0;
  aspect-ratio: 74 / 117;
  max-width: 74px;
  font-size: 40px;
  font-weight: var(--font-weight-bold);
  text-align: center;
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-body-strong);
  font-family: inherit;   /* locale font: Noto Sans (LTR) / Noto Naskh Arabic (RTL) */
}
.account-otp__cell:focus {
  outline: none;
  border-color: var(--color-pink);
}

/* ------- Actions row (Continue button + countdown + resend) -------------- */

.account-form {
  width: 100%;
  max-width: 530px;     /* Figma: input/OTP cards are 530px wide */
  display: flex;
  flex-direction: column;
  /* 30px between the input card (email / OTP cells / name fields) and the button
     row. Figma frames 20 + 21 both measure exactly 30px field-bottom→button-top;
     was 20px (--space-5), which sat the button too close to the field. */
  gap: 30px;
}
.account-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.account-form__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-body-strong);
  font-size: var(--font-size-md);
}
.account-countdown { font-variant-numeric: tabular-nums; }
.account-resend { color: var(--color-pink); font-weight: var(--font-weight-medium); }
/* Resend link keeps its colour on hover — the underline is the affordance. */

.account-submit {
  /* Figma: radius-6 orange rect (not a pill), 18/700 white, FIXED 126×46 — the
     design's "Continue" and "Sign Up" buttons are both 126×46 despite different
     text, so it's a fixed-size button, not hug-content.
     _LayoutMinimal doesn't load components.css, so neither .btn nor .btn--primary
     reaches this button: its colours AND its box metrics must be set here. Notably
     the button was inheriting base.css's line-height 1.6 (→ 28.8px text line), which
     is what made it render 57px tall instead of 46 (the reported bug). Pin the
     height and centre the label with flex so it's line-height-independent, and use
     a 126px floor + explicit padding so a longer/Arabic label expands instead of
     clipping rather than being locked to a hard width. */
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  height: 46px;
  padding: 0 20px;                 /* keeps "Continue" ≤126 so the min-width floor sets the exact width */
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  background: var(--color-orange);
  border: 1.5px solid var(--color-orange);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.account-submit:hover,
.btn--primary.account-submit:hover {
  background: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
}
/* Disabled state — matches the cream/pale design colour for inactive button */
.account-submit:disabled,
.btn--primary.account-submit:disabled {
  background: #F4D7A8;
  border-color: #F4D7A8;
  color: var(--color-white);
  cursor: not-allowed;
  opacity: 1;
}

/* ------- Consent paragraph below SignIn card ----------------------------- */

.account-consent {
  /* Figma: 16/22px, #939598, left-aligned, matches the 418px Sign In card. */
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
  color: #939598;
  text-align: start;
  width: 100%;
  max-width: 418px;
  line-height: 22px;
}
.account-consent a {
  color: var(--color-pink);
  font-weight: var(--font-weight-medium);
}

/* ------- Flash message (errors / not-wired-yet stubs) -------------------- */

.account-flash {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: #FFF7E6;
  border: 1px solid #FFD591;
  border-radius: var(--radius-sm);
  color: var(--color-body-strong);
  font-size: var(--font-size-sm);
  max-width: 460px;
  text-align: center;
}

/* ------- Footer (bottom black bar) --------------------------------------- */

.account-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
}

/* ------- Responsive ------------------------------------------------------ */

@media (max-width: 520px) {
  .account-page__main { padding-top: 48px; }
  .account-logo img { width: 60px; }
  .account-heading { font-size: var(--font-size-xl); }
  .account-otp__cell { font-size: 1.5rem; }
}