/**
 * ConlineWeb — Formularios en móvil
 * Evita desfase al escribir: zoom iOS, overflow en grid/flex y teclado virtual.
 * Cargado globalmente al final del footer.
 */

@media (max-width: 767px) {
    /* iOS Safari hace zoom automático si font-size < 16px */
    :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
        select,
        textarea
    ) {
        font-size: 16px !important;
        line-height: 1.4;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }

    /* Contenedores de formulario no deben desbordar */
    :is(
        form,
        fieldset,
        .contact-form,
        .contact-form__group,
        .contact-form__row,
        .contact-form__field,
        .contact-form-panel,
        .cw-hub-form,
        .cw-hub-dialog,
        .eshop-field,
        .eshop-field-row,
        .eshop-summary,
        .eshop-pay-panel,
        .eshop-checkout,
        .wsite-field,
        .gweb-form,
        .gweb-form label,
        .form-group,
        .form-row,
        .form-input,
        .phone-input-group,
        .password-input-group,
        [class*="form-row"],
        [class*="field-row"],
        [class*="form__field"],
        [class*="form__row"]
    ) {
        min-width: 0;
        max-width: 100%;
    }

    /* Inputs ocupan el ancho del contenedor */
    :is(
        .contact-form__field,
        .cw-hub-form label,
        .eshop-field,
        .wsite-field,
        .gweb-form label,
        .form-group,
        .phone-input-group
    ) > :is(input, select, textarea, .form-input) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .phone-input,
    .phone-input-group .form-input {
        flex: 1 1 8rem;
        min-width: 0;
        width: auto;
    }

    /* Filas de teléfono (código + número) */
    :is(
        .cw-hub-phone-row,
        .phone-input-group,
        .phone-row,
        [class*="phone-row"]
    ) {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    :is(
        .cw-hub-phone-row input,
        .phone-input-group input,
        .phone-row input
    ) {
        flex: 1 1 8rem;
        min-width: 0;
        width: auto;
    }

    :is(
        .cw-hub-country,
        .phone-country-select,
        select[class*="phone"],
        select[class*="country"],
        .phone-code-select
    ) {
        flex: 0 1 auto;
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Enfoque: scroll seguro con teclado virtual y sin transforms */
    :is(input, select, textarea):focus {
        scroll-margin-top: 5.5rem;
        scroll-margin-bottom: 8rem;
        transform: none !important;
    }

    /* Demos en viewports scrollables */
    :is(
        .shop-demo-frame__viewport,
        .web-scroll-vp,
        .web-scroll-inner
    ) {
        -webkit-overflow-scrolling: touch;
    }

    .shop-demo-frame[data-device="mobile"] :is(.eshop-field, .eshop-field-row, .eshop-pay-panel) {
        min-width: 0;
        max-width: 100%;
    }

    .wsite--mobile .wsite-field :is(input, textarea) {
        width: 100%;
        max-width: 100%;
    }
}