/** ----------------------------------------------------------
 *
 * This stylesheet includes both generic form styles and
 *    additional form styles for the User Defined Form Module.
 *
 ** ------------------------------------------------------- */


/* GENERIC FORMS
----------------------------------------------- */

:root {
    --white: #F6F6F6;
    --black: #121212;
    --primary-color: #F8BC1C;
}


form {}

form .form-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


form #state,
form #consent {
    grid-column: 1 / -1;
}

form label {
    display: none;
}

form input,
form textarea,
form .textajaxuniquetext,
form select {
    width: 100%;
    background-color: var(--white);
    border: none;
    min-height: 50px;
    padding: 0 15px;
    font-size: 16px;
    color: var(--black);
    box-shadow: none;
    border-radius: none;
}

form select {
    width: 100%;
    background-color: var(--white);
    border: none;
    min-height: 50px;
    padding: 0 15px;
    font-size: 16px;
    color: var(--black);
    appearance: none;          
    -webkit-appearance: none;  
    -moz-appearance: none;     
    box-shadow: none;
    border-radius: 0;

    /* Custom icon */
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 30px top 50%;
    background-size: 25px;
}


form input::placeholder,
form textarea::placeholder,
form .textajaxuniquetext::placeholder {
    color: var(--black);
}

.ie7 form select {
    width: 400px;
}

/* fix for ie7's rendering of max-width property on select input */

form input:focus,
form textarea:focus,
form .textajaxuniquetext:focus,
form select:focus {
    outline: none;
}


textarea {
    resize: none;
}

form #consent .middleColumn {
    display: flex;
    gap: 10px;
    align-items: start;
}

form #consent input.checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: auto;
    position: relative;
    /* top: 6px; */

    opacity: 0;

}

form #consent label {
    display: block;
    position: relative;
    font-size: 16px;
}

form #consent label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: none;
    background-size: contain;
    background-position: center;
    margin-right: 10px;
    position: absolute;
    top: 2px;
    left: -30px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto;
}

form #consent input.checkbox:checked + label::before {
    background-image: url('../images/icon-check.svg');
}

form .action {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    font-weight: 700;
    font-size: 16px;
    width: max-content;
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    padding: 0 30px;
    border-radius: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: color 0.4s, border-color 0.4s;
    z-index: 1;
    margin-top: 50px;
}
form .action:hover {
    background-color: var(--white);
    color: var(--black);
}

form .error.message {
    color: red;
}



@media (max-width: 992px) {
    form .action {
        margin-top: 20px;
    }
}

@media (max-width: 550px) {
    form .form-step {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}