/* ================= LOGIN PAGE ================= */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
}

/* CONTAINER */
.login-container {
    width: 90%;
    max-width: 1100px;
    height: 600px;

    display: flex;
    border-radius: 20px;
    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}


/* LEFT SIDE */
/* ================= LEFT PANEL (REFERENCE STYLE) ================= */
.login-left {
    flex: 1;
    position: relative;

    background: #0EA5A4; /* YOUR BRAND COLOR */

    color: white;
    overflow: hidden;

    display: flex;
    align-items: flex-start;
    padding: 50px;

    /* curved right side */
    border-top-right-radius: 120px;
    border-bottom-right-radius: 120px;
}

/* TEXT */
.left-content {
    z-index: 2;
    max-width: 320px;
}

.left-content h2 {
    font-size: 18px;
    opacity: 0.9;
    margin-top: -10px;
    background-color: #0f172a;
    display: inline-block;
    padding: 10px 15px ;
    border-radius: 28px;
}

.left-content h1 {
    font-size: 32px;
    margin: 10px 0;
}

.left-content p {
    font-size: 14px;
    opacity: 0.85;
}

/* SVG IMAGE (MAIN PART 🔥) */
.student-svg {
    position: absolute;
    bottom: -15%;
    left: 50%;

    transform: translateX(-50%);
    width: 420px;

    z-index: 1;
}

/* DOT PATTERN (LIKE REFERENCE) */
.dots1 {
    position: absolute;
    top: 40px;
    right: 40px;

    width: 100px;
    height: 100px;

    background-image: radial-gradient(rgba(255,255,255,0.4) 2px, transparent 2px);
    background-size: 12px 12px;

    z-index: 0;
}
.dots2 {
    position: absolute;
    bottom: 40px;
    left: 40px;

    width: 80px;
    height: 80px;

    background-image: radial-gradient(rgba(255,255,255,0.4) 2px, transparent 2px);
    background-size: 12px 12px;

    z-index: 0;
}
/* RIGHT SIDE */
.login-right {
    flex: 1;
    background: #F8FAFC;

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

/* LOGIN BOX */ 
.login-box {
    width: 80%;
    max-width: 350px;

    padding: 30px;
    border-radius: 20px;

    /* GLASS EFFECT */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* GLASS BORDER */
    border: 1px solid rgba(255, 255, 255, 0.3);

    /* DEPTH */
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.3);

    transition: 0.3s ease;
}
.login-box:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 50px rgba(14,165,164,0.25),
        inset 0 1px 1px rgba(255,255,255,0.4);
}

/* HEADER */
.login-box h2 {
    margin-bottom: 5px;
}

.login-sub {
    color: #64748B;
    margin-bottom: 20px;
}

/* TABS */
.login-tabs {
    display: flex;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.login-tabs button {
    flex: 1;
    padding: 10px;
    border: none;
    background: #E2E8F0;
    cursor: pointer;
    transition: 0.3s;
}

.login-tabs .active {
    background: #0EA5A4;
    color: white;
}

/* FORM */
.login-form input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;

    border-radius: 10px;

    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(29, 28, 28, 0.5);

    outline: none;
    font-size: 14px;
    transition: 0.25s ease;
}
.login-form input:focus {
    border-color: #0EA5A4;
    box-shadow: 0 0 0 2px rgba(14,165,164,0.2);
}
/* PASSWORD FIELD */

.password-field{
    position: relative;
}

.password-field input{
    padding-right: 45px;
}

.toggle-password{

    position: absolute;

    top: 38%;
    right: 15px;

    transform: translateY(-50%);

    cursor: pointer;

    font-size: 16px;

    color: #64748B;
}
/* BUTTON */
.btn-login {
    width: 70%;
    padding: 12px;
    border-radius: 20px;
    border: none;
 


    background: #0EA5A4;
    color: white;
    cursor: pointer;
    transition: 0.3s;
     
    display: block;
    margin: 10px auto 0;
}

.btn-login:hover {
    background: #0c8e8c;
}

/* =====================================================
   BUTTON LOADER
====================================================== */

.btn-login{

    position: relative;
}

.btn-loader{

    display: none;

    width: 18px;
    height: 18px;

    border: 2px solid rgba(255,255,255,0.3);

    border-top: 2px solid white;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

    margin: auto;
}

.btn-login.loading .btn-text{

    display: none;
}

.btn-login.loading .btn-loader{

    display: block;
}

@keyframes spin{

    100%{
        transform: rotate(360deg);
    }
}
/* ================= MOBILE PREMIUM LOGIN ================= */

/* ==================================
   LOGIN MOBILE PREMIUM
================================== */

@media (max-width:576px){

    .login-page{

        min-height:100vh;

        padding:16px;

        background:
        linear-gradient(
            180deg,
            #ecfeff,
            #f8fafc
        );
    }

    .login-container{

        width:100%;

        height:auto;

        max-width:420px;

        margin:auto;

        flex-direction:column;

        border-radius:28px;

        overflow:hidden;

        box-shadow:
        0 20px 60px rgba(15,23,42,.12);
    }

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

    .login-left{

        min-height:220px;

        padding:26px 22px;

        border-radius:0;

        border-bottom-left-radius:30px;

        border-bottom-right-radius:30px;

        background:
        linear-gradient(
            135deg,
            #0ea5a4,
            #14b8a6
        );
    }

    .left-content{

        max-width:72%;

        position:relative;

        z-index:2;
    }

    .left-content h2{

        font-size:12px;

        font-weight:700;

        padding:7px 14px;

        border-radius:999px;

        margin:0 0 14px;

        background:#0f172a;
    }

    .left-content h1{

        font-size:28px;

        line-height:1.1;

        font-weight:900;

        letter-spacing:-1px;

        margin-bottom:10px;
    }

    .left-content p{

        font-size:13px;

        line-height:1.6;

        opacity:.92;
    }

    .student-svg{

        width:150px;

        position:absolute;

        right:-5px;

        bottom:-10px;

        left:auto;

        top:auto;

        transform:none;
    }

    .dots1{

        width:60px;

        height:60px;

        top:15px;

        right:15px;

        opacity:.4;
    }

    .dots2{

        display:none;
    }

    /* =====================
       RIGHT PANEL
    ===================== */

    .login-right{

        padding:26px 18px 28px;

        background:#fff;
    }

    .login-box{

        width:100%;

        max-width:100%;

        padding:0;

        border:none;

        background:transparent;

        backdrop-filter:none;

        box-shadow:none;
    }

    .login-box:hover{

        transform:none;

        box-shadow:none;
    }

    .login-box h2{

        font-size:26px;

        font-weight:900;

        letter-spacing:-1px;

        color:#0f172a;

        margin-bottom:8px;
    }

    .login-sub{

        font-size:14px;

        line-height:1.6;

        margin-bottom:24px;

        color:#64748b;
    }

    .login-sub span{

        display:block;

        margin-top:4px;

        font-size:12px !important;
    }

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

    .login-form{

        width:100%;
    }

    .login-form input{

        width:100%;

        height:54px;

        margin-bottom:16px;

        padding:0 16px;

        font-size:14px;

        border-radius:16px;

        background:#f8fafc;

        border:1px solid #dbe3ee;

        transition:.25s;
    }

    .login-form input:focus{

        background:#fff;

        border-color:#14b8a6;

        box-shadow:
        0 0 0 4px rgba(20,184,166,.12);
    }

    .password-field{

        position:relative;
    }

    .password-field input{

        padding-right:50px;
    }

    .toggle-password{

        position:absolute;

        right:16px;

        top:26px;

        transform:translateY(-50%);

        font-size:18px;

        color:#64748b;
    }

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

    .btn-login{

        width:100%;

        height:56px;

        margin-top:6px;

        border:none;

        border-radius:16px;

        font-size:15px;

        font-weight:800;

        background:
        linear-gradient(
            135deg,
            #14b8a6,
            #06b6d4
        );

        box-shadow:
        0 12px 30px rgba(20,184,166,.25);
    }

    .btn-login:hover{

        transform:none;
    }

    .btn-loader{

        width:18px;

        height:18px;
    }
}