/* ---------- Sign-in modal ----------
   Reuses .modal-overlay from main.css (shared with the quick-view modal)
   for the dimmed backdrop; this file only styles the modal panel itself. */
.login-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); z-index:96;
  width:min(420px, 92vw); max-height:90vh; overflow-y:auto;
  background:var(--surface); border:var(--border-w) solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity 0.2s ease, transform 0.2s ease;
}
.login-modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%);}
.login-modal .modal-close{position:sticky; top:12px; left:100%; margin-right:12px; z-index:2;}
.login-modal-body{padding:8px 32px 32px; margin-top:-32px;}
.login-modal-body h2{font-family:var(--font-body); font-weight:700; font-size:24px; margin:8px 0 8px; line-height:1.1;}
.login-modal-sub{font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:22px;}

.login-modal-form .form-row{margin-bottom:16px;}
.login-modal-form label{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-soft); margin-bottom:6px;}

.login-modal-error{
  border:var(--border-w) solid var(--red); border-radius:var(--radius-sm); background:#FBEAEC; color:var(--red);
  font-size:12.5px; padding:10px 12px; margin-bottom:16px;
}
.login-modal-notice{
  border:var(--border-w) solid var(--green); border-radius:var(--radius-sm); background:#EAF4EE; color:var(--green);
  font-size:12.5px; padding:10px 12px; margin-bottom:16px; font-weight:600;
}

.login-modal-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px; flex-wrap:wrap;
}
.login-modal-remember{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); cursor:pointer;
}
.login-modal-remember input{width:auto;}
.login-modal-lost{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-decoration:underline;}
.login-modal-lost:hover{color:var(--red);}

.login-modal-submit{width:100%; border-radius:var(--radius-sm);}

.login-modal-register{
  text-align:center; margin-top:20px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--ink-soft);
}
.login-modal-register a{font-weight:600; color:var(--ink); text-decoration:underline;}
.login-modal-register a:hover{color:var(--red);}

@media (max-width:480px){
  .login-modal{width:100vw; max-height:100vh; height:100%; top:0; left:0; transform:none; border-width:0; border-radius:0;}
  .login-modal.open{transform:none;}
  .login-modal-body{padding:16px 20px 28px;}
}

/* ---------- Registration form no-JS fallback ----------
   Shown on My Account (?action=register) via WooCommerce's own
   myaccount/form-register.php — see the guest branch in my-account.php.
   Inputs already pick up the sitewide input/button styling from main.css;
   this just gives WooCommerce's default .form-row wrappers the same
   spacing/structure used everywhere else instead of bare browser defaults. */
.locker-register-card .woocommerce-form-register{margin-top:18px; text-align:left;}
.locker-register-card .form-row{margin-bottom:16px;}
.locker-register-card .form-row label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.03em;
  color:var(--ink-soft); margin-bottom:6px;
}
.locker-register-card .woocommerce-form-register__generate-password{font-size:12.5px; color:var(--ink-soft); margin-bottom:16px;}
.locker-register-card .woocommerce-privacy-policy-text{font-size:11.5px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5;}
.locker-register-card .woocommerce-form-register .woocommerce-Button,
.locker-register-card .woocommerce-form-register button[name="register"]{
  width:100%; border:var(--border-w) solid var(--ink); border-radius:var(--radius-sm); background:var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:0.04em;
  padding:12px 20px; cursor:pointer;
}
.locker-register-card .woocommerce-form-register .woocommerce-Button:hover,
.locker-register-card .woocommerce-form-register button[name="register"]:hover{background:var(--red); border-color:var(--red);}
.locker-register-card .locker-register-switch{margin-top:18px; font-size:13px; color:var(--ink-soft); text-align:center;}
.locker-register-card .locker-register-switch a{font-weight:600; color:var(--ink); text-decoration:underline;}
.locker-register-card .locker-register-switch a:hover{color:var(--red);}