/* Kitline account: the login screens (code and password), lost/reset password.
   Loaded on logged-out My Account screens (and on checkout for the quick login dialog).
   The font, the field text size and the accent colors are per-site settings (login_style),
   printed as tokens right after this file. The tokens below are the same on every site.
   Direction comes from the page (logical properties only). */
:root{
  --kitline-login-ink:#111;
  --kitline-login-text:#334155;
  --kitline-login-muted:#94a3b8;
  --kitline-login-line:#dfe3e8;
  --kitline-login-err:#dc2626;
  --kitline-login-ok:#16a34a;
}

.kitline-acct-login{max-width:430px;margin:0 auto;font-family:var(--kitline-login-font)}
.kitline-acct-tabs{display:flex;border-bottom:2px solid #eef0f2;margin:0 0 22px}
.kitline-acct-tab{flex:1;background:none;border:0;padding:13px 8px;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--kitline-login-muted);cursor:pointer;position:relative;transition:color .15s}
.kitline-acct-tab.active{color:var(--kitline-login-ink)}
.kitline-acct-tab.active::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--kitline-login-accent)}
.kitline-acct-tab:hover{color:#475569}

.kitline-acct-login .form-row{margin:0 0 16px;display:block}
.kitline-acct-login label{display:block;font-size:13.5px;font-weight:600;color:var(--kitline-login-text);margin:0 0 6px}
.kitline-acct-login .required{color:var(--kitline-login-err)}
.kitline-acct-login input.input-text,.kitline-acct-otp-field input{width:100%;padding:12px 13px;border:1.5px solid var(--kitline-login-line);border-radius:8px;font-family:inherit;font-size:var(--kitline-login-field-size);background:#fff;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.kitline-acct-login input.input-text:focus,.kitline-acct-otp-field input:focus{outline:0;border-color:var(--kitline-login-accent);box-shadow:0 0 0 3px rgba(4,107,210,.12)}

.kitline-acct-btn{width:100%;background:var(--kitline-login-accent);color:#fff;border:0;border-radius:8px;padding:14px;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;transition:background .15s}
.kitline-acct-btn:hover{background:var(--kitline-login-accent-dark);color:#fff}
.kitline-acct-btn:disabled{opacity:.6;cursor:default}

.kitline-acct-login-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.kitline-acct-login-row .kitline-acct-btn{width:auto;flex:1;min-width:150px}
.kitline-acct-remember{display:flex;align-items:center;gap:7px;font-weight:500;color:#475569;margin:0}
.kitline-acct-remember input{width:auto;margin:0}
.kitline-acct-lost{margin:14px 0 0;text-align:center}
.kitline-acct-lost a,.kitline-acct-otp-back a,.kitline-acct-otp-resend a{color:var(--kitline-login-accent);text-decoration:none;font-size:14px;font-weight:600}
.kitline-acct-lost a:hover,.kitline-acct-otp-resend a:hover{text-decoration:underline}

.kitline-acct-otp-intro{margin:0 0 16px;color:#475569;font-size:14px;line-height:1.5}

/* channel choice email / SMS */
.kitline-acct-otp-method{display:flex;gap:8px;background:#f1f5f9;padding:5px;border-radius:10px;margin:0 0 18px}
.kitline-acct-otp-method label{flex:1;margin:0;text-align:center;padding:10px;border-radius:7px;cursor:pointer;font-weight:600;color:#475569;transition:.15s}
.kitline-acct-otp-method label.active{background:#fff;color:var(--kitline-login-accent);box-shadow:0 1px 3px rgba(15,23,42,.1)}
.kitline-acct-otp-method input{display:none}
.kitline-acct-otp-field{margin:0 0 16px}
.kitline-acct-otp-verify-text{text-align:center;font-size:15px;color:var(--kitline-login-text);font-weight:600;margin:0 0 16px}

/* 6 digit boxes */
.kitline-acct-otp-digits{display:flex;gap:8px;justify-content:center;margin:0 0 14px;direction:ltr}
.kitline-acct-digit{width:46px;height:54px;text-align:center;font-size:22px;font-weight:700;border:1.5px solid var(--kitline-login-line);border-radius:8px;background:#fff;color:var(--kitline-login-ink);font-family:inherit}
.kitline-acct-digit:focus{outline:0;border-color:var(--kitline-login-accent);box-shadow:0 0 0 3px rgba(4,107,210,.12)}
.kitline-acct-digit.kitline-acct-digit-err{border-color:var(--kitline-login-err);background:#fff5f5;color:var(--kitline-login-err);animation:kitline-acct-shake .3s}
.kitline-acct-digit.kitline-acct-digit-err:focus{box-shadow:0 0 0 3px rgba(220,38,38,.14)}
@keyframes kitline-acct-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.kitline-acct-digit.kitline-acct-digit-err{animation:none}}

.kitline-acct-otp-timer{text-align:center;color:var(--kitline-login-muted);font-size:13px;margin:0 0 12px;min-height:18px}
.kitline-acct-otp-resend{text-align:center;margin:14px 0 0}
.kitline-acct-otp-back{text-align:center;margin:12px 0 0}
.kitline-acct-otp-msg{text-align:center;font-size:14px;margin:12px 0 0;min-height:18px}
.kitline-acct-otp-msg.err{color:var(--kitline-login-err)}
.kitline-acct-otp-msg.ok{color:var(--kitline-login-ok)}

@media (max-width:480px){
  .kitline-acct-digit{width:42px;height:50px;font-size:20px}
  .kitline-acct-login-row{flex-direction:column;align-items:stretch}
  .kitline-acct-login-row .kitline-acct-btn{width:100%}
}
@media (max-width:360px){
  .kitline-acct-otp-digits{gap:6px}
  .kitline-acct-digit{width:38px;height:48px}
}

/* ===== lost-password / reset-password: same card language as the login ===== */
.woocommerce-account .woocommerce-ResetPassword{max-width:430px;margin:0 auto;font-family:var(--kitline-login-font)}
.woocommerce-account .woocommerce-ResetPassword > p:first-of-type{text-align:center;color:#475569;font-size:14.5px;line-height:1.6;margin:0 0 22px}
.woocommerce-account .woocommerce-ResetPassword .form-row{margin:0 0 16px;display:block}
.woocommerce-account .woocommerce-ResetPassword label{display:block;font-size:13.5px;font-weight:600;color:var(--kitline-login-text);margin:0 0 6px}
.woocommerce-account .woocommerce-ResetPassword .input-text,
.woocommerce-account .woocommerce-ResetPassword input[type=text],
.woocommerce-account .woocommerce-ResetPassword input[type=password]{width:100%;padding:12px 13px;border:1.5px solid var(--kitline-login-line);border-radius:8px;font-family:inherit;font-size:var(--kitline-login-field-size);box-sizing:border-box;background:#fff}
.woocommerce-account .woocommerce-ResetPassword .input-text:focus,
.woocommerce-account .woocommerce-ResetPassword input:focus{outline:0;border-color:var(--kitline-login-accent);box-shadow:0 0 0 3px rgba(4,107,210,.12)}
.woocommerce-account .woocommerce-ResetPassword .button,
.woocommerce-account .woocommerce-ResetPassword button[type=submit]{width:100%;background:var(--kitline-login-accent);color:#fff;border:0;border-radius:8px;padding:14px;font-family:inherit;font-size:15.5px;font-weight:700;cursor:pointer;transition:background .15s}
.woocommerce-account .woocommerce-ResetPassword .button:hover,
.woocommerce-account .woocommerce-ResetPassword button[type=submit]:hover{background:var(--kitline-login-accent-dark)}
.woocommerce-account .woocommerce-ResetPassword .woocommerce-password-strength{border-radius:8px;font-weight:600;margin-top:8px}

/* ============================================================
   Logged-out My Account screens ONLY.
   The logged-in dashboard grid (side menu + content) must not squeeze the
   login card into the empty menu column. Every rule is scoped to
   body.woocommerce-account:not(.logged-in), so the dashboard is untouched.
   ============================================================ */

/* 1) Un-grid. Specificity (0,3,1) beats the dashboard layout rule without !important. */
body.woocommerce-account:not(.logged-in) .woocommerce{
  display:block;
  grid-template-columns:none;
  gap:0;
  max-width:none;
  margin:0;
  padding:8px 16px 64px;
}

/* 2) Page heading ("My Account", an Elementor heading) centered over the card. Scoped to #main. */
body.woocommerce-account:not(.logged-in) #main h1.e-heading-base,
body.woocommerce-account:not(.logged-in) #main .elementor-widget-heading h1{
  text-align:center;
  color:#111;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  margin:0 0 6px;
}

/* 3) One card shell for the login (both tabs) and for lost/reset password.
   form.woocommerce-form-login sits INSIDE .kitline-acct-login, so it is not styled as a card. */
body.woocommerce-account:not(.logged-in) .kitline-acct-login,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword{
  box-sizing:border-box;
  width:100%;
  max-width:480px;
  margin:18px auto 64px;
  background:#fff;
  border:1px solid #eef0f2;
  border-radius:16px;
  padding:34px 32px 30px;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 14px 34px -14px rgba(4,107,210,.18);
}

/* 4) Tab rail flush to the top of the card. */
body.woocommerce-account:not(.logged-in) .kitline-acct-tabs{margin-top:2px;margin-bottom:24px}

/* 5) Lost-password intro: centered helper text. */
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword > p:not(.woocommerce-form-row):not(.form-row){
  margin:0 0 24px;
  color:var(--kitline-login-text);
  font-size:14px;
  line-height:1.6;
  text-align:center;
}

/* 6) Reset submit full width, the same rhythm as the login button. */
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .woocommerce-Button,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button[type="submit"]{
  width:100%;
}

/* 6b) Notices line up with the card. */
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-info{
  max-width:480px;
  margin-inline:auto;
}

/* 7) Small touches. */
body.woocommerce-account:not(.logged-in) .kitline-acct-login input[type=checkbox],
body.woocommerce-account:not(.logged-in) .kitline-acct-login input[type=radio],
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input[type=checkbox]{accent-color:var(--kitline-login-accent)}
body.woocommerce-account:not(.logged-in) .kitline-acct-btn:active,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword button[type="submit"]:active,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .button:active{transform:translateY(1px)}

/* 8) Mobile: keep the card, lighter, never touching the edges. */
@media (max-width:480px){
  body.woocommerce-account:not(.logged-in) .woocommerce{padding:4px 14px 48px}
  body.woocommerce-account:not(.logged-in) .kitline-acct-login,
  body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword{
    max-width:100%;
    margin:14px auto 40px;
    padding:24px 18px;
    border-radius:14px;
    box-shadow:0 10px 26px -16px rgba(4,107,210,.20);
  }
  body.woocommerce-account:not(.logged-in) #main h1.e-heading-base{margin-bottom:4px}
  body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper,
  body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-error,
  body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-message,
  body.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-info{max-width:100%}
}

/* 9) Password tab: remove WooCommerce's own form border (would be a card inside the card),
   and keep the tab buttons clean in every state (the theme paints a focus background). */
body.woocommerce-account:not(.logged-in) .kitline-acct-login form.woocommerce-form-login{
  border:0;
  padding:0;
  margin:0;
  border-radius:0;
  background:transparent;
}
body.woocommerce-account:not(.logged-in) .kitline-acct-tab,
body.woocommerce-account:not(.logged-in) .kitline-acct-tab:hover,
body.woocommerce-account:not(.logged-in) .kitline-acct-tab:focus,
body.woocommerce-account:not(.logged-in) .kitline-acct-tab:active,
body.woocommerce-account:not(.logged-in) .kitline-acct-tab.active{
  background:transparent !important;
  box-shadow:none !important;
}
body.woocommerce-account:not(.logged-in) .kitline-acct-tab:focus-visible{outline:2px solid var(--kitline-login-accent);outline-offset:-2px}

/* 10) Lost/reset password rows: WooCommerce marks the field form-row-first (47% + float),
   which left the input half width next to a full-width button. Make every row full width. */
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .woocommerce-form-row{
  width:100%;
  float:none;
  margin:0 0 16px;
  padding:0;
}
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input.input-text{
  width:100%;
  box-sizing:border-box;
  padding:12px 13px;
  border:1.5px solid var(--kitline-login-line);
  border-radius:8px;
  font-family:inherit;
  font-size:var(--kitline-login-field-size);
  background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input.input-text:focus{
  outline:0;
  border-color:var(--kitline-login-accent);
  box-shadow:0 0 0 3px rgba(4,107,210,.12);
}
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .clear{display:none}
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--kitline-login-text);
  margin:0 0 6px;
}

/* 11) One label style. WooCommerce's ".woocommerce-js form .form-row label" (0,2,2) otherwise wins
   and makes the password-tab labels heavier and taller than the email-code labels. */
body.woocommerce-account:not(.logged-in) .kitline-acct-login form.woocommerce-form-login .form-row label:not(.kitline-acct-remember),
body.woocommerce-account:not(.logged-in) .kitline-acct-otp-field label,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .form-row label{
  display:block;
  font-weight:600;
  font-size:13.5px;
  line-height:1.5;
  text-align:start;
  color:var(--kitline-login-text);
  margin:0 0 6px;
}