/* ============================================================
   ESW — Create Account: single centered card matching the login
   fields/button. Scoped to body.customer-account-create.
   ============================================================ */
:root{
  --eswl-navy:#14296b; --eswl-blue:#1344b1; --eswl-royal:#114ccf;
  --eswl-green:#0f9447; --eswl-ink:#1f2937; --eswl-muted:#6b7280; --eswl-line:#e7eaf3;
}

/* --- title + lede --------------------------------------- */
.customer-account-create .page-title-wrapper .page-title{
  font-size:30px; font-weight:800; color:var(--eswl-navy); margin-bottom:4px;
}
.customer-account-create .eswlogin-lede{ color:var(--eswl-muted); font-size:15px; margin:0 0 26px; }

/* --- column spans full width so the lede sits LEFT under the title; the form CARD
       is centered inside it at 750px. --- */
.customer-account-create .column.main{ max-width:none; margin:0; display:block; }
.customer-account-create .page-title-wrapper .page-title{ text-align:left; }
/* lede: left-aligned under the title, with clear spacing before the form */
.customer-account-create .column.main > .eswlogin-lede{ text-align:left; max-width:820px; margin:0 0 34px; }

/* force every field full-width inside the box: label ABOVE, input 100% (beats Magento's
   wide-form 2-column layout in styles-l.css). Skip .choice (newsletter / show-password). */
.customer-account-create .form-create-account .fieldset > .field:not(.choice){ display:block !important; width:100% !important; }
.customer-account-create .form-create-account .fieldset > .field:not(.choice) > .label{
  display:block !important; float:none !important; width:auto !important; text-align:left !important; margin:0 0 7px !important;
}
.customer-account-create .form-create-account .fieldset > .field:not(.choice) > .control{
  display:block !important; float:none !important; width:100% !important;
}
.customer-account-create .form-create-account .fieldset > .field .input-text,
.customer-account-create .form-create-account .fieldset > .field select,
.customer-account-create .form-create-account .fieldset > .field .control input{ width:100% !important; }
.customer-account-create .form-create-account{
  max-width:750px; margin:0 auto; padding:34px; border:1px solid var(--eswl-line); border-radius:16px; background:#fff;
  box-shadow:0 1px 2px rgba(20,41,107,.05),0 10px 30px rgba(20,41,107,.07); box-sizing:border-box;
}

/* --- section headers (Personal Information / Sign-in Information) — 16px --- */
.customer-account-create .form-create-account .fieldset{ margin:0; padding:0; border:0; }
.customer-account-create .form-create-account .fieldset.create.account{ margin-top:10px; }
.customer-account-create .form-create-account .fieldset.additional_info{ margin:0; }
.customer-account-create .form-create-account .legend{ border:0; margin:0 0 16px; padding:0; width:auto; float:none; }
.customer-account-create .form-create-account .legend span{
  font-size:16px; font-weight:800; letter-spacing:.2px; text-transform:none; color:var(--eswl-navy);
}
.customer-account-create .form-create-account .legend + br{ display:none; }

/* --- fields — labels 15px ------------------------------- */
.customer-account-create .form-create-account .field{ margin:0 0 18px; }
.customer-account-create .form-create-account .field .label{
  font-weight:600; font-size:15px; color:var(--eswl-navy); margin-bottom:7px;
  text-align:left; float:none; width:auto; padding:0; display:block;
}
.customer-account-create .form-create-account .field .control{ width:auto; float:none; }
.customer-account-create .form-create-account input.input-text,
.customer-account-create .form-create-account select{
  width:100%; height:50px; border:1.5px solid var(--eswl-line); border-radius:11px;
  padding:0 15px; font-size:15px; background:#fbfcff; box-shadow:none; box-sizing:border-box;
}
.customer-account-create .form-create-account input.input-text:focus,
.customer-account-create .form-create-account select:focus{
  border-color:var(--eswl-blue); box-shadow:0 0 0 3px rgba(19,68,177,.12); background:#fff; outline:none;
}
/* NOTE: no custom :after asterisk here — Magento renders the single required "*". */

/* --- newsletter checkbox -------------------------------- */
.customer-account-create .form-create-account .field.choice.newsletter{ display:flex; align-items:center; gap:9px; margin:8px 0 4px; }
.customer-account-create .form-create-account .field.choice.newsletter input{ width:18px; height:18px; margin:0; }
.customer-account-create .form-create-account .field.choice.newsletter .label{ margin:0; font-weight:500; font-size:14px; color:var(--eswl-ink); }

/* --- password strength meter ---------------------------- */
.customer-account-create .form-create-account .password-strength-meter{ font-size:12.5px; color:var(--eswl-muted); margin-top:8px; }

/* --- actions -------------------------------------------- */
.customer-account-create .form-create-account .actions-toolbar{ display:flex; flex-direction:column; gap:14px; margin:8px 0 0; padding:0; }
.customer-account-create .form-create-account .actions-toolbar > .primary{ order:1; margin:0; width:100%; float:none; }
.customer-account-create .form-create-account .actions-toolbar > .secondary{ order:2; text-align:center; margin:0; float:none; }
.customer-account-create .form-create-account .action.submit.primary{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; border:0; border-radius:999px; font-weight:800; font-size:16px;
  padding:15px; cursor:pointer; box-sizing:border-box;
  background:linear-gradient(180deg,var(--eswl-royal),var(--eswl-blue)); color:#fff;
  box-shadow:0 10px 22px rgba(17,76,207,.26);
}
.customer-account-create .form-create-account .action.submit.primary:hover{ filter:brightness(1.06); }
.customer-account-create .form-create-account .action.back{ font-size:13.5px; color:var(--eswl-muted); text-decoration:none; }
.customer-account-create .form-create-account .action.back:hover{ color:var(--eswl-blue); }

/* --- responsive ----------------------------------------- */
@media (max-width:560px){
  .customer-account-create .page-title-wrapper .page-title{ font-size:25px; }
  .customer-account-create .form-create-account{ padding:22px; border-radius:14px; }
}
@media (max-width:480px){
  .customer-account-create .page-main{ padding-left:14px; padding-right:14px; }
}