/* 
 * Mobile Zoom Fix
 * Prevents automatic zoom when focusing on input fields on mobile devices
 * PayNacion - Mobile User Experience Enhancement
 */

/* Prevent zoom on mobile input focus */
@media screen and (max-width: 768px) {
    /* All input types that can cause zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        /* Force 16px font size to prevent iOS zoom */
        font-size: 16px !important;
        
        /* Prevent any scaling transformations */
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        
        /* Disable transitions that might interfere */
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
    }
    
    /* Ensure focus states don't trigger zoom */
    input:focus,
    select:focus,
    textarea:focus {
        font-size: 16px !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        
        /* Maintain visual focus indicators */
        outline: none;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
        border-color: #2563EB !important;
    }
    
    /* Special handling for phone inputs with country selectors */
    .phone-input-group input,
    .iti__tel-input {
        font-size: 16px !important;
        padding-left: 95px !important; /* Adjust for country selector */
    }
    
    /* Ensure country selector doesn't interfere */
    .iti__country-list {
        font-size: 14px !important; /* Smaller font for dropdown is OK */
    }
    
    /* Custom form controls */
    .form-control,
    .form-select,
    .custom-input {
        font-size: 16px !important;
    }
    
    /* Bootstrap form controls */
    .form-control:focus,
    .form-select:focus {
        font-size: 16px !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
    }
}

/* Additional mobile-specific improvements */
@media screen and (max-width: 480px) {
    /* Smaller screens may need slightly different handling */
    input, select, textarea {
        font-size: 16px !important;
        min-height: 44px; /* Ensure touch targets are large enough */
    }
}

/* Prevent zoom on double-tap for form elements */
@media screen and (max-width: 768px) {
    input, select, textarea, button {
        touch-action: manipulation !important;
    }
}