/*
 * kpa-portal.css — shared KPA portal theme (2026-07-01).
 * One source of truth for the modern look on the standalone auth + form pages
 * (login, pin/otp confirm, registration). All classes are prefixed .kp- so they never
 * collide with AdminLTE / light-bootstrap already loaded on some pages.
 * Referenced relatively: member pages "./assets/kpa-portal.css",
 * admin/public pages "../../member/assets/kpa-portal.css".
 */
:root{
    --kp-primary:#3f4e9f; --kp-primary-d:#2d3875; --kp-success:#27ae60;
    --kp-bg:#eef1f8; --kp-border:#e1e4ed; --kp-text:#1a252f; --kp-muted:#7a8296;
}
.kp-scope, .kp-scope *{ box-sizing:border-box; font-family:'Inter',system-ui,-apple-system,sans-serif; }

/* ---- Centered auth pages (login / pin / otp) ---- */
body.kp-auth{ margin:0; background:linear-gradient(135deg,#eef1f8,#e5e9f6); color:var(--kp-text);
    min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
    font-family:'Inter',system-ui,-apple-system,sans-serif; }
.kp-auth-card{ width:100%; max-width:430px; background:#fff; border-radius:16px;
    box-shadow:0 18px 50px rgba(45,56,117,.16); overflow:hidden; }
.kp-auth-head{ background:linear-gradient(150deg,var(--kp-primary),var(--kp-primary-d)); color:#fff; padding:26px 30px; }
.kp-auth-head .kp-logo{ font-size:1.3rem; font-weight:700; }
.kp-auth-head .kp-sub{ opacity:.9; font-size:.88rem; margin-top:4px; }
.kp-auth-body{ padding:28px 30px; }
.kp-auth-body h3{ font-size:1.2rem; margin:0 0 2px; }
.kp-auth-body .kp-lead{ color:var(--kp-muted); font-size:.9rem; margin:0 0 18px; }

.kp-msg{ background:#fff7ed; border:1px solid #f2d6ac; color:#8a5a12; padding:10px 13px; border-radius:9px; font-size:.86rem; margin-bottom:16px; }
.kp-msg #bad_upload_message{ color:#a93226; } .kp-msg #good_upload_message{ color:#1d6f3f; }

.kp-label{ font-size:.8rem; font-weight:600; color:#55607a; display:block; margin-bottom:6px; }
.kp-input{ display:flex; align-items:center; border:1.5px solid var(--kp-border); border-radius:10px; padding:0 12px; margin-bottom:16px; transition:border-color .15s; background:#fff; }
.kp-input:focus-within{ border-color:var(--kp-primary); }
.kp-input i{ color:#98a1b6; font-size:1rem; }
.kp-input input, .kp-input select{ border:none; outline:none; padding:12px 10px; width:100%; font-size:.95rem; background:transparent; color:var(--kp-text); }
.kp-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:none; border-radius:10px; padding:13px; font-size:.95rem; font-weight:600; cursor:pointer; text-decoration:none; }
.kp-btn.kp-primary{ background:var(--kp-primary); color:#fff; } .kp-btn.kp-primary:hover{ background:var(--kp-primary-d); }
.kp-btn.kp-green{ background:var(--kp-success); color:#fff; } .kp-btn.kp-green:hover{ background:#1f8c4d; }
.kp-divider{ display:flex; align-items:center; gap:12px; color:#aeb5c6; font-size:.78rem; margin:18px 0 4px; }
.kp-divider:before,.kp-divider:after{ content:''; flex:1; height:1px; background:var(--kp-border); }
.kp-links{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px; }
.kp-links a{ color:var(--kp-primary); text-decoration:none; font-size:.86rem; font-weight:600; } .kp-links a:hover{ text-decoration:underline; }
.kp-foot{ margin-top:16px; font-size:.82rem; color:#98a1b6; } .kp-foot a{ color:#7a8296; text-decoration:none; }

/* ---- Branded header bar for form pages (registration) ---- */
.kp-topbar{ background:linear-gradient(135deg,var(--kp-primary),var(--kp-primary-d)); color:#fff; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.kp-topbar .kp-brand{ font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.kp-topbar .kp-brand img{ height:34px; background:#fff; border-radius:6px; padding:2px; }
.kp-topbar a{ color:#fff; text-decoration:none; opacity:.92; font-size:.88rem; font-weight:600; }
.kp-hero{ background:#fff; border-bottom:1px solid var(--kp-border); padding:22px; text-align:center; }
.kp-hero h1{ font-family:'Inter',sans-serif; font-size:1.4rem; color:var(--kp-primary); margin:0 0 4px; }
.kp-hero p{ font-family:'Inter',sans-serif; color:var(--kp-muted); font-size:.92rem; margin:0; }
.kp-hero .kp-chip{ display:inline-block; background:#e8f8f0; color:#1d6f3f; font-size:.66rem; font-weight:700; padding:2px 9px; border-radius:12px; margin-bottom:8px; letter-spacing:.4px; }