/* =========================================================
   Create Account (customer/account/create) — Satphone dark theme.
   Two-column split mirroring the Sign In page:
     Left  = "CUSTOMER / SiGN UP" hero (radar, divider, return-login).
     Right = registration form (name row, email, passwords, opt-ins).
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

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

/* ---------- LEFT: title hero (identical to login) ---------- */
.customer-account-create .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-create .page-title-wrapper .sp-login-hero {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.customer-account-create .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-create .page-title-wrapper .page-title .sp-title-word { display: block; }
.customer-account-create .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) ---------- */
.customer-account-create .sp-radar-i { position: relative; text-transform: none; }
.customer-account-create .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-create .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-create .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-create .sp-cart-radar .radar-ring.r1 { width: 60px;  height: 60px;  animation-delay: 0s; }
.customer-account-create .sp-cart-radar .radar-ring.r2 { width: 100px; height: 100px; animation-delay: .5s; }
.customer-account-create .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-create .sp-cart-radar .radar-ring { animation: none; opacity: .3; }
}

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

/* ---------- RIGHT: form column ---------- */
.customer-account-create .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-create .columns,
.customer-account-create .column.main { max-width: none; width: 100%; margin: 0; padding: 0; }
.customer-account-create .column.main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.customer-account-create .form-create-account {
  display: flex; flex-direction: column;
  /* beat Magento's .form.create.account { width:50%; min-width:600px } */
  width: 100% !important; max-width: 520px !important; min-width: 0 !important;
  margin: 0 auto;
}

/* ---------- Fieldsets: strip borders, hide legends ---------- */
.customer-account-create .fieldset { border: 0; margin: 0; padding: 0; }
.customer-account-create .fieldset > .legend,
.customer-account-create .fieldset > br { display: none; }

/* ---------- Fields (labels hidden, placeholders shown) ---------- */
/* .fieldset > .field specificity beats Magento's default 29px field spacing */
.customer-account-create .fieldset > .field { margin: 0 0 1rem; }
.customer-account-create .field > .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* a11y-only */
}
.customer-account-create .field .control { width: 100%; position: relative; }
.customer-account-create .fieldset > .field > .control,
.customer-account-create .sp-name-row .field > .control { width: 100% !important; }

/* First + Last name side by side */
.customer-account-create .sp-name-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0;
}
.customer-account-create .sp-name-row .field { margin: 0 0 1rem; }

.customer-account-create input[type="text"],
.customer-account-create input[type="email"],
.customer-account-create 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-create input:focus { border-color: var(--spc-accent); outline: 0; box-shadow: none; }
.customer-account-create input::placeholder { color: var(--spc-muted); }

/* reveal-password eye (same pattern as the login) */
.customer-account-create .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-create .sp-pw-control:focus-within { border-color: var(--spc-accent); }
.customer-account-create .sp-pw-control input[type="password"],
.customer-account-create .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-create .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-create .sp-eye:hover { color: var(--spc-accent); }
.customer-account-create .sp-eye svg { width: 20px; height: 20px; display: block; }

/* hide the password-strength meter, tooltips, required-fields note */
.customer-account-create #password-strength-meter-container,
.customer-account-create .field-tooltip,
.customer-account-create .fieldset > .field.note { display: none; }
.customer-account-create .fieldset[data-hasrequired]::after { display: none !important; content: none !important; }
.customer-account-create div.mage-error { color: #f2a49c; font-size: .8rem; margin-top: 8px; }
/* the JS relocates password/confirm errors to sit after the flex .control (as a
   direct .field child); a block field collapses the 8px error margin to ~0, so make
   these fields flex columns — flex items keep their margins. */
.customer-account-create .field.password,
.customer-account-create .field.confirmation { display: flex; flex-direction: column; }

/* ---------- Opt-in checkboxes (newsletter + assistance) ---------- */
/* Magento floats a 25.8% label-column spacer via .field.choice::before — kill it
   so the checkbox aligns with the inputs' left edge. */
.customer-account-create .field.choice::before,
.customer-account-create .field.choice::after { display: none !important; content: none !important; }
/* opt-in checkboxes (newsletter + remote assistance) removed from registration for now */
.customer-account-create .field.choice { display: none !important; }
.customer-account-create .field.choice.sp-optin {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .85rem;
}
.customer-account-create .field.choice input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--spc-accent);
}
.customer-account-create .field.choice > label,
.customer-account-create .field.choice > .label {
  position: static; width: auto; height: auto; clip: auto; overflow: visible;
  color: var(--spc-muted); font-size: .9rem; line-height: 1.4; margin: 0; font-weight: 400;
}
/* hide Magento's default show/hide-password toggle (we have the eye) — it's the
   only .field.choice carrying a data-bind, so this leaves the opt-ins visible */
.customer-account-create .field.choice[data-bind] { display: none; }

/* ---------- Create Account button ---------- */
.customer-account-create .actions-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 0 !important;
}
.customer-account-create .actions-toolbar::before,
.customer-account-create .actions-toolbar::after { display: none !important; }
/* flatten the .primary wrapper (display:contents) so Create + Reset are true
   siblings in the toolbar's flex row, sharing it exactly 50/50 */
.customer-account-create .actions-toolbar .primary { display: contents; }
.customer-account-create .actions-toolbar .secondary { display: none; } /* hide the "Back" link */
/* 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 Reset's 16px, which left them
   252.5/254.5. 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-create .actions-toolbar .primary .action.submit,
.customer-account-create .actions-toolbar .sp-reset {
  flex: 0 0 calc(50% - 4px); min-width: 0; width: auto;
}
.customer-account-create .actions-toolbar .primary .action.submit { margin-right: 0; }

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