/* ============================================================
   DropshipSA v2 — Auth screens skin (issue #800, Auth S7 — PRD #793)

   The five screens a person meets around the door: login, signup,
   forgot password, reset password and resend the verify email.

   Rules for this file, the same as components.css:
     - Tokens only. No raw hex, no raw spacing. Every value comes
       from design-system.css, so one change of the brand color
       changes all five screens at once.
     - Logical sides only (padding-inline, border-inline-start).
       The pages are Arabic and RTL; a physical left or right would
       be stuck the wrong way round.
     - Every rule hangs off `body.auth-page`. The same wrapper file
       draws the contact page and the product redirect, and those
       two must keep the look they have today.

   Load AFTER design-system.css and components.css.
   \Altum\AuthPage decides when. This file never decides for itself.

   The look:
     - Cream page, one white card with a soft shadow.
     - Login and signup split the card in two: the form on the
       reading side, a deep vermilion slab with the short value
       message on the other. The slab is the one loud thing on the
       page; everything around it stays quiet.
     - The other three screens are one narrow card. A person on the
       forgot-password screen wants the job done, not a pitch.
     - Each screen opens with a small accent bar and one short word
       above the title, so the five screens read as one family.
   ============================================================ */

/* ------------------------------------------------------------
   1. The page under the card
   ------------------------------------------------------------ */

body.auth-page {
  /* !important is needed here and nowhere else in this file. The wrapper also
     puts Bootstrap's `bg-white` on the body, and that rule carries its own
     !important, so the cream ground can not win without one. */
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-sans-ar);
  font-size: var(--fs-body);
  line-height: var(--lh-body);

  /* Backstop for issue #1814. These five screens are one narrow card, so
     nothing on them ever needs a sideways scroll. `clip` and not `hidden`,
     so the page keeps scrolling up and down as normal. The captcha box now
     holds itself in (captcha.css); this is the belt on top of the braces. */
  overflow-x: clip;
}

/* The wrapper wraps the content in `main.py-5`. Give the card room to
   breathe on a tall screen and keep it off the edges on a short one. */
.auth-page main {
  padding-block: var(--sp-8);
}

/* The logo lockup the wrapper draws above the card. */
.auth-page .navbar-logo {
  max-block-size: 40px;
  inline-size: auto;
}

/* ------------------------------------------------------------
   2. The card
   ------------------------------------------------------------ */

.auth {
  max-inline-size: 62rem;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.auth-page--single .auth {
  max-inline-size: 30rem;
}

.auth__card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Login and signup: form on the reading side, value message beside it. */
.auth-page--split .auth__card {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.auth__form-side {
  padding: var(--sp-8);
}

/* ------------------------------------------------------------
   3. The heading block
   ------------------------------------------------------------ */

/* The small word above the title, flagged by a short accent bar. The bar
   sits on the reading side of the word in both directions. */
.auth__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-2);
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
}

.auth__eyebrow::before {
  content: "";
  flex: none;
  inline-size: var(--sp-6);
  block-size: 2px;
  background-color: var(--accent);
}

.auth__title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
}

.auth__sub {
  margin-block: var(--sp-2) 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* ------------------------------------------------------------
   4. The form
   ------------------------------------------------------------ */

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}

/* Alerts prints a field message as `.invalid-feedback`, which Bootstrap
   hides until it sits next to `.is-invalid`. The message is only printed
   when there IS an error, so it is simply always shown here. */
.auth .invalid-feedback {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--danger);
  font-size: var(--fs-label);
}

/* The page alerts above the card. */
.auth__alerts .alert {
  margin-block-end: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
}

.auth__alerts .alert-danger,
.auth__alerts .alert-error {
  border-color: var(--danger);
  background-color: var(--danger-bg);
  color: var(--danger);
}

.auth__alerts .alert-success {
  border-color: var(--success);
  background-color: var(--success-bg);
  color: var(--success);
}

.auth__alerts .alert-info,
.auth__alerts .alert-primary {
  border-color: var(--info);
  background-color: var(--info-bg);
  color: var(--info);
}

/* A checkbox and its label on one line: remember me, accept the terms. */
.auth__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.auth__check .checkbox {
  flex: none;
  margin-block-start: 3px;
}

.auth__check label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  cursor: pointer;
}

.auth__check a {
  color: var(--accent);
  text-decoration: underline;
}

/* The password strength hint (issue #796). The small script names the
   classes `progress`, `progress-bar` and `bg-danger`, so this only paints
   them — it never renames them. */
.auth .progress {
  overflow: hidden;
  block-size: 4px;
  margin-block-start: var(--sp-2);
  background-color: var(--surface-2);
  border-radius: var(--r-pill);
}

.auth .progress-bar {
  block-size: 100%;
  border-radius: var(--r-pill);
  transition: inline-size var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.auth .progress-bar.bg-danger  { background-color: var(--danger); }
.auth .progress-bar.bg-warning { background-color: var(--warning); }
.auth .progress-bar.bg-info    { background-color: var(--info); }
.auth .progress-bar.bg-success { background-color: var(--success); }

/* The line under the strength bar. The partial marks it with the data
   attribute its script writes into, so this paints that element instead of
   leaning on a Bootstrap text class. */
.auth [data-password-strength-text] {
  display: block;
  margin-block-start: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-label);
}

/* The two-step code box on the login screen. It only appears for an
   account that turned two-step on, so it is marked out as its own step
   instead of looking like one more field. */
.auth__step {
  padding: var(--sp-4);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md);
}

.auth__step .field-help {
  margin-block-start: var(--sp-1);
}

/* The code is digits. Keep it left to right inside an Arabic page. */
.auth__code {
  unicode-bidi: isolate;
  letter-spacing: 2px;
}

/* ------------------------------------------------------------
   5. Sign in with Google / Apple (issue #797)
   ------------------------------------------------------------ */

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-subtle);
  font-size: var(--fs-small);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background-color: var(--border);
}

.auth__socials {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.auth__social {
  gap: var(--sp-2);
}

.auth__social i {
  font-size: var(--fs-body-lg);
}

/* ------------------------------------------------------------
   6. The value message slab — the one loud thing on the page
   ------------------------------------------------------------ */

.auth__slab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background-color: var(--brand-900);
  border-inline-start: 3px solid var(--accent);
  color: var(--brand-100);
}

.auth__slab-title {
  margin: 0;
  color: var(--n-0);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  line-height: var(--lh-h3);
}

.auth__slab-points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth__slab-point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* A small filled square instead of a bullet: the same shape as the accent
   bar in the eyebrow, so the two sides of the card rhyme. */
.auth__slab-point::before {
  content: "";
  flex: none;
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
  margin-block-start: var(--sp-2);
  background-color: var(--accent);
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------
   7. The way to create an account (issue #1590)

   Most people who land on /login have no account yet. This block used to be a
   footnote UNDER the card and, worse, after the value slab in the markup — so a
   phone put a full advert between the login button and it and pushed it 183px
   below the fold at 375x667.

   It now lives inside the card, right under the login button. The sentence and
   the words are unchanged; only the place and the weight moved. It is a
   BORDERED button, never a filled one: the login button stays the single filled
   thing on the page, so the main action still wins the eye.
   ------------------------------------------------------------ */

.auth__signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-6) 0;
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}

.auth__signup-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-inline: var(--sp-6);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--accent-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-label);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The hover ground is `--surface-2`, not `--accent-weak`: the ink measures
   4.91:1 on it in light and 4.94:1 in dark, both over AA. On `--accent-weak` it
   would have dropped to 4.02:1 — a hover state that fails is still a fail. */
.auth__signup-action:hover {
  border-color: var(--accent-ink);
  background-color: var(--surface-2);
  text-decoration: none;
}

.auth__signup-action:focus-visible {
  outline: none;
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ------------------------------------------------------------
   8. Under the card
   ------------------------------------------------------------ */

.auth__foot {
  margin-block-start: var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-small);
  text-align: center;
}

/* Issue #1590. These links were `--accent` with no underline: 3.46:1 on the
   cream page and 3.56:1 on the white card, both under the 4.5:1 WCAG AA needs,
   and nothing but the colour said they were clickable. `--accent-ink` is the
   darker shade of the same brand colour (5.19:1 / 5.35:1), and the underline
   carries the "this is a link" job on its own. Fixing the shared rule fixes all
   five auth screens plus the forgot-password link at once. */
.auth__foot a,
.auth__link {
  color: var(--accent-ink);
  font-weight: var(--fw-label);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth__foot a:hover,
.auth__link:hover {
  color: var(--accent-ink);
  text-decoration-thickness: 2px;
}

.auth__link:focus-visible,
.auth__foot a:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* The forgot-password link sits at the end of the form row. */
.auth__form-aside {
  display: flex;
  justify-content: flex-end;
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   9. Small screens
   The card stacks. The form comes first: the job of the page is to let
   somebody in, and the value message is there to be read after.
   ------------------------------------------------------------ */

@media (max-width: 60rem) {
  .auth-page--split .auth__card {
    grid-template-columns: 1fr;
  }

  .auth__form-side {
    padding: var(--sp-6);
  }

  .auth__slab {
    gap: var(--sp-4);
    padding: var(--sp-6);
    border-inline-start: 0;
    border-block-start: 3px solid var(--accent);
  }

  /* Once the card stacks, every pixel above the fold is worth something: the
     value slab is now below this block, so a tall signup row is what pushes the
     way to sign up off a phone screen (issue #1590). */
  .auth__signup {
    margin-block-start: var(--sp-5);
    padding-block-start: var(--sp-5);
  }
}

@media (max-width: 30rem) {
  .auth-page main {
    padding-block: var(--sp-5);
  }

  .auth {
    padding-inline: var(--sp-3);
  }

  .auth__form-side,
  .auth__slab {
    padding: var(--sp-5);
  }

  .auth__title {
    font-size: var(--fs-h3);
  }

  /* On a phone the sentence and the button miss sharing a row by three pixels,
     so they are stacked on purpose instead of left to wrap by luck. The button
     goes full width: a clear second action under the login button, and a bigger
     thing to hit with a thumb. Measured at 375x667 this leaves the whole button
     on screen with no scrolling. */
  .auth__signup {
    flex-direction: column;
    gap: var(--sp-2);
    margin-block-start: var(--sp-4);
    padding-block-start: var(--sp-4);
  }

  .auth__signup-action {
    align-self: stretch;
  }
}