/* Gestion des styles liés aux erreurs custom + React MUI */
:root {
    --error-color: #d9534f;
}

.elementor-widget-form {
    .elementor-field-type-step {
        .e-form__buttons__wrapper__button-next, .e-form__buttons__wrapper__button-previous {
            border: 2px solid var(--e-global-color-primary);
            &:hover {
                border: 2px solid var(--e-global-color-primary);
                &::before {
                    z-index: -1;
                }
            }
        }
    }
    .elementor-field-group {
        position: relative;
        .elementor-field-type-upload {
            &>label {
                background-color: var(--e-global-color-primary);
                color: white;
                padding: 10px 20px!important;
                border-radius: 4px;
                margin-right: 15px;
            }
            input {
                height: 0;
                min-height: 0;
            }
        }
        .elementor-error {
            border-color: var(--error-color) !important;
            border-width: 2px !important;
        }
        .elementor-label-error {
            color: var(--error-color) !important;
        }

        /* Texte informatif (temporary-text) hors radio/checkbox/upload/acceptance */
        &:not(.elementor-field-type-radio):not(.elementor-field-type-checkbox):not(.elementor-field-type-upload):not(.elementor-field-type-acceptance) label.temporary-text {
            font-weight: 400 !important;
            font-size: 14px !important;
            transform: none !important;
            background-color: transparent !important;
            left: 0 !important;
            padding-left: 0;
        }
    }

    /* Champ code SMS */
    .elementor-field-group-code_sms {
        input {
            border-color: #d9534f !important;

            &:not(.show-code-sms) {
                display: none !important;
            }
        }
        .elementor-message {
            width: 100%;
            position: absolute;
            top: 100%;
            margin: 3px 0 0;
            line-height: 1em;
            font-size: 12px;
            opacity: 1;
        }
        &.elementor-error ~ .e-form__buttons {
            margin-top: 20px !important;
        }
    }

    /* Messages d'erreur custom : en absolu, masqués par défaut */
    span.elementor-message-danger {
        position: absolute;
        top: 100%;
        margin: 3px 0 0;
        line-height: 1em;
        font-size: 12px;
        opacity: 0;
        &::before {
            content: "";
        }
    }
    .elementor-label-error ~ .elementor-message-danger, .elementor-field-type-upload .elementor-message-danger {
        opacity: 1;
    }

    form.elementor-form {
        /* Spinner de chargement */
        &.elementor-form-waiting {
            &::after {
                top: 50%;
                left: 50%;
                z-index: 12;
                overflow: hidden;
                position: absolute;
                pointer-events: none;
                width: 100px;
                height: 100px;
                margin-top: -50px;
                margin-left: -50px;
                border-radius: 50%;
                border-width: 5px;
                border-style: solid;
                border-color: #ccc transparent;
                text-align: center;
                -webkit-animation: rotate 2s linear infinite;
                -moz-animation: rotate 2s linear infinite;
                -o-animation: rotate 2s linear infinite;
                animation: rotate 2s linear infinite;
                content: "";
            }
            .elementor-form-fields-wrapper {
                opacity: 0.5;
            }
            .modale_body {
                &::after {
                    top: 50%;
                    left: 50%;
                    z-index: 12;
                    overflow: hidden;
                    position: absolute;
                    pointer-events: none;
                    width: 100px;
                    height: 100px;
                    margin-top: -50px;
                    margin-left: -50px;
                    border-radius: 50%;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #ccc transparent;
                    text-align: center;
                    -webkit-animation: rotate 2s linear infinite;
                    -moz-animation: rotate 2s linear infinite;
                    -o-animation: rotate 2s linear infinite;
                    animation: rotate 2s linear infinite;
                    content: "";
                }
                .modale-content {
                    opacity: 0.5;
                }
            }
        }

        .elementor-field-label.temporary-text {
            display: flex;
            align-self: flex-end;

            &::after {
                content: "";
            }
        }
    }

    /* Modale SMS : visibilité conditionnelle */
    .modale.modale_sms {
        &.show-if-modale-active:not(.modale-active) {
            display: none;
        }
        &:not(.reset-phone) .show-if-reset-phone {
            display: none;
        }
        &.reset-phone .hide-if-reset-phone {
            display: none;
        }
    }

    .elementor-field-type-html.after-button {
        order: 10;
    }
    .custom-suffix {
        position: absolute;
        right: 15px;
        font-size: 1.3em;
        font-weight: bolder;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        background-color: white;
    }
    input:has(+ .custom-suffix) {
        padding-right: 40px;
    }

    /* ---- Variante avec modale SMS inline ---- */
    &.form-has-modal-sms {
        form.elementor-form {
            opacity: 1 !important;
        }

        .modale.modale_sms.modale-active {
            position: relative;

            & ~ .e-form__indicators,
            & ~ .elementor-message {
                display: none;
            }

            .close {
                position: absolute;
                right: 0;
            }

            h3 {
                color: black;
                text-align: center;
            }
            p.modifier,
            p.securite {
                text-align: center;
            }
            p.telephone-container {
                text-align: center;
                font-weight: bold;
                font-size: 150%;
            }
            a.reset {
                font-size: 13px;
                text-decoration: underline;
                text-align: center;
                color: black;

                &:not(.elementor-hidden) {
                    display: block;
                }
            }

            .checkboxes-clone-container {
                margin: 10px auto;

                .elementor-field-type-acceptance {
                    margin-bottom: 5px;

                    > label {
                        display: none;
                    }
                    .elementor-field-subgroup {
                        width: 100%;
                        padding: 5px;

                        &:hover {
                            outline: 1px solid black;
                        }
                        input[type=checkbox],
                        label {
                            cursor: pointer;
                            font-size: 14px;
                            font-weight: normal;
                        }
                    }
                    .elementor-field-option {
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        gap: 10px;
                    }
                }
            }

            .code-sms-clone-container,
            .phone-clone-container,
            .submit-clone-container {
                justify-content: center;
                display: flex;

                label {
                    display: none;
                }
                input {
                    text-align: center;

                    &::placeholder,
                    &:placeholder-shown {
                        text-align: center;
                    }
                }
            }
            .code-sms-clone-container .elementor-message {
                display: none;
            }

            .rgpd-clone-container {
                margin-top: 10px;
                font-size: 9px;

                p {
                    margin-bottom: 0;
                }
            }

            button[type=submit].elementor-button {
                span.elementor-button-content-wrapper {
                    gap: 10px;
                    flex-direction: row;

                    &::before {
                        display: inline;
                        content: "Valider le code SMS";
                    }
                    &::after {
                        display: inline;
                        content: "\f00c";
                        font-family: 'Font Awesome 5 Free';
                    }
                }
                span.elementor-button-icon,
                span.elementor-button-text {
                    display: none;
                }
            }

            &.reset-phone button[type=submit].elementor-button span.elementor-button-content-wrapper {
                &::before {
                    content: "Renvoyer le code SMS";
                }
                &::after {
                    content: "\f061";
                }
            }
        }
    }

    /* ---- Variante avec modale SMS en popup ---- */
    &.form-has-modal-popup {
        .modale.modale_sms {
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 15;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &.modale-active {
                position: fixed;
            }
            .close {
                position: relative !important;
                width: 630px;
                text-align: right;
                z-index: 1;
                right: auto !important;
                color: white;

                @media screen and (min-width: 200px) and (max-width: 1309px) {
                    width: calc(100% - 30px);
                }
            }
            .modale-overlay {
                background: rgba(0, 0, 0, 0.5);
                width: 100%;
                height: 100%;
                position: absolute;
            }
            .modale_body {
                width: 630px;
                z-index: 1;
                max-height: calc(100vh - 100px);
                overflow: auto;
                border-radius: 15px;
                box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25);
                padding: 30px;
                background: white;

                @media screen and (min-width: 200px) and (max-width: 1309px) {
                    width: calc(100% - 30px);
                    padding: 15px;
                }
            }
        }
    }

    /* ---- Forms hors material design ---- */
    &:not(.material-design) {
        /* .custom-suffix est positionné (absolute) par rapport à .elementor-field-group, qui
           inclut le label (hors material-design, où le label est superposé à l'input) : son
           centre vertical à 50% ne correspond donc pas à celui de l'input seul, d'où ce recalage.
           Ciblé via .elementor-field-type-number (toujours présent, quel que soit le type="number"
           ou "text" réellement rendu selon le séparateur de milliers) pour ne pas retomber sur
           l'input du champ range, dont le wrapper dédié (cc-range__number-wrap) est déjà correct. */
        .elementor-field-type-number .custom-suffix {
            top: 69%;
        }

        /* Radios / checkbox dessinés en CSS — cohérents cross-browser */
        input[type=radio],
        input[type=checkbox] {
            appearance: none;
            -webkit-appearance: none;
            box-sizing: content-box;
            position: relative;
            width: 16px;
            height: 16px;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0;
            background: transparent;
            cursor: pointer;
            flex: 0 0 auto;

            &::before {
                /* border-box doit toujours faire 16px (taille de l'input) pour rester calé
                   pile dedans, quelle que soit l'épaisseur de bordure -> le point/coche
                   (::after, centré à 50%/50% de l'input) reste centré dans le cercle/carré. */
                content: "";
                display: block;
                box-sizing: content-box;
                width: 14px;
                height: 14px;
                border: 1px solid var(--md-border-color, #8a8f98);
                transition: border-color 0.2s ease-in-out;
            }
        }

        /* Radio = rond + pastille centrale */
        input[type=radio],
        input[type=radio]::before {
            border-radius: 100%;
        }
        input[type=radio] {
            &::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                width: 8px;
                height: 8px;
                border-radius: 100%;
                background-color: var(--md-border-color-checked, #1f2d52);
                transform: translate(-50%, -50%) scale(0);
                transition: transform 0.2s ease-in-out;
            }
            &:checked::before {
                border-color: var(--md-border-color-checked, #1f2d52);
            }
            &:checked::after {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Checkbox = coche */
        input[type=checkbox] {
            &::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 46%;
                width: 5px;
                height: 9px;
                border: solid var(--md-border-color-checked, #1f2d52);
                border-width: 0 2px 2px 0;
                transform: translate(-50%, -50%) rotate(45deg) scale(0);
                transition: transform 0.2s ease-in-out;
            }
            &:checked::before {
                border-color: var(--md-border-color-checked, #1f2d52);
            }
            &:checked::after {
                transform: translate(-50%, -50%) rotate(45deg) scale(1);
            }
        }

        /* Alignement pastille + libellé */
        .elementor-field-subgroup .elementor-field-option {
            display: flex;
            align-items: center;
            column-gap: 8px;
        }

        /* État erreur : anneau / case rouge (piloté par le groupe) — bordure 2px, donc on
           recompense la taille du contenu (14px -> 12px) pour garder un border-box de 16px
           (taille de l'input) et rester centré. */
        .elementor-field-group-error input[type=radio]::before,
        .elementor-field-group-error input[type=checkbox]::before {
            border-color: var(--md-error-color, #d9534f);
            border-width: 2px;
            width: 12px;
            height: 12px;
        }
        .elementor-field-group-error {
            .elementor-select-wrapper {
                .select-caret-down-wrapper i::before {
                    color: var(--md-error-color);
                }
            }
            .custom-suffix {
                color: var(--md-error-color, #d9534f);
            }
            label {
                &::after {
                    color: var(--md-error-color, #d9534f)!important;
                }
            }
        }

        /* Texte informatif SMS (temporary-text) : dans le flux */
        form.elementor-form .elementor-field-label.temporary-text {
            align-self: flex-end;
            position: static;
            top: auto;
            width: 100%;
        }
    }
}

/* ---- Règles globales (sans préfixe widget) ---- */
.elementor-field-type-acceptance label:has(+ .elementor-field-subgroup .elementor-field-option label) {
    display: none;
}
.elementor-field-group.conditionnal-hidden {
    display: none;
}
.elementor-widget-form .cc-range {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;

    .cc-range__track {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        height: 24px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 4px;
            border-radius: 4px;
            background: var(--md-border-color, #d0d3d8);
        }
        .cc-range__track-fill {
            position: absolute;
            left: 0;
            height: 4px;
            border-radius: 4px;
            background: var(--cc-range-fill, var(--md-border-color-checked, #1f2d52));
            pointer-events: none;
        }
        .cc-range__slider {
            position: relative;
            width: 100%;
            margin: 0;
            height: 24px;
            background: transparent;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;

            &:focus { outline: none; }
            &::-webkit-slider-runnable-track { background: transparent; height: 24px; }
            &::-moz-range-track { background: transparent; height: 4px; }
            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 18px;
                height: 18px;
                margin-top: 3px;
                border-radius: 50%;
                background: var(--cc-range-thumb, var(--md-border-color-checked, #1f2d52));
                border: 2px solid #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }
            &::-moz-range-thumb {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--cc-range-thumb, var(--md-border-color-checked, #1f2d52));
                border: 2px solid #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
                cursor: pointer;
            }
        }
    }
    .cc-range__number-wrap {
        position: relative;
        flex: 0 0 auto;
        width: 40%;
        max-width: 170px;

        .cc-range__number {
            width: 100%;
            text-align: left;
        }
    }
}
/* Pas d'outline au clic souris sur les cases/radios ; on garde le focus clavier */
.elementor-widget-form input[type=checkbox]:focus:not(:focus-visible),
.elementor-widget-form input[type=radio]:focus:not(:focus-visible) {
    outline: none;
}
.elementor-widget-form:not(.material-design) .elementor-field-group .elementor-field-textual:focus {
    border-width: 1px;
}
@keyframes rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}
@media (max-width: 767px) {
    .elementor-widget-form.material-design {
        & input:has(+ .custom-suffix) {
            padding-right: 0;
        }
    }
}
.cc-form-required-notice {
    flex: 0 0 100%;
    width: 100%;
    font-size: 0.8em;
    margin: 5px 0;
}
.cc-form-legal-notices {
    flex: 0 0 100%;
    width: 100%;
    font-size: 0.75em;
    text-align: justify;
    margin: 10px 0;
}
.cc-form-legal-notices a.legal-notice-toggle {
    position: relative;
}
.cc-form-legal-notices a.legal-notice-toggle::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-radius: 3px;
    transform: rotate(-45deg);
    position: absolute;
    margin-left: 5px;
    bottom: 4px;
}
.cc-form-legal-notices a.legal-notice-toggle:not(.on)::after {
    transform: rotate(135deg);
    bottom: 0px;
}