/* Bootplein — knoppen. Eén set regels voor alle knoppen op de publieke site.
 * Besloten 13 okt 2026 (Stephan), na een meting van alle knoppen: ±190 knoppen in meer dan
 * 50 verschillende uitvoeringen, 9 vulkleuren, 6 soorten hoeken en 7 soorten hover.
 *
 * DE REGELS
 *  1. Vorm: hoeken van 10px. Geen verloop (gradient), geen gloed, geen schaduw.
 *  2. Hover: alleen de kleur verandert. Niet optillen, niet oplichten.
 *  3. De kleur hangt af van de achtergrond:
 *       op wit of licht  ->  .knop-primair   blauw met witte tekst
 *       op blauw         ->  .knop-wit       wit met blauwe tekst (omgekeerd)
 *     Oranje alleen voor de uitzonderingen, en daar dan géén blauwe knoppen:
 *       .knop-accent  adverteren / geld verdienen (Adverteer nu, Plaats advertentie, een plan kiezen)
 *       .knop-kika    alleen in KiKa-blokken, in KiKa's eigen oranje
 *     Op een oranje vlak (zoals de dealerband): .knop-wit-oranje, wit met oranje tekst.
 *  4. Tweede keuze naast een hoofdknop: .knop-rand (op licht), .knop-rand-wit (op blauw) of
 *     .knop-kika-rand (in een KiKa-blok). Kleine actie zonder vlak: .knop-tekst.
 *  5. Drie maten, elk met een eigen lettergrootte:
 *       .knop-s  36px hoog, 13px tekst   kaarten, menubalk
 *       .knop-m  44px hoog, 14px tekst   standaard
 *       .knop-l  52px hoog, 15px tekst   hero, banden, de verzendknop van een formulier
 *     .knop-vol = volle breedte.
 *  6. Uit: <button disabled> — halve dekking, geen hover. Iets dat er nog niet is krijgt
 *     "· binnenkort" in de tekst, net als in het Diensten-menu.
 *  7. Icoonknop (sluiten, pijltjes): .knop-ikoon, 40 x 40.
 *  8. Keuzes (bedragen, filters): .keuze, gekozen = .aan. In KiKa-blokken .keuze-kika.
 *  9. Eén merk-uitzondering: de deelknop naar WhatsApp in WhatsApp-groen (.knop-whatsapp), zodat
 *     hij direct herkenbaar is. Verder geen kleuren van andere merken.
 * 10. Pijlen: → alleen op een link of knop die je ergens anders heen brengt ("Bekijk alles →"),
 *     ← alleen op een terug-link ("← Terug naar aanbod"). Geen pijl op een actie die iets doet waar
 *     je bent (zoeken, versturen, doneren). Zet de pijl in <span class="pijl pijl-heen">→</span> of
 *     pijl-terug: dan schuift hij bij hover 4px in zijn richting en daarna terug.
 * 11. Tekstlinks (blauwe tekst zonder knopvorm) zijn onderstreept bij hover, overal. Nieuwe link:
 *     class="tekstlink". De navigatie (menubalk, Diensten-menu) heeft zijn eigen hover en valt hier
 *     buiten; tekst die er niet is ("· binnenkort") is geen link en krijgt geen onderstreping.
 * 12. Labels (niet klikbaar: "Dealer", "sloep · 8 pers.", "12 km", "Binnenkort", "Meest gekozen")
 *     zijn altijd een pil, zodat ze nooit op een knop lijken (knoppen hebben 10px). Twee maten:
 *       .label-s  11px   op een foto of in een kaart
 *       .label-l  13px   boven een kop (de hero's)
 *     De kleur hangt af van waar het label staat:
 *       .label-grijs        op wit, gewoon kenmerk (merken bij een dealer)
 *       .label-licht        op wit, iets dat meetelt (Particulier, Nieuw, officieel dealer, Binnenkort)
 *       .label-navy         Dealer — op een foto én op wit, zodat een dealer meteen opvalt naast
 *                           een particulier (die is wit op een foto, .label-licht op wit)
 *       .label-groen        goed nieuws (Geverifieerd, "3 vrij")
 *       .label-oranje       alleen adverteren (Meest gekozen), net als de oranje knoppen
 *       .label-op-foto      wit vlak op een foto (type, aanbieder)
 *       .label-op-foto-donker  donker vlak op een foto (afstand)
 *       .label-op-blauw     doorschijnend wit op een blauw vlak (de hero's)
 *     Gebruik: class="label label-s label-op-foto". Plaats (position) mag via de eigen klasse.
 *
 * Gebruik: class="knop knop-primair knop-m". Kleur, maat en vorm nooit via style="" op een knop:
 * dan bereikt een wijziging hier ze niet meer. Alleen ruimte eromheen (margin) mag erbij.
 */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 20px; margin: 0; width: auto;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; text-align: center;
  border: 1.5px solid transparent; border-radius: 10px; box-shadow: none;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.knop:focus-visible { outline: 2px solid #1a7fd4; outline-offset: 2px; }

/* Maten */
.knop-s { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.knop-m { min-height: 44px; padding: 8px 20px; font-size: 14px; }
.knop-l { min-height: 52px; padding: 10px 26px; font-size: 15px; }
.knop-vol { display: flex; width: 100%; white-space: normal; }

/* Op wit of licht */
.knop-primair { background: #16508c; color: #fff; }
.knop-primair:hover { background: #1a7fd4; color: #fff; }
.knop-rand { background: #fff; color: #16508c; border-color: #d4dfeb; }
.knop-rand:hover { border-color: #1a7fd4; color: #1a7fd4; }
.knop-tekst { background: none; color: #16508c; padding-left: 8px; padding-right: 8px; }
.knop-tekst:hover { text-decoration: underline; }

/* Op blauw (hero, banden, banners) */
.knop-wit { background: #fff; color: #16508c; }
.knop-wit:hover { background: #e9f4ff; color: #16508c; }
.knop-rand-wit { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.knop-rand-wit:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.knop-wit:focus-visible, .knop-rand-wit:focus-visible, .knop-wit-oranje:focus-visible { outline-color: #fff; }

/* Op oranje (de dealerband): wit met oranje tekst, geen blauw */
.knop-wit-oranje { background: #fff; color: #c2620a; }
.knop-wit-oranje:hover { background: #fff3e6; color: #c2620a; }

/* De oranje uitzonderingen */
.knop-accent { background: #f5901e; color: #fff; }
.knop-accent:hover { background: #dd7a08; color: #fff; }
.knop-kika { background: #ee7203; color: #fff; }
.knop-kika:hover { background: #d96500; color: #fff; }
.knop-kika-rand { background: #fff; color: #d96500; border-color: #f5c99c; }   /* tweede keuze in een KiKa-blok */
.knop-kika-rand:hover { border-color: #ee7203; color: #d96500; }

/* De ene merk-uitzondering: delen via WhatsApp */
.knop-whatsapp { background: #25d366; color: #fff; }
.knop-whatsapp:hover { background: #1fb457; color: #fff; }

/* Pijlen: schuiven bij hover in hun richting, en weer terug (regel 10) */
.pijl { display: inline-block; transition: transform .2s ease; }
:hover > .pijl-heen { transform: translateX(4px); }
:hover > .pijl-terug { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) {
  .pijl { transition: none; }
  :hover > .pijl-heen, :hover > .pijl-terug { transform: none; }
}

/* Tekstlinks: onderstreept bij hover (regel 11). Ook de bestaande linkklassen van de pagina's. */
.tekstlink { color: #1a7fd4; font-weight: 600; text-decoration: none; cursor: pointer; }
.tekstlink:hover, .meer-link:hover, .kika-link:hover, .terug:hover, .sub-link:hover,
.footer-link:not(.soon):hover { text-decoration: underline; }

/* Labels (regel 12) */
.label { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; font-weight: 700;
  line-height: 1.2; white-space: nowrap; font-family: inherit; }
.label-s { font-size: 11px; padding: 4px 10px; }
.label-l { font-size: 13px; padding: 6px 14px; }
.label-grijs { background: #eef2f7; color: #4f6680; }
.label-licht { background: #e9f4ff; color: #16508c; }
.label-navy { background: #16508c; color: #fff; }
.label-groen { background: #e7f6ec; color: #1a7a3c; }
.label-oranje { background: #f5901e; color: #fff; }
.label-op-foto { background: rgba(255,255,255,0.94); color: #16508c; }
.label-op-foto-donker { background: rgba(21,41,62,0.78); color: #fff; }
.label-op-blauw { background: rgba(255,255,255,0.14); color: #fff; backdrop-filter: blur(4px); }

/* Uit */
.knop:disabled, .knop[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Icoonknop */
.knop-ikoon { width: 40px; min-height: 40px; height: 40px; padding: 0; background: #f5f8fc; color: #16508c; font-size: 16px; font-weight: 600; }
.knop-ikoon:hover { background: #e9f4ff; }

/* Keuzes: bedragen, filters, soort account */
.keuze {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 14px; margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.2; color: #16508c;
  background: #fff; border: 1.5px solid #d4dfeb; border-radius: 10px; cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}
.keuze:hover { border-color: #1a7fd4; }
.keuze.aan { background: #16508c; border-color: #16508c; color: #fff; }
.keuze:focus-visible { outline: 2px solid #1a7fd4; outline-offset: 2px; }
.keuze-kika { color: #d96500; border-color: #f5c99c; }
.keuze-kika:hover { border-color: #ee7203; }
.keuze-kika.aan { background: #ee7203; border-color: #ee7203; color: #fff; }