@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

  /* Le conteneur principal du formulaire #2 */
  #gform_wrapper_2 {
    @apply bg-white  p-6 shadow-md rounded-md mx-4 col-span-full flex flex-col justify-center;
  }

  /* Le corps du formulaire (optionnel) */
  #gform_wrapper_2 .gform_body {
    @apply flex flex-col justify-center mx-auto;
  }

  /* Barre d’étapes multi-step */
  #gform_wrapper_2 .gf_page_steps {
    @apply flex gap-3 items-center justify-center;
  }

  /* Chaque champ .gfield => on crée deux colonnes (label + input) */
  #gform_wrapper_2 .gfield {
    @apply flex flex-col sm:flex-row gap-4 py-2 px-4 sm:px-0 text-left;
  }

  /* Le label (première “colonne”) */
  #gform_wrapper_2 .gfield_label {
    @apply p-4 bg-white rounded-md flex-1 flex items-center text-[#FF753A] font-bold text-xl;
  }

  /* Le conteneur des inputs (deuxième “colonne”) */
  #gform_wrapper_2 .ginput_container {
    @apply flex flex-row items-center p-4 bg-white rounded-md space-x-4;
  }

  /* Radios / checkbox => même style que votre shortcode */
  #gform_wrapper_2 .ginput_container input[type="radio"],
  #gform_wrapper_2 .ginput_container input[type="checkbox"] {
    @apply appearance-none w-6 h-6 border border-gray-300 rounded-sm 
           checked:bg-[#2E488F] checked:border-transparent focus:outline-none;
  }

  /* Text/number/select => idem shortcode */
  #gform_wrapper_2 .ginput_container input[type="text"],
  #gform_wrapper_2 .ginput_container input[type="number"],
  #gform_wrapper_2 .ginput_container select {
    @apply text-[#2E488F] font-bold text-xl w-full border-gray-300 
           rounded-sm focus:outline-none;
  }

  /*
   * EXEMPLE : cibler précisément le bouton "Suivant" 
   * qui a l’ID #gform_next_button_2_9
   */
  .gform_next_button {
    @apply w-1/2 p-4 bg-[#FF753A] text-xl text-white font-bold text-center 
           align-middle rounded-md !important;
  }

  /*
   * Si vous avez un "Précédent" ou un "Envoyer" :
   * Copiez cette logique en changeant l’ID (ex. #gform_previous_button_2_9, #gform_submit_button_2…)
   */

  /*
   * Si vous voulez appliquer un style supplémentaire 
   * via des classes custom dans l’éditeur GF,
   * vous pouvez en plus garder .my-icc-group etc. :
   */
  .gfield.my-icc-group {
    @apply flex flex-col sm:flex-row gap-4 py-2 px-4 sm:px-0 text-left;
  }
  .gfield.my-icc-label-container {
    @apply p-4 bg-white rounded-md flex-1 flex items-center;
  }

 
}