/* ===========================
   AUTH SECTION
=========================== */

.auth-section{
    min-height:650px;

    padding:70px 5%;

    background:linear-gradient(
        135deg,
        #eef5ff,
        #ffffff
    );

    display:flex;

    align-items:center;

    justify-content:center;
}


/* ===========================
   AUTH CARD
=========================== */

.auth-card{
    width:100%;

    max-width:430px;

    background:#ffffff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    text-align:center;
}


/* ===========================
   AUTH ICON
=========================== */

.auth-icon{
    width:70px;

    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#eef5ff;

    color:#0A2A66;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;
}


.auth-card h1{
    margin:0 0 8px;

    color:#0A2A66;

    font-size:30px;
}


.auth-subtitle{
    color:#777;

    font-size:14px;

    line-height:1.6;

    margin-bottom:28px;
}


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

.auth-group{
    text-align:left;

    margin-bottom:20px;
}

.auth-group label{
    display:block;

    color:#333;

    font-size:14px;

    font-weight:600;

    margin-bottom:7px;
}


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

.input-box{
    display:flex;

    align-items:center;

    border:1px solid #dce2ea;

    border-radius:9px;

    padding:0 13px;

    background:#fff;

    transition:.25s;
}

.input-box i{
    color:#777;

    font-size:15px;

    width:22px;
}

.input-box input{
    width:100%;

    border:none;

    outline:none;

    padding:13px 8px;

    font-family:inherit;

    font-size:14px;

    color:#333;

    background:transparent;
}

.input-box:focus-within{
    border-color:#0A2A66;

    box-shadow:
        0 0 0 3px rgba(10,42,102,.08);
}


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

.auth-btn{
    width:100%;

    border:none;

    background:#0A2A66;

    color:#fff;

    padding:14px 20px;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    margin-top:5px;
}

.auth-btn:hover{
    background:#F5A623;

    transform:translateY(-2px);
}

.auth-btn i{
    margin-left:8px;
}


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

.auth-switch{
    margin:25px 0 0;

    color:#777;

    font-size:14px;
}

.auth-switch a{
    color:#0A2A66;

    font-weight:700;

    text-decoration:none;
}

.auth-switch a:hover{
    color:#F5A623;
}


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

@media(max-width:600px){

    .auth-section{
        padding:45px 5%;
    }

    .auth-card{
        padding:30px 20px;
    }

    .auth-card h1{
        font-size:26px;
    }

}

/* ===========================
   AUTH BUTTON - COMPACT
=========================== */

.auth-btn{
    width:100%;
    height:42px;

    border:none;
    border-radius:7px;

    background:#0A2A66;
    color:#fff;

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

    cursor:pointer;

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

    transition:all .2s ease;
}

.auth-btn i{
    font-size:12px;
}

.auth-btn:hover{
    background:#F5A623;
    transform:translateY(-1px);
}
/* ===========================
   AUTH POPUP
=========================== */

.auth-popup{
    position:fixed;

    top:25px;
    right:25px;

    width:320px;

    min-height:62px;

    padding:12px 14px;

    background:#fff;

    border-radius:10px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);

    display:flex;

    align-items:center;

    gap:12px;

    z-index:9999;

    opacity:0;

    transform:translateX(120%);

    transition:
        opacity .3s ease,
        transform .3s ease;

    box-sizing:border-box;
}


.auth-popup.show{
    opacity:1;

    transform:translateX(0);
}


/* ICON */

.popup-icon{
    width:36px;

    height:36px;

    min-width:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e7f8f3;

    color:#009688;

    font-size:15px;
}


/* MESSAGE */

.popup-message{
    flex:1;

    color:#333;

    font-size:13px;

    font-weight:500;

    line-height:1.4;
}


/* CLOSE */

.popup-close{
    border:none;

    background:none;

    color:#999;

    cursor:pointer;

    font-size:13px;

    padding:4px;
}

.popup-close:hover{
    color:#333;
}


/* ERROR */

.auth-popup.error .popup-icon{
    background:#fff0f0;

    color:#e53935;
}


/* MOBILE */

@media(max-width:600px){

    .auth-popup{
        top:15px;

        right:15px;

        left:15px;

        width:auto;
    }

}

/* =========================
   LOGOUT POPUP
========================= */

.logout-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 360px;
    max-width: 90%;

    background: #ffffff;

    padding: 30px;

    border-radius: 18px;

    text-align: center;

    box-shadow: 0 15px 50px rgba(0,0,0,0.25);

    z-index: 99999;
}

.logout-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #eef5ff;

    color: #0A2A66;

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

    font-size: 24px;
}

.logout-popup h3 {
    margin: 10px 0;

    color: #0A2A66;

    font-size: 22px;
}

.logout-popup p {
    color: #666;

    margin-bottom: 25px;

    font-size: 15px;
}

.logout-actions {
    display: flex;

    justify-content: center;

    gap: 12px;
}

.logout-actions button {
    border: none;

    padding: 10px 22px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;
}

.logout-cancel {
    background: #eeeeee;

    color: #333;
}

.logout-confirm {
    background: #0A2A66;

    color: white;
}

.logout-confirm:hover {
    background: #F5A623;
}

.logout-cancel:hover {
    background: #dddddd;
}

/* =========================
   LOGOUT POPUP - CENTER
========================= */

.logout-popup {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 380px !important;
    max-width: 90% !important;

    background: #ffffff !important;

    padding: 30px !important;

    border-radius: 18px !important;

    text-align: center !important;

    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25) !important;

    z-index: 999999 !important;

    display: block !important;
}


.logout-popup h3 {
    color: #0A2A66;
    font-size: 22px;
    margin: 12px 0 8px;
}

.logout-popup p {
    color: #666;
    font-size: 15px;
    margin-bottom: 22px;
}

.logout-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.logout-actions button {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.logout-cancel {
    background: #eeeeee;
    color: #333;
}

.logout-confirm {
    background: #0A2A66;
    color: white;
}

.logout-confirm:hover {
    background: #F5A623;
}

/* =========================
   LOGOUT MODAL
========================= */

#logoutOverlay {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background: rgba(0, 0, 0, 0.45) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 999999999 !important;
}

.logout-box {
    width: 360px;

    max-width: 90%;

    background: #ffffff;

    padding: 30px;

    border-radius: 18px;

    text-align: center;

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

.logout-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #eef5ff;

    color: #0A2A66;

    display: flex;

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

    font-size: 24px;
}

.logout-box h3 {
    margin: 10px 0;

    color: #0A2A66;

    font-size: 21px;
}

.logout-box p {
    color: #666;

    margin: 0 0 22px;

    font-size: 15px;
}

.logout-actions {
    display: flex;

    justify-content: center;

    gap: 12px;
}

.logout-actions button {
    border: none;

    padding: 10px 22px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;
}

#logoutCancel {
    background: #eeeeee;
    color: #333;
}

#logoutConfirm {
    background: #0A2A66;
    color: white;
}

#logoutConfirm:hover {
    background: #F5A623;
}

#logoutModal {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background: rgba(0, 0, 0, 0.45) !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 999999 !important;
}

.logout-modal-box {
    width: 360px;
    max-width: 90%;

    background: #fff;

    padding: 30px;

    border-radius: 18px;

    text-align: center;

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

.logout-modal-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #eef5ff;

    color: #0A2A66;

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

    font-size: 24px;
}

.logout-modal-box h3 {
    color: #0A2A66;
    margin: 10px 0;
}

.logout-modal-box p {
    color: #666;
    margin-bottom: 22px;
}

.logout-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.logout-modal-buttons button {
    border: none;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

#cancelLogout {
    background: #eee;
    color: #333;
}

#confirmLogout {
    background: #0A2A66;
    color: white;
}

#confirmLogout:hover {
    background: #F5A623;
}