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

.elementor-widget-form {
    .elementor-field-group {
        position: relative;
        .elementor-field-type-upload {
            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;
        }
    }

    /* 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;
        }
        .elementor-message-danger:before {
            display: none;
        }
    }

    /* 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;
                }
            }
        }
    }

    /* 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: auto;
        bottom: 5px;
        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;
                }
            }
        }
    }
    .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;
            }
        }
    }

    .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;
        a.legal-notice-toggle {
            position: relative;
            &::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;
            }
            &:not(.on)::after {
                transform: rotate(135deg);
                bottom: 0px;
            }
        }
    }
    .elementor-field-group {
        &.elementor-field-type-radio {
            .elementor-field-subgroup {
                gap: 6px;
                .elementor-field-option {
                    label {
                        margin-bottom:0;
                    }
                }
            }
        }
        &.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);
                }
            }
        }
    }
}

/* ---- 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;
}
@keyframes rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}