/* 
 * Responsive form styles for the website
 * Handles form elements and inputs for better mobile experience
 */

/* Base responsive form styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Make buttons more touch-friendly */
input[type="submit"],
input[type="button"],
button,
.button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 15px;
}

/* Medium screens / tablets (up to 992px) */
@media screen and (max-width: 992px) {

    /* Adjust form layouts */
    form {
        max-width: 100%;
    }

    /* Adjust form fields */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        padding: 10px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    /* Adjust form buttons */
    input[type="submit"],
    input[type="button"],
    button,
    .button {
        width: auto;
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* Small screens / mobile (up to 768px) */
@media screen and (max-width: 768px) {

    /* Stack form elements */
    form label {
        display: block;
        margin-bottom: 5px;
    }

    /* Make inputs full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        width: 100%;
        margin-bottom: 15px;
    }

    /* Adjust checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: auto;
        margin-right: 10px;
    }

    /* Adjust form buttons */
    input[type="submit"],
    input[type="button"],
    button,
    .button {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Adjust miss button */
    .miss-button a.button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Extra small screens (up to 480px) */
@media screen and (max-width: 480px) {

    /* Further adjustments for very small screens */
    input[type="submit"],
    input[type="button"],
    button,
    .button {
        padding: 15px 20px;
        font-size: 18px;
    }

    /* Simplify form layouts */
    fieldset {
        padding: 10px;
        margin-bottom: 15px;
    }

    /* Adjust form legends */
    legend {
        padding: 0 10px;
        font-size: 16px;
    }
}