/* ══════════════════════════════════════════════════════════
   WP LOGIN PAGE — Kubic Solutions
   Mirrors the WooCommerce My Account login card.
   Geist @font-face and base path are injected via
   wp_add_inline_style() in functions.php.
   ══════════════════════════════════════════════════════════ */

:root {
  --kl-primary:       #155dfc;
  --kl-primary-hover: #3b82f6;
  --kl-primary-tint:  #eff6ff;
  --kl-primary-light: #f9fafb;
  --kl-gray-900:      #0d1828;
  --kl-gray-600:      #475565;
  --kl-muted:         #99a1af;
  --kl-border:        #e5e7eb;
  --kl-base:          #ffffff;
  --kl-red:           #ef4444;
  --kl-blue-700:      #1249d6;

  --kl-radius-md:   10px;
  --kl-radius-lg:   14px;
  --kl-radius-full: 9999px;

  --kl-shadow-card:   0 1px 3px rgba(0,0,0,.06), 0 8px 32px rgba(0,0,0,.08);
  --kl-shadow-btn:    0 2px 8px rgba(21,93,252,.30);
  --kl-shadow-btn-hv: 0 6px 20px rgba(21,93,252,.40);

  --kl-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --kl-transition: 0.15s ease;
}

/* ══════════════════════════════════════════════════════════
   1. PAGE SHELL
   ══════════════════════════════════════════════════════════ */

html {
  background: var(--kl-primary-light) !important;
}

body.login {
  background: var(--kl-primary-light) !important;
  font-family: var(--kl-font) !important;
  -webkit-font-smoothing: antialiased;
  /* Push content below the fixed 72px site header */
  /* padding-top: 72px !important; */
}

/* ══════════════════════════════════════════════════════════
   2. LOGO — hidden; the site header/footer are shown instead
   ══════════════════════════════════════════════════════════ */

#login h1,
.wp-login-logo {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   3. CONTAINER
   ══════════════════════════════════════════════════════════ */

#login {
  width: 100% !important;
  max-width: 440px !important;
  padding: clamp(32px, 5vh, 56px) 0 clamp(40px, 10vh, 120px) !important;
}

/* ══════════════════════════════════════════════════════════
   4. CARD — identical treatment to .woocommerce-form-login
   ══════════════════════════════════════════════════════════ */

#loginform,
#lostpasswordform,
#registerform {
  background:
    linear-gradient(90deg, var(--kl-primary) 0%, var(--kl-primary-hover) 100%) top / 100% 5px no-repeat,
    var(--kl-base) !important;
  border: 1px solid var(--kl-border) !important;
  border-radius: var(--kl-radius-lg) !important;
  box-shadow: var(--kl-shadow-card) !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  overflow: hidden;
}

/* "Welcome back" heading injected as the first visual element */
#loginform::before {
  content: 'Welcome back';
  display: block;
  font-family: var(--kl-font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--kl-gray-900);
  padding: 24px 36px 0;
}

#lostpasswordform::before {
  content: 'Reset your password';
  display: block;
  font-family: var(--kl-font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--kl-gray-900);
  padding: 24px 36px 0;
}

#registerform::before {
  content: 'Create an account';
  display: block;
  font-family: var(--kl-font);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--kl-gray-900);
  padding: 24px 36px 0;
}

/* Horizontal padding for all direct children */
#loginform > p,
#loginform > div,
#lostpasswordform > p,
#lostpasswordform > div,
#registerform > p,
#registerform > div {
  padding-left: 36px !important;
  padding-right: 36px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Top spacing for first field */
#loginform > p:first-of-type,
#lostpasswordform > p:first-of-type {
  padding-top: 14px !important;
}

#loginform .user-pass-wrap {
  padding-top: 12px !important;
}

/* Register: first field (username) 14px, second field (email) 12px */
#registerform > p:first-of-type {
  padding-top: 14px !important;
}

#registerform > p:nth-of-type(2) {
  padding-top: 12px !important;
}

/* Hide the "Registration confirmation will be emailed to you" notice */
#reg_passmail,
#registerform br.clear {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   5. LABELS
   ══════════════════════════════════════════════════════════ */

#loginform label,
#lostpasswordform label,
#registerform label {
  font-family: var(--kl-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--kl-gray-900) !important;
  display: block;
  margin-bottom: 7px !important;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   6. INPUTS
   ══════════════════════════════════════════════════════════ */

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"],
#registerform input[type="text"],
#registerform input[type="email"] {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--kl-border) !important;
  border-radius: var(--kl-radius-md) !important;
  font-family: var(--kl-font) !important;
  font-size: 14px !important;
  color: var(--kl-gray-900) !important;
  background: var(--kl-base) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  transition: border-color var(--kl-transition), box-shadow var(--kl-transition);
  -webkit-appearance: none;
  appearance: none;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus,
#lostpasswordform input[type="text"]:focus,
#lostpasswordform input[type="email"]:focus,
#registerform input[type="text"]:focus,
#registerform input[type="email"]:focus {
  border-color: var(--kl-primary) !important;
  box-shadow: 0 0 0 3px rgba(21, 93, 252, .10) !important;
  outline: none !important;
}

.wp-pwd {
  display: block !important;
}

/* Hide the password visibility toggle */
.wp-hide-pw {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   7. REMEMBER ME ROW
   ══════════════════════════════════════════════════════════ */

#loginform .forgetmenot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;         /* cancel WP's float:left */
  padding-top: 14px !important;
  font-family: var(--kl-font) !important;
  font-size: 13px !important;
  color: var(--kl-gray-600) !important;
  cursor: pointer;
  user-select: none;
}

#loginform .forgetmenot input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 1.5px solid var(--kl-border) !important;
  border-radius: 4px !important;
  accent-color: var(--kl-primary);
  box-shadow: none !important;
  flex-shrink: 0;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   8. SUBMIT ROW — button stacked below Remember Me
   ══════════════════════════════════════════════════════════ */

#loginform p.submit,
#registerform p.submit {
  display: block !important;
  float: none !important;         /* cancel WP's float:right */
  clear: both !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
  margin: 0 !important;
}

#wp-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  display: block !important;       /* block respects width:100% on input[type=submit] */
  width: 100% !important;
  height: auto !important;         /* kills .button-large fixed height */
  min-height: 0 !important;        /* kills any min-height inherited from .button */
  line-height: 1 !important;       /* kills .button-large 2.3em line-height */
  padding: 13px 28px !important;
  background: var(--kl-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kl-radius-full) !important;
  font-family: var(--kl-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: var(--kl-shadow-btn) !important;
  cursor: pointer;
  white-space: nowrap;
  float: none !important;
  transition: transform var(--kl-transition), box-shadow var(--kl-transition), background var(--kl-transition) !important;
}

#wp-submit:hover {
  background: var(--kl-blue-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--kl-shadow-btn-hv) !important;
}

#wp-submit:active {
  transform: none;
  box-shadow: var(--kl-shadow-btn) !important;
}

/* Lost password page submit */
#lostpasswordform p.submit {
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}

#lostpasswordform .button-primary {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
  padding: 13px 28px !important;
  background: var(--kl-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--kl-radius-full) !important;
  font-family: var(--kl-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow: var(--kl-shadow-btn) !important;
  cursor: pointer;
  float: none !important;
  box-sizing: border-box !important;
  transition: transform var(--kl-transition), box-shadow var(--kl-transition), background var(--kl-transition) !important;
}

#lostpasswordform .button-primary:hover {
  background: var(--kl-blue-700) !important;
  transform: translateY(-1px);
  box-shadow: var(--kl-shadow-btn-hv) !important;
}

#lostpasswordform .button-primary:active {
  transform: none;
  box-shadow: var(--kl-shadow-btn) !important;
}

/* ══════════════════════════════════════════════════════════
   9. NAV LINKS — attached to the bottom of the card
   ══════════════════════════════════════════════════════════ */

/* Remove the card's bottom radius so #nav can connect flush */
#loginform,
#lostpasswordform,
#registerform {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* #nav continues the card visually */
#nav {
  background: var(--kl-base) !important;
  border: 1px solid var(--kl-border) !important;
  border-top: 1px solid var(--kl-border) !important;
  border-bottom-left-radius: var(--kl-radius-lg) !important;
  border-bottom-right-radius: var(--kl-radius-lg) !important;
  text-align: center !important;
  padding: 16px 36px !important;
  margin: 0 0 16px !important;
  font-family: var(--kl-font) !important;
  font-size: 13px;
  box-shadow: var(--kl-shadow-card) !important;
}

#nav a {
  font-family: var(--kl-font) !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--kl-muted) !important;
  text-decoration: none;
  transition: color var(--kl-transition);
}

#nav a:hover {
  color: var(--kl-primary) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hide "back to site" — the site header/footer already provide navigation */
#backtoblog {
  display: none !important;
}

/* Hide privacy policy link */
.privacy-policy-page-link {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   10. ERROR / NOTICE MESSAGES
   ══════════════════════════════════════════════════════════ */

#login_error,
.login .message,
.login .success {
  font-family: var(--kl-font) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  border-radius: var(--kl-radius-md) !important;
  padding: 13px 16px !important;
  box-shadow: none !important;
  margin: 0 0 16px !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

#login_error {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  border-left-color: var(--kl-red) !important;
  color: #be123c !important;
}

.login .message,
.login .success {
  background: var(--kl-primary-tint) !important;
  border-color: #dbeafe !important;
  border-left-color: var(--kl-primary) !important;
  color: #1e40af !important;
}

/* ══════════════════════════════════════════════════════════
   11. RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #login {
    padding: 32px 16px 40px !important;
  }

  #loginform::before,
  #lostpasswordform::before,
  #registerform::before {
    padding-left: 24px;
    padding-right: 24px;
    font-size: 20px;
  }

  #loginform > p,
  #loginform > div,
  #lostpasswordform > p,
  #lostpasswordform > div,
  #registerform > p,
  #registerform > div {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #loginform p.submit,
  #lostpasswordform p.submit,
  #registerform p.submit {
    padding-bottom: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wp-submit,
  #lostpasswordform .button-primary,
  #loginform input,
  #lostpasswordform input,
  #registerform input {
    transition: none !important;
  }
}