/* ===== MODAL Index.PHP ===== */
.login-modal.modal { display:flex; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; justify-content:center; align-items:center; animation:fadeIn 0.3s ease; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }

.login-modal .modal-content { background: rgba(28,28,28,0.85); padding:30px 25px; border-radius:15px; width:90%; max-width:400px; box-shadow:0 15px 35px rgba(0,0,0,0.8); position:relative; transform:scale(0.9); animation:zoomIn 0.3s forwards; color:#f0f0f0; text-align:center; backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.1); }

.login-modal .modal-logo {
    display: block;
    margin: 25px auto 15px;
    max-width: 180px;
    height: auto;
}

.login-modal .modal-title { font-family: 'Oswald', sans-serif; font-size: 22px; margin-bottom:5px; color:#C68946; text-shadow:0 2px 4px rgba(0,0,0,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.login-modal .modal-subtitle { font-family: 'Roboto', sans-serif; font-size:16px; margin-bottom:20px; color:#f0f0f0; text-shadow:0 1px 2px rgba(0,0,0,0.5); }

.login-modal .input-icon { position:relative; margin-bottom:15px; }

.login-modal .input-icon i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#C68946; z-index:2; }

.login-modal .input-icon input { width:100%; padding:12px 15px 12px 40px; border:none; border-radius:8px; background-color:rgba(50,50,50,0.7); color:#fff; backdrop-filter:blur(5px); }

.login-modal .modal-content button { width:100%; padding:12px; font-size:16px; border:none; border-radius:8px; background-color:#007bff; color:white; cursor:pointer; margin-top:10px; box-shadow:0 5px 15px rgba(0,0,0,0.3); }

.login-modal .modal-content button:hover { background-color:#0056b3; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,0.4); }

.login-modal .modal-links a { font-size:13px; text-decoration:underline; margin-top:5px; display:inline-block; color:white !important; }

.login-modal .modal-links a:hover { color:white !important; }

.login-modal .close { position: absolute; top: 5px; right: 15px; font-size: 28px; color: #C68946; cursor:pointer; transition: color 0.2s ease, transform 0.2s ease; }

.login-modal .close:hover { color:#ff4d4d; transform:rotate(90deg); }

@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes zoomIn { from {transform: scale(0.9);} to {transform: scale(1);} }

@media (max-width: 480px){
    .login-modal .modal-content { width: 95%; padding:20px; }
    .login-modal .modal-logo { width: 120px; margin-top: 20px; }
    .login-modal .modal-title { font-size:18px; }
    .login-modal .modal-subtitle { font-size:14px; }
}