/* SECTION - Modulo contatti */
:root{
    --errorColor: #df1010fa;
}

.form_total_container {
    width: 100%;
    border: 1px solid var(--grigiochiaro);
    padding: 2rem;
    background-color: var(--white);
    border-radius: 0.7rem;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
        rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
        rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.form_total_container .form_header {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--grigiochiaro);
    /* max-width: 50%; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.form_container {
    padding: 2rem;
    /* border: 1px solid var(--grigioscuro); */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-radius: 1.5rem;
}

p.req_fields_alert {
    text-align: center;
    font-size: .8rem;
    opacity: .75;
    -webkit-margin-before: 1rem;
    margin-block-start: 1rem;
    line-height: 1.5;
    max-width: 80%;
    margin-inline: auto;
}

.form_row .input_wrapper input.has_error,
.form_row .input_wrapper textarea.has_error {
    border-color: var(--errorColor);
}

.form_row .input_wrapper.is_checkbox label.has_error :where(span, a) {
    color: var(--errorColor);
}

.form_header {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.form_header h2 {
    font-size: 2.15rem;
    color: var(--maincolor);
    text-align: center;
    line-height: 1.2;
}

.flex_col {
    flex-direction: column;
}

.fake_check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid var(--grigioscuro);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-margin-end: 0.3rem;
    margin-inline-end: 0.3rem;
    border-radius: 50%;
}

.fake_check::after {
    content: '';
    width: 16px;
    height: 16px;
    background-color: var(--grigioscuro);
    scale: 0;
    border-radius: 50%;
    transition: .2s;
}

.form_row .input_wrapper.is_checkbox input[type="checkbox"]:checked~.fake_check::after {
    scale: 1;
}

.form_row {
    /* margin-bottom: 1rem; */
    width: 100%;
}

.form_row.splitted {
    width: 100%;
    display: flex;
    gap: 1rem;
}

.form_row.splitted .form_col {
    width: 100%;
}

.form_row .input_wrapper {
    width: 100%;
    height: 45px;
}

.form_row .input_wrapper.is_textarea {
    height: 130px;
}

.form_row .input_wrapper input,
.form_row .input_wrapper textarea {
    width: 100%;
    height: 100%;
    border: none;
    border-bottom: 1px solid var(--grigioscuro);
    padding: 0;
    font-size: 1rem;
    outline: none;
    transition: .2s;
    border-radius: 0 !important;
}

.form_row .input_wrapper input:focus,
.form_row .input_wrapper textarea:focus {
    border-color: var(--maincolor);
}

.form_wrapper {
    /* width: 75%; */
    margin-inline: auto;
}

.form_row .input_wrapper textarea {
    /* padding: 1rem; */
    padding-bottom: 1rem;
    line-height: 1.5;
    resize: none;
    font-family: var(--font-family);
}

.form_row .input_wrapper.is_checkbox label {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.form_row .input_wrapper.is_checkbox {
    height: auto;
}

.form_row .input_wrapper.is_checkbox input[type="checkbox"] {
    height: initial;
    width: initial;
    display: none;
}

.form_row .input_wrapper.is_checkbox input[type="checkbox"] {
    height: initial;
    width: initial;
    display: none;
}

.form_row .input_wrapper.is_submit {
    margin-bottom: 0;
    height: initial;
}

.form_row .input_wrapper.is_checkbox label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.form_row .input_wrapper.custom_selection .single_radio_wrapper {
    height: 100%;
}

.form_row .input_wrapper input,
.form_row .input_wrapper textarea {
    background-color: transparent;
}

/* .fake_check {
    width: 40px;
    height: 24px;
    border-radius: 40px;
    background-color: var(--grigiomedio);
    border: 1px solid var(--grigio);
    position: relative;
    transition: .3s;
    flex-shrink: 0;
}

.fake_check::after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 3px;
    translate: 0 -50%;
    background-color: var(--grigiochiaro);
    transition: .3s;
    border-radius: 50%;
} */

/* .form_row .input_wrapper.is_checkbox input[type="checkbox"]:checked~.fake_check {
    background-color: var(--darkgreen);
}

.form_row .input_wrapper.is_checkbox input[type="checkbox"]:checked~.fake_check::after {
    background-color: var(--white);
    left: calc(100% - 3px - 16px);
} */

.form_row .input_wrapper.is_checkbox label span {
    font-size: .9rem;
}

.form_row .input_wrapper.is_checkbox label a {
    text-decoration: underline;
    color: var(--maincolor);
    transition: .3s;
}

.form_row .input_wrapper.is_checkbox label a:hover {
    color: var(--secondarycolor);
}

.form_header p {
    text-align: center;
    line-height: 1.5;
}

.form_row .input_wrapper.is_submit button {
    /* width: 50%; */
    padding: 1.2rem 2.6rem;
    background-color: var(--accentcolor);
    border-radius: 0;
    font-size: 1rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: .3s;
    border-radius: 13px;
    /* -webkit-margin-start: auto; */
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    display: block;
}

.form_row .input_wrapper.is_submit button:hover {
    background-color: var(--secondarycolor);
}

.grecaptcha-badge {
    display: none !important;
}

.is_file_upload input[type="file"] {
    display: none;
}

.input_wrapper.is_file_upload {
    display: flex;
    align-items: center;
    gap: 20px;
}

.input_wrapper.is_file_upload,
.input_wrapper.is_submit {
    height: auto;
}

.input_wrapper.is_file_upload label {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--secondarycolor);
    padding: 10px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border-radius: .5rem;
    cursor: pointer;
    transition: .2s;
}

.input_wrapper.is_file_upload label:hover {
    background-color: var(--secondarycolor);
}

.input_wrapper.is_file_upload label :where(span, ion-icon) {
    transition: .2s;
}

span.carica_file_text {
    font-size: .85rem;
    pointer-events: none;
}

.input_wrapper.is_file_upload label button {
    width: 25px;
    pointer-events: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.input_wrapper.is_file_upload label:hover :where(span, ion-icon) {
    color: var(--white);
}

.foto_preview {
    display: flex;
    align-items: center;
    gap: 4px;
}

.single_image_upload {
    width: 50px;
    aspect-ratio: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.single_image_upload button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    font-size: 1.6rem;
    cursor: pointer;
    opacity: 0;
    transition: .2s;
}

.single_image_upload button:hover {
    opacity: 1;
}

.single_image_upload button ion-icon {
    color: var(--white);
}

.form_row .input_wrapper input,
.form_row .input_wrapper textarea {
    background-color: transparent;
}


@media screen and (max-width: 900px) {

    .form_wrapper {
        width: 100%;
    }

    .form_row .input_wrapper.is_checkbox label {
        width: 100%;
    }

    .form_row .input_wrapper.is_checkbox label span {
        font-size: .8rem;
        line-height: 140%;
    }

    .form_row.splitted {
        display: flex;
        flex-direction: column;
    }

    .form_row .input_wrapper input,
    .form_row .input_wrapper textarea {
        font-size: .9rem;
    }

    .form_row .input_wrapper.is_submit button {
        width: 100%;
    }

    .input_wrapper.is_file_upload {
        display: block;
    }

    .input_wrapper.is_file_upload label {
        width: 100%;
        justify-content: center;
    }

    .foto_preview {
        flex-wrap: wrap;
        transition: .3s;
        /* justify-content: space-between; */
        /* margin-top: 25px; */
    }

    .foto_preview.opened {
        padding-top: 25px;
    }
}


/* !SECTION */