/* Prevent mobile zoom on field focus */
/* iOS Safari and some Android browsers zoom in when input fields with font-size < 16px are focused */

/* Target all input types and textarea */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    font-size: 16px !important;
}

/* Apply to mobile devices only using media query */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Alternative approach: Use viewport meta tag prevention via CSS */
/* This ensures inputs don't trigger zoom even if viewport settings allow it */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}