/*
 * Bijzonder Tafelen — aanvraagformulier
 *
 * ── Waarom dit bestand eruitziet zoals het eruitziet ────────────────────────
 *
 * De eerste versie was bewust zuinig: een paar klassen, kleuren uit
 * currentColor, en verder het thema zijn gang laten gaan. Dat pakte verkeerd
 * uit. Een WordPress-thema schrijft vrolijk `input[type="text"] { border: 0;
 * border-bottom: 1px solid }`, en dat wint het van een losse `.bt-invoer`:
 * gelijke specificiteit, maar het thema laadt later. Het formulier viel uit
 * elkaar in een reeks zwevende onderstreepjes.
 *
 * Daarom staat nu élke regel onder `.bt-aanvraag`. Dat is specificiteit (0,2,0)
 * tegen de (0,1,1) van een themaregel op een elementselector, dus wij winnen —
 * zonder één `!important`. En elke eigenschap die een thema pleegt te zetten
 * wordt hier expliciet gezet: border aan alle vier de kanten, achtergrond,
 * radius, schaduw, padding, regelhoogte, appearance. Half zetten is niet zetten.
 *
 * En dan zijn er thema's die `border: 0 !important` op elk invoerveld zetten.
 * Daar helpt specificiteit niet tegen; alleen `!important` wint van
 * `!important`. Dat staat daarom in één afgebakend blok onderaan dit bestand —
 * "het pantser" — met precies de eigenschappen die thema's plegen te
 * overschrijven, en nergens anders. Zo is in één oogopslag te zien waar de
 * plugin zijn poot stijf houdt, en blijft de rest gewoon te overschrijven.
 *
 * De kleuren staan als variabelen op `.bt-aanvraag`. Wil een site het formulier
 * naar zijn huisstijl trekken, dan is dat één regel in het thema — die werkt
 * ook door het pantser heen, want dat zet geen kleuren maar variabelen:
 *
 *     .bt-aanvraag { --bt-accent: #5a2d82; --bt-radius: 4px; }
 *
 * Alle klassen beginnen met `bt-`.
 */

.bt-aanvraag {
    --bt-ink:        #1b1d21;
    --bt-tekst:      #4b5058;
    --bt-zacht:      #767c86;
    --bt-lijn:       #e2e5ea;
    --bt-lijn-sterk: #cbd0d8;
    --bt-vlak:       #ffffff;
    --bt-vlak-zacht: #f7f8fa;
    --bt-accent:     #1b1d21;
    --bt-accent-op:  #ffffff;
    --bt-rood:       #b3261e;
    --bt-rood-zacht: #fdf3f2;
    --bt-groen:      #1e5b36;
    --bt-groen-zacht:#f1f8f3;
    --bt-radius:     12px;
    --bt-radius-s:   9px;

    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    color: var(--bt-ink);
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
    box-sizing: border-box;
}
.bt-aanvraag *,
.bt-aanvraag *::before,
.bt-aanvraag *::after { box-sizing: border-box; }

/*
 * Verborgen is verborgen.
 *
 * De browser regelt dat zelf met [hidden] { display: none }, maar dat is
 * specificiteit (0,1,0) en alles hieronder is (0,2,0) — dus onze eigen
 * `display: block` op een veld won het van het verbergen, en de keuzelijst die
 * JavaScript wegzet bleef gewoon onder de kaarten staan. De dubbele
 * attribuutselector maakt er (0,3,0) van: hoger dan al onze eigen regels, en
 * nog steeds zonder !important.
 */
.bt-aanvraag [hidden][hidden] { display: none; }

.bt-aanvraag .bt-titel {
    margin: 0 0 22px;
    color: var(--bt-ink);
    font-size: 1.7em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Alleen voor schermlezers. */
.bt-aanvraag .bt-vh {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bt-aanvraag .bt-form {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
}

/* ── Een stap ───────────────────────────────────────────────────────────────
   Drie blokken onder elkaar in plaats van elf velden op een rij. Het is geen
   wizard: alles staat open, je kunt gewoon doorscrollen. De nummers zijn er om
   te laten zien hoe kort het is. */
.bt-aanvraag .bt-stap {
    margin: 0;
    padding: 22px 24px 24px;
    border: 1px solid var(--bt-lijn);
    border-radius: var(--bt-radius);
    background: var(--bt-vlak);
}

.bt-aanvraag .bt-stap__kop {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    color: var(--bt-ink);
    font-size: 1.12em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
}

.bt-aanvraag .bt-stap__nr {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bt-accent);
    color: var(--bt-accent-op);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1;
}

.bt-aanvraag .bt-stap__titel { flex: 1 1 auto; min-width: 0; }

.bt-aanvraag .bt-stap__bij {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bt-vlak-zacht);
    color: var(--bt-zacht);
    font-size: 0.68em;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ── Velden ─────────────────────────────────────────────────────────────── */
.bt-aanvraag .bt-velden {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.bt-aanvraag .bt-veld {
    display: grid;
    gap: 7px;
    align-content: start;
    min-width: 0;
}
.bt-aanvraag .bt-veld--breed { grid-column: 1 / -1; }

.bt-aanvraag .bt-label {
    display: block;
    margin: 0;
    color: var(--bt-tekst);
    font-size: 0.84em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.bt-aanvraag .bt-ster { color: var(--bt-rood); font-weight: 400; }

/* Alles expliciet: een thema dat alleen border-bottom zet, laat de rest hier
   staan en dan klopt het veld niet meer. */
.bt-aanvraag .bt-invoer {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 46px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--bt-lijn-sterk);
    border-radius: var(--bt-radius-s);
    background-color: var(--bt-vlak);
    background-image: none;
    box-shadow: none;
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bt-aanvraag .bt-invoer:hover { border-color: var(--bt-zacht); }
.bt-aanvraag .bt-invoer:focus,
.bt-aanvraag .bt-invoer:focus-visible {
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 3px rgba(27, 29, 33, 0.1);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Een eigen pijltje, want het pijltje van de browser verschilt per thema en
   per besturingssysteem en springt er altijd uit. */
.bt-aanvraag select.bt-invoer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234b5058' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

.bt-aanvraag textarea.bt-invoer {
    min-height: 118px;
    resize: vertical;
    line-height: 1.55;
}

.bt-aanvraag .bt-invoer::placeholder {
    color: var(--bt-zacht);
    opacity: 1;
    font-style: italic;
}

.bt-aanvraag .bt-hint {
    margin: 0 0 14px;
    padding: 0;
    color: var(--bt-zacht);
    font-size: 0.84em;
    line-height: 1.55;
}
.bt-aanvraag .bt-hint--klein { margin: 0; font-size: 0.78em; }

.bt-aanvraag .bt-veld--fout .bt-invoer { border-color: var(--bt-rood); }
.bt-aanvraag .bt-foutje {
    margin: 0;
    padding: 0;
    color: var(--bt-rood);
    font-size: 0.82em;
    line-height: 1.45;
}

/* ── Zoeken in de arrangementen ─────────────────────────────────────────── */
.bt-aanvraag .bt-zoek {
    position: relative;
    display: block;
    margin: 0 0 14px;
}

.bt-aanvraag .bt-zoek__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.bt-aanvraag .bt-zoek__icoon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: block;
    margin-top: -9px;
    color: var(--bt-zacht);
    pointer-events: none;
}

.bt-aanvraag .bt-zoek__veld {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 42px 11px 42px;
    border: 1px solid var(--bt-lijn-sterk);
    border-radius: 999px;
    background-color: var(--bt-vlak);
    background-image: none;
    box-shadow: none;
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 0.95em;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}
.bt-aanvraag .bt-zoek__veld:hover { border-color: var(--bt-zacht); }
.bt-aanvraag .bt-zoek__veld:focus,
.bt-aanvraag .bt-zoek__veld:focus-visible {
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 3px rgba(27, 29, 33, 0.1);
    outline: 2px solid transparent;
}
.bt-aanvraag .bt-zoek__veld::placeholder { color: var(--bt-zacht); opacity: 1; }
/* Het kruisje van de browser zelf weg: we hebben er een eigen, en twee zijn er
   een te veel. */
.bt-aanvraag .bt-zoek__veld::-webkit-search-cancel-button { -webkit-appearance: none; }

.bt-aanvraag .bt-zoek__wis {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bt-vlak-zacht);
    color: var(--bt-tekst);
    cursor: pointer;
}
.bt-aanvraag .bt-zoek__wis:hover { background: var(--bt-lijn); color: var(--bt-ink); }

/* ── De regel die zegt wat er gefilterd is ──────────────────────────────── */
.bt-aanvraag .bt-telregel {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 0;
    color: var(--bt-zacht);
    font-size: 0.84em;
    line-height: 1.5;
}

.bt-aanvraag .bt-toonalles {
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.bt-aanvraag .bt-toonalles:hover { text-decoration: none; }

/* ── De arrangementen als kaarten ───────────────────────────────────────────
   Alleen met JavaScript; zonder blijft de keuzelijst staan en die werkt overal. */
.bt-aanvraag .bt-kaarten {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-aanvraag .bt-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bt-lijn);
    border-radius: var(--bt-radius);
    background: var(--bt-vlak);
    box-shadow: none;
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.bt-aanvraag .bt-kaart:hover {
    border-color: var(--bt-lijn-sterk);
    box-shadow: 0 6px 18px rgba(16, 20, 28, 0.08);
    transform: translateY(-1px);
}
.bt-aanvraag .bt-kaart:focus-visible {
    outline: 2px solid var(--bt-accent);
    outline-offset: 2px;
}

.bt-aanvraag .bt-kaart[aria-pressed="true"] {
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 1px var(--bt-accent) inset, 0 6px 18px rgba(16, 20, 28, 0.08);
}

.bt-aanvraag .bt-kaart__foto {
    display: block;
    width: 100%;
    height: 132px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    background: var(--bt-vlak-zacht);
}

.bt-aanvraag .bt-kaart__body {
    display: block;
    flex: 1 1 auto;
    padding: 13px 15px 15px;
}

.bt-aanvraag .bt-kaart__naam {
    display: block;
    /* Ruimte voor het vinkje rechtsboven. Op een smal scherm staat de foto
       links en komt het vinkje over de tekst; dit houdt die twee uit elkaar. */
    padding-right: 32px;
    color: var(--bt-ink);
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.bt-aanvraag .bt-kaart__prijs {
    display: block;
    margin-top: 5px;
    color: var(--bt-tekst);
    font-size: 0.86em;
    font-weight: 500;
    line-height: 1.4;
}

.bt-aanvraag .bt-kaart__tekst {
    display: block;
    margin-top: 7px;
    color: var(--bt-zacht);
    font-size: 0.84em;
    line-height: 1.5;
}

/* Het vinkje op een gekozen kaart. Zonder dat is "gekozen" alleen een randje,
   en een randje zie je op een telefoon met zonlicht erop niet. */
.bt-aanvraag .bt-kaart__vink {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bt-accent);
    color: var(--bt-accent-op);
    box-shadow: 0 1px 4px rgba(16, 20, 28, 0.3);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.bt-aanvraag .bt-kaart[aria-pressed="true"] .bt-kaart__vink {
    opacity: 1;
    transform: scale(1);
}

/* Zichtbaar maar duidelijk niet te kiezen, met de reden erbij. */
.bt-aanvraag .bt-kaart--past-niet { cursor: default; }
.bt-aanvraag .bt-kaart--past-niet:hover {
    border-color: var(--bt-lijn);
    box-shadow: none;
    transform: none;
}
.bt-aanvraag .bt-kaart--past-niet .bt-kaart__foto { filter: grayscale(1); opacity: 0.55; }
.bt-aanvraag .bt-kaart--past-niet .bt-kaart__naam,
.bt-aanvraag .bt-kaart--past-niet .bt-kaart__prijs,
.bt-aanvraag .bt-kaart--past-niet .bt-kaart__tekst { color: var(--bt-zacht); }

.bt-aanvraag .bt-kaart__reden {
    display: inline-block;
    margin-top: 9px;
    padding: 3px 9px;
    /* Geen 999px: een reden die over twee regels loopt wordt daarmee een
       klodder in plaats van een etiket. */
    border-radius: 7px;
    background: var(--bt-vlak-zacht);
    color: var(--bt-tekst);
    font-size: 0.76em;
    font-weight: 500;
    line-height: 1.5;
}

.bt-aanvraag .bt-geenkaarten {
    margin: 0;
    padding: 24px 20px;
    border: 1px solid var(--bt-lijn);
    border-radius: var(--bt-radius);
    background: var(--bt-vlak-zacht);
    color: var(--bt-zacht);
    font-size: 0.88em;
    line-height: 1.6;
    text-align: center;
}

/* ── Versturen ──────────────────────────────────────────────────────────── */
.bt-aanvraag .bt-slot {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 2px 4px 0;
}

.bt-aanvraag .bt-knop {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 14px 30px;
    border: 1px solid var(--bt-accent);
    border-radius: 999px;
    background: var(--bt-accent);
    box-shadow: none;
    color: var(--bt-accent-op);
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}
.bt-aanvraag .bt-knop:hover {
    opacity: 0.9;
    box-shadow: 0 6px 18px rgba(16, 20, 28, 0.18);
}
.bt-aanvraag .bt-knop:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 3px; }

/* Het veld dat alleen een robot invult: buiten beeld in plaats van verborgen,
   want sommige robots slaan display:none over. */
.bt-aanvraag .bt-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Meldingen ──────────────────────────────────────────────────────────── */
.bt-blok {
    box-sizing: border-box;
    max-width: 860px;
    margin: 0 auto 16px;
    padding: 20px 22px;
    border: 1px solid var(--bt-lijn, #e2e5ea);
    border-radius: 12px;
    background: #f7f8fa;
    color: #1b1d21;
    line-height: 1.6;
    text-align: left;
}
.bt-blok--gelukt { border-color: #cde4d6; background: #f1f8f3; }
.bt-blok--fout { border-color: #f0c7c3; background: #fdf3f2; }
.bt-blok .bt-kop { margin: 0 0 6px; font-size: 1.15em; line-height: 1.3; }
.bt-blok .bt-tekst { margin: 0; line-height: 1.6; }

.bt-vink {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 0 13px;
    border-radius: 50%;
    background: #e4f2e8;
    color: #1e5b36;
    font-size: 20px;
}

/* ── Smal scherm ────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
    .bt-aanvraag { font-size: 15px; }
    .bt-aanvraag .bt-stap { padding: 18px 16px 20px; }
    .bt-aanvraag .bt-velden { grid-template-columns: 1fr; gap: 14px; }
    .bt-aanvraag .bt-kaarten { grid-template-columns: 1fr; }
    .bt-aanvraag .bt-kaart { flex-direction: row; align-items: stretch; }
    .bt-aanvraag .bt-kaart__foto { width: 104px; height: auto; flex: none; align-self: stretch; }
    .bt-aanvraag .bt-kaart__body { padding: 12px 14px; }
    .bt-aanvraag .bt-knop { width: 100%; }
    .bt-aanvraag .bt-slot { justify-items: stretch; }
}


/* ── Het locatiefilter ──────────────────────────────────────────────────────
   Alleen om te kíjken, niet om te boeken: waar de aanvraag heen gaat staat in
   stap 1. "Alle locaties" staat aan, want niemand hoort iets te missen omdat
   hij vergat ergens op te klikken. */
.bt-aanvraag .bt-locaties {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.bt-aanvraag .bt-locaties__kop {
    margin-right: 3px;
    color: var(--bt-zacht);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.bt-aanvraag .bt-chip {
    display: inline-block;
    margin: 0;
    padding: 6px 13px;
    border: 1px solid var(--bt-lijn-sterk);
    border-radius: 999px;
    background: var(--bt-vlak);
    color: var(--bt-tekst);
    font-family: inherit;
    font-size: 0.82em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.bt-aanvraag .bt-chip:hover { border-color: var(--bt-zacht); color: var(--bt-ink); }
.bt-aanvraag .bt-chip.is-aan {
    border-color: var(--bt-accent);
    background: var(--bt-accent);
    color: var(--bt-accent-op);
}
.bt-aanvraag .bt-chip:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }

/* Waar een arrangement te krijgen is. */
.bt-aanvraag .bt-kaart__waar {
    display: block;
    margin-top: 7px;
    color: var(--bt-zacht);
    font-size: 0.78em;
    line-height: 1.45;
}

/* "Dit arrangement is bij Kerkrade; de locatie hierboven is aangepast." */
.bt-aanvraag .bt-locatiemelding {
    margin: 12px 0 0;
    padding: 11px 14px;
    border: 1px solid #cde4d6;
    border-radius: var(--bt-radius-s);
    background: var(--bt-groen-zacht);
    color: var(--bt-groen);
    font-size: 0.85em;
    line-height: 1.5;
}

/* ── De kalender ────────────────────────────────────────────────────────────
   Het datumveld van de browser ziet er op elk toestel anders uit. Dit is
   overal hetzelfde, en het past bij de rest. Zonder JavaScript blijft het
   gewone veld staan; dan komt niets hiervan in beeld. */
.bt-aanvraag .bt-datum { position: relative; }
/* Het veld blijft in het formulier staan — dáár komt de datum in — maar het
   komt niet meer in beeld. Een veld met display:none wordt nog gewoon
   meegestuurd, dus aan het versturen verandert niets. */
.bt-aanvraag .bt-datum--eigen > .bt-invoer { display: none; }

.bt-aanvraag .bt-datumknop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--bt-lijn-sterk);
    border-radius: var(--bt-radius-s);
    background: var(--bt-vlak);
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}
.bt-aanvraag .bt-datumknop:hover { border-color: var(--bt-zacht); }
.bt-aanvraag .bt-datumknop:focus-visible {
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 3px rgba(27, 29, 33, 0.1);
    outline: 2px solid transparent;
}
.bt-aanvraag .bt-datumknop.is-leeg .bt-datumknop__tekst { color: var(--bt-zacht); font-style: italic; }
.bt-aanvraag .bt-datumknop__tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-aanvraag .bt-datumknop__icoon { flex: none; display: block; color: var(--bt-zacht); }

.bt-aanvraag .bt-kalender {
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    left: 0;
    width: 290px;
    max-width: calc(100vw - 32px);
    padding: 13px;
    border: 1px solid var(--bt-lijn);
    border-radius: var(--bt-radius);
    background: var(--bt-vlak);
    box-shadow: 0 14px 40px rgba(16, 20, 28, 0.16);
}

.bt-aanvraag .bt-kalender__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.bt-aanvraag .bt-kalender__titel {
    flex: 1;
    color: var(--bt-ink);
    font-size: 0.92em;
    font-weight: 600;
    text-align: center;
}

.bt-aanvraag .bt-kalender__pijl {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--bt-lijn);
    border-radius: 8px;
    background: var(--bt-vlak);
    color: var(--bt-tekst);
    cursor: pointer;
}
.bt-aanvraag .bt-kalender__pijl:hover:not([disabled]) { border-color: var(--bt-zacht); color: var(--bt-ink); }
.bt-aanvraag .bt-kalender__pijl[disabled] { opacity: 0.35; cursor: default; }

.bt-aanvraag .bt-kalender__dagen,
.bt-aanvraag .bt-kalender__raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.bt-aanvraag .bt-kalender__dagen {
    margin-bottom: 4px;
    color: var(--bt-zacht);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.bt-aanvraag .bt-kalender__dag {
    display: grid;
    place-items: center;
    width: 100%;
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--bt-ink);
    font-family: inherit;
    font-size: 0.86em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
.bt-aanvraag .bt-kalender__dag:hover:not([disabled]) { background: var(--bt-vlak-zacht); }
.bt-aanvraag .bt-kalender__dag:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: -2px; }
.bt-aanvraag .bt-kalender__dag[disabled] { color: var(--bt-lijn-sterk); cursor: default; }
.bt-aanvraag .bt-kalender__dag.is-vandaag { box-shadow: 0 0 0 1px var(--bt-lijn-sterk) inset; }
.bt-aanvraag .bt-kalender__dag.is-gekozen {
    background: var(--bt-accent);
    color: var(--bt-accent-op);
    font-weight: 600;
}
.bt-aanvraag .bt-kalender__dag.is-gekozen:hover { background: var(--bt-accent); }

.bt-aanvraag .bt-kalender__voet:not(:empty) {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--bt-lijn-softer, var(--bt-lijn));
    text-align: center;
}

.bt-aanvraag .bt-kalender__wis {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bt-zacht);
    font-family: inherit;
    font-size: 0.8em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.bt-aanvraag .bt-kalender__wis:hover { color: var(--bt-ink); }

/* Op een telefoon midden in beeld in plaats van onder een veld dat half
   buiten het scherm valt. */
@media (max-width: 480px) {
    .bt-aanvraag .bt-kalender {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 300px;
        transform: translate(-50%, -50%);
    }
}

/* ==========================================================================
   Het pantser
   --------------------------------------------------------------------------
   Hieronder staat niets nieuws: alleen de eigenschappen die hierboven al zijn
   gezet, nog een keer, met !important erachter. Dat is lelijk en het is met
   opzet beperkt tot deze lijst.

   De aanleiding: een thema dat op elk invoerveld `border: 0 !important;
   border-bottom: 1px solid #ddd !important; padding: 10px 0 !important` zet.
   Het formulier viel daarmee uit elkaar in een rij zwevende onderstreepjes, en
   het zoekveld had zijn vergrootglas dwars door de tekst heen staan. Tegen
   !important is specificiteit machteloos; alleen hetzelfde middel helpt.

   Alles wat hier staat gaat over vórm, niet over kleur: de kleuren komen uit
   de variabelen bovenaan, en die kan een site gewoon overschrijven. Wie het
   formulier echt anders wil, zet die variabelen — dat blijft werken.
   ========================================================================== */

.bt-aanvraag [hidden][hidden] { display: none !important; }

.bt-aanvraag .bt-invoer,
.bt-aanvraag .bt-zoek__veld {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
    margin: 0 !important;
    border: 1px solid var(--bt-lijn-sterk) !important;
    background-color: var(--bt-vlak) !important;
    box-shadow: none !important;
    color: var(--bt-ink) !important;
    font-family: inherit !important;
    font-size: 0.95em !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.bt-aanvraag .bt-invoer {
    padding: 11px 13px !important;
    border-radius: var(--bt-radius-s) !important;
}

.bt-aanvraag select.bt-invoer {
    padding-right: 38px !important;
    /* Zonder dit zet een thema dat `background: transparent !important` roept
       ook ons eigen pijltje uit, en dan is het een kale witte balk. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234b5058' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
}

.bt-aanvraag textarea.bt-invoer { min-height: 118px !important; }

.bt-aanvraag .bt-zoek__veld {
    padding: 11px 42px !important;
    border-radius: 999px !important;
    background-image: none !important;
}

.bt-aanvraag .bt-invoer:focus,
.bt-aanvraag .bt-zoek__veld:focus {
    border-color: var(--bt-accent) !important;
    box-shadow: 0 0 0 3px rgba(27, 29, 33, 0.1) !important;
}

.bt-aanvraag .bt-veld--fout .bt-invoer { border-color: var(--bt-rood) !important; }

.bt-aanvraag .bt-label {
    display: block !important;
    margin: 0 !important;
    color: var(--bt-tekst) !important;
    font-family: inherit !important;
    font-size: 0.84em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

.bt-aanvraag .bt-knop {
    width: auto !important;
    margin: 0 !important;
    padding: 14px 30px !important;
    border: 1px solid var(--bt-accent) !important;
    border-radius: 999px !important;
    background: var(--bt-accent) !important;
    color: var(--bt-accent-op) !important;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
}

.bt-aanvraag .bt-kaart {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--bt-lijn) !important;
    border-radius: var(--bt-radius) !important;
    background: var(--bt-vlak) !important;
    color: var(--bt-ink) !important;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
}
.bt-aanvraag .bt-kaart[aria-pressed="true"] { border-color: var(--bt-accent) !important; }
.bt-aanvraag .bt-kaart--past-niet:hover { border-color: var(--bt-lijn) !important; }

.bt-aanvraag .bt-kaart__foto {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 132px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

.bt-aanvraag .bt-zoek__wis {
    width: 30px !important;
    min-height: 0 !important;
    height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--bt-vlak-zacht) !important;
    color: var(--bt-tekst) !important;
}

/* Het pantser zet hierboven de maten van elk .bt-invoer vast — ook van het
   datumveld dat de kalender juist wegstopt. Zonder deze regel staat het
   oorspronkelijke veld er in volle glorie náást de kalenderknop. */
.bt-aanvraag .bt-datum--eigen > .bt-invoer { display: none !important; }

.bt-aanvraag .bt-datumknop {
    width: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border: 1px solid var(--bt-lijn-sterk) !important;
    border-radius: var(--bt-radius-s) !important;
    background: var(--bt-vlak) !important;
    color: var(--bt-ink) !important;
    font-family: inherit !important;
    font-size: 0.95em !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
}

.bt-aanvraag .bt-chip {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 13px !important;
    border: 1px solid var(--bt-lijn-sterk) !important;
    border-radius: 999px !important;
    background: var(--bt-vlak) !important;
    color: var(--bt-tekst) !important;
    font-family: inherit !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.bt-aanvraag .bt-chip.is-aan {
    border-color: var(--bt-accent) !important;
    background: var(--bt-accent) !important;
    color: var(--bt-accent-op) !important;
}

.bt-aanvraag .bt-kalender__pijl,
.bt-aanvraag .bt-kalender__dag,
.bt-aanvraag .bt-kalender__wis {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.bt-aanvraag .bt-kalender__pijl {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid var(--bt-lijn) !important;
    border-radius: 8px !important;
    background: var(--bt-vlak) !important;
    color: var(--bt-tekst) !important;
}
.bt-aanvraag .bt-kalender__dag {
    width: 100% !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: none !important;
    color: var(--bt-ink) !important;
    font-size: 0.86em !important;
}
.bt-aanvraag .bt-kalender__dag.is-gekozen {
    background: var(--bt-accent) !important;
    color: var(--bt-accent-op) !important;
}
.bt-aanvraag .bt-kalender__dag[disabled] { color: var(--bt-lijn-sterk) !important; }
.bt-aanvraag .bt-kalender__wis {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--bt-zacht) !important;
    font-size: 0.8em !important;
}

.bt-aanvraag .bt-toonalles {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--bt-ink) !important;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    text-transform: none !important;
}

/* Op een telefoon staat de foto naast de tekst in plaats van erboven. */
@media (max-width: 620px) {
    .bt-aanvraag .bt-kaart__foto { width: 104px !important; height: auto !important; }
    .bt-aanvraag .bt-knop { width: 100% !important; }
}