/* =====================================================================
   eventer/assets/eventer_zoeker.css
   Uit eventer/index.php gehaald op 06-09-2026.

   Waarom: index.php was 4940 regels met PHP, HTML, CSS en JavaScript
   door elkaar. Dit is stap 1 van drie — alleen de CSS. De JavaScript
   en de resultatenpagina volgen apart, met een test ertussen.

   Twee blokken stonden hieronder: de opmaak van de zoeker (stond in
   de <head>) en die van het resultatenscherm (werd door
   toonResultaten() met echo uitgestuurd, midden in de body). Beide
   bevatten geen PHP, dus ze konden een op een mee. Ze staan hier
   onder elkaar met de grens duidelijk gemarkeerd.

   HOORT IN eventer/assets/ EN NERGENS ANDERS. Dit is opmaak van
   Eventer; de gedeelde bestanden van OffRio blijven waar ze zijn.

   NIET AANRAKEN VANUIT DIT BESTAND: assets/portal.css,
   assets/offertegrid.css en assets/eventer.css worden hierna alsnog
   geladen en ook elders gebruikt. Wat hier staat is aanvullend en
   wint omdat het als laatste komt.
   ===================================================================== */

/* ══════════════════════════════════════════════════════════════════
   DEEL 1 — DE ZOEKER
   Stond in de <head> van index.php.
   ══════════════════════════════════════════════════════════════════ */





 /* ===== BRANCH GRID - FORCEER ===== */
.branch-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}

.branch-grid-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--cream) !important;
    user-select: none !important;
    min-height: 44px !important;
}

.branch-grid-item:hover {
    border-color: rgba(212, 175, 55, 0.3) !important;
    background: rgba(212, 175, 55, 0.06) !important;
}

.branch-grid-item.selected {
    border-color: #d4af37 !important;
    background: rgba(212, 175, 55, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15) !important;
}

.branch-grid-item .check {
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    font-size: 14px !important;
    width: 20px !important;
}

.branch-grid-item.selected .check {
    opacity: 1 !important;
}

.branch-grid-item .icon {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center !important;
}

.branch-grid-item .name {
    flex: 1 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.branch-grid-item .badge {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #d4af37 !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.branch-counter {
    font-size: 12px !important;
    color: var(--sub) !important;
    margin-top: 10px !important;
    text-align: right !important;
}


/* ============================================================
   EVENTER V3.0 STIJLEN
   ============================================================ */

/* Kalender stijlen (gekopieerd uit widget) */
.orw-kal-veld {
    position: relative;
}
.orw-kal-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1.5px solid #e3d6c8;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    padding: 16px;
    width: 300px;
    max-width: 90vw;
    color: #1a1a1a;
}
.orw-kal-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.orw-kal-nav select {
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border: 1.5px solid #e3d6c8;
    border-radius: 8px;
    background: #fff;
    color: #2c1f16;
    cursor: pointer;
}
.orw-kal-dagen {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}
.orw-kal-dag-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8a7a6a;
    padding: 6px 0;
}
.orw-kal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.orw-kal-dag {
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #2c1f16;
    background: transparent;
    position: relative;
    transition: background 0.15s;
}
.orw-kal-dag:hover:not(.orw-kal-uit) {
    background: #f5ede3;
}
.orw-kal-dag.orw-kal-uit {
    color: #cbb8a8;
    cursor: default;
    pointer-events: none;
}
.orw-kal-dag.orw-kal-vandaag {
    font-weight: 700;
    border: 2px solid #b8862c;
}
.orw-kal-dag.orw-kal-leeg {
    visibility: hidden;
    pointer-events: none;
}
.orw-kal-dag.orw-kal-deels {
    color: #b8862c;
}
.orw-kal-stip {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b22222;
}
.orw-kal-laden {
    text-align: center;
    font-size: 14px;
    color: #8a7a6a;
    padding: 24px 0;
}
.orw-kal-info-melding {
    display: none;
    margin-top: 10px;
    padding: 12px 16px;
    background: #fdf3e4;
    border: 1px solid #eab30860;
    border-radius: 10px;
    font-size: 13px;
    color: #7a5c1a;
    line-height: 1.5;
}
/* ══ FORMULIER MET ADVERTENTIEKOLOM ═══════════════════════════
   Boven 1080px naast elkaar, daaronder gestapeld. De grens ligt
   bewust hoog: bij een smaller scherm wordt de advertentiekolom zo
   dun dat de tekst gaat breken, en dan ziet een betaalde plek er
   goedkoop uit.
   ═══════════════════════════════════════════════════════════ */
.ev-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: start;
}
@media (min-width: 1080px) {
    .ev-raster { grid-template-columns: minmax(0, 1fr) 268px; }
}
/* 07-10-2026. Geen advertenties: niet een gat van 268px rechts
   openhouden. Het formulier pakt de breedte van het raster. */
.ev-raster.ev-raster-alleen { grid-template-columns: 1fr; }
@media (min-width: 1080px) {
    .ev-raster.ev-raster-alleen { grid-template-columns: minmax(0, 1fr); }
}
.ev-raster-hoofd { min-width: 0; }  /* zonder dit rekt een lange regel de kolom op */

.ev-raster-zij {
    display: flex;
    flex-direction: column;
    gap: 11px;
    /* Meescrollen tot een eind: de advertentie blijft in beeld
       terwijl iemand het formulier invult, zonder dat hij de hele
       pagina volgt. */
    position: sticky;
    top: 16px;
}
@media (max-width: 1079px) {
    .ev-raster-zij { position: static; }
}

.ev-ad-kop {
    font-size: 10px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: rgba(245,240,230,.62);
    padding-left: 2px;
}

.ev-ad {
    display: block; text-decoration: none; position: relative;
    background: linear-gradient(158deg, #191426, #12101c);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    padding: 17px 18px 15px;
    transition: transform .18s ease, border-color .18s ease;
}
.ev-ad:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.4); }

/* De uitgelichte plek — dat is de duurste en die moet je zien. */
.ev-ad.top {
    background: linear-gradient(158deg, #3d2a14, #1d1409);
    border-color: rgba(212,175,55,.42);
    box-shadow: 0 0 26px rgba(212,175,55,.13);
}
.ev-ad-ster {
    position: absolute; top: -8px; right: 13px;
    background: linear-gradient(135deg, #d4af37, #f0d060);
    color: #1a1206; font-size: 8.5px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
}

.ev-ad-icoon { font-size: 26px; line-height: 1; margin-bottom: 9px; }
.ev-ad-beeld {
    width: 100%; max-height: 78px; object-fit: contain;
    border-radius: 8px; background: #fff; padding: 7px;
    margin-bottom: 10px;
}
/* Kleuren staan hier en niet in eventer.css: die zet geen
   achtergrondkleur, en dan zou dit blok wit-op-wit worden zodra het
   op een lichte pagina belandt. */
.ev-ad-titel { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.28; margin-bottom: 5px; }
.ev-ad-sub   { font-size: 12.5px; color: rgba(245,240,230,.68); line-height: 1.55; }
.ev-ad-cta   { font-size: 12px; font-weight: 700; color: #d4af37; margin-top: 11px; }
.ev-ad.top .ev-ad-cta { color: #f0d060; }

.ev-ad-voet {
    font-size: 11px; color: rgba(245,240,230,.55);
    text-align: center; padding-top: 4px;
}
.ev-ad-voet a { color: rgba(212,175,55,.75); text-decoration: none; }

/* ══ DE KOP ═══════════════════════════════════════════════════
   TERUGGEBRACHT (06-09-2026). Hij stond op clamp(34px, 8.5vw, 82px)
   en vulde daarmee op een gewoon laptopscherm het halve beeld: de
   bezoeker las de belofte en moest scrollen om te zien of er ook
   iets te doen viel. Een kop die de zoeker uit beeld duwt werkt
   tegen zichzelf, hoe mooi hij ook is.

   Nu: 22px op een telefoon, 46px op een breed scherm. Groot genoeg
   om het eerste te zijn wat je leest, klein genoeg dat het formulier
   eronder meteen zichtbaar is. De gouden gloed op de onderregel
   blijft — die deed het werk, de puntgrootte niet.

   Ook de ruimte eromheen is ingehaald: het blok stond op 56px marge
   boven en onder, wat bij een kleinere kop een gat wordt.
   ═══════════════════════════════════════════════════════════ */
.ev-hero-groot {
    font-size: clamp(22px, 5vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
    margin: 0 0 12px !important;
}
/* De kop is geen twee regels meer op een breed scherm; de <br>
   mag dan weg zodat "Echte offertes. In één seconde." als één zin
   leest. Onder 700px blijft hij afbreken. */
@media (min-width: 700px) {
    .ev-hero-titel br { display: none; }
    .ev-hero-titel span { margin-left: .35em; }
}
.ev-hero { padding-top: 26px !important; padding-bottom: 18px !important; }
.ev-hero-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.ev-hero-groot span {
    /* Een zachte gloed achter het goud. Subtiel genoeg om niet
       goedkoop te worden, sterk genoeg om het oog te trekken naar
       precies de belofte die het verschil maakt. */
    text-shadow: 0 0 34px rgba(212, 175, 55, .38);
}

/* ══ LOPENDE BAND MET BEDRIJVEN ═══════════════════════════════
   Mahonie: een warme roodbruine tint die het van de zwarte
   achtergrond wint zonder te schreeuwen. Bewust matter dan het
   goud van de merkkleur — de band is achtergrondbewijs, geen
   knop, en mag de aandacht niet van de zoeker afhalen.
   ═══════════════════════════════════════════════════════════ */
.ev-band {
    /* overflow verbergt alles buiten beeld; de maskers laten de
       kaarten aan beide kanten vervagen in plaats van er hard
       afgesneden te worden. */
    overflow: hidden;
    padding: 8px 0 4px;

    /* UITLIJNEN OP DE REST VAN DE PAGINA. De band liep over de volle
       schermbreedte terwijl het formulier eronder in een kolom van
       1240px staat. Op een breed scherm werd het daardoor een
       eindeloze rij die de aandacht wegtrok van waar het om gaat.
       Nu is hij even breed als alles eronder. */
    max-width: 1240px;
    margin: 26px auto 4px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ev-band-spoor {
    display: flex;
    width: max-content;
    animation: ev-band-loop 68s linear infinite;
}
/* Stilzetten bij aanwijzen: wie een naam wil lezen moet dat kunnen
   zonder erachteraan te muizen. */
.ev-band:hover .ev-band-spoor { animation-play-state: paused; }

.ev-band-helft { display: flex; gap: 14px; padding-right: 14px; }

/* De helft opschuiven en terugspringen. Omdat de tweede helft
   identiek is aan de eerste, is die sprong onzichtbaar. */
@keyframes ev-band-loop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Wie bewegende beelden heeft uitgezet in zijn systeeminstellingen
   (vaak bij migraine of evenwichtsklachten) krijgt een stilstaande
   rij te zien in plaats van niets. */
@media (prefers-reduced-motion: reduce) {
    .ev-band-spoor { animation: none; }
    .ev-band { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

.ev-band-kaart {
    flex: 0 0 auto;
    width: 288px;
    min-height: 158px;
    background: linear-gradient(160deg, #3d211c, #2a1613);
    border: 1px solid rgba(193, 122, 90, .22);
    border-radius: 15px;
    padding: 20px 21px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Aangesloten bedrijven krijgen een warmere rand en een subtiele
   gloed. Het verschil moet zichtbaar zijn zonder dat de rest er
   afgekeurd uitziet — het zijn geen slechte bedrijven, ze weten
   alleen nog niet dat ze hier staan. */
.ev-band-kaart.aan {
    border-color: rgba(212, 175, 55, .34);
    background: linear-gradient(160deg, #4a2a20, #2f1a15);
}

.ev-band-kop { display: flex; align-items: center; gap: 10px; }
.ev-band-logo {
    width: 42px; height: 42px; border-radius: 8px;
    object-fit: contain; background: #fff; padding: 3px; flex-shrink: 0;
}
.ev-band-letter {
    width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
    background: rgba(212, 175, 55, .16);
    color: #d9b45f;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 19px;
}
.ev-band-naam {
    font-size: 16px; font-weight: 700; color: #f6ece0;
    line-height: 1.3;
    /* Lange bedrijfsnamen afkappen na twee regels in plaats van de
       kaart te laten uitrekken — anders staan de kaarten scheef. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-band-branche {
    font-size: 13.5px; color: #d9b45f; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-band-plaats {
    font-size: 12.5px; color: rgba(246, 236, 224, .62);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-band-status {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .7px; margin-top: auto; padding-top: 4px;
}
.ev-band-status.aan { color: #6ee79b; }
.ev-band-status.uit { color: rgba(246, 236, 224, .58); }

@media (max-width: 620px) {
    .ev-band-kaart { width: 236px; min-height: 140px; padding: 16px 17px; }
    .ev-band-spoor { animation-duration: 52s; }
    .ev-band { margin-top: 20px; }
}

/* Wervingskaart */
.ev-werving {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 24px 28px;
    text-align: center;
    max-width: 500px;
    margin: 16px auto 0;
}
.ev-werving-ic { font-size: 48px; margin-bottom: 12px; }
.ev-werving-titel {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--cream, #f5f0e6);
    margin-bottom: 6px;
}
.ev-werving-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: 14px;
}
.ev-werving-btn {
    display: inline-block;
    background: #25D366;
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: 0.15s;
}
.ev-werving-btn:hover { filter: brightness(1.08); transform: scale(1.02); }
.ev-werving-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 10px;
}
/* Badges */
.ev-badge-snel, .ev-badge-nieuw, .ev-badge-beschikbaar, .ev-badge-niet-beschikbaar {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.ev-badge-snel { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #4ade80; }
.ev-badge-nieuw { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; }
.ev-badge-beschikbaar { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #4ade80; }

/* ── DE DRIE TOESTANDEN ──────────────────────────────────────
   Kleur zegt hier iets. Groen betekent: deze ondernemer houdt zijn
   agenda bij en is die dag vrij. Grijs betekent: dat weten we niet.
   Rood betekent: hij is bezet.

   Grijs is bewust NEUTRAAL en niet rood of oranje. "Niet bekend"
   is geen fout van de ondernemer en geen waarschuwing voor de
   bezoeker — het is gewoon wat we weten. Zou het rood zijn, dan
   lijkt het alsof er iets mis is. */
.ev-besch { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px;
            border-radius:999px; letter-spacing:.2px; }
.ev-besch.vrij     { background: rgba(34,197,94,.12);  border:1px solid rgba(34,197,94,.32);  color:#4ade80; }
.ev-besch.bezet    { background: rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.32);  color:#fca5a5; }
.ev-besch.onbekend { background: rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14); color:rgba(245,240,230,.62); }

/* Een bezette aanbieder blijft zichtbaar maar valt terug. Hem
   verbergen zou betekenen dat de bezoeker minder keuze ziet zonder
   te weten waarom — en de ondernemer verdwijnt zonder melding. */
.tg-kaart-bezet { opacity:.75; }
.ev-badge-niet-beschikbaar { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #f87171; }
.ev-reactie-tijd { font-size: 10px; color: rgba(245, 242, 237, 0.4); }
.ev-reactie-tijd.snel { color: #4ade80; }
.ev-reactie-tijd.gemiddeld { color: #fbbf24; }
.ev-reactie-tijd.traag { color: #f87171; }

@media (max-width: 520px) {
    .ev-werving { padding: 18px 16px; }
    .ev-werving-ic { font-size: 36px; }
    .ev-werving-titel { font-size: 16px; }
}
.kp-sidebar { display: none !important; }
.kp-main { margin-left: 0 !important; }

/* Wizard stijlen */
.branch-suggestions .branch-pill,
#selectedBranchesPanel .branch-pill {
    cursor:pointer; user-select:none;
    background:#fff8e7; color:#1a1a1a;
    border:1px solid #d4af37; border-radius:999px;
    padding:6px 14px; font-size:14px; font-weight:500;
    transition:all .15s ease; display:inline-flex; align-items:center; gap:6px;
}
.branch-suggestions .branch-pill:hover { background:#ffd84d; transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.18); }
.branch-suggestions .branch-pill.disabled { opacity:.4; cursor:not-allowed; }
/* ── DE KAART VAN EEN GEKOZEN BRANCHE ────────────────────────
   Was WIT met donkere tekst, midden in een donkere pagina. Dat viel
   niet alleen uit de toon, het maakte ook de labels onleesbaar:
   color:#555 op wit werkt, maar de rest van dit scherm rekent op
   lichte tekst.

   En er stonden TWEE regels voor .sbc-budget-row — deze met
   flex-wrap en min-width:90px, en verderop de nieuwe met
   flex-direction:column. De browser pakt de laatste, maar de
   min-width bleef gelden en duwde het label over de rand.

   Zie de foto van 04-09-2026: "wat wil je hieraan uitgeven" liep
   rechts buiten de lijn en de plusknop stond buiten beeld. */
/* box-sizing:border-box IS HIER NODIG. Zonder dat telt de browser
   de padding en de rand BOVENOP de breedte, en dan is de kaart
   34 pixels breder dan zijn ouder. Op een telefoon van 360 pixels
   valt daardoor de plusknop buiten beeld — precies wat er op de
   foto van 04-09-2026 te zien is. */
#selectedBranchesPanel { width:100%; box-sizing:border-box; }

.selected-branch-card {
    background:var(--ink-2, #171327); color:var(--cream);
    border:1px solid rgba(212,175,55,.28); border-radius:12px;
    padding:14px 16px;
    width:100%; box-sizing:border-box; max-width:100%;
    /* Een lange branchenaam mag de kaart niet oprekken. */
    overflow-wrap:anywhere;
}
.selected-branch-card * { box-sizing:border-box; max-width:100%; }
.selected-branch-card .sbc-head {
    display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;
}
.selected-branch-card .sbc-title { font-weight:700; font-size:16px; color:var(--cream); }
.selected-branch-card .sbc-remove {
    background:transparent; border:0; color:#fca5a5; font-size:20px; cursor:pointer;
    line-height:1; min-width:36px; min-height:36px;
}
/* ── SUGGESTIES ──────────────────────────────────────────────
   Wat anderen kozen bij deze intentie, en welke vakken vaak samen
   gaan. Bewust RUSTIG: het zijn voorstellen, geen instructies. De
   bezoeker mag ze negeren.

   Een suggestie die te veel aandacht vraagt, wordt een keuzelijst
   met extra stappen — en dat is precies wat hier weg moest. */
.ev-sug {
    background:rgba(255,255,255,.03); border:1px solid var(--rand);
    border-radius:10px; padding:11px 13px;
}
.ev-sug-kop {
    font-size:11px; font-weight:700; letter-spacing:1.1px;
    text-transform:uppercase; color:var(--sub); margin-bottom:8px;
}
.ev-sug-rij { display:flex; flex-wrap:wrap; gap:6px; }
.ev-sug-knop {
    min-height:38px; padding:8px 13px;
    background:rgba(255,255,255,.05); border:1px solid var(--rand);
    border-radius:999px; color:var(--cream); font-size:13px;
    font-family:inherit; cursor:pointer;
}
.ev-sug-knop:hover {
    background:rgba(212,175,55,.16); border-color:rgba(212,175,55,.4);
    color:#f0d060;
}

/* Een intentie die het systeem niet kent. Neutraal gesteld: dit is
   geen fout van de bezoeker en ook geen fout van het systeem — het
   is een soort opdracht die nog niet eerder is gevraagd. */
.ev-nieuw {
    font-size:12.5px; color:var(--sub); line-height:1.55;
    padding:9px 12px; background:rgba(255,255,255,.03);
    border-radius:9px; border:1px solid var(--rand);
}

/* ── NIETS GEVONDEN ──────────────────────────────────────────
   Geen leeg vak en geen "probeer een ander woord", maar: dit hebben
   we niet, dit hebben we wel, en zeg het als je iets mist. */
.ev-geen {
    background:rgba(255,255,255,.04); border:1px solid var(--rand);
    border-radius:12px; padding:18px 16px; text-align:center;
}
.ev-geen-kop { font-size:15px; font-weight:800; color:var(--cream); margin-bottom:6px; }
.ev-geen-sub { font-size:13px; color:var(--sub); line-height:1.6; margin-bottom:16px; }
.ev-geen-label {
    font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--sub); margin-bottom:8px; text-align:left;
}
.ev-geen-knop {
    margin-top:16px; min-height:44px; padding:11px 18px;
    background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.4);
    border-radius:10px; color:#f0d060; font-size:13.5px; font-weight:700;
    font-family:inherit; cursor:pointer;
}
.ev-geen-knop:hover { background:rgba(212,175,55,.22); }
.ev-geen-dank {
    margin-top:14px; font-size:13px; color:#6ee7a0; line-height:1.5;
}

/* ── DE BALK DIE BLIJFT STAAN ────────────────────────────────
   De verstuurknop stond onderaan de lijst. Bij tien branches met
   elk drie aanbieders is dat dertig kaarten scrollen voordat je
   ziet hoe je verstuurt.

   Deze balk blijft onderaan het scherm staan zodra er iets is
   aangevinkt, met de teller erbij: knop en teller horen bij
   elkaar, want een knop zonder teller laat je in het ongewisse. */
.ev-balk {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:none; align-items:center; gap:12px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(13,10,23,.96);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
}
.ev-balk.zichtbaar { display:flex; }
.ev-balk-tel {
    flex:1; min-width:0; font-size:13.5px; color:var(--cream);
    line-height:1.35;
}
.ev-balk-knop {
    flex:0 0 auto; min-height:48px; padding:13px 22px;
    background:linear-gradient(135deg,#d4af37,#f0d060); color:#16202e;
    border:none; border-radius:11px; font-size:15px; font-weight:800;
    font-family:inherit; cursor:pointer; white-space:nowrap;
}
.ev-balk-knop:disabled { opacity:.4; cursor:not-allowed; }

/* Een aanbieder die niet kan reageren valt terug. Hij blijft
   zichtbaar — weghalen zou lijken alsof er weinig aanbod is, en hij
   is nodig voor het claimen — maar hij vraagt geen aandacht meer. */
.tg-kaart.tg-kan-niet { opacity:.62; }
.tg-kaart.tg-kan-niet:hover { opacity:1; }

/* ── NA HET VERSTUREN ────────────────────────────────────────
   De tijdwinst en de vraag wat het waard was. Bewust RUSTIG: dit
   komt nadat iemand klaar is, en het mag geen tweede formulier
   worden. Alles is te negeren met één klik. */
.nv-tijd {
    background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.28);
    border-radius:12px; padding:14px 18px; margin-bottom:12px; text-align:center;
}
.nv-tijd-kop { font-size:17px; font-weight:800; color:#6ee7a0; margin-bottom:3px; }
.nv-tijd-sub { font-size:12.5px; color:rgba(245,242,237,.7); line-height:1.5; }

.nv-bijdrage {
    background:var(--ink-2, #171327); border:1px solid var(--rand);
    border-radius:14px; padding:20px 18px; text-align:center;
}
.nv-kop { font-size:16px; font-weight:800; color:var(--cream); margin-bottom:6px; }
.nv-uitleg {
    font-size:13px; color:var(--sub); line-height:1.6;
    margin:0 auto 16px; max-width:420px;
}

.nv-bedragen { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:12px; }
.nv-bedrag {
    /* 44px is de ondergrens waaronder een vinger op een telefoon
       misklikt. Zie ook de budgetknoppen hierboven. */
    min-height:44px; min-width:72px; padding:10px 14px;
    background:rgba(255,255,255,.05); border:1px solid var(--rand);
    border-radius:10px; color:var(--cream); font-size:14.5px;
    font-family:inherit; cursor:pointer;
}
.nv-bedrag:hover { background:rgba(255,255,255,.09); }
.nv-bedrag.actief {
    background:rgba(212,175,55,.18); border-color:rgba(212,175,55,.55);
    color:#f0d060; font-weight:700;
}

.nv-anderveld {
    display:flex; align-items:center; gap:4px; justify-content:center;
    background:var(--ink-3); border:1px solid var(--rand);
    border-radius:10px; padding:0 14px; margin:0 auto 12px; max-width:180px;
}
.nv-euro { color:var(--sub); font-size:16px; }
.nv-anderveld input {
    flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:var(--cream); font-size:16px; font-weight:700; font-family:inherit;
    padding:12px 4px; text-align:center;
}

.nv-knop {
    width:100%; max-width:280px; min-height:48px;
    background:linear-gradient(135deg,#d4af37,#f0d060); color:#16202e;
    border:none; border-radius:11px; font-size:15px; font-weight:800;
    font-family:inherit; cursor:pointer; margin-bottom:8px;
}
.nv-knop:disabled { opacity:.35; cursor:not-allowed; }

/* "Liever niets" is een KNOP en geen kruisje: wie nul kiest heeft
   ook iets gezegd, en dat willen we weten. Wel rustiger vormgegeven
   dan de betaalknop, zodat het geen keuze van gelijk gewicht lijkt. */
.nv-niets {
    display:block; margin:0 auto; background:none; border:none;
    color:var(--sub); font-size:13px; font-family:inherit;
    cursor:pointer; padding:10px 16px; text-decoration:underline;
}
.nv-niets:hover { color:var(--cream); }

.nv-fout {
    background:rgba(239,68,68,.13); border:1px solid rgba(239,68,68,.32);
    border-radius:10px; padding:11px 14px; margin-top:12px;
    font-size:13px; color:#fca5a5; line-height:1.5;
}

.nv-dank {
    background:rgba(255,255,255,.04); border:1px solid var(--rand);
    border-radius:12px; padding:18px; text-align:center;
    font-size:14.5px; color:var(--cream); line-height:1.6;
}

/* ── BUDGET INVOEREN ─────────────────────────────────────────
   De schuifbalk is eruit: van 100 tot 20.000 in stappen van 100
   zijn tweehonderd posities, en op een telefoon is dat anderhalve
   pixel per stap. Wie 2000 wil komt uit op 1900 en klikt weg.

   Nu typen, met knoppen ernaast en snelkeuzes eronder.

   44 PIXELS HOOG IS GEEN TOEVAL: dat is de maat waaronder een vinger
   op een telefoon misklikt. Alles wat je moet raken is minstens zo
   groot. */
.sbc-budget-row { display:flex; flex-direction:column; gap:8px; }
.sbc-budget-row > label { font-size:12px; color:var(--sub); }

.sbc-bedrag {
    display:flex; align-items:stretch; gap:0;
    background:var(--ink-3); border:1px solid var(--rand);
    border-radius:12px; overflow:hidden;
}
.sbc-stap {
    width:46px; min-height:46px; flex:0 0 46px;
    background:transparent; border:none; cursor:pointer;
    color:var(--cream); font-size:22px; line-height:1;
    font-family:inherit;
}
.sbc-stap:hover { background:rgba(255,255,255,.06); }
.sbc-stap:active { background:rgba(255,255,255,.12); }

.sbc-euro {
    display:flex; align-items:center; padding-left:4px;
    color:var(--sub); font-size:16px;
}
.sbc-budget-veld {
    flex:1; min-width:0; border:none; background:transparent;
    color:var(--cream); font-size:17px; font-weight:700;
    font-family:inherit; text-align:center; padding:12px 4px;
    outline:none;
    /* Geen pijltjes: die zitten op mobiel in de weg. */
    -moz-appearance:textfield;
}
.sbc-budget-veld::-webkit-outer-spin-button,
.sbc-budget-veld::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Snelkeuzes. De meeste mensen hebben een rond bedrag in gedachten;
   dan is één tik beter dan typen. */
/* Twee per rij op een telefoon in plaats van proberen te wringen.
   Met flex-wrap kwam "Weet ik nog niet" soms alleen op een regel
   en dan stond er een gat. */
.sbc-snel {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
    gap:6px;
}
.sbc-snel-knop {
    /* 44px: de maat waaronder een vinger op een telefoon
       misklikt. 38 was krap. */
    flex:1 1 auto; min-width:64px; min-height:44px;
    background:rgba(255,255,255,.04); border:1px solid var(--rand);
    border-radius:9px; color:var(--sub); font-size:13px;
    font-family:inherit; cursor:pointer; padding:8px 6px;
}
.sbc-snel-knop:hover { background:rgba(255,255,255,.08); color:var(--cream); }
.sbc-snel-knop.actief {
    background:rgba(212,175,55,.16); border-color:rgba(212,175,55,.5);
    color:#f0d060; font-weight:700;
}
.sbc-budget-row .sbc-budget-val { font-weight:700; min-width:90px; text-align:right; color:#b8860b; }

/* ══ TIJD PER VAK ═════════════════════════════════════════════════
   Toegevoegd 08-09-2026. Er stond één algemene tijd voor het hele
   evenement, plus bij drie van de 177 vakken nog eens dezelfde vraag
   in branche_velden_template. Dubbel gevraagd en toch niet kloppend:
   een DJ begint later dan de drankencatering.
   ═══════════════════════════════════════════════════════════════ */
.sbc-tijd-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 10px;
}
.sbc-tijd-label { font-size: 12px; color: var(--sub, rgba(245,242,237,.6)); }
.sbc-tijd-veld {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px; padding: 7px 11px;
    color: var(--cream, #F5F2ED);
    font-family: inherit; font-size: 13.5px;
}
.sbc-tijd-veld:focus { outline: none; border-color: rgba(201,168,76,.45); }

/* ══ HET WENSVELD ═════════════════════════════════════════════
   Toegevoegd 06-09-2026. Staat onder het budget in dezelfde kaart:
   het bedrag zegt hoeveel, dit zegt wat. Samen is het een briefing;
   los is het allebei half.

   Bewust rustiger dan het bedragveld eromheen — geen goud, geen
   rand die om aandacht vraagt. Wie het overslaat mag het overslaan;
   het veld is niet verplicht. Een verplichte toelichting kost meer
   aanvragen dan hij oplevert.

   APPEND-ONLY: hieronder staat niets dat een bestaande regel
   overschrijft.
   ═══════════════════════════════════════════════════════════ */
.sbc-wens-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.sbc-wens-label {
    font-size: 12px;
    line-height: 1.45;
    color: var(--sub, rgba(245,242,237,.6));
}
.sbc-wens-veld {
    width: 100%;
    box-sizing: border-box;
    min-height: 58px;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: var(--cream, #F5F2ED);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.5;
}
.sbc-wens-veld:focus {
    outline: none;
    border-color: rgba(201,168,76,.45);
    background: rgba(255,255,255,.05);
}
.sbc-wens-veld::placeholder { color: rgba(245,242,237,.32); }
/* De teller zegt niets tot je in de buurt van de grens komt. Een
   tellertje dat vanaf teken één staat te tikken maakt mensen korter
   van stof, en korter is hier precies niet wat we willen. */
.sbc-wens-teller {
    font-size: 10.5px;
    color: rgba(245,242,237,.28);
    text-align: right;
}

/* ══ DE STAPBALK ══════════════════════════════════════════════
   assets/offertegrid.css zet de actieve stap op:
       background: var(--ac); color: var(--ink);
   In het donkere Eventer-thema komen die twee te dicht bij elkaar.
   Gevolg: "1. Wat & Wanneer" — de stap waar de bezoeker OP DAT
   MOMENT staat — was donker op donker en dus onleesbaar, terwijl
   stap 2, waar hij nog niet is, wel te lezen viel. De omgekeerde
   wereld: het enige wat telt is waar je nu bent.

   Hier vaste kleuren in plaats van variabelen, want de fout ontstaat
   juist doordat twee variabelen in dit thema samenvallen. Dit is een
   aanvulling; offertegrid.css blijft ongemoeid.
   ═══════════════════════════════════════════════════════════ */
.step-indicator { margin-bottom: 20px !important; }
.step-badge {
    background: rgba(255,255,255,.05) !important;
    color: rgba(245,242,237,.45) !important;
    border: 1px solid rgba(255,255,255,.08);
    font-size: 11.5px !important;
    padding: 5px 13px !important;
    letter-spacing: .2px;
}
.step-badge.active {
    background: #C9A84C !important;
    color: #171410 !important;
    border-color: #C9A84C;
    font-weight: 800 !important;
}

/* De knop die de rest van de vakken uitklapt. */
.ev-meer-vakken {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px dashed rgba(201,168,76,.35);
    background: rgba(201,168,76,.05);
    color: rgba(201,168,76,.9);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.ev-meer-vakken:hover { background: rgba(201,168,76,.10); }

/* De regel onder de vakkentegels: de lijst is nooit compleet. */
.ev-alles-erin {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(245,242,237,.52);
    border-left: 2px solid rgba(201,168,76,.35);
    padding-left: 10px;
}
.leveranciers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px; }
.lev-card {
    background:#fafaf3; border:1px solid #e5e5e5; border-radius:10px; padding:10px;
    font-size:13px; color:#1a1a1a; position:relative; transition:all .15s ease;
}
.lev-card.selected { border-color:#22a25a; background:#eafff1; box-shadow:0 0 0 2px rgba(34,162,90,.2); }
.lev-card .lev-naam { font-weight:700; font-size:14px; margin-bottom:4px; }
.lev-card .lev-meta { color:#555; font-size:12px; line-height:1.5; }
.lev-card .lev-checkbox { position:absolute; top:8px; right:8px; transform:scale(1.2); }
.lev-loader { color:#888; font-size:13px; padding:8px 0; }
.lev-leeg { color:#a55; font-size:13px; padding:8px 0; }
.prio-pill {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--ink-3, #221e30); color:var(--cream, #f5f0e6);
    padding:8px 14px; border-radius:999px; cursor:pointer; border:1px solid var(--rand, rgba(160,120,255,.15));
    font-size:14px;
}
.prio-pill input { accent-color:#d4af37; }
.og-summary {
    margin-top:14px; padding:12px 14px; background:rgba(255,255,255,.05);
    border-left:3px solid #d4af37; border-radius:6px; color:var(--cream, #f5f0e6); font-size:13px; line-height:1.6;
}
.og-summary strong { color:#fff; }


/* ══════════════════════════════════════════════════════════════════
   DEEL 2 — HET RESULTATENSCHERM
   Stond in toonResultaten(), uitgestuurd met echo. Staat nu in de
   <head> en wordt dus ook geladen op de zoekpagina. Dat kan: alle
   klassen hieronder beginnen met tg-, nv-, ev-groep of ev-niets en
   komen op de zoekpagina niet voor.
   ══════════════════════════════════════════════════════════════════ */
    
    
   
    
    
        .tg-res-wrap{background:#080808;color:#F5F2ED;padding:32px 20px;border-radius:16px;max-width:1200px;margin:0 auto;font-family:"DM Sans",sans-serif}
        .tg-res-tag{font-size:10px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#C9A84C;margin-bottom:10px}
        .tg-res-titel{font-family:"Syne",sans-serif;font-size:clamp(22px,4vw,34px);font-weight:800;margin-bottom:10px}
        .tg-res-sub{font-size:13px;color:rgba(245,242,237,.5);line-height:1.7;margin-bottom:28px}
        .tg-sectie{margin-bottom:36px}
        .tg-sectie-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
        .tg-sectie-ic{font-size:24px}
        .tg-sectie-naam{font-family:"Syne",sans-serif;font-size:17px;font-weight:800}
        .tg-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
        /* Let op: één backslash in een unicode-escape. Toen deze regels nog in
   een PHP-string stonden was \\ nodig; in een echt .css-bestand is die
   tweede backslash letterlijk en drukt de browser \25BE als TEKST af.
   Dat stond op 09-09-2026 zichtbaar boven "Nog niet aangesloten". */

/* ══ DE DRIE GROEPEN (06-09-2026) ═══════════════════════
           Wat je vandaag kunt krijgen bovenaan, de rest eronder en
           kleiner. Ruimte op het scherm is aandacht, en die hoort
           naar het bruikbare deel. */
        .ev-voorselectie{background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.22);
            border-radius:12px;padding:12px 16px;margin:0 0 18px;font-size:13px;line-height:1.55;
            color:rgba(245,242,237,.78)}
        .ev-groep{margin:26px 0 0;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
        .ev-groep-kop{cursor:pointer;list-style:none;padding:4px 0}
        .ev-groep-kop::-webkit-details-marker{display:none}
        .ev-groep-kop::before{content:"\25B8\00a0\00a0";color:#C9A84C}
        details[open] > .ev-groep-kop::before{content:"\25BE\00a0\00a0"}
        .ev-groep-titel{display:block;font-family:Syne,sans-serif;font-size:14px;font-weight:800;
            color:#F5F2ED;letter-spacing:.3px}
        .ev-groep-sub{display:block;font-size:12px;line-height:1.55;color:rgba(245,242,237,.45);
            margin-top:3px}
        .ev-groep-niets{opacity:.8}
        .ev-niets-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;
            color:rgba(245,242,237,.7)}
        .ev-niets-wa{color:#25D366;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
        .ev-groep-leeg-alles{background:rgba(255,255,255,.03);border-radius:12px;padding:16px 18px;
            font-size:13px;line-height:1.6;color:rgba(245,242,237,.6);margin:0 0 4px}
        @media (max-width:900px){.tg-matrix{grid-template-columns:1fr 1fr}}
        @media (max-width:560px){.tg-matrix{grid-template-columns:1fr}}
        .tg-kaart{background:#111;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;position:relative;transition:.2s}
        .tg-kaart:hover{border-color:rgba(201,168,76,.3);transform:translateY(-2px)}
        .tg-kaart-top{border-color:rgba(201,168,76,.25);background:linear-gradient(135deg,rgba(201,168,76,.06),#111)}
        .tg-top-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#C9A84C;color:#080808;font-size:9px;font-weight:800;letter-spacing:1px;padding:3px 12px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
        .tg-kaart-header{display:flex;align-items:center;gap:10px;margin-top:4px}
        .tg-logo-img{width:40px;height:40px;border-radius:9px;object-fit:contain;background:#fff;padding:3px;flex-shrink:0}
        .tg-logo-placeholder{width:40px;height:40px;border-radius:9px;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.25);color:#C9A84C;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .tg-kaart-naam{font-size:13px;font-weight:700;line-height:1.3}
        .tg-kaart-loc{font-size:10px;color:rgba(245,242,237,.45);margin-top:2px}
        .tg-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
        .tg-metric{text-align:center}
        .tg-metric-val{font-family:"Syne",sans-serif;font-size:14px;font-weight:800}
        .tg-kaart-top .tg-metric-val{color:#C9A84C}
        .tg-metric-lbl{font-size:8px;color:rgba(245,242,237,.45);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
        .tg-score-wrap{display:flex;align-items:center;gap:8px}
        .tg-score-bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
        .tg-score-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#C9A84C,#e2c26a)}
        .tg-score-getal{font-size:9px;font-weight:700;color:#C9A84C;white-space:nowrap}
        .tg-budget-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 9px;border-radius:999px;background:rgba(34,197,94,.12);color:#4ade80}
        .tg-budget-badge.over{background:rgba(239,68,68,.12);color:#f87171}
        .tg-check-row{display:flex;align-items:center;gap:8px;padding-top:4px;margin-top:auto;cursor:pointer}
        .tg-check-row input{width:17px;height:17px;accent-color:#C9A84C}
        .tg-check-row label{font-size:12px;color:rgba(245,242,237,.7);cursor:pointer}
        .tg-verstuur-btn{background:linear-gradient(135deg,#C9A84C,#a8893d);color:#080808;border:none;padding:14px 32px;font-size:14px;font-weight:800;border-radius:10px;cursor:pointer;font-family:"DM Sans",sans-serif}
        .tg-verstuur-btn:hover{filter:brightness(1.08)}
        .ev-badge-snel, .ev-badge-nieuw {
            display:inline-block; font-size:8px; font-weight:800;
            padding:2px 10px; border-radius:999px; text-transform:uppercase;
            letter-spacing:0.5px; margin-bottom:4px;
        }
        .ev-badge-snel { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#4ade80; }
        .ev-badge-nieuw { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3); color:#fbbf24; }
        .ev-reactie-tijd { font-size:9px; color:rgba(245,242,237,.4); }
        .ev-reactie-tijd.snel { color:#4ade80; }
        .ev-reactie-tijd.gemiddeld { color:#fbbf24; }
        .ev-reactie-tijd.traag { color:#f87171; }
        
        /* Beschikbaarheid badge */
        .ev-badge-beschikbaar {
            display:inline-block; font-size:8px; font-weight:700;
            padding:2px 10px; border-radius:999px;
            background:rgba(34,197,94,.12); color:#4ade80;
            border:1px solid rgba(34,197,94,.3);
        }
        .ev-badge-niet-beschikbaar {
            display:inline-block; font-size:8px; font-weight:700;
            padding:2px 10px; border-radius:999px;
            background:rgba(239,68,68,.12); color:#f87171;
            border:1px solid rgba(239,68,68,.3);
        }



/* ══ EEN GEKOZEN SUGGESTIEKNOP ════════════════════════════════════
   Toegevoegd 06-09-2026. Een suggestieknop kiest sinds vandaag het
   vak meteen, in plaats van de naam in het zoekveld te zetten. Dan
   moet hij ook laten zien dat hij gekozen IS — anders klikt iemand
   twee keer en haalt hij zijn eigen keuze weer weg zonder het door
   te hebben.
   ═══════════════════════════════════════════════════════════════ */
.ev-sug-knop.gekozen {
    background: rgba(201,168,76,.16);
    border-color: rgba(201,168,76,.55);
    color: #F5F2ED;
    font-weight: 700;
}
.ev-sug-knop.gekozen::before { content: "\2713  "; color: #C9A84C; }

/* ══ VRAGEN IN DE BRANCHEKAART ═══════════════════════════════════════
   Toegevoegd 09-09-2026. Deze vragen stonden in een gedeeld blok boven
   de kaarten, waardoor iemand die een fotograaf zocht barvragen kreeg.
   Nu staan ze in de kaart van het vak zelf, tussen de tijd en het
   wensveld.

   Bewust dezelfde rustige stijl als het wensveld: dit zijn geen
   hoofdzaken maar precisering. Het bedrag blijft het opvallendst.
   ════════════════════════════════════════════════════════════════ */
.sbc-vragen { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sbc-vraag  { display: flex; flex-direction: column; gap: 5px; }
.sbc-vraag-label {
    font-size: 12px; line-height: 1.45;
    color: var(--sub, rgba(245,242,237,.6));
}
.sbc-ster { color: #C9A84C; }
.sbc-vraag-veld {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px; padding: 9px 12px;
    color: var(--cream, #F5F2ED);
    font-family: inherit; font-size: 13.5px;
}
.sbc-vraag-veld:focus { outline: none; border-color: rgba(201,168,76,.45); }
select.sbc-vraag-veld option { background: #1a1712; color: #F5F2ED; }


/* ══ VRAGEN IN DE KAART LEESBAAR MAKEN ═══════════════════════════════
   Toegevoegd 09-09-2026. De labels boven het bedrag, de tijd, de
   vakvragen en het wensveld stonden in hetzelfde gedempte grijs als
   alle bijschriften. Gevolg: ze werden overgeslagen — en juist deze
   vier bepalen of een ondernemer een goede prijs kan maken zonder te
   bellen.

   Groen, want dat is de enige kleur die in dit thema nog niet bezet
   is: goud is de merkkleur en rood betekent een fout. Groen leest hier
   als "hier wordt iets van je gevraagd".
   ════════════════════════════════════════════════════════════════ */
.sbc-budget-row > label,
.sbc-budget-label,
.sbc-tijd-label,
.sbc-vraag-label,
.sbc-wens-label {
    color: #7BD88F !important;
    font-weight: 600;
}
/* De tellers en de hulpteksten blijven wél rustig: die vragen niets. */
.sbc-wens-teller { color: rgba(245,242,237,.28) !important; font-weight: 400; }
/* ── "WELK SOORT ...?" (04-10-2026) ─────────────────────────────
   De keuzelijst met subtypes (Harpist, Pianist, ...) in de kaart van
   een vak. Zelfde uiterlijk als de andere vakvragen. */
.sbc-soort-keuze {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px; padding: 9px 12px;
    color: var(--cream, #F5F2ED);
    font-family: inherit; font-size: 13.5px;
}
.sbc-soort-keuze:focus { outline: none; border-color: rgba(201,168,76,.45); }
.sbc-soort-keuze option { background: #1a1712; color: #F5F2ED; }

/* ══ FORMULIER FASE 2: ÉÉN VAK TEGELIJK (04-10-2026) ═══════════════
   Er staat steeds één vakkaart open. De andere zijn een regel met wat
   er al is ingevuld; tik erop om hem te openen. Bovenaan een rij met
   alle vakken en hun stand. Zie evToonOpen() in index.php. */
.selected-branch-card.dicht > :not(.sbc-head) { display: none; }
.selected-branch-card.dicht { padding-top: 12px; padding-bottom: 12px; cursor: pointer; }
.selected-branch-card.dicht .sbc-head { margin-bottom: 0; }
.selected-branch-card.dicht:hover { border-color: rgba(201,168,76,.45); }
.selected-branch-card.klaar.dicht { border-color: rgba(74,222,128,.35); }
.selected-branch-card .sbc-head { gap: 10px; }
.sbc-samenv { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: rgba(245,242,237,.7);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selected-branch-card.klaar .sbc-samenv { color: #4ade80; }

.sbc-volgende {
    width: 100%; margin-top: 14px; padding: 13px; border-radius: 11px; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #d4af37, #f0d060); color: #16202e;
    font: inherit; font-weight: 800; font-size: 14.5px;
}

.ev-vakstappen { margin: 16px 0 10px; }
.ev-vakstappen-kop { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
                     color: rgba(245,242,237,.6); margin-bottom: 8px; }
.ev-vakstappen-rij { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ev-vakstappen-rij::-webkit-scrollbar { display: none; }
.ev-vakstap { flex-shrink: 0; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 99px;
              background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(245,242,237,.8); cursor: pointer; }
.ev-vakstap.klaar  { border-color: rgba(74,222,128,.4); color: #4ade80; }
.ev-vakstap.actief { border-color: #d4af37; background: rgba(212,175,55,.14); color: #f0d060; }

/* Soepele overgang bij openen/dichtklappen (View Transitions API). */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

/* Concept terughalen: "U was bezig met een aanvraag" (04-10-2026). */
.ev-concept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
              background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.35); border-radius: 12px;
              padding: 12px 14px; margin-bottom: 16px; font-size: 14px; color: #f5f2ed; }
.ev-concept small { color: rgba(245,242,237,.7); font-size: 12.5px; }
.ev-concept-knoppen { display: flex; gap: 8px; }
.ev-concept-ja, .ev-concept-nee { font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; }
.ev-concept-ja  { background: linear-gradient(135deg, #d4af37, #f0d060); color: #16202e; border: 0; }
.ev-concept-nee { background: transparent; color: rgba(245,242,237,.8); border: 1px solid rgba(255,255,255,.18); }

/* Verplichte vraag die nog open is (04-10-2026). */
.sbc-mist { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.18); }

/* ══ 05-10-2026 ══════════════════════════════════════════════════ */

/* Gelegenheden als knoppen onder "Wat organiseert u?" */
.ev-gelegenheden { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.ev-geleg { font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: 99px; cursor: pointer;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: rgba(245,242,237,.88); }
.ev-geleg:hover { border-color: rgba(212,175,55,.5); }
.ev-geleg.actief { background: rgba(212,175,55,.16); border-color: #d4af37; color: #f0d060; font-weight: 700; }

/* "Vaak gekozen" in het raster (was een apart blok) */
.branch-grid-item.vaak { border-color: rgba(212,175,55,.45); }
.branch-grid-item .vaak-ster { display: block; font-size: 10.5px; color: #e8c860; font-weight: 600; margin-top: 2px; }

/* De datum is een knop die een kalender opent, geen uitgeschakeld veld.
   portal.css gaf elk readonly veld een verbodsteken en halve kleur. */
.kp-input.orw-kal-input, .kp-input.orw-kal-input[readonly] { cursor: pointer; opacity: 1; }

/* Overzicht bovenaan de resultaten */
.ev-overzicht { background: linear-gradient(160deg, #2a1d10, #1a1324); border: 1px solid rgba(212,175,55,.45);
                border-radius: 16px; padding: 16px 18px; margin: 4px 0 18px; }
.ev-overzicht-kop { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; color: #f0d060; }
.ev-overzicht-uitleg { font-size: 13.5px; color: #f0d060; opacity: .9; margin: 4px 0 12px; line-height: 1.55; }
.ev-ov-rij { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 11px;
             background: rgba(0,0,0,.25); border: 1px solid rgba(212,175,55,.25); cursor: pointer; }
.ev-ov-rij:has(input:checked) { border-color: #d4af37; background: rgba(212,175,55,.1); }
.ev-ov-vak { font-size: 12.5px; color: rgba(245,242,237,.65); min-width: 110px; }
.ev-ov-naam { font-weight: 700; color: #fff; }

/* Vinkjes: groot, goud omlijnd — duidelijk dat je ze kunt aanklikken */
.ev-ov-check, .tg-check-row input[type=checkbox] {
    appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex-shrink: 0; margin: 0;
    border: 2px solid #d4af37; border-radius: 7px; background: rgba(0,0,0,.3); cursor: pointer; position: relative;
}
.ev-ov-check:checked, .tg-check-row input[type=checkbox]:checked { background: linear-gradient(135deg, #d4af37, #f0d060); }
.ev-ov-check:checked::after, .tg-check-row input[type=checkbox]:checked::after {
    content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #16202e; font-weight: 900; font-size: 15px;
}
.tg-check-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px;
                border: 1px solid rgba(212,175,55,.35); color: #f0d060; font-weight: 700; cursor: pointer; }

/* Delen na het versturen / na een bijdrage */
.ev-delen { margin-top: 16px; padding: 18px; border-radius: 16px; background: #151122; border: 1px solid rgba(212,175,55,.3); text-align: center; }
.ev-delen-kop { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; color: #fff; }
.ev-delen-sub { font-size: 13.5px; color: rgba(245,242,237,.75); margin: 4px 0 12px; }
.ev-delen-hoofd { width: 100%; padding: 13px; border: 0; border-radius: 11px; cursor: pointer; margin-bottom: 10px;
                  background: linear-gradient(135deg, #d4af37, #f0d060); color: #16202e; font: inherit; font-weight: 800; }
.ev-delen-rij { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ev-delen-rij a, .ev-delen-rij button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer;
                  text-decoration: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: #f5f2ed; }
.ev-bedankt { margin: 18px 0; padding: 20px; border-radius: 16px; text-align: center;
              background: linear-gradient(160deg, #10261a, #151122); border: 1px solid rgba(74,222,128,.35); }
.ev-bedankt-kop { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; color: #4ade80; }
.ev-bedankt-sub { font-size: 14px; color: rgba(245,242,237,.8); margin-top: 6px; }

/* ══ TELEFOON: METEEN BEGINNEN (06-10-2026) ══════════════════════
   De kop nam op een telefoon bijna een heel scherm in (label, grote
   titel, twee regels uitleg, drie vinkjes) en daaronder de band met
   bedrijven. Nu: alleen de titel, compact, en direct het formulier.
   De band staat op een telefoon onder het formulier (zie index.php). */
@media (max-width: 700px) {
    .ev-hero { padding-top: 14px !important; padding-bottom: 4px !important; }
    .ev-hero-label, .ev-hero-sub, .ev-hero-punten { display: none !important; }
    .ev-hero-titel.ev-hero-groot { font-size: 25px !important; line-height: 1.15 !important; margin: 0 0 6px !important; }
    .ev-band { margin-top: 18px; }
}
/* ══ TIJD PER VAK, OPVALLEND (08-10-2026) ═════════════════════
   Stond klein en donker rechts naast het label; bezoekers sloegen
   het over en kregen pas bij "Volgende" een melding. Nu: vraag
   erboven zoals de andere vragen, snelknoppen, en een gouden rand
   zolang er niets gekozen is. Groen randje zodra het klopt. */
.sbc-tijd-row {
    display: block; margin-top: 14px; padding: 12px 12px 10px;
    border: 1.5px dashed rgba(201,168,76,.55); border-radius: 12px;
    background: rgba(201,168,76,.06);
}
.sbc-tijd-row.sbc-tijd-ok { border-style: solid; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.05); }
.sbc-tijd-row .sbc-tijd-label { display: block; font-size: 13.5px; font-weight: 700; color: var(--cream, #F5F2ED); margin-bottom: 9px; }
.sbc-tijd-knoppen { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sbc-tijd-knop {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
    color: var(--cream, #F5F2ED); border-radius: 999px; padding: 7px 13px;
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.sbc-tijd-knop:hover { border-color: rgba(201,168,76,.6); }
.sbc-tijd-knop.actief { background: #d4af37; border-color: #d4af37; color: #16202e; }
.sbc-tijd-zelfde { border-style: dashed; }
.sbc-tijd-row .sbc-tijd-veld {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
    color: var(--cream, #F5F2ED); border-radius: 999px; padding: 6px 12px;
    font-size: 14px; min-width: 110px; color-scheme: dark;
}
@media (max-width: 560px) { .sbc-tijd-knop { padding: 8px 12px; } }

/* ══ MEERDERE KEUZES (08-10-2026) ════════════════════════════
   Voor vragen als "Wat moet er zeker zijn?" bij een zaal. */
.sbc-multi { display: flex; flex-wrap: wrap; gap: 7px; }
.sbc-multi-knop {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
    color: var(--cream, #F5F2ED); border-radius: 999px; padding: 7px 13px;
    font: inherit; font-size: 13px; cursor: pointer;
}
.sbc-multi-knop:hover { border-color: rgba(201,168,76,.6); }
.sbc-multi-knop.actief { background: rgba(212,175,55,.18); border-color: #d4af37; color: #f3d77a; }
.sbc-multi-knop.actief::before { content: "\2713  "; }

/* 11-10-2026 (levering AP): voorstel bij een antwoord.
   "Nee, ik zoek een complete bar" → knop "+ Cocktailbar". */
.sbc-voorstel { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(212,175,55,.5); background: rgba(212,175,55,.07); font-size: 13px; line-height: 1.45; }
.sbc-voorstel-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sbc-voorstel-knop { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.6); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.sbc-voorstel-knop:hover { background: rgba(212,175,55,.15); }
.sbc-voorstel-knop.actief { background: rgba(212,175,55,.22); border-color: #d4af37; color: #f3d77a; }

/* 11-10-2026 (levering AQ): afspraken vooraf.
   Botsing tussen "Wat zoekt u?" en het vak, en terug naar het vorige vak. */
.sbc-conflict { margin-top: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(239,68,68,.55); background: rgba(239,68,68,.08); font-size: 13px; line-height: 1.5; }
.sbc-vervang-knop, .sbc-terug-knop { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212,175,55,.7); background: rgba(212,175,55,.12); color: inherit; font: inherit; font-size: 13px; cursor: pointer; font-weight: 600; }
.sbc-vervang-knop:hover, .sbc-terug-knop:hover { background: rgba(212,175,55,.25); }
.sbc-vervangen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; color: rgba(245,242,237,.75); }