/**
 * Formulaires - style commun à tous les formulaires Form.io / <dyna-form>
 * du site (contact, demande, éligibilité, précommandes, tickets…).
 *
 * Repris du site Celtiis Business (main.css, bloc « Formulaires business »)
 * pour un rendu identique : champs à fond gris clair, coins 9 px, hauteur
 * 48 px, libellé dans le champ ; boutons en pilule.
 * Couleurs : bleu du site (--bs-secondary #1D3D70), vert (--bs-primary).
 *
 * Ne pas redéfinir fond, bordure, coins ou hauteur des champs dans le CSS
 * d'une page : modifier les variables --cbf-* ci-dessous.
 */

/* =============================================================
 * Style global pour Form.io / dyna-form
 * =============================================================
 * S'applique automatiquement à TOUS les form-controls rendus sur
 * le site (contact, demande, éligibilité, précommandes SIM / eSIM,
 * contact grossiste, tickets…). Cohérence visuelle unique.
 *
 * Ne touche PAS wp-admin (feuille chargée sur le site uniquement).
 *
 * Vars alignées sur --bs-secondary (navy #1D3D70) et
 * --bs-primary (vert #8DC63F) déjà définies au :root du site.
 */

/* Champs : style de la page Contact, repris sur tous les formulaires. */
:root {
    --cbf-radius: 9px;
    --cbf-border: #edf1f6;
    --cbf-border-focus: var(--bs-primary, #8dc63f);
    --cbf-text: #1d3d70;
    --cbf-label: #64748b;
    --cbf-bg: #f7f9fc;
    --cbf-notch-bg: #f7f9fc;
    --cbf-height: 48px;
}

/* Chaque composant Form.io conserve le même rythme que la modale SIM. */
body:not(.wp-admin) .formio-form .formio-component {
    margin-bottom: 16px;
}

body:not(.wp-admin) .formio-form .formio-component:last-child {
    margin-bottom: 0;
}

/* Contexte des labels flottants. */
body:not(.wp-admin) .formio-form .formio-component-textfield,
body:not(.wp-admin) .formio-form .formio-component-email,
body:not(.wp-admin) .formio-form .formio-component-phoneNumber,
body:not(.wp-admin) .formio-form .formio-component-number,
body:not(.wp-admin) .formio-form .formio-component-password,
body:not(.wp-admin) .formio-form .formio-component-url,
body:not(.wp-admin) .formio-form .formio-component-textarea,
body:not(.wp-admin) .formio-form .formio-component-select {
    position: relative;
}

body:not(.wp-admin) .formio-form .formio-component-textfield > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-email > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-phoneNumber > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-number > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-password > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-url > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-select > .col-form-label {
    position: absolute;
    top: 25px;
    left: 18px;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--cbf-label);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition: top .22s cubic-bezier(.16, 1, .3, 1), left .18s ease,
        padding .16s ease, background-color .16s ease, font-size .18s ease,
        font-weight .18s ease, color .18s ease;
}

body:not(.wp-admin) .formio-form .formio-component-textarea > .col-form-label {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #64748b;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    transition: top .22s cubic-bezier(.16, 1, .3, 1), left .18s ease,
        padding .16s ease, background-color .16s ease, font-size .18s ease,
        font-weight .18s ease, color .18s ease;
}

body:not(.wp-admin) .formio-form .formio-component-file > .col-form-label {
    display: block;
    margin: 0 0 8px;
    color: var(--cbf-label);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
}

/* Astérisque required - rouge brand */
body:not(.wp-admin) .formio-form .form-group.required > label::after,
body:not(.wp-admin) .formio-form .col-form-label.required::after,
body:not(.wp-admin) .formio-form label.required::after,
body:not(.wp-admin) .formio-form label .field-required {
    color: #d93b3b;
}

body:not(.wp-admin) .formio-form .form-control,
body:not(.wp-admin) .formio-form .form-select,
body:not(.wp-admin) .formio-form .choices__inner {
    height: var(--cbf-height) !important;
    min-height: var(--cbf-height);
    padding: 8px 18px !important;
    border-radius: var(--cbf-radius) !important;
    border: 1px solid var(--cbf-border) !important;
    background: var(--cbf-bg) !important;
    color: var(--cbf-text) !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body:not(.wp-admin) .formio-form textarea.form-control {
    height: auto !important;
    min-height: 122px;
    border-radius: var(--cbf-radius) !important;
    padding: 18px !important;
    line-height: 1.5;
    resize: vertical;
}

/* Le label remplace visuellement le placeholder. */
body:not(.wp-admin) .formio-form .form-control::placeholder,
body:not(.wp-admin) .formio-form .choices__inner .choices__input::placeholder {
    color: transparent;
}

/* Focus - bordure verte et halo identiques à la modale SIM. */
body:not(.wp-admin) .formio-form .form-control:focus,
body:not(.wp-admin) .formio-form .form-select:focus,
body:not(.wp-admin) .formio-form .choices.is-focused .choices__inner,
body:not(.wp-admin) .formio-form .choices__inner:focus-within {
    outline: none;
    border-color: var(--cbf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, .15);
}

/* Label monté au focus ou lorsque le champ contient une valeur. */
body:not(.wp-admin) .formio-form .formio-component-textfield:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-email:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-phoneNumber:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-number:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-password:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-url:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-textarea:has(.form-control:focus, .form-control:not(:placeholder-shown)) > .col-form-label,
body:not(.wp-admin) .formio-form .formio-component-select:has(.choices__inner:focus-within, .choices.is-open, .choices__list--single .choices__item:not(.choices__placeholder)) > .col-form-label {
    top: 0;
    left: 14px;
    padding: 0 6px;
    background: var(--cbf-notch-bg, #fff);
    color: var(--cbf-text);
    font-size: 12.5px;
    font-weight: 500;
}

body:not(.wp-admin) .formio-form .formio-component:has(.form-control:focus, .choices__inner:focus-within, .choices.is-open) > .col-form-label {
    color: var(--cbf-text) !important;
}

/* Choices.js : même hauteur et alignement que les inputs. */
body:not(.wp-admin) .formio-form .choices__inner {
    display: flex;
    align-items: center;
    padding: 14px 40px 14px 18px !important;
}

body:not(.wp-admin) .formio-form .choices__list--single {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

body:not(.wp-admin) .formio-form .choices__list--single .choices__item {
    padding: 0;
    color: var(--cbf-text);
    font-size: 15px;
    line-height: 1.5;
}

body:not(.wp-admin) .formio-form .choices__list--single .choices__placeholder {
    color: transparent;
    opacity: 0;
}

/* États d'erreur (Form.io ajoute .is-invalid ou .has-error) */
body:not(.wp-admin) .formio-form .form-control.is-invalid,
body:not(.wp-admin) .formio-form .form-control:invalid:not(:focus):not(:placeholder-shown),
body:not(.wp-admin) .formio-form .has-error .form-control {
    border-color: #d93b3b;
    background-image: none; /* Bootstrap ajoute une icône rouge, on la vire */
}

body:not(.wp-admin) .formio-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 59, 59, 0.12);
}

body:not(.wp-admin) .formio-form .invalid-feedback,
body:not(.wp-admin) .formio-form .form-text.error,
body:not(.wp-admin) .formio-form .has-error .help-block {
    margin-top: 4px;
    font-size: 12.5px;
    color: #d93b3b;
}

/* Choices.js dropdown (utilisé par les selects Form.io) */
body:not(.wp-admin) .formio-form .choices__list--dropdown {
    border: 1px solid var(--cbf-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(29, 61, 112, 0.14);
}
body:not(.wp-admin) .formio-form .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(29, 61, 112, 0.06);
    color: var(--cbf-text);
}

/* Boutons Bootstrap - même style pilule que le reste des boutons du site */
body:not(.wp-admin) .formio-form .btn {
    /* Pilule : Suivant, Précédent, Terminer, Envoyer… (les champs gardent --cbf-radius). */
    border-radius: 999px;
    padding: 10px 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    border: 0;
    box-shadow: none;
    transition: background-color .18s ease, filter .18s ease, box-shadow .18s ease;
}

body:not(.wp-admin) .formio-form .btn-primary,
body:not(.wp-admin) .formio-form .btn-primary:not(:disabled):not(.disabled) {
    background: var(--bs-primary, #8DC63F);
    color: #fff;
}

body:not(.wp-admin) .formio-form .btn-primary:hover,
body:not(.wp-admin) .formio-form .btn-primary:not(:disabled):not(.disabled):hover {
    background: var(--bs-primary, #8DC63F);
    color: #fff;
    filter: brightness(0.94);
}

body:not(.wp-admin) .formio-form .btn-primary:focus-visible,
body:not(.wp-admin) .formio-form .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--bs-primary, #8DC63F);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.28);
    outline: none;
}

body:not(.wp-admin) .formio-form .btn-secondary,
body:not(.wp-admin) .formio-form .btn-outline-primary {
    background: transparent;
    border: 1px solid var(--cbf-border);
    color: var(--cbf-text);
}

body:not(.wp-admin) .formio-form .btn-secondary:hover,
body:not(.wp-admin) .formio-form .btn-outline-primary:hover {
    background: #f4f6fa;
    color: var(--cbf-text);
    border-color: var(--cbf-border-focus);
}

/* Checkboxes / radios (Bootstrap 5) - accent brand */
body:not(.wp-admin) .formio-form .form-check-input {
    border: 1.5px solid var(--cbf-border);
    accent-color: var(--bs-secondary, #1D3D70);
}

body:not(.wp-admin) .formio-form .form-check-input:checked {
    background-color: var(--bs-secondary, #1D3D70);
    border-color: var(--bs-secondary, #1D3D70);
}

body:not(.wp-admin) .formio-form .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(29, 61, 112, 0.15);
    border-color: var(--bs-secondary, #1D3D70);
}

/* Zone d'upload de fichier Form.io */
body:not(.wp-admin) .formio-form .formio-component-file .list-group-item:not(.list-group-header) {
    padding: 10px 14px;
    border: 1px solid var(--cbf-border);
    border-radius: 10px;
    background: #f4f6fa;
    color: var(--cbf-text);
    margin-bottom: 6px;
}

body:not(.wp-admin) .formio-form .formio-component-file .list-group-header {
    display: none !important;
}


/* Libellé flottant des pages qui utilisent --dyna-field-notch-bg (demande.css) :
   même fond que le champ, quel que soit le conteneur (fenêtre, panneau…). */
body:not(.wp-admin) .formio-form {
    --dyna-field-notch-bg: var(--cbf-notch-bg);
}