/* MODAL OVERRIDES - MODERN PREMIUM UI */
.modal {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    animation: fadeInModal 0.25s forwards ease-out !important;
}
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-metal) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: var(--panel-shadow) !important;
    animation: scaleInModal 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: var(--text-main);
}
@keyframes scaleInModal {
    from { transform: scale(0.95) translateY(10px); }
    to { transform: scale(1) translateY(0); }
}

[data-theme="neon"] .modal-content {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 242, 255, 0.15) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-metal) !important;
    padding-bottom: 20px !important;
    margin-bottom: 24px !important;
}

.modal-header h3, .modal-header h2 {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
}

.close-btn-svg {
    background: var(--bg-accent);
    border: 1px solid var(--border-metal);
    color: var(--text-dim);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.close-btn-svg:hover {
    background: var(--bg-panel);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: rotate(90deg) scale(1.1);
}

/* Light Theme Modal Specific Overrides can be removed as we now use generic variables */
[data-theme="light-ios"] .modal {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* --- MOBILE NATIVE APP ADAPTATION (ACTION SHEET) --- */
@media (max-width: 768px) {
    .modal {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 28px 28px 0 0 !important;
        padding: 30px 24px 80px !important; /* Extra bottom padding for iOS home bar safety */
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        animation: slideUpModal 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    /* SPECIFIC FIX: Keep the login screen exactly in the center */
    #auth-overlay.modal {
        align-items: center !important;
        padding: 20px !important;
    }
    #auth-overlay .modal-content {
        border-radius: 20px !important;
        margin: auto !important;
        max-width: 400px !important;
        width: 100% !important;
        padding: 30px 24px 30px !important;
        border: 1px solid var(--border-metal) !important;
        animation: scaleInModal 0.3s forwards cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    @keyframes slideUpModal {
        from { transform: translateY(100%); opacity: 0.5; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    /* Make inputs slightly larger for easier tapping on mobile */
    .modal-content input[type="text"],
    .modal-content input[type="password"],
    .modal-content input[type="email"] {
        height: 52px !important;
        font-size: 16px !important; /* Prevents iOS auto-zoom */
    }
}

/* --- OVERSIZED PREMIUM CYBER BUTTON FOR AUTH --- */
.auth-main-btn {
    width: 100% !important;
    height: 56px !important;            /* Taller for fat fingers */
    border-radius: 28px !important;     /* Pill shape / highly rounded */
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    background: linear-gradient(90deg, rgba(0,242,255,0.1) 0%, rgba(0,242,255,0.3) 50%, rgba(0,242,255,0.1) 100%) !important;
    border: 2px solid var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4), inset 0 0 10px rgba(0, 242, 255, 0.2) !important;
    color: #fff !important;
    text-shadow: 0 0 5px var(--accent-cyan);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
}

.auth-main-btn:hover, .auth-main-btn:active {
    background: var(--accent-cyan) !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.02) !important;
}