/*
	Overrides pour le thème Gravity Forms

	But : définir ici les propriétés CSS personnalisées (custom properties)
	qui reflètent les variables utilisées par le framework thème de Gravity Forms.
	En surchargeant ces variables dans ce fichier (chargé après le CSS du plugin),
	vous pouvez changer couleurs / espacements / etc. sans dupliquer les règles du plugin.

	Consignes :
	- Conserver les noms de propriété identiques à ceux du plugin que vous souhaitez surcharger.
	- N'inclure que les variables nécessaires ; les autres utiliseront les valeurs par défaut du plugin.
	- Si une règle du plugin utilise une valeur littérale (pas une variable), il faudra surcharger la règle directement.

  Ce fichier contient les variables CSS personnalisées (custom properties) utilisées par Gravity Forms et exposées ici pour permettre aux designers de les modifier facilement. 
  Les sections ci-dessous sont ordonnées par thématiques : 
  - indicateurs d'étapes (progress), 
  - labels, 
  - boutons (next/prev/submit) avec leurs états, 
  - messages d'erreur/validation.

	Règles d'utilisation :
	 - Modifiez uniquement les variables nécessaires afin d'éviter des divergences majeures avec le framework du plugin.
   - Le bloc est scoped à ".gform-theme--api, .gform-theme--framework" pour n'affecter que le markup de Gravity Forms.
	 - Les commentaires en français expliquent que modifie chaque variable (texte / bordure / fond).
*/

.gform_required_legend { display: none; }

.gform-theme--api, .gform-theme--framework {
  --gf-field-img-choice-margin-y-end: 0px;

  --gf-field-img-choice-card-check-ind-bg-color: #FFFFFF;
  --gf-field-img-choice-card-check-ind-icon-color: var(--e-global-color-text);

  --gf-ctrl-btn-letter-spacing: 3px;
}
.gform-theme--api, .gform-theme--framework {
  --gf-field-img-choice-aspect-ratio: 16/9;
}
.gform-theme--foundation .gf_page_steps {
  justify-content: center;
}

/* Image choice */
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_radio > .gchoice, 
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_checkbox > .gchoice {
  position: relative;
}
/* Image Choice "Check" overlay */
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square.gfield--image-choice-appearance-card .gchoice:where(:has(input:checked)) .gfield-image-choice-wrapper-inner {
  background-color: #FDF98B;
}
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square.gfield--image-choice-appearance-card .gchoice:where(:has(input:checked))::after {
  top: 5px; right: 5px;
  padding: 0.5em;
}

.gform-theme--framework .gfield-image-choice-wrapper-inner .gform-field-label--type-inline {
  text-transform: uppercase; letter-spacing: 4px; font-weight: bold;
}
.gform-theme--framework .gfield-image-choice-wrapper-inner {
  display: flex; justify-content: center; align-content: center;
  width: 100%; padding: 2em 1em; 
}
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_radio,
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_checkbox {
  gap: 2em;
}
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_radio > .gchoice,
.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card .gfield_checkbox > .gchoice {
  flex: 1;
}

.gform-theme--framework .gfield--type-image_choice .gfield_checkbox, 
.gform-theme--framework .gfield--type-image_choice .gfield_radio {

}

/* Champ Complexe - Nom Prénom */
@media screen and (min-width: 641px){
  .gform-theme--framework .ginput_container--name.has_prefix .name_prefix {
    max-width: 100px;
  }
}
/* Pied de formulaire */
.gform-theme--framework .gform-page-footer {padding-top: 1em; }
@media screen and (min-width: 641px){
  .gform-theme--framework .gform-page-footer {  justify-content: center !important; }
}