/* ==========================================================================
   BeyondPFAS — Veolia Webform
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"] {
  --veolia-blue: #004a8f;
  --veolia-blue-focus: #0072ce;
  --veolia-red: #e30613;
  --veolia-red-dark: #bd0010;
  --veolia-text: #292929;
  --veolia-text-secondary: #575757;
  --veolia-border: #d7d5e2;
  --veolia-border-light: #e9e8ef;
  --veolia-surface: #ffffff;
  --veolia-field: #f4f3f9;
  --veolia-field-hover: #efedf6;
  --veolia-selected: #fff7f7;
  --veolia-info: #eef7df;
  --veolia-info-border: #76a82b;
  --veolia-error: #c90017;

  width: 100% !important;
  max-width: 1040px !important;
  margin: 32px auto !important;
  padding: 42px 46px !important;

  box-sizing: border-box !important;
  border: 1px solid var(--veolia-border-light) !important;
  border-radius: 14px !important;

  background: var(--veolia-surface) !important;
  color: var(--veolia-text) !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.04),
    0 20px 46px rgba(0, 0, 0, 0.07) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   1. One title only
   ========================================================================== */

/* Remove the title created by previous JavaScript immediately. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-form-heading {
  display: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-real-form-title {
  display: block !important;

  width: 100% !important;
  margin: 0 0 42px !important;
  padding: 0 !important;

  color: var(--veolia-blue) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -1.3px !important;
  text-align: center !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-real-form-title.bpfas-duplicate-heading,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-real-form-title.bpfas-duplicate-title {
  display: block !important;
}

/* ==========================================================================
   2. Dynamic visibility
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-is-hidden,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
[hidden].bpfas-is-hidden {
  display: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-is-visible {
  display: block !important;
}

/* ==========================================================================
   3. Required marker — one star only
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-required {
  background: none !important;
  background-image: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-required::before,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.js-form-required::before {
  content: none !important;
  display: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-required::after,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.js-form-required::after {
  content: "*" !important;

  display: inline-block !important;

  width: auto !important;
  height: auto !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;

  background: none !important;
  background-image: none !important;

  color: var(--veolia-red) !important;

  font-size: 1em !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
abbr.form-required {
  display: none !important;
}

/* ==========================================================================
   4. Progress tracker
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-progress {
  width: 100% !important;
  margin: 0 0 52px !important;
  padding: 0 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-tracker {
  display: flex !important;
  align-items: flex-start !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step {
  position: relative !important;

  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 8px !important;

  text-align: center !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step::after {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;
  top: 15px !important;
  left: 50% !important;

  width: 100% !important;
  height: 3px !important;

  background: #858585 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step:last-child::after {
  display: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-marker {
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 31px !important;
  height: 31px !important;
  margin: 0 auto !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #7f7f7f !important;
  color: #ffffff !important;

  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 31px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-marker::before {
  content: attr(data-text) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step.is-active
.progress-marker {
  background: #169fdb !important;

  box-shadow:
    0 0 0 5px rgba(22, 159, 219, 0.14) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step.is-complete
.progress-marker {
  background: #333333 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-text {
  margin-top: 11px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-title {
  color: #686868 !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step.is-active
.progress-title {
  color: var(--veolia-text) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   5. Fields
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
fieldset {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-item:not(.form-type-radio):not(.form-type-checkbox):not(.form-item-webform_markup) {
  width: 100% !important;
  margin: 0 0 25px !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
label:not(.option),
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.fieldset-legend {
  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 9px !important;
  padding: 0 !important;

  color: var(--veolia-text) !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-item__description,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-element-description,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.description {
  display: none !important;
}

/* Inputs. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-text,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-email,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-tel,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-number,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-url,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
textarea.form-textarea {
  display: block !important;

  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 14px 17px !important;

  box-sizing: border-box !important;
  border: 1px solid var(--veolia-border) !important;
  border-radius: 5px !important;

  background: var(--veolia-field) !important;
  color: var(--veolia-text) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 22px !important;
  text-transform: none !important;

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

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
textarea.form-textarea {
  min-height: 145px !important;
  height: auto !important;

  resize: vertical !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input::placeholder,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
textarea::placeholder {
  color: #707070 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-text:focus,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-email:focus,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
input.form-tel:focus,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
textarea.form-textarea:focus {
  border-color: var(--veolia-blue-focus) !important;
  background: #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(0, 114, 206, 0.12) !important;
}

/* ==========================================================================
   6. Selects
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
select.form-select:not(.select2-hidden-accessible) {
  display: block !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 14px 17px 14px 48px !important;

  box-sizing: border-box !important;
  border: 1px solid var(--veolia-border) !important;
  border-radius: 5px !important;

  background-color: var(--veolia-field) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23292929' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 18px center !important;
  background-size: 14px !important;

  color: var(--veolia-text) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;

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

/* ==========================================================================
   7. Client cards
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice {
  display: block !important;

  width: 100% !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
legend {
  margin: 0 0 17px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
.webform-options-display-side-by-side {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
.form-type-radio {
  display: grid !important;

  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;

  min-height: 82px !important;
  margin: 0 !important;
  padding: 0 22px !important;

  box-sizing: border-box !important;
  border: 1px solid var(--veolia-border) !important;
  border-radius: 6px !important;

  background: #ffffff !important;

  cursor: pointer !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
.form-type-radio.bpfas-client-card-selected {
  border-color: var(--veolia-red) !important;
  background: var(--veolia-selected) !important;

  box-shadow:
    inset 0 0 0 1px var(--veolia-red) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
.form-type-radio
.ui-front {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 24px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: grid !important;
  place-content: center !important;

  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;

  border: 2px solid #777777 !important;
  border-radius: 50% !important;

  background: #ffffff !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
input[type="radio"]::before {
  content: "" !important;

  width: 12px !important;
  height: 12px !important;

  border-radius: 50% !important;
  background: var(--veolia-red) !important;

  transform: scale(0) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
input[type="radio"]:checked {
  border-color: var(--veolia-red) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
input[type="radio"]:checked::before {
  transform: scale(1) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-type-choice
label.option {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 18px 0 !important;

  color: var(--veolia-text) !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important;

  cursor: pointer !important;
}

/* ==========================================================================
   8. Particular message
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.client-routing-message {
  width: 100% !important;
  margin: 6px 0 28px !important;
  padding: 22px 25px !important;

  box-sizing: border-box !important;
  border: 1px solid #d8e9bb !important;
  border-left: 5px solid var(--veolia-info-border) !important;
  border-radius: 6px !important;

  background: var(--veolia-info) !important;
  color: var(--veolia-text) !important;

  font-size: 15px !important;
  line-height: 23px !important;
}

/* ==========================================================================
   9. Flexboxes
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-flexbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;

  width: 100% !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-flex {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-request-row:not(.bpfas-other-selected)
.bpfas-request-type-column {
  flex: 1 1 100% !important;
  width: 100% !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-request-row.bpfas-other-selected
.bpfas-request-type-column,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.bpfas-request-row.bpfas-other-selected
.bpfas-precision-column {
  flex: 1 1 calc(50% - 12px) !important;
  width: calc(50% - 12px) !important;
}

/* ==========================================================================
   10. Actions
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 26px !important;

  width: 100% !important;
  margin: 36px 0 0 !important;
  padding: 28px 0 0 !important;

  border-top: 1px solid var(--veolia-border-light) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-legal-notice {
  flex: 1 1 430px !important;
  max-width: 660px !important;

  color: var(--veolia-text-secondary) !important;

  font-size: 13px !important;
  line-height: 20px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-submit-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

/* Remove all arrows and icons. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions
input,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions
button,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions
.button {
  background-image: none !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions
*::before,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.form-actions
*::after {
  content: none !important;
  display: none !important;
}

/* Next and submit. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-button--next,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-button--submit {
  min-width: 154px !important;
  min-height: 50px !important;
  padding: 13px 31px !important;

  border: 1px solid var(--veolia-red) !important;
  border-radius: 999px !important;

  background: var(--veolia-red) !important;
  color: #ffffff !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

  box-shadow:
    0 6px 16px rgba(227, 6, 19, 0.16) !important;
}

/* Previous. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.webform-button--previous {
  min-width: 154px !important;
  min-height: 50px !important;
  padding: 13px 31px !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 999px !important;

  background: #ecebf2 !important;
  color: var(--veolia-text) !important;

  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 768px) {
  form.webform-submission-form[class*="webform-submission-beyondpfas-"] {
    margin: 16px auto !important;
    padding: 28px 20px !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .bpfas-real-form-title {
    font-size: 36px !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-progress {
    overflow-x: auto !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .progress-tracker {
    min-width: 620px !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .client-type-choice
  .webform-options-display-side-by-side {
    grid-template-columns: 1fr !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-flexbox {
    flex-direction: column !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-flex,
  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .bpfas-request-row.bpfas-other-selected
  .bpfas-request-type-column,
  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .bpfas-request-row.bpfas-other-selected
  .bpfas-precision-column {
    width: 100% !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-legal-notice {
    flex: 1 1 100% !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-submit-wrapper {
    width: 100% !important;
    flex-direction: column-reverse !important;
  }

  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-button--next,
  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-button--submit,
  form.webform-submission-form[class*="webform-submission-beyondpfas-"]
  .webform-button--previous {
    width: 100% !important;
  }
}
/* ==========================================================================
   FINAL POLISH — progress line and dropdown consistency
   ========================================================================== */

/* ==========================================================================
   1. Clean wizard progress line
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-tracker {
  position: relative !important;
}

/*
 * Use one continuous line behind all markers.
 * This avoids the short black segments visible beside each circle.
 */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-tracker::before {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;
  top: 15px !important;
  left: 10% !important;
  right: 10% !important;

  width: auto !important;
  height: 3px !important;

  border: 0 !important;
  background: #858585 !important;
}

/* Remove the old segmented lines. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step::before,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-step::after,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-marker::after {
  content: none !important;
  display: none !important;
}

/* Keep each marker above the continuous line. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-marker {
  position: relative !important;
  z-index: 2 !important;

  box-sizing: border-box !important;
}

/* Keep the step number visible. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.progress-marker::before {
  content: attr(data-text) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: static !important;

  width: 100% !important;
  height: 100% !important;

  background: transparent !important;
  color: inherit !important;

  font-size: inherit !important;
  line-height: inherit !important;
}

/* ==========================================================================
   2. Native dropdowns — match the text fields
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
select.form-select:not(.select2-hidden-accessible) {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 14px 48px 14px 17px !important;

  box-sizing: border-box !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 5px !important;

  background-color: var(--veolia-field) !important;

  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23292929' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 17px center !important;
  background-size: 16px 16px !important;

  color: var(--veolia-text) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;

  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
select.form-select:not(.select2-hidden-accessible):hover {
  border-color: #c5c2d1 !important;
  background-color: var(--veolia-field-hover) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
select.form-select:not(.select2-hidden-accessible):focus {
  border-color: var(--veolia-blue-focus) !important;
  background-color: #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(0, 114, 206, 0.12) !important;
}

/* Remove the native Microsoft arrow. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
select.form-select::-ms-expand {
  display: none !important;
}

/* ==========================================================================
   3. Select2 dropdowns — same visual treatment
   ========================================================================== */

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-container
.select2-selection--single {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  box-sizing: border-box !important;

  border: 1px solid var(--veolia-border) !important;
  border-radius: 5px !important;

  background-color: var(--veolia-field) !important;

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

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-container
.select2-selection--single:hover {
  border-color: #c5c2d1 !important;
  background-color: var(--veolia-field-hover) !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-selection--single
.select2-selection__rendered {
  height: 50px !important;

  padding: 0 48px 0 17px !important;

  color: var(--veolia-text) !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 50px !important;
}

/* Place the Select2 arrow on the right. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-selection--single
.select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 17px !important;
  left: auto !important;

  width: 16px !important;
  height: 16px !important;

  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

/* Replace the default Select2 triangle. */
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-selection--single
.select2-selection__arrow
b {
  display: block !important;
  position: static !important;

  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;

  border: 0 !important;

  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23292929' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-container--focus
.select2-selection--single,
form.webform-submission-form[class*="webform-submission-beyondpfas-"]
.select2-container--open
.select2-selection--single {
  border-color: var(--veolia-blue-focus) !important;
  background-color: #ffffff !important;

  box-shadow:
    0 0 0 3px rgba(0, 114, 206, 0.12) !important;
}

/* ==========================================================================
   4. Dropdown menu panel
   ========================================================================== */

.select2-container--open
.select2-dropdown {
  overflow: hidden !important;

  border: 1px solid var(--veolia-border, #d7d5e2) !important;
  border-radius: 5px !important;

  background: #ffffff !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

.select2-container--default
.select2-results__option {
  padding: 11px 16px !important;

  background: #ffffff !important;
  color: #292929 !important;

  font-family: "Noto Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

.select2-container--default
.select2-results__option--highlighted[aria-selected],
.select2-container--default
.select2-results__option--highlighted[data-selected] {
  background: #f4f3f9 !important;
  color: #292929 !important;
}

.select2-container--default
.select2-results__option[aria-selected="true"],
.select2-container--default
.select2-results__option[data-selected="true"] {
  background: #e8f3fa !important;
  color: #004a8f !important;

  font-weight: 700 !important;
}