/* ==========================================================================
   WooCommerce My Account — Login & Registration
   woocommerce-myaccount-login.css
   Enqueued via inc/enqueue.php on is_account_page() && ! is_user_logged_in()
   ========================================================================== */


/* ── 1. PAGE SHELL ────────────────────────────────────────────────────────── */

.woocommerce-account:not(.logged-in) main#main-content {
  background: var(--bg-page);
  padding: var(--space-16) 0 var(--space-24);
  min-height: 68vh;
}

.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: var(--container-base);
  margin: 0 auto;
  padding: 0 var(--container-px);
  box-sizing: border-box;
}

@media (min-width: 1281px) {
  .woocommerce-account:not(.logged-in) .woocommerce {
    max-width: var(--container-md);
  }
}


/* ── 2. TWO-COLUMN LAYOUT ─────────────────────────────────────────────────── */
/* Neutralise the clearfix that WooCommerce injects on .woocommerce::before/after.
   display:table on those pseudo-elements creates a block formatting context that
   prevents the grid from laying out .u-column1 / .u-column2 in a single row. */

.woocommerce-account:not(.logged-in) .woocommerce::before,
.woocommerce-account:not(.logged-in) .woocommerce::after {
  display: none !important;
  content: none !important;
}

/* Same clearfix reset on the grid container itself */
#customer_login::before,
#customer_login::after {
  display: none !important;
  content: none !important;
}

/* Override WooCommerce float-based col2-set — double-classed to beat (0,2,0) */

.woocommerce #customer_login.col2-set,
.woocommerce-page #customer_login.col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-8) !important;
  align-items: start !important;
  width: 100% !important;
  overflow: visible !important;
  float: none !important;
}

.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2,
.woocommerce-page #customer_login .u-column1,
.woocommerce-page #customer_login .u-column2 {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  clear: none !important;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) !important;
  box-sizing: border-box !important;
}

/* Remove WooCommerce's built-in border/padding on form.login & form.register */
.woocommerce form.login,
.woocommerce form.register {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ── 3. COLUMN HEADINGS ───────────────────────────────────────────────────── */

#customer_login h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-6) !important;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}


/* ── 4. FORM ROWS ─────────────────────────────────────────────────────────── */
/* WooCommerce default can apply display:flex to p.form-row — reset to block */

#customer_login .woocommerce-form-row {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 var(--space-4) !important;
  padding: 0 !important;
  clear: none !important;
}

#customer_login .woocommerce-form-row label {
  display: block !important;
  float: none !important;
  width: auto !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin: 0 0 var(--space-2) !important;
  padding: 0 !important;
  line-height: var(--lh-normal);
}

#customer_login .woocommerce-form-row label .required {
  color: var(--danger);
  margin-left: 2px;
}

#customer_login .woocommerce-form-row label .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ── 5. TEXT INPUTS ───────────────────────────────────────────────────────── */

#customer_login .woocommerce-Input--text {
  display: block !important;
  width: 100% !important;
  padding: 10px var(--space-4) !important;
  background: var(--bg-page) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-heading);
  box-sizing: border-box !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  box-shadow: none !important;
  height: auto !important;
}

#customer_login .woocommerce-Input--text::placeholder {
  color: var(--text-muted);
}

#customer_login .woocommerce-Input--text:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(53, 193, 144, 0.14) !important;
}


/* ── 6. PASSWORD FIELD ────────────────────────────────────────────────────── */

#customer_login .password-input {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

#customer_login .password-input .woocommerce-Input--text {
  padding-right: 48px !important;
}

#customer_login .show-password-input {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  line-height: 1;
  transition: color var(--transition);
  width: auto !important;
  height: auto !important;
}

#customer_login .show-password-input:hover {
  color: var(--text-heading);
}


/* ── 7. REMEMBER ME ROW (bottom row of login form) ───────────────────────── */
/* Neutralise WooCommerce's clearfix on .form-row::before/after — the
   display:table pseudo-elements break the flex layout of this row. */

.woocommerce-form-login .form-row::before,
.woocommerce-form-login .form-row::after,
.woocommerce-form-register .form-row::before,
.woocommerce-form-register .form-row::after {
  display: none !important;
  content: none !important;
}

.woocommerce-form-login .form-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5) !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}


/* ── 8. CHECKBOXES ────────────────────────────────────────────────────────── */

#customer_login .woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular) !important;
  color: var(--text-body);
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
}

#customer_login .woocommerce-form__input-checkbox {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0 !important;
}


/* ── 9. LOGIN SUBMIT BUTTON ───────────────────────────────────────────────── */

.woocommerce-form-login__submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 28px !important;
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
  flex-shrink: 0;
  height: auto !important;
  line-height: var(--lh-normal);
}

.woocommerce-form-login__submit:hover {
  background: var(--primary-hover) !important;
}


/* ── 10. LOST PASSWORD LINK ───────────────────────────────────────────────── */

.woocommerce-LostPassword {
  margin-top: var(--space-5) !important;
  text-align: center;
  clear: both;
}

.woocommerce-LostPassword a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--link);
  text-decoration: none;
}

.woocommerce-LostPassword a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── 11. REGISTER — hint text + privacy policy ───────────────────────────── */

.woocommerce-form-register > p:not(.woocommerce-form-row):not(.form-row):not(.mailchimp-newsletter) {
  display: block !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-4) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--bg-muted);
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.woocommerce-privacy-policy-text {
  margin: var(--space-4) 0 !important;
}

.woocommerce-privacy-policy-text p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.woocommerce-privacy-policy-text a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-privacy-policy-text a:hover {
  color: var(--link-hover);
}

/* Mailchimp newsletter checkbox */
.mailchimp-newsletter {
  display: block !important;
  margin: var(--space-3) 0 var(--space-5) !important;
  padding: 0 !important;
  float: none !important;
}

.mailchimp-newsletter .woocommerce-form__label-for-checkbox.inline {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
}


/* ── 12. REGISTER SUBMIT BUTTON ──────────────────────────────────────────── */

.woocommerce-form-register .form-row {
  display: block !important;
  margin-top: var(--space-5) !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

.woocommerce-form-register__submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 11px var(--space-6) !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition);
  height: auto !important;
  line-height: var(--lh-normal);
  box-sizing: border-box;
}

.woocommerce-form-register__submit:hover {
  background: var(--accent-hover) !important;
}


/* ── 13. NOTICES ──────────────────────────────────────────────────────────── */

.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-info {
  list-style: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-md);
  margin: 0 0 var(--space-6) !important;
  display: flex !important;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  padding: 13px var(--space-5) 13px 3.5em !important;
}

.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--danger);
  color: #DC2626;
}

.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-error::before {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
}

.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper .woocommerce-message {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  color: var(--accent-text);
}


/* ── 14. LOST PASSWORD / RESET PASSWORD PAGE ──────────────────────────────── */
/* Scoped to form.woocommerce-ResetPassword — works regardless of body class  */

/* Narrow centered wrapper — :has() targets the container when the form is inside it */
.woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) {
  max-width: 500px !important;
  margin: 0 auto !important;
}

/* Card */
form.woocommerce-ResetPassword {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-sizing: border-box;
}

/* Lock icon above the form */
form.woocommerce-ResetPassword::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-5);
  background-color: var(--accent-soft);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230F8A60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Description paragraph */
form.woocommerce-ResetPassword > p:first-of-type {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: var(--lh-relaxed);
  text-align: center;
  margin: 0 0 var(--space-6) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Form rows */
.woocommerce-ResetPassword .woocommerce-form-row {
  display: block !important;
  float: none !important;
  width: auto !important;
  margin: 0 0 var(--space-4) !important;
  padding: 0 !important;
  clear: none !important;
}

/* Labels */
.woocommerce-ResetPassword .woocommerce-form-row label {
  display: block !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin: 0 0 var(--space-2) !important;
  padding: 0 !important;
  line-height: var(--lh-normal);
}

.woocommerce-ResetPassword .woocommerce-form-row label .required {
  color: var(--danger);
  margin-left: 2px;
}

.woocommerce-ResetPassword .woocommerce-form-row label .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Text inputs */
.woocommerce-ResetPassword .woocommerce-Input--text {
  display: block !important;
  width: 100% !important;
  padding: 10px var(--space-4) !important;
  background: var(--bg-page) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-heading);
  box-sizing: border-box !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  box-shadow: none !important;
  height: auto !important;
}

.woocommerce-ResetPassword .woocommerce-Input--text:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(53, 193, 144, 0.14) !important;
}

.woocommerce-ResetPassword .woocommerce-Input--text::placeholder {
  color: var(--text-subtle);
}

/* Password input wrapper */
.woocommerce-ResetPassword .password-input {
  position: relative;
  display: block !important;
  width: 100% !important;
}

.woocommerce-ResetPassword .password-input .woocommerce-Input--text {
  padding-right: 48px !important;
}

/* Show / hide password eye button */
.woocommerce-ResetPassword .show-password-input {
  position: absolute !important;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 4px;
  color: var(--text-subtle);
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color var(--transition);
  width: auto !important;
  height: auto !important;
}

.woocommerce-ResetPassword .show-password-input:hover {
  color: var(--text-heading);
}

/* Password strength meter */
.woocommerce-ResetPassword .woocommerce-password-strength {
  margin: var(--space-2) 0 0;
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  border-left: 3px solid transparent;
}

.woocommerce-ResetPassword .woocommerce-password-strength.short,
.woocommerce-ResetPassword .woocommerce-password-strength.bad {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border-left-color: var(--danger);
}

.woocommerce-ResetPassword .woocommerce-password-strength.good {
  background: rgba(245, 158, 11, 0.08);
  color: #B45309;
  border-left-color: var(--warning);
}

.woocommerce-ResetPassword .woocommerce-password-strength.strong {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-left-color: var(--accent);
}

/* Password hint text */
.woocommerce-ResetPassword .woocommerce-password-hint {
  display: block;
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: var(--lh-relaxed);
}

/* Clear div */
.woocommerce-ResetPassword .clear {
  display: none !important;
}

/* Submit row */
.woocommerce-ResetPassword .form-row:last-child {
  margin: var(--space-2) 0 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

.woocommerce-ResetPassword .form-row:last-child::before,
.woocommerce-ResetPassword .form-row:last-child::after {
  display: none !important;
  content: none !important;
}

/* Submit button */
.woocommerce-ResetPassword .woocommerce-Button.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 11px var(--space-6) !important;
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--transition);
  height: auto !important;
  line-height: var(--lh-normal);
  box-sizing: border-box;
}

.woocommerce-ResetPassword .woocommerce-Button.button:hover {
  background: var(--primary-hover) !important;
}

.woocommerce-ResetPassword .woocommerce-Button.button:disabled,
.woocommerce-ResetPassword .woocommerce-Button.button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Back-to-login link below the form */
.woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) > p {
  text-align: center;
  margin-top: var(--space-5) !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) > p a {
  color: var(--link);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) > p a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── 15. RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .woocommerce-account:not(.logged-in) main#main-content {
    padding: var(--space-10) 0 var(--space-16);
  }

  .woocommerce-account:not(.logged-in) .woocommerce {
    padding: 0 var(--space-5);
  }

  .woocommerce #customer_login.col2-set,
  .woocommerce-page #customer_login.col2-set {
    grid-template-columns: 1fr !important;
    max-width: 540px !important;
    margin: 0 auto !important;
  }

  .woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) {
    padding: 0 var(--space-5) !important;
  }
}

@media (max-width: 520px) {
  .woocommerce-account:not(.logged-in) .woocommerce {
    padding: 0 var(--space-4);
  }

  #customer_login .u-column1,
  #customer_login .u-column2 {
    padding: var(--space-5) !important;
  }

  .woocommerce-form-login .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .woocommerce-form-login__submit {
    width: 100% !important;
    justify-content: center;
  }

  .woocommerce-account:not(.logged-in) .woocommerce:has(form.woocommerce-ResetPassword) {
    padding: 0 var(--space-4) !important;
  }

  form.woocommerce-ResetPassword {
    padding: var(--space-6) !important;
  }
}