/* forms.css — input di form: canvas firma, progress-step form, radio/checkbox custom, select custom.
   NB: il blocco .progressbar/.progress-step è sospetto-inutilizzato (vedi docs/audit-css.md). */

/*Canvas Firma*/

.signature-pad {
    width: 100%;
    height: 200px;
}
/*Progress Step Form*/
.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 0 0 4rem;
}

    .progressbar::before, .progress {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 4px;
        width: 100%;
        background-color: #dcdcdc;
    }

.progress {
    background-color: var(--btn-primary-color);
    width: 0%;
    transition: 0.3s;
}

.progress-step {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .progress-step::before {
        counter-increment: step;
        content: counter(step);
        z-index: 0;
    }

    .progress-step::after {
        content: attr(data-title);
        position: absolute;
        top: calc(100% + 0.5rem);
        font-size: 0.85rem;
        color: #666;
        text-align: center;
        width: min-content;
    }

.progress-step-active {
    background-color: var(--btn-primary-color);
    color: #f3f3f3;
    z-index: 1;
    transition: 0.3s;
}

.form-anime {
    transform-origin: top;
    animation: anime-form 0.5s;
}

@keyframes anime-form {
    from {
        transform: scale(1,0);
        opacity: 0;
    }

    to {
        transform: scale(1,1);
        opacity: 1;
    }
}

/*Radio and Check Buttons*/
.form-check-custom-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.165em;
    vertical-align: top;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #d9dee3;
}

    .form-check-custom-input[type=checkbox] {
        border-radius: 0.25em;
    }

    .form-check-custom-input:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.5' fill='%23fff'/%3e%3c/svg%3e") !important;
        background-color: var(--btn-primary-color);
        border-color: var(--btn-primary-color);
        box-shadow: 0 2px 4px 0 rgb(105 108 255 / 40%);
    }

.form-check-custom-input-swith {
    height: 1.2em;
    width: 4.8em !important;
    box-shadow: 0 2px 4px 0 rgb(105 108 255 / 40%);
    border-color: var(--btn-primary-color);
}

    .form-check-custom-input-swith:checked {
        background-color: var(--btn-primary-color);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    }

.form-check-custom-input[type=checkbox]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

.form-check-custom-input[type=checkbox]:indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/%3e%3c/svg%3e") !important;
}

/*Start select*/
.custom-select {
    padding-left: 45px;
    border: 1px solid var(--txt-color);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    color: var(--txt-color);
}

.cont-icon-select {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid var(--txt-color);
    height: 38px;
    width: 38px;
}

    .cont-icon-select i {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        color: var(--txt-color);
    }

@media (min-width: 1400px) {
    .reduce-custom-input {
        width: 330px;
    }
}