/* ---------- Safari/iOS sanity ---------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS Safari zooms inputs if font-size < 16px (makes everything look huge) */
input, select, textarea,
.k-input-inner {
    font-size: 16px !important;
}

/* ---------- Kendo Captcha responsiveness ---------- */
.k-captcha,
.k-captcha * {
    box-sizing: border-box;
}

.k-captcha {
    max-width: 100%;
}

    /* The captcha "row" should wrap on small screens instead of overflowing */
    .k-captcha .k-captcha-container,
    .k-captcha .k-captcha-wrap,
    .k-captcha .k-form-field-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        max-width: 100%;
    }

    /* Keep the image from overflowing; scale naturally */
    .k-captcha img,
    .k-captcha .k-captcha-image {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Let the input take remaining space and not force overflow */
    .k-captcha .k-textbox,
    .k-captcha .k-input,
    .k-captcha .k-textbox .k-input-inner,
    .k-captcha input[type="text"] {
        width: 100% !important;
        max-width: 100%;
        min-width: 160px;
    }

    /* Buttons/icons sometimes render huge in Safari if SVG isn't constrained */
    .k-captcha .k-button .k-svg-icon svg,
    .k-captcha .k-button svg {
        width: 1em !important;
        height: 1em !important;
    }

/* ---------- Extra tightening for phones ---------- */
@media (max-width: 480px) {
    .k-captcha .k-captcha-container,
    .k-captcha .k-captcha-wrap,
    .k-captcha .k-form-field-wrap {
        gap: 8px;
    }

    /* If the captcha image still feels tall, cap it */
    .k-captcha img,
    .k-captcha .k-captcha-image {
        max-height: 60px; /* adjust to taste */
        object-fit: contain;
    }
}