/* =========================================================
   Login / Sign-up (customer/account/login) — Satphone dark theme.
   Full-viewport two-column split, mirroring the Shopping Cart:
     Left  = "Customer / Sign In" title hero (centered) + orange rule.
     Right = sign-in form (placeholders + password eye) then, below a
             blue divider, the Create-account section.
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

.customer-account-login .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 (like the cart) ---------- */
.customer-account-login .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-login .page-main > a { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.customer-account-login .page-main > .page.messages,
.customer-account-login .page-main > .messages { grid-row: 1; grid-column: 1 / -1; margin: 0; }

/* ---------- LEFT: title hero, centered in the column ---------- */
.customer-account-login .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);
}
/* hero block: centered in the column, but its title + button left-aligned inside */
.customer-account-login .page-title-wrapper .sp-login-hero {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.customer-account-login .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-login .page-title-wrapper .page-title .sp-title-word { display: block; }
/* orange divider under the title */
.customer-account-login .page-title-wrapper .page-title::after {
  content: ''; display: block; width: 88px; height: 4px; margin-top: 0; background: var(--spc-accent);
}

/* ---------- Pulse-radar beacon on the "i" tittle (built by JS) ---------- */
/* keep the "i" lowercase (the rest of the title is uppercased) so it keeps its
   tittle for the beacon to sit on → renders "SiGN IN" */
.customer-account-login .sp-radar-i { position: relative; text-transform: none; }
.customer-account-login .sp-cart-radar {
  position: absolute; left: calc(50% - 1px); top: calc(0.23em + 3px); width: 150px; height: 150px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
}
.customer-account-login .sp-cart-radar .radar-dot {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--spc-accent); box-shadow: 0 0 18px var(--spc-accent);
}
.customer-account-login .sp-cart-radar .radar-ring {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px solid var(--spc-accent); transform: translate(-50%, -50%);
  opacity: 0; animation: sp-ping 3s ease-out infinite;
}
.customer-account-login .sp-cart-radar .radar-ring.r1 { width: 60px;  height: 60px;  animation-delay: 0s; }
.customer-account-login .sp-cart-radar .radar-ring.r2 { width: 100px; height: 100px; animation-delay: .5s; }
.customer-account-login .sp-cart-radar .radar-ring.r3 { width: 150px; height: 150px; animation-delay: 1s; }
@keyframes sp-ping {
  0%   { opacity: .8; }
  70%  { opacity: .12; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-account-login .sp-cart-radar .radar-ring { animation: none; opacity: .3; }
}

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

/* ---------- RIGHT: forms column, divider from the left ---------- */
.customer-account-login .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-login .columns,
.customer-account-login .column.main { max-width: none; width: 100%; margin: 0; padding: 0; }
/* .column.main has flex-grow:1 (fills the column height); make it a centered flex
   column so the form sits in the vertical middle of the right column, not the top. */
.customer-account-login .column.main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.customer-account-login .login-container {
  display: flex; flex-direction: column; width: 100%; max-width: 520px; margin: 0 auto;
}
.customer-account-login .login-container > .block {
  float: none; width: auto; margin: 0; box-sizing: border-box;
}
.customer-account-login .login-container > .block-customer-login { order: 1; }
.customer-account-login .login-container > .block-new-customer {
  order: 2; margin-top: 2.75rem; padding-top: 2.75rem;
  border-top: 1px solid #4f8fd6; /* the blue divider between sign-in and new-customer */
}

/* the sign-in fields lead — hide the "Registered Customers" heading */
.customer-account-login .block-customer-login .block-title { display: none; }

/* ---------- Fields (labels hidden, placeholders shown) ---------- */
.customer-account-login .fieldset { border: 0; margin: 0; padding: 0; }
.customer-account-login .fieldset > .field { margin: 0 0 1rem; }
.customer-account-login .field > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* a11y-only */
}
.customer-account-login .field .control { width: 100%; position: relative; }
/* Magento's default narrows the control to 74.2% — force it full-width so the
   inputs fill the form container. */
.customer-account-login .fieldset > .field > .control { width: 100% !important; }
.customer-account-login input[type="text"],
.customer-account-login input[type="email"],
.customer-account-login input[type="password"] {
  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-login input:focus { border-color: var(--spc-accent); outline: 0; box-shadow: none; }
.customer-account-login input::placeholder { color: var(--spc-muted); }

/* reveal-password eye — the control becomes the bordered field box and the input
   sits inside it borderless, so the eye is a flex sibling beside the text (not
   overlapping the native input, which would otherwise paint over an absolute
   button regardless of z-index). */
.customer-account-login .sp-pw-control {
  display: flex; flex-direction: row !important; align-items: center; box-sizing: border-box;
  background: var(--spc-bg-2); border: 1px solid var(--spc-line);
}
.customer-account-login .sp-pw-control:focus-within { border-color: var(--spc-accent); }
.customer-account-login .sp-pw-control input[type="password"],
.customer-account-login .sp-pw-control input[type="text"] {
  flex: 1 1 auto; min-width: 0; height: 48px;
  background: transparent; border: 0; padding: 0 14px; box-shadow: none;
}
.customer-account-login .sp-eye {
  flex: 0 0 auto; margin-right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--spc-muted); transition: color .15s ease;
}
.customer-account-login .sp-eye:hover { color: var(--spc-accent); }
.customer-account-login .sp-eye svg { width: 20px; height: 20px; display: block; }

/* hide Magento's default "Show Password" toggle + required-fields note */
.customer-account-login .block-customer-login .field.choice { display: none; }
.customer-account-login .fieldset > .field.note,
.customer-account-login .field-tooltip { display: none; }
.customer-account-login div.mage-error { color: #f2a49c; font-size: .8rem; margin-top: 8px; }
/* the JS relocates the password error to sit after the flex .control (as a direct
   .field child); a block field collapses the 8px error margin to ~0, so make the
   password field a flex column — flex items keep their margins. */
.customer-account-login .field.password { display: flex; flex-direction: column; }

/* ---------- Actions / buttons ---------- */
.customer-account-login .actions-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 0 !important;
}
/* The toolbar is a flex row; Magento's clearfix ::before/::after would otherwise
   become flex items, so the 8px gap would land on the outer edges too. Drop them
   → the gap sits only between the two buttons. */
.customer-account-login .actions-toolbar::before,
.customer-account-login .actions-toolbar::after { display: none !important; }
/* kill Magento's default margin/padding on the .primary and .secondary wrappers
   (the .primary's trailing margin is the 30px gap between the two buttons) */
.customer-account-login .block-customer-login .actions-toolbar .primary,
.customer-account-login .block-customer-login .actions-toolbar .secondary { margin: 0 !important; padding: 0 !important; }
/* Sign In grows to fill the row; Forgot password sits beside it, both centered */
.customer-account-login .block-customer-login .actions-toolbar .primary { flex: 1 1 0; }
.customer-account-login .block-customer-login .actions-toolbar .secondary { flex: 1 1 0; }
/* Both buttons fill their flex slot (appearance comes from the global .sp-btn classes) */
.customer-account-login .block-customer-login .action.login,
.customer-account-login .block-customer-login .action.remind { width: 100%; }
/* drop Magento's default 6px top margin on the Forgot-password button */
.customer-account-login .block-customer-login .action.remind { margin-top: 0; }
/* hide the "* Required Fields" note (a data-hasrequired pseudo) — redundant now */
.customer-account-login .fieldset[data-hasrequired]::after { display: none !important; content: none !important; }

/* ---------- New Customers ---------- */
.customer-account-login .block-new-customer .block-title { border: 0; margin: 0 0 1rem; padding: 0; }
.customer-account-login .block-new-customer .block-title strong {
  display: block; font-family: 'Barlow', system-ui, sans-serif; font-weight: 600;
  font-size: 1.4rem; letter-spacing: 1px; text-transform: uppercase; color: var(--spc-fg);
}
.customer-account-login .block-new-customer .block-content p {
  color: var(--spc-muted); font-size: .95rem; line-height: 1.7; margin: 0 0 1.4rem;
}
.customer-account-login .block-new-customer .actions-toolbar { margin-top: 0; }
/* Create an Account -> same width as Sign In above it. calc(50% - 4px), not a
   plain 50%: Sign In shares its row with Forgot Password and gives up half the
   8px gap, so it lands on 256 rather than 260. Matching the calc keeps the two
   rows the same width. display:contents flattens the .primary wrapper so the
   link is a direct flex child and the width resolves against the toolbar. */
.customer-account-login .block-new-customer .actions-toolbar .primary { display: contents; }
.customer-account-login .block-new-customer .actions-toolbar .action.create {
  flex: 0 0 calc(50% - 4px); width: auto; min-width: 0;
  margin-right: 0; /* Magento leaves a stray 5px here, as on the other action buttons */
}

/* ---------- Responsive: stack ---------- */
@media (max-width: 860px) {
  .customer-account-login .page-main { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .customer-account-login .page-main > .page-title-wrapper {
    grid-row: auto; grid-column: 1; padding: 2.5rem 1.5rem 1.25rem;
  }
  .customer-account-login .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-login .login-container { max-width: none; }
}