/* ==========================================================================
   King of Kings Dominion Academy — portal authentication screens
   (login · forgot password · reset password). Royal blue · Crest gold · Ribbon red
   ========================================================================== */
:root{
  --navy:#0a1c63; --navy-3:#06123f; --royal:#1740c8; --royal-2:#2a5cf0;
  --gold:#ffc61a; --gold-2:#ffe066; --gold-deep:#e09a00;
  --red:#d0102c; --red-2:#ec2340;
  --cream:#fff8dc; --ink:#121a3a; --muted:#56607a; --line:#e2e7f3; --bg:#f3f6fd;
  --ok:#1e7a4c; --r:14px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Montserrat','Plus Jakarta Sans',system-ui,sans-serif;
  --cond:'Oswald','Arial Narrow',sans-serif;
  --gold-grad:linear-gradient(180deg,#fff7c9 0%,#ffe066 28%,#ffc61a 52%,#e09a00 74%,#ffd84a 100%);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.blms-auth{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
a{color:var(--royal);text-decoration:none}
a:hover{color:var(--red)}
button,input{font-family:inherit}

.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}

/* ---------- Left: brand panel ---------- */
.brand-side{position:relative;color:#fff;overflow:hidden;display:flex;flex-direction:column;padding:30px 44px;
  background:radial-gradient(800px 600px at 18% 28%,#3a74ff 0%,rgba(42,92,240,0) 60%),linear-gradient(135deg,#1740c8 0%,#0f2a8a 45%,#0a1c63 100%)}
.brand-side::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.4px,transparent 1.4px);background-size:26px 26px;mask-image:linear-gradient(90deg,#000,transparent 75%);-webkit-mask-image:linear-gradient(90deg,#000,transparent 75%)}
.bs-splash{position:absolute;right:-14%;top:-10%;width:62%;height:125%;pointer-events:none;z-index:0;opacity:.95}
.bs-splash svg{width:100%;height:100%;display:block}
.brand-side>*:not(.bs-splash){position:relative;z-index:2}
.bs-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bs-top a{color:#fff;font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;background:rgba(6,18,63,.45);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.bs-top a:hover{background:#fff;color:var(--navy)}
.bs-top .session{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--cond);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);background:rgba(6,18,63,.55);padding:.35rem .8rem;border-radius:999px}

.bs-mid{margin:auto 0;padding:34px 0 30px;max-width:540px}
.bs-brand{display:flex;align-items:center;gap:1.1rem;margin-bottom:1rem}
.bs-crest{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));animation:kfloat 6s ease-in-out infinite}
@keyframes kfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.bs-title{display:flex;flex-direction:column;line-height:.95;font-family:var(--display);font-weight:900;text-transform:uppercase}
.bs-title .t1{font-size:1.25rem;letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 var(--navy-3)}
.bs-title .t2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.01em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #7a4b00) drop-shadow(0 10px 18px rgba(0,0,0,.4));margin-top:.12em}
.ribbon{display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(180deg,var(--red-2),#a80c22);color:#fff;font-family:var(--cond);font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem 1.1rem;border-radius:8px;border:2px solid var(--gold);box-shadow:0 8px 20px rgba(0,0,0,.25);font-size:.92rem;margin-bottom:1.6rem}
.ribbon i{color:var(--gold);font-size:.7em}
.brand-side h1{font-family:var(--cond);text-transform:uppercase;font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.12;letter-spacing:.02em;margin:0 0 .7rem}
.brand-side h1 em{font-style:normal;color:var(--gold)}
.brand-side p.copy{color:rgba(255,255,255,.88);font-size:1rem;margin:0 0 1.5rem;max-width:440px}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;max-width:440px}
.features span{display:flex;align-items:center;gap:.6rem;font-size:.86rem;font-weight:700;padding:.65rem .85rem;border-radius:12px;background:rgba(6,18,63,.45);border:1px solid rgba(255,198,26,.3);backdrop-filter:blur(4px)}
.features i{color:var(--gold);width:18px;text-align:center}
.bs-kids{position:absolute!important;right:0;bottom:6px;width:clamp(230px,19vw,330px)!important;height:auto!important;max-width:none;z-index:1!important;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));pointer-events:none}
.bs-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.85);max-width:calc(100% - clamp(230px,19vw,330px) - 10px)}
.bs-foot .contacts span{display:flex;gap:.55rem;align-items:flex-start;margin-top:.35rem}
.bs-foot .contacts i{color:var(--gold);width:14px;text-align:center;margin-top:.25rem}
.bs-foot .clock{text-align:left}
.bs-foot .clock b{display:block;font-family:var(--display);font-size:1.6rem;color:var(--gold);font-weight:900;letter-spacing:.02em}
.stripe{position:absolute!important;left:0;right:0;bottom:0;height:6px;z-index:3!important;background:linear-gradient(90deg,var(--royal-2) 0 50%,var(--gold) 50% 75%,var(--red) 75% 100%)}
@media (max-width:1279.98px){.bs-kids{display:none}.bs-foot{max-width:none}}
@media (prefers-reduced-motion:reduce){.bs-crest{animation:none}}

/* ---------- Right: form panel ---------- */
.form-side{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;background:#fff;position:relative}
.form-side::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--royal-2) 0 50%,var(--gold) 50% 75%,var(--red) 75% 100%)}
.form-inner{width:100%;max-width:430px}
.m-head{display:none}
.back-link{display:flex;width:max-content;align-items:center;gap:.45rem;font-size:.86rem;font-weight:700;color:var(--muted);margin-bottom:1.4rem}
.back-link:hover{color:var(--red)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cond);font-size:.86rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.5rem}
.eyebrow::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--gold)}
.form-inner h2{font-family:var(--display);font-size:1.9rem;font-weight:900;color:var(--navy);letter-spacing:-.01em;margin:0 0 .4rem;line-height:1.15}
.form-inner .lead{color:var(--muted);margin:0 0 1.4rem}

.roles{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.roles span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:800;color:var(--navy);background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:.38rem .85rem}
.roles span:nth-child(1) i{color:var(--royal)}
.roles span:nth-child(2) i{color:var(--gold-deep)}
.roles span:nth-child(3) i{color:var(--red)}

.notice{display:flex;gap:.7rem;align-items:flex-start;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1.2rem;border:1px solid}
.notice i{margin-top:.2rem}
.notice.success{background:#ecf8f1;border-color:#bfe5cf;color:#14532d}
.notice.error{background:#fdeef0;border-color:#f5c2ca;color:#8a1426}
.notice.info{background:#eef3ff;border-color:#cfdbfb;color:#1d3478}

.fld{margin-bottom:1.05rem}
.fld label{display:block;font-weight:800;font-size:.85rem;color:var(--navy);margin-bottom:.4rem}
.fld .wrap{position:relative}
.fld .wrap>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8e98b0;font-size:.95rem;pointer-events:none;transition:color .2s}
.fld input{width:100%;height:52px;border:1.5px solid var(--line);border-radius:14px;padding:0 48px 0 44px;font-size:.98rem;color:var(--ink);background:#f9fbff;transition:border-color .2s,box-shadow .2s,background .2s}
.fld input::placeholder{color:#a3abbd}
.fld input:focus{outline:none;border-color:var(--royal);background:#fff;box-shadow:0 0 0 4px rgba(23,64,200,.14)}
.fld .wrap:focus-within>i{color:var(--royal)}
.fld .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:transparent;border-radius:10px;color:#8791a6;cursor:pointer}
.fld .eye:hover{background:var(--bg);color:var(--navy)}
.fld.bad input{border-color:var(--red);background:#fff}
.fld .err{display:block;font-size:.8rem;color:var(--red);margin-top:.3rem;min-height:0}
.fld .err p{margin:0}
.fld .hint{display:block;font-size:.78rem;color:var(--muted);margin-top:.35rem}
.caps{display:none;font-size:.78rem;color:#9a6700;margin-top:.35rem;font-weight:600}
.caps.on{display:block}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin:.2rem 0 1.3rem;flex-wrap:wrap}
.remember{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink);cursor:pointer;user-select:none}
.remember input{width:17px;height:17px;accent-color:var(--royal)}
.link-strong{font-weight:800;font-size:.88rem;color:var(--red)}
.link-strong:hover{color:var(--navy)}

/* Main button — gold, like the website's login button */
.btn-main{width:100%;height:56px;border:2px solid #fff;border-radius:999px;background:linear-gradient(180deg,#ffe680,#ffc61a 55%,#f2a900);color:var(--navy-3);font-weight:900;font-size:1.05rem;letter-spacing:.02em;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;box-shadow:0 0 0 2px var(--gold-deep),0 10px 24px rgba(224,154,0,.4);transition:transform .2s,box-shadow .2s,filter .2s}
.btn-main:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 0 0 2px var(--gold-deep),0 16px 32px rgba(224,154,0,.5)}
.btn-main:disabled{opacity:.8;cursor:wait;transform:none}
.btn-main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gold-deep),0 0 0 6px rgba(23,64,200,.3)}

.divider{display:flex;align-items:center;gap:.8rem;color:#98a1b3;font-family:var(--cond);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin:1.6rem 0 1rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.quick a{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.85rem .4rem;border:1.5px solid var(--line);border-radius:14px;font-size:.8rem;font-weight:800;color:var(--navy);text-align:center;transition:border-color .2s,background .2s,transform .2s}
.quick a i{font-size:1.15rem;color:var(--red)}
.quick a:nth-child(2) i{color:var(--royal)}
.quick a:nth-child(3) i{color:#16a34a}
.quick a:hover{border-color:var(--gold);background:var(--cream);transform:translateY(-2px)}
.quick.two{grid-template-columns:repeat(2,minmax(0,1fr))}

.meter{height:6px;border-radius:6px;background:var(--line);margin-top:.55rem;overflow:hidden}
.meter span{display:block;height:100%;width:0;border-radius:6px;transition:width .25s,background .25s}
.rules{list-style:none;padding:0;margin:.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .8rem;font-size:.78rem;color:var(--muted)}
.rules li{display:flex;align-items:center;gap:.4rem}
.rules li i{font-size:.7rem;color:#c2c8d4}
.rules li.ok{color:var(--ok)}
.rules li.ok i{color:var(--ok)}

.form-foot{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.form-foot .motto{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--navy)}

/* ---------- Mobile ---------- */
@media (max-width:991.98px){
  .auth{grid-template-columns:1fr}
  .brand-side{display:none}
  .form-side{justify-content:flex-start;padding:0 0 32px;background:var(--bg)}
  .form-side::before{display:none}
  .m-head{display:block;position:relative;width:100%;color:#fff;padding:16px 18px 70px;overflow:hidden;text-align:center;
    background:radial-gradient(500px 360px at 20% 20%,#3a74ff 0%,rgba(42,92,240,0) 60%),linear-gradient(135deg,#1740c8 0%,#0f2a8a 50%,#0a1c63 100%)}
  .m-head .bs-splash{right:-45%;top:-20%;width:90%;height:150%;opacity:.45}
  .m-head>*:not(.bs-splash){position:relative;z-index:2}
  .m-head .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .m-head .top a{color:#fff;font-size:.82rem;font-weight:700;display:inline-flex;gap:.4rem;align-items:center;padding:.4rem .8rem;border-radius:999px;background:rgba(6,18,63,.45);border:1px solid rgba(255,255,255,.25)}
  .m-head .top span{font-family:var(--cond);font-size:.74rem;font-weight:600;color:var(--gold-2);letter-spacing:.1em;text-transform:uppercase}
  .m-brand{display:flex;flex-direction:column;align-items:center}
  .m-brand img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));margin-bottom:.4rem}
  .m-brand .bs-title{align-items:center;margin-bottom:.7rem}
  .m-brand .bs-title .t1{font-size:1rem}
  .m-brand .bs-title .t2{font-size:clamp(1.6rem,8vw,2.2rem)}
  .m-brand .ribbon{font-size:.78rem;margin:0;padding:.3rem .9rem}
  .form-inner{max-width:520px;background:#fff;border-radius:22px;margin:-48px 14px 0;padding:26px 20px;box-shadow:0 18px 44px rgba(10,28,99,.16);position:relative;z-index:3;width:auto;align-self:stretch;border-top:5px solid var(--gold)}
  .form-inner h2{font-size:1.5rem}
}
@media (min-width:600px) and (max-width:991.98px){.form-inner{margin-left:auto;margin-right:auto;width:calc(100% - 32px)}}
@media (max-width:380px){.quick{grid-template-columns:1fr 1fr}.rules{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Soften the white brush stroke on the tall portal panel */
.bs-splash svg g:first-of-type path:first-child{opacity:.18}
.brand-side .bs-splash{opacity:.85}