/* Formulaires CF7 de la landing Business Cases — copie de style/landing-event/event-base.css (bloc formulaire). */
/*
 * ── Formulaires CF7 (.flexible-business-cases-form) ──────────────────────────────
 * Style générique partagé par toutes les sections qui intègrent un
 * formulaire CF7 (Hero, section Formulaire, modale CTA) : pilules + grille
 * 2 colonnes.
 *
 * Grille 2 colonnes : deux mécanismes complémentaires.
 *   1. .wpcf7-grid-row — convention à utiliser dans le gabarit CF7 fourni à
 *      l'éditeur (cf. réponse form CRSW-228) : un <div class="wpcf7-grid-row">
 *      contenant 2 <label> se met en colonnes directement via le CSS ci-dessous,
 *      sans JS. C'est le cas nominal pour les formulaires event.
 *   2. .flexible-business-cases-form-grid / -field — reconstruction en JS
 *      (js/landing-event-modal.js, normalizeCf7Grid()) pour les formulaires
 *      CF7 existants qui n'utilisent PAS cette convention (ex. sélectionnés
 *      via cyllene_acf_project_cta_modale_form() dans une modale CTA) : leur
 *      structure HTML est hors de notre contrôle.
 */

.flexible-business-cases-form * {
    box-sizing: border-box;
    max-width: 100%;
}

/* CF7 enveloppe automatiquement chaque <label> dans son propre <p> (wpautop) :
   les enfants directs de .wpcf7-grid-row sont donc des <p>, pas des <label>. */
.flexible-business-cases-form .wpcf7-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.flexible-business-cases-form .wpcf7-grid-row > p {
    margin: 0;
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
}

/* Espacement entre chaque ligne du formulaire (ligne = <p> ou .wpcf7-grid-row,
   enfants directs du <form> généré par CF7). */
.flexible-business-cases-form form > p,
.flexible-business-cases-form form > .wpcf7-grid-row {
    margin: 0 0 20px;
}

/* Le lien "* mentions obligatoires" (.form-mandatory-note) est un <p> comme
   les autres pour CF7 : il hérite donc des 20px ci-dessus avant ET après lui,
   ce qui ouvre un blanc disproportionné autour d'une simple ligne de lien.
   Spécificité (.flexible-business-cases-form form > p + sélecteur) volontairement
   supérieure à la règle générique ci-dessus pour la surcharger sans
   !important. */
.flexible-business-cases-form form > p:has(+ .form-mandatory-note) {
    margin-bottom: 8px;
}

.flexible-business-cases-form form > p.form-mandatory-note {
    margin-bottom: 8px;
}

.flexible-business-cases-form .wpcf7-form-control-wrap:has(> input[type="hidden"]) {
    display: none;
}

.flexible-business-cases-form [data-class="wpcf7cf_group"] {
    display: none;
}

.flexible-business-cases-form [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden) {
    display: block !important;
}

.flexible-business-cases-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.flexible-business-cases-form-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flexible-business-cases-form-field:empty {
    display: none;
}

.flexible-business-cases-form-field:has(select),
.flexible-business-cases-form-field:has(textarea),
.flexible-business-cases-form-field:has(input[type="file"]),
.flexible-business-cases-form-field:has(.wpcf7-list-item),
.flexible-business-cases-form-field:has([data-class="wpcf7cf_group"]) {
    flex: 1 1 100%;
}

.flexible-business-cases-form-field:has(.wpcf7-submit) {
    flex: 0 0 auto;
    margin: 8px auto 0;
}

.flexible-business-cases-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.flexible-business-cases-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bc-color-text);
    margin-bottom: 8px;
}

.flexible-business-cases-form input[type="text"],
.flexible-business-cases-form input[type="email"],
.flexible-business-cases-form input[type="tel"],
.flexible-business-cases-form input[type="number"],
.flexible-business-cases-form input[type="url"],
.flexible-business-cases-form textarea,
.flexible-business-cases-form select {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--bc-color-border);
    border-radius: 20px;
    padding: 14px 16px;
    font-family: var(--bc-font-body);
    font-size: 14px;
    color: var(--bc-color-text);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    box-sizing: border-box;
    resize: vertical;
}

.flexible-business-cases-form textarea {
    min-height: 100px;
}

.flexible-business-cases-form input:focus,
.flexible-business-cases-form textarea:focus,
.flexible-business-cases-form select:focus {
    outline: none;
    border-color: var(--bc-color-accent);
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}

.flexible-business-cases-form .wpcf7-acceptance {
    flex: 1 1 100%;
    font-size: 13px;
    color: var(--bc-color-text-muted);
    line-height: 1.5;
}

/* CF7 imbrique la case et le texte dans un <label> unique (à l'intérieur de
   .wpcf7-list-item) : c'est ce <label>, pas .wpcf7-acceptance, qu'il faut
   mettre en flex pour centrer verticalement la case sur le texte. Surcharge
   volontaire de la règle générique ".flexible-business-cases-form label" (gras,
   display: block) : ici on veut du texte normal aligné avec la case. */
.flexible-business-cases-form .wpcf7-acceptance label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.flexible-business-cases-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

.flexible-business-cases-form .wpcf7-required,
.flexible-business-cases-form abbr[title="required"] {
    display: none;
}

/* CF7 place [submit] dans son propre <p> : centré plutôt qu'aligné à gauche par défaut.
   margin-bottom: 0 (et pas un `form > p:last-child` générique plus haut) :
   CF7 ajoute toujours un <div class="wpcf7-response-output"> après ce <p>
   (masqué en display:none tant que le formulaire n'a pas été soumis, cf.
   includes/css/styles.css du plugin) — ce <div> est donc le vrai dernier
   enfant du <form>, pas ce <p>. Un :last-child ciblant le <p> ne matcherait
   jamais, laissant les 20px de margin-bottom de la règle générique
   (form > p) en trop sous le bouton. */
.flexible-business-cases-form p:has(> .wpcf7-submit) {
    margin-bottom: 0;
    text-align: center;
}

.flexible-business-cases-form button[type="submit"],
.flexible-business-cases-form input[type="submit"],
.flexible-business-cases-form .wpcf7-submit {
    /* display: flex (pas inline-flex) + margin auto : centre le bouton dans
       son bloc parent quel que soit ce parent (p, div de groupe wpcf7cf...),
       sans dépendre d'un text-align: center sur un sélecteur de parent
       précis qui ne matche pas toujours selon la structure du formulaire. */
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bc-color-accent);
    color: var(--bc-color-white);
    border: none;
    border-radius: 10px;
    padding: 14px 36px;
    font-family: var(--bc-font-body);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

/* <input type="submit"> ne supporte ni ::after ni mask+background-color
   (élément remplacé, CF7 génère un <input> et non un <button>) : la seule
   flèche fiable est un background-image SVG inline pré-coloré en blanc,
   casée à droite via un padding-right dédié. */
.flexible-business-cases-form input[type="submit"] {
    padding-right: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='19' viewBox='0 0 16 19' fill='none'%3E%3Cpath d='M13.938 14.0676L9.15202 19C7.9385 17.7436 7.94074 15.7089 9.15703 14.4554L11.7407 11.7927L13.938 14.0676Z' fill='white'/%3E%3Cpath d='M6.93747 3.9967C8.1227 2.71184 10.0919 2.66276 11.3357 3.88705L16 8.47788L15.9903 8.48834V11.6963H0C3.31192e-06 9.92156 1.39284 8.48282 3.11097 8.48282H11.4953L6.93747 3.9967Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 28px center;
    background-size: 13px auto;
}

.flexible-business-cases-form button[type="submit"]:hover,
.flexible-business-cases-form input[type="submit"]:hover,
.flexible-business-cases-form .wpcf7-submit:hover {
    transform: translateY(-1px);
}

/* ── Mobile (<768px) ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .flexible-business-cases-form-field,
    .flexible-business-cases-form .wpcf7-grid-row > p {
        flex: 1 1 100%;
    }
}