/* ============================================================
   LINEEPANEL
   AUTH + PUBLIC PAGES
   PREMIUM DARK BLUE / CYAN / GREEN
============================================================ */


/* ============================================================
   ROOT
============================================================ */

:root {

    --bg-main: #030817;
    --bg-dark: #020611;

    --card-bg: rgba(7, 17, 37, .94);
    --card-border: rgba(148, 163, 184, .18);

    --blue: #2563eb;
    --blue-light: #3b82f6;

    --cyan: #06b6d4;
    --cyan-light: #67e8f9;

    --green: #22c55e;
    --green-dark: #16a34a;

    --text: #f8fafc;
    --text-soft: #dbe5f2;
    --muted: #91a0b5;

}


/* ============================================================
   RESET
============================================================ */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html,
body {

    min-height: 100%;

}

body {

    min-height: 100vh;

    overflow-x: hidden;

    background:
        linear-gradient(
            145deg,
            #020611 0%,
            #050b1b 50%,
            #02050d 100%
        );

    color:
        var(--text);

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

}

a {

    text-decoration:
        none;

}

button,
input,
select,
textarea {

    font-family:
        inherit;

}


/* ============================================================
   LOGIN BACKGROUND
============================================================ */

.login-bg,
.login-background {

    position:
        fixed;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 50% 32%,
            rgba(37,99,235,.075),
            transparent 38%
        ),

        radial-gradient(
            circle at 20% 70%,
            rgba(6,182,212,.035),
            transparent 28%
        ),

        radial-gradient(
            circle at 80% 72%,
            rgba(34,197,94,.025),
            transparent 28%
        );

}


/* ============================================================
   BACKGROUND GLOWS
============================================================ */

.background-glow {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.glow-blue {

    width:
        320px;

    height:
        320px;

    top:
        -110px;

    left:
        -100px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.24),
            transparent 70%
        );

}


.glow-cyan {

    width:
        280px;

    height:
        280px;

    left:
        -110px;

    top:
        42%;

    background:
        radial-gradient(
            circle,
            rgba(6,182,212,.14),
            transparent 70%
        );

}


.glow-green {

    width:
        300px;

    height:
        300px;

    right:
        -120px;

    bottom:
        -120px;

    background:
        radial-gradient(
            circle,
            rgba(34,197,94,.12),
            transparent 70%
        );

}


.glow-purple {

    width:
        230px;

    height:
        230px;

    right:
        -90px;

    top:
        26%;

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,.08),
            transparent 70%
        );

}


/* ============================================================
   SOCIAL BACKGROUND
============================================================ */

.social-bg {

    position:
        fixed;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

}


.social-bg i {

    position:
        absolute;

    color:
        rgba(255,255,255,.025);

    font-size:
        145px;

}


.social-bg .facebook {

    left:
        6%;

    top:
        10%;

}


.social-bg .instagram {

    right:
        8%;

    top:
        15%;

}


.social-bg .youtube {

    left:
        7%;

    bottom:
        12%;

}


.social-bg .tiktok {

    right:
        7%;

    bottom:
        8%;

}


.social-bg .telegram {

    left:
        13%;

    top:
        46%;

}


.social-bg .whatsapp,
.social-bg .whatsapp-icon {

    right:
        14%;

    bottom:
        32%;

}


.social-bg .twitter {

    right:
        42%;

    top:
        10%;

    font-size:
        85px;

}


/* ============================================================
   PARTICLES
============================================================ */

.particles {

    position:
        fixed;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

}


.particles span {

    position:
        absolute;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.38);

    animation:
        lineeParticle 8s linear infinite;

}


.particles span:nth-child(1) {

    left:
        10%;

    top:
        15%;

}


.particles span:nth-child(2) {

    left:
        25%;

    top:
        8%;

    animation-delay:
        1s;

}


.particles span:nth-child(3) {

    left:
        66%;

    top:
        18%;

    animation-delay:
        2s;

}


.particles span:nth-child(4) {

    left:
        88%;

    top:
        30%;

    animation-delay:
        3s;

}


.particles span:nth-child(5) {

    left:
        8%;

    top:
        58%;

    animation-delay:
        4s;

}


.particles span:nth-child(6) {

    left:
        24%;

    top:
        78%;

    animation-delay:
        5s;

}


.particles span:nth-child(7) {

    left:
        72%;

    top:
        70%;

    animation-delay:
        6s;

}


.particles span:nth-child(8) {

    left:
        91%;

    top:
        85%;

    animation-delay:
        7s;

}


.particles span:nth-child(9) {

    left:
        48%;

    top:
        84%;

    animation-delay:
        2.5s;

}


.particles span:nth-child(10) {

    left:
        56%;

    top:
        4%;

    animation-delay:
        4.5s;

}


@keyframes lineeParticle {

    0% {

        transform:
            translateY(0);

        opacity:
            .12;

    }

    50% {

        opacity:
            .60;

    }

    100% {

        transform:
            translateY(-30px);

        opacity:
            .12;

    }

}


/* ============================================================
   PAGE WRAPPER
============================================================ */

.login-page {

    position:
        relative;

    z-index:
        10;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px 15px;

}


.login-bg {

    position:
        relative;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100vh;

    padding:
        30px 15px;

}


/* ============================================================
   MAIN CARD
============================================================ */

.login-card {

    position:
        relative;

    width:
        min(100%, 450px);

    padding:
        30px;

    border:
        1px solid var(--card-border);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(9,20,43,.96),
            rgba(5,13,29,.94)
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.45),

        inset 0 1px 0
        rgba(255,255,255,.035);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

}


/* ============================================================
   TOP ACCENT
============================================================ */

.login-card::before {

    content:
        "";

    display:
        block;

    width:
        85px;

    height:
        3px;

    margin:
        -30px auto 27px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--cyan),
            var(--green)
        );

}


/* ============================================================
   LOGO WRAPPER
============================================================ */

.login-logo-wrap {

    width:
        80px;

    height:
        80px;

    margin:
        0 auto 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.025);

}


/* ============================================================
   LOGO
============================================================ */

.login-logo,
.login-card .logo {

    width:
        65px;

    height:
        65px;

    max-width:
        100%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 0 14px
            rgba(37,99,235,.18)
        );

}


/* ============================================================
   BRAND TITLE
============================================================ */

.login-brand h1 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        29px;

    font-weight:
        800;

    letter-spacing:
        -.5px;

}


.login-brand p {

    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

}


/* ============================================================
   EXISTING TITLE SUPPORT
============================================================ */

.login-card > .text-center h2 {

    margin-top:
        0;

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        800;

}


.login-card > .text-center p {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        12px;

}


/* ============================================================
   LABELS
============================================================ */

.login-label,
.login-card label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #dbe5f2;

    font-size:
        12px;

    font-weight:
        700;

}


/* ============================================================
   MODERN INPUT WRAPPER
============================================================ */

.login-input-wrap {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    height:
        50px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(148,163,184,.15);

    border-radius:
        10px;

    background:
        #f8fafc;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.login-input-wrap:focus-within {

    border-color:
        #3b82f6;

    box-shadow:
        0 0 0 3px
        rgba(59,130,246,.13);

}


/* ============================================================
   ICON
============================================================ */

.login-input-icon {

    width:
        48px;

    height:
        100%;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #526174;

    background:
        #edf2f7;

    border-right:
        1px solid
        #dde5ee;

}


/* ============================================================
   INPUT
============================================================ */

.login-input {

    width:
        100%;

    min-width:
        0;

    height:
        100%;

    padding:
        0 13px;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        #1e293b;

    font-size:
        14px;

}


.login-input::placeholder {

    color:
        #8996a6;

}


/* ============================================================
   BOOTSTRAP INPUT-GROUP
============================================================ */

.login-card .input-group {

    height:
        50px;

    border-radius:
        10px;

    overflow:
        hidden;

}


.login-card .input-group-text {

    width:
        48px;

    justify-content:
        center;

    border:
        1px solid
        #dde5ee;

    background:
        #edf2f7;

    color:
        #526174;

}


.login-card .input-group .form-control {

    height:
        50px;

    border:
        1px solid
        #dde5ee;

    border-left:
        0;

    background:
        #f8fafc;

    color:
        #1e293b;

    box-shadow:
        none;

}


.login-card .input-group .form-control:focus {

    border-color:
        #3b82f6;

    box-shadow:
        none;

}


/* ============================================================
   PASSWORD BUTTON
============================================================ */

.password-toggle {

    width:
        50px;

    height:
        100%;

    flex-shrink:
        0;

    border:
        0;

    border-left:
        1px solid
        #dde5ee;

    background:
        #f1f5f9;

    color:
        #3f4f61;

    cursor:
        pointer;

}


.password-toggle:hover {

    color:
        #2563eb;

    background:
        #e7edf5;

}


/* ============================================================
   FORGOT PASSWORD
============================================================ */

.forgot-row {

    display:
        flex;

    justify-content:
        flex-end;

    margin:
        -2px 0 17px;

}


.forgot-link {

    color:
        #82b6ff;

    font-size:
        12px;

    font-weight:
        600;

}


.forgot-link:hover {

    color:
        #67e8f9;

}


.login-card a.text-white {

    color:
        #9ec5ff !important;

}


.login-card a.text-white:hover {

    color:
        #67e8f9 !important;

}


/* ============================================================
   LOGIN / PRIMARY BUTTON
============================================================ */

.login-submit,
.login-btn {

    width:
        100%;

    min-height:
        49px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        none !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0891b2
        ) !important;

    color:
        #ffffff !important;

    font-size:
        13px;

    font-weight:
        750;

    box-shadow:
        0 9px 24px
        rgba(37,99,235,.23);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;

}


.login-submit:hover,
.login-btn:hover {

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 13px 30px
        rgba(37,99,235,.30);

}


/* ============================================================
   GOOGLE
============================================================ */

.google-login {

    width:
        100%;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    border:
        1px solid
        #e4e9ef;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #1f2937;

    font-size:
        13px;

    font-weight:
        700;

}


.google-login i {

    color:
        #4285f4;

}


.google-login:hover {

    color:
        #111827;

    background:
        #f8fafc;

}


/* ============================================================
   REGISTER
============================================================ */

.register-btn,
.register-now-btn {

    width:
        100%;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        12px;

    border:
        1px solid
        rgba(148,163,184,.25);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.035);

    color:
        #e7edf5;

    font-size:
        13px;

    font-weight:
        700;

}


.register-btn:hover,
.register-now-btn:hover {

    color:
        #ffffff;

    background:
        rgba(37,99,235,.10);

    border-color:
        rgba(59,130,246,.40);

}


/* ============================================================
   DIVIDER
============================================================ */

.login-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        21px 0;

    color:
        #7f8da1;

    font-size:
        11px;

}


.login-divider::before,
.login-divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        rgba(148,163,184,.15);

}


/* ============================================================
   ALERTS
============================================================ */

.login-alert,
.login-card .alert {

    border-radius:
        9px;

    font-size:
        12px;

}


.login-card .alert-danger {

    color:
        #ffb8b8;

    background:
        rgba(220,38,38,.09);

    border:
        1px solid
        rgba(248,113,113,.25);

}


.login-card .alert-success {

    color:
        #a2efb4;

    background:
        rgba(34,197,94,.08);

    border:
        1px solid
        rgba(34,197,94,.27);

}


/* ============================================================
   LOGIN FOOTER
============================================================ */

.login-footer {

    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(148,163,184,.14);

    text-align:
        center;

    color:
        #8796aa;

    font-size:
        11px;

}


.login-footer a {

    color:
        #82b6ff;

}


.login-footer a:hover {

    color:
        #67e8f9;

}


.login-copy {

    margin-top:
        12px;

    color:
        #65748a;

    font-size:
        10px;

}


/* ============================================================
   POLICY PAGES
============================================================ */

.policy-card {

    width:
        min(100%, 940px);

}


.policy-content {

    color:
        #aebbd0;

    font-size:
        13px;

    line-height:
        1.75;

}


.policy-content h5 {

    margin-top:
        21px;

    margin-bottom:
        7px;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        750;

}


.policy-content p {

    margin-bottom:
        12px;

}


/* Support existing policy markup */

.login-card[style*="900px"] {

    max-width:
        940px !important;

}


.login-card[style*="900px"] .text-white {

    color:
        #aebbd0 !important;

    font-size:
        13px;

    line-height:
        1.75;

}


.login-card[style*="900px"] .text-white h5 {

    margin-top:
        20px;

    color:
        #ffffff !important;

    font-size:
        14px;

}


.login-card[style*="900px"] .text-white p {

    margin-bottom:
        12px;

}


/* ============================================================
   WHATSAPP
============================================================ */

.whatsapp-float,
.login-whatsapp {

    position:
        fixed !important;

    top:
        auto !important;

    left:
        auto !important;

    right:
        22px !important;

    bottom:
        22px !important;

    width:
        56px !important;

    height:
        56px !important;

    min-width:
        56px !important;

    max-width:
        56px !important;

    min-height:
        56px !important;

    max-height:
        56px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border-radius:
        50% !important;

    background:
        #25D366 !important;

    color:
        #ffffff !important;

    font-size:
        28px !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    z-index:
        999999 !important;

    box-shadow:
        0 10px 28px
        rgba(37,211,102,.28) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.whatsapp-float i,
.login-whatsapp i {

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-size:
        28px !important;

    line-height:
        1 !important;

}


.whatsapp-float:hover,
.login-whatsapp:hover {

    color:
        #ffffff !important;

    transform:
        scale(1.07);

    box-shadow:
        0 14px 34px
        rgba(37,211,102,.35) !important;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .login-page,
    .login-bg {

        align-items:
            flex-start;

        padding:
            24px 12px 30px;

    }


    .login-card {

        width:
            100%;

        padding:
            26px 20px;

        border-radius:
            18px;

    }


    .login-brand h1 {

        font-size:
            26px;

    }


    .login-card h2 {

        font-size:
            22px;

    }


    .social-bg i {

        font-size:
            90px;

    }


    .whatsapp-float,
    .login-whatsapp {

        right:
            15px !important;

        bottom:
            15px !important;

        width:
            52px !important;

        height:
            52px !important;

        min-width:
            52px !important;

        max-width:
            52px !important;

        min-height:
            52px !important;

        max-height:
            52px !important;

        font-size:
            24px !important;

    }


    .whatsapp-float i,
    .login-whatsapp i {

        font-size:
            24px !important;

    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .login-page,
    .login-bg {

        padding:
            12px 9px 22px;

    }


    .login-card {

        padding:
            23px 16px;

        border-radius:
            16px;

    }


    .login-logo-wrap {

        width:
            72px;

        height:
            72px;

    }


    .login-logo,
    .login-card .logo {

        width:
            58px;

        height:
            58px;

    }


    .login-brand h1 {

        font-size:
            24px;

    }


    .login-card h2 {

        font-size:
            21px;

    }


    .social-bg .facebook,
    .social-bg .telegram,
    .social-bg .twitter {

        display:
            none;

    }


    .social-bg i {

        font-size:
            75px;

    }


    .policy-content,
    .login-card[style*="900px"] .text-white {

        font-size:
            12px;

        line-height:
            1.65;

    }

}