/* ==========================================================
   Rayhan Academy — Login / Register UI
   Visual layer only. Authentication logic is unchanged.
========================================================== */

.rayhan-auth-page,
.rayhan-teacher-login-page{
    width:100%;
    min-height:calc(100vh - 190px);
    padding:34px 24px 55px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    direction:rtl;
    background:#f6f7f8;
    box-sizing:border-box;
}

.rayhan-auth-layout{
    width:100%;
    max-width:1120px;
    min-height:600px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,520px);
    direction:ltr;
    background:#f6f7f8;
    box-sizing:border-box;
}

.rayhan-auth-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 42px;
    direction:rtl;
}

.rayhan-auth-visual img{
    display:block;
    width:min(100%,500px);
    max-height:570px;
    object-fit:contain;
    border-radius:0;
    box-shadow:none;
}

.rayhan-auth-card{
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:30px 34px 28px;
    background:#fff;
    border:1px solid #e4e6e8;
    border-radius:8px;
    box-shadow:0 8px 28px rgba(24,45,58,.07);
    direction:rtl;
    text-align:right;
    box-sizing:border-box;
}

.rayhan-auth-title,
.rayhan-login-title{
    margin:0 0 8px;
    color:#172333;
    text-align:center;
    font-size:34px;
    line-height:1.35;
    font-weight:800;
}

.rayhan-auth-subtitle,
.rayhan-login-subtitle{
    margin:0 0 22px;
    color:#7b8087;
    text-align:center;
    font-size:17px;
    line-height:1.8;
}

/* Login method tabs */
/* Login method tabs — keep both methods side-by-side on student login. */
#rayhan-student-login-form ~ .rayhan-login-forgot-row{}
.rayhan-login-tabs{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:stretch!important;direction:rtl!important;}
.rayhan-login-tabs .rayhan-login-tab{display:flex!important;flex:1 1 50%!important;width:50%!important;min-width:0!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}

.rayhan-login-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin:0 0 22px;
    padding:4px;
    background:#f1f2f3;
    border-radius:14px;
    direction:rtl;
}

.rayhan-login-tab{
    height:48px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#62676d;
    font:inherit;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.rayhan-login-tab.is-active{
    background:#6b9e95;
    color:#fff;
    box-shadow:0 2px 7px rgba(68,111,104,.18);
}

.rayhan-auth-card form{
    margin:0;
}

.rayhan-auth-card form p{
    position:relative;
    margin:0 0 15px;
}

.rayhan-auth-card form label{
    display:block;
    margin:0 0 7px;
    color:#40464d;
    font-size:16px;
    font-weight:700;
}

.rayhan-auth-card form input[type="text"],
.rayhan-auth-card form input[type="email"],
.rayhan-auth-card form input[type="password"]{
    width:100%;
    height:54px;
    padding:0 48px 0 16px;
    border:1px solid #d1d4d7;
    border-radius:14px;
    background:#fff;
    color:#26313a;
    font:inherit;
    font-size:16px;
    box-sizing:border-box;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
}

.rayhan-auth-card form input:focus{
    border-color:#6b9e95;
    box-shadow:0 0 0 3px rgba(107,158,149,.13);
}

/* Field icons */
.rayhan-auth-card form p.login-username::before,
.rayhan-auth-card form p.login-password::before{
    position:absolute;
    right:17px;
    bottom:16px;
    z-index:2;
    color:#9aa1a7;
    font-size:19px;
    line-height:1;
    pointer-events:none;
}

.rayhan-auth-card form p.login-username::before{content:"\2709";font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:19px;}
.rayhan-auth-card form p.login-password::before{content:"\1F512";font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:17px;}

.rayhan-auth-card form p.login-remember{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:2px 0 16px;
}

.rayhan-auth-card form p.login-remember label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    color:#626970;
    font-size:15px;
    font-weight:500;
}

.rayhan-auth-card form p.login-remember input{
    width:19px;
    height:19px;
    margin:0;
    accent-color:#6b9e95;
}

.rayhan-auth-card form p.login-submit{
    margin:0;
}

.rayhan-auth-card form input[type="submit"],
.rayhan-auth-card form .button.button-primary{
    width:100%;
    height:55px;
    margin:0;
    padding:0 18px;
    border:0;
    border-radius:8px;
    background:#6b9e95;
    color:#fff;
    font:inherit;
    font-size:20px;
    font-weight:800;
    cursor:pointer;
    box-shadow:none;
    transition:background .2s,transform .2s;
}

.rayhan-auth-card form input[type="submit"]:hover,
.rayhan-auth-card form .button.button-primary:hover{
    background:#5f9188;
    transform:translateY(-1px);
}

.rayhan-forgot-password{
    margin:13px 0 0;
    text-align:right;
}

.rayhan-forgot-password a{
    color:#6b9e95;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
}

.rayhan-forgot-password a:hover{text-decoration:underline;}

/* Separator */
.rayhan-social-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:25px 0 16px;
    color:#b4b8bc;
    font-size:14px;
    white-space:nowrap;
}

.rayhan-social-divider::before,
.rayhan-social-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:#e3e5e7;
}

/* Social buttons */
.rayhan-social-card{
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
    text-align:center;
    box-sizing:border-box;
}

.rayhan-social-card h3{display:none;}

.rayhan-google-btn,
.rayhan-apple-btn,
.rayhan-facebook-btn{
    width:100% !important;
    height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:11px !important;
    margin:10px 0 !important;
    padding:0 18px !important;
    border-radius:27px !important;
    box-sizing:border-box !important;
    font:inherit !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1 !important;
    text-decoration:none !important;
    cursor:pointer;
    white-space:nowrap !important;
}

.rayhan-google-btn{
    background:#fff !important;
    color:#222 !important;
    border:1px solid #202124 !important;
}

.rayhan-apple-btn{
    background:#000 !important;
    color:#fff !important;
    border:1px solid #000 !important;
}

.rayhan-facebook-btn{
    background:#1877f2 !important;
    color:#fff !important;
    border:1px solid #1877f2 !important;
}

.rayhan-google-btn img,
.rayhan-facebook-btn svg{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
}

.rayhan-apple-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex:0 0 22px;
    color:#fff;
    font-size:24px;
    line-height:1;
}

.rayhan-register-box,
.rayhan-register-text,
.rayhan-login-links{
    text-align:center;
}

.rayhan-register-box{margin-top:22px;}
.rayhan-register-text{margin:0 0 7px;color:#777;font-size:15px;}
.rayhan-register-btn,
.rayhan-login-links a{color:#6b9e95;text-decoration:none;font-weight:800;}
.rayhan-register-btn{font-size:16px;}
.rayhan-register-btn:hover,
.rayhan-login-links a:hover{text-decoration:underline;}

/* Registration form */
.rayhan-auth-card .rayhan-register-form p{margin-bottom:14px;}
.rayhan-auth-card .rayhan-register-form label{margin-bottom:7px;}

/* Logged-in message */
.rayhan-auth-logged-in{
    width:100%;
    max-width:520px;
    margin:0 auto;
    padding:30px;
    background:#fff;
    border:1px solid #e4e6e8;
    border-radius:8px;
    text-align:center;
    box-sizing:border-box;
}

@media (max-width:900px){
    .rayhan-auth-page,
    .rayhan-teacher-login-page{
        padding:22px 16px 40px;
    }
    .rayhan-auth-layout{
        grid-template-columns:1fr;
        min-height:auto;
        max-width:600px;
    }
    .rayhan-auth-visual{
        padding:8px 12px 10px;
        order:0;
    }
    .rayhan-auth-visual img{
        width:min(78vw,320px);
        max-height:290px;
    }
    .rayhan-auth-card{
        max-width:100%;
        padding:22px 18px 24px;
        border-radius:8px;
    }
    .rayhan-auth-title,
    .rayhan-login-title{
        font-size:29px;
    }
    .rayhan-auth-subtitle,
    .rayhan-login-subtitle{
        font-size:16px;
        margin-bottom:18px;
    }
    .rayhan-login-tab{height:48px;font-size:16px;}
}

@media (max-width:480px){
    .rayhan-auth-page,
    .rayhan-teacher-login-page{
        padding:10px 10px 30px;
    }
    .rayhan-auth-visual{
        padding:0 8px 5px;
    }
    .rayhan-auth-visual img{
        width:240px;
        max-height:240px;
    }
    .rayhan-auth-card{
        padding:20px 14px 22px;
    }
    .rayhan-auth-title,
    .rayhan-login-title{
        font-size:27px;
    }
    .rayhan-auth-subtitle,
    .rayhan-login-subtitle{
        font-size:15px;
    }
    .rayhan-auth-card form input[type="text"],
    .rayhan-auth-card form input[type="email"],
    .rayhan-auth-card form input[type="password"]{
        height:52px;
        font-size:15px;
    }
    .rayhan-auth-card form input[type="submit"]{
        height:54px;
        font-size:19px;
    }
    .rayhan-google-btn,
    .rayhan-apple-btn,
    .rayhan-facebook-btn{
        height:50px !important;
        font-size:16px !important;
    }
}

/* Exact login form details: placeholders + remember/forgot row. */
#rayhan-teacher-login-form .login-username label,
#rayhan-teacher-login-form .login-password label,
#rayhan-student-login-form .login-username label,
#rayhan-student-login-form .login-password label{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

#rayhan-teacher-login-form .login-username,
#rayhan-teacher-login-form .login-password,
#rayhan-student-login-form .login-username,
#rayhan-student-login-form .login-password{
    margin-bottom:15px!important;
}

#rayhan-teacher-login-form .login-remember,
#rayhan-student-login-form .login-remember{
    margin:1px 0 14px!important;
}

#rayhan-teacher-login-form .login-submit,
#rayhan-student-login-form .login-submit{
    margin:0!important;
}

.rayhan-auth-card .rayhan-forgot-password{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    margin:-1px;
}

.rayhan-login-forgot-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:-5px 0 15px;
    direction:rtl;
}

.rayhan-login-forgot-row a{
    color:#6b9e95;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
}

.rayhan-login-forgot-row a:hover{text-decoration:underline;}

.rayhan-auth-card .rayhan-apple-svg{
    width:22px;
    height:22px;
    flex:0 0 22px;
}

/* Teacher login only — center the email/password icons vertically inside their fields. */
#rayhan-teacher-login-form p.login-username::before,
#rayhan-teacher-login-form p.login-password::before{
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
}

/* English student-facing auth pages — scoped only to .rayhan-student-en */
.rayhan-student-en{direction:ltr!important;text-align:left!important;}
.rayhan-student-en .rayhan-auth-card{direction:ltr!important;text-align:left!important;}
.rayhan-student-en .rayhan-auth-card label{direction:ltr!important;text-align:left!important;}
.rayhan-student-en .rayhan-auth-card input{direction:ltr!important;text-align:left!important;}
.rayhan-student-en .rayhan-login-tabs{direction:ltr!important;}
.rayhan-student-en .rayhan-login-forgot-row{direction:ltr!important;}
.rayhan-student-en .rayhan-register-box{direction:ltr!important;text-align:center!important;}