/* =========================================
           THODU NEEDA ADMIN LOGIN
        ========================================== */

        *{
            box-sizing:border-box;
            margin:0;
            padding:0;
        }

        html,
        body{
            width:100%;
            min-height:100%;
        }

        body{
            font-family:'Inter',sans-serif;
            background:
                radial-gradient(
                    circle at 10% 20%,
                    rgba(212,170,75,.15),
                    transparent 28%
                ),
                radial-gradient(
                    circle at 90% 80%,
                    rgba(255,255,255,.05),
                    transparent 28%
                ),
                linear-gradient(
                    135deg,
                    #17120f 0%,
                    #241912 48%,
                    #0f0c0a 100%
                );

            min-height:100vh;

            display:flex;
            align-items:center;
            justify-content:center;

            padding:30px 18px;

            overflow-x:hidden;
        }


        /* Decorative circles */

        .tn-login-page:before,
        .tn-login-page:after{
            content:"";
            position:fixed;
            border-radius:50%;
            pointer-events:none;
            filter:blur(1px);
        }

        .tn-login-page:before{
            width:360px;
            height:360px;
            background:rgba(205,161,63,.07);
            top:-170px;
            left:-130px;
        }

        .tn-login-page:after{
            width:420px;
            height:420px;
            background:rgba(255,255,255,.025);
            bottom:-220px;
            right:-160px;
        }


        /* =========================================
           LOGIN CONTAINER
        ========================================== */

        .tn-login-wrapper{
            width:100%;
            max-width:1040px;
            position:relative;
            z-index:2;
        }


        .tn-login-card{
            width:100%;
            min-height:570px;

            display:grid;
            grid-template-columns:1.05fr .95fr;

            background:#fff;

            border-radius:28px;
            overflow:hidden;

            box-shadow:
                0 35px 90px rgba(0,0,0,.36),
                0 5px 18px rgba(0,0,0,.12);
        }


        /* =========================================
           LEFT SIDE
        ========================================== */

        .tn-login-brand{
            position:relative;

            min-height:570px;

            padding:55px 52px;

            display:flex;
            flex-direction:column;
            justify-content:space-between;

            color:#fff;

            background:
                linear-gradient(
                    135deg,
                    rgba(25,17,12,.96),
                    rgba(58,39,24,.91)
                ),
                url("https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=1200&q=80");

            background-size:cover;
            background-position:center;
        }


        .tn-login-brand:after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(
                    to top,
                    rgba(13,9,7,.82),
                    rgba(36,25,17,.2)
                );

            z-index:0;
        }


        .tn-brand-content,
        .tn-brand-bottom{
            position:relative;
            z-index:2;
        }


        .tn-admin-badge{
            display:inline-flex;
            align-items:center;
            gap:9px;

            padding:9px 14px;

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

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

            border-radius:50px;

            font-size:12px;
            font-weight:700;

            letter-spacing:1px;
            text-transform:uppercase;

            margin-bottom:25px;

            backdrop-filter:blur(8px);
        }


        .tn-admin-badge i{
            color:#e5bd63;
        }


        .tn-brand-content h1{
            font-family:'Playfair Display',serif;

            font-size:44px;
            line-height:1.12;

            font-weight:700;

            margin-bottom:18px;

            max-width:460px;
        }


        .tn-brand-content h1 span{
            color:#e5bd63;
        }


        .tn-brand-content p{
            color:rgba(255,255,255,.78);

            font-size:15px;
            line-height:1.8;

            max-width:450px;
        }


        .tn-brand-bottom{
            display:flex;
            align-items:center;
            gap:13px;

            padding-top:30px;
        }


        .tn-brand-bottom-icon{
            width:44px;
            height:44px;

            flex:0 0 44px;

            border-radius:14px;

            display:flex;
            align-items:center;
            justify-content:center;

            background:rgba(229,189,99,.16);

            border:1px solid rgba(229,189,99,.3);

            color:#e5bd63;

            font-size:17px;
        }


        .tn-brand-bottom strong{
            display:block;

            font-size:13px;

            margin-bottom:4px;
        }


        .tn-brand-bottom span{
            font-size:12px;

            color:rgba(255,255,255,.62);
        }


        /* =========================================
           RIGHT LOGIN AREA
        ========================================== */

        .tn-login-form-side{
            padding:48px 52px;

            display:flex;
            flex-direction:column;
            justify-content:center;

            background:
                linear-gradient(
                    180deg,
                    #ffffff,
                    #fcfaf6
                );
        }


        /* Logo */

        .tn-login-logo{
            margin-bottom:27px;
        }


        .tn-login-logo img{
            display:block;

            width:auto;
            max-width:190px;
            height:90px;

            object-fit:contain;

            object-position:left center;
        }


        /* Headings */

        .tn-login-heading{
            margin-bottom:28px;
        }


        .tn-login-heading .small-title{
            color:#ba8a2e;

            font-size:12px;
            line-height:1;

            font-weight:800;

            letter-spacing:1.5px;

            text-transform:uppercase;

            margin-bottom:10px;
        }


        .tn-login-heading h2{
            color:#201713;

            font-family:'Playfair Display',serif;

            font-size:31px;
            line-height:1.2;

            font-weight:700;

            margin-bottom:9px;
        }


        .tn-login-heading p{
            color:#77706b;

            font-size:14px;
            line-height:1.6;
        }


        /* Error */

        .tn-login-error{
            width:100%;

            display:flex;
            align-items:center;
            gap:9px;

            color:#b42318;

            background:#fff0ee;

            border:1px solid #ffd5d0;

            border-radius:11px;

            padding:11px 13px;

            font-size:13px;
            font-weight:600;

            margin-bottom:18px;
        }


        /* =========================================
           FORM
        ========================================== */

        .tn-form-group{
            margin-bottom:17px;
        }


        .tn-form-label{
            display:block;

            color:#3c332e;

            font-size:13px;
            font-weight:700;

            margin-bottom:8px;
        }


        .tn-input-wrap{
            position:relative;
        }


        .tn-input-icon{
            position:absolute;

            left:17px;
            top:50%;

            transform:translateY(-50%);

            color:#a89478;

            font-size:14px;

            pointer-events:none;
        }


        .tn-form-control{
            width:100%;
            height:54px;

            padding:0 48px;

            color:#2c2521;

            background:#fff;

            border:1px solid #ded8d1;

            border-radius:13px;

            outline:none;

            font-family:'Inter',sans-serif;

            font-size:14px;

            transition:.25s ease;
        }


        .tn-form-control::placeholder{
            color:#aaa39e;
        }


        .tn-form-control:hover{
            border-color:#cbb991;
        }


        .tn-form-control:focus{
            border-color:#c6973b;

            box-shadow:
                0 0 0 4px rgba(198,151,59,.10);
        }


        /* Password eye */

        .tn-password-toggle{
            position:absolute;

            right:16px;
            top:50%;

            transform:translateY(-50%);

            border:0;
            outline:0;

            background:transparent;

            color:#887e76;

            font-size:15px;

            cursor:pointer;

            padding:5px;
        }


        .tn-password-toggle:hover{
            color:#b98427;
        }


        /* Login button */

        .tn-login-btn{
            width:100%;
            min-height:54px;

            border:0;

            border-radius:13px;

            background:
                linear-gradient(
                    135deg,
                    #b78328,
                    #d8aa4e
                );

            color:#fff;

            font-family:'Inter',sans-serif;

            font-size:14px;
            font-weight:700;

            cursor:pointer;

            margin-top:5px;

            display:flex;
            align-items:center;
            justify-content:center;
            gap:10px;

            box-shadow:
                0 10px 26px rgba(183,131,40,.25);

            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }


        .tn-login-btn:hover{
            transform:translateY(-2px);

            box-shadow:
                0 14px 30px rgba(183,131,40,.34);
        }


        .tn-login-btn:active{
            transform:translateY(0);
        }


        .tn-security{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:7px;

            margin-top:18px;

            color:#938b84;

            font-size:11px;
        }


        .tn-security i{
            color:#b78a36;
        }


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

        .tn-login-footer{
            text-align:center;

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

            font-size:12px;

            margin-top:20px;
        }


        .tn-login-footer strong{
            color:#d7b366;
            font-weight:600;
        }


        /* =========================================
           RESPONSIVE
        ========================================== */

        @media(max-width:900px){

            .tn-login-wrapper{
                max-width:610px;
            }

            .tn-login-card{
                grid-template-columns:1fr;
            }

            .tn-login-brand{
                min-height:auto;
                padding:37px 35px;
            }

            .tn-brand-content h1{
                font-size:35px;
            }

            .tn-brand-content p{
                max-width:100%;
            }

            .tn-brand-bottom{
                margin-top:28px;
                padding-top:0;
            }

            .tn-login-form-side{
                padding:42px 38px;
            }

        }


        @media(max-width:576px){

            body{
                padding:18px 13px;
                align-items:flex-start;
            }

            .tn-login-wrapper{
                margin:auto;
            }

            .tn-login-card{
                border-radius:21px;
            }

            .tn-login-brand{
                padding:30px 24px;
            }

            .tn-admin-badge{
                margin-bottom:18px;
            }

            .tn-brand-content h1{
                font-size:30px;
            }

            .tn-brand-content p{
                font-size:13px;
                line-height:1.7;
            }

            .tn-brand-bottom{
                display:none;
            }

            .tn-login-form-side{
                padding:32px 24px 34px;
            }

            .tn-login-logo{
                margin-bottom:21px;
            }

            .tn-login-logo img{
                max-width:160px;
                height:75px;
            }

            .tn-login-heading{
                margin-bottom:23px;
            }

            .tn-login-heading h2{
                font-size:27px;
            }

            .tn-form-control{
                height:52px;
            }

            .tn-login-btn{
                min-height:52px;
            }

            .tn-login-footer{
                margin-top:14px;
                padding-bottom:5px;
            }

        }


        @media(max-width:390px){

            .tn-brand-content h1{
                font-size:27px;
            }

            .tn-login-form-side{
                padding-left:19px;
                padding-right:19px;
            }

        }

 /* =========================================================
   THODU-NEEDA LOGIN - LOGO COLOR THEME OVERRIDE
   Red + Purple + Blue
========================================================= */

:root{
    --tn-red:#e1262f;
    --tn-red-dark:#b91425;

    --tn-purple:#75236f;
    --tn-purple-dark:#4e174b;

    --tn-blue:#173e83;
    --tn-blue-dark:#0c285e;

    --tn-light:#f7f8fc;
    --tn-border:#dfe4ef;
    --tn-text:#172033;
    --tn-muted:#6d7482;
}


/* ==============================
   MAIN PAGE BACKGROUND
============================== */

body.tn-login-page{
    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(225,38,47,.15),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 88%,
            rgba(117,35,111,.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #091c43 0%,
            #112f6d 45%,
            #4e174b 100%
        ) !important;
}


/* Background decorative circles */

.tn-login-page:before{
    background:
        linear-gradient(
            135deg,
            rgba(225,38,47,.18),
            rgba(117,35,111,.08)
        ) !important;
}

.tn-login-page:after{
    background:
        rgba(255,255,255,.06) !important;
}


/* ==============================
   LEFT PANEL
============================== */

.tn-login-brand{
    background:
        linear-gradient(
            135deg,
            rgba(12,40,94,.97) 0%,
            rgba(23,62,131,.94) 48%,
            rgba(90,25,85,.94) 100%
        ) !important;
}


/* Optional subtle logo-inspired glow */

.tn-login-brand:before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    top:-130px;
    right:-100px;

    background:
        radial-gradient(
            circle,
            rgba(225,38,47,.25),
            transparent 67%
        );

    pointer-events:none;
    z-index:0;
}


.tn-login-brand:after{
    background:
        linear-gradient(
            180deg,
            rgba(7,22,52,.06),
            rgba(7,20,47,.42)
        ) !important;
}


/* ==============================
   SECURE ADMIN BADGE
============================== */

.tn-admin-badge{
    background:rgba(255,255,255,.10) !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    color:#fff !important;
}

.tn-admin-badge i{
    color:#ff5961 !important;
}


/* ==============================
   HEADING
============================== */

.tn-brand-content h1{
    color:#fff !important;
}

.tn-brand-content h1 span{
    color:#ff5961 !important;

    background:
        linear-gradient(
            90deg,
            #ff5961,
            #f15b8f
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}


/* ==============================
   LEFT BOTTOM ICON
============================== */

.tn-brand-bottom-icon{
    background:
        rgba(225,38,47,.14) !important;

    border:
        1px solid rgba(255,89,97,.40) !important;

    color:#ff5961 !important;
}


/* ==============================
   RIGHT SIDE
============================== */

.tn-login-form-side{
    background:
        linear-gradient(
            160deg,
            #ffffff 0%,
            #fafbff 65%,
            #f7f3fa 100%
        ) !important;
}


/* ==============================
   ADMIN PORTAL SMALL TITLE
============================== */

.tn-login-heading .small-title{
    color:var(--tn-purple) !important;
}


/* ==============================
   MAIN LOGIN HEADING
============================== */

.tn-login-heading h2{
    color:var(--tn-blue-dark) !important;
}


/* Sub text */

.tn-login-heading p{
    color:var(--tn-muted) !important;
}


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

.tn-form-label{
    color:var(--tn-blue-dark) !important;
}


/* ==============================
   INPUTS
============================== */

.tn-form-control{
    background:#f8faff !important;

    border:
        1px solid #d7deee !important;

    color:#172033 !important;

    box-shadow:none !important;
}


/* Placeholder */

.tn-form-control::placeholder{
    color:#989fad !important;
}


/* Hover */

.tn-form-control:hover{
    border-color:
        rgba(23,62,131,.45) !important;
}


/* Focus */

.tn-form-control:focus{
    background:#fff !important;

    border-color:
        var(--tn-purple) !important;

    box-shadow:
        0 0 0 4px rgba(117,35,111,.10) !important;
}


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

.tn-input-icon{
    color:var(--tn-blue) !important;
}


/* Password eye */

.tn-password-toggle{
    color:var(--tn-purple) !important;
}

.tn-password-toggle:hover{
    color:var(--tn-red) !important;
}


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

.tn-login-btn{
    background:
        linear-gradient(
            135deg,
            var(--tn-blue) 0%,
            var(--tn-purple) 55%,
            var(--tn-red) 100%
        ) !important;

    color:#fff !important;

    border:none !important;

    box-shadow:
        0 12px 30px rgba(70,38,117,.25) !important;

    position:relative;
    overflow:hidden;
}


/* Button shine */

.tn-login-btn:before{
    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:skewX(-20deg);

    transition:.6s;
}


.tn-login-btn:hover:before{
    left:140%;
}


.tn-login-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 16px 34px rgba(70,38,117,.32) !important;
}


/* ==============================
   SECURITY TEXT
============================== */

.tn-security{
    color:#858b98 !important;
}

.tn-security i{
    color:var(--tn-purple) !important;
}


/* ==============================
   ERROR MESSAGE
============================== */

.tn-login-error{
    color:#a91927 !important;

    background:#fff2f3 !important;

    border:
        1px solid #f3c8cd !important;
}

.tn-login-error i{
    color:var(--tn-red) !important;
}


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

.tn-login-footer{
    color:rgba(255,255,255,.72) !important;
}

.tn-login-footer strong{
    color:#ff7380 !important;
}


/* ==============================
   CARD SHADOW
============================== */

.tn-login-card{
    box-shadow:
        0 35px 90px rgba(4,15,42,.38),
        0 8px 25px rgba(0,0,0,.14) !important;
}


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

.tn-login-logo img{
    max-width:190px !important;
    height:95px !important;
    object-fit:contain !important;
}


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

@media(max-width:900px){

    body.tn-login-page{
        background:
            linear-gradient(
                145deg,
                #0c285e,
                #442052
            ) !important;
    }

}


@media(max-width:576px){

    .tn-login-brand{
        background:
            linear-gradient(
                135deg,
                #0c285e 0%,
                #173e83 55%,
                #671e65 100%
            ) !important;
    }

    .tn-brand-content h1 span{
        color:#ff6972 !important;
    }

    .tn-login-btn{
        min-height:54px;
        font-size:14px;
    }

}

/* ==========================================
   THODU-NEEDA LOGIN SUCCESS MESSAGE
========================================== */

.tn-login-success{
    position:fixed;
    top:22px;
    right:22px;

    width:420px;
    max-width:calc(100% - 30px);

    min-height:78px;

    background:#ffffff;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 16px;

    border-radius:16px;

    border-left:5px solid #173e83;

    box-shadow:
        0 18px 55px rgba(15,40,94,.22);

    z-index:999999;

    animation:tnSuccessShow .45s ease;
}


/* CHECK ICON */

.tn-success-check{
    width:46px;
    height:46px;

    flex:0 0 46px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    font-size:18px;

    background:
        linear-gradient(
            135deg,
            #173e83,
            #75236f
        );
}


/* TEXT */

.tn-success-info{
    flex:1;
}

.tn-success-info strong{
    display:block;

    color:#173e83;

    font-size:15px;
    font-weight:700;

    margin-bottom:3px;
}

.tn-success-info span{
    display:block;

    color:#6d7482;

    font-size:13px;
    line-height:1.4;
}


/* CLOSE BUTTON */

.tn-success-close{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;

    border-radius:8px;

    background:#f5f6fa;

    color:#75236f;

    cursor:pointer;

    transition:.25s;
}

.tn-success-close:hover{
    background:#fcecef;
    color:#e1262f;
}


/* SHOW ANIMATION */

@keyframes tnSuccessShow{

    from{
        opacity:0;
        transform:translateX(70px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


/* HIDE */

.tn-login-success.tn-hide{
    opacity:0;
    transform:translateX(70px);

    transition:
        opacity .4s ease,
        transform .4s ease;
}


/* MOBILE */

@media(max-width:576px){

    .tn-login-success{
        top:15px;
        right:15px;
        left:15px;

        width:auto;

        max-width:none;
    }

}