/* iOS Login Button Fix */

/* Fix for iOS Safari and Chrome */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    #loginModal button[type="submit"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        min-height: 44px !important;
        position: relative !important;
        z-index: 1 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Remove hover effects on iOS */
    #loginModal button[type="submit"]:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Add active state for iOS */
    #loginModal button[type="submit"]:active {
        opacity: 0.8;
        transform: scale(0.98) !important;
    }
    
    /* Ensure form elements work on iOS */
    #loginForm {
        position: relative;
        z-index: 1;
    }
    
    #loginForm input {
        -webkit-appearance: none !important;
        appearance: none !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        touch-action: manipulation !important;
    }
    
    /* Fix for iOS modal */
    #loginModal {
        -webkit-overflow-scrolling: touch;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow: auto !important;
    }
    
    .login-container {
        position: relative !important;
        z-index: 10001 !important;
        touch-action: auto !important;
    }
}

/* General mobile fixes for login button */
@media (max-width: 768px) {
    #loginModal button[type="submit"] {
        /* Remove inline styles that might conflict */
        transform: none !important;
        box-shadow: none !important;
        
        /* Ensure button is clickable */
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        
        /* Better touch target */
        padding: 16px 24px !important;
        min-height: 50px !important;
        font-size: 18px !important;
        
        /* Visual feedback for touch */
        transition: opacity 0.2s ease !important;
    }
    
    #loginModal button[type="submit"]:active {
        opacity: 0.7 !important;
    }
    
    /* Ensure the form is not blocked */
    #loginForm {
        pointer-events: auto !important;
    }
    
    /* Fix input fields on mobile */
    #loginForm input[type="text"],
    #loginForm input[type="password"] {
        font-size: 16px !important;
        padding: 14px !important;
        min-height: 44px !important;
    }
}

/* Override any conflicting mobile improvements */
@media (max-width: 768px) {
    #loginModal button[type="submit"],
    #loginModal .btn,
    #loginForm button {
        /* Reset any transforms or effects */
        transform: none !important;
        box-shadow: none !important;
        
        /* Ensure clickability */
        pointer-events: auto !important;
        cursor: pointer !important;
        
        /* Remove hover effects on mobile */
        &:hover {
            transform: none !important;
            box-shadow: none !important;
        }
    }
}

/* Specific fix for login modal visibility */
#loginModal.show,
#loginModal:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Debug - make button more visible */
#loginModal button[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: 2px solid #667eea !important;
}