/* =================================================================
   SOPHICLY LOGIN PAGE v1.3
   Overrides for FluentAuth wp-login.php customiser.
   Works WITH FluentAuth's split layout — only reskins visuals.
   Supports light (default) + dark (prefers-color-scheme).
   ================================================================= */


/* -----------------------------------------------------------------
   FLUENTAUTH CSS VARIABLE OVERRIDES
   ----------------------------------------------------------------- */

:root {
    --fls-form-background_color: #ffffff;
    --fls-form-title_color: #1a1a2e;
    --fls-form-text_color: #525866;
    --fls-form-button_color: #5333ed;
    --fls-form-button_label_color: #ffffff;
    --fls-banner-title_color: #ffffff;
    --fls-banner-text_color: rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fls-form-background_color: #1C1D1F;
        --fls-form-title_color: #f0f0f5;
        --fls-form-text_color: rgba(240, 240, 245, 0.55);
        --fls-form-button_color: #51dacf;
        --fls-form-button_label_color: #0e0e14;
    }
}


/* -----------------------------------------------------------------
   FONTS
   ----------------------------------------------------------------- */

body.login,
body.login *:not(.dashicons):not(.fls_login_cusom_content_inner p) {
    font-family: 'Proxima Soft Complete', -apple-system, system-ui, sans-serif;
}

/* Form header — Playfair italic */
.fls_login_header h1 {
    font-family: 'Playfair Display Complete', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
}

/* Banner H1 — Proxima Soft bold, NOT italic */
.fls_login_cusom_content_inner h1 {
    font-family: 'Proxima Soft Complete', -apple-system, system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Banner subtitle — Playfair Display italic */
.fls_login_cusom_content_inner p {
    font-family: 'Playfair Display Complete', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
}


/* -----------------------------------------------------------------
   PAGE BACKGROUND
   ----------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    body.login {
        background: #1C1D1F !important;
    }
}


/* -----------------------------------------------------------------
   MAIN LAYOUT — 15px border around shader, rounded inner corners
   ----------------------------------------------------------------- */

.fls_login_page_wrap {
    padding: 15px !important;
    background: #e8e8ed !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
}

@media (prefers-color-scheme: dark) {
    .fls_login_page_wrap {
        background: #1C1D1F !important;
    }
}

/* Left panel — rounded inner corners + margin for breathing room */
.fls_login_cusom_content_wrap {
    background-image: none !important;
    background: linear-gradient(135deg, #2c003e, #5333ed, #4D76FD, #51dacf) !important;
    background-size: 300% 300% !important;
    animation: sophGradientShift 12s ease infinite !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    margin: 15px !important;
}

@keyframes sophGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Right panel — match page background */
.fls_login_form_wrap {
    border-radius: 0 !important;
    background: var(--fls-primary-bg, #e8e8ed) !important;
}

@media (prefers-color-scheme: dark) {
    .fls_login_form_wrap {
        background: #1C1D1F !important;
    }
}


/* -----------------------------------------------------------------
   LEFT PANEL — Blobs + Shader + Content
   ----------------------------------------------------------------- */

/* Floating blobs for depth */
.fls_login_cusom_content_wrap::before,
.fls_login_cusom_content_wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(80px);
    pointer-events: none;
}

.fls_login_cusom_content_wrap::before {
    width: 60%;
    height: 60%;
    top: -10%;
    left: -10%;
    background: #51dacf;
    animation: sophBlob1 16s ease-in-out infinite;
}

.fls_login_cusom_content_wrap::after {
    width: 50%;
    height: 50%;
    bottom: -15%;
    right: -10%;
    background: #2c003e;
    animation: sophBlob2 20s ease-in-out infinite;
}

@keyframes sophBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, 20px) scale(1.1); }
}

@keyframes sophBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-20px, -30px) scale(1.15); }
}

/* WebGL shader canvas (injected by JS) — clip to rounded corners */
#soph-login-shader {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 20px;
}

/* Banner content — above shader */
.fls_login_cusom_content {
    position: relative;
    z-index: 1;
}

/* Logo — 65px, tight spacing */
.fls_banner_header_logo img {
    width: 65px !important;
    height: auto !important;
    margin-bottom: 10px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

/* Banner H1 — large, bold */
.fls_login_cusom_content_inner h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    color: #ffffff !important;
}

/* Banner subtitle — Playfair italic, slightly muted */
.fls_login_cusom_content_inner p {
    font-size: 1.05rem !important;
    letter-spacing: 0.01em !important;
    color: rgba(255, 255, 255, 0.65) !important;
}


/* -----------------------------------------------------------------
   RIGHT PANEL — Form side
   ----------------------------------------------------------------- */

/* Header */
.fls_login_header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.fls_login_header p {
    font-size: 0.9rem !important;
}

@media (prefers-color-scheme: dark) {
    .fls_login_header h1 {
        color: #f0f0f5 !important;
    }
    .fls_login_header p {
        color: rgba(240, 240, 245, 0.5) !important;
    }
}


/* -----------------------------------------------------------------
   HIDE things we don't need
   ----------------------------------------------------------------- */

#login > h1.wp-login-logo,
h1.screen-reader-text,
.language-switcher {
    display: none !important;
}

#login {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* -----------------------------------------------------------------
   FORM CONTAINER — glass card, variant shade of #1C1D1F in dark
   ----------------------------------------------------------------- */

#loginform {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 32px 28px 28px !important;
    margin: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

@media (prefers-color-scheme: dark) {
    #loginform {
        background: #232527 !important;
        border: 0 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    }
}


/* -----------------------------------------------------------------
   LABELS
   ----------------------------------------------------------------- */

#loginform label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: rgba(26, 26, 46, 0.65) !important;
    margin-bottom: 6px !important;
}

@media (prefers-color-scheme: dark) {
    #loginform label {
        color: rgba(240, 240, 245, 0.55) !important;
    }
}


/* -----------------------------------------------------------------
   INPUTS — Animated conic gradient border on focus (WML-style)
   Uses background padding-box/border-box trick with standard colors
   ----------------------------------------------------------------- */

@property --sl-input-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes slInputSpin { to { --sl-input-angle: 360deg; } }

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
.fls_magic_input {
    width: 100% !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    font-size: 0.95rem !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: none !important;

    /* Light: solid bg covers the transparent border area */
    background-color: #e8e8ed !important;
    background-image: none !important;
    color: #1a1a2e !important;
    transition: box-shadow 0.3s ease, background 0.3s ease !important;
}

/* Focus: animated gradient border via background-clip + soft glow */
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#loginform input[type="email"]:focus,
.fls_magic_input:focus {
    background-color: transparent !important;
    background-image:
        linear-gradient(#e8e8ed, #e8e8ed),
        conic-gradient(
            from var(--sl-input-angle),
            #5333ed, #4D76FD, #51dacf, #7DF9E9, #51dacf, #4D76FD, #5333ed
        ) !important;
    background-origin: padding-box, border-box !important;
    background-clip: padding-box, border-box !important;
    animation: slInputSpin 5s linear infinite !important;
    box-shadow:
        0 0 12px rgba(81, 218, 207, 0.15),
        0 0 32px rgba(83, 51, 237, 0.08) !important;
}

@media (prefers-color-scheme: dark) {
    #loginform input[type="text"],
    #loginform input[type="password"],
    #loginform input[type="email"],
    .fls_magic_input {
        background-color: #1C1D1F !important;
        color: #f0f0f5 !important;
    }

    #loginform input[type="text"]:focus,
    #loginform input[type="password"]:focus,
    #loginform input[type="email"]:focus,
    .fls_magic_input:focus {
        background-image:
            linear-gradient(#1C1D1F, #1C1D1F),
            conic-gradient(
                from var(--sl-input-angle),
                #5333ed, #4D76FD, #51dacf, #7DF9E9, #51dacf, #4D76FD, #5333ed
            ) !important;
        background-origin: padding-box, border-box !important;
        background-clip: padding-box, border-box !important;
        box-shadow:
            0 0 16px rgba(81, 218, 207, 0.2),
            0 0 40px rgba(83, 51, 237, 0.1) !important;
    }

    #loginform input::placeholder,
    .fls_magic_input::placeholder {
        color: rgba(240, 240, 245, 0.3) !important;
    }
}

/* Password eye toggle */
.wp-pwd {
    position: relative !important;
}

.wp-hide-pw {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
    padding: 4px !important;
}

@media (prefers-color-scheme: dark) {
    .wp-hide-pw {
        color: rgba(255, 255, 255, 0.3) !important;
    }
}


/* -----------------------------------------------------------------
   REMEMBER ME
   ----------------------------------------------------------------- */

.forgetmenot {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 16px 0 !important;
}

.forgetmenot label {
    font-size: 0.85rem !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.forgetmenot input[type="checkbox"] {
    accent-color: #51dacf !important;
    width: 16px !important;
    height: 16px !important;
    border: 0 !important;
    background: #e8e8ed !important;
    border-radius: 4px !important;
}

@media (prefers-color-scheme: dark) {
    .forgetmenot input[type="checkbox"] {
        background: #1C1D1F !important;
    }
}


/* -----------------------------------------------------------------
   LOGIN BUTTON — 3D push-down neumorphic style
   ----------------------------------------------------------------- */

#wp-submit {
    width: 100% !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    letter-spacing: -0.01em !important;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;

    /* Light: blue neumorphic push button */
    background: radial-gradient(ellipse at 50% 10%, rgba(77, 118, 253, 0.15), transparent),
                radial-gradient(#4D76FD, #42A1EC) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 -2px 4px 1px rgba(255, 255, 255, 0.25),
        inset 0 2px 8px rgba(77, 118, 253, 0.15),
        0 4px 0 1px #3a5fd4,
        0 6px 0 2px rgba(77, 118, 253, 0.2),
        0 8px 24px rgba(77, 118, 253, 0.25) !important;
}

#wp-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 -2px 4px 1px rgba(255, 255, 255, 0.3),
        inset 0 2px 8px rgba(77, 118, 253, 0.2),
        0 6px 0 1px #3a5fd4,
        0 8px 0 2px rgba(77, 118, 253, 0.2),
        0 12px 32px rgba(77, 118, 253, 0.35) !important;
}

#wp-submit:active {
    transform: translateY(2px) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 0 1px #3a5fd4,
        0 2px 8px rgba(77, 118, 253, 0.15) !important;
}

@media (prefers-color-scheme: dark) {
    #wp-submit {
        background: radial-gradient(ellipse at 50% 10%, rgba(81, 218, 207, 0.2), transparent),
                    radial-gradient(#51dacf, #41aaa8) !important;
        color: #0e0e14 !important;
        box-shadow:
            inset 0 -2px 4px 1px rgba(255, 255, 255, 0.2),
            inset 0 2px 8px rgba(81, 218, 207, 0.15),
            0 4px 0 1px #2d8a82,
            0 6px 0 2px rgba(81, 218, 207, 0.15),
            0 8px 24px rgba(81, 218, 207, 0.2) !important;
    }

    #wp-submit:hover {
        box-shadow:
            inset 0 -2px 4px 1px rgba(255, 255, 255, 0.25),
            inset 0 2px 8px rgba(81, 218, 207, 0.2),
            0 6px 0 1px #2d8a82,
            0 8px 0 2px rgba(81, 218, 207, 0.15),
            0 12px 32px rgba(81, 218, 207, 0.3) !important;
    }

    #wp-submit:active {
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 1px 0 1px #2d8a82,
            0 2px 8px rgba(81, 218, 207, 0.1) !important;
    }
}

p.submit {
    margin-top: 8px !important;
    overflow: visible !important;
    padding-bottom: 4px !important;
}


/* -----------------------------------------------------------------
   SOCIAL LOGIN — Neumorphic Google button
   ----------------------------------------------------------------- */

.fm_login_with {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    overflow: visible !important;
}

.fm_buttons_wrap {
    overflow: visible !important;
}

/* Ensure form submit area doesn't clip push-button shadow */
#login form p.submit {
    overflow: visible !important;
}

@media (prefers-color-scheme: dark) {
    .fm_login_with {
        border-top-color: rgba(255, 255, 255, 0.06) !important;
    }
}

.fs_auth_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

/* Light: blue neumorphic secondary */
a.fs_auth_btn.fs_auth_google {
    background: radial-gradient(ellipse at 50% 10%, rgba(77, 118, 253, 0), transparent),
                radial-gradient(#ECF3FF, #e0ebff) !important;
    color: #4D76FD !important;
    border: none !important;
    box-shadow:
        inset 0 3px 1px -2px rgba(255, 255, 255, 0.8),
        inset 0 3px 6px 4px rgba(77, 118, 253, 0.08),
        0 2px 0 1px #c8d4f0,
        0 2px 0 2px rgba(77, 118, 253, 0.15),
        0 2px 0 3px rgba(255, 255, 255, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

a.fs_auth_btn.fs_auth_google:hover {
    background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.2), transparent),
                radial-gradient(#42A1EC, #4D76FD) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 -1px 2px 1px rgba(255, 255, 255, 0.4),
        inset 0 0 16px rgba(66, 161, 236, 0.3),
        0 2px 0 1px rgba(77, 118, 253, 0.8),
        0 2px 10px rgba(66, 161, 236, 0.35),
        0 3px 20px 2px rgba(77, 118, 253, 0.25) !important;
}

/* Dark: charcoal neumorphic secondary */
@media (prefers-color-scheme: dark) {
    a.fs_auth_btn.fs_auth_google {
        background: radial-gradient(ellipse at 50% 10%, hsla(252 83% 100% / 0%), transparent),
                    radial-gradient(hsla(220 10% 25% / 35%), hsla(220 10% 25% / 25%)) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        box-shadow:
            inset 0 4px 1px -3px rgba(255, 255, 255, 0.1),
            inset 0 4px 8px 5px rgba(9, 11, 10, 0.16),
            0 2px 0 1px #1a1e1c,
            0 2px 0 3px rgba(0, 0, 0, 0.9),
            0 2px 0 4px rgba(255, 255, 255, 0.04) !important;
    }

    a.fs_auth_btn.fs_auth_google:hover {
        background: radial-gradient(ellipse at 50% 10%, hsla(252 83% 100% / 20%), transparent),
                    radial-gradient(hsla(252 50% 55% / 100%), hsla(252 83% 56% / 100%)) !important;
        color: white !important;
        box-shadow:
            inset 0 -1px 2px 1px rgba(255, 255, 255, 0.3),
            inset 0 0 24px rgba(44, 0, 62, 0.3),
            0 3px 0 1px rgba(83, 51, 237, 0.7),
            0 1px 2px rgba(255, 255, 255, 0.8),
            0 2px 16px rgba(255, 255, 255, 0.15),
            0 4px 32px 2px rgba(83, 51, 237, 0.35),
            0 3px 0 3px rgba(0, 0, 0, 0.8),
            0 3px 0 4px rgba(83, 51, 237, 0.4) !important;
    }
}


/* -----------------------------------------------------------------
   MAGIC LOGIN — Neumorphic button
   ----------------------------------------------------------------- */

.fls_or_wrap {
    margin: 16px 0 !important;
}

.fls_magic-or {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: rgba(0, 0, 0, 0.25) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.fls_magic-or::before,
.fls_magic-or::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

@media (prefers-color-scheme: dark) {
    .fls_magic-or {
        color: rgba(255, 255, 255, 0.25) !important;
    }
    .fls_magic-or::before,
    .fls_magic-or::after {
        background: rgba(255, 255, 255, 0.06) !important;
    }
}

/* Light: blue neumorphic */
.fls_magic_show_btn,
.fls_magic_show_regular {
    width: 100% !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;
    background: radial-gradient(ellipse at 50% 10%, rgba(77, 118, 253, 0), transparent),
                radial-gradient(#ECF3FF, #e0ebff) !important;
    color: #4D76FD !important;
    border: none !important;
    box-shadow:
        inset 0 3px 1px -2px rgba(255, 255, 255, 0.8),
        inset 0 3px 6px 4px rgba(77, 118, 253, 0.08),
        0 2px 0 1px #c8d4f0,
        0 2px 0 2px rgba(77, 118, 253, 0.15),
        0 2px 0 3px rgba(255, 255, 255, 0.4) !important;
}

.fls_magic_show_btn:hover,
.fls_magic_show_regular:hover {
    background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.2), transparent),
                radial-gradient(#42A1EC, #4D76FD) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow:
        inset 0 -1px 2px 1px rgba(255, 255, 255, 0.4),
        inset 0 0 16px rgba(66, 161, 236, 0.3),
        0 2px 0 1px rgba(77, 118, 253, 0.8),
        0 2px 10px rgba(66, 161, 236, 0.35),
        0 3px 20px 2px rgba(77, 118, 253, 0.25) !important;
}

/* Dark: charcoal neumorphic */
@media (prefers-color-scheme: dark) {
    .fls_magic_show_btn,
    .fls_magic_show_regular {
        background: radial-gradient(ellipse at 50% 10%, hsla(252 83% 100% / 0%), transparent),
                    radial-gradient(hsla(220 10% 25% / 35%), hsla(220 10% 25% / 25%)) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        box-shadow:
            inset 0 4px 1px -3px rgba(255, 255, 255, 0.1),
            inset 0 4px 8px 5px rgba(9, 11, 10, 0.16),
            0 2px 0 1px #1a1e1c,
            0 2px 0 3px rgba(0, 0, 0, 0.9),
            0 2px 0 4px rgba(255, 255, 255, 0.04) !important;
    }

    .fls_magic_show_btn:hover,
    .fls_magic_show_regular:hover {
        background: radial-gradient(ellipse at 50% 10%, hsla(252 83% 100% / 20%), transparent),
                    radial-gradient(hsla(252 50% 55% / 100%), hsla(252 83% 56% / 100%)) !important;
        color: white !important;
        box-shadow:
            inset 0 -1px 2px 1px rgba(255, 255, 255, 0.3),
            inset 0 0 24px rgba(44, 0, 62, 0.3),
            0 3px 0 1px rgba(83, 51, 237, 0.7),
            0 1px 2px rgba(255, 255, 255, 0.8),
            0 2px 16px rgba(255, 255, 255, 0.15),
            0 4px 32px 2px rgba(83, 51, 237, 0.35),
            0 3px 0 3px rgba(0, 0, 0, 0.8),
            0 3px 0 4px rgba(83, 51, 237, 0.4) !important;
    }
}

/* Magic link submit button — same push style as login */
#fls_magic_submit {
    width: 100% !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 13px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1) !important;
    background: radial-gradient(ellipse at 50% 10%, rgba(77, 118, 253, 0.15), transparent),
                radial-gradient(#4D76FD, #42A1EC) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 -2px 4px 1px rgba(255, 255, 255, 0.25),
        0 4px 0 1px #3a5fd4,
        0 8px 24px rgba(77, 118, 253, 0.25) !important;
}

#fls_magic_submit:hover {
    transform: translateY(-1px) !important;
}

@media (prefers-color-scheme: dark) {
    #fls_magic_submit {
        background: radial-gradient(ellipse at 50% 10%, rgba(81, 218, 207, 0.2), transparent),
                    radial-gradient(#51dacf, #41aaa8) !important;
        color: #0e0e14 !important;
        box-shadow:
            inset 0 -2px 4px 1px rgba(255, 255, 255, 0.2),
            0 4px 0 1px #2d8a82,
            0 8px 24px rgba(81, 218, 207, 0.2) !important;
    }
}

.fls_magic_text {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

.fls_magic_submit_wrapper {
    margin-top: 12px !important;
}


/* -----------------------------------------------------------------
   MAGIC LINK / LOGIN SUCCESS — branded checkmark + contrast
   ----------------------------------------------------------------- */

/* Success heading — brand purple */
.login_success_heading,
.fls_magic_login_form h3,
.fls_magic_login_form .fls_success_heading {
    color: #5333ed !important;
    font-weight: 700 !important;
}

@media (prefers-color-scheme: dark) {
    .login_success_heading,
    .fls_magic_login_form h3,
    .fls_magic_login_form .fls_success_heading {
        color: #5333ed !important;
    }
}

/* Success checkmark icon — the SVG is green-filled, just size it */
.fls_magic_login_form img,
#login img[src*="check-circle"] {
    width: 48px !important;
    height: 48px !important;
    display: block !important;
    margin: 0 auto 12px !important;
    background: none !important;
    border: 0 !important;
}

/* Description text — proper contrast */
.fls_magic_login_form p,
.fls_magic_login_form .fls_magic_text {
    color: rgba(0, 0, 0, 0.65) !important;
}

@media (prefers-color-scheme: dark) {
    .fls_magic_login_form p,
    .fls_magic_login_form .fls_magic_text {
        color: rgba(240, 240, 245, 0.7) !important;
    }
}


/* -----------------------------------------------------------------
   NAV LINKS
   ----------------------------------------------------------------- */

#nav {
    text-align: center !important;
    margin-top: 24px !important;
    padding: 0 !important;
}

#nav a,
#backtoblog a,
.privacy-policy-page-link a {
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

#nav a {
    font-size: 0.85rem !important;
    color: #5333ed !important;
    font-weight: 500 !important;
}

#nav a:hover {
    color: #51dacf !important;
}

@media (prefers-color-scheme: dark) {
    #nav a {
        color: #51dacf !important;
    }
    #nav a:hover {
        color: #7DF9E9 !important;
    }
}

#backtoblog {
    text-align: center !important;
    margin-top: 12px !important;
}

#backtoblog a {
    font-size: 0.8rem !important;
    color: rgba(0, 0, 0, 0.3) !important;
}

#backtoblog a:hover {
    color: rgba(0, 0, 0, 0.6) !important;
}

@media (prefers-color-scheme: dark) {
    #backtoblog a {
        color: rgba(255, 255, 255, 0.3) !important;
    }
    #backtoblog a:hover {
        color: rgba(255, 255, 255, 0.6) !important;
    }
}

.privacy-policy-page-link {
    text-align: center !important;
    margin-top: 8px !important;
}

.privacy-policy-page-link a {
    font-size: 0.75rem !important;
    color: rgba(0, 0, 0, 0.25) !important;
}

@media (prefers-color-scheme: dark) {
    .privacy-policy-page-link a {
        color: rgba(255, 255, 255, 0.2) !important;
    }
}


/* -----------------------------------------------------------------
   MESSAGES — Error / Success
   ----------------------------------------------------------------- */

#login_error,
.message {
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    border-left: none !important;
    border: 1px solid !important;
}

#login_error {
    background: rgba(220, 38, 38, 0.06) !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
}

.message {
    background: rgba(28, 217, 145, 0.06) !important;
    border-color: rgba(28, 217, 145, 0.15) !important;
    color: #059669 !important;
}

@media (prefers-color-scheme: dark) {
    #login_error {
        background: rgba(220, 38, 38, 0.1) !important;
        border-color: rgba(220, 38, 38, 0.2) !important;
        color: #fca5a5 !important;
    }
    .message {
        background: rgba(28, 217, 145, 0.1) !important;
        border-color: rgba(28, 217, 145, 0.2) !important;
        color: #7DF9E9 !important;
    }
}


/* -----------------------------------------------------------------
   ENTRANCE ANIMATION
   ----------------------------------------------------------------- */

@keyframes sophSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fls_login_form_wrap .fls_form_wrap {
    animation: sophSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
}

.fls_login_cusom_content_inner {
    animation: sophSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.25s both;
}


/* -----------------------------------------------------------------
   SUREMEMBERS — hide their logo override
   ----------------------------------------------------------------- */

#login > h1.wp-login-logo {
    display: none !important;
}


/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
    .fls_login_page_wrap {
        padding: 10px !important;
    }

    .fls_login_cusom_content_wrap {
        border-radius: 16px !important;
    }

    #soph-login-shader {
        border-radius: 16px !important;
    }

    #loginform {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    .fls_banner_header_logo img {
        width: 50px !important;
    }
}