/*
 * Energielabelformulier (27-09-2026) — alleen wat dit formulier extra heeft. De drie lagen van het
 * formulier (groene zone, stappenbalk, witte kaart) komen uit de site-brede FluentForm-opmaak.
 */
.dp-el { --dp-el-groen: #39B54A; --dp-el-blauw: #0B62BC; --dp-el-rand: #e4e7ec; --dp-el-tekst: #1f2937; --dp-el-grijs: #5b6472; }

/* ---- adresrij: postcode, huisnummer, toevoeging naast elkaar, ook op mobiel ---- */
.dp-el .dp-el-adresrij.ff-t-container { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.dp-el .dp-el-adresrij > .ff-t-cell { width: auto !important; padding: 0 !important; flex: none !important; }
.dp-el .dp-el-handmatigrij.ff-t-container { display: none !important; }
/* De grid-regel hierboven wint van FluentForms eigen verbergen (conditional logic): bij een project
   en bij uitgesloten velden dus expliciet weg. */
.dp-el .dp-el--project .dp-el-adresrij.ff-t-container,
.dp-el .dp-el--project .dp-el-woningvak,
.dp-el .dp-el-adresrij.ff-t-container.ff_excluded { display: none !important; }
.dp-el .dp-el--handmatig .dp-el-handmatigrij.ff-t-container { display: grid !important; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.dp-el .dp-el-handmatigrij > .ff-t-cell { width: auto !important; padding: 0 !important; flex: none !important; }

/* ---- stapsgewijs tonen: pas na het adres ---- */
.dp-el .dp-el--wacht .dp-el-types,
.dp-el .dp-el--wacht .dp-el-spoed,
.dp-el .dp-el--wacht .dp-el-prijsvak,
.dp-el .dp-el--wacht .dp-el-gemeenschappelijk { display: none !important; }
.dp-el .dp-el-bouwperiode { display: none !important; }
.dp-el .dp-el--bouwjaarvraag .dp-el-bouwperiode { display: block !important; }

/* ---- woningkaart ---- */
.dp-el .dp-el-woningvak { margin-bottom: 8px; }
.dp-el .dp-el-woningvak:empty, .dp-el [data-dp-el-woning]:empty { display: none; }
.dp-el .dp-el-kaart { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #f3f8fe; border: 1px solid #dbe7f7; color: var(--dp-el-tekst); animation: dp-el-in .25s ease-out; }
.dp-el .dp-el-kaart--let { background: #fffaf0; border-color: #f2dfae; }
.dp-el .dp-el-kaart--laden { align-items: center; color: var(--dp-el-grijs); }
.dp-el .dp-el-kaart > div { flex: 1; min-width: 0; }
.dp-el .dp-el-kaart__pin { width: 26px; height: 26px; flex: none; color: var(--dp-el-blauw); margin-top: 2px; }
.dp-el .dp-el-kaart__adres { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.dp-el .dp-el-kaart__plaats { color: var(--dp-el-grijs); }
.dp-el .dp-el-kaart__bron { margin: 8px 0 0; font-size: .85rem; color: var(--dp-el-grijs); }
.dp-el .dp-el-feiten { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0 0; }
.dp-el .dp-el-feit { background: #fff; border: 1px solid var(--dp-el-rand); border-radius: 999px; padding: 4px 11px; font-size: .85rem; line-height: 1.4; }
.dp-el .dp-el-feit--let { border-color: #f2dfae; background: #fffdf7; border-radius: 12px; }
.dp-el .dp-el-laden { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cfe0f5; border-top-color: var(--dp-el-blauw); animation: dp-el-draai .8s linear infinite; flex: none; }
.dp-el .dp-el-toev { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dp-el .dp-el-toev__knop { border: 1.5px solid var(--dp-el-rand); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, transform .1s; }
.dp-el .dp-el-toev__knop:hover { border-color: var(--dp-el-groen); }
.dp-el .dp-el-toev__knop:active { transform: translateY(1px); }

/* ---- tegels (woningtype, bouwperiode, spoed, particulier/bedrijf) ---- */
.dp-el .dp-el-tegels .ff-el-input--content { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dp-el .dp-el-types .ff-el-input--content { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dp-el .dp-el-bouwperiode .ff-el-input--content,
.dp-el .dp-el-entiteit .ff-el-input--content { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 460px; }
.dp-el .dp-el-spoed .ff-el-input--content { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-el .dp-el-tegels .ff-el-form-check { margin: 0 !important; position: relative; }
.dp-el .dp-el-tegels .ff-el-form-check-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; min-height: 56px; margin: 0; padding: 14px 10px; border: 1.5px solid var(--dp-el-rand); border-radius: 14px; background: #fff; text-align: center; line-height: 1.25; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .1s; }
.dp-el .dp-el-tegels .ff-el-form-check-label:hover { border-color: rgba(57, 181, 74, .55); }
.dp-el .dp-el-tegels .ff-el-form-check-label:active { transform: translateY(1px); }
.dp-el .dp-el-tegels .ff-el-form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.dp-el .dp-el-tegels .ff-el-form-check-label > span { font-weight: 600; color: var(--dp-el-tekst); }
.dp-el .dp-el-tegels .is-gekozen .ff-el-form-check-label,
.dp-el .dp-el-tegels .ff-el-form-check-label:has(input:checked) { border-color: var(--dp-el-groen); background: #f3fbf4; box-shadow: 0 0 0 3px rgba(57, 181, 74, .16); }
.dp-el .dp-el-tegels .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--dp-el-blauw); outline-offset: 2px; }
.dp-el .dp-el-icoon { width: 48px; height: 32px; color: var(--dp-el-blauw); transition: color .2s; }
.dp-el .dp-el-tegels .is-gekozen .dp-el-icoon { color: #2e9a3d; }
.dp-el .dp-el-tegelprijs { display: block; font-size: .8rem; color: var(--dp-el-grijs); min-height: 1.2em; }
.dp-el .dp-el-tegelprijs:empty { display: none; }
.dp-el .dp-el-spoed .ff-el-form-check-label { align-items: flex-start; text-align: left; padding: 12px 14px; }

/* ---- prijs ---- */
.dp-el .dp-el-prijsvak { margin-top: 6px; }
.dp-el .dp-el-prijs { border-radius: 16px; background: #f3fbf4; border: 1px solid #cfe9d3; padding: 18px 20px; color: var(--dp-el-tekst); }
.dp-el .dp-el-prijs:empty { display: none; }
.dp-el .dp-el-prijs__geen { margin: 0; color: var(--dp-el-grijs); }
.dp-el .dp-el-prijs__kop { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dp-el-grijs); font-weight: 600; }
.dp-el .dp-el-prijs__bedrag { font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.dp-el .dp-el-prijs__vanaf { font-size: 1rem; font-weight: 600; color: var(--dp-el-grijs); }
.dp-el .dp-el-prijs__sub { font-size: .9rem; color: var(--dp-el-grijs); }
.dp-el .dp-el-prijs__sub s { opacity: .8; }
.dp-el .dp-el-prijs__voordeel { display: inline-block; background: var(--dp-el-groen); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 700; margin-left: 4px; }
.dp-el .dp-el-prijs__regels { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.dp-el .dp-el-prijs__regels li { margin: 2px 0; }
.dp-el .dp-el-prijs__noot { margin: 8px 0 0; font-size: .85rem; color: var(--dp-el-grijs); }

.dp-el .dp-el-factuurvink .ff-el-input--label:empty { display: none; }

/* ---- stap 2: samenvatting en geruststelling ---- */
.dp-el .dp-el-samen { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-bottom: 20px; border-radius: 14px; background: #f3fbf4; border: 1px solid #cfe9d3; }
.dp-el .dp-el-samen:empty { display: none; }
.dp-el .dp-el-samen > div:first-child { flex: 1; min-width: 0; }
.dp-el .dp-el-samen__wat { font-weight: 700; color: var(--dp-el-tekst); }
.dp-el .dp-el-samen__adres { font-size: .88rem; color: var(--dp-el-grijs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-el .dp-el-samen__prijs { font-weight: 800; font-size: 1.15rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.dp-el .dp-el-samen__prijs small { display: block; font-size: .72rem; font-weight: 500; color: var(--dp-el-grijs); }
.dp-el .dp-el-samen__wijzig { border: 0; background: none; padding: 4px 0; color: var(--dp-el-blauw); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dp-el .dp-el-gerust { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; font-size: .9rem; color: var(--dp-el-grijs); }
.dp-el .dp-el-gerust::before { content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339B54A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---- keuze: één woning / project (compacte schakelaar bovenaan) ---- */
.dp-el .dp-el-aanvraag .ff-el-input--content { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; gap: 8px; }
.dp-el .dp-el-aanvraag .ff-el-form-check-label { min-height: 44px; padding: 10px 14px; flex-direction: row; }
.dp-el .dp-el-aanvraag .ff-el-form-check-label > span { font-weight: 600; font-size: .95rem; }
.dp-el .dp-el-projectsoort .ff-el-input--content { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.dp-el .dp-el-aantal { max-width: 320px; }
.dp-el .dp-el-projecttypes .ff-el-input--content { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* meer keuzes mogelijk: vinkrondje rechtsboven, gevuld als gekozen */
.dp-el .dp-el-vink .ff-el-form-check-label::after, .dp-el .dp-el-projecttypes .ff-el-form-check-label::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cfd5dd; background: #fff; transition: background-color .2s, border-color .2s; }
.dp-el .dp-el-vink .is-gekozen .ff-el-form-check-label::after, .dp-el .dp-el-vink .ff-el-form-check-label:has(input:checked)::after, .dp-el .dp-el-projecttypes .is-gekozen .ff-el-form-check-label::after, .dp-el .dp-el-projecttypes .ff-el-form-check-label:has(input:checked)::after { border-color: var(--dp-el-groen); background: var(--dp-el-groen) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dp-el .dp-el-vink .ff-el-form-check-label { position: relative; padding: 20px 10px 12px; }   /* rondje zit rechtsboven, boven het icoon: geen extra zijmarge nodig */

/* ---- bedrijfspand ---- */
.dp-el .dp-el-kaart--pand { background: #f6f7f9; border-color: var(--dp-el-rand); }
.dp-el .dp-el-kaart--pand .dp-el-kaart__pin { color: var(--dp-el-grijs); }
.dp-el .dp-el-kaart__tekst { margin: 10px 0 0; }
.dp-el .dp-el-kaart__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.dp-el .dp-el-kaart__knop { min-height: 44px; display: inline-flex; align-items: center; }
.dp-el .dp-el-kaart__toch { border: 0; background: none; padding: 6px 0; color: var(--dp-el-blauw); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- extra adressen ---- */
.dp-el .dp-el--wacht .dp-el-extravak, .dp-el .dp-el--project .dp-el-extravak { display: none !important; }
.dp-el .dp-el-extra:empty { display: none; }
.dp-el .dp-el-extra__adres { border: 1px solid var(--dp-el-rand); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fff; animation: dp-el-in .2s ease-out; }
.dp-el .dp-el-extra__adres--let { border-color: #f2c26b; box-shadow: 0 0 0 3px rgba(242, 194, 107, .2); }
.dp-el .dp-el-extra__kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; font-size: .92rem; }
.dp-el .dp-el-extra__weg { border: 0; background: none; color: var(--dp-el-grijs); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; }
.dp-el .dp-el-extra__velden { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.dp-el .dp-el-extra__uitkomst:empty { display: none; }
.dp-el .dp-el-extra__uitkomst { margin-top: 10px; }
.dp-el .dp-el-extra__ok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dp-el .dp-el-extra__naam { font-weight: 600; }
.dp-el .dp-el-extra__feit { font-size: .85rem; color: var(--dp-el-grijs); }
.dp-el .dp-el-extra__type { border: 1px solid var(--dp-el-rand); border-radius: 8px; padding: 6px 10px; min-height: 40px; background: #fff; }
.dp-el .dp-el-extra__prijs { margin-left: auto; font-variant-numeric: tabular-nums; }
.dp-el .dp-el-extra__fout, .dp-el .dp-el-extra__melding { margin: 0; font-size: .88rem; color: #9a5b00; }
.dp-el .dp-el-extra__laden { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--dp-el-grijs); font-size: .9rem; }
.dp-el .dp-el-extra__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 2px 0 14px; }
.dp-el .dp-el-extra__plus { border: 1.5px dashed #9fd4a7; background: #fff; color: #2e7d3a; border-radius: 999px; padding: 8px 16px; font-weight: 700; min-height: 44px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.dp-el .dp-el-extra__plus:hover { background: #f3fbf4; border-color: var(--dp-el-groen); }
.dp-el .dp-el-extra__plus span { font-size: 1.1rem; margin-right: 2px; }
.dp-el .dp-el-extra__hint { font-size: .85rem; color: var(--dp-el-grijs); }
.dp-el .dp-el-extra__project { border: 0; background: none; padding: 0; color: var(--dp-el-blauw); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
.dp-el .dp-el-prijs__regels--adressen { list-style: none; padding-left: 0; }
.dp-el .dp-el-prijs__regels--adressen li, .dp-el .dp-el-prijs__regels li:has(b) { display: flex; justify-content: space-between; gap: 12px; }
.dp-el .dp-el-prijs__regels b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

@keyframes dp-el-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dp-el-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dp-el .dp-el-kaart { animation: none; } .dp-el .dp-el-laden { animation-duration: 2s; } }

@media (max-width: 767.98px) {
  .dp-el .dp-el-types .ff-el-input--content, .dp-el .dp-el-projecttypes .ff-el-input--content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-el .dp-el-types .ff-el-form-check:last-child:nth-child(odd), .dp-el .dp-el-projecttypes .ff-el-form-check:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dp-el .dp-el-spoed .ff-el-input--content { grid-template-columns: 1fr; gap: 8px; }
  .dp-el .dp-el-spoed .ff-el-form-check-label { min-height: 48px; padding: 10px 14px; }
  /* postcode over de volle breedte, huisnummer en toevoeging eronder naast elkaar */
  .dp-el .dp-el-adresrij.ff-t-container { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .dp-el .dp-el-adresrij > .ff-t-cell:first-child { grid-column: 1 / -1; }
  .dp-el .dp-el-handmatigrij.ff-t-container, .dp-el .dp-el--handmatig .dp-el-handmatigrij.ff-t-container { grid-template-columns: 1fr; gap: 0; }
  .dp-el .dp-el-kaart { padding: 14px; gap: 10px; }
  .dp-el .dp-el-kaart__pin { width: 20px; height: 20px; }
  .dp-el .dp-el-feit { font-size: .8rem; padding: 3px 9px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .dp-el .dp-el-feit--let { white-space: normal; }
  .dp-el .dp-el-samen { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .dp-el .dp-el-samen > div:first-child { grid-column: 1 / -1; }
  .dp-el .dp-el-samen__prijs { text-align: left; }
  .dp-el .dp-el-types .ff-el-form-check-label { padding: 12px 8px; }
  .dp-el .dp-el-prijs { padding: 16px; }
  .dp-el .dp-el-aanvraag .ff-el-input--content, .dp-el .dp-el-projectsoort .ff-el-input--content { grid-template-columns: 1fr; }
  .dp-el .dp-el-extra__velden { grid-template-columns: 1fr 1fr; }
  .dp-el .dp-el-extra__velden [data-dp-el-x="pc"] { grid-column: 1 / -1; }
  .dp-el .dp-el-extra__prijs { margin-left: 0; }
  .dp-el .dp-el-prijs__bedrag { font-size: 1.8rem; }
}
.dp-el .dp-el-prijs__regels--adressen li { padding: 4px 0; border-top: 1px solid #dcefe0; }
.dp-el .dp-el-prijs__regels--adressen li:first-child { border-top: 0; }
.dp-el .dp-el-prijs__regels--adressen small { display: block; font-size: .8rem; color: var(--dp-el-grijs); }

/* ---- zakelijke projectpagina en verwijzingen (27-09 avond) ---- */
.dp-el .dp-el-gebouwen .ff-el-input--content { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 720px; }
.dp-el-verwijzing { font-size: .95rem; color: #5b6472; margin: -.25rem 0 1.25rem; }
.dp-el-verwijzing a { font-weight: 600; }
@media (max-width: 767.98px) {
  .dp-el .dp-el-gebouwen .ff-el-input--content { grid-template-columns: 1fr; }
}

/* ---- pillen voor korte meerkeuze (functies, oppervlakte): vinkje vóór de tekst (Richard: tegels met rondje 'gaar') ---- */
.dp-el .dp-el-pillen .ff-el-input--content { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-el .dp-el-pillen .ff-el-form-check-label { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 44px; height: auto; padding: 8px 16px 8px 12px; border-radius: 999px; white-space: nowrap; }
.dp-el .dp-el-pillen .ff-el-form-check-label::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cfd5dd; background: #fff; transition: background-color .2s, border-color .2s; }
.dp-el .dp-el-pillen .is-gekozen .ff-el-form-check-label::before,
.dp-el .dp-el-pillen .ff-el-form-check-label:has(input:checked)::before { border-color: var(--dp-el-groen); background: var(--dp-el-groen) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dp-el .dp-el-pillen .ff-el-form-check-label > span { font-weight: 600; }

/* ---- gebruiksfuncties als tegels met icoon (Richard 27-09) ---- */
.dp-el .dp-el-functies .ff-el-input--content { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.dp-el .dp-el-hint { margin: -4px 0 6px; font-size: .88rem; color: #5b6472; }
@media (max-width: 767.98px) {
  .dp-el .dp-el-functies .ff-el-input--content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-el .dp-el-functies .ff-el-form-check:last-child:nth-child(odd) { grid-column: 1 / -1; }
}