/* ======================================
   WOTAI TAEKWONDO LOGIN MODAL DESIGN
====================================== */


/* MODAL BACKGROUND */

.modal {

    display:none;

    position:fixed;

    z-index:9999;

    inset:0;

    background:
    rgba(0,0,0,0.85);

    backdrop-filter:blur(8px);

    justify-content:center;

    align-items:center;

}



/* MODAL BOX */

.modal-content {

    width:900px;

    min-height:550px;

    display:flex;

    position:relative;

    overflow:hidden;

    border-radius:25px;

    background:#111;

    border:1px solid rgba(255,215,0,.35);

    box-shadow:

    0 0 50px rgba(255,215,0,.25);

    animation:modalShow .35s ease;

}



@keyframes modalShow {

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/* TOP GOLD LINE */

.modal-content::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(
        90deg,
        #FFD700,
        #ff0000
    );

}



/* CLOSE BUTTON */

.close {

    position:absolute;

    top:15px;

    right:25px;

    color:white;

    font-size:35px;

    cursor:pointer;

    z-index:20;

}



.close:hover {

    color:#FFD700;

}



/* ======================================
   LEFT IMAGE SECTION
====================================== */


.login-left {

    width:45%;

    position:relative;

    overflow:hidden;

}



.login-left img {

    width:100%;

    height:100%;

    object-fit:cover;

}



/* DARK IMAGE OVERLAY */

.login-left::after {

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.15),

        rgba(0,0,0,.85)

    );

}



/* IMAGE TEXT */

.fighter-overlay {

    position:absolute;

    z-index:2;

    bottom:40px;

    left:35px;

    color:white;

}



.fighter-overlay h1 {

    font-size:45px;

    color:#FFD700;

    letter-spacing:5px;

}



.fighter-overlay p {

    color:#ddd;

    font-size:14px;

}



/* ======================================
   RIGHT FORM SECTION
====================================== */


.login-right {

    width:55%;

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    color:white;

}



.login-logo {

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:50%;

    margin:0 auto;

    border:3px solid #FFD700;

}



.login-right h2 {

    text-align:center;

    margin-top:20px;

    font-size:32px;

    letter-spacing:2px;

    color:#FFD700;

}



.login-text {

    text-align:center;

    color:#bbb;

    margin:10px 0 30px;

}



/* INPUT GROUP */

.input-group {

    margin-bottom:18px;

}



.input-group label {

    display:block;

    margin-bottom:8px;

    color:#FFD700;

    font-size:14px;

}



.input-group input {

    width:100%;

    padding:14px;

    border-radius:12px;

    background:#1e1e1e;

    color:white;

    border:1px solid #333;

    outline:none;

}



.input-group input:focus {

    border-color:#FFD700;

    box-shadow:

    0 0 10px rgba(255,215,0,.35);

}



/* PASSWORD BOX */

.password-box {

    position:relative;

}



.toggle-password {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#FFD700;

    font-size:18px;

    user-select:none;

}



/* REMEMBER + FORGOT */


/* Remember + Forgot password alignment */

#loginModal .admin-login__options {

    display:flex;

    width:100%;

    justify-content:space-between;

    align-items:center;

    margin:15px 0 20px;

}


#loginModal .check-row {

    display:flex;

    align-items:center;

    gap:8px;

    white-space:nowrap;

}


#loginModal .forgot-link {

    margin-left:auto;

    white-space:nowrap;

    color:#FFD700;

    text-decoration:none;

}

#loginModal form {
    width:100%;
}


/* LOGIN BUTTON */


.login-btn {

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:17px;

    font-weight:bold;

    color:#111;


    background:

    linear-gradient(

        45deg,

        #FFD700,

        #ff9900

    );


    transition:.3s;

}



.login-btn:hover {

    transform:translateY(-3px);

    box-shadow:

    0 10px 25px rgba(255,215,0,.3);

}



/* DIVIDER */

.divider {

    display:flex;

    align-items:center;

    gap:10px;

    margin:25px 0;

    color:#777;

}



.divider::before,

.divider::after {

    content:"";

    height:1px;

    background:#333;

    flex:1;

}



/* SIGNUP LINK */

.signup-link {

    text-align:center;

    color:#aaa;

}



.signup-link a {

    color:#FFD700;

    text-decoration:none;

    font-weight:bold;

}

.signupModal .password-box {
    position:relative;
}


.signupModal .password-box input {
    padding-right:50px;
}


.signupModal .toggle-password {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#FFD700;

    font-size:18px;

}



/* ======================================
   OTP DESIGN
====================================== */


.otp-box,

.otp-input-box {

    display:flex;

    gap:10px;

}



.otp-box input,

.otp-input-box input {

    flex:1;

}



.otp-btn,

.verify-btn {

    padding:0 18px;

    border:none;

    border-radius:10px;

    background:#FFD700;

    color:#111;

    font-weight:bold;

    cursor:pointer;

}



.otp-btn:hover,

.verify-btn:hover {

    background:#ffae00;

}



/* FEEDBACK MESSAGE */

.admin-login__feedback {

    text-align:center;

    color:#ff5555;

    font-size:14px;

}



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


@media(max-width:850px){


.modal-content {

    width:95%;

    min-height:auto;

}



.login-left {

    display:none;

}



.login-right {

    width:55%;

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:stretch;

    color:white;

}



.login-right h2 {

    font-size:26px;

}



.otp-box,

.otp-input-box {

    flex-direction:column;

}



.otp-btn,

.verify-btn {

    height:45px;

}


}