/* =============================================================================
   Kreyo Lingo — sign in / sign up / lost password + WooCommerce cart
   Loaded only on those pages, scoped to body.kl-auth / body.kl-cart.

   COSMETIC ONLY, for the same reason as the account dashboard: these forms
   authenticate and register users (tuturn_signin, tuturn_registration,
   tuturn_forgot_password) and the cart updates orders. Their markup, field
   names and nonces are a contract with Tuturn's and WooCommerce's handlers.
   Nothing here changes structure or behaviour — only paint.
============================================================================= */

body.kl-auth,
body.kl-cart {
  --kla-navy:       #1E2A78;
  --kla-navy-deep:  #141C52;
  --kla-night:      #0B1240;
  --kla-blue:       #4A90E2;
  --kla-blue-soft:  #9CC5F2;
  --kla-ink:        #0E1726;
  --kla-muted:      #5A5F73;
  --kla-line:       #E3E7F5;
  --kla-mist:       #F3F5FC;
  --kla-ground:     #F7F9FC;
  --kla-ok:         #1A7F37;
  --kla-font:       'Inter', system-ui, -apple-system, sans-serif;
  --kla-display:    'Poppins', var(--kla-font);
}

/* ═══ AUTH PAGES ═══════════════════════════════════════════════════════ */

body.kl-auth .tu-main-login { font-family: var(--kla-font); }

/* Left panel — the brand side gets the site's hero gradient instead of
   Tuturn's flat near-black. */
body.kl-auth .tu-login-left {
  position: relative;
  background: linear-gradient(150deg, #0E1648 0%, #1E2A78 45%, #2F4593 78%, #4A90E2 130%);
}
body.kl-auth .tu-login-left::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 420px at 78% 12%, rgba(74,144,226,.28) 0%, transparent 62%);
}
body.kl-auth .tu-login-left > * { position: relative; z-index: 1; }

body.kl-auth .tu-login-left_title h2,
body.kl-auth .tu-login-left h2 {
  font-family: var(--kla-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
body.kl-auth .tu-login-left_title h3,
body.kl-auth .tu-login-left h3,
body.kl-auth .tu-login-left span {
  font-family: var(--kla-display);
  font-weight: 600;
  color: var(--kla-blue-soft);
}
/* Keep the logo legible whatever its own padding. */
body.kl-auth .tu-login-left img {
  max-width: 260px;
  height: auto;
}

/* Right panel — the form side. */
body.kl-auth .tu-login-right { background: #fff; }
body.kl-auth .tu-login-form h2,
body.kl-auth .tu-signup-form h2,
body.kl-auth .tu-password-recover h2,
body.kl-auth .tu-password-reset-form h2 {
  font-family: var(--kla-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--kla-navy);
}
body.kl-auth .tu-login-form h3,
body.kl-auth .tu-signup-form h3,
body.kl-auth .tu-password-recover h3 {
  font-family: var(--kla-display);
  font-weight: 600;
  color: var(--kla-ink);
}

/* Inputs */
body.kl-auth .tu-main-login input[type="text"],
body.kl-auth .tu-main-login input[type="email"],
body.kl-auth .tu-main-login input[type="password"],
body.kl-auth .tu-main-login input[type="tel"],
body.kl-auth .tu-main-login select {
  font-family: var(--kla-font);
  font-size: 15px;
  color: var(--kla-ink);
  background: #fff;
  border: 1.5px solid var(--kla-line);
  border-radius: 12px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.kl-auth .tu-main-login input:focus,
body.kl-auth .tu-main-login select:focus {
  border-color: var(--kla-blue);
  box-shadow: 0 0 0 3px rgba(74,144,226,.16);
  outline: none;
}
body.kl-auth .tu-main-login ::placeholder { color: #9AA2B4; }

/* Primary button */
body.kl-auth .tu-main-login .tu-primbtn,
body.kl-auth .tu-main-login .tu-primbtn-lg,
body.kl-auth .tu-main-login .tu-btn,
body.kl-auth .tu-submit-registration {
  background-color: var(--kla-navy);
  color: #fff;
  font-family: var(--kla-display);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 12px 26px -14px rgba(30,42,120,.75);
  transition: background-color .18s ease, transform .18s ease;
}
body.kl-auth .tu-main-login .tu-primbtn::before,
body.kl-auth .tu-main-login .tu-primbtn-lg::before,
body.kl-auth .tu-main-login .tu-btn::before { background: transparent; }
body.kl-auth .tu-main-login .tu-primbtn:hover,
body.kl-auth .tu-main-login .tu-primbtn-lg:hover,
body.kl-auth .tu-main-login .tu-btn:hover,
body.kl-auth .tu-submit-registration:hover {
  background-color: var(--kla-navy-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Secondary links */
body.kl-auth .tu-user-login a,
body.kl-auth .tu-lost-password a,
body.kl-auth .tu-forgot-password a,
body.kl-auth .tu-password-forgot a,
body.kl-auth .tu-terms a {
  font-family: var(--kla-display);
  font-weight: 600;
  color: var(--kla-navy);
}
body.kl-auth .tu-user-login a:hover,
body.kl-auth .tu-lost-password a:hover,
body.kl-auth .tu-forgot-password a:hover,
body.kl-auth .tu-terms a:hover {
  color: var(--kla-navy-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Divider + role radios + terms checkbox */
body.kl-auth .tu-optioanl-or { color: var(--kla-muted); font-family: var(--kla-display); font-weight: 600; }
body.kl-auth .tu-form-groupradio label,
body.kl-auth .tu-signup-check label,
body.kl-auth .tu-terms { font-size: 14px; color: var(--kla-muted); }
body.kl-auth .tu-radiosm:checked,
body.kl-auth .tu-check:checked { accent-color: var(--kla-navy); }

/* Keyboard focus */
body.kl-auth .tu-main-login a:focus-visible,
body.kl-auth .tu-main-login button:focus-visible {
  outline: 2.5px solid var(--kla-blue);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ═══ WOOCOMMERCE CART ═════════════════════════════════════════════════ */

body.kl-cart .woocommerce { font-family: var(--kla-font); color: var(--kla-ink); }

body.kl-cart .woocommerce table.shop_table {
  border: 1px solid var(--kla-line);
  border-radius: 18px;
  border-collapse: separate;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px -20px rgba(30,42,120,.5);
}
body.kl-cart .woocommerce table.shop_table th {
  font-family: var(--kla-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kla-muted);
  background: var(--kla-ground);
  border-bottom: 1px solid var(--kla-line);
}
body.kl-cart .woocommerce table.shop_table td { border-top: 1px solid var(--kla-line); }
body.kl-cart .woocommerce table.shop_table .product-name a {
  font-family: var(--kla-display);
  font-weight: 700;
  color: var(--kla-ink);
}
body.kl-cart .woocommerce table.shop_table .product-name a:hover { color: var(--kla-navy); }
body.kl-cart .woocommerce .woocommerce-Price-amount {
  font-family: var(--kla-display);
  font-weight: 700;
  color: var(--kla-navy);
  font-variant-numeric: tabular-nums;
}

/* Totals panel */
body.kl-cart .cart_totals,
body.kl-cart .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--kla-line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px -20px rgba(30,42,120,.5);
}
body.kl-cart .cart_totals h2 {
  font-family: var(--kla-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--kla-ink);
}

/* Buttons — Woo's cart buttons share Tuturn's button rule, so the ::before
   overlay is neutralised here too. */
body.kl-cart .woocommerce .button,
body.kl-cart .woocommerce button.button,
body.kl-cart .woocommerce input.button,
body.kl-cart .woocommerce a.button,
body.kl-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--kla-navy);
  color: #fff;
  font-family: var(--kla-display);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 12px 26px -14px rgba(30,42,120,.75);
  transition: background-color .18s ease, transform .18s ease;
}
body.kl-cart .woocommerce .button::before,
body.kl-cart .woocommerce button.button::before,
body.kl-cart .woocommerce a.button::before,
body.kl-cart .wc-proceed-to-checkout a.checkout-button::before { background: transparent; }
body.kl-cart .woocommerce .button:hover,
body.kl-cart .woocommerce button.button:hover,
body.kl-cart .woocommerce a.button:hover,
body.kl-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--kla-navy-deep);
  color: #fff;
  transform: translateY(-1px);
}
/* The checkout button is the one action that should stand out. */
body.kl-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: var(--kla-blue);
  box-shadow: 0 14px 30px -12px rgba(74,144,226,.7);
}
body.kl-cart .wc-proceed-to-checkout a.checkout-button:hover { background-color: #3a7fd1; }

/* Coupon + quantity fields */
body.kl-cart .woocommerce .coupon input[type="text"],
body.kl-cart .woocommerce .quantity input.qty {
  font-family: var(--kla-font);
  border: 1.5px solid var(--kla-line);
  border-radius: 11px;
  color: var(--kla-ink);
}
body.kl-cart .woocommerce .coupon input[type="text"]:focus,
body.kl-cart .woocommerce .quantity input.qty:focus {
  border-color: var(--kla-blue);
  box-shadow: 0 0 0 3px rgba(74,144,226,.16);
  outline: none;
}

/* Notices */
body.kl-cart .woocommerce-message,
body.kl-cart .woocommerce-info {
  border-top-color: var(--kla-navy);
  background: var(--kla-mist);
  border-radius: 12px;
  font-family: var(--kla-font);
}
body.kl-cart .woocommerce-message::before,
body.kl-cart .woocommerce-info::before { color: var(--kla-navy); }