/* ===================================
   ALUSIYES ACADEMY AUTH PAGE
   PART 2A
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    min-height:100vh;

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

    overflow-x:hidden;
    overflow-y:auto;

    background:
    linear-gradient(
    135deg,
    #08132f,
    #173a88,
    #1b63d4,
    #3f8cff);

    background-size:400% 400%;

    animation:gradientMove 12s ease infinite;
}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

.background{

    width:100%;
    min-height:100vh;

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

    padding:40px;

}

/* ======================
      GLASS CARD
====================== */

.glass-card{

    width:1200px;

    min-height:720px;

    display:flex;

    border-radius:35px;

    overflow:hidden;

    backdrop-filter:blur(35px);

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

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

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}

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

.left-panel{

    width:45%;

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:70px;

    background:
    linear-gradient(
    rgba(0,0,0,.18),
    rgba(0,0,0,.25));

}

.logo{

    width:170px;

    margin-bottom:30px;

    filter:
    drop-shadow(
    0 10px 25px rgba(0,0,0,.25));

}

.left-panel h1{

    font-size:38px;

    margin-bottom:25px;

    letter-spacing:2px;

    font-weight:700;

}

.left-panel h2{

    font-size:54px;

    line-height:1.2;

    margin-bottom:25px;

    font-weight:700;

}

.left-panel p{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

}

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

.right-panel{

    width:55%;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:70px;

    position:relative;

}

/* ======================
      SWITCH BUTTONS
====================== */

.switch{

    display:flex;

    justify-content:center;

    margin-bottom:40px;

    background:#eef3ff;

    padding:8px;

    border-radius:50px;

}

.switch button{

    flex:1;

    border:none;

    background:none;

    padding:16px;

    font-size:17px;

    font-weight:600;

    border-radius:50px;

    cursor:pointer;

    transition:.35s;

}

.switch button.active{

    background:#1746d1;

    color:white;

    box-shadow:
    0 10px 25px
    rgba(23,70,209,.35);

}

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

.form{

    display:none;

    animation:fade .45s;

}

.active-form{

    display:block;

}

@keyframes fade{

    from{

        opacity:0;

        transform:
        translateY(25px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

.form h2{

    font-size:36px;

    color:#173a88;

    margin-bottom:10px;

}

.form p{

    color:#666;

    margin-bottom:35px;

}.main-btn{
    width:100%;
    height:58px;
    border:none;
    border-radius:16px;
    cursor:pointer;

    font-size:18px;
    font-weight:600;
    color:white;

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

    box-shadow:0 15px 35px rgba(37,99,235,.35);

    transition:.35s;
}

.main-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(37,99,235,.45);

    background:linear-gradient(135deg,#3B82F6,#2563EB);

}

.main-btn:active{

    transform:scale(.98);

}.google-btn{

    width:100%;

    height:58px;

    margin-top:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    background:white;

    border:1px solid #d6d6d6;

    border-radius:16px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.google-btn img{

    width:24px;

}

.google-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}.input-box{

    width:100%;

    margin-bottom:18px;

}

.input-box input{

    width:100%;

    height:58px;

    border-radius:14px;

    border:2px solid #dfe7ff;

    padding:0 20px;

    font-size:16px;

    transition:.35s;

}

.input-box input:focus{

    outline:none;

    border-color:#2563EB;

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

}.switch{

    background:#EEF3FF;

    padding:8px;

    border-radius:50px;

    display:flex;

    margin-bottom:45px;

}

.switch button{

    flex:1;

    height:58px;

    border:none;

    background:none;

    border-radius:40px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.switch .active{

    background:linear-gradient(135deg,#2563EB,#1746D1);

    color:white;

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

}.divider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:28px 0;

    color:#777;

}

.divider::before,
.divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#ddd;

}.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.options a{

    text-decoration:none;

    color:#2563EB;

    font-weight:600;

}

.options a:hover{

    text-decoration:underline;

}.bottom{

    text-align:center;

    margin-top:22px;

    color:#666;

}

.bottom a{

    color:#2563EB;

    font-weight:700;

    text-decoration:none;

}

.bottom a:hover{

    text-decoration:underline;

}
/* Responsive polish for the restored classic authentication design */
.password{position:relative}
.eye{position:absolute;right:18px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:2}
.input-box.password input{padding-right:54px}
#strength,#strengthText{font-size:12px;color:#64748b;margin:-4px 0 16px}
.strength-box{margin:-4px 0 16px}
.strength-title{font-size:12px;color:#64748b;margin-bottom:7px}
.strength-bar{height:6px;background:#e7ecf7;border-radius:999px;overflow:hidden}
#strengthFill{height:100%;width:0;border-radius:999px;transition:width .3s ease,background .3s ease}
.flash-container{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;width:min(560px,calc(100% - 30px))}
.flash-message{padding:12px 16px;border-radius:12px;margin-bottom:8px;background:rgba(255,255,255,.96);color:#173a88;box-shadow:0 14px 35px rgba(15,35,80,.16);border:1px solid #dce5fb}
.flash-message.danger{color:#9f1239;border-color:#fecdd3}
.flash-message.success{color:#166534;border-color:#bbf7d0}
.google-btn img{object-fit:contain}
@media(max-width:900px){.glass-card{width:min(680px,100%);min-height:0}.left-panel,.right-panel{width:100%}.left-panel{padding:45px 30px}.right-panel{padding:42px 30px}.left-panel h2{font-size:44px}.left-panel h1{font-size:28px}.logo{width:125px}}
@media(max-width:520px){.background{padding:14px}.glass-card{border-radius:24px}.left-panel{padding:32px 20px}.right-panel{padding:25px 20px}.left-panel h2{font-size:35px}.left-panel p{font-size:14px}.switch{margin-bottom:28px}.switch button{height:50px;font-size:15px}.form h2{font-size:28px}.form p{margin-bottom:24px}.input-box input{height:53px;font-size:15px}.main-btn,.google-btn{height:53px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* V29.1 mobile authentication repair */
.auth-flashes{width:100%;display:grid;gap:8px;margin-bottom:16px}.auth-flash{padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.4;border:1px solid}.auth-flash.danger{background:#fff1f2;color:#9f1239;border-color:#fecdd3}.auth-flash.warning{background:#fff7ed;color:#9a3412;border-color:#fed7aa}.auth-flash.success{background:#f0fdf4;color:#166534;border-color:#bbf7d0}.auth-flash.info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}.resend-form{display:grid;gap:8px;margin:12px 0}.resend-form input{height:44px;border:1px solid #dbe3f1;border-radius:10px;padding:0 12px}.resend-form button{height:42px;border:1px solid #d7e1f0;border-radius:10px;background:#f7faff;color:#173a88;font-weight:600;cursor:pointer}.google-btn{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px}.hero-image{display:block;width:100%;height:100%;object-fit:cover}.hero-image-frame{overflow:hidden}
@media(max-width:900px){body{align-items:flex-start}.background{padding:16px 10px;min-height:100dvh;align-items:flex-start}.glass-card{width:100%;min-height:0;height:auto;display:block;border-radius:22px;margin:10px 0}.left-panel,.right-panel{width:100%}.left-panel{padding:28px 20px 22px;min-height:auto}.logo{width:110px;margin-bottom:14px}.left-panel h1{font-size:24px;margin-bottom:12px}.left-panel h2{font-size:30px;margin-bottom:12px}.left-panel p{font-size:14px;line-height:1.55;max-width:520px}.right-panel{padding:22px 16px 28px}.form{width:100%}.switch{width:100%;}.switch button{min-height:48px}.input-box input{height:48px;font-size:15px}.main-btn,.google-btn{min-height:48px}.options{flex-wrap:wrap;gap:10px}.auth-flash{font-size:12px}}
@media(max-width:480px){.background{padding:8px}.glass-card{border-radius:18px}.left-panel{padding:22px 16px 18px}.left-panel h1{font-size:21px}.left-panel h2{font-size:26px}.left-panel p{font-size:13px}.right-panel{padding:18px 12px 24px}.form h2{font-size:24px}.form p{font-size:13px}.input-box{width:100%}.input-box input{width:100%;height:46px}.password .eye{right:12px}.resend-form input{font-size:13px}}


/* V29.2 email verification UI: never nest the resend form inside the login form. */
.verification-help{width:100%;margin:16px 0 4px;text-align:center}
.verification-toggle,.verification-toggle:visited{display:inline-block;border:0!important;background:transparent!important;color:#245fe5!important;font:600 14px/1.4 Poppins,Arial,sans-serif!important;cursor:pointer;text-decoration:none!important;padding:6px 8px!important;box-shadow:none!important;appearance:none!important;-webkit-appearance:none!important}
.verification-toggle:hover,.verification-toggle:focus{text-decoration:underline!important}
.verification-panel{margin-top:8px;padding:12px;border:1px solid #dbe5f6;border-radius:14px;background:#f8fbff}
.verification-panel p{margin:0 0 10px;color:#66748c;font-size:12px;line-height:1.5}
.verification-panel .resend-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0}
.verification-panel .resend-form input{min-width:0;height:44px}
.verification-panel .resend-form button{height:44px;white-space:nowrap}
@media(max-width:560px){.verification-panel .resend-form{grid-template-columns:1fr}.verification-panel .resend-form button{width:100%}.verification-toggle{font-size:13px}}


/* V30.1 mobile authentication support */
@media(max-width:900px){.glass-card{width:min(680px,100%);min-height:0;height:auto;display:block}.left-panel,.right-panel{width:100%}.left-panel{padding:45px 30px}.right-panel{padding:42px 30px}}
@media(max-width:520px){.background{padding:14px}.glass-card{border-radius:24px}.left-panel{padding:32px 20px}.right-panel{padding:25px 20px}.form h2{font-size:28px}.input-box input{height:53px}.main-btn,.google-btn{height:53px}}