.gform-body legend {
    color: #202852 !important;
    font-family: "proxima_nova", Verdana, sans-serif !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    margin-bottom: 0;
}

.gform-body label {
    color: #202852 !important;
    font-family: "proxima_nova", Verdana, sans-serif !important;
    font-size: 22px !important;
    font-weight: 567 !important;
    margin-bottom: 0;
}

.gform-theme--framework .gf_progressbar .percentbar_blue {
    padding: 15px;
    background-color: #00c4f0 !important;
    color: transparent !important;
}

.stemwijzer_intro {
    padding-bottom: 20px !important;
    border-bottom: 1px solid #dddddd !important;
    margin-bottom: 40px !important;
}

      .stemwijzer-resultaat .swz-head{display:flex;justify-content:space-between;font-weight:600;margin:8px 0}
      .stemwijzer-resultaat .swz-track{background:#eee;border-radius:8px;overflow:hidden;height:20px;margin-bottom:20px}
      .stemwijzer-resultaat .swz-fill{height:20px;width:0%}
      @media (prefers-reduced-motion: reduce){
        .stemwijzer-resultaat .swz-fill{transition:none!important}
      }
      
/* --- Gravity Forms radios: custom UI op het label --- */

/* input verbergen (toegankelijk, maar niet zichtbaar) */
.gform_body .gfield_radio .gchoice .gfield-choice-input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* label als klikdoel + ruimte voor het icoon links */
.gform_body .gfield_radio .gchoice .gform-field-label--type-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 28px;           /* ruimte voor het rondje */
  cursor: pointer;
}

/* basis cirkel */
.gform_body .gfield_radio .gchoice .gform-field-label--type-inline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid #8b8b8b;
  background: #fff;
  transition: border-color .15s ease;
}

/* ingevulde dot (geanimeerd) */
.gform_body .gfield_radio .gchoice .gform-field-label--type-inline::after {
  content: "";
  position: absolute;
  left: 4px;                    /* centreren in de 18px cirkel */
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) scale(0);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background: #00c4f0;          /* JOUW blauw */
  transition: transform .16s ease-out;
}

/* checked = rand ook blauw + dot verschijnt */
.gform_body .gfield_radio .gchoice .gfield-choice-input[type="radio"]:checked
  + .gform-field-label--type-inline::before {
  border-color: #00c4f0;
}
.gform_body .gfield_radio .gchoice .gfield-choice-input[type="radio"]:checked
  + .gform-field-label--type-inline::after {
  transform: translateY(-50%) scale(1);
}

/* focus visueel uit */
.gform_body .gfield_radio .gchoice .gfield-choice-input[type="radio"]:focus
  + .gform-field-label--type-inline::before,
.gform_body .gfield_radio .gchoice .gfield-choice-input[type="radio"]:focus-visible
  + .gform-field-label--type-inline::before {
  outline: none !important;
  box-shadow: none !important;
}

/* haal eventuele oude GF pseudo-styling weg (veilig) */
.gform_body .gfield_radio .gchoice .gform-field-label--type-inline {
  box-shadow: none !important;
}

.gform_previous_button { color: #202852 !important }

input#gform_previous_button_1_18, input#gform_previous_button_1_19, input#gform_previous_button_1_20, input#gform_previous_button_1_21, input#gform_previous_button_1_22, input#gform_previous_button_1_23, input#gform_previous_button_1_24, input#gform_previous_button_1_25, input#gform_previous_button_1 {
    color: #202852 !important;
    border: 1px solid #202852 !important;
    box-shadow: none !important;
}

.layout-container--content {
    max-width: 900px !important;
}

.stemwijzer_intro h3 {
    font-weight: bold;
    font-size: 2rem;
    padding-bottom: 20px;
}

.gform-page-footer.gform_page_footer.top_label {
    gap: 20px;
}

.gform_page_footer input:focus {
    outline: none !important;
}

.stelling-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stelling-block table {
    width: 100%;
}

.stelling-block td, .stelling-block th {
    padding: 8px 16px;
    text-align: left;
}

.stelling-block tr:not(:first-child):not(:last-child) {
    border-bottom: 1px solid rgba(32, 40, 82, 0.25);
}

@media (max-width: 768px) {
  .stelling-block {
    overflow-x: auto;
  }

  .stelling-block table {
    min-width: 100%;
    display: block;
    white-space: nowrap;
  }

  .stelling-block td,
  .stelling-block th {
    padding: 10px;
  }
}

/* ===== Basis ===== */
.stemwijzer-table {
  width: 100%;
  border-collapse: collapse;
}
.stemwijzer-table th,
.stemwijzer-table td {
  padding: 8px 10px;
  vertical-align: top;
  border-bottom: 1px solid #eee;
}

/* ===== Mobiel (≤640px) ===== */
@media (max-width: 640px) {
  /* Zeker weten dat niets buiten de viewport kan tekenen */
  .stemwijzer-table,
  .stemwijzer-table * {
    box-sizing: border-box;
  }

  /* Tabel: blok, clip breedte, geen rare table-collaps */
  .stemwijzer-table {
    display: block;
    width: 100%;
    max-width: 100vw;     /* voorkom 1-2px overflow door subpixels */
    overflow-x: hidden;   /* geen horizontale scrollbar */
    table-layout: fixed;
    border-collapse: separate; /* reset tegen overflow-glitch */
    border-spacing: 0;
  }

  /* Kop verbergen */
  .stemwijzer-table thead { display: none; }

  /* Rijen als 2-koloms grid die mag krimpen */
  .stemwijzer-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* <<< essentieel */
    gap: 6px 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* vervangt cell-borders op mobiel */
    min-width: 0;   /* <<< grid-container mag krimpen */
    max-width: 100%;
  }

  /* Cellen: blokken die kunnen krimpen */
  .stemwijzer-table tbody td {
    display: block;
    border: 0;
    padding: 6px 0;
    min-width: 0;          /* <<< grid-item mag krimpen */
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Kolom 1 links, kolom 2 rechts */
  .stemwijzer-table tbody td:nth-child(1) { grid-column: 1; }
  .stemwijzer-table tbody td:nth-child(2) { grid-column: 2; }

  /* Kolom 3 = Toelichting: volle breedte + label */
  .stemwijzer-table tbody td:nth-child(3) {
    grid-column: 1 / -1;
  }
  .stemwijzer-table tbody td:nth-child(3)::before {
    content: "Toelichting";
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: .8;
  }

  /* Rij met colspan (bijv. "Jij") neemt ook volle breedte */
  .stemwijzer-table tbody td[colspan] {
    grid-column: 1 / -1;
  }

  /* Media in cellen mogen nooit breder zijn dan de viewport */
  .stemwijzer-table tbody td img,
  .stemwijzer-table tbody td svg,
  .stemwijzer-table tbody td video,
  .stemwijzer-table tbody td iframe {
    display: block;
    max-width: 100%;
    height: auto;
  }
}