/**
 * AW Module: Uitje aanmelden
 *
 * Huisstijl wattedoenvandaag.nl: Lato, diepblauw #00205b, lichtblauw #0079d3,
 * zacht blauw #DDEDF4 en geel #ffcc00 (uit tailwind.config.js van Divi-child).
 *
 * Bewust platte CSS in plaats van geneste of Tailwind-utilities:
 *  - de Tailwind-build van dit thema is voorgecompileerd (style_tailwind.css),
 *    dus nieuwe utility-klassen bestaan simpelweg niet zonder rebuild;
 *  - op deze site staat Remove Unused CSS aan, en platte selectors zijn het
 *    veiligst om te safelisten (zie awcf_ua_rocket_rucss_safelist).
 */

/* Divi zet padding-bottom:10px op ALLE koppen (h1 t/m h6, in
   style-static.min.css). Binnen de module willen we die ruimte zelf bepalen —
   in de accordeonkop duwde hij de titel scheef ten opzichte van het nummer.
   Geen !important nodig: een klasse wint van een elementselector. */
.awcf-ua h1,
.awcf-ua h2,
.awcf-ua h3,
.awcf-ua h4,
.awcf-ua h5,
.awcf-ua h6 {
    padding: 0;
}

.awcf-ua {
    --awcf-ua-blauw: #00205b;
    --awcf-ua-blauw-licht: #0079d3;
    --awcf-ua-blauw-zacht: #ddedf4;
    --awcf-ua-geel: #fc0;
    --awcf-ua-grijs: #4a5568;
    --awcf-ua-lijn: #d5e2ea;
    --awcf-ua-fout: #b32d2e;

    max-width: 820px;
    margin: 0 auto 3rem;
    color: var(--awcf-ua-blauw);
    font-family: Lato, ui-sans-serif, system-ui, sans-serif;
}

/* De paginatitel is thema-markup en staat buiten de module, maar hij hoort
   wel boven het formulier uit te lijnen. Zonder dit staat de titel links in
   de contentkolom terwijl het formulier gecentreerd is — op een breed scherm
   scheelt dat honderden pixels. */
#left-area:has(.awcf-ua) > article > .entry-title {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Meldingen ---------- */

.awcf-ua-melding {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border-left: 6px solid var(--awcf-ua-blauw-licht);
    background: var(--awcf-ua-blauw-zacht);
}

.awcf-ua-melding h2 {
    margin: 0 0 .4rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-melding p,
.awcf-ua-melding li {
    margin: 0 0 .25rem;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-melding ul {
    margin: 0;
    padding-left: 1.1rem;
}

.awcf-ua-melding--goed {
    border-left-color: var(--awcf-ua-geel);
}

.awcf-ua-melding--fout {
    border-left-color: var(--awcf-ua-fout);
    background: #fdf0f0;
}

.awcf-ua-melding--fout h2 {
    color: var(--awcf-ua-fout);
}

/* ---------- Stappen ---------- */

.awcf-ua-stap {
    margin-bottom: .75rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

/* Open paneel krijgt de huisstijlrand, zodat je ziet waar je bent. */
.awcf-ua-stap[open] {
    border-color: var(--awcf-ua-blauw-licht);
}

.awcf-ua-stap__kop {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Het standaard driehoekje van de browser weg; we tekenen zelf een chevron. */
.awcf-ua-stap__kop::-webkit-details-marker {
    display: none;
}

.awcf-ua-stap__kop::marker {
    content: '';
}

.awcf-ua-stap__kop:hover {
    background: #f7fafc;
}

.awcf-ua-stap__kop:focus-visible {
    outline: 2px solid var(--awcf-ua-blauw-licht);
    outline-offset: -2px;
}

/* De chevron, helemaal rechts. */
.awcf-ua-stap__kop::after {
    content: '';
    flex: 0 0 auto;
    width: .6rem;
    height: .6rem;
    margin-left: .25rem;
    border-right: 2px solid var(--awcf-ua-blauw);
    border-bottom: 2px solid var(--awcf-ua-blauw);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}

.awcf-ua-stap[open] > .awcf-ua-stap__kop::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.awcf-ua-stap__nr {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--awcf-ua-blauw);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

/* Ingevulde stap: nummer wordt een vinkje in het geel. */
.awcf-ua-stap.is-af .awcf-ua-stap__nr {
    background: var(--awcf-ua-geel);
    color: transparent;
    position: relative;
}

.awcf-ua-stap.is-af .awcf-ua-stap__nr::after {
    content: '';
    position: absolute;
    top: .45rem;
    left: .65rem;
    width: .4rem;
    height: .75rem;
    border-right: 2.5px solid var(--awcf-ua-blauw);
    border-bottom: 2.5px solid var(--awcf-ua-blauw);
    transform: rotate(45deg);
}

.awcf-ua-stap__titel {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--awcf-ua-blauw);
}

/* Korte samenvatting rechts in de kop, zodat een dichtgeklapt paneel nog
   steeds vertelt wat erin staat. */
.awcf-ua-stap__stand {
    flex: 0 1 auto;
    font-size: .85rem;
    font-weight: 700;
    color: var(--awcf-ua-blauw-licht);
    text-align: right;
}

.awcf-ua-stap__stand:empty {
    display: none;
}

.awcf-ua-stap__inhoud {
    padding: 0 1.35rem 1.5rem;
}

.awcf-ua-stap--afsluiter {
    margin-top: 1.25rem;
    padding: 1.75rem;
    border: 2px solid var(--awcf-ua-blauw);
    border-radius: 16px;
    background: #fff;
}

/* ---------- Foutmelding binnen een stap ----------
   Voor wat de browser zelf niet kan controleren: "kies minimaal één provincie"
   is met vinkjes niet in HTML uit te drukken. */

.awcf-ua-paneelfout {
    margin: 1rem 0 0;
    padding: .75rem .9rem;
    border-left: 4px solid var(--awcf-ua-fout);
    border-radius: 0 8px 8px 0;
    background: #fdf0f0;
    font-size: .9rem;
    font-weight: 700;
    color: var(--awcf-ua-fout);
}

/* Een stap met een probleem krijgt een rood nummer in plaats van een blauw. */
.awcf-ua-stap.is-fout {
    border-color: var(--awcf-ua-fout);
}

.awcf-ua-stap.is-fout .awcf-ua-stap__nr {
    background: var(--awcf-ua-fout);
}

.awcf-ua-stap.is-fout .awcf-ua-stap__stand {
    color: var(--awcf-ua-fout);
}

/* ---------- Stap op slot ----------
   Een stap die nog niet aan de beurt is, is grijs en niet aan te klikken; de
   chevron maakt plaats voor een slotje, zodat het niet als een defect leest.
   Terug naar een eerdere stap mag altijd. De klasse wordt door de JS gezet;
   RUCSS laat de regels staan dankzij de safelist op `.awcf-ua`. */

.awcf-ua-stap.is-op-slot {
    background: #fbfcfd;
}

.awcf-ua-stap.is-op-slot > .awcf-ua-stap__kop {
    cursor: not-allowed;
}

.awcf-ua-stap.is-op-slot > .awcf-ua-stap__kop:hover {
    background: transparent;
}

/* Het nummer wordt een slotje, op precies de plek waar een afgeronde stap zijn
   vinkje krijgt. Zo betekent dat rondje steeds één ding: hoe deze stap ervoor
   staat — nummer (nog te doen), vinkje (af) of slot (nog niet aan de beurt). */
.awcf-ua-stap.is-op-slot .awcf-ua-stap__nr {
    position: relative;
    background: #e6ebef;
    color: transparent;
}

.awcf-ua-stap.is-op-slot .awcf-ua-stap__nr::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / .95rem .95rem no-repeat;
}

.awcf-ua-stap.is-op-slot .awcf-ua-stap__titel,
.awcf-ua-stap.is-op-slot .awcf-ua-stap__stand {
    color: #8a97a5;
}

.awcf-ua-stap.is-op-slot .awcf-ua-stap__stand {
    font-weight: 400;
}

/* De chevron belooft "hier klap je open", en dat is nu juist wat niet kan.
   `visibility` en niet `display`, anders verspringt de rasterkolom op mobiel. */
.awcf-ua-stap.is-op-slot > .awcf-ua-stap__kop::after {
    visibility: hidden;
}

/* De stap waar de bezoeker naartoe wordt gestuurd, licht even op. Zonder dat
   lijkt een klik op een stap op slot simpelweg te mislukken — zeker als die
   stap al in beeld staat en er dus niets zichtbaar scrollt. */
@keyframes awcf-ua-wijs {
    from { box-shadow: 0 0 0 0 rgba(255, 204, 0, .65); }
    to   { box-shadow: 0 0 0 14px rgba(255, 204, 0, 0); }
}

.awcf-ua-stap.is-gewezen {
    animation: awcf-ua-wijs 1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .awcf-ua-stap.is-gewezen {
        animation: none;
    }
}

/* ---------- Doorgaan-knop per stap ----------
   Verborgen tot de JS draait: zonder script kan een knop het volgende paneel
   niet openen, en een knop die niets doet is erger dan geen knop. Zonder JS
   staan de stappen ook niet op slot en zijn alle koppen aanklikbaar. */

.awcf-ua-volgende {
    display: none;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--awcf-ua-lijn);
}

.awcf-ua-form.is-js .awcf-ua-volgende {
    display: flex;
}

/* Twee klassen, want de basisregel .awcf-ua-knop zet width:100% en staat
   verderop in dit bestand — met één klasse verliest deze regel. */
.awcf-ua-volgende .awcf-ua-knop--volgende {
    /* inline-flex, anders zakt het pijltje naar een tweede regel zodra de
       knop op mobiel de volle breedte krijgt. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: .7rem 1.4rem;
    font-size: 1rem;
    background: var(--awcf-ua-blauw);
    color: #fff;
}

.awcf-ua-knop--volgende::after {
    content: '';
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-left: .6rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, 1px);
}

/* ---------- Uitleg boven een blok velden ---------- */

.awcf-ua-uitleg {
    margin: 0 0 1.25rem;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--awcf-ua-geel);
    border-radius: 0 8px 8px 0;
    background: #fffbeb;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-uitleg strong {
    color: var(--awcf-ua-blauw);
}

.awcf-ua-uitleg--rustig {
    border-left-color: var(--awcf-ua-blauw-licht);
    background: var(--awcf-ua-blauw-zacht);
}

/* Divi heeft `p:not(.has-background):last-of-type { padding-bottom: 0 }` — met
   specificiteit (0,2,1) wint dat van `.awcf-ua-uitleg` (0,1,0). In stap 6 is het
   uitlegblok het laatste <p> tussen zijn directe broers en zussen (de rest zijn
   divs), dus daar viel de onderkant weg: 14,4px boven, 0 onder. Hetzelfde geldt
   voor de foutmelding in een paneel: die wordt vlak vóór het knopblok gezet en is
   daarmee ook het laatste <p>.
   Drie klassen = (0,3,0) en dat wint, zonder !important — dat laatste zou ook de
   compactere mobiele waarde hieronder overrulen. Bewust ook geen `inherit`: dat
   pakt de padding van het paneel (24px) en maakt het blok juist andersom scheef. */
.awcf-ua .awcf-ua-stap__inhoud .awcf-ua-uitleg {
    padding-bottom: .9rem;
}

.awcf-ua .awcf-ua-stap__inhoud .awcf-ua-paneelfout {
    padding-bottom: .75rem;
}

.awcf-ua-akkoord--klein {
    margin: 1rem 0 0;
    font-size: .9rem;
}

/* ---------- Opmaakveld voor de omschrijving ----------
   Vier knoppen en een `contenteditable` die eruitziet als het tekstvak dat hij
   vervangt. Het tekstvak zelf blijft staan als drager van de waarde — verborgen
   met opacity en niet met `display:none`, want een verplicht veld dat de browser
   niet kan tonen blokkeert het verzenden zonder melding. */

.awcf-ua-veld--opmaak {
    position: relative;
}

.awcf-ua-opmaakbalk {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .35rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #f7fafc;
}

.awcf-ua-opmaakknop {
    padding: .3rem .6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: .85rem;
    line-height: 1.3;
    color: var(--awcf-ua-blauw);
    cursor: pointer;
}

.awcf-ua-opmaakknop:hover {
    background: #fff;
    border-color: var(--awcf-ua-lijn);
}

.awcf-ua-opmaakknop.is-aan {
    background: var(--awcf-ua-blauw-zacht);
    border-color: var(--awcf-ua-blauw-licht);
}

.awcf-ua-opmaakknop.is-vet {
    font-weight: 700;
}

.awcf-ua-opmaakknop.is-cursief {
    font-style: italic;
}

.awcf-ua .awcf-ua-veld .awcf-ua-rte {
    min-height: 11rem;
    padding: .75rem .9rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 0 0 8px 8px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--awcf-ua-blauw);
    overflow-y: auto;
}

.awcf-ua .awcf-ua-veld .awcf-ua-rte:focus {
    outline: 2px solid var(--awcf-ua-blauw-licht);
    outline-offset: -1px;
}

/* Binnen het opmaakveld gelden de afstanden van dit veld, niet die van Divi. */
.awcf-ua-rte p {
    margin: 0 0 .6rem;
    padding: 0;
}

.awcf-ua-rte p:last-child {
    margin-bottom: 0;
}

.awcf-ua-rte ul,
.awcf-ua-rte ol {
    margin: 0 0 .6rem;
    padding-left: 1.4rem;
}

.awcf-ua-rte li {
    margin: 0 0 .2rem;
    padding: 0;
}

.awcf-ua textarea.awcf-ua-verborgen {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Velden ---------- */

.awcf-ua-veld {
    margin-bottom: 1.25rem;
}

.awcf-ua-veld label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-veld input[type="text"],
.awcf-ua-veld input[type="email"],
.awcf-ua-veld input[type="url"],
.awcf-ua-veld input[type="tel"],
.awcf-ua-veld input[type="date"],
.awcf-ua-veld textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--awcf-ua-blauw);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.awcf-ua-veld input:focus,
.awcf-ua-veld textarea:focus {
    outline: none;
    border-color: var(--awcf-ua-blauw-licht);
    box-shadow: 0 0 0 3px rgba(0, 121, 211, .15);
}

.awcf-ua-veld textarea {
    resize: vertical;
    min-height: 9rem;
    line-height: 1.55;
}

.awcf-ua-req {
    color: var(--awcf-ua-fout);
}

.awcf-ua-stap__titel .awcf-ua-req {
    font-weight: 400;
}

.awcf-ua-hint {
    margin: .3rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--awcf-ua-grijs);
}

/* Melding onder één veld: wat de browser van dit veld vindt, in gewone taal.
   De selector heeft drie klassen omdat de basisregels verderop in dit bestand
   op `input[type="..."]` staan (0,2,1) en anders zouden winnen. */
.awcf-ua-veldfout {
    margin: .3rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--awcf-ua-fout);
}

.awcf-ua .awcf-ua-veld input.is-ongeldig,
.awcf-ua .awcf-ua-veld textarea.is-ongeldig {
    border-color: var(--awcf-ua-fout);
    background: #fdf7f7;
}

.awcf-ua .awcf-ua-veld input.is-ongeldig:focus,
.awcf-ua .awcf-ua-veld textarea.is-ongeldig:focus {
    outline: 2px solid var(--awcf-ua-fout);
    outline-offset: 1px;
}

.awcf-ua-hint--centraal {
    text-align: center;
    margin-top: 1rem;
}

/* De abonnementsafspraak: staat bij de prijs, bij het akkoord en op het
   bedankscherm, en moet op alle drie de plekken hetzelfde lezen. Drie klassen
   in de selector omdat Divi met `p:not(.has-background):last-of-type` (0,2,1)
   de padding-bottom op nul zet — dit blokje is in zijn paneel steeds het
   laatste <p> tussen zijn broers. */
.awcf-ua .awcf-ua-hint.awcf-ua-abonnement {
    margin-top: .9rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--awcf-ua-geel);
    border-radius: 0 8px 8px 0;
    background: var(--awcf-ua-blauw-zacht);
    color: var(--awcf-ua-blauw);
}

.awcf-ua-teller--kort {
    color: var(--awcf-ua-fout);
    font-weight: 700;
}

.awcf-ua-subkop {
    margin: 1.4rem 0 .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.awcf-ua-rij .awcf-ua-veld {
    flex: 1 1 14rem;
}

.awcf-ua-veld--breed {
    flex: 2 1 20rem;
}

.awcf-ua-veld--smal {
    flex: 0 1 10rem;
}

.awcf-ua-veld--half {
    max-width: 20rem;
}

/* ---------- Honeypot ---------- */

.awcf-ua-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Upload ---------- */

.awcf-ua-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.awcf-ua-upload__vlak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-top: 1rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--awcf-ua-blauw-licht);
    border-radius: 12px;
    background: var(--awcf-ua-blauw-zacht);
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease;
}

.awcf-ua-upload__vlak:hover,
.awcf-ua-upload.is-sleep .awcf-ua-upload__vlak {
    background: #cfe6f1;
    border-color: var(--awcf-ua-blauw);
}

.awcf-ua-upload__titel {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-upload__hint {
    font-size: .875rem;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-upload__lijst {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.awcf-ua-foto {
    width: 6.5rem;
    font-size: .75rem;
    color: var(--awcf-ua-grijs);
    text-align: center;
}

.awcf-ua-foto img {
    display: block;
    width: 100%;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: .3rem;
}

.awcf-ua-foto--hoofd img {
    outline: 3px solid var(--awcf-ua-geel);
    outline-offset: -3px;
}

.awcf-ua-foto--fout img {
    outline: 3px solid var(--awcf-ua-fout);
    outline-offset: -3px;
}

.awcf-ua-foto__badge {
    display: block;
    font-weight: 700;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-foto__acties {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .25rem;
}

.awcf-ua-foto__actie {
    padding: 0;
    border: none;
    background: none;
    color: var(--awcf-ua-blauw-licht);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.awcf-ua-foto__actie:hover {
    color: var(--awcf-ua-blauw);
}

.awcf-ua-foto__actie:focus-visible {
    outline: 2px solid var(--awcf-ua-blauw-licht);
    outline-offset: 2px;
    border-radius: 3px;
}

.awcf-ua-upload__waarschuwing {
    margin: .75rem 0 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--awcf-ua-fout);
}

.awcf-ua-upload__waarschuwing:empty {
    display: none;
}

/* ---------- Keuzevakjes ---------- */

.awcf-ua-keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.awcf-ua-keuze {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: .95rem;
    line-height: 1.2;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.awcf-ua-keuze:hover {
    border-color: var(--awcf-ua-blauw-licht);
}

/* Het hidden-attribuut verliest van elke eigen display-regel; zonder deze
   twee regels filtert het zoekveld wel de logica maar niet het beeld. */
.awcf-ua-keuze[hidden],
.awcf-ua-groep[hidden] {
    display: none;
}

.awcf-ua-keuze input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--awcf-ua-blauw);
    cursor: pointer;
}

.awcf-ua-keuze__label {
    font-weight: 400;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-keuze.is-gekozen {
    border-color: var(--awcf-ua-blauw);
    background: var(--awcf-ua-blauw);
}

.awcf-ua-keuze.is-gekozen .awcf-ua-keuze__label {
    color: #fff;
    font-weight: 700;
}

.awcf-ua-keuze.is-op-slot {
    opacity: .4;
    cursor: not-allowed;
    border-style: dashed;
}

.awcf-ua-keuze.is-op-slot input {
    cursor: not-allowed;
}

.awcf-ua-groep + .awcf-ua-groep {
    margin-top: .5rem;
}

/* ---------- Teller ---------- */

.awcf-ua-teller-balk {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--awcf-ua-blauw-zacht);
    font-size: .875rem;
    font-weight: 700;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-teller-balk.is-vol {
    background: var(--awcf-ua-geel);
}

/* ---------- Scrollbare categorielijst ----------
   Met tientallen categorieën duwt de lijst de rest van het formulier ver naar
   beneden. Een eigen scrollvenster houdt de stap hanteerbaar; de tak-koppen
   blijven bovenaan plakken zodat je ziet waar je zit. */

.awcf-ua-catlijst {
    max-height: 22rem;
    overflow-y: auto;
    padding: .25rem .75rem .25rem .25rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 12px;
    background: #fbfdfe;
    overscroll-behavior: contain;
}

.awcf-ua-catlijst:focus-visible {
    outline: 2px solid var(--awcf-ua-blauw-licht);
    outline-offset: 2px;
}

.awcf-ua-catlijst .awcf-ua-subkop {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 .5rem;
    padding: .5rem .25rem .35rem;
    background: #fbfdfe;
}

.awcf-ua-catlijst .awcf-ua-groep + .awcf-ua-groep {
    margin-top: .75rem;
}

.awcf-ua-catlijst .awcf-ua-keuzes {
    padding: 0 .25rem .25rem;
}

/* Smalle, rustige schuifbalk in plaats van de standaard grijze balk. */
.awcf-ua-catlijst {
    scrollbar-width: thin;
    scrollbar-color: var(--awcf-ua-lijn) transparent;
}

.awcf-ua-catlijst::-webkit-scrollbar {
    width: 8px;
}

.awcf-ua-catlijst::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--awcf-ua-lijn);
}

.awcf-ua-catlijst::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Zoeken in de categorieën ---------- */

.awcf-ua-catbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: 1rem;
}

.awcf-ua-catbalk .awcf-ua-teller-balk {
    margin-bottom: 0;
}

.awcf-ua-catzoek {
    flex: 1 1 12rem;
    max-width: 16rem;
}

.awcf-ua-catzoek__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.awcf-ua-catzoek input {
    width: 100%;
    padding: .5rem .8rem;
    border: 1px solid var(--awcf-ua-lijn);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: .9rem;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-catzoek input:focus {
    outline: none;
    border-color: var(--awcf-ua-blauw-licht);
    box-shadow: 0 0 0 3px rgba(0, 121, 211, .15);
}

.awcf-ua-catleeg {
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-catleeg[hidden] {
    display: none;
}

/* ---------- Prijsregel ---------- */

.awcf-ua-prijs {
    margin-top: 1.5rem;
    padding: 1.1rem 1.35rem;
    border-radius: 12px;
    background: var(--awcf-ua-blauw);
    color: #fff;
}

.awcf-ua-prijs__regel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.awcf-ua-prijs__omschrijving {
    font-size: .95rem;
}

.awcf-ua-prijs__bedrag {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--awcf-ua-geel);
    white-space: nowrap;
}

.awcf-ua-prijs__suffix {
    display: block;
    margin-top: .15rem;
    font-size: .8rem;
    opacity: .75;
}

/* ---------- Samenvatting ---------- */

.awcf-ua-samenvatting {
    padding: 1.35rem 1.5rem;
    border-radius: 12px;
    background: var(--awcf-ua-blauw-zacht);
}

.awcf-ua-samenvatting__titel {
    margin: 0 0 .9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-samenvatting__regel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid #c5dbe6;
    font-size: .95rem;
}

.awcf-ua-samenvatting__regel span {
    flex: 0 0 auto;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-samenvatting__regel strong {
    text-align: right;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-samenvatting__regel--totaal {
    border-bottom: none;
    padding-top: .8rem;
}

.awcf-ua-samenvatting__regel--totaal strong {
    font-size: 1.5rem;
}

.awcf-ua-samenvatting__suffix {
    margin: 0;
    font-size: .8rem;
    text-align: right;
    color: var(--awcf-ua-grijs);
}

/* ---------- Akkoord en knop ---------- */

.awcf-ua-akkoord {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1.5rem 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--awcf-ua-grijs);
    cursor: pointer;
}

.awcf-ua-akkoord input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    accent-color: var(--awcf-ua-blauw);
}

.awcf-ua-knop {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    background: var(--awcf-ua-blauw);
    color: #fff;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.awcf-ua-knop:hover {
    background: var(--awcf-ua-geel);
    color: var(--awcf-ua-blauw);
}

.awcf-ua-knop:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.awcf-ua-knop.is-bezig {
    opacity: .7;
    cursor: progress;
}

/* ---------- Bedankscherm ---------- */

.awcf-ua--bedankt {
    max-width: 640px;
}

.awcf-ua-bedankt {
    padding: 2.5rem 2rem 2rem;
    border: 2px solid var(--awcf-ua-blauw);
    border-radius: 20px;
    background: #fff;
    text-align: center;
}

.awcf-ua-bedankt__vink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--awcf-ua-geel);
}

.awcf-ua-bedankt__titel {
    margin: 0 0 .75rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-bedankt__intro {
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-bedankt__intro strong {
    color: var(--awcf-ua-blauw);
}

.awcf-ua-bedankt__kaart {
    padding: 1.25rem 1.4rem 1rem;
    border-radius: 12px;
    background: var(--awcf-ua-blauw-zacht);
    text-align: left;
}

.awcf-ua-bedankt__regel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid #c5dbe6;
    font-size: .95rem;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-bedankt__label {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-bedankt__regel span:last-child {
    text-align: right;
}

.awcf-ua-bedankt__regel--bedrag {
    border-bottom: none;
    padding-top: .8rem;
}

.awcf-ua-bedankt__bedrag {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--awcf-ua-blauw);
}

.awcf-ua-bedankt__suffix {
    margin: 0;
    font-size: .8rem;
    text-align: right;
    color: var(--awcf-ua-grijs);
}

.awcf-ua-bedankt__stappen {
    margin: 1.75rem 0 0;
    text-align: left;
}

.awcf-ua-bedankt__stappen .awcf-ua-subkop {
    margin-top: 0;
}

.awcf-ua-bedankt__stappen ol {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--awcf-ua-grijs);
    font-size: .95rem;
    line-height: 1.7;
}

.awcf-ua-bedankt__stappen li::marker {
    color: var(--awcf-ua-blauw);
    font-weight: 700;
}

.awcf-ua-bedankt__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.75rem 0 0;
}

.awcf-ua-bedankt__knoppen .awcf-ua-knop {
    flex: 1 1 12rem;
    width: auto;
    text-align: center;
    text-decoration: none;
}

.awcf-ua-knop--vol {
    background: var(--awcf-ua-blauw);
    color: #fff;
}

.awcf-ua-knop--leeg {
    background: #fff;
    color: var(--awcf-ua-blauw);
    border: 2px solid var(--awcf-ua-blauw);
}

.awcf-ua-knop--leeg:hover {
    background: var(--awcf-ua-geel);
    border-color: var(--awcf-ua-geel);
    color: var(--awcf-ua-blauw);
}

/* ---------- Mobiel ----------
   Breekpunt op 767px: daar zet Divi #left-area op 100% en verdwijnt de
   sidebar-indeling. */

@media (max-width: 767px) {

    /* Op deze pagina (Divi-layout "Fullwidth") loopt de inhoud tot de rand van
       het scherm: body, .container en #left-area staan allemaal op 0 padding.
       Het formulier zet daarom zelf 15px neer. Géén full-bleed met 100vw: die
       eenheid telt de schuifbalk mee, waardoor het blok op een desktopvenster
       een paar pixels links buiten beeld valt. */
    .awcf-ua {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 2rem;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* De paginatitel staat buiten de module maar hoort op dezelfde lijn als
       het formulier; zonder dit plakt hij tegen de schermrand. */
    #left-area:has(.awcf-ua) > article > .entry-title {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* ---- Panelen ---- */

    .awcf-ua-stap {
        margin-bottom: .5rem;
        border-radius: 12px;
    }

    /* Raster in plaats van wrappende flex: bij een lange staptitel sprong het
       nummer naar de eerste regel en de chevron naar een derde. Nu staan
       nummer, titel en chevron gegarandeerd op één rij en zakt alleen de
       samenvatting naar de regel eronder. */
    .awcf-ua-stap__kop {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .3rem .6rem;
        padding: .8rem .9rem;
    }

    .awcf-ua-stap__nr {
        grid-column: 1;
        grid-row: 1;
        width: 1.75rem;
        height: 1.75rem;
        font-size: .85rem;
    }

    .awcf-ua-stap.is-af .awcf-ua-stap__nr::after {
        top: .35rem;
        left: .55rem;
        width: .35rem;
        height: .65rem;
    }

    .awcf-ua-stap__titel {
        grid-column: 2;
        grid-row: 1;
        font-size: 1.05rem;
    }

    .awcf-ua-stap__kop::after {
        grid-column: 3;
        grid-row: 1;
        margin-left: 0;
    }

    /* De samenvatting onder de titel in plaats van ernaast: naast een lange
       staptitel past "2 provincies · € 150,-" op 360px gewoon niet. */
    .awcf-ua-stap__stand {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: .8rem;
        text-align: left;
    }

    .awcf-ua-stap__inhoud {
        padding: 0 .9rem 1.1rem;
    }

    .awcf-ua-stap--afsluiter {
        margin-top: 1rem;
        padding: 1.1rem 1rem;
    }

    /* ---- Velden ---- */

    .awcf-ua-veld {
        margin-bottom: 1rem;
    }

    .awcf-ua-veld label {
        font-size: .9rem;
    }

    /* Zelfde selectorlijst als hierboven, anders wint de bredere regel.
       16px is bewust: onder die maat zoomt iOS het hele formulier in zodra je
       een veld aantikt. */
    .awcf-ua-veld input[type="text"],
    .awcf-ua-veld input[type="email"],
    .awcf-ua-veld input[type="url"],
    .awcf-ua-veld input[type="tel"],
    .awcf-ua-veld textarea {
        padding: .6rem .75rem;
        font-size: 16px;
    }

    .awcf-ua-veld textarea {
        min-height: 7rem;
    }

    .awcf-ua-hint {
        font-size: .8rem;
    }

    .awcf-ua-subkop {
        margin: 1.1rem 0 .5rem;
    }

    .awcf-ua-uitleg {
        margin-bottom: 1rem;
        padding: .75rem .85rem;
        font-size: .875rem;
    }

    /* Zelfde selector als hierboven, anders wint de desktopwaarde op mobiel. */
    .awcf-ua .awcf-ua-stap__inhoud .awcf-ua-uitleg {
        padding-bottom: .75rem;
    }

    .awcf-ua-rij {
        gap: 0;
    }

    .awcf-ua-rij .awcf-ua-veld,
    .awcf-ua-veld--breed,
    .awcf-ua-veld--smal {
        flex: 1 1 100%;
    }

    .awcf-ua-veld--half {
        max-width: none;
    }

    /* ---- Keuzevakjes ---- */

    /* Als losse "pillen" wikkelen de keuzes rafelig af: twee naast elkaar,
       dan één, dan weer twee. Op mobiel worden het daarom nette rijen —
       provincies passen met z'n tweeën naast elkaar, categorienamen als
       "Bezienswaardigheden" niet. */
    .awcf-ua-keuzes {
        display: grid;
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .awcf-ua-keuzes--provincies {
        grid-template-columns: 1fr 1fr;
    }

    .awcf-ua-keuze {
        justify-content: flex-start;
        gap: .5rem;
        padding: .55rem .7rem;
        border-radius: 10px;
        font-size: .9rem;
    }

    .awcf-ua-teller-balk {
        margin-bottom: 0;
        font-size: .8rem;
    }

    .awcf-ua-catzoek {
        flex: 1 1 100%;
        max-width: none;
    }

    .awcf-ua-catlijst {
        max-height: 17rem;
    }

    /* ---- Foto's ---- */

    .awcf-ua-upload__vlak {
        margin-top: .75rem;
        padding: 1.35rem .75rem;
    }

    .awcf-ua-upload__titel {
        font-size: .95rem;
    }

    .awcf-ua-foto {
        width: 5.25rem;
    }

    .awcf-ua-foto img {
        height: 3.75rem;
    }

    /* ---- Prijs ----
       Het bedrag is het belangrijkste dat meeloopt, dus die regel blijft
       onderin plakken zodra de provincielijst langer wordt dan het scherm. */

    .awcf-ua-prijs {
        position: sticky;
        bottom: .5rem;
        z-index: 5;
        margin-top: 1.1rem;
        padding: .85rem 1rem;
        box-shadow: 0 6px 20px rgba(0, 32, 91, .25);
    }

    /* Naast elkaar wordt het op 300px een propje: de omschrijving en het
       bedrag vechten om dezelfde regel. */
    .awcf-ua-prijs__regel {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
    }

    .awcf-ua-prijs__omschrijving {
        font-size: .85rem;
    }

    .awcf-ua-prijs__bedrag {
        font-size: 1.4rem;
    }

    /* ---- Knoppen ---- */

    .awcf-ua-volgende {
        margin-top: 1.1rem;
        padding-top: 1rem;
    }

    .awcf-ua-volgende .awcf-ua-knop--volgende {
        width: 100%;
    }

    .awcf-ua-knop {
        padding: .85rem 1.1rem;
        font-size: 1rem;
    }

    /* ---- Afsluiter ---- */

    .awcf-ua-samenvatting {
        padding: 1rem 1.1rem;
    }

    .awcf-ua-samenvatting__titel {
        font-size: 1.05rem;
    }

    .awcf-ua-samenvatting__regel--totaal strong {
        font-size: 1.3rem;
    }

    .awcf-ua-akkoord {
        margin: 1.1rem 0;
        font-size: .875rem;
    }

    /* ---- Bedankscherm ---- */

    .awcf-ua-bedankt {
        padding: 1.75rem 1.1rem 1.35rem;
        border-radius: 14px;
    }

    .awcf-ua-bedankt__titel {
        font-size: 1.4rem;
    }

    .awcf-ua-bedankt__intro {
        margin-bottom: 1.35rem;
        font-size: .975rem;
    }

    .awcf-ua-bedankt__kaart {
        padding: 1rem 1.1rem .85rem;
    }

    .awcf-ua-bedankt__regel {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
    }

    .awcf-ua-bedankt__regel span:last-child {
        text-align: left;
    }

    .awcf-ua-bedankt__bedrag {
        font-size: 1.35rem;
    }

    .awcf-ua-bedankt__knoppen .awcf-ua-knop {
        flex: 1 1 100%;
    }

    .awcf-ua-melding {
        margin-bottom: 1.25rem;
        padding: 1rem 1.1rem;
    }
}