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

body{
    background:url('/images/bg.jpg') no-repeat center/cover;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* --- CARD --- */
.card{
    background:white;
    width:100%;
    max-width:400px;
    padding:30px;
    border-radius:30px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.3);

    animation: fadeIn 0.6s ease-out;
}

.card img{
    width:120px;
    animation: scaleIn 0.6s ease-out;
}
h2{
    font-size:18px;
    font-weight:900;
    margin:15px 0 25px;
}

input{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:2px solid #ccc;
    border-radius:25px;
    font-size:15px;
    transition:0.25s;
}

input:focus{
    border-color:#8C1A1A;
    box-shadow:0 0 5px rgba(140,26,26,0.4);
}

button{
    width:100%;
    padding:12px;
    background:#8C1A1A;
    color:white;
    border:none;
    border-radius:25px;
    font-size:16px;
    margin-top:10px;
    cursor:pointer;
    transition:0.2s;
}

button:hover{
    transform:scale(1.03);
    background:#A31E1E;
}

/* --- LINKS --- */
a{
    color:black;
    text-decoration:underline;
    display:block;
    margin:8px 0;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes scaleIn{
    from{transform:scale(0.7);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

/* ==========================================
        MODAL & OVERLAY
========================================== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);  /* FIXED */
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
}
.show-overlay{
    opacity:1;
    pointer-events:auto;
}

.blur-bg{
    backdrop-filter:blur(6px);
}

/* --- MAIN MODAL --- */
.modal{
    position:fixed;
    top:50%;
    left:50%;
    width:90%;
    max-width:350px;
    background:white;
    border-radius:20px;
    padding:20px;
    text-align:center;

    opacity:0;
    transform:translate(-50%,-50%) scale(0.75);
    transition:0.3s ease;
}
.show-modal{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

/* --- SLIDE-UP --- */
.slide-modal{
    bottom:-100%;
    top:auto;
    left:50%;
    transform:translateX(-50%);
    border-radius:20px 20px 0 0;
    width:100%;
    max-width:400px;
    background:white;
    position:fixed;
    padding:20px;
    transition:0.35s ease-out;
}
.show-slide{
    bottom:0;
}

/* --- LOADING SPINNER --- */
.spinner{
    width:50px;
    height:50px;
    border:6px solid #ddd;
    border-top-color:#8C1A1A;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:20px auto;
}
@keyframes spin{
    to{transform:rotate(360deg);}
}

/* ==========================================
        RESPONSIVE IMPROVEMENTS
========================================== */
@media (max-width: 420px){
    .card{
        padding:20px;
        border-radius:25px;
    }
    .card img{
        width:90px;
    }
    h2{
        font-size:16px;
        margin-bottom:20px;
    }
    input, button{
        font-size:14px;
        padding:10px;
    }
}

/* ==========================================
        FIXED Z-INDEX STACKING (IMPORTANT)
========================================== */

/* ==========================================
        FIXED Z-INDEX STACKING (FINAL)
========================================== */

/* Fade Alert Modal */
#overlay { z-index: 1000; }
#fadeModal { z-index: 1002; }

/* Slide Modal */
#slideOverlay { z-index: 900; }
#slideModal { z-index: 902; }

/* Blur Modal */
#blurOverlay { z-index: 800; }
#blurModal { z-index: 802; }

/* Loading Spinner */
#loadingOverlay { z-index: 1100; }
#loadingModal  { z-index: 1102; }