/* =====================================================================
   Sprit School – login / password pages theme layer
   Loaded last on login, user login, forgot & reset password pages.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --sp-primary: #1180bb;
    --sp-primary-2: #2fb0e6;
    --sp-navy: #0c1a2b;
    --sp-navy-2: #12304d;
    --sp-text: #e6edf5;
    --sp-muted: #94a6ba;
}

body, body h1, body h2, body h3, body h4, body p, body a, body .btn, body .form-control, body label {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { background: var(--sp-navy) !important; }

/* ---------- Left panel (form) -------------------------------------- */
.loginbg {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px !important;
    background:
        radial-gradient(900px 500px at -10% -10%, rgba(17,128,187,.35), transparent 60%),
        radial-gradient(700px 500px at 120% 110%, rgba(47,176,230,.18), transparent 60%),
        linear-gradient(180deg, var(--sp-navy) 0%, var(--sp-navy-2) 100%) !important;
    position: relative;
}
.loginbg .form-top { background: transparent !important; padding: 0 !important; margin-bottom: 28px; border: 0 !important; }
.loginbg .form-top .logowidth img,
.loginbg .form-top img { max-height: 54px; width: auto; max-width: 240px; }
.loginbg .form-bottom { background: transparent !important; padding: 0 !important; box-shadow: none !important; }

.loginbg .form-bottom h3,
.loginbg h3.font-white {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    margin: 0 0 6px !important;
}
body.sp-login .loginbg .form-bottom h3::after {
    content: "Welcome back — sign in to continue to Sprit School.";
    display: block;
    color: var(--sp-muted);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 8px;
    margin-bottom: 26px;
}

.loginbg .form-group { margin-bottom: 16px !important; position: relative; }
.loginbg .form-control,
.loginbg input[type="text"],
.loginbg input[type="password"],
.loginbg input[type="email"] {
    height: 50px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 15px !important;
    padding: 0 44px 0 16px !important;
    box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.loginbg .form-control::placeholder { color: #8396ab !important; }
.loginbg .form-control:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: var(--sp-primary-2) !important;
    box-shadow: 0 0 0 4px rgba(47,176,230,.18) !important;
    outline: 0;
}
.loginbg input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #14293f inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}
.loginbg .form-control-feedback {
    color: #7f93aa !important;
    line-height: 50px !important;
    height: 50px !important;
    width: 44px !important;
}

.loginbg .btn,
.loginbg button[type="submit"] {
    width: 100%;
    height: 50px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-2) 100%) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(17,128,187,.35) !important;
    transition: transform .15s, box-shadow .2s, filter .2s;
    margin-top: 4px;
}
.loginbg .btn:hover,
.loginbg button[type="submit"]:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(17,128,187,.45) !important;
    opacity: 1 !important;
}

.loginbg a,
.loginbg .forgot {
    color: #7cc8ee !important;
    font-size: 13.5px !important;
    font-weight: 500;
    display: inline-block;
    margin-top: 18px;
    transition: color .2s;
}
.loginbg a:hover { color: #fff !important; text-decoration: none; }
.loginbg .text-danger { color: #fca5a5 !important; font-size: 12.5px; }
.loginbg .alert {
    border-radius: 12px !important;
    border: 0 !important;
    font-size: 13.5px;
}
.loginbg .alert-danger { background: rgba(239,68,68,.14) !important; color: #fecaca !important; }
.loginbg .alert-success { background: rgba(16,185,129,.14) !important; color: #a7f3d0 !important; }
.loginbg #captcha_image img { border-radius: 10px; }
.loginbg .catpcha { color: #7cc8ee !important; }

/* small footer line under the form */
.loginbg::after {
    content: "© Sprit Network";
    position: absolute;
    left: 56px;
    bottom: 26px;
    color: #5f7389;
    font-size: 12.5px;
}

/* ---------- Right panel (image + notices) -------------------------- */
.nopadding-2 > div[style*="background"] {
    position: relative;
    min-height: 100vh;
}
.nopadding-2 > div[style*="background"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(12,26,43,.82) 0%, rgba(17,128,187,.45) 55%, rgba(12,26,43,.30) 100%);
    pointer-events: none;
}
.nopadding-2 > div[style*="background"] > * { position: relative; z-index: 1; }
.nopadding-2 .h3,
.nopadding-2 h3 {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
}
.nopadding-2 .loginright {
    background: rgba(255,255,255,.10) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.nopadding-2 .messages h4 { color: #fff !important; font-weight: 600; }
.nopadding-2 .messages p { color: rgba(255,255,255,.82) !important; }
.nopadding-2 .messages a.more { color: #9bdcff !important; }
.nopadding-2 .logdivider { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.18) !important; }

/* ---------- Mobile -------------------------------------------------- */
@media (max-width: 991px) {
    .loginbg { min-height: auto; padding: 40px 26px 64px !important; }
    .loginbg::after { left: 26px; }
    .nopadding-2 > div[style*="background"] { min-height: 260px; }
}

/* ---------- Fixes after visual review ------------------------------ */
.loginbg { margin: 0 !important; width: 100% !important; max-width: none !important; }
.bgoffsetbg > .nopadding,
.bgoffsetbg > [class*="col-"].nopadding { padding: 0 !important; }
.bgoffsetbg > .nopadding-2 { padding: 0 !important; }
body.sp-login .loginbg .form-bottom h3::after { line-height: 1.55; }
.loginbg .form-bottom h3 { margin-bottom: 24px !important; }
body.sp-login .loginbg .form-bottom h3 { margin-bottom: 0 !important; }
.loginbg .form-top .logowidth { width: auto !important; max-width: none !important; }
.loginbg .form-top .logowidth img { height: 52px !important; max-height: 52px; width: auto !important; max-width: 260px !important; }

/* ---------- Class / child selection page (user/choose) ------------- */
.loginbg.login390 {
    min-height: auto !important;
    max-width: 520px !important;
    margin: 12vh auto 0 !important;
    padding: 40px 40px 36px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px rgba(0,0,0,.40);
}
.loginbg.login390::after { display: none; }
.loginbg.login390 .selectform { border: 0 !important; }
.loginbg.login390 .select-title {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 20px !important;
}
.loginbg.login390 .radio { margin: 0 0 10px !important; }
.loginbg.login390 .radio label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.loginbg.login390 .radio label:hover { background: rgba(255,255,255,.10) !important; border-color: var(--sp-primary-2) !important; }
.loginbg.login390 .radio input[type=radio] {
    position: static !important;
    margin: 0 !important;
    width: 18px; height: 18px;
    accent-color: var(--sp-primary-2);
}
.loginbg.login390 .form-bottom { border: 0 !important; margin-top: 18px; overflow: hidden; }
.loginbg.login390 .btn2 {
    float: none !important;
    width: 100%;
    height: 50px;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-2) 100%) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 10px 24px rgba(17,128,187,.35);
}
.loginbg.login390 .btn2:hover { filter: brightness(1.06); }
.top-content { min-height: 100vh; }
.loginbg.login390 .radio { background: transparent !important; border: 0 !important; padding: 0 !important; }
body:has(.login390),
body:has(.login390) .top-content {
    background:
        radial-gradient(900px 600px at 15% 10%, rgba(17,128,187,.30), transparent 60%),
        radial-gradient(800px 600px at 90% 90%, rgba(47,176,230,.16), transparent 60%),
        #0a1624 !important;
}