/* ==========================================================================
   KZT Account Pro — Modern Login / Register
   Fully namespaced under .kap-auth so it cannot leak into (or inherit from)
   the KuteShop theme. Colours injected inline: --kap-a accent, --kap-d dark.
   ========================================================================== */
.kap-auth{--kap-a:#FF9900;--kap-d:#131921;--kap-b:#e6e3de;--kap-g:#f7f6f4;
  max-width:440px;margin:32px auto;color:#2b2b2b;
  font-family:inherit;line-height:1.5;-webkit-font-smoothing:antialiased}
.kap-auth *{box-sizing:border-box}
.kap-auth button{font-family:inherit}

.kap-auth-card{background:#fff;border:1px solid var(--kap-b);border-radius:16px;
  padding:26px 26px 24px;box-shadow:0 10px 34px rgba(19,25,33,.07)}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.kap-auth-tabs{display:flex;gap:6px;background:var(--kap-g);padding:5px;border-radius:12px;margin-bottom:22px}
.kap-auth-tab{flex:1;border:0;background:transparent;padding:10px 8px;border-radius:8px;
  font-size:14px;font-weight:600;color:#7a7a7a;cursor:pointer;transition:.15s}
.kap-auth-tab:hover{color:var(--kap-d)}
.kap-auth-tab.is-active{background:#fff;color:var(--kap-d);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ── Panels ──────────────────────────────────────────────────────────── */
.kap-auth-panel{display:none}
.kap-auth-panel.is-active{display:block;animation:kapFade .25s ease}
@keyframes kapFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── Fields ──────────────────────────────────────────────────────────── */
.kap-field{margin-bottom:15px}
.kap-auth label{display:block;font-size:12.5px;font-weight:600;color:#555;margin:0 0 7px}
.kap-auth .kap-opt{font-weight:500;color:#9a9a9a}
.kap-auth input[type=email],
.kap-auth input[type=text],
.kap-auth input[type=tel],
.kap-auth input[type=password]{
  width:100%;padding:13px 15px;font-size:15px;color:var(--kap-d);
  background:#fff;border:1.6px solid var(--kap-b);border-radius:11px;
  outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.3;height:auto}
.kap-auth input:focus{border-color:var(--kap-a);box-shadow:0 0 0 3px color-mix(in srgb,var(--kap-a) 22%,transparent)}
.kap-auth input::placeholder{color:#b3b3b3}

/* password field with eye toggle */
.kap-pw-field{position:relative}
.kap-pw-field input{padding-right:46px}
.kap-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);
  border:0;background:transparent;color:#9a9a9a;cursor:pointer;padding:6px;
  display:flex;align-items:center;border-radius:8px;transition:.15s}
.kap-eye:hover{color:var(--kap-d);background:var(--kap-g)}
.kap-eye.is-on{color:var(--kap-a)}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.kap-btn{display:block;width:100%;text-align:center;border:0;cursor:pointer;
  padding:14px 18px;font-size:15px;font-weight:700;border-radius:11px;
  transition:.15s;text-decoration:none;line-height:1.2;margin-top:4px}
.kap-btn-primary{background:var(--kap-a);color:var(--kap-d)}
.kap-btn-primary:hover{filter:brightness(.94)}
.kap-btn-dark{background:var(--kap-d);color:#fff}
.kap-btn-dark:hover{filter:brightness(1.15)}
.kap-btn[disabled]{opacity:.6;cursor:progress}

.kap-linkbtn{display:inline-block;width:100%;text-align:center;background:transparent;
  border:0;color:var(--kap-d);font-size:13.5px;font-weight:600;cursor:pointer;
  padding:11px 8px;border-radius:9px;transition:.15s;text-decoration:none}
.kap-linkbtn:hover{background:var(--kap-g)}

/* ── "or" divider ────────────────────────────────────────────────────── */
.kap-or{display:flex;align-items:center;gap:12px;margin:16px 0 6px;color:#b0b0b0}
.kap-or::before,.kap-or::after{content:"";flex:1;height:1px;background:var(--kap-b)}
.kap-or span{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ── Reveal wrappers ─────────────────────────────────────────────────── */
.kap-pw-wrap{margin-top:10px;animation:kapSlide .25s ease}
@keyframes kapSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kap-forgot{display:inline-block;margin-top:11px;font-size:12.5px;color:#8a8a8a;text-decoration:none}
.kap-forgot:hover{color:var(--kap-a)}

/* ── Code entry ──────────────────────────────────────────────────────── */
.kap-code-wrap{animation:kapFade .25s ease}
.kap-code-input{width:100%;text-align:center;font-size:26px;font-weight:700;
  letter-spacing:.5em;padding:14px 10px!important;text-indent:.5em}
.kap-code-meta{display:flex;justify-content:center;gap:10px;margin:14px 0 0;font-size:13px}
.kap-code-meta a{color:var(--kap-a);text-decoration:none;font-weight:600}
.kap-code-meta a:hover{text-decoration:underline}
.kap-code-meta span{color:#c8c8c8}

/* ── Messages ────────────────────────────────────────────────────────── */
.kap-auth-msg{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;line-height:1.45}
.kap-auth-msg.is-error{background:#fef2f2;color:#b42318;border:1px solid #fecaca}
.kap-auth-msg.is-success{background:#ecfdf3;color:#067647;border:1px solid #abefc6}
.kap-auth-msg.is-info{background:#eff6ff;color:#1849a9;border:1px solid #b2ddff}

/* ── Misc text ───────────────────────────────────────────────────────── */
.kap-hint{font-size:12px;color:#9a9a9a;margin:8px 0 0;text-align:center}
.kap-auth-alt{text-align:center;font-size:13.5px;color:#6a6a6a;margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--kap-b)}
.kap-auth-alt a{color:var(--kap-a);font-weight:700;text-decoration:none}
.kap-auth-alt a:hover{text-decoration:underline}
.kap-auth-fine{font-size:12px;color:#9a9a9a;margin:11px 0 0;text-align:center}
.kap-auth-hi{font-size:15px;margin:0 0 16px;text-align:center;color:var(--kap-d)}
.kap-auth--in .kap-linkbtn{margin-top:8px}

/* honeypot — visually gone, still in the DOM for bots */
.kap-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  overflow:hidden!important;opacity:0!important}

/* keep our SVG icons sane despite theme svg{fill:currentColor} resets */
.kap-auth .kap-eye svg{fill:none;stroke:currentColor}

@media (max-width:480px){
  .kap-auth{margin:18px auto}
  .kap-auth-card{padding:20px 18px;border-radius:14px}
}