/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

.elementor-size-sm a:hover, .elementor-button[type="submit"]:hover, a.elementor-size-sm:hover {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

input#input_4_28, input#input_4_29, input#input_4_13, input#input_4_12, input#input_8_13 {
    font-size: 25px;
	font-weight: 700;
}

.offertenummers-container {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}
.offertenummers-lijst {
    list-style: disc;
    padding-left: 20px;
    margin: 10px 0 0 0;
}
.offertenummers-lijst li {
    margin-bottom: 6px;
    font-weight: 500;
}
.offertenummers-lijst li:empty {
    display: none;
}

@media screen and (max-width: 600px) {
	#gform_wrapper_4 h2 {
		font-size: 30px ;
	}
}

h3.gsection_title {
    font-size: smaller;
	color: #4a7c59;
}
tabel.gform-field-label.gform-field-label--type-sub {
    font-weight: 500;
}
h3.gsection_title {
    width: auto;
    float: left;
}
div#gfield_description_17_15 {
    font-size: 14px;
    font-weight: 400;
    left: 10px;
    position: relative;
}
button.gt-summary-edit {
    padding: 14px 20px;
    font-size: 15px !important;
}
button.gt-summary-edit:hover {
    background-color: #2d5f3f;
    color: #f3f6f1;
}

/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   GreenTeam — Bespaarpotentieel stylesheet
   29 april 2026

   Structuur:
     1. Theme defaults & utilities (niet-actie-3)
     2. CSS variabelen
     3. Form-velden basis (uniform via .gt-rekentool / .gt-adviesgesprek)
     4. Specifieke veldtypes: chips, checkboxes, dropdown, iconen, buttons
     5. Page steps indicator
     6. Resultaat blok (stap 3)
     7. Sidebar samenvatting (pagina 2)
     8. Product cards (pagina 2)
     9. Modal styling (nog niet geactiveerd, bewaard voor toekomstig gebruik)
     10. Mobile aanpassingen
   ============================================================ */


/* ============================================================
   1. THEME DEFAULTS & UTILITIES
   ============================================================ */

.elementor-size-sm a:hover, .elementor-button[type="submit"]:hover, a.elementor-size-sm:hover {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

input#input_4_28, input#input_4_29, input#input_4_13, input#input_4_12, input#input_8_13 {
    font-size: 25px;
	font-weight: 700;
}

.offertenummers-container {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
}
.offertenummers-lijst {
    list-style: disc;
    padding-left: 20px;
    margin: 10px 0 0 0;
}
.offertenummers-lijst li {
    margin-bottom: 6px;
    font-weight: 500;
}
.offertenummers-lijst li:empty {
    display: none;
}

@media screen and (max-width: 600px) {
	#gform_wrapper_4 h2 {
		font-size: 30px ;
	}
}

h3.gsection_title {
    font-size: smaller;
	color: #4a7c59;
    width: auto;
    float: left;
}

div#gfield_description_17_15 {
    font-size: 14px;
    font-weight: 400;
    left: 10px;
    position: relative;
}


/* ============================================================
   2. CSS VARIABELEN
   ============================================================ */
:root {
  --gt-green-700: #2d5f3f;
  --gt-green-600: #4a7c59;
  --gt-green-500: #6b9b76;
  --gt-green-100: #e8efe9;
  --gt-green-50:  #f3f6f1;
  --gt-cream:     #f5f1e8;
  --gt-navy:      #1a2332;
  --gt-text:      #2a3a3a;
  --gt-text-muted: #6b7a6e;
  --gt-white:     #ffffff;
  --gt-amber:     #d97706;
  --gt-border:    #e2e0d8;

  --gt-shadow-sm: 0 1px 2px rgba(45,95,63,0.06);
  --gt-shadow-md: 0 4px 12px rgba(45,95,63,0.08);
  --gt-shadow-lg: 0 12px 32px rgba(45,95,63,0.12);

  --gt-radius:    14px;
  --gt-radius-sm: 10px;
}


/* ============================================================
   3. FORM-VELDEN BASIS (uniform)
   ============================================================ */

.gt-rekentool .gform_wrapper,
.gt-adviesgesprek .gform_wrapper {
  max-width: 100%;
  margin: 0;
}

.gt-rekentool .gfield,
.gt-adviesgesprek .gfield {
  margin-bottom: 16px !important;
}

.gt-rekentool .gfield_label,
.gt-adviesgesprek .gfield_label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-navy);
  margin-bottom: 8px;
}

.gt-rekentool .gfield_required,
.gt-adviesgesprek .gfield_required {
  color: var(--gt-amber);
}

.gt-rekentool .gfield_description,
.gt-adviesgesprek .gfield_description {
  font-size: 12px;
  color: var(--gt-text-muted);
  margin-top: 4px;
}

/* Inputs uniforme styling — alle types */
body .gt-rekentool input[type="text"],
body .gt-rekentool input[type="number"],
body .gt-rekentool input[type="email"],
body .gt-rekentool input[type="tel"],
body .gt-rekentool input[type="date"],
body .gt-rekentool select.gfield_select,
body .gt-rekentool textarea,
body .gt-adviesgesprek input[type="text"],
body .gt-adviesgesprek input[type="number"],
body .gt-adviesgesprek input[type="email"],
body .gt-adviesgesprek input[type="tel"],
body .gt-adviesgesprek input[type="date"],
body .gt-adviesgesprek select.gfield_select,
body .gt-adviesgesprek textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--gt-border) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  background: var(--gt-white) !important;
  color: var(--gt-navy) !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Focus state uniform */
body .gt-rekentool input:focus,
body .gt-rekentool select:focus,
body .gt-rekentool textarea:focus,
body .gt-adviesgesprek input:focus,
body .gt-adviesgesprek select:focus,
body .gt-adviesgesprek textarea:focus {
  outline: none !important;
  border-color: var(--gt-green-600) !important;
  box-shadow: 0 0 0 3px var(--gt-green-50) !important;
}

/* Placeholder kleur uniform */
body .gt-rekentool input::placeholder,
body .gt-rekentool textarea::placeholder,
body .gt-adviesgesprek input::placeholder,
body .gt-adviesgesprek textarea::placeholder {
  color: var(--gt-text-muted) !important;
  opacity: 1 !important;
}


/* ============================================================
   4a. CHIP-STYLE RADIO BUTTONS (gt-chips class)
   GF DOM: fieldset > div.ginput_container_radio > div.gfield_radio > div.gchoice
   ============================================================ */

/* Reset eventuele wrapping */
body .gfield.gt-chips,
body .gfield.gt-chips .ginput_container,
body .gfield.gt-chips .ginput_container_radio {
  display: block !important;
  width: 100% !important;
}

/* DE flex container voor de chips */
body .gfield.gt-chips .gfield_radio,
body .gfield.gt-chips div[id^="input_"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* De choices — flex-grow tot 50% */
body .gfield.gt-chips .gfield_radio .gchoice,
body .gfield.gt-chips div[id^="input_"] > .gchoice {
  flex: 1 1 calc(50% - 6px) !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
}

/* Voor 6+ choices (zoals personen 1-6+ in modal): flex-basis kleiner */
body .gfield.gt-chips .gfield_radio:has(.gchoice:nth-child(5)) .gchoice {
  flex: 1 1 calc(33.333% - 8px) !important;
}

/* Verberg native radio button */
.gfield.gt-chips .gfield_radio .gchoice input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Label = visuele chip */
body .gfield.gt-chips .gfield_radio .gchoice label,
body .gfield.gt-chips div[id^="input_"] > .gchoice > label {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--gt-border) !important;
  border-radius: var(--gt-radius-sm) !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  color: var(--gt-text) !important;
  background: var(--gt-white) !important;
  margin: 0 !important;
}

/* Geselecteerde chip */
.gfield.gt-chips .gfield_radio .gchoice input[type="radio"]:checked + label {
  border-color: var(--gt-green-600) !important;
  background: var(--gt-green-50) !important;
  color: var(--gt-green-700) !important;
  font-weight: 600 !important;
}


/* ============================================================
   4b. CUSTOM CHECKBOXES (Setup checks pagina 1)
   ============================================================ */

body .gt-rekentool .ginput_container_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

body .gt-rekentool .ginput_container_checkbox label {
  position: relative;
  padding-left: 30px !important;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  color: var(--gt-text);
  line-height: 1.4;
  user-select: none;
  margin: 0;
}

body .gt-rekentool .ginput_container_checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gt-border);
  border-radius: 5px;
  background: var(--gt-white);
  transition: all 0.2s;
}

body .gt-rekentool .ginput_container_checkbox input[type="checkbox"]:checked + label::before {
  background: var(--gt-green-600);
  border-color: var(--gt-green-600);
}

body .gt-rekentool .ginput_container_checkbox label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--gt-white);
  border-bottom: 2px solid var(--gt-white);
  opacity: 0;
  transition: opacity 0.2s;
}

body .gt-rekentool .ginput_container_checkbox input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

/* Margins tussen checkboxes */
body .gt-rekentool .ginput_container_checkbox ul li {
  margin: 10px 0 !important;
}

body .gt-rekentool .ginput_container_checkbox ul li:first-child {
  margin-top: 0 !important;
}

body .gt-rekentool .ginput_container_checkbox ul li:last-child {
  margin-bottom: 0 !important;
}


/* ============================================================
   4c. DROPDOWN — tekst zichtbaar + custom chevron
   ============================================================ */

/* Forceer color op alle select-states (overschrijft theme overrides) */
body .gt-rekentool select,
body .gt-rekentool select.gfield_select,
body .gt-rekentool select.large,
body .gt-rekentool .ginput_container_select select,
html body .gt-rekentool select option,
html body .gt-rekentool select option:not(:disabled),
body .gt-adviesgesprek select,
body .gt-adviesgesprek select.gfield_select,
body .gt-adviesgesprek select.large,
body .gt-adviesgesprek .ginput_container_select select {
  color: #1a2332 !important;
  -webkit-text-fill-color: #1a2332 !important;
  text-shadow: none !important;
  font-size: 15px !important;
  opacity: 1 !important;
  filter: none !important;
}

body .gt-rekentool select option[selected],
body .gt-adviesgesprek select option[selected] {
  color: #1a2332 !important;
}

/* Placeholder option (waarde="") in lichtere kleur */
.gt-rekentool select option[value=""],
.gt-adviesgesprek select option[value=""] {
  color: var(--gt-text-muted) !important;
}

/* Custom chevron */
.gt-rekentool .ginput_container_select,
.gt-adviesgesprek .ginput_container_select {
  position: relative;
}

body .gt-rekentool .ginput_container_select::after,
body .gt-adviesgesprek .ginput_container_select::after {
  content: '⌄';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-65%);
  pointer-events: none;
  color: var(--gt-green-600);
  font-size: 14px;
  font-weight: 700;
}

body .gt-rekentool select.gfield_select,
body .gt-adviesgesprek select.gfield_select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 48px !important;
}


/* ============================================================
   4d. REQUIRED INDICATOR — "(Vereist)" → asterisk
   ============================================================ */

.gt-rekentool .gfield_required_text,
.gt-adviesgesprek .gfield_required_text {
  display: none !important;
}

.gt-rekentool .gfield_required::before,
.gt-adviesgesprek .gfield_required::before {
  content: ' *';
  color: var(--gt-amber);
  font-weight: 700;
  margin-left: 2px;
}

/* Voorkom dubbele asterisks */
.gt-rekentool .gfield_required .gfield_required::before,
.gt-adviesgesprek .gfield_required .gfield_required::before {
  content: none !important;
}


/* ============================================================
   4e. ICONEN in input-velden (gt-input-kwh, gt-input-gas, gt-input-opwek)
   ============================================================ */

body .gt-rekentool .ginput_container_number {
  position: relative;
}

body .gt-rekentool .gfield--input-type-number .ginput_container_number::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

body .gt-rekentool .gfield.gt-input-kwh .ginput_container_number::before {
  content: '⚡';
}

body .gt-rekentool .gfield.gt-input-gas .ginput_container_number::before {
  content: '🔥';
}

body .gt-rekentool .gfield.gt-input-opwek .ginput_container_number::before {
  content: '☀';
}

/* Padding-left in input voor ruimte voor icoon */
input#input_16_12, input#input_16_10, input#input_16_17 {
	padding: 14px 45px !important;
}


/* ============================================================
   4f. BUTTONS — Submit, Next, Previous (page footer)
   ============================================================ */

/* Default page footer (stap 1, 2): buttons naast elkaar */
body .gt-rekentool .gform_page_footer {
  display: flex !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
}

/* Vorige knop — neutraal grijs */
body .gt-rekentool .gform_page_footer .gform_previous_button {
  flex: 0 0 auto !important;
  width: auto !important;
  background: var(--gt-white) !important;
  color: var(--gt-text-muted) !important;
  padding: 12px 24px !important;
  border-radius: var(--gt-radius-sm) !important;
  border: 1.5px solid var(--gt-border) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.2s !important;
  margin: 0 !important;
}

body .gt-rekentool .gform_page_footer .gform_previous_button:hover {
  background: var(--gt-green-50) !important;
  border-color: var(--gt-green-600) !important;
  color: var(--gt-green-700) !important;
}

/* Volgende-knop / Submit — groot en groen */
body .gt-rekentool .gform_page_footer .gform_next_button,
body .gt-rekentool .gform_page_footer .gform_button,
body .gt-adviesgesprek .gform_button {
  flex: 1 1 auto !important;
  width: auto !important;
  background: var(--gt-green-600) !important;
  color: var(--gt-white) !important;
  padding: 14px !important;
  border-radius: var(--gt-radius-sm) !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background 0.2s !important;
  margin: 0 !important;
}

body .gt-rekentool .gform_page_footer .gform_next_button:hover,
body .gt-rekentool .gform_page_footer .gform_button:hover,
body .gt-adviesgesprek .gform_button:hover {
  background: var(--gt-green-700) !important;
}

/* Stap 3 — buttons gestapeld + volgorde omgedraaid */
body .gt-rekentool .gform_page_footer:has(.gform_button) {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 20px !important;
}

body .gt-rekentool .gform_page_footer .gform_button {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

body .gt-rekentool .gform_page_footer:has(.gform_button) .gform_previous_button {
  order: 2 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  padding: 14px !important;
}

/* Spacing tussen resultaat en buttons inkorten */
body .gt-rekentool .gfield--type-html:last-of-type {
  margin-bottom: 0 !important;
}

body .gt-rekentool .gform_page:has(.gform_button) .gform_page_footer {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Fallback voor browsers zonder :has() */
@supports not (selector(:has(*))) {
  body .gt-rekentool .gform_page_footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body .gt-rekentool .gform_page_footer .gform_button {
    order: 1;
    width: 100%;
  }
  body .gt-rekentool .gform_page_footer .gform_previous_button {
    order: 2;
    width: 100%;
  }
}


/* ============================================================
   5. PAGE STEPS INDICATOR (custom GF page-progress)
   ============================================================ */

body .gf_page_steps {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  position: relative !important;
  margin: 8px 0 32px 0 !important;
  padding: 0 20px !important;
  list-style: none !important;
  background: transparent !important;
  border: none !important;
  counter-reset: step-counter;
}

/* Grijze base-line achter cirkels */
body .gf_page_steps::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 38px;
  right: 38px;
  height: 2px;
  background: var(--gt-border);
  z-index: 0;
}

/* Groene progress-line */
body .gf_page_steps::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 38px;
  height: 2px;
  background: var(--gt-green-600);
  z-index: 1;
  transition: width 0.4s ease;
}

/* Groene lijn-breedte gebaseerd op active stap */
body .gf_page_steps:not(:has(.gf_step_completed))::after {
  width: 0;
}

body .gf_page_steps:has(.gf_step_active.gf_step_first)::after {
  width: 0;
}

body .gf_page_steps:has(.gf_step_active.gf_step_last)::after {
  width: calc(100% - 76px);
}

body .gf_page_steps:has(.gf_step_active):not(:has(.gf_step_active.gf_step_first)):not(:has(.gf_step_active.gf_step_last))::after {
  width: calc(50% - 38px);
}

/* Stap container */
body .gf_page_steps .gf_step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  z-index: 2 !important;
  background: var(--gt-white) !important;
  padding: 0 8px !important;
  flex: 0 0 auto !important;
  border: none !important;
}

/* Cijfer / cirkel */
body .gf_page_steps .gf_step .gf_step_number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--gt-white) !important;
  border: 2px solid var(--gt-border) !important;
  color: var(--gt-text-muted) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Voltooide stap */
body .gf_page_steps .gf_step.gf_step_completed .gf_step_number {
  background: var(--gt-green-700) !important;
  border-color: var(--gt-green-700) !important;
  color: white !important;
}

body .gf_page_steps .gf_step.gf_step_completed .gf_step_number::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 6px;
  height: 11px;
  border-right: 2.5px solid var(--gt-white);
  border-bottom: 2.5px solid var(--gt-white);
}

/* Actieve stap */
body .gf_page_steps .gf_step.gf_step_active .gf_step_number {
  background: var(--gt-green-50) !important;
  border-color: var(--gt-green-600) !important;
  border-width: 2.5px !important;
  color: var(--gt-green-700) !important;
  font-size: 15px !important;
  transform: scale(1.05);
  box-shadow: 0 0 0 4px rgba(74, 124, 89, 0.12);
  animation: gt-step-pop 0.3s ease;
}

@keyframes gt-step-pop {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}

/* Stap labels */
body .gf_page_steps .gf_step .gf_step_label {
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--gt-text-muted) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  transition: color 0.3s ease !important;
}

body .gf_page_steps .gf_step.gf_step_completed .gf_step_label {
  color: var(--gt-navy) !important;
}

body .gf_page_steps .gf_step.gf_step_active .gf_step_label {
  color: var(--gt-green-700) !important;
}


/* ============================================================
   6. STAP 1 INTRO + WAARSCHUWING
   ============================================================ */

.gt-step-intro h2.gt-step-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--gt-navy);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.gt-step-intro h2.gt-step-title em {
  color: var(--gt-green-600);
  font-style: italic;
  font-weight: 400;
}

.gt-step-intro p.gt-step-sub {
  font-size: 14px;
  color: var(--gt-text-muted);
  margin-bottom: 20px;
  font-weight: 500 !important;
}

.gt-warning {
  background: #fef3e2;
  border-left: 3px solid var(--gt-amber);
  padding: 14px 16px;
  border-radius: var(--gt-radius-sm);
  font-size: 13px;
  color: #8b4513;
}

.gt-warning p {
  margin-bottom: 6px;
}

.gt-warning p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   7. STAP 3 — RESULTAAT BLOK
   ============================================================ */

.gt-result {
  text-align: center;
  padding: 16px 0;
}

.gt-result-title {
  font-size: 26px;
  font-weight: 500;
  color: var(--gt-navy);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}

.gt-result-sub {
  font-size: 14px;
  color: var(--gt-text-muted);
  margin-bottom: 8px;
}

.gt-amount-wrapper {
  margin: 16px 0 24px;
}

.gt-amount {
  font-size: 56px;
  font-weight: 500;
  color: var(--gt-navy);
  letter-spacing: -2px;
  line-height: 1;
}

.gt-amount .gt-currency {
  font-size: 32px;
  color: var(--gt-green-600);
  margin-right: 4px;
}

.gt-amount .gt-period {
  font-size: 24px;
  color: var(--gt-text-muted);
}

.gt-note {
  font-size: 12px;
  color: var(--gt-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.gt-breakdown-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gt-navy);
  margin: 24px 0 12px;
}

.gt-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 24px;
}

.gt-bd-item {
  background: var(--gt-green-50);
  padding: 12px;
  border-radius: var(--gt-radius-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.gt-bd-item .gt-bd-icon {
  font-size: 18px;
}

.gt-bd-item strong {
  font-weight: 700;
  color: var(--gt-navy);
}

.gt-bd-item .gt-bd-unit {
  font-size: 11px;
  color: var(--gt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ============================================================
   8. PAGINA 2 — SIDEBAR SAMENVATTING (shortcode output)
   ============================================================ */

.gt-summary-panel {
  background: var(--gt-white);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--gt-shadow-md);
}

.gt-summary-panel h3.gt-summary-title {
  font-size: 18px;
  color: var(--gt-navy);
  font-weight: 500;
  margin-bottom: 4px;
}

.gt-summary-panel h3.gt-summary-title em {
  color: var(--gt-green-600);
  font-style: italic;
}

.gt-summary-sub {
  font-size: 13px;
  color: var(--gt-text-muted);
  margin-bottom: 20px;
}

.gt-summary-amount {
  font-size: 42px;
  font-weight: 500;
  color: var(--gt-green-700);
  letter-spacing: -1.5px;
  margin: 8px 0;
  line-height: 1;
}

.gt-summary-amount .gt-currency {
  font-size: 24px;
  color: var(--gt-green-500);
  margin-right: 2px;
}

.gt-summary-note {
  font-size: 12px;
  color: var(--gt-text-muted);
  margin-bottom: 0;
}

.gt-summary-divider {
  height: 1px;
  background: var(--gt-green-100);
  margin: 20px 0;
  border: none;
}

.gt-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
}

.gt-summary-row .gt-summary-label {
  color: var(--gt-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gt-summary-row .gt-summary-val {
  font-weight: 600;
  color: var(--gt-navy);
}

button.gt-summary-edit {
  margin-top: 16px;
  background: var(--gt-green-50);
  border: none;
  color: var(--gt-green-700);
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 15px !important;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background 0.2s;
}

button.gt-summary-edit:hover {
  background-color: #2d5f3f;
  color: #f3f6f1;
}

.gt-support-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gt-green-100);
}

.gt-support-block h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-navy);
  margin-bottom: 8px;
}

.gt-support-block p {
  font-size: 12px;
  color: var(--gt-text-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.gt-support-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gt-green-700);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 0;
}

.gt-support-link:hover {
  text-decoration: underline;
}


/* ============================================================
   9. PRODUCT CARDS (Form 17 — Adviesgesprek pagina 2)
   GF rendert checkboxes als <div class="gfield_checkbox">
   met <div class="gchoice"> per keuze (geen ul/li).
   ============================================================ */

/* Force full width op alle nesting levels */
body .gfield.gt-product-cards .ginput_container,
body .gfield.gt-product-cards .ginput_container_checkbox {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Grid container — 2 kolommen */
body .gfield.gt-product-cards .ginput_container_checkbox .gfield_checkbox {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Choice cell */
body .gfield.gt-product-cards .ginput_container_checkbox .gchoice {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: block !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* Laatste card vult volle breedte indien oneven aantal */
body .gfield.gt-product-cards .ginput_container_checkbox .gchoice:nth-child(odd):last-child {
  grid-column: 1 / -2 !important;
}

/* Checkbox verbergen */
body .gfield.gt-product-cards input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Card = label */
body .gfield.gt-product-cards .gchoice label,
body .gfield.gt-product-cards .gchoice label.gform-field-label,
body .gfield.gt-product-cards .gchoice label.gform-field-label--type-inline {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 16px !important;
  border: 1.5px solid var(--gt-border) !important;
  border-radius: 14px !important;
  background: var(--gt-white) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--gt-navy) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
  flex: 1 1 100% !important;
}

body .gfield.gt-product-cards .gchoice label:hover {
  border-color: var(--gt-green-500) !important;
  transform: translateY(-1px);
  box-shadow: var(--gt-shadow-sm);
}

body .gfield.gt-product-cards input[type="checkbox"]:checked + label {
  border-color: var(--gt-green-600) !important;
  background: var(--gt-green-50) !important;
}

/* Checkbox indicator boven productnaam */
body .gfield.gt-product-cards .gchoice label::before {
  content: '';
  position: relative !important;
  display: block !important;
  top: 0 !important;
  left: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin-bottom: 8px !important;
  border-radius: 50%;
  border: 1.5px solid #c8c4b6 !important;
  background: var(--gt-white) !important;
  transition: all 0.2s;
}

body .gfield.gt-product-cards input[type="checkbox"]:checked + label::before {
  background: var(--gt-green-600) !important;
  border-color: var(--gt-green-600) !important;
}

/* Vinkje binnen indicator */
body .gfield.gt-product-cards input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute !important;
  top: 21px !important;
  left: 24px !important;
  width: 5px !important;
  height: 9px !important;
  border-right: 2px solid var(--gt-white) !important;
  border-bottom: 2px solid var(--gt-white) !important;
  transform: rotate(45deg) !important;
}

/* Voordelen-lijst (door JS geïnjecteerd) */
body .gfield.gt-product-cards .gt-product-benefits {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  border-top: none !important;
  font-size: 12px !important;
  color: var(--gt-text-muted) !important;
}

body .gfield.gt-product-cards .gt-product-benefits li {
  padding: 3px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  line-height: 1.4 !important;
}

body .gfield.gt-product-cards .gt-product-benefits li::before {
  content: '✓' !important;
  color: var(--gt-green-500) !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}


/* ============================================================
   9b. E-MAIL CHECKBOX op pagina 2 (Bevestiging)
   Niet de product-cards, maar de gewone checkbox stijl
   ============================================================ */

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox label {
  position: relative !important;
  padding-left: 30px !important;
  cursor: pointer !important;
  display: inline-block !important;
  font-size: 14px !important;
  color: var(--gt-text) !important;
  line-height: 1.4 !important;
  user-select: none !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gt-border);
  border-radius: 5px;
  background: var(--gt-white);
  transition: all 0.2s;
}

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox input[type="checkbox"]:checked + label::before {
  background: var(--gt-green-600);
  border-color: var(--gt-green-600);
}

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox label::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--gt-white);
  border-bottom: 2px solid var(--gt-white);
  opacity: 0;
  transition: opacity 0.2s;
}

body .gt-adviesgesprek .gfield:not(.gt-product-cards) .ginput_container_checkbox input[type="checkbox"]:checked + label::after {
  opacity: 1;
}


/* ============================================================
   10. MODAL STYLING (bewaard voor toekomstige activatie)
   ============================================================ */

/* Help-mij knop (geïnjecteerd door JS naast input-velden) */
.gt-input-with-help {
  position: relative;
}

.gt-input-with-help input {
  padding-right: 90px !important;
}

.gt-help-link {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--gt-green-600);
  cursor: pointer;
  background: var(--gt-green-50);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
}

.gt-help-link:hover {
  background: var(--gt-green-100);
}

/* Modal backdrop */
.gt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 35, 50, 0.5);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gt-modal-backdrop.active {
  display: flex;
  animation: gt-modal-fade 0.2s;
}

/* ============================================================
   HELP-MIJ KNOP — knop rechts in input-veld kWh + opwek
   ============================================================ */
 
/* De wrapper van het input-veld krijgt position relative */
body .gt-rekentool .gfield.gt-input-kwh .ginput_container_number,
body .gt-rekentool .gfield.gt-input-opwek .ginput_container_number {
  position: relative;
}
 
/* De Help-mij knop — geinjecteerd door JS */
.gt-help-link {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  color: var(--gt-green-600) !important;
  cursor: pointer !important;
  background: var(--gt-green-50) !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  border: none !important;
  font-family: inherit !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
  z-index: 5 !important;
}
 
.gt-help-link:hover {
  background: var(--gt-green-100) !important;
}
 
/* Extra padding-right in het input-veld voor de knop */
body .gt-rekentool .gfield.gt-input-kwh input[type="number"],
body .gt-rekentool .gfield.gt-input-opwek input[type="number"] {
  padding-right: 100px !important;
}
 
 
/* ============================================================
   CHIP GROUP binnen modal — Personen 1-6+
   Reset eventuele wrap die elders is gezet
   ============================================================ */
 
.gt-modal .gt-chip-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.gt-modal .gt-chip {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: none !important;
  min-width: 0 !important;
}
 
.gt-modal .gt-chip input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
 
.gt-modal .gt-chip label {
  display: block;
  padding: 14px 8px;
  border: 1.5px solid var(--gt-border);
  border-radius: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gt-text);
  background: var(--gt-white);
  margin: 0;
}
 
.gt-modal .gt-chip label:hover {
  border-color: var(--gt-green-500);
}
 
.gt-modal .gt-chip input[type="radio"]:checked + label {
  border-color: var(--gt-green-600);
  background: var(--gt-green-50);
  color: var(--gt-green-700);
  font-weight: 600;
}
 
 
/* ============================================================
   APPARATEN GRID binnen modal
   ============================================================ */
 
.gt-modal .gt-appliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
 
.gt-modal .gt-appliance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 1.5px solid var(--gt-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--gt-text);
  background: var(--gt-white);
  transition: all 0.2s;
  user-select: none;
  margin: 0;
  position: relative;
}
 
.gt-modal .gt-appliance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
 
.gt-modal .gt-appliance:hover {
  border-color: var(--gt-green-500);
}
 
.gt-modal .gt-appliance:has(input[type="checkbox"]:checked) {
  border-color: var(--gt-green-600);
  background: var(--gt-green-50);
  color: var(--gt-green-700);
}
 
.gt-modal .gt-appliance-icon {
  font-size: 18px;
  flex-shrink: 0;
}
 
 
/* ============================================================
   PANELEN INPUT in opwek-modal — groot getal centraal
   ============================================================ */
 
.gt-modal .gt-counter-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 4px 0;
}
 
.gt-modal .gt-panelen-input {
  width: 140px !important;
  padding: 12px 8px !important;
  border: 2px solid var(--gt-border) !important;
  border-radius: 12px !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  color: var(--gt-navy) !important;
  text-align: center !important;
  background: var(--gt-white) !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  /* Verberg de native +/- spinners */
  -moz-appearance: textfield;
  appearance: textfield;
}
 
.gt-modal .gt-panelen-input::-webkit-outer-spin-button,
.gt-modal .gt-panelen-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 
.gt-modal .gt-panelen-input:focus {
  outline: none !important;
  border-color: var(--gt-green-600) !important;
  box-shadow: 0 0 0 3px var(--gt-green-50) !important;
}
 
.gt-modal .gt-counter-suffix {
  text-align: center;
  font-size: 12px;
  color: var(--gt-text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 16px 0;
}
 
 
/* ============================================================
   ESTIMATED RESULT BLOK — herzien met icoon rechts
   ============================================================ */
 
.gt-modal .gt-estimated-result {
  background: var(--gt-green-50);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
 
.gt-modal .gt-estimated-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
 
.gt-modal .gt-estimated-label {
  font-size: 11px;
  color: var(--gt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}
 
.gt-modal .gt-estimated-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--gt-green-700);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
 
.gt-modal .gt-estimated-icon {
  font-size: 32px;
  flex-shrink: 0;
}
 
 
/* ============================================================
   MODAL NOTE — kleine tekst onder estimated result
   ============================================================ */
 
.gt-modal .gt-modal-note {
  font-size: 12px;
  color: var(--gt-text-muted);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 16px 0;
}
 
.gt-modal .gt-modal-note strong {
  color: var(--gt-text);
  font-weight: 600;
}
 
 
/* ============================================================
   GT-REQUIRED span — voor "*" in modal
   ============================================================ */
 
.gt-required {
  color: var(--gt-amber);
  font-weight: 700;
}
 
 
/* ============================================================
   GT-TEXT-CENTER utility (voor labels in opwek-modal)
   ============================================================ */
 
.gt-text-center {
  text-align: center !important;
  display: block !important;
}
 
 
/* ============================================================
   MOBILE — kleinere modal padding + chip-group 3 cols → behoud
   ============================================================ */
 
@media (max-width: 600px) {
  .gt-modal .gt-chip-group {
    grid-template-columns: repeat(3, 1fr) !important;
  }
 
  .gt-modal .gt-appliance-grid {
    grid-template-columns: 1fr;
  }
 
  .gt-modal .gt-panelen-input {
    width: 120px !important;
    font-size: 40px !important;
  }
 
  .gt-modal .gt-estimated-value {
    font-size: 24px;
  }
}

@keyframes gt-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gt-modal {
  background: var(--gt-white);
  border-radius: 20px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--gt-shadow-lg);
  animation: gt-modal-slide 0.25s;
}

@keyframes gt-modal-slide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.gt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.gt-modal h2 {
  font-size: 24px;
  color: var(--gt-navy);
  font-weight: 500;
  letter-spacing: -0.5px;
}

.gt-modal h2 em {
  color: var(--gt-green-600);
  font-style: italic;
}

.gt-modal-close {
  background: var(--gt-green-50);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--gt-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  font-family: inherit;
}

.gt-modal-close:hover {
  background: var(--gt-green-100);
}

.gt-modal-sub {
  font-size: 14px;
  color: var(--gt-text-muted);
  margin-bottom: 20px;
}

.gt-modal .gt-field {
  margin-bottom: 16px;
}

.gt-modal .gt-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-navy);
  margin-bottom: 8px;
}

/* Modal — Chip-group (personen 1-6+) */
.gt-modal .gt-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gt-modal .gt-chip {
  flex: 1;
  min-width: calc(16.666% - 7px);
  position: relative;
}

.gt-modal .gt-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gt-modal .gt-chip label {
  display: block;
  padding: 10px 8px;
  border: 1.5px solid var(--gt-border);
  border-radius: var(--gt-radius-sm);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--gt-text);
}

.gt-modal .gt-chip input:checked + label {
  border-color: var(--gt-green-600);
  background: var(--gt-green-50);
  color: var(--gt-green-700);
  font-weight: 600;
}

/* Modal — Apparaten grid */
.gt-appliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.gt-appliance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--gt-border);
  border-radius: var(--gt-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  user-select: none;
}

.gt-appliance input {
  display: none;
}

.gt-appliance.checked {
  border-color: var(--gt-green-600);
  background: var(--gt-green-50);
  color: var(--gt-green-700);
}

.gt-appliance-icon {
  font-size: 16px;
}

/* Modal — Solar counter (panelen +/-) */
.gt-counter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
}

.gt-counter-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--gt-green-100);
  background: var(--gt-white);
  font-size: 22px;
  font-weight: 700;
  color: var(--gt-green-700);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.gt-counter-btn:hover {
  background: var(--gt-green-50);
  border-color: var(--gt-green-600);
}

.gt-counter-btn:active {
  transform: scale(0.95);
}

.gt-counter-value {
  font-size: 56px;
  font-weight: 500;
  color: var(--gt-navy);
  letter-spacing: -2px;
  min-width: 100px;
  text-align: center;
  line-height: 1;
}

.gt-counter-suffix {
  text-align: center;
  font-size: 12px;
  color: var(--gt-text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Modal — Estimated result block */
.gt-estimated-result {
  background: var(--gt-green-50);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gt-estimated-label {
  font-size: 12px;
  color: var(--gt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.gt-estimated-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--gt-green-700);
  margin-top: 2px;
}

/* Modal — Edit modal (pagina 2) */
.gt-edit-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gt-border);
  border-radius: var(--gt-radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--gt-white);
  color: var(--gt-navy);
}

.gt-edit-input:focus {
  outline: none;
  border-color: var(--gt-green-600);
}

.gt-edit-result {
  background: var(--gt-green-50);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  text-align: center;
}

.gt-edit-result-label {
  font-size: 12px;
  color: var(--gt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.gt-edit-result-value {
  font-size: 36px;
  font-weight: 500;
  color: var(--gt-green-700);
  letter-spacing: -1px;
}

/* Primary button binnen modals */
.gt-modal .gt-btn-primary,
.gt-edit-confirm {
  width: 100%;
  background: var(--gt-green-600);
  color: var(--gt-white);
  padding: 14px;
  border-radius: var(--gt-radius-sm);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  margin-top: 8px;
}

.gt-modal .gt-btn-primary:hover,
.gt-edit-confirm:hover {
  background: var(--gt-green-700);
}


/* ============================================================
   11. MOBILE — basale aanpassingen
   ============================================================ */

@media (max-width: 600px) {
	.gt-modal .gt-chip label, .gt-modal .gt-appliance {
		padding:8px;
	}
  .gt-amount {
    font-size: 44px;
  }

  .gt-counter-value {
    font-size: 44px;
  }

  .gt-modal {
    padding: 24px;
  }

  .gt-breakdown {
    /*grid-template-columns: 1fr;*/
	  margin-bottom:0px;
  }
  
  body .gfield.gt-product-cards .ginput_container_checkbox .gfield_checkbox {
    grid-template-columns: 1fr !important;
  }

  body .gfield.gt-product-cards .gchoice label {
    padding: 16px !important;
    font-size: 16px !important;
  }

  .gt-appliance-grid {
    grid-template-columns: 1fr;
  }

  .gt-modal .gt-chip {
    min-width: calc(33.333% - 6px);
  }

  body .gf_page_steps {
    padding: 0 8px !important;
  }
/*
  body .gf_page_steps::before,
  body .gf_page_steps::after {
    top: 14px;
    left: 28px;
    right: 28px;
  }

  body .gf_page_steps:has(.gf_step_active.gf_step_last)::after {
    width: calc(100% - 56px);
  }

  body .gf_page_steps:has(.gf_step_active):not(:has(.gf_step_active.gf_step_first)):not(:has(.gf_step_active.gf_step_last))::after {
    width: calc(50% - 28px);
  }

  body .gf_page_steps .gf_step .gf_step_number {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  body .gf_page_steps .gf_step .gf_step_label {
    font-size: 10px !important;
  }
}*/