/* =========================================================
   Forgot Password (customer/account/forgotpassword) — Satphone dark theme.
   Two-column split mirroring the Sign In page (no radar beacon):
     Left  = "RESET / PASSWORD" hero + orange divider + return-login button.
     Right = instruction note + email field + Reset-My-Password button.
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

.customer-account-forgotpassword .page-wrapper {
  padding-top: 74px; min-height: 100vh; box-sizing: border-box;
  background: var(--spc-bg); color: var(--spc-fg);
}

/* ---------- Full-viewport grid at page-main ---------- */
.customer-account-forgotpassword .page-main {
  max-width: none; width: 100%; margin: 0; padding: 0; color: var(--spc-fg);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  min-height: calc(100vh - 74px);
}
.customer-account-forgotpassword .page-main > a { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.customer-account-forgotpassword .page-main > .page.messages,
.customer-account-forgotpassword .page-main > .messages { grid-row: 1; grid-column: 1 / -1; margin: 0; }

/* ---------- LEFT: title hero (no radar) ---------- */
.customer-account-forgotpassword .page-title-wrapper {
  grid-row: 2; grid-column: 1; margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem clamp(2rem, 6vw, 6rem);
}
.customer-account-forgotpassword .page-title-wrapper .sp-login-hero {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.customer-account-forgotpassword .page-title-wrapper .page-title {
  margin: 0; color: var(--spc-fg);
  font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 56px); font-weight: 600; letter-spacing: 2px; line-height: 1;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px;
}
.customer-account-forgotpassword .page-title-wrapper .page-title .sp-title-word { display: block; }
.customer-account-forgotpassword .page-title-wrapper .page-title::after {
  content: ''; display: block; width: 88px; height: 4px; margin-top: 0; background: var(--spc-accent);
}

/* ---------- Return-login button under the divider ---------- */
.customer-account-forgotpassword .page-title-wrapper .sp-return-home {
  margin-top: 2rem; align-self: flex-start; width: auto;
}
.customer-account-forgotpassword .sp-return-home .sp-btn-arrow {
  font-size: 1.05em; line-height: 0; transition: transform .18s ease;
}
.customer-account-forgotpassword .sp-return-home:hover .sp-btn-arrow { transform: translate(-2px, 0); }

/* ---------- RIGHT: form column ---------- */
.customer-account-forgotpassword .page-main > .columns {
  grid-row: 2; grid-column: 2; min-width: 0; box-sizing: border-box;
  border-left: 1px solid var(--spc-line);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
}
.customer-account-forgotpassword .columns,
.customer-account-forgotpassword .column.main { max-width: none; width: 100%; margin: 0; padding: 0; }
.customer-account-forgotpassword .column.main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.customer-account-forgotpassword .form.password.forget {
  display: flex; flex-direction: column;
  /* beat Magento's .form.password.forget { width; min-width } defaults */
  width: 100% !important; max-width: 520px !important; min-width: 0 !important;
  margin: 0 auto;
}

/* ---------- Fieldset ---------- */
.customer-account-forgotpassword .fieldset { border: 0; margin: 0; padding: 0; }
.customer-account-forgotpassword .fieldset > .legend,
.customer-account-forgotpassword .fieldset > br { display: none; }
.customer-account-forgotpassword .fieldset[data-hasrequired]::after { display: none !important; content: none !important; }

/* the instruction note above the email field */
.customer-account-forgotpassword .field.note {
  color: var(--spc-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 1.5rem;
}

/* ---------- Email field (label hidden, placeholder shown) ---------- */
.customer-account-forgotpassword .fieldset > .field { margin: 0 0 1rem; }
.customer-account-forgotpassword .field > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* a11y-only */
}
.customer-account-forgotpassword .field .control { width: 100%; position: relative; }
.customer-account-forgotpassword .fieldset > .field > .control { width: 100% !important; }
.customer-account-forgotpassword input[type="email"],
.customer-account-forgotpassword input[type="text"] {
  width: 100%; height: 50px; box-sizing: border-box;
  background: var(--spc-bg-2); color: var(--spc-fg);
  border: 1px solid var(--spc-line); border-radius: 0; box-shadow: none;
  padding: 0 14px; font-size: .95rem;
}
.customer-account-forgotpassword input:focus { border-color: var(--spc-accent); outline: 0; box-shadow: none; }
.customer-account-forgotpassword input::placeholder { color: var(--spc-muted); }
.customer-account-forgotpassword .field-tooltip { display: none; }
.customer-account-forgotpassword div.mage-error { color: #f2a49c; font-size: .8rem; margin-top: 8px; }

/* ---------- CAPTCHA: [code input][image] row ----------
   The captcha widget binds its reload button by delegation on
   #captcha-container-<formId> and refreshes .captcha-img via find() inside that
   same element, so both must stay where Magento put them. The image is styled
   into the row in place, and the visible reload control next to the submit
   button is a proxy that clicks this (hidden) original. */
.customer-account-forgotpassword .field.captcha .control.captcha {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100% !important;
}
/* jQuery validate inserts the error straight after the input, which would wedge
   it between the code field and the image — send it full-width onto its own row
   so it reads beneath the fields like every other error on the page.
   Must be div.mage-error: validation also puts .mage-error on the input itself,
   and matching that would blow the row apart. */
.customer-account-forgotpassword .field.captcha .control.captcha > div.mage-error {
  flex: 0 0 100%; order: 9; margin-top: 0; /* the 8px row-gap already spaces it */
}
/* explicit halves: a zero flex-basis still gets the input's padding + border added
   on top, which would make the code field ~30px wider than the image */
.customer-account-forgotpassword .field.captcha .control.captcha > input { flex: 0 0 calc(50% - 4px); min-width: 0; }
.customer-account-forgotpassword .field.captcha .nested { flex: 0 0 calc(50% - 4px); min-width: 0; margin: 0; }
.customer-account-forgotpassword .field.captcha .nested > .field { margin: 0; }
/* margin-top:0 clears styles-m.css's `.control.captcha-image { margin-top: 10px }`,
   which otherwise pads this container to 60px and drops the image 5px below the
   code input (a flex item is a BFC, so the margin can't collapse away) */
.customer-account-forgotpassword .field.captcha .control.captcha-image { display: block; width: 100%; margin-top: 0; }
.customer-account-forgotpassword .captcha-img {
  display: block; width: 100%; height: 50px; box-sizing: border-box;
  object-fit: cover; border: 1px solid var(--spc-line); border-radius: 0;
  background: var(--spc-bg-2);
}
/* styles-l.css sets `.control.captcha-image .captcha-img { margin: 0 10px 10px 0 }`
   at the same specificity as the rule above AND loads after this file, so the
   selector depth has to be matched to clear those margins. */
.customer-account-forgotpassword .control.captcha-image .captcha-img { margin-right: 0; margin-bottom: 0; }
.customer-account-forgotpassword .control.captcha-image .action.reload.captcha-reload {
  display: none !important;
}
.customer-account-forgotpassword .captcha-note { display: none; }
.customer-account-forgotpassword .field.captcha.no-label.refreshing { opacity: .6; }

/* reload icon spins a little on hover, mirroring the arrow nudge on other buttons */
.customer-account-forgotpassword .sp-reload-ico { font-size: 1.05em; line-height: 0; transition: transform .25s ease; }
.customer-account-forgotpassword .sp-captcha-reload:hover .sp-reload-ico { transform: rotate(90deg); }

/* ---------- Actions row: [submit][reload] 50/50 ---------- */
.customer-account-forgotpassword .actions-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 0 !important;
}
.customer-account-forgotpassword .actions-toolbar::before,
.customer-account-forgotpassword .actions-toolbar::after { display: none !important; }
/* flatten the .primary wrapper so the button is a direct flex child and fills the row */
.customer-account-forgotpassword .actions-toolbar .primary { display: contents; }
.customer-account-forgotpassword .actions-toolbar .secondary { display: none; } /* hide "Go back" (left has Return login) */
/* Exact halves: 520 container - 8px gap = 512, so 256 each.
   A zero flex-basis won't do it — Chrome adds each button's padding + border on
   top, and the submit carries 15px padding against the reload's 16px, which left
   them 255/257. margin-right:0 clears Magento's stray 5px on the submit, which
   otherwise stacks on the toolbar gap (13px visual instead of 8px). */
.customer-account-forgotpassword .actions-toolbar .action.submit {
  flex: 0 0 calc(50% - 4px); width: auto; min-width: 0; margin-right: 0;
}
.customer-account-forgotpassword .actions-toolbar .sp-captcha-reload {
  flex: 0 0 calc(50% - 4px); min-width: 0;
}

/* ---------- Responsive: stack ---------- */
@media (max-width: 860px) {
  .customer-account-forgotpassword .page-main { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .customer-account-forgotpassword .page-main > .page-title-wrapper {
    grid-row: auto; grid-column: 1; padding: 2.5rem 1.5rem 1.25rem;
  }
  .customer-account-forgotpassword .page-main > .columns {
    grid-row: auto; grid-column: 1; border-left: 0; border-top: 1px solid var(--spc-line);
    padding: 2rem 1.5rem 3rem;
  }
  .customer-account-forgotpassword .form.password.forget { max-width: none !important; }
}