/* PowerNexx: formulieren één vraag per keer (nieuw/wow/stappen.js). Bouwt voort op wow.css; werkt ook binnen
   het WOW-kader om oude pagina's (.wow-oud). Zonder JavaScript (geen .stp-aan) verandert hier niets. */

.stp-aan [data-vraag][hidden], .stp-aan .stp-hand[hidden], .stp-knoppen [hidden], .stp-aan [data-stp-verberg] { display: none !important; }

/* voortgang */
.stp-voortgang { display: grid; gap: 10px; margin: 0 0 24px; }
.stp-tel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .92rem; color: #5A6266; }
.stp-tel b { color: #14181A; }
.stp-titel { color: #14181A; font-weight: 600; }
.stp-spoor { height: 6px; background: var(--lijn, #E4E0DA); border-radius: 999px; overflow: hidden; }
.stp-spoor i { display: block; height: 100%; background: linear-gradient(90deg, var(--or, #FF6A1A), var(--tq, #12B5B0)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--gemak, ease); }

/* één vraag */
.stp-aan .stp-vraag { display: grid; gap: 16px; align-content: start; min-width: 0; margin: 0; }
.stp-aan fieldset.stp-vraag { border: 0; padding: 0; }
.stp-aan .stp-vraag > :is(h2, h3, legend, .stp-kop) { font-size: clamp(1.45rem, 3.2vw, 2rem) !important; line-height: 1.15; letter-spacing: -.02em; color: #14181A; font-weight: 800; margin: 0 !important; padding: 0; text-wrap: balance; }
.stp-aan .stp-vraag > :is(h2, h3, legend, .stp-kop):focus { outline: none; }
.stp-aan .stp-vraag > :is(h2, h3, legend, .stp-kop):focus-visible { outline: 3px solid var(--or-d, #B4430A); outline-offset: 4px; }
.stp-uitleg { color: #5A6266; margin: -6px 0 0 !important; max-width: 60ch; }
.stp-in { animation: stp-in .32s var(--gemak, ease) both; }
.stp-terug-in { animation: stp-terug-in .32s var(--gemak, ease) both; }
@keyframes stp-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes stp-terug-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* velden in een vraag: een select en een gewone input krijgen dezelfde vorm als .veld input */
.stp-vraag .veld select, .stp-vraag select.stp-select { width: 100%; font: inherit; color: #14181A; padding: 14px 16px; border: 1.5px solid var(--lijn-sterk, #CFC9C1); border-radius: 12px; background: #fff; min-height: 52px; }
.stp-vraag .veld select:focus { outline: none; border-color: var(--tq-d, #08716C); box-shadow: 0 0 0 4px rgba(8,113,108,.16); }
.stp-vraag .veld > label:not(.knop) { font-weight: 700; color: #14181A; margin-bottom: 6px; }
.stp-vraag .veld > label:not(.knop) small { font-weight: 500; color: #5A6266; }
.stp-vraag [aria-invalid="true"]:is(input, select, textarea) { border-color: #A3260F !important; }
.stp-vraag .keuzes.stp-onder { display: grid; gap: 10px; }
.stp-vraag .keuzes.stp-onder label { border-radius: 12px; min-height: 54px; justify-content: flex-start; padding: 10px 18px; }

/* foutmelding bij de vraag */
.stp-fout { color: #A3260F; font-weight: 600; font-size: .96rem; margin: 0 !important; display: flex; gap: 8px; align-items: flex-start; }
.stp-fout::before { content: ""; flex: none; width: 4px; align-self: stretch; min-height: 1.2em; background: #A3260F; border-radius: 2px; }
.stp-fout[hidden] { display: none; }

/* knoppen */
.stp-knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; margin-top: 4px; }
.stp-knoppen.stp-eerste { justify-content: flex-end; }
.stp-terug { background: none; border: 0; color: #14181A; font: 700 1rem "Jakarta", system-ui, sans-serif; cursor: pointer; padding: 0 6px; min-height: 52px; text-decoration: underline; text-decoration-color: var(--lijn-sterk, #CFC9C1); text-underline-offset: 5px; }
.stp-terug:hover { color: var(--or-d, #B4430A); text-decoration-color: currentColor; }
.stp-knoppen .stp-verder, .stp-knoppen .stp-verstuur { margin-left: auto; }
/* Ook waar wow.css er niet bij is (een kale pagina): dezelfde vorm als .knop .knop-or. */
.stp-knoppen .stp-verder { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; border: 2px solid transparent; background: var(--or-d, #B4430A); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.stp-knoppen .stp-verder:hover { background: var(--or-dd, #8F3407); }
.stp-knoppen .stp-verder svg { width: 18px; height: 18px; flex: none; }
.stp-knoppen .stp-verder[disabled] { opacity: .7; cursor: progress; }
.stp-knoppen .stp-verstuur[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 559px) {
  .stp-knoppen { flex-wrap: nowrap; }
  .stp-knoppen .stp-verder, .stp-knoppen .stp-verstuur { flex: 1 1 200px; margin-left: 0; }
  .stp-knoppen.stp-eerste .stp-verder { flex-basis: 100%; }
}

/* adres en KvK: wat er gevonden is */
.stp-adres-rij { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.stp-adres-rij.stp-twee { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 459px) {
  .stp-adres-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stp-adres-rij > :first-child { grid-column: 1 / -1; }
  .stp-adres-rij.stp-twee > :first-child { grid-column: auto; }
}
.stp-adres-rij .veld > label { min-height: 1.6em; }
.stp-adres:empty, .stp-kvk:empty { display: none; }
.stp-adres-kaart { display: grid; gap: 6px; padding: 14px 16px 14px 18px; border: 1px solid var(--lijn, #E4E0DA); border-left: 4px solid var(--tq-d, #08716C); border-radius: 4px 12px 12px 4px; background: #fff; }
.stp-adres-label { font-size: .86rem; color: #5A6266; }
.stp-adres-regels { margin: 0 !important; display: grid; gap: 2px; }
.stp-adres-regels b { color: #14181A; font-size: 1.12rem; font-weight: 700; overflow-wrap: anywhere; }
.stp-adres-regels span { color: #2B3134; }
.stp-adres-noot { margin: 2px 0 0 !important; font-size: .94rem; color: #2B3134; }
.stp-adres-wijzig { justify-self: start; background: none; border: 0; padding: 6px 0; min-height: 40px; color: var(--tq-d, #08716C); font: 700 .96rem "Jakarta", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.stp-adres-wijzig:hover { color: var(--tq-dd, #065A56); }
.stp-adres-mis { margin: 0 !important; color: var(--or-dd, #8F3407); font-weight: 600; }
.stp-adres-bezig { margin: 0 !important; color: #5A6266; }
.stp-toev-knop { display: inline-flex; align-items: center; min-height: 40px; margin: 6px 6px 0 0; padding: 0 14px; border: 1.5px solid var(--lijn-sterk, #CFC9C1); border-radius: 999px; background: #fff; color: #14181A; font: 600 .95rem "Jakarta", system-ui, sans-serif; cursor: pointer; }
.stp-toev-knop:hover { border-color: #14181A; }
.stp-hand { display: grid; gap: 12px; }
.stp-hand-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 459px) { .stp-hand-rij { grid-template-columns: minmax(0, 1fr); } }
.stp-geen-kvk { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; }
.stp-geen-kvk input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--tq-d, #08716C); flex: none; }

/* overzicht voor het versturen */
.stp-overzicht { width: 100%; border-collapse: collapse; }
.stp-overzicht th, .stp-overzicht td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--lijn, #E4E0DA); vertical-align: top; }
.stp-overzicht th { width: 34%; color: #5A6266; font-weight: 500; padding-right: 14px; font-size: .95rem; }
.stp-overzicht td { color: #14181A; font-weight: 600; overflow-wrap: anywhere; }
.stp-overzicht .stp-wijzig-cel { width: 1%; padding-left: 10px; white-space: nowrap; }
.stp-wijzig { background: none; border: 0; padding: 0 2px; min-height: 36px; color: var(--tq-d, #08716C); font: 700 .92rem "Jakarta", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.stp-wijzig:hover { color: var(--tq-dd, #065A56); }
@media (max-width: 479px) {
  .stp-overzicht tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; border-bottom: 1px solid var(--lijn, #E4E0DA); }
  .stp-overzicht th, .stp-overzicht td { border: 0; padding: 0; width: auto; }
  .stp-overzicht th { grid-column: 1; }
  .stp-overzicht td:not(.stp-wijzig-cel) { grid-column: 1 / -1; grid-row: 2; }
  .stp-overzicht .stp-wijzig-cel { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stp-in, .stp-terug-in { animation: none; }
  .stp-spoor i { transition: none; }
}

/* De echte verstuurknop van een oude pagina (vaak 100% breed) past naast Vorige. */
.stp-knoppen .stp-verstuur { width: auto !important; }
/* De vraag zelf krijgt de focus voor schermlezers; een rand eromheen hoeft niet, het is geen knop. */
.stp-aan .stp-vraag > :is(h2, h3, legend, .stp-kop)[tabindex="-1"]:focus-visible { outline: none !important; }
/* Een verborgen bestandsveld (.vh) in een .veld kreeg van .veld input de volle breedte: dat gaf zijwaarts scrollen. */
.stp-vraag input.vh { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }