/* =========================================
   Form Layout
   ========================================= */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* =========================================
   Field Label
   ========================================= */
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

/* =========================================
   Base Input Styles
   ========================================= */
.form-field {
  position: relative;
  width: 100%;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field textarea,
.form-field select {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 12px;
  background-color: var(--color-white-titanic);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  outline: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-secondary);
}

/* Focused */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.form-field.is-focused input,
.form-field.is-focused textarea,
.form-field.is-focused select {
  border-color: var(--color-brand-primary);
}

/* Error */
.form-field.is-error input,
.form-field.is-error textarea,
.form-field.is-error select {
  border-color: var(--color-error);
  /* background-color: var(--color-error-subtle); */
}

/* Error message */
.form-error-msg {
  display: block;
  color: var(--color-error);
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
  padding-left: 2px;
}

/* =========================================
   Field Footer (below-field links)
   ========================================= */
.form-field-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.form-field-footer.align-start {
  justify-content: flex-start;
}

.form-field-footer.align-between {
  justify-content: space-between;
}

.form-link {
  color: var(--color-brand-primary);
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-base);
  text-decoration: none;
  transition: color 0.2s ease;
}

.form-link:hover {
  color: var(--color-brand-primary-pressed);
}

/* Checkbox (e.g. "Stay signed in") — custom brand-accented control matching the
   rounded design system. Native control is hidden; the box + white tick are drawn. */
.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  user-select: none;
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 5px;
  background-color: var(--color-white);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.form-checkbox input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform 0.15s ease;
  background-color: var(--color-white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.form-checkbox input[type="checkbox"]:checked {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.form-checkbox input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.form-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* =========================================
   Password Field
   ========================================= */
.field-password-wrap {
  position: relative;
}

.field-password-wrap input[type="password"],
.field-password-wrap input[type="text"] {
  padding-right: 52px;
}

.btn-toggle-password {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.icon-eye-open,
.icon-eye-closed {
  width: 19px;
  height: auto;
  display: block;
}

.icon-eye-closed {
  display: none;
}

/* =========================================
   Textarea
   ========================================= */
.form-field textarea {
  resize: none;
  min-height: 160px;
  line-height: 1.6;
}

/* =========================================
   Select / Dropdown
   ========================================= */
.field-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23717182' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.field-select select.is-placeholder {
  color: var(--color-text-secondary);
}

/* =========================================
   Primary Button
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: none;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
  letter-spacing: 0.01em;
}

/* Disabled lives on `.btn`, not on each variant, so outline and danger inherit it —
   previously only .btn-primary and .btn-danger had a rule and .btn-outline had none.
   `.is-disabled` is the hook for anchors, where :disabled/[disabled] never match;
   pair it with aria-disabled="true" in the markup. */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-brand-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #5b6fe0;
}

.btn-primary:active,
.btn-primary.is-pressed {
  background-color: var(--color-brand-primary-pressed);
  color: var(--color-white);
}

/* =========================================
   Form Actions
   A horizontal pair of buttons at the bottom
   of a card (e.g. Cancel / Delete). Pages used
   to borrow .modal-confirm__actions for this,
   which dragged in modal-only behaviour: a pill
   radius and, under 600px, a reversed column with
   the Cancel button stripped to bare grey text.
   That is action-sheet chrome and wrong on a page.
   ========================================= */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

/* Same geometry the borrowed class gave these buttons, so moving off it is not
   also a redesign of the screens that used it. */
.form-actions .btn {
  flex: 1;
  border-radius: var(--radius-full);
  padding: 14px;
}

@media (max-width: 600px) {
  .form-actions {
    /* Confirming action on top, matching the modal order — but the Cancel button
       keeps its border here, where modal.css strips it to bare grey text. That is
       action-sheet chrome for a panel glued to the viewport edge, not a page card. */
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    padding: 16px;
    font-size: 16px;
  }
}

/* =========================================
   Social Auth Buttons
   ========================================= */
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.btn-social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.btn-google {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border-default);
  color: var(--color-text-primary);
}

.btn-google:hover {
  background-color: var(--color-light);
  box-shadow: var(--shadow-sm);
}

.btn-apple {
  background-color: #1d1d1f;
  border: 1.5px solid #1d1d1f;
  color: var(--color-white);
}

.btn-apple:hover {
  background-color: #2d2d2f;
}

.btn-apple .btn-social-icon img {
  filter: brightness(0) invert(1);
}

/* =========================================
   Checkbox — "I'm not a robot"
   ========================================= */
.form-field-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  background-color: var(--color-white-titanic);
  border: 1.5px solid var(--color-border-default);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease;
}

.form-field-captcha:hover {
  border-color: #c5caee;
}

.captcha-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.captcha-box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 4px;
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  position: relative;
}

.captcha-box::after {
  content: "";
  width: 5px;
  height: 9px;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.captcha-input:checked ~ .captcha-box {
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.captcha-input:checked ~ .captcha-box::after {
  opacity: 1;
}

.captcha-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1;
}

/* =========================================
   Form Page Layout
   A full-viewport wrapper that centers a
   .form-card on a light background.
   ========================================= */
.form-page {
  min-height: calc(80vh - var(--navbar-height));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 80px;
}

/* =========================================
   Form Card
   The white panel that holds a form.
   ========================================= */
.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 40px 40px 44px;
  width: 100%;
  max-width: 640px;
}

.form-card__title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-brand-primary);
  margin-bottom: 6px;
  line-height: 1.2;
}

.form-card__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-bottom: 27px;
  line-height: 1.5;
}

/* Centered icon above the card title */
.form-card__icon {
  display: block;
  width: 80px;
  height: auto;
  margin: 0 auto 16px;
}

/* =========================================
   Form Card — centered header variant
   Modifier: centers title & subtitle only,
   leaving inputs/buttons left-aligned.
   ========================================= */
.form-card--centered .form-card__title,
.form-card--centered .form-card__subtitle {
  text-align: center;
}

/* =========================================
   Form Page — standalone (no navbar)
   Fills the full viewport and vertically
   centers short auth-style cards.
   ========================================= */
.form-page--standalone {
  align-items: center;
}

/* =========================================
   Form Note
   Small helper text below a field or group,
   e.g. "*At least 8 characters".
   ========================================= */
.form-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding-left: 2px;
}

/* =========================================
   Form Divider
   Horizontal rule with a centered label,
   e.g. "Or sign in with".
   ========================================= */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border-default);
}

/* =========================================
   Form Hint
   Short inline sentence at the bottom of
   a card, e.g. "Don't have an account?
   Sign up now".
   ========================================= */
.form-hint {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* =========================================
   Form Terms
   Small legal / consent line at the very
   bottom of a card.
   ========================================= */
.form-terms {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.6;

  margin-top: 200px;
}

.form-terms a {
  color: var(--color-brand-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-terms a:hover {
  color: var(--color-brand-primary-pressed);
}

/* =========================================
   Captcha wrapper (error state)
   ========================================= */
.captcha-wrapper {
  display: flex;
  flex-direction: column;
}

.captcha-error {
  display: none;
  color: var(--color-error);
  font-size: 12px;
  font-weight: 500;
  margin-top: 5px;
  padding-left: 2px;
}

.captcha-wrapper.is-error .form-field-captcha {
  border-color: var(--color-error);
  background-color: var(--color-error-subtle);
}

.captcha-wrapper.is-error .captcha-error {
  display: block;
}

/* =========================================
   OTP / Verification Code Input
   A row of single-digit boxes, e.g. for
   email or SMS verification codes.
   Usage: <div class="otp-group">
            <input class="otp-input" …> × N
          </div>
   ========================================= */
.otp-group {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}

.otp-input {
  /* flex: 1; */
  width: 48px;
  height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-base);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-default);
  border-radius: 10px;
  background-color: var(--color-white-titanic);
  outline: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  caret-color: transparent;
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.otp-input:focus {
  border-color: var(--color-brand-primary);
  background-color: var(--color-white);
}

.otp-input.is-filled {
  border-color: var(--color-brand-primary);
  background-color: var(--color-white);
}

.otp-input.is-error {
  border-color: var(--color-error);
  background-color: var(--color-error-subtle);
}

/* =========================================
   Verify Panel
   Full card-level section shown after a
   form is submitted, prompting the user to
   enter a code sent to their email.
   ========================================= */
.verify-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  width: 100%;
}

.verify-panel.is-visible {
  display: flex;
}

.verify-panel__icon {
  width: 67px;
  height: auto;
}

.verify-panel__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.verify-panel__desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.verify-panel__email {
  display: block;
  color: var(--color-brand-primary);
  font-weight: 700;
}

.verify-panel__resend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.verify-panel__countdown {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.verify-panel__countdown strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

.verify-panel__resend-btn {
  background: none;
  border: none;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-primary);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
  text-decoration: underline;
}

.verify-panel__resend-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 480px) {
  .form-page {
    padding: 38px 20px 30px;
  }

  .form-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .form-card__title {
    font-size: 24px;
  }

  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="password"],
  .form-field input[type="tel"],
  .form-field input[type="number"],
  .form-field textarea,
  .form-field select {
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
  }
}

#rpSetPasswordBtn {
  margin-top: 30px;
}

#suSignUpBtn {
  margin-top: 20px;
}

#contact-submit {
  margin-top: 60px;
}

/* =========================================================
   Inline status banner (Figma: success toast, node "Your password has been
   reset successfully"). Tokens are taken verbatim from the spec — 12px radius,
   1px border, 16px/24px padding, 8px gap, #D1E7DD on #AFD5C4.
   Text only, no icon: 50 = 16 + 16 padding + one 18px line, which only works if
   nothing else shares the row. Measured at 351x52 (the extra 2px is the 1px border
   top and bottom), so the spec is matched. The width is capped rather than fixed so
   it still fits a 320px phone, and the height is left to padding + line-height so a
   message that wraps to two lines grows instead of spilling out of the box.
   ========================================================= */
.status-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 351px;
  min-height: 50px;
  /* The banner sat flush against the CTA underneath it — nothing in the card supplied a
     gap, so the button read as part of the banner. */
  margin: 0 auto 24px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #afd5c4;
  background: #d1e7dd;
  color: var(--color-text-primary, #0f172a);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

/* Same geometry, error palette — kept in step with the success variant so the two
   states cannot drift apart. */
.status-banner--error {
  border-color: #f1aeb5;
  background: #f8d7da;
}

/* Wide variant. The 351px cap above is the Figma measurement for the password toast —
   one short line — and it leaves only ~16px of slack for the contact confirmation, whose
   longest sentence measures 285px against 301px of content box. That fits at desktop and
   wraps mid-sentence at every narrower width. This variant drops the cap so the banner
   takes the card's content width, which also lines it up with the CTA below instead of
   leaving a stunted 351px box above a 558px button. */
.status-banner--wide {
  max-width: 100%;
  justify-content: center;
  text-align: center;
  /* Safety net for narrow screens and unexpected font fallbacks: if a sentence does have
     to wrap, split it into two even lines rather than a long line plus an orphan word.
     Ignored by browsers that don't support it, which just wrap as before. */
  text-wrap: balance;
}

/* Must sit after the .status-banner shorthand above: media queries add no specificity,
   so `padding: 16px 24px` declared later in the file would win over an earlier override.
   At 375px the card gives the banner 335px and the longest sentence measures 285px —
   exactly the content box at 24px side padding, i.e. zero slack. Trimming to 16px buys
   back 16px so a different font fallback can't tip it into a mid-sentence wrap. */
@media (max-width: 480px) {
  .status-banner--wide {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =========================================================
   Success Panel (Figma: "success", node 2923-71)

   A whole-page confirmation — check mark, headline, one line of
   explanation, one way onward. Deliberately NOT wrapped in a
   .form-card: the Figma frame is bare content centred on white,
   and a card border around a "you're done" screen reads as another
   form still waiting on you.

   Figma is a 1440 desktop frame, so its type scale (40/28/24px) and
   its 87px-tall button are the ceiling, not fixed values — every one
   is clamped so the panel degrades to a phone instead of overflowing
   it. Fixed verbatim: the 110px mark, the 24px stack gap, the 8px
   button radius, the 844px measure.

   Two deliberate substitutions of design tokens for the Figma
   literals, so this screen cannot drift away from the rest of the
   system: brand primary (#4a5fd9 — identical to the spec) and
   --color-text-primary for the body copy (#1a1a2e where the frame
   says #000).
   ========================================================= */
.success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 844px;
  margin: 0 auto;
  /* Figma sits the stack 162px under the navbar; .form-page already
     contributes 48px of that. */
  padding-top: clamp(0px, 8vw, 114px);
  text-align: center;
}

.success-panel__mark {
  display: block;
  width: clamp(72px, 14vw, 110px);
  height: auto;
}

.success-panel__title {
  font-size: clamp(28px, 5.4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-brand-primary);
}

.success-panel__text {
  font-size: clamp(17px, 3.2vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Hugs its label rather than filling the row, which is the one place
   in this design system a .btn is not full-width. */
.success-panel__action.btn {
  width: auto;
  min-height: clamp(52px, 8.4vw, 87px);
  padding: 12px clamp(32px, 9vw, 98px);
  border-radius: 8px;
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: 0;
}