/* ============================================================
   DAHLIA — BRICKS FORM STYLE KIT · MODULE OPTIONS
   Switch : [data-bf-opt="native|pill|card|tag"]
   Champs Checkbox et Radio de l'élément Form natif.

   Markup (Bricks 2.4) :
     <ul class="options-wrapper">
       <li><input type="radio" id="…"><label for="…">Texte</label></li>
     </ul>

   Tout le CSS natif de Bricks sur ce markup est en :where(), donc à
   spécificité 0 — pas de course à la spécificité, contrairement au kit
   JetFormBuilder. La SEULE exception est la typographie : voir §4.
   ============================================================ */


/* ===========================================================
   1. Socle commun à tous les presets
   =========================================================== */
.bf-dahlia[data-bf-opt] .options-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bf-dahlia[data-bf-opt] .options-wrapper > li {
  margin: 0;
  padding: 0;
}


/* ===========================================================
   2. Preset « native » — on ne touche qu'à la mise en page
   Le contrôle reste celui du système, juste teinté à la marque.
   =========================================================== */
.bf-dahlia[data-bf-opt="native"] .options-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--bf-opt-gap);
}

.bf-dahlia[data-bf-opt="native"] .options-wrapper input {
  accent-color: var(--bf-primary);
}

/* Même en « native » on remet la typographie d'usage : Bricks passe TOUT
   <label> du formulaire en 12px / 600 / uppercase / .4px, y compris les
   options, ce qui donne des choix criés en capitales. Ici pas de
   !important — un réglage explicite « Label typography » (spécificité
   d'ID) doit encore l'emporter, on ne fait que corriger le défaut. */
.bf-dahlia[data-bf-opt="native"] .options-wrapper > li > label {
  color:          var(--bf-opt-text);
  font-size:      var(--bf-opt-fs);
  font-weight:    var(--bf-opt-fw);
  line-height:    var(--bf-opt-lh);
  letter-spacing: var(--bf-opt-ls);
  text-transform: var(--bf-opt-tt);
}


/* ===========================================================
   3. Disposition des trois presets « boîte »
   =========================================================== */
.bf-dahlia[data-bf-opt="pill"] .options-wrapper,
.bf-dahlia[data-bf-opt="tag"] .options-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-opt-gap);
}

.bf-dahlia[data-bf-opt="card"] .options-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--bf-opt-cols), minmax(0, 1fr));
  gap: var(--bf-opt-gap);
}

/* Pilules et tags en grille — « Arrangement : Grid » dans le panneau.
   Colonnes égales et, surtout, hauteurs égales : en flex-wrap une option
   sur deux lignes laissait ses voisines plus courtes. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="tag"])[data-bf-opt-layout="grid"] .options-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--bf-opt-cols), minmax(0, 1fr));
  gap: var(--bf-opt-gap);
}

/* Même raison qu'en §4c. Le « align-items: stretch » n'est pas décoratif :
   Bricks pose `:where(.brxe-form) .options-wrapper li{align-items:baseline}`,
   inerte tant que le li est en display:block, réactivé dès qu'on le repasse
   en flex — le label restait alors collé à sa hauteur de contenu. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="tag"])[data-bf-opt-layout="grid"] .options-wrapper > li {
  display: flex;
  align-items: stretch;
}

/* Annule le width:auto des presets pill / tag (§4b et §4d). */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="tag"])[data-bf-opt-layout="grid"] .options-wrapper > li > label {
  flex: 1;
}


/* ===========================================================
   4. Presets « boîte » — le <label> devient la case cliquable
   =========================================================== */

/* L'input réel sort du flux mais reste focusable et lu par les lecteurs
   d'écran. pointer-events:none est indispensable : sans lui, l'input
   intercepterait le survol destiné au label, et :hover ne partirait
   jamais (c'est un frère, pas un ancêtre). */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li {
  position: relative;
  display: block;
  gap: 0;
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ⚠ LES !important DE TYPOGRAPHIE SONT DÉLIBÉRÉS.
   Bricks habille TOUT <label> du formulaire — options comprises — et son
   contrôle natif « Label typography » écrit « #brxe-ID label { … } » :
   spécificité d'ID, imbattable par une feuille de style. Sans !important,
   une pilule héritait du 12px / 600 / uppercase / .4px des libellés de
   champ. Rien n'est perdu : ces cinq propriétés restent réglables ici même,
   section « Typography ». Idem pour `color`, d'où le !important sur tous
   les états qui la repeignent. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > label {
  display: flex;
  align-items: center;
  gap: var(--bf-opt-ind-gap);
  width: 100%;
  min-height: var(--bf-opt-h);
  margin: 0;
  padding: var(--bf-opt-pad-y) var(--bf-opt-pad-x);
  background-color: var(--bf-opt-bg);
  border: var(--bf-border-width) solid var(--bf-opt-border);
  cursor: pointer;
  user-select: none;
  transition: color var(--bf-transition), background-color var(--bf-transition),
              border-color var(--bf-transition), box-shadow var(--bf-transition);

  color:          var(--bf-opt-text) !important;
  font-size:      var(--bf-opt-fs) !important;
  font-weight:    var(--bf-opt-fw) !important;
  line-height:    var(--bf-opt-lh) !important;
  letter-spacing: var(--bf-opt-ls) !important;
  text-transform: var(--bf-opt-tt) !important;
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > label:hover {
  background-color: var(--bf-opt-hover-bg);
  border-color: var(--bf-opt-hover-border);
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > input:checked + label {
  color: var(--bf-opt-checked-text) !important;
  background-color: var(--bf-opt-checked-bg);
  border-color: var(--bf-opt-checked-border);
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > input:disabled + label {
  opacity: .55;
  cursor: not-allowed;
}


/* --- 4a. L'indicateur -----------------------------------------
   Dessiné en ::before sur le label. La marque du checkbox est un
   caractère (--bf-opt-tick) centré dans la boîte : il suit donc
   --bf-check-size sans second réglage, et reste choisissable dans le
   panneau. Le radio, lui, se remplit par un box-shadow interne. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"]) .options-wrapper > li > label::before {
  content: "";
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--bf-check-size);
  height: var(--bf-check-size);
  background-color: var(--bf-opt-ind-bg);
  border: var(--bf-border-width) solid var(--bf-opt-ind-border);
  border-radius: var(--bf-radius-check);
  font-size: calc(var(--bf-check-size) * .7);
  line-height: 1;
  color: transparent;
  transition: background-color var(--bf-transition), border-color var(--bf-transition),
              box-shadow var(--bf-transition), color var(--bf-transition);
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"]) .options-wrapper > li > input[type="checkbox"] + label::before {
  content: var(--bf-opt-tick);
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"]) .options-wrapper > li > input[type="radio"] + label::before {
  border-radius: 50%;
}

.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"]) .options-wrapper > li > input:checked + label::before {
  background-color: var(--bf-opt-ind-checked-bg);
  border-color: var(--bf-opt-ind-checked-border);
  color: var(--bf-opt-tick-color);
}

/* Le point du radio : un anneau interne de la couleur du fond au repos
   creuse la pastille pleine. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"]) .options-wrapper > li > input[type="radio"]:checked + label::before {
  box-shadow: inset 0 0 0 var(--bf-opt-dot-inset) var(--bf-opt-ind-bg);
}


/* --- 4b. pill : arrondi complet, largeur au contenu ------------ */
.bf-dahlia[data-bf-opt="pill"] .options-wrapper > li > label {
  width: auto;
  border-radius: var(--bf-radius-pill);
}


/* --- 4c. card : grille, boîte pleine, indicateur à droite ------
   ⚠ Le <li> passe en `display:grid` et NON en `height:100%`.
   Un pourcentage de hauteur se résout contre le bloc conteneur ; pour un
   item de grille, ce bloc est la zone de grille, dont la hauteur n'est PAS
   définie tant que la rangée est en `auto`. Chromium finit par la résoudre,
   WebKit retombe sur `auto` — d'où des boîtes à hauteur de contenu sur
   iPhone/iPad alors que tout va bien sur desktop.
   Le <li> devient donc un conteneur FLEX : son unique item en flux (le
   label, l'input étant en position:absolute) s'étire sur l'axe transversal
   par `align-items: stretch`, ce qui ne dépend d'aucun dimensionnement de
   piste. Testé : `display:grid` sur le <li> ne suffisait PAS — la rangée
   interne restait à la hauteur du contenu et le label ne remplissait pas
   la cellule (mesuré 61 px pour le li, 44 px pour le label). */
.bf-dahlia[data-bf-opt="card"] .options-wrapper > li {
  display: flex;
  align-items: stretch;
}

.bf-dahlia[data-bf-opt="card"] .options-wrapper > li > label {
  flex: 1;
  border-radius: var(--bf-radius);
}

.bf-dahlia[data-bf-opt="card"] .options-wrapper > li > label::before {
  order: 2;
  margin-left: auto;
}


/* --- 4d. tag : aucun indicateur, la boîte entière se remplit --- */
.bf-dahlia[data-bf-opt="tag"] .options-wrapper > li > label {
  width: auto;
  border-radius: var(--bf-radius-pill);
}

.bf-dahlia[data-bf-opt="tag"] .options-wrapper > li > label::before {
  display: none;
}

.bf-dahlia[data-bf-opt="tag"] .options-wrapper > li > input:checked + label {
  box-shadow: 0 0 0 var(--bf-ring-w) var(--bf-ring);
}


/* --- 4e. Anneau de focus clavier ------------------------------
   Placé après le tag coché : à égalité de propriété, c'est le focus
   qui doit gagner. */
.bf-dahlia:is([data-bf-opt="pill"], [data-bf-opt="card"], [data-bf-opt="tag"]) .options-wrapper > li > input:focus-visible + label {
  box-shadow: 0 0 0 var(--bf-ring-w) var(--bf-ring);
  border-color: var(--bf-opt-hover-border);
}


/* ===========================================================
   5. Consentement — case isolée
   Un champ Checkbox qui ne contient qu'une option est presque toujours
   une mention légale : on annule la boîte et on lui donne son échelle
   typographique propre. Détection automatique, désactivable dans le
   panneau (data-bf-consent).

   ⚠ Bricks passe les libellés d'options par esc_html() : cette case ne
   peut pas contenir de lien. Mettre la phrase dans un élément Texte à
   côté et garder le libellé court.
   =========================================================== */
/* La liste redevient un simple bloc : en preset « card » elle est une
   grille de --bf-opt-cols colonnes, et une case unique n'occupait donc
   qu'un tiers de la largeur — la mention légale se retrouvait pliée en
   colonne étroite. */
.bf-dahlia[data-bf-opt][data-bf-consent="auto"]
  .form-group:has(.options-wrapper > li:only-child > input[type="checkbox"])
  .options-wrapper {
  display: block;
}

/* Et le <li> repasse en bloc : §4c le met en grille, ce qui étirerait le
   label sur toute la largeur au lieu de le laisser épouser son texte. */
.bf-dahlia[data-bf-opt][data-bf-consent="auto"]
  .form-group:has(.options-wrapper > li:only-child > input[type="checkbox"])
  .options-wrapper > li {
  display: block;
}

.bf-dahlia[data-bf-opt][data-bf-consent="auto"]
  .form-group:has(.options-wrapper > li:only-child > input[type="checkbox"])
  .options-wrapper > li > label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--bf-opt-consent-gap);
  width: auto;
  max-width: var(--bf-opt-consent-max-w);
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;

  color:          var(--bf-opt-consent-text) !important;
  font-size:      var(--bf-opt-consent-fs) !important;
  font-weight:    var(--bf-opt-consent-fw) !important;
  line-height:    var(--bf-opt-consent-lh) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* La case garde sa taille propre. --bf-opt-consent-nudge la recale sur la
   première ligne quand la mention passe sur plusieurs lignes. */
.bf-dahlia[data-bf-opt][data-bf-consent="auto"]
  .form-group:has(.options-wrapper > li:only-child > input[type="checkbox"])
  .options-wrapper > li > label::before {
  display: inline-grid;
  order: 0;
  margin-left: 0;
  margin-top: var(--bf-opt-consent-nudge);
  width: var(--bf-opt-consent-ind);
  height: var(--bf-opt-consent-ind);
  background-color: var(--bf-opt-ind-bg);
  border: var(--bf-border-width) solid var(--bf-opt-ind-border);
  border-radius: var(--bf-radius-check);
  font-size: calc(var(--bf-opt-consent-ind) * .7);
  content: var(--bf-opt-tick);
}

.bf-dahlia[data-bf-opt][data-bf-consent="auto"]
  .form-group:has(.options-wrapper > li:only-child > input[type="checkbox"])
  .options-wrapper > li > input:checked + label::before {
  background-color: var(--bf-opt-ind-checked-bg);
  border-color: var(--bf-opt-ind-checked-border);
  color: var(--bf-opt-tick-color);
}


/* ===========================================================
   6. Responsive
   :where() pour rester à spécificité 0 : un réglage mobile fait dans
   Bricks reste prioritaire.
   =========================================================== */
@media (max-width: 767px) {
  :where(.bf-dahlia[data-bf-opt="card"]),
  :where(.bf-dahlia[data-bf-opt-layout="grid"]) {
    --bf-opt-cols: 1;
  }
}