/* ==========================================================================
   Gravity Forms – BMD Reusable Base (GF Foundation)
   Apply on the <form> via GF "CSS Class Name":
   - bmd-gf
   - bmd-gf bmd-gf--separators
   - bmd-gf bmd-gf--two-cols
   - bmd-gf bmd-gf--no-complex-sublabels
   Wrapper helper (optional): add class "bmd-gf_wrapper" on .gform_wrapper
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tokens (edit here per-site)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf{
  /* Typography (field text) */
  --bmd-gf-font: var(--e-global-typography-text-font-family), sans-serif;
  --bmd-gf-font-size: var(--e-global-typography-text-font-size);
  --bmd-gf-font-weight: var(--e-global-typography-text-font-weight);
  --bmd-gf-line-height: var(--e-global-typography-text-line-height);
  --bmd-gf-letter-spacing: var(--e-global-typography-text-letter-spacing);

  /* Labels */
  --bmd-gf-label-font: var(--e-global-typography-d3fa855-font-family), sans-serif;
  --bmd-gf-label-size: var(--e-global-typography-d3fa855-font-size);
  --bmd-gf-label-weight: var(--e-global-typography-d3fa855-font-weight);
  --bmd-gf-label-line-height: var(--e-global-typography-d3fa855-line-height);
  --bmd-gf-label-color: var(--e-global-color-primary);
  --bmd-gf-label-gap: 9px;

  /* Required asterisk */
  --bmd-gf-required-color: var(--e-global-color-primary);
  --bmd-gf-required-size: 1em;
  --bmd-gf-required-gap: 0px;
  --bmd-gf-required-opacity: 0.8;

  /* Placeholder (true placeholders only) */
  --bmd-gf-placeholder-font: var(--bmd-gf-font);
  --bmd-gf-placeholder-size: 16px;
  --bmd-gf-placeholder-weight: var(--bmd-gf-label-weight);
  --bmd-gf-placeholder-line-height: 1.2; /* mostly cosmetic; real vertical alignment is via input padding */
  --bmd-gf-placeholder-letter-spacing: 0.04em;
  --bmd-gf-placeholder-color: var(--e-global-color-59a32e1);
  --bmd-gf-placeholder-transform: none;

  /* Colors */
  --bmd-gf-text: var(--e-global-color-59a32e1);
  --bmd-gf-primary: var(--e-global-color-59a32e1);
  --bmd-gf-bg: #ffffff;

  /* Field UI */
  --bmd-gf-border-width: 2px;
  --bmd-gf-radius: 0px;
  --bmd-gf-field-pad-y: 1px;
  --bmd-gf-field-pad-x: 10px; 
  --bmd-gf-textarea-pad-y: 8px; 
  --bmd-gf-textarea-pad-x: 10px;

  /* IMPORTANT: only for inputs/selects (NOT textarea) */
  --bmd-gf-input-min-height: 38px;

  /* Single-line inputs vertical alignment (placeholders too) */
  --bmd-gf-input-line-height: 1.2;
  --bmd-gf-input-pad-top: 0px;       /* diminue pour remonter */
  --bmd-gf-input-pad-bottom: 2px;    /* augmente pour remonter */

  /* Select vertical alignment + room for native arrow */
  --bmd-gf-select-pad-y: 6px; /* ajuste ici (souvent 4–8px) */
  --bmd-gf-select-pad-x: var(--bmd-gf-field-pad-x);
  --bmd-gf-select-pad-right: calc(var(--bmd-gf-field-pad-x) + 24px);
  --bmd-gf-select-line-height: 1.2;

  /* Spacing */
  --bmd-gf-gap: 20px;
  --bmd-gf-row-gap: 15px;

  /* Textarea sizing (GF Foundation uses min-block-size on textarea.large) */
  --bmd-gf-textarea-min-block-size: 10rem;

  /* Choice controls (radios/checkboxes) */
  --bmd-gf-choice-row-gap: 6px;
  --bmd-gf-choice-gap: 10px;
  --bmd-gf-choice-line-height: 1.25;

  /* Separators (option) */
  --bmd-gf-sep: rgba(17, 35, 55, 0.12);
  --bmd-gf-sep-pad: 38px;

  /* Buttons */
  --bmd-gf-btn-bg: #ffffff;
  --bmd-gf-btn-color: var(--e-global-color-primary);
  --bmd-gf-btn-border-color: var(--e-global-color-primary);
  --bmd-gf-btn-border-width: 2px;
  --bmd-gf-btn-radius: 22px;
  --bmd-gf-btn-pad-y: 6px;
  --bmd-gf-btn-pad-x: 30px;

  --bmd-gf-btn-font: var(--e-global-typography-d3fa855-font-family), sans-serif;
  --bmd-gf-btn-size: var(--e-global-typography-d3fa855-font-size);
  --bmd-gf-btn-weight: var(--e-global-typography-d3fa855-font-weight);
  --bmd-gf-btn-line-height: var(--e-global-typography-d3fa855-line-height);

  --bmd-gf-btn-hover-bg: var(--e-global-color-primary);
  --bmd-gf-btn-hover-color: #ffffff;
  --bmd-gf-btn-hover-border-color: var(--e-global-color-primary);

  font-family: var(--bmd-gf-font) !important;
  color: var(--bmd-gf-text) !important;
}

/* --------------------------------------------------------------------------
   2) Required legend (IMPORTANT: outside <form>)
   -------------------------------------------------------------------------- */

.gform_wrapper .gform_required_legend{
  display: none !important;
}

/* --------------------------------------------------------------------------
   3) Labels / legends
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gfield_label,
.gform_wrapper form.bmd-gf legend.gform-field-label{
  font-family: var(--bmd-gf-label-font) !important;
  font-size: var(--bmd-gf-label-size) !important;
  font-weight: var(--bmd-gf-label-weight) !important;
  line-height: var(--bmd-gf-label-line-height) !important;
  color: var(--bmd-gf-label-color) !important;

  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--bmd-gf-label-gap) 0 !important;
}

/* Required asterisk */
.gform_wrapper form.bmd-gf :is(.gfield_required, .gfield_required_custom){
  font-family: var(--bmd-gf-label-font) !important;
  font-size: var(--bmd-gf-required-size) !important;
  line-height: 1 !important;
  color: var(--bmd-gf-required-color) !important;

  position: static;
  margin-left: var(--bmd-gf-required-gap);
  opacity: var(--bmd-gf-required-opacity);
  white-space: nowrap;
}

.gform_wrapper form.bmd-gf .gfield_required{ padding-left: 0 !important; }
.gform_wrapper form.bmd-gf .gfield_required_asterisk{ margin-left: 0 !important; }

/* --------------------------------------------------------------------------
   4) Placeholder (true placeholders only)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf ::placeholder{
  font-family: var(--bmd-gf-placeholder-font) !important;
  font-size: var(--bmd-gf-placeholder-size) !important;
  font-weight: var(--bmd-gf-placeholder-weight) !important;
  line-height: var(--bmd-gf-placeholder-line-height) !important;
  letter-spacing: var(--bmd-gf-placeholder-letter-spacing) !important;
  color: var(--bmd-gf-placeholder-color) !important;
  text-transform: var(--bmd-gf-placeholder-transform);
}

/* --------------------------------------------------------------------------
   5) Inputs / selects / textarea (base styles)
   - padding separated: inputs/textarea use field-pad, select uses select-pad
   -------------------------------------------------------------------------- */

/* Base commune : PAS de padding ici */
.gform_wrapper form.bmd-gf :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  select,
  textarea
){
  font-family: var(--bmd-gf-font) !important;
  font-size: var(--bmd-gf-font-size) !important;
  font-weight: var(--bmd-gf-font-weight) !important;
  line-height: var(--bmd-gf-line-height) !important;
  letter-spacing: var(--bmd-gf-letter-spacing) !important;

  color: var(--bmd-gf-text) !important;
  background: var(--bmd-gf-bg) !important;

  border: var(--bmd-gf-border-width) solid var(--bmd-gf-primary) !important;
  border-radius: var(--bmd-gf-radius) !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Padding standard : inputs + textarea (mais pas select) */
.gform_wrapper form.bmd-gf :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea
){
  padding: var(--bmd-gf-field-pad-y) var(--bmd-gf-field-pad-x) !important;
}

/* Min-height ONLY inputs + select (ne touche pas textarea) */
.gform_wrapper form.bmd-gf :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  select
){
  min-height: var(--bmd-gf-input-min-height) !important;
}

/* ✅ Single-line inputs: vertical alignment (affecte aussi les placeholders) */
.gform_wrapper form.bmd-gf :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"]
){
  line-height: var(--bmd-gf-input-line-height) !important;
  padding-top: var(--bmd-gf-input-pad-top) !important;
  padding-bottom: var(--bmd-gf-input-pad-bottom) !important;
}

/* Textarea (Message): force padding (affecte aussi le placeholder) */
.gform_wrapper form.bmd-gf :is(textarea, textarea.large){
  padding: var(--bmd-gf-textarea-pad-y) var(--bmd-gf-textarea-pad-x) !important;
}

/* ✅ Select: padding dédié + centrage vertical (closed state) */
.gform_wrapper form.bmd-gf :is(select, .ginput_address_country select){
  padding: var(--bmd-gf-select-pad-y) var(--bmd-gf-select-pad-right) var(--bmd-gf-select-pad-y) var(--bmd-gf-select-pad-x) !important;
  line-height: var(--bmd-gf-select-line-height) !important;
  height: var(--bmd-gf-input-min-height) !important;
}

/* Focus */
.gform_wrapper form.bmd-gf :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  select,
  textarea
):focus{
  border-color: var(--bmd-gf-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Textarea height (GF Foundation uses min-block-size on textarea.large) */
.gform_wrapper form.bmd-gf textarea.large{
  min-block-size: var(--bmd-gf-textarea-min-block-size) !important;
}

.gform_wrapper form.bmd-gf textarea{
  padding-top: var(--bmd-gf-textarea-pad-y) !important;
  padding-bottom: var(--bmd-gf-textarea-pad-y) !important;
  padding-left: var(--bmd-gf-textarea-pad-x, var(--bmd-gf-field-pad-x)) !important;
  padding-right: var(--bmd-gf-textarea-pad-x, var(--bmd-gf-field-pad-x)) !important;
}

/* Hide number spinners */
.gform_wrapper form.bmd-gf input[type="number"],
.gform_wrapper form.bmd-gf input[type="number"]:hover,
.gform_wrapper form.bmd-gf input[type="number"]:focus{
  -webkit-appearance: none !important;
  appearance: none !important;
}
.gform_wrapper form.bmd-gf input[type="number"]::-webkit-inner-spin-button,
.gform_wrapper form.bmd-gf input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.gform_wrapper form.bmd-gf input[type="number"]{
  -moz-appearance: textfield !important;
}

/* Hide auto instructions like: "Please enter a number from 1 to 20" */
.gform_wrapper form.bmd-gf .gfield_description.instruction{
  display: none !important;
}

/* --------------------------------------------------------------------------
   6) Layout spacing (GF grid)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf .gform_fields{
  gap: var(--bmd-gf-gap) !important;
  row-gap: var(--bmd-gf-row-gap) !important;
}

/* --------------------------------------------------------------------------
   7) Radios / checkboxes
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf :is(input[type="radio"], input[type="checkbox"]){
  accent-color: var(--bmd-gf-primary) !important;
}

.gform_wrapper form.bmd-gf :is(.gfield_radio, .gfield_checkbox){
  row-gap: var(--bmd-gf-choice-row-gap) !important;
}

.gform_wrapper form.bmd-gf :is(.gfield_radio, .gfield_checkbox) .gchoice{
  display: flex;
  align-items: center;
  gap: var(--bmd-gf-choice-gap);
  margin: 0 !important;
  padding: 0 !important;
}

.gform_wrapper form.bmd-gf :is(.gfield_radio, .gfield_checkbox) :is(input[type="radio"], input[type="checkbox"]){
  margin: 0 !important;
}

.gform_wrapper form.bmd-gf :is(.gfield_radio, .gfield_checkbox) label{
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--bmd-gf-font) !important;
  font-size: var(--bmd-gf-font-size) !important;
  font-weight: var(--bmd-gf-font-weight) !important;
  line-height: var(--bmd-gf-choice-line-height) !important;
  letter-spacing: var(--bmd-gf-letter-spacing) !important;
  color: var(--bmd-gf-text) !important;
}

/* --------------------------------------------------------------------------
   7b) Complex fields / Foundation tweaks
   -------------------------------------------------------------------------- */

/* GF injecte souvent des tailles secondaires/tertiaires sur le wrapper.
   Sans :has(), on cible ton wrapper custom bmd-gf_wrapper. */
.gform_wrapper.bmd-gf_wrapper{
  --gf-font-size-secondary: var(--e-global-typography-text-font-size);
  --gf-font-size-tertiary:  var(--e-global-typography-text-font-size);
}

/* Address: prevent "country" subfield from shrinking when alone */
.gform_wrapper form.bmd-gf .ginput_container_address .ginput_address_country{
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Address grid col: avoid weird min-width constraints */
.gform_wrapper form.bmd-gf .ginput_container_address .gform-grid-col{
  min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   8) Buttons (submit + multipage)
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf :is(
  .gform_button,
  .gform_page_footer .button,
  input[type="submit"]
){
  background-color: var(--bmd-gf-btn-bg) !important;
  padding: var(--bmd-gf-btn-pad-y) var(--bmd-gf-btn-pad-x) !important;

  font-family: var(--bmd-gf-btn-font) !important;
  font-size: var(--bmd-gf-btn-size) !important;
  font-weight: var(--bmd-gf-btn-weight) !important;
  line-height: var(--bmd-gf-btn-line-height) !important;

  color: var(--bmd-gf-btn-color) !important;

  border-style: solid !important;
  border-width: var(--bmd-gf-btn-border-width) !important;
  border-color: var(--bmd-gf-btn-border-color) !important;
  border-radius: var(--bmd-gf-btn-radius) !important;

  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.gform_wrapper form.bmd-gf :is(
  .gform_button,
  .gform_page_footer .button,
  input[type="submit"]
):is(:hover, :focus, :focus-visible){
  background-color: var(--bmd-gf-btn-hover-bg) !important;
  color: var(--bmd-gf-btn-hover-color) !important;
  border-color: var(--bmd-gf-btn-hover-border-color) !important;
}

/* Center submit button */
.gform_wrapper form.bmd-gf .gform_footer{
  padding-top: 1em;
  justify-content: center !important;
}

/* --------------------------------------------------------------------------
   9) Confirmation / validation messages
   -------------------------------------------------------------------------- */

.gform_wrapper form.bmd-gf :is(
  .gform_confirmation_message,
  .gfield_validation_message,
  .validation_message
){
  font-family: var(--bmd-gf-font) !important;
}

/* ==========================================================================
   [OPTION] Separators between questions
   Activate by adding: bmd-gf--separators
   ========================================================================== */

.gform_wrapper form.bmd-gf--separators .gform_fields > .gfield:not(.gfield_visibility_hidden):not(.gfield--type-section){
  border-bottom: 1px solid var(--bmd-gf-sep);
  padding-bottom: var(--bmd-gf-sep-pad);
  margin-bottom: 0 !important;
}

.gform_wrapper form.bmd-gf--separators .gform_fields > .gfield:not(.gfield_visibility_hidden):not(.gfield--type-section):last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   [OPTION] Layout 2 colonnes
   Form class: bmd-gf bmd-gf--two-cols
   Textarea field class: bmd-gf-col-right
   ========================================================================== */

.gform_wrapper form.bmd-gf--two-cols{
  --bmd-gf-two-cols-gap: 30px;
  --bmd-gf-right-footer-h: 75px;
  position: relative;
}

/* Colonne gauche : tous les champs SAUF le message */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield:not(.bmd-gf-col-right){
  max-width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));
}

/* Colonne droite : Message en absolu, flex-column */
.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right{
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--bmd-gf-right-footer-h);
  width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right .ginput_container{
  flex: 1;
  display: flex;
  min-height: 0;
}

.gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right :is(textarea, textarea.large){
  flex: 1;
  min-height: 0 !important;
  min-block-size: 0 !important;
  height: auto;
}

.gform_wrapper form.bmd-gf--two-cols .gform_footer{
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(50% - (var(--bmd-gf-two-cols-gap) / 2));
  height: var(--bmd-gf-right-footer-h);
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  z-index: 2;
}

@media (max-width: 768px){
  .gform_wrapper form.bmd-gf--two-cols{
    --bmd-gf-two-cols-gap: 0px;
    --bmd-gf-right-footer-h: 0px;
  }

  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield:not(.bmd-gf-col-right){
    max-width: 100%;
  }

  .gform_wrapper form.bmd-gf--two-cols :is(
    .gform_fields > .gfield.bmd-gf-col-right,
    .gform_footer
  ){
    position: static;
    width: auto;
    height: auto;
  }

  .gform_wrapper form.bmd-gf--two-cols .gform_footer{
    margin-top: 16px !important;
  }

  .gform_wrapper form.bmd-gf--two-cols .gform_fields > .gfield.bmd-gf-col-right :is(textarea, textarea.large){
    flex: 0 0 auto;
    min-block-size: var(--bmd-gf-textarea-min-block-size, 10rem) !important;
    min-height: unset !important;
  }
}

/* ==========================================================================
   [OPTION] Hide complex field internal sublabels
   Activate by adding: bmd-gf--no-complex-sublabels
   ========================================================================== */

.gform_wrapper form.bmd-gf--no-complex-sublabels .ginput_complex .gform-field-label--type-sub,
.gform_wrapper form.bmd-gf--no-complex-sublabels .ginput_complex label.gform-field-label{
  display: none !important;
}

.gform_wrapper form.bmd-gf--no-complex-sublabels fieldset > legend.gform-field-label{
  display: inline-flex !important;
}

/* --------------------------------------------------------------------------
   Select placeholder state
   - If your <select> has required attribute: native path works.
   - Otherwise: use JS to toggle .bmd-is-placeholder.
   -------------------------------------------------------------------------- */

/* Native path (only if required exists) */
.gform_wrapper form.bmd-gf select:required:invalid{
  color: var(--bmd-gf-placeholder-color) !important;
  font-size: var(--bmd-gf-placeholder-size) !important;
  font-weight: var(--bmd-gf-placeholder-weight) !important;
  letter-spacing: var(--bmd-gf-placeholder-letter-spacing) !important;
  text-transform: var(--bmd-gf-placeholder-transform) !important;
}
.gform_wrapper form.bmd-gf select:required:valid{
  color: var(--bmd-gf-text) !important;
}

/* Robust path (recommended): toggle this class via JS */
.gform_wrapper form.bmd-gf select.bmd-is-placeholder{
  color: var(--bmd-gf-placeholder-color) !important;
  font-size: var(--bmd-gf-placeholder-size) !important;
  font-weight: var(--bmd-gf-placeholder-weight) !important;
  letter-spacing: var(--bmd-gf-placeholder-letter-spacing) !important;
  text-transform: var(--bmd-gf-placeholder-transform) !important;
}
.gform_wrapper form.bmd-gf select:not(.bmd-is-placeholder){
  color: var(--bmd-gf-text) !important;
}