/**
 * Mobile Form Optimizations
 * Touch-friendly inputs, better keyboard handling, and mobile-optimized forms
 */

@media (max-width: 768px) {

    /* ==========================================================================
       INPUT FIELDS
       ========================================================================== */

    /* All inputs - touch-friendly size */
    input,
    textarea,
    select {
        min-height: 48px !important;
        font-size: 16px !important;
        /* Prevents auto-zoom on iOS */
        padding: 12px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Text inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"] {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* Textareas */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    /* Select dropdowns */
    select {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* ==========================================================================
       FORM GROUPS
       ========================================================================== */

    /* Form groups - better spacing */
    .form-group,
    .input-group {
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    /* Labels - larger and clearer */
    label {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* ==========================================================================
       BUTTONS IN FORMS
       ========================================================================== */

    /* Form buttons - full width */
    form button,
    form .btn,
    .form-actions button,
    .form-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
        margin-bottom: 8px !important;
        font-size: 1rem !important;
    }

    /* Button groups - stack vertically */
    .form-actions,
    .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* ==========================================================================
       CHECKBOXES AND RADIOS
       ========================================================================== */

    /* Checkbox and radio - larger touch targets */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
        margin-right: 12px !important;
    }

    /* Checkbox/Radio labels */
    .checkbox-label,
    .radio-label {
        display: flex !important;
        align-items: center !important;
        padding: 12px !important;
        min-height: 48px !important;
    }

    /* ==========================================================================
       FORM VALIDATION
       ========================================================================== */

    /* Error messages - visible */
    .error-message,
    .form-error {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
        margin-top: 4px !important;
    }

    /* Success messages */
    .success-message,
    .form-success {
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
        margin-top: 4px !important;
    }

    /* ==========================================================================
       SPECIFIC FORMS
       ========================================================================== */

    /* Login form */
    .login-form {
        max-width: 100% !important;
        padding: 20px !important;
    }

    /* Search forms */
    .search-form {
        width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        min-height: 48px !important;
    }

    /* Filter forms */
    .filter-form {
        width: 100% !important;
        padding: 12px !important;
    }

    /* ==========================================================================
       PREVENT AUTO-ZOOM
       ========================================================================== */

    /* Prevent iOS auto-zoom on focus */
    input:focus,
    textarea:focus,
    select:focus {
        font-size: 16px !important;
    }
}