/* ============================================================
   ESW — Customer Login "Refined Twin Cards" (Option 3)
   Scoped to body.customer-account-login. Body only; the default
   Magento header/footer are untouched.
   ============================================================ */
:root{
  --eswl-navy:#14296b; --eswl-blue:#1344b1; --eswl-royal:#114ccf;
  --eswl-green:#0f9447; --eswl-ink:#1f2937; --eswl-muted:#6b7280;
  --eswl-line:#e7eaf3;
}

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

/* --- two-card grid --------------------------------------- */
/* Span the full content rail: page-main now supplies the rail padding, so the
   container fills it edge-to-edge. Two equal columns put the left card's left
   edge on the left rail and the right card's right edge on the right rail, with
   a clean 32px gutter between the boxes (rail-aligned, 2026-06-24). */
.customer-account-login .login-container{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  align-items:start; max-width:none; width:100%; margin:0;
}
.customer-account-login .login-container:before,
.customer-account-login .login-container:after{display:none !important;} /* kill blank float clears */

/* --- card shell ------------------------------------------ */
/* high-specificity reset: blank theme sets fixed width + float on these
   blocks and loads after this file, so force them to fill the grid cell. */
.customer-account-login .login-container > .eswlogin-card{
  width:auto; float:none; margin:0;
}
.customer-account-login .eswlogin-card{
  width:auto; float:none; margin:0; 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);
}
.customer-account-login .eswlogin-card--alt{
  background:linear-gradient(170deg,#f7faff,#fdfeff); border-color:#e1e9ff;
}

/* --- eyebrow tag ----------------------------------------- */
.customer-account-login .eswlogin-tag{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  color:var(--eswl-blue); background:#eaf0ff; border-radius:999px; padding:6px 13px;
}

/* --- headings / sub -------------------------------------- */
.customer-account-login .eswlogin-card .block-title{
  border:0; padding:0; margin:0 0 6px;
}
.customer-account-login .eswlogin-card .block-title strong{
  font-size:21px; font-weight:800; color:var(--eswl-navy);
}
.customer-account-login .eswlogin-card .field.note,
.customer-account-login .eswlogin-card .eswlogin-sub{
  color:var(--eswl-muted); font-size:14px; margin:0 0 22px; padding:0;
}

/* --- form fields ----------------------------------------- */
.customer-account-login .eswlogin-card .fieldset{margin:0;}
.customer-account-login .eswlogin-card .fieldset > .field{margin:0 0 18px;}
.customer-account-login .eswlogin-card .field .label{
  font-weight:600; font-size:13px; color:var(--eswl-navy); margin-bottom:7px;
  text-align:left; float:none; width:auto; padding:0;
}
.customer-account-login .eswlogin-card .field .control{width:auto; float:none;}
.customer-account-login .eswlogin-card input.input-text{
  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;
}
.customer-account-login .eswlogin-card input.input-text:focus{
  border-color:var(--eswl-blue); box-shadow:0 0 0 3px rgba(19,68,177,.12); background:#fff;
}

/* --- actions: forgot link above full-width Sign In ------- */
.customer-account-login .eswlogin-card .actions-toolbar{
  display:flex; flex-direction:column; margin:0; padding:0;
}
.customer-account-login .eswlogin-card .actions-toolbar > .secondary{
  order:1; text-align:right; margin:0 0 16px; float:none;
}
.customer-account-login .eswlogin-card .actions-toolbar > .primary{
  order:2; margin:0; float:none; width:100%;
}
.customer-account-login .eswlogin-card .actions-toolbar .action.remind{
  font-size:13.5px;
}

/* --- buttons (Sign In / Create) -------------------------- */
.customer-account-login .eswlogin-card .action.login.primary,
.customer-account-login .eswlogin-card .action.create.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;
}
.customer-account-login .eswlogin-card .action.login.primary{
  background:linear-gradient(180deg,var(--eswl-royal),var(--eswl-blue)); color:#fff;
  box-shadow:0 10px 22px rgba(17,76,207,.26);
}
.customer-account-login .eswlogin-card .action.login.primary:hover{filter:brightness(1.06);}
.customer-account-login .eswlogin-card .action.create.primary{
  background:#fff; border:2px solid var(--eswl-blue); color:var(--eswl-blue); padding:13px;
}
.customer-account-login .eswlogin-card .action.create.primary:hover{
  background:var(--eswl-blue); color:#fff;
}

/* --- benefits checklist ---------------------------------- */
.customer-account-login .eswlogin-benefits{
  list-style:none; padding:0; margin:0 0 26px;
}
.customer-account-login .eswlogin-benefits li{
  display:flex; gap:12px; align-items:flex-start; padding:10px 0;
  border-bottom:1px dashed #e6ebf6; font-size:14.5px; color:var(--eswl-ink);
}
.customer-account-login .eswlogin-benefits li:last-child{border-bottom:0;}
.customer-account-login .eswlogin-benefits svg{
  width:21px; height:21px; color:var(--eswl-green); flex:0 0 auto; margin-top:1px;
}

/* --- responsive ------------------------------------------ */
@media (max-width:820px){
  .customer-account-login .login-container{grid-template-columns:1fr;}
  .customer-account-login .eswlogin-card{padding:26px;}
}

/* ===== 2026-06-24 — responsive + balance polish ===== */
/* Equal-height twin cards so the two columns stay visually balanced. */
.customer-account-login .login-container{ align-items:stretch; }
.customer-account-login .login-container > .eswlogin-card{ display:flex; flex-direction:column; }
/* benefits list grows so the "Create an Account" button bottom-aligns with "Sign In" */
.customer-account-login .eswlogin-card--alt .eswlogin-benefits{ flex:1 1 auto; }

/* Tablet (between the stack point and laptop): a touch tighter so neither card cramps. */
@media (max-width:1024px) and (min-width:821px){
  .customer-account-login .login-container{ gap:22px; }
  .customer-account-login .eswlogin-card{ padding:28px; }
}

/* Small phones: scale the title/lede and ease the card padding. */
@media (max-width:560px){
  .customer-account-login .page-title-wrapper .page-title{ font-size:25px; }
  .customer-account-login .eswlogin-lede{ font-size:14px; margin:0 0 20px; }
  .customer-account-login .eswlogin-card{ padding:22px; border-radius:14px; }
  .customer-account-login .eswlogin-card .block-title strong{ font-size:19px; }
  .customer-account-login .eswlogin-card input.input-text{ height:48px; }
  .customer-account-login .eswlogin-card .action.login.primary,
  .customer-account-login .eswlogin-card .action.create.primary{ font-size:15px; padding:14px; }
}

/* Small phones (<=480px): the header search bar uses a 14px side rail while the
   page-main floored at 28px, so the login title/cards sat 14px inside the header.
   Match the header's 14px rail at this breakpoint (2026-06-24). */
@media (max-width:480px){
  body.customer-account-login .page-main{ padding-left:14px; padding-right:14px; }
}

/* 2026-06-26: bottom-align "Sign In" so it lines up with "Create an Account". */
.customer-account-login .block-customer-login .block-content,
.customer-account-login .block-customer-login .form-login,
.customer-account-login .block-customer-login .fieldset.login{ display:flex; flex-direction:column; flex:1 1 auto; }
.customer-account-login .block-customer-login .form-login .actions-toolbar{ margin-top:auto; }
.customer-account-login .block-customer-login .fieldset[data-hasrequired]:after{ content:none !important; display:none !important; }