/* Auth pages redesign (Phase 8). Scoped to .auth-v2 so it only affects
   pages that opt in. Uses the existing --base/--base-two custom properties
   (admin-configurable brand color) rather than hardcoded hex, so it stays
   correct if the palette ever changes. */

.auth-v2 {
  --auth-ink: hsl(var(--base) / 1);
  --auth-ink-soft: hsl(var(--base) / 0.85);
  --auth-accent: hsl(var(--base-two) / 1);
  --auth-line: hsl(0 0% 100% / 0.14);
  font-family: "Onest", var(--body-font);
}

.auth-v2 .account__left {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px clamp(24px, 4vw, 64px);
}

/* Decorative layer: soft drifting glow blobs (real elements, so GSAP can
   animate them directly) + a fine grid texture. No imagery at all here,
   so it can never reintroduce a compliance problem the way stock photos
   did for the pages this replaces. */
.auth-v2 .auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.auth-v2 .auth-blob--1 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -140px;
  background: radial-gradient(circle, hsl(var(--base-two) / 0.55), transparent 70%);
}

.auth-v2 .auth-blob--2 {
  width: 300px;
  height: 300px;
  left: -80px;
  top: -60px;
  background: radial-gradient(circle, hsl(0 0% 100% / 0.08), transparent 70%);
}

.auth-v2 .account__left-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background-image: linear-gradient(hsl(0 0% 100% / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 75%);
}

.auth-v2 .account__left-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
}

.auth-v2 .auth-brand-logo img {
  max-width: 190px;
  height: auto;
}

.auth-v2 .auth-headline {
  margin-top: clamp(32px, 8vh, 80px);
}

.auth-v2 .auth-headline__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(0 0% 100% / 0.65);
  margin-bottom: 18px;
}

.auth-v2 .auth-headline__eyebrow::before,
.auth-v2 .auth-headline__eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--auth-accent);
}

.auth-v2 .auth-headline h1 {
  font-family: "Onest", var(--heading-font);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.25;
  color: #fff;
  margin: 0 0 16px;
}

.auth-v2 .auth-headline p {
  font-size: 16px;
  line-height: 1.6;
  color: hsl(0 0% 100% / 0.7);
  margin: 0 auto;
  max-width: 400px;
}

.auth-v2 .auth-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding-top: 28px;
  margin-top: 28px;
  border-top: 1px solid var(--auth-line);
  width: 100%;
}

.auth-v2 .auth-stats__item {
  text-align: center;
}

.auth-v2 .auth-stats__item h3 {
  font-family: "Onest", var(--heading-font);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1;
}

.auth-v2 .auth-stats__item p {
  font-size: 13px;
  color: hsl(0 0% 100% / 0.55);
  margin: 0;
}

/* Mobile-only compact brand header -- .account__left is hidden below
   767px (existing rule), so without this, phone/tablet visitors saw no
   branding above the form at all. Hidden on desktop since the left panel
   already carries this. */
.auth-v2 .auth-mobile-brand {
  display: none;
}

/* Right column / form ------------------------------------------------- */

.auth-v2 .account__right {
  background: hsl(var(--white, 0 0% 100%));
}

.auth-v2 .account-form {
  max-width: 420px;
}

.auth-v2 .auth-form-heading {
  margin-bottom: 32px;
}

.auth-v2 .auth-form-heading__eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  margin-bottom: 10px;
}

.auth-v2 .auth-form-heading h2 {
  font-family: "Onest", var(--heading-font);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--auth-ink);
  margin: 0;
}

.auth-v2 .auth-form-heading__subtext {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--black, 0 0% 10%) / 0.55);
}

.auth-v2 .form-group {
  margin-bottom: 20px;
}

.auth-v2 .form-label {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--black, 0 0% 10%) / 0.75);
  margin-bottom: 8px;
  display: inline-block;
}

.auth-v2 .form--control {
  height: 52px;
  border-radius: 10px;
  border: 1.5px solid hsl(var(--black, 0 0% 10%) / 0.12);
  background: hsl(var(--black, 0 0% 10%) / 0.02);
  padding: 0 16px;
  font-size: 15px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-v2 .form--control:focus {
  border-color: var(--auth-ink);
  background: hsl(var(--white, 0 0% 100%));
  box-shadow: 0 0 0 4px hsl(var(--base) / 0.12);
  outline: none;
}

.auth-v2 .btn--base {
  height: 52px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.auth-v2 .btn--base:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px -8px hsl(var(--base) / 0.5);
}

.auth-v2 .btn--base:active {
  transform: translateY(1px) scale(0.99);
}

.auth-v2 .forgot-password {
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.auth-v2 .forgot-password:hover {
  opacity: 0.7;
}

.auth-v2 .have-account {
  padding-top: 4px;
}

.auth-v2 .have-account__text {
  font-size: 14px;
  color: hsl(var(--black, 0 0% 10%) / 0.6);
  margin: 0;
}

.auth-v2 .have-account__link {
  font-weight: 700;
  color: var(--auth-ink);
  text-decoration: none;
  margin-left: 4px;
  position: relative;
}

.auth-v2 .have-account__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s ease;
}

.auth-v2 .have-account__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Floating label + icon fields (site-wide pattern from here forward).
   Works via the classic :placeholder-shown trick, so it needs zero JS:
   the input MUST come before the label in markup (CSS can't select a
   previous sibling), and the input needs placeholder=" " (a real, single
   space) so :placeholder-shown only matches a truly empty field. */
.auth-v2 .form-group--floating {
  position: relative;
}

.auth-v2 .form-group--floating .form-label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  margin: 0;
  padding: 0 6px;
  background: transparent;
  color: hsl(var(--black, 0 0% 10%) / 0.5);
  font-weight: 500;
  pointer-events: none;
  transition: transform 0.18s ease, color 0.18s ease, top 0.18s ease;
  z-index: 1;
}

.auth-v2 .form-group--floating .form--control {
  padding-left: 44px;
}

.auth-v2 .form-group--floating .form-group__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: hsl(var(--black, 0 0% 10%) / 0.35);
  pointer-events: none;
  transition: color 0.18s ease;
  z-index: 1;
}

.auth-v2 .form-group--floating .form--control:focus ~ .form-group__icon {
  color: var(--auth-ink);
}

.auth-v2 .form-group--floating .form--control:focus ~ .form-label,
.auth-v2 .form-group--floating .form--control:not(:placeholder-shown) ~ .form-label {
  top: 0;
  background: hsl(var(--white, 0 0% 100%));
  color: var(--auth-ink);
  transform: translateY(-50%) scale(0.82);
}

/* Password visibility toggle: every password-type field gets one, per
   the standing form-field guardrail. Pure CSS + a couple of data
   attributes for the icon swap -- see togglePasswordVisibility() in
   auth-redesign.js. */
.auth-v2 .form-group--password .form--control {
  padding-right: 44px;
}

.auth-v2 .form-group__toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  font-size: 17px;
  color: hsl(var(--black, 0 0% 10%) / 0.35);
  cursor: pointer;
  z-index: 1;
  transition: color 0.18s ease;
}

.auth-v2 .form-group__toggle:hover,
.auth-v2 .form-group__toggle:focus-visible {
  color: var(--auth-ink);
}

.auth-v2 .form-group__toggle .la-eye-slash {
  display: none;
}

.auth-v2 .form-group__toggle[aria-pressed="true"] .la-eye {
  display: none;
}

.auth-v2 .form-group__toggle[aria-pressed="true"] .la-eye-slash {
  display: inline;
}

/* Select and file inputs have no meaningful "empty vs. has a value" state
   :placeholder-shown can key off, so their label stays permanently in the
   floated resting position rather than faking an animation that would
   never really reflect the field's state. */
.auth-v2 .form-group--floating.form-group--static .form-label {
  top: 0;
  background: hsl(var(--white, 0 0% 100%));
  color: var(--auth-ink);
  transform: translateY(-50%) scale(0.82);
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2 .form-group--floating .form-label {
    transition: none;
  }
}

/* select2 replaces the native <select> with its own markup, so it needs
   its own sizing to match the other fields' 52px/rounded/icon-indented
   look -- the label is already always-floated via .form-group--static
   above. */
.auth-v2 .select2-container {
  width: 100% !important;
}

.auth-v2 .select2-container .select2-selection--single {
  height: 52px;
  border-radius: 10px;
  border: 1.5px solid hsl(var(--black, 0 0% 10%) / 0.12);
  background: hsl(var(--black, 0 0% 10%) / 0.02);
  display: flex;
  align-items: center;
  padding-left: 44px;
}

.auth-v2 .select2-container .select2-selection__rendered {
  padding-left: 4px;
  line-height: normal;
  font-size: 15px;
}

.auth-v2 .select2-container .select2-selection__arrow {
  height: 52px;
  right: 10px;
}

.auth-v2 .select2-container--open .select2-selection--single {
  border-color: var(--auth-ink);
}

/* Mobile field: a country-code prefix badge sits where the icon normally
   would, and its width varies with the code (+1 vs. +971), so the label
   can't safely rest centered/floated over that row without risking an
   overlap -- given a plain label-above treatment instead, same reasoning
   as the file field. */
.auth-v2 .form-group--phone .form-label {
  position: static;
  display: block;
  transform: none;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
  color: hsl(var(--black, 0 0% 10%) / 0.75);
}

.auth-v2 .form-group--phone .input-group {
  border: 1.5px solid hsl(var(--black, 0 0% 10%) / 0.12);
  border-radius: 10px;
  background: hsl(var(--black, 0 0% 10%) / 0.02);
  overflow: hidden;
  height: 52px;
  align-items: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-v2 .form-group--phone .input-group-text.mobile-code {
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--auth-ink);
  padding-left: 16px;
  padding-right: 0;
}

.auth-v2 .form-group--phone .input-group .form--control {
  border: none !important;
  background: transparent !important;
  height: 100%;
  box-shadow: none !important;
}

.auth-v2 .form-group--phone .input-group:focus-within {
  border-color: var(--auth-ink);
  background: hsl(var(--white, 0 0% 100%));
  box-shadow: 0 0 0 4px hsl(var(--base) / 0.12);
}

.auth-v2 .form-group--phone .input-group:focus-within ~ .form-label,
.auth-v2 .form-group--phone .form--control:not(:placeholder-shown) ~ .form-label {
  top: 0;
  background: hsl(var(--white, 0 0% 100%));
  color: var(--auth-ink);
  transform: translateY(-50%) scale(0.82);
}

/* File input: no natural "empty vs. filled" text state, so this gets a
   conventional label-above treatment (same reasoning as select/file
   generally) plus a dashed drop-zone look instead of the floating
   mechanism. */
.auth-v2 .form-group--file .form-label {
  position: static;
  display: block;
  transform: none;
  margin-bottom: 8px;
  padding: 0;
  background: transparent;
}

.auth-v2 .auth-file-upload {
  position: relative;
  height: 52px;
  border-radius: 10px;
  border: 1.5px dashed hsl(var(--black, 0 0% 10%) / 0.22);
  background: hsl(var(--black, 0 0% 10%) / 0.02);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.auth-v2 .auth-file-upload:hover {
  border-color: var(--auth-ink);
}

.auth-v2 .auth-file-upload i {
  font-size: 18px;
  color: hsl(var(--black, 0 0% 10%) / 0.4);
}

.auth-v2 .auth-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.auth-v2 .auth-file-upload__text {
  font-size: 14px;
  color: hsl(var(--black, 0 0% 10%) / 0.5);
}

/* Verification-code pages (the 6-digit OTP entry, used by reset-code,
   verify-email, verify-mobile, and 2FA). verification-code.css positions
   one real (invisible) text input on top of 6 decorative boxes, aligning
   each typed character to a box via hand-tuned letter-spacing/padding
   that only works at the exact width those values were computed for.
   Phase 8 set width:100% here, which silently broke that alignment (it
   also happened to make the boxes nearly invisible: #f1f1f1 on #f1f1f1
   is an invisible border by design, relying on light-mode ambient
   contrast this card doesn't have). Fix: stop overriding the width at
   all -- instead force the plugin's own narrowest, already-tuned
   breakpoint (300px wrapper / 27px letter-spacing / 13px padding-left,
   normally gated behind @media max-width:375px) to apply unconditionally,
   since 300px fits both the desktop and mobile card without needing
   viewport-based breakpoints of our own. Then style the boxes to
   actually be visible. */
.auth-v2 .verification-code-wrapper {
  width: 300px;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
  /* Base plugin CSS also ships background/border/border-radius for this
     wrapper (a boxed white card with a thin #ebebeb border). Nothing else
     on these pages is boxed like that -- forms sit flush on the panel --
     so drop it rather than leave an orphaned card-within-a-card. */
  background: transparent;
  border: none;
  border-radius: 0;
}

.auth-v2 .verification-code {
  height: 48px;
}

.auth-v2 .verification-code input {
  width: calc(100% + 45px);
  padding-left: 13px;
  letter-spacing: 27px;
  height: 48px;
  font-size: 20px !important;
}

/* This input also carries .form--control, so it inherits the generic
   field focus style (opaque white fill + solid border) meant for normal
   text fields. That's invisible-input-over-decorative-boxes widget's
   whole design depends on this input staying fully transparent and
   borderless in every state -- otherwise, the moment it's focused (i.e.
   as soon as anyone actually uses it), the opaque fill paints over all
   6 boxes and the focus border draws one solid rectangle around the
   group, hiding the very boxes Phase 10 fixed the alignment of. */
.auth-v2 .verification-code input,
.auth-v2 .verification-code input:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}

.auth-v2 .verification-code::after {
  right: -32px;
  width: 30px;
  height: 48px;
}

.auth-v2 .verification-code span {
  height: 48px;
  line-height: 44px;
  background: hsl(var(--black, 0 0% 10%) / 0.03);
  border: 2px solid hsl(var(--black, 0 0% 10%) / 0.18);
  border-radius: 10px;
  color: hsl(var(--black, 0 0% 10%) / 0.35);
  font-weight: 700;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-v2 .verification-code:focus-within span {
  border-color: hsl(var(--black, 0 0% 10%) / 0.22);
}

/* Next box to receive input -- an invitation to type, matching the focus
   ring used elsewhere in this design system. The usual 4px outset ring
   isn't safe here: boxes sit only ~3.6px apart, so an outset glow would
   bleed straight into the neighbouring box. An inset ring stays entirely
   inside the box's own border regardless of that gap. */
.auth-v2 .verification-code span.is-active {
  border-color: var(--auth-ink);
  background: hsl(var(--white, 0 0% 100%));
  box-shadow: inset 0 0 0 1.5px var(--auth-ink);
}

/* Boxes the user has already filled in -- confirms progress at a glance.
   No transform/scale here for the same reason: at a ~3.6px gap, scaling
   adjacent filled boxes up would make them visually touch or overlap. */
.auth-v2 .verification-code span.is-filled {
  border-color: var(--auth-ink);
  background: hsl(var(--base) / 0.08);
  color: var(--auth-ink);
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2 .verification-code span {
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  }
}

.auth-v2 .verification-area > p {
  color: hsl(var(--black, 0 0% 10%) / 0.6);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.auth-v2 .alert {
  border-radius: 10px;
  border: none;
  font-size: 14px;
}

/* Entrance animation target: JS sets this, CSS just defines the resting
   state so there's zero layout shift if JS is slow/blocked. */
.auth-v2 [data-auth-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  .auth-v2 [data-auth-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media screen and (max-width: 767px) {
  /* .auth-v2 .account__left has higher specificity than the base
     .account__left { display: none; } rule it's meant to inherit at this
     breakpoint, so it has to be restated here or it wins and breaks the
     existing mobile layout. */
  .auth-v2 .account__left {
    display: none;
  }

  .auth-v2 .account__right {
    padding: 0;
    background: hsl(var(--base));
    justify-content: flex-start;
    flex-direction: column;
    min-height: 100vh;
  }

  .auth-v2 .auth-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 40px 24px 32px;
    position: relative;
    overflow: hidden;
  }

  .auth-v2 .auth-mobile-brand::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    right: -70px;
    top: -80px;
    background: radial-gradient(circle, hsl(var(--base-two) / 0.5), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
  }

  .auth-v2 .auth-mobile-brand img {
    max-width: 160px;
    height: auto;
    position: relative;
  }

  .auth-v2 .auth-mobile-brand p {
    position: relative;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(0 0% 100% / 0.65);
  }

  .auth-v2 .account__form {
    width: 100%;
    flex: 1;
    background: hsl(var(--white, 0 0% 100%));
    border-radius: 24px 24px 0 0;
    padding-top: 4px;
    margin-top: -20px;
    position: relative;
  }

  .auth-v2 .account-form {
    max-width: 100%;
    margin: 0 auto;
    padding: 28px 20px 40px;
  }

  .auth-v2 .auth-form-heading {
    text-align: center;
  }

  .auth-v2 .auth-form-heading__eyebrow::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--auth-ink);
    margin-right: 8px;
    vertical-align: middle;
  }

  .auth-v2 .have-account {
    text-align: center;
  }
}