/* Form inputs & contact form */

input {
    border-radius: 4px;
}

input[type=submit],
input[type=reset] {
    border-radius: 6px;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

input[type=submit]:hover,
input[type=reset]:hover {
    background: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
}

textarea {
    border-radius: 4px;
}

/* Contact form */
.contact-container {
    & input[type=text], & select, & textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        box-sizing: border-box;
        resize: vertical;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    & input[type=text]:focus, & select:focus, & textarea:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(74, 124, 138, 0.15);
        outline: none;
    }

    & label {
        padding: 12px 12px 12px 0;
        display: inline-block;
    }

    & button {
        background-color: #d7000f;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 6px;
        width: 20%;
        cursor: pointer;
        float: right;
        margin-top: 10px;
        margin-bottom: 10px;
        transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    & button:hover {
        background-color: #b8000d;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(215, 0, 15, 0.25);
    }

    & .g-recaptcha {
        float: right;
        padding: 20px 10px;
    }

    .container {
        border-radius: 8px;
        background-color: rgba(242, 242, 242, 0.82);
        padding: 20px;
    }

    .col-25 {
        float: left;
        width: 25%;
        margin-top: 6px;
    }

    .col-75 {
        float: left;
        width: 75%;
        margin-top: 6px;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    @media screen and (max-width: 600px) {
        .col-25, .col-75, input[type=submit] {
            width: 100%;
            margin-top: 0;
        }

        & button {
            width: 100%;
        }
    }
}