/**
 * iOS Safari Mobile Fixes for Login/Signup Forms
 */

/* Fix iOS Safari input styling and zoom issues */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    
    input[type="text"],
    input[type="email"], 
    input[type="password"],
    input[type="tel"] {
        font-size: 16px !important; /* Prevent zoom on focus */
        -webkit-appearance: none;
        -webkit-border-radius: 0;
        border-radius: 5px;
        background-color: #f0f5f7;
        padding: 15px 25px;
        border: 1px solid #ddd;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix button tap highlighting */
    button,
    .theme-btn,
    .btn {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
    }
    
    /* Fix form container */
    .bravo-form-login,
    .bravo-form-register {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix checkbox and radio button styling */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ddd;
        border-radius: 3px;
        background-color: white;
        position: relative;
        cursor: pointer;
    }
    
    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    input[type="checkbox"]:checked::after {
        content: '✓';
        position: absolute;
        top: -2px;
        left: 2px;
        color: white;
        font-size: 14px;
        font-weight: bold;
    }
    
    input[type="radio"] {
        border-radius: 50%;
    }
    
    input[type="radio"]:checked::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: white;
    }
}

/* Fix iOS Safari viewport issues */
@media screen and (max-width: 768px) {
    /* Prevent horizontal scroll on mobile */
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix form width on mobile */
    .login-form,
    .bravo-form-login,
    .bravo-form-register {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }
    
    /* Fix button width on mobile */
    .theme-btn {
        width: 100%;
        min-height: 48px; /* iOS minimum touch target */
        font-size: 16px;
        padding: 12px 20px;
        box-sizing: border-box;
    }
    
    /* Fix input spacing on mobile */
    .form-group {
        margin-bottom: 20px;
    }
    
    /* Fix password toggle button */
    .toggle-password {
        min-width: 44px; /* iOS minimum touch target */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Fix iOS Safari specific input focus issues */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Fix iOS Safari form submission loading state */
.form-submitting {
    pointer-events: none;
    opacity: 0.7;
}

.form-submitting button {
    cursor: not-allowed;
}

/* Fix iOS Safari phone input styling */
.iti {
    width: 100% !important;
}

.iti__flag-container {
    background-color: transparent;
}

.iti__selected-flag {
    background-color: transparent;
    border: none;
    padding: 0 10px;
}

/* Fix iOS Safari social login buttons */
.social-btn-two {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 10px;
}

/* Fix iOS Safari modal and popup issues */
.modal,
.popup {
    -webkit-overflow-scrolling: touch;
}

/* Fix iOS Safari sticky elements */
.sticky {
    position: -webkit-sticky;
    position: sticky;
}