/*
 * SkyLearner login experience — child-theme isolated.
 * Keeps native WordPress/BuddyBoss authentication behaviour intact.
 */

body.login.sl-login-refresh {
    --sl-login-navy-950: #041a37;
    --sl-login-navy-900: #08254b;
    --sl-login-navy-800: #123368;
    --sl-login-navy-700: #1f4d84;
    --sl-login-sky: #52a9ee;
    --sl-login-sky-soft: #dceefe;
    --sl-login-ink: #101c2c;
    --sl-login-body: #32455f;
    --sl-login-muted: #68788f;
    --sl-login-line: #dce5ef;
    --sl-login-field: #f6f9fd;
    --sl-login-white: #ffffff;
    --sl-login-green: #20a879;
    --sl-login-focus: rgba(82, 169, 238, 0.22);
    --sl-login-panel-left: 54vw;

    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: #fff;
    color: var(--sl-login-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.login.sl-login-refresh *,
body.login.sl-login-refresh *::before,
body.login.sl-login-refresh *::after {
    box-sizing: border-box;
}

body.login.sl-login-refresh .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The child theme provides its own hero. Hide BuddyBoss' old split content. */
body.login.sl-login-refresh .login-split {
    display: none !important;
}

/* -------------------------------------------------------------------------
 * Aviation hero
 * ---------------------------------------------------------------------- */
body.login.sl-login-refresh .sl-login-hero {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1;
    width: var(--sl-login-panel-left);
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    color: #fff;
    background-color: var(--sl-login-navy-950);
    /* The supplied aviation photograph is kept as a small local WebP asset.
     * Navy gradients are layered in CSS so the source image stays crisp while
     * retaining the dark SkyLearner avionics treatment from the approved mock-up. */
    background-image:
        linear-gradient(90deg, rgba(1, 15, 35, 0.92) 0%, rgba(3, 25, 53, 0.76) 47%, rgba(5, 34, 69, 0.48) 100%),
        linear-gradient(180deg, rgba(1, 16, 36, 0.10) 0%, rgba(2, 18, 40, 0.08) 47%, rgba(1, 14, 33, 0.72) 100%),
        url('../images/skylearner-login-photo.webp');
    background-position: center center, center center, 57% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    isolation: isolate;
}

body.login.sl-login-refresh .sl-login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 79% 48%, rgba(82, 169, 238, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(5, 31, 64, 0.04) 0%, rgba(1, 15, 35, 0.22) 100%);
}

body.login.sl-login-refresh .sl-login-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(123, 182, 226, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123, 182, 226, 0.05) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0, transparent 60%);
}

body.login.sl-login-refresh .sl-login-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

body.login.sl-login-refresh .sl-login-hero__visual::before {
    content: "";
    position: absolute;
    width: min(74vw, 920px);
    aspect-ratio: 1;
    left: 14%;
    top: 6%;
    border: 1px solid rgba(128, 191, 234, 0.11);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 56px rgba(101, 172, 224, 0.015),
        inset 0 0 0 112px rgba(101, 172, 224, 0.012),
        inset 0 0 0 168px rgba(101, 172, 224, 0.009);
}

body.login.sl-login-refresh .sl-login-hero__visual::after {
    content: "";
    position: absolute;
    width: 66%;
    height: 190px;
    left: 8%;
    top: 17%;
    border-top: 1px dashed rgba(143, 201, 241, 0.28);
    border-radius: 50%;
    transform: rotate(6deg);
}

body.login.sl-login-refresh .sl-login-avionics {
    position: absolute;
    color: rgba(130, 192, 234, 0.27) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

body.login.sl-login-refresh .sl-login-avionics--north { top: 3.1%; left: 54%; font-size: 18px; }
body.login.sl-login-refresh .sl-login-avionics--heading { top: 8.4%; left: 53%; }
body.login.sl-login-refresh .sl-login-avionics--west { top: 26%; left: 25%; }
body.login.sl-login-refresh .sl-login-avionics--east { top: 26%; right: 16%; }

body.login.sl-login-refresh .sl-login-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: clamp(46px, 7vh, 92px) clamp(42px, 5vw, 84px) clamp(142px, 16vh, 182px);
}

body.login.sl-login-refresh .sl-login-system {
    position: absolute;
    top: clamp(34px, 5vh, 64px);
    left: clamp(42px, 5vw, 84px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgba(219, 237, 250, 0.78);
}

body.login.sl-login-refresh .sl-login-system__name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.27em;
}

body.login.sl-login-refresh .sl-login-hero__copy {
    width: min(100%, 680px);
    margin-top: 6vh;
}

body.login.sl-login-refresh .sl-login-hero__copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 4.25vw, 72px);
    font-weight: 740;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

body.login.sl-login-refresh .sl-login-hero__copy h1 span {
    display: block;
    margin-top: 4px;
    color: var(--sl-login-sky);
}

body.login.sl-login-refresh .sl-login-hero__copy p {
    width: min(100%, 615px);
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 430;
    line-height: 1.48;
}

body.login.sl-login-refresh .sl-login-route {
    width: min(100%, 620px);
    margin-top: clamp(34px, 5.1vh, 64px);
}

body.login.sl-login-refresh .sl-login-route__track {
    position: relative;
    width: calc(100% - 20px);
    height: 2px;
    margin: 0 10px;
    background: rgba(211, 230, 244, 0.42);
}

body.login.sl-login-refresh .sl-login-route__progress {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #55b9ff, #c8e7fb);
    box-shadow: 0 0 12px rgba(82, 169, 238, 0.28);
    animation: sl-login-route-fill 6s cubic-bezier(.35,.05,.22,1) 0.8s 1 forwards;
}

body.login.sl-login-refresh .sl-login-route__tracker {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    background: transparent;
    border: 0;
    filter: drop-shadow(0 0 5px rgba(64, 183, 255, 0.76));
    transform: translate(50%, -50%);
    pointer-events: none;
}


body.login.sl-login-refresh .sl-login-route__tracker img {
    display: block;
    width: 32px;
    height: auto;
    max-width: none;
    margin: 0;
    user-select: none;
    -webkit-user-drag: none;
}

body.login.sl-login-refresh .sl-login-route ol {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: -9px 0 0;
    padding: 0;
    list-style: none;
}

body.login.sl-login-refresh .sl-login-route li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: rgba(235, 246, 254, 0.92);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.1em;
}

body.login.sl-login-refresh .sl-login-route li:first-child { align-items: flex-start; }
body.login.sl-login-refresh .sl-login-route li:last-child { align-items: flex-end; }

body.login.sl-login-refresh .sl-login-route li span {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(222, 239, 250, 0.78);
    border-radius: 50%;
    background: rgba(7, 35, 69, 0.9);
}

body.login.sl-login-refresh .sl-login-route li:first-child span { margin-left: 1px; }
body.login.sl-login-refresh .sl-login-route li:last-child span { margin-right: 1px; }

body.login.sl-login-refresh .sl-login-human-line {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin: clamp(44px, 6vh, 76px) 0 0;
    padding-top: 17px;
    color: rgba(226, 240, 250, 0.82);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.login.sl-login-refresh .sl-login-human-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 2px;
    background: var(--sl-login-sky);
}

body.login.sl-login-refresh .sl-login-hero__legal {
    position: absolute;
    z-index: 4;
    left: clamp(42px, 5vw, 84px);
    right: clamp(42px, 5vw, 84px);
    bottom: clamp(24px, 3.4vh, 42px);
    color: rgba(224, 236, 245, 0.84);
    font-size: 11px;
    line-height: 1.45;
}

body.login.sl-login-refresh .sl-login-hero__legal-line {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 8px;
    font-weight: 530;
}

body.login.sl-login-refresh .sl-login-hero__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

body.login.sl-login-refresh .sl-login-hero__links > a,
body.login.sl-login-refresh .sl-login-hero__legal-menu a {
    color: rgba(224, 236, 245, 0.76) !important;
    text-decoration: underline;
    text-decoration-color: rgba(224, 236, 245, 0.34);
    text-underline-offset: 3px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}

body.login.sl-login-refresh .sl-login-hero__links > a:hover,
body.login.sl-login-refresh .sl-login-hero__links > a:focus-visible,
body.login.sl-login-refresh .sl-login-hero__legal-menu a:hover,
body.login.sl-login-refresh .sl-login-hero__legal-menu a:focus-visible {
    color: #fff !important;
    text-decoration-color: var(--sl-login-sky);
}

body.login.sl-login-refresh .sl-login-hero__legal-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.login.sl-login-refresh .sl-login-hero__legal-menu li {
    margin: 0;
}

body.login.sl-login-refresh .sl-login-hero__legal-menu li + li::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 14px 0 0;
    vertical-align: -1px;
    background: rgba(224, 236, 245, 0.28);
}

@keyframes sl-login-route-fill {
    from { width: 0; }
    to { width: 100%; }
}


/* -------------------------------------------------------------------------
 * Right-hand authentication panel
 * ---------------------------------------------------------------------- */
body.login.sl-login-refresh #login {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100vw - var(--sl-login-panel-left)) !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 0 0 var(--sl-login-panel-left) !important;
    padding: clamp(42px, 5.5vh, 78px) clamp(48px, 6vw, 112px) !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    background:
        radial-gradient(circle at 72% 15%, rgba(226, 240, 253, 0.35), transparent 31%),
        #fff;
}

body.login.sl-login-refresh #login > h1,
body.login.sl-login-refresh #login > .wp-login-logo {
    margin: 0 0 clamp(24px, 3.8vh, 38px);
    padding: 0;
    text-align: center;
}

body.login.sl-login-refresh #login > h1 > a,
body.login.sl-login-refresh #login > .wp-login-logo > a {
    display: inline-flex;
    width: min(260px, 58%) !important;
    height: auto !important;
    min-height: 78px;
    margin: 0 auto !important;
    align-items: center;
    justify-content: center;
    background-position: center !important;
    background-size: contain !important;
}

body.login.sl-login-refresh #login .bs-cs-login-logo {
    display: block;
    visibility: visible;
    width: auto;
    max-width: 260px;
    max-height: 118px;
    margin: 0 auto;
    object-fit: contain;
}

body.login.sl-login-refresh .sl-login-security {
    display: flex;
    width: 100%;
    min-height: 54px;
    margin: 0 0 clamp(25px, 3.4vh, 36px);
    padding: 12px 18px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid #e4edf5;
    border-radius: 14px;
    background: linear-gradient(90deg, #f7fafc, #f2f8fd);
    color: #526987;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.login.sl-login-refresh .sl-login-security strong {
    color: #13875f;
    font-weight: 750;
}

body.login.sl-login-refresh .sl-login-security__lock {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    color: var(--sl-login-green);
    font-size: 17px;
    line-height: 1;
    font-weight: 500;
}

/* On primary sign-in requests (including BuddyPress action=bpnoaccess),
 * suppress BuddyBoss' legacy Sign in / Create an Account heading. The custom
 * SkyLearner heading is injected independently and remains visible. */
body.login.sl-login-refresh.sl-login-primary #login .login-heading:not(.sl-login-heading) {
    display: none !important;
}

body.login.sl-login-refresh .login-heading,
body.login.sl-login-refresh .sl-login-heading {
    margin: 0 0 24px;
    display: block;
}

body.login.sl-login-refresh .sl-login-heading h2 {
    margin: 0;
    color: var(--sl-login-ink);
    font-size: clamp(30px, 2.3vw, 42px);
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

body.login.sl-login-refresh .sl-login-heading p {
    margin: 6px 0 0;
    color: var(--sl-login-body);
    font-size: 16px;
    line-height: 1.5;
}

body.login.sl-login-refresh #login form {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.login.sl-login-refresh #login form > p:not(.submit):not(.forgetmenot):not(.lostmenot),
body.login.sl-login-refresh #login form > .user-pass-wrap {
    margin-bottom: 14px;
}

body.login.sl-login-refresh input[type="text"],
body.login.sl-login-refresh input[type="email"],
body.login.sl-login-refresh input[type="password"] {
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0 48px 0 50px !important;
    border: 1px solid var(--sl-login-line) !important;
    border-radius: 12px !important;
    outline: 0;
    background: var(--sl-login-field) !important;
    color: var(--sl-login-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.4;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.login.sl-login-refresh input[type="text"]:hover,
body.login.sl-login-refresh input[type="email"]:hover,
body.login.sl-login-refresh input[type="password"]:hover {
    border-color: #c9d8e6 !important;
    background: #f9fbfe !important;
}

body.login.sl-login-refresh input[type="text"]:focus,
body.login.sl-login-refresh input[type="email"]:focus,
body.login.sl-login-refresh input[type="password"]:focus {
    border-color: #5da9e3 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px var(--sl-login-focus) !important;
}

body.login.sl-login-refresh input:-webkit-autofill,
body.login.sl-login-refresh input:-webkit-autofill:hover,
body.login.sl-login-refresh input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sl-login-ink);
    -webkit-box-shadow: 0 0 0 1000px #f6f9fd inset !important;
    transition: background-color 9999s ease-out;
}

body.login.sl-login-refresh form#loginform label[for="user_login"]::before,
body.login.sl-login-refresh form#loginform label[for="user_pass"]::before,
body.login.sl-login-refresh .user-pass-wrap .wp-pwd::before {
    top: 20px;
    left: 16px;
    color: #6c829b;
    font-size: 18px;
    opacity: 1;
}

body.login.sl-login-refresh form#loginform label[for="user_pass"] .label-switch {
    top: 20px;
    right: 17px;
    color: #627b98;
    opacity: 1;
}

body.login.sl-login-refresh form#loginform label[for="user_pass"] .label-switch::after {
    font-size: 17px;
}

body.login.sl-login-refresh .wp-pwd .button.wp-hide-pw {
    top: 11px;
    right: 8px;
}

body.login.sl-login-refresh #loginform .forgetmenot,
body.login.sl-login-refresh #loginform .lostmenot {
    margin-top: 7px;
    margin-bottom: 0;
    color: var(--sl-login-body);
    font-size: 14px;
}

body.login.sl-login-refresh #loginform .forgetmenot {
    float: left;
    padding-top: 7px;
}

body.login.sl-login-refresh #loginform .lostmenot {
    float: right;
    padding-top: 7px;
}

body.login.sl-login-refresh #loginform .forgetmenot label {
    color: var(--sl-login-body);
    font-size: 14px;
    line-height: 20px;
}

body.login.sl-login-refresh span.checkbox {
    width: 20px;
    height: 20px;
    margin-right: 9px;
    border: 1px solid #cfdbe7;
    border-radius: 6px;
    background: #fff;
}

body.login.sl-login-refresh span.checkbox.on {
    border-color: var(--sl-login-navy-800);
    background: var(--sl-login-navy-800);
}

body.login.sl-login-refresh .lostmenot a,
body.login.sl-login-refresh #nav a,
body.login.sl-login-refresh #backtoblog a,
body.login.sl-login-refresh a.privacy-policy-link {
    color: #1e5cb3 !important;
    text-decoration: none;
    transition: color 150ms ease;
}

body.login.sl-login-refresh .lostmenot a:hover,
body.login.sl-login-refresh .lostmenot a:focus-visible,
body.login.sl-login-refresh #nav a:hover,
body.login.sl-login-refresh #nav a:focus-visible,
body.login.sl-login-refresh #backtoblog a:hover,
body.login.sl-login-refresh #backtoblog a:focus-visible,
body.login.sl-login-refresh a.privacy-policy-link:hover,
body.login.sl-login-refresh a.privacy-policy-link:focus-visible {
    color: #123368 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.login.sl-login-refresh #loginform p.submit {
    position: relative;
    clear: both;
    margin: 0;
    padding: 0;
}

body.login.sl-login-refresh #loginform p.submit::after {
    content: "→";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 25px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition: transform 160ms ease;
}

body.login.sl-login-refresh #loginform p.submit:hover::after {
    transform: translate(4px, -50%);
}

body.login.sl-login-refresh .button-primary,
body.login.sl-login-refresh.wp-core-ui .button-primary,
body.login.sl-login-refresh .wp-generate-pw {
    width: 100% !important;
    min-height: 62px !important;
    margin: 22px 0 0 !important;
    padding: 0 54px 0 28px !important;
    border: 1px solid var(--sl-login-navy-800) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #213b78, #193769) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(33, 51, 104, 0.12) !important;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

body.login.sl-login-refresh .button-primary:hover,
body.login.sl-login-refresh.wp-core-ui .button-primary:hover,
body.login.sl-login-refresh .wp-generate-pw:hover {
    border-color: #17305f !important;
    background: linear-gradient(135deg, #274682, #173260) !important;
    box-shadow: 0 10px 26px rgba(33, 51, 104, 0.18) !important;
    transform: translateY(-1px);
}

body.login.sl-login-refresh .button-primary:focus-visible,
body.login.sl-login-refresh.wp-core-ui .button-primary:focus-visible,
body.login.sl-login-refresh .wp-generate-pw:focus-visible {
    outline: 3px solid rgba(82, 169, 238, 0.35) !important;
    outline-offset: 2px;
}

body.login.sl-login-refresh .sl-login-after-form {
    display: none;
    width: 100%;
    margin-top: clamp(28px, 3.8vh, 40px);
    text-align: center;
}

body.login.sl-login-refresh.sl-login-ready .sl-login-after-form {
    display: block;
}

body.login.sl-login-refresh .sl-login-after-form__divider {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #5c6f87;
    font-size: 14px;
    white-space: nowrap;
}

body.login.sl-login-refresh .sl-login-after-form__divider::before,
body.login.sl-login-refresh .sl-login-after-form__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #dce5ee;
}

body.login.sl-login-refresh .sl-login-after-form__link {
    display: inline-flex;
    margin-top: 14px;
    align-items: center;
    gap: 9px;
    color: #064cb5 !important;
    font-size: 15px;
    font-weight: 720;
    text-decoration: none;
}

body.login.sl-login-refresh .sl-login-after-form__link span {
    font-size: 20px;
    transition: transform 160ms ease;
}

body.login.sl-login-refresh .sl-login-after-form__link:hover span,
body.login.sl-login-refresh .sl-login-after-form__link:focus-visible span {
    transform: translateX(4px);
}

body.login.sl-login-refresh #login_error,
body.login.sl-login-refresh #login .message:not(.bs-register-message) {
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 13px;
    line-height: 1.45;
}

body.login.sl-login-refresh #login_error {
    border-color: #f0c8cb;
    background: #fff4f4;
    color: #87252b;
}

body.login.sl-login-refresh #login_error a {
    color: #6f1d22 !important;
    font-weight: 650;
}

body.login.sl-login-refresh #login .message:not(.bs-register-message) {
    border-color: #cadff1;
    background: #f1f7fc;
    color: #284c69;
}

body.login.sl-login-refresh #nav,
body.login.sl-login-refresh #backtoblog,
body.login.sl-login-refresh .privacy-policy-page-link {
    width: 100%;
    margin: 18px 0 0;
    padding: 0;
    color: #7b8796;
    text-align: center;
    font-size: 12px;
}

body.login.sl-login-refresh.sl-login-primary #nav,
body.login.sl-login-refresh.sl-login-primary #backtoblog {
    display: none !important;
}

body.login.sl-login-refresh .language-switcher {
    display: none !important;
}

/* Lost password / reset / registration retain the same visual system. */
body.login.sl-login-refresh:not(.login-action-login) #login .login-heading,
body.login.sl-login-refresh:not(.login-action-login) #login > .message,
body.login.sl-login-refresh:not(.login-action-login) #login > #login_error {
    max-width: 100%;
}

body.login.sl-login-refresh:not(.login-action-login) #login .login-heading h2,
body.login.sl-login-refresh:not(.login-action-login) #login .bs-register-message {
    color: var(--sl-login-ink);
}

body.login.sl-login-refresh #lostpasswordform .button-primary,
body.login.sl-login-refresh #resetpassform .button-primary,
body.login.sl-login-refresh #registerform .button-primary {
    padding-right: 28px !important;
}

/* -------------------------------------------------------------------------
 * Tablet & mobile
 * ---------------------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 992px) {
    body.login.sl-login-refresh {
        --sl-login-panel-left: 50vw;
    }

    body.login.sl-login-refresh .sl-login-hero__inner {
        padding-left: 46px;
        padding-right: 46px;
    }

    body.login.sl-login-refresh .sl-login-system,
    body.login.sl-login-refresh .sl-login-hero__legal {
        left: 46px;
        right: 46px;
    }

    body.login.sl-login-refresh .sl-login-hero__copy h1 {
        font-size: clamp(40px, 4vw, 54px);
    }

    body.login.sl-login-refresh #login {
        padding-left: clamp(42px, 5vw, 64px) !important;
        padding-right: clamp(42px, 5vw, 64px) !important;
    }
}

@media (max-width: 991px) {
    body.login.sl-login-refresh {
        --sl-login-panel-left: 100%;
        display: block;
        min-height: 100vh;
        background: #fff;
    }

    body.login.sl-login-refresh .sl-login-hero {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 340px;
        border-radius: 0 0 28px 28px;
        background-image:
            linear-gradient(90deg, rgba(1, 15, 35, 0.90) 0%, rgba(3, 25, 53, 0.70) 52%, rgba(5, 34, 69, 0.45) 100%),
            linear-gradient(180deg, rgba(1, 16, 36, 0.06) 0%, rgba(1, 14, 33, 0.68) 100%),
            url('../images/skylearner-login-photo-mobile.webp');
        background-position: center center, center center, 61% 52%;
    }

    body.login.sl-login-refresh .sl-login-hero__inner {
        min-height: 340px;
        padding: 54px 32px 50px;
        justify-content: flex-end;
    }

    body.login.sl-login-refresh .sl-login-system {
        top: 28px;
        left: 32px;
        gap: 7px;
    }

    body.login.sl-login-refresh .sl-login-system__name {
        font-size: 10px;
    }

    body.login.sl-login-refresh .sl-login-hero__copy {
        width: min(100%, 620px);
        margin-top: 90px;
    }

    body.login.sl-login-refresh .sl-login-hero__copy h1 {
        font-size: clamp(32px, 7vw, 48px);
    }

    body.login.sl-login-refresh .sl-login-hero__copy p {
        max-width: 560px;
        margin-top: 15px;
        font-size: 16px;
        line-height: 1.45;
    }

    body.login.sl-login-refresh .sl-login-route {
        margin-top: 27px;
    }

    body.login.sl-login-refresh .sl-login-human-line {
        display: block;
        margin-top: 22px;
        padding-top: 12px;
        font-size: 12px;
        line-height: 1.4;
    }

    body.login.sl-login-refresh .sl-login-human-line::before {
        width: 40px;
    }

    body.login.sl-login-refresh .sl-login-hero__legal,
    body.login.sl-login-refresh .sl-login-avionics {
        display: none;
    }

    body.login.sl-login-refresh #login {
        position: relative !important;
        width: min(100%, 580px) !important;
        min-height: 0;
        margin: 0 auto !important;
        padding: 48px 28px 64px !important;
        justify-content: flex-start;
        background: #fff;
    }

    body.login.sl-login-refresh #login > h1,
    body.login.sl-login-refresh #login > .wp-login-logo {
        margin-bottom: 26px;
    }

    body.login.sl-login-refresh #login > h1 > a,
    body.login.sl-login-refresh #login > .wp-login-logo > a,
    body.login.sl-login-refresh #login .bs-cs-login-logo {
        max-width: 220px;
    }
}

@media (max-width: 560px) {
    body.login.sl-login-refresh .sl-login-hero {
        min-height: 286px;
        border-radius: 0 0 22px 22px;
    }

    body.login.sl-login-refresh .sl-login-hero__inner {
        min-height: 286px;
        padding: 48px 22px 34px;
    }

    body.login.sl-login-refresh .sl-login-system {
        left: 22px;
        top: 20px;
    }

    body.login.sl-login-refresh .sl-login-hero__copy {
        margin-top: 72px;
    }

    body.login.sl-login-refresh .sl-login-hero__copy h1 {
        font-size: clamp(29px, 9vw, 40px);
        line-height: 1.06;
    }

    body.login.sl-login-refresh .sl-login-hero__copy p {
        margin-top: 12px;
        font-size: 15px;
    }

    body.login.sl-login-refresh .sl-login-route {
        margin-top: 24px;
    }

    body.login.sl-login-refresh .sl-login-human-line {
        margin-top: 18px;
        padding-top: 10px;
        font-size: 11px;
    }

    body.login.sl-login-refresh .sl-login-route li {
        gap: 12px;
        font-size: 9px;
        letter-spacing: 0.06em;
    }

    body.login.sl-login-refresh .sl-login-route li span {
        width: 15px;
        height: 15px;
    }

    body.login.sl-login-refresh .sl-login-route ol {
        margin-top: -7px;
    }

    body.login.sl-login-refresh .sl-login-route__tracker {
        width: 28px;
        height: 22px;
    }

    body.login.sl-login-refresh .sl-login-route__tracker img {
        width: 26px;
    }

    body.login.sl-login-refresh #login {
        width: 100% !important;
        padding: 38px 20px 52px !important;
    }

    body.login.sl-login-refresh #login > h1 > a,
    body.login.sl-login-refresh #login > .wp-login-logo > a,
    body.login.sl-login-refresh #login .bs-cs-login-logo {
        max-width: 190px;
    }

    body.login.sl-login-refresh .sl-login-security {
        min-height: 48px;
        margin-bottom: 24px;
        padding: 10px 12px;
        gap: 7px;
        font-size: 9px;
        border-radius: 11px;
    }

    body.login.sl-login-refresh .sl-login-heading h2 {
        font-size: 30px;
    }

    body.login.sl-login-refresh .sl-login-heading p {
        font-size: 14px;
    }

    body.login.sl-login-refresh input[type="text"],
    body.login.sl-login-refresh input[type="email"],
    body.login.sl-login-refresh input[type="password"] {
        min-height: 56px;
        font-size: 16px !important; /* prevents iOS zoom */
    }

    body.login.sl-login-refresh form#loginform label[for="user_login"]::before,
    body.login.sl-login-refresh form#loginform label[for="user_pass"]::before,
    body.login.sl-login-refresh .user-pass-wrap .wp-pwd::before {
        top: 18px;
    }

    body.login.sl-login-refresh form#loginform label[for="user_pass"] .label-switch {
        top: 18px;
    }

    body.login.sl-login-refresh #loginform .forgetmenot,
    body.login.sl-login-refresh #loginform .lostmenot {
        float: none;
        width: 100%;
    }

    body.login.sl-login-refresh #loginform .lostmenot {
        margin-top: 10px;
        text-align: left;
    }

    body.login.sl-login-refresh .button-primary,
    body.login.sl-login-refresh.wp-core-ui .button-primary {
        min-height: 58px !important;
        margin-top: 18px !important;
    }

    body.login.sl-login-refresh .sl-login-after-form__divider {
        gap: 12px;
        font-size: 13px;
    }
}

@media (max-height: 760px) and (min-width: 992px) {
    body.login.sl-login-refresh #login {
        justify-content: flex-start;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    body.login.sl-login-refresh #login > h1,
    body.login.sl-login-refresh #login > .wp-login-logo {
        margin-bottom: 18px;
    }

    body.login.sl-login-refresh .sl-login-security {
        min-height: 46px;
        margin-bottom: 20px;
    }

    body.login.sl-login-refresh .sl-login-heading {
        margin-bottom: 18px;
    }

    body.login.sl-login-refresh .sl-login-after-form {
        margin-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login.sl-login-refresh *,
    body.login.sl-login-refresh *::before,
    body.login.sl-login-refresh *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    body.login.sl-login-refresh .sl-login-route__progress {
        width: 100%;
    }

}

/* -------------------------------------------------------------------------
 * Mobile browser end-space
 * ---------------------------------------------------------------------- */
/*
 * Keep this as a real block after #login rather than padding on the login
 * panel. On mobile browsers whose bottom browser chrome is not represented by
 * the CSS layout viewport/safe-area inset, this extends the actual document
 * scroll range so the final authentication content can rest fully above it.
 */
body.login.sl-login-refresh .sl-login-mobile-end-space {
    display: none;
}

@media (max-width: 991px) {
    body.login.sl-login-refresh .sl-login-mobile-end-space {
        display: block;
        clear: both;
        width: 100%;
        height: calc(80px + env(safe-area-inset-bottom, 0px));
        min-height: calc(80px + env(safe-area-inset-bottom, 0px));
        flex: 0 0 auto;
        pointer-events: none;
        background: #fff;
    }
}

@media (max-width: 560px) {
    body.login.sl-login-refresh .sl-login-mobile-end-space {
        height: calc(120px + env(safe-area-inset-bottom, 0px));
        min-height: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}