/*
 * Opmaak van de bestelomgeving voor Gemeente Rotterdam.
 *
 * Overgenomen uit het goedgekeurde prototype (ontwerpen/rotterdam-besteltool.html,
 * 15 sep 2026). Alles hangt onder .rd, zodat de gewone site en het beheer er
 * niets van merken. Kleuren gemeten op www.rotterdam.nl.
 *
 * LETTERTYPE BOLDER (verzoek Rick, 18 okt 2026). De huisletter van de gemeente,
 * van onzestijl.rotterdam.nl ("Web fonts, for use in websites and apps"),
 * staat in public/fonts/bolder, zodat geen bezoeker hun server nodig heeft.
 * Bolder Heading is een eigen familie, zodat hij alleen op koppen komt: als
 * gewicht 900 van Bolder zou elk gewicht 800 in deze bestanden hem krijgen.
 * Koppen hebben een regelafstand gelijk aan de lettergrootte, zoals hun
 * richtlijn zegt. Daarvoor stond hier Avenir Next of Mulish.
 */
@font-face { font-family: "Bolder"; src: url("../fonts/bolder/Bolder-Light.woff2") format("woff2"), url("../fonts/bolder/Bolder-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Bolder"; src: url("../fonts/bolder/Bolder-Regular.woff2") format("woff2"), url("../fonts/bolder/Bolder-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bolder"; src: url("../fonts/bolder/Bolder-RegularItalic.woff2") format("woff2"), url("../fonts/bolder/Bolder-RegularItalic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bolder"; src: url("../fonts/bolder/Bolder-Bold.woff2") format("woff2"), url("../fonts/bolder/Bolder-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bolder Heading"; src: url("../fonts/bolder/Bolder-Heading.woff2") format("woff2"), url("../fonts/bolder/Bolder-Heading.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
/*
   * Prototype, lokaal bestand (15 sep 2026).
   * Opzet gelijk aan de huidige besteltool: één kaart in het midden, vier stappen
   * met een voortgangsbalk, envelop vooraan in Opties met de inhoud eronder,
   * samenvatting en prijs pas in de laatste stap.
   * Kleuren gemeten op www.rotterdam.nl. Lettertype: zie bovenaan dit bestand.
   */
  :root {
    --groen: #00811F;
    --groen-donker: #006818;
    --groen-licht: #E6F2E9;
    --inkt: #404B4F;
    --sub: #65757B;
    --lijn: #C9D5DA;
    --lijn-zacht: #E1E9EC;
    --vlak: #EFF4F6;
    --wit: #FFFFFF;
    --actie: #C93675;
    --actie-donker: #A82A60;
    --let-op: #8A5A00;
    --let-op-vlak: #FFF4DA;
    --focus: #0B57D0;
    color-scheme: light;
  }
  .rd, .rd * { box-sizing: border-box; }
  .rd { margin: 0; min-height: 100vh; background: var(--vlak); color: var(--inkt); font-family: "Bolder", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  /* Zonder gewicht, zodat .knop-groen en .knop-hoofd hun witte tekst houden. */
  :where(.rd) :where(button, input, select, textarea) { font: inherit; color: inherit; }
  .rd :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  [hidden] { display: none !important; }

  /* Kop */
  .kop { background: var(--wit); border-bottom: 1px solid var(--lijn-zacht); padding-inline: 20px; }
  /* Zelfde breedte als de besteltool, zodat het logo links op één lijn staat
     met het formulier eronder (verzoek Rick, 19 sep 2026). */
  .kop-binnen { max-width: 62rem; margin: 0 auto; display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; padding-block: 10px; }
  .merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--groen); }
  .merk-logo { height: 40px; width: auto; display: block; }
  /* Op een telefoon alleen het beeldmerk (logoregels gemeente, 18 okt 2026). */
  .merk-logo--beeld { display: none; }
  .kop-scheiding { width: 1px; height: 40px; background: var(--lijn); }
  .uitvoerder { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inkt); }
  .uitvoerder-tekst { font-size: 13px; line-height: 1.25; color: var(--sub); }
  /* Nevenafzender: zichtbaar kleiner dan het logo van de gemeente. */
  .uitvoerder-logo { height: 26px; width: auto; display: block; }
  .kop-contact { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .kop-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--inkt); font-weight: 700; font-size: 14px; text-decoration: none; }
  .kop-contact a svg { color: var(--groen); }
  .kop-contact a:hover span { text-decoration: underline; }
  /* Telefoon en e-mail altijd uitgeschreven, niet als icoon (Rick, 15 sep 2026) */
  @media (max-width: 1100px) { .proto { display: none; } .kop-contact { gap: 14px; } }
  @media (max-width: 620px) {
    .kop-binnen { gap: 10px; padding-block: 10px; }
    .merk-logo { height: 30px; }
    .merk-logo--breed { display: none; }
    .merk-logo--beeld { display: block; }
    .kop-scheiding, .proto { display: none; }
    .uitvoerder { order: 3; width: 100%; padding-top: 8px; border-top: 1px solid var(--lijn-zacht); }
    .uitvoerder-tekst { font-size: 13px; }
    .uitvoerder-logo { height: 22px; }
    /* Telefoon: logo en Mijn account boven, telefoon en e-mail samen op de regel eronder */
    .kop-binnen { row-gap: 6px; }
    .kop-contact { display: contents; }
    .merk { order: 1; }
    .kop-contact .account-knop { order: 2; margin-left: auto; padding: 6px 10px; }
    .kop-binnen::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
    .kop-contact a { order: 3; font-size: 13px; }
    .uitvoerder { order: 5; }
  }
  .merk-teken { width: 44px; height: 28px; background: var(--groen); clip-path: polygon(0 60%, 30% 20%, 55% 55%, 80% 10%, 100% 45%, 70% 90%, 45% 60%, 20% 100%); }
  .merk-naam { font-weight: 800; line-height: 1.05; font-size: 15px; }
  .proto { font-size: 13.5px; background: var(--let-op-vlak); color: var(--let-op); padding: 3px 8px; font-weight: 700; }
  .kop-rechts { margin-left: auto; font-size: 14px; color: var(--sub); }
  .kop-rechts b { color: var(--inkt); }

  /* Mijn account en de slider */
  .account-knop { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--lijn); padding: 8px 12px; font-weight: 700; font-size: 14px; cursor: pointer; }
  .badge { min-width: 20px; height: 20px; padding: 0 6px; background: var(--actie); color: var(--wit); font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; border-radius: 10px; }
  .drawer-achter { position: fixed; inset: 0; background: rgba(20, 35, 40, .35); z-index: 30; }
  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 100vw); background: var(--wit); z-index: 31; padding: 18px; overflow-y: auto; box-shadow: -8px 0 30px rgba(20, 40, 45, .18); }
  .drawer-kop { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--lijn-zacht); }
  .drawer-naam { font-weight: 800; }
  .drawer-mail { font-size: 13.5px; color: var(--sub); }
  .drawer-x { background: none; border: 0; cursor: pointer; color: var(--sub); padding: 4px; }
  .drawer-lbl { font-size: 13.5px; font-weight: 700; color: var(--sub); margin: 16px 0 6px; }
  .drawer-nav { display: grid; }
  .drawer-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px; color: var(--inkt); text-decoration: none; font-size: 15px; background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
  .drawer-item:hover { background: var(--vlak); }
  .drawer-item .icn { color: var(--groen); display: grid; }
  .drawer-item .badge { margin-left: auto; }
  .drawer-item.gevaar, .drawer-item.gevaar .icn { color: #B3261E; }
  .drawer-bestel { display: block; margin-top: 14px; padding: 10px 12px; background: var(--groen); color: var(--wit); font-weight: 700; text-decoration: none; text-align: center; }
  .drawer-bestel:hover { background: var(--groen-donker); }

  /* Accountpagina's, naar de mg-opmaak van /my-account in de besteltool (760px breed) */
  .mg-wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 80px; }
  .mg-terug { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
  .mg-terug:hover { color: var(--inkt); }
  .mg-h1 { margin: 0 0 16px; font-size: 28px; font-weight: 700; }
  .mg-card { background: var(--wit); border: 1px solid var(--lijn-zacht); }
  .mg-vak { padding: 18px 22px 20px; border-top: 1px solid var(--lijn-zacht); }
  .mg-vak:first-child { border-top: 0; }
  .mg-vak__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
  .mg-vak__titel { font-size: 12.5px; font-weight: 800; color: var(--sub); }
  .mg-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
  .mg-veld { min-width: 0; }
  .mg-veld--breed { grid-column: span 2; }
  .mg-veld__k { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: var(--sub); }
  .mg-veld__v { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .mg-noot { color: var(--sub); font-size: 14px; margin: 12px 0 0; }
  @media (max-width: 620px) { .mg-veld--breed { grid-column: auto; } }

  /* Pillen, chips en kleine knoppen */
  .pil { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
  .pil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .pil.nieuw { color: #fff; background: #B3261E; }
  .pil.nieuw::before { display: none; }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .chip { border: 1px solid var(--lijn); background: var(--wit); padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; }
  .chip.aan, .chip:has(input:checked) { background: var(--groen); border-color: var(--groen); color: var(--wit); }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .knop-icoon { background: var(--wit); border: 1px solid var(--lijn); width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; color: var(--sub); font-size: 18px; }
  .knop-rood { background: #B3261E; color: var(--wit); }
  .knop { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .leeg { color: var(--sub); padding: 20px 0; }

  /* Mijn bezorgingen */
  .or-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
  .or-lbl { font-size: 13.5px; font-weight: 700; color: var(--sub); }
  .or-intro { color: var(--sub); margin: 0; max-width: 40rem; }
  .or-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
  .or-stat { background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 12px 16px; }
  .or-stat b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
  .or-stat span { color: var(--sub); font-size: 14px; }
  .or-filter { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.5fr auto; gap: 8px; background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 10px; margin-bottom: 12px; }
  .or-filter.smal { grid-template-columns: auto 1fr auto; align-items: center; }
  .or-filter.smal .chips { margin: 0; }
  .or-filter .invoer { padding: 7px 10px; }
  .or-filter > * { min-width: 0; }
  .or-lijst, .gp-lijst, .kl-lijst { display: grid; gap: 8px; }
  .or-card, .gp-plan { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 10px 14px 10px 10px; cursor: pointer; }
  .or-card:hover, .gp-plan:hover, .kl-card:hover { border-color: var(--groen); }
  .mini { width: 96px; height: 64px; overflow: hidden; background: #F4F1EA; display: grid; place-items: center; }
  .mini svg { width: 100%; height: 100%; }
  .mini.lijst { background: var(--vlak); color: var(--sub); font-size: 12px; font-weight: 700; gap: 2px; align-content: center; }
  .or-mid { display: grid; gap: 2px; min-width: 0; }
  .or-titel { font-weight: 800; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .or-meta { color: var(--sub); font-size: 13.5px; }
  .or-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .or-actie { display: inline-flex; align-items: center; gap: 4px; color: var(--groen); font-weight: 700; font-size: 14px; text-decoration: none; }
  .or-meer { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: var(--wit); cursor: pointer; font-weight: 800; }
  .or-chev { color: var(--sub); font-size: 22px; }

  /* Eén bezorging */
  .od-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .od-terug { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lijn); display: grid; place-items: center; color: var(--inkt); background: var(--wit); flex: none; }
  .od-titel { flex: 1; min-width: 14rem; }
  .od-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--sub); font-size: 14px; margin-top: 4px; }
  .od-acties { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .od-grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 12px; align-items: start; }
  .od-kolom { display: grid; gap: 12px; }
  .od-kaart { background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 14px 18px; margin-bottom: 0; }
  .od-meldingen, .od-route { margin-bottom: 12px; }
  .od-route { margin-top: 12px; }
  .od-kop { font-size: 13px; font-weight: 800; color: var(--sub); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
  .od-inklap > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
  .od-inklap[open] > summary { margin-bottom: 10px; }
  .od-inklap > summary::after { content: "▾"; margin-left: auto; }
  .spec { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 10px 20px; }
  .od-kolom aside .spec, .od-grid aside .spec { grid-template-columns: 1fr; }
  .spec dt { font-size: 12.5px; color: var(--sub); font-weight: 600; }
  .spec dd { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
  .tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); }
  .tl li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 13px; color: var(--sub); }
  .tl li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: var(--lijn-zacht); z-index: 0; }
  .tl li:first-child::before { display: none; }
  .tl li.klaar::before, .tl li.nu::before { background: var(--groen); }
  .tl-bol { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--wit); border: 2px solid var(--lijn); font-weight: 800; font-size: 13px; }
  .tl .klaar .tl-bol { background: var(--groen); border-color: var(--groen); color: var(--wit); }
  .tl .nu .tl-bol { border-color: var(--groen); color: var(--groen); }
  .tl .nu { color: var(--inkt); font-weight: 700; }
  .bestandrij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 15px; }
  .bestandrij span:first-of-type { flex: 1; overflow-wrap: anywhere; }
  .slot { display: flex; gap: 8px; align-items: flex-start; color: var(--sub); font-size: 14px; margin: 10px 0 0; }
  .od-thumb { height: 150px; overflow: hidden; background: #F4F1EA; }
  .od-thumb svg { width: 100%; height: 100%; }
  .od-gebied { margin-top: 8px; font-weight: 700; }
  .od-adressen { color: var(--sub); }
  .od-adressen b { color: var(--inkt); font-size: 18px; }
  .od-prijs b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
  .od-prijs span { color: var(--sub); font-size: 13.5px; }
  .od-sublbl { font-weight: 800; margin: 14px 0 6px; }
  .doc { display: inline-flex; align-items: center; gap: 4px; color: var(--groen); font-weight: 700; text-decoration: none; }
  .od-routekaart { height: 220px; overflow: hidden; }
  .od-routekaart svg { width: 100%; height: 100%; }
  .meldingrij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--inkt); text-decoration: none; }

  /* Gesprek */
  .chat { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
  .bel { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 15px; }
  .bel.wij { background: #FBF8F3; border: 1px solid var(--lijn-zacht); justify-self: start; }
  .bel.u { background: var(--groen); color: var(--wit); justify-self: end; }
  .bel-meta { font-size: 12px; opacity: .75; margin-top: 2px; }
  .chat-form { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: end; margin-top: 10px; }

  /* Gebieden */
  .gp-merk { font-size: 12px; font-weight: 700; padding: 1px 8px; background: var(--groen-licht); color: var(--groen-donker); }
  .gp-merk.uit { background: var(--vlak); color: var(--sub); }
  .gp-merk.nieuw { background: #FBE7F0; color: #A82A60; }
  .gp-acties { display: flex; gap: 4px; opacity: 0; }
  .gp-plan:hover .gp-acties, .gp-plan:focus-within .gp-acties { opacity: 1; }
  .gp-kop { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
  .gp-scherm { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; align-items: start; }
  .gp-kaart { position: relative; height: 640px; overflow: hidden; border: 1px solid var(--lijn-zacht); }
  .gp-kaart svg { width: 100%; height: 100%; display: block; }
  .gp-kaartknoppen { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
  .gp-zij { display: grid; gap: 12px; }
  .stip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--groen); margin-right: 6px; }
  .stip.roze { background: #C93675; }
  .reactie { display: flex; gap: 10px; }
  .deelrij { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 14.5px; }
  .av { width: 32px; height: 32px; border-radius: 50%; background: var(--groen-licht); color: var(--groen-donker); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }

  /* Klachten en berichten */
  .kl-card { display: grid; gap: 3px; background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 12px 16px; color: var(--inkt); text-decoration: none; }
  .kl-uittreksel { font-size: 15px; }
  .kl-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
  .kl-opgelost { background: var(--groen-licht); border-color: var(--groen); margin: 12px 0; }
  .od-kaart + .od-kaart { margin-top: 12px; }
  .od-kolom > .od-kaart + .od-kaart { margin-top: 0; }
  .kl-opgelost-vraag { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn-zacht); flex-wrap: wrap; }

  /* Venster en meldingpaneel */
  .venster { border: 0; padding: 22px; width: min(26rem, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(20, 40, 45, .25); }
  .venster::backdrop { background: rgba(20, 35, 40, .35); }
  .venster h2 { margin: 0 0 6px; font-size: 20px; }
  .venster-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
  .drawer.melding { width: min(32rem, 100vw); z-index: 33; }
  #melding-achter { z-index: 32; }
  .drawer.melding .chips { margin-bottom: 0; }
  .drawer.melding .chip { position: relative; font-weight: 600; }

  @media (max-width: 900px) {
    .od-grid, .gp-scherm { grid-template-columns: 1fr; }
    .or-filter { grid-template-columns: 1fr 1fr; }
    .or-filter .invoer:first-child { grid-column: 1 / -1; }
    .gp-kaart { height: 420px; }
  }
  @media (max-width: 620px) {
    .or-stats { grid-template-columns: 1fr; }
    .or-card, .gp-plan { grid-template-columns: 64px minmax(0, 1fr); }
    .mini { width: 64px; height: 48px; }
    .mini.lijst { font-size: 10px; }
    .mini.lijst svg { width: 16px; height: 16px; }
    .or-rechts, .gp-acties { grid-column: 1 / -1; justify-content: flex-start; opacity: 1; }
    .tl { grid-template-columns: 1fr; gap: 6px; }
    .tl li { grid-template-columns: 28px 1fr; justify-items: start; text-align: left; align-items: center; }
    .tl li::before { display: none; }
    .or-filter.smal { grid-template-columns: 1fr; }
  }

  /* Vragen op de orderpagina, bedrijfsomgeving en hulp */
  .od-vraag { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-left: 4px solid #D39A00; background: var(--let-op-vlak); margin-bottom: 12px; }
  .od-vraag.info { border-left-color: var(--groen); background: var(--groen-licht); }
  .od-vraag-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
  .od-kop-noot { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .bd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
  .bd-stat { background: var(--wit); border: 1px solid var(--lijn-zacht); padding: 12px 16px; }
  .bd-stat__kop { font-size: 13px; font-weight: 700; color: var(--sub); }
  .bd-stat__getal { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .bd-stat__onder { font-size: 13px; color: var(--sub); }
  .tabelrand { overflow-x: auto; }
  .bd-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; min-width: 38rem; }
  .bd-tabel th { text-align: left; font-size: 13.5px; color: var(--sub); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--lijn); }
  .bd-tabel td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--lijn-zacht); }
  .bd-tabel tr[data-naar] { cursor: pointer; }
  .bd-tabel tr[data-naar]:hover td { background: var(--vlak); }
  .drawer-bedrijf { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 14px; padding: 10px 12px; border: 2px solid var(--groen); color: var(--inkt); text-decoration: none; }
  .drawer-bedrijf__titel { font-weight: 800; }
  .drawer-bedrijf__sub { grid-column: 1; font-size: 13px; color: var(--sub); }
  .drawer-bedrijf > span[aria-hidden] { grid-row: 1 / 3; grid-column: 2; font-size: 22px; color: var(--groen); }
  .doorlink { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn-zacht); color: var(--inkt); text-decoration: none; }
  .doorlink svg { color: var(--groen); }
  @media (max-width: 900px) { .bd-stats { grid-template-columns: 1fr 1fr; } }

  /* Uitlegregel boven de kaart, zoals in de huidige besteltool */
  /*
   * DE MELDING BIJ AANKOMST (25 sep 2026).
   *
   * Wie vanaf bewonersbrief.nl hierheen is gestuurd, leest hier waarom en op
   * welk adres hij hoort. Rechte hoeken en de kleuren van de gemeente, zoals
   * de rest van deze omgeving.
   */
  .eigenportaal { width: min(62rem, 100% - 40px); margin: 14px auto 0; display: flex; gap: 14px; align-items: flex-start; background: var(--let-op-vlak); border-left: 4px solid #D39A00; color: var(--let-op); padding: 14px 16px; }
  .eigenportaal-teken { flex: none; margin-top: 2px; }
  .eigenportaal-tekst { flex: 1; font-size: 14.5px; min-width: 0; }
  .eigenportaal-tekst b { display: block; color: #5E3D00; font-size: 15.5px; }
  .eigenportaal-tekst code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: rgba(0, 0, 0, .05); padding: 1px 6px; overflow-wrap: anywhere; }
  .eigenportaal-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .eigenportaal-kn { font: inherit; font-weight: 700; font-size: 14px; border: 2px solid var(--groen); padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
  .eigenportaal-kn.vol { background: var(--groen); color: var(--wit); }
  .eigenportaal-kn.leeg { background: transparent; color: var(--groen); }
  .eigenportaal-sluit { font: inherit; background: none; border: none; color: var(--let-op); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }
  @media (max-width: 620px) {
    .eigenportaal { width: min(62rem, 100% - 28px); gap: 10px; padding: 12px 13px; }
    .eigenportaal-tekst { font-size: 14px; }
    .eigenportaal-knoppen .eigenportaal-kn { flex: 1 1 100%; text-align: center; }
  }

  .uitleg { max-width: 62rem; margin: 12px auto 0; padding-inline: 20px; display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 15px; }
  .uitleg i { flex: 0 0 26px; height: 26px; background: var(--groen); color: var(--wit); display: grid; place-items: center; font-style: normal; font-weight: 800; }

  main { padding: 12px 20px 60px; }
  .kaart-paneel { max-width: 44rem; margin: 0 auto; background: var(--wit); border: 1px solid var(--lijn-zacht); padding: clamp(18px, 3vw, 30px); }
  .kaart-paneel h1 { margin: 0; font-size: 22px; font-weight: 700; }
  .voortgang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 10px; }
  .voortgang span { height: 5px; background: var(--lijn-zacht); }
  .voortgang span.aan { background: var(--groen); }

  /*
     HET SCHERM NA HET BESTELLEN.

     Het was een kop, vier groene streepjes en daaronder grijze tekst; dat leest
     niet als "het is gelukt" (melding Rick, 21 sep 2026). Een teken links, de kop
     ernaast en daaronder in gewone inkt wat er nu gebeurt.
  */
  .rd .rd-klaar { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--lijn-zacht); }
  .rd .rd-klaar__teken { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; background: var(--groen-licht); color: var(--groen); }
  .rd .rd-klaar h1 { margin: 0 0 6px; }
  .rd .rd-klaar__wat { margin: 0; font-size: 15.5px; color: var(--inkt); }
  @media (max-width: 520px) { .rd .rd-klaar { gap: 12px; } .rd .rd-klaar__teken { width: 44px; height: 44px; } }
  /*
     HET SCHERM NA HET BESTELLEN (verzoek Rick, 25 sep 2026).

     Alles stond in één samenvatting van twee kolommen, en een bestandsnaam van
     zeventig tekens in een halve kolom leest niet. Nu staat bovenaan waar het
     om gaat, daaronder twee blokken met gegevens, en de bestanden in een tabel
     met het gebied ernaast.
  */
  .rd .ont-kop { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: var(--vlak); border: 1px solid var(--lijn-zacht); padding: 14px 16px; margin-bottom: 18px; }
  .rd .ont-kop--offerte { background: var(--let-op-vlak); border-color: #E8D6AA; }
  .rd .ont-kop__naam { display: block; font-weight: 700; font-size: 15px; }
  .rd .ont-kop__bedrag { font-size: 22px; font-weight: 700; color: var(--inkt); white-space: nowrap; }
  .rd .ont-wacht { display: inline-flex; align-items: center; background: var(--let-op-vlak); color: var(--let-op); font-size: 12px; font-weight: 700; padding: 3px 9px; }
  .rd .ont-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; margin-bottom: 18px; }
  @media (max-width: 620px) { .rd .ont-twee { grid-template-columns: minmax(0, 1fr); } }
  .rd .ont-rij { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(6rem, 1fr); gap: 10px 14px; padding: 8px 0; border-bottom: 1px solid var(--lijn-zacht); font-size: 15px; align-items: baseline; }
  .rd .ont-rij:last-child { border-bottom: 0; }
  .rd .ont-rij dt { margin: 0; color: var(--sub); }
  .rd .ont-rij dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
  /* Een tweede regel onder een waarde, zoals het tijdstip onder de naam. Zonder
     dit loopt hij achter de naam aan en lees je "R. van der Vliet 25 september". */
  .rd .ont-rij dd .fijn { display: block; font-weight: 400; margin-top: 2px; }
  .rd .ont-tabel { border: 1px solid var(--lijn-zacht); }
  .rd .ont-tabel table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
  .rd .ont-tabel th { text-align: left; font-size: 13px; font-weight: 700; color: var(--sub); padding: 8px 12px; background: var(--vlak); border-bottom: 1px solid var(--lijn-zacht); }
  .rd .ont-tabel td { padding: 9px 12px; border-bottom: 1px solid var(--lijn-zacht); vertical-align: middle; }
  .rd .ont-tabel tr:last-child td { border-bottom: 0; }
  .rd .ont-getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rd .ont-bestand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .rd .ont-bol { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; margin-right: 8px; }

  .info { font-size: 14px; color: var(--sub); margin: 0 0 6px; }

  /* Geen tekst in alleen hoofdletters: de huisstijl van de gemeente staat het
     nergens toe (onzestijl.rotterdam.nl; verzoek Rick, 18 okt 2026). Ook de
     andere labels en tabelkoppen in deze bestanden staan in gewone letters. */
  .kopje { font-size: 14px; font-weight: 700; color: var(--sub); margin: 14px 0 6px; display: flex; justify-content: space-between; gap: 12px; }
  .kopje span { text-transform: none; letter-spacing: 0; font-weight: 400; }

  .kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 10px; }
  .keuze { position: relative; display: block; border: 2px solid var(--lijn); padding: 9px 12px; cursor: pointer; background: var(--wit); }
  .keuze input { position: absolute; opacity: 0; pointer-events: none; }
  .keuze:has(input:checked) { border-color: var(--groen); background: var(--groen-licht); }
  .keuze:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .keuze:has(input:disabled) { opacity: .4; cursor: not-allowed; background: var(--vlak); }
  .keuze b { display: block; font-size: 16px; }
  .keuze small { display: block; color: var(--sub); font-size: 13.5px; line-height: 1.35; }
  .knoppenrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 8px; }
  .knoppenrij .keuze { text-align: center; padding: 6px 4px; font-weight: 700; font-size: 15px; white-space: nowrap; }
  /* Twee kolommen naast elkaar; de knoppen van één keuze op één regel */
  .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .twee .knoppenrij { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  @media (max-width: 620px) { .twee { grid-template-columns: 1fr; } }
  .teller { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; }
  .teller button { border: 2px solid var(--lijn); background: var(--wit); font-size: 18px; font-weight: 800; cursor: pointer; }
  .teller .invoer { text-align: center; padding: 5px; font-weight: 700; }
  .vink .keuze:has(input:checked)::before { content: "✓ "; color: var(--groen); }

  .invoer { width: 100%; border: 2px solid var(--lijn); padding: 10px 12px; background: var(--wit); }
  .invoer:focus { border-color: var(--groen); outline: none; }
  .hulp { font-size: 14px; color: var(--sub); margin: 6px 0 0; }
  /*
     Groen is hier "gelukt": een bewaarde wijziging, een verstuurde melding.
     Alles wat de klant alleen iets vertelt of ergens op wijst staat in oker
     (verzoek Rick, 22 sep 2026); dat leest als een opmerking en niet als een
     bevestiging van iets dat hij net gedaan zou hebben.
  */

  /* ── Het adressenlijstblok ───────────────────────────────────────────────
     Dit blok komt uit de gewone klantomgeving (store.orders.partials.
     adressenlijst-blok) en draagt zijn eigen bb-klassen met ronde hoeken en
     crèmekleurige vlakken. Hier staat wat het in de Rotterdam-huisstijl zet:
     rechte hoeken, onze lijnen, onze kleuren.

     Het stond in rotterdam-bezorgingen.css, en toen het blok er op de
     besteltool bij kwam stond daar een kale tabel (melding Rick, 22 sep 2026).
     Eén plek voor allebei; het blad van de bezorgingen laadt alleen zijn eigen
     uitzonderingen nog.
  */
.rd .bb-lijst-bestand { border: 1px solid var(--lijn-zacht); border-radius: 0; background: var(--vlak); padding: 10px 12px; }
.rd .bb-lijst-bestand__icoon { color: var(--groen); background: none; }
.rd .bb-lijst-bestand strong { color: var(--inkt); }
.rd .bb-lijst-ander { border: 1px solid var(--lijn); border-radius: 0; background: var(--wit); color: var(--groen); font-weight: 700; }
.rd .bb-lijst-ander:hover { background: var(--groen-licht); border-color: var(--groen); }

.rd .bb-vinkrij { border-radius: 0; }
.rd .bb-vinkrij__vak { border-radius: 0; }
.rd .bb-vinkrij input:checked + .bb-vinkrij__vak { background: var(--groen); border-color: var(--groen); }
.rd .bb-briefkeuze__melding { border-radius: 0; }
.rd #adressenlijst-sectie table { font-size: 14px; }
.rd #adressenlijst-sectie select, .rd #adressenlijst-sectie input[type="text"] { border-radius: 0; }

/*
   De rest van het blok: de koppeltabel met zijn crèmekleurige kop, de
   meldingen en de foutenlijst. Alles rechte hoeken en de kleuren van Rotterdam
   (melding Rick, 21 sep 2026). De cijfers hiernaast zijn de kleuren die het
   blok zelf meebrengt; ze staan er als herkenningspunt bij.
*/
.rd .bb-koppeling { border-radius: 0; border-color: var(--lijn-zacht); }
.rd .bb-koppeling th { background: var(--vlak); color: var(--sub); }      /* was #FAF7F2 */
.rd .bb-koppeling td { border-color: var(--lijn-zacht); }
/* "optioneel" achter een veldnaam, zoals bij de kopjes in de besteltool (18 okt 2026). */
.rd .bb-koppeling__optioneel { display: block; font-size: 13px; font-weight: 400; color: var(--sub); }
.rd .bb-koppeling .bb-verplicht,
.rd #adressenlijst-sectie .bb-koppeling em { color: var(--actie); }
.rd .bb-lijst-fouten { border-radius: 0; background: #FBE9E6; color: #A8342A; }  /* rand en hoeken */
.rd .bb-briefkeuze__melding { background: var(--let-op-vlak); color: var(--let-op); }  /* was #FFF4D6 */
.rd .bb-briefkeuze__melding.is-fout { background: #FBE9E6; color: #A8342A; }
.rd #adressenlijst-sectie .bb-lijst-bestand { background: var(--vlak); }

  /* Uitlijning: drie kolommen die niet met elkaar meebewegen, en overal
     dezelfde hoogte. Zonder vaste breedtes rekt de kolom met de langste
     veldnaam mee en staat het voorbeeld ergens rechts in het niets. */
  .rd .bb-koppeling__tabel { table-layout: fixed; width: 100%; }
  .rd .bb-koppeling__tabel th:first-child,
  .rd .bb-koppeling__tabel td:first-child { width: 30%; }
  .rd .bb-koppeling__tabel th:nth-child(2),
  .rd .bb-koppeling__tabel td:nth-child(2) { width: 34%; }
  .rd .bb-koppeling__tabel tbody th,
  .rd .bb-koppeling__tabel tbody td { vertical-align: middle; }
  .rd .bb-koppeling select { max-width: none; height: 42px; }

  /*
     De kop boven de koppeltabel.

     "Kolommen koppelen" stond in hoofdletters in de html en kreeg in de
     klantomgeving zijn maat van een blad dat wij hier niet laden. Op deze
     pagina bleef er een kale h3 over: groot, zwart en schreeuwerig (melding
     Rick, 22 sep 2026). Hij krijgt hier de maat van .kopje, hetzelfde kopje
     als overal in de besteltool.
  */
  .rd #adressenlijst-sectie .bb-section-title {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 22px 0 6px;
  }
  /* Sinds 18 okt 2026 in gewone zinsvorm (huisstijl van de gemeente), dus
     zonder de letterafstand die bij hoofdletters hoorde. */
  .rd #adressenlijst-sectie .bb-section-title h3 {
    margin: 0; font-size: 14px; letter-spacing: 0; font-weight: 700;
    color: var(--sub); line-height: 1.3;
  }
  .rd #adressenlijst-sectie .bb-section-rest {
    font-size: 13px; color: var(--sub); text-transform: none; letter-spacing: 0; font-weight: 400;
  }
  .rd #adressenlijst-sectie .bb-form-section > * + * { margin-top: 14px; }

  /* Het uploadvak: rechte hoeken en onze kleuren, op beide pagina's hetzelfde. */
  .rd .bb-lijst-dropzone { border: 1.5px dashed var(--lijn); border-radius: 0; background: var(--wit); padding: 14px 16px; gap: 12px; }
  .rd .bb-lijst-dropzone:hover { border-color: var(--groen); background: var(--groen-licht); }
  .rd .bb-lijst-dropzone__icoon { color: var(--groen); background: none; width: auto; height: auto; }
  .rd .bb-lijst-dropzone strong { font-size: 14.5px; color: var(--inkt); }
  .rd .bb-lijst-dropzone small { color: var(--sub); font-size: 13px; }

  /* Tekst niet tegen de rand van de cel aan. */
  .rd .bb-koppeling__tabel thead th { padding: 10px 18px; }
  /* De koppen van de tabel ook niet in hoofdletters (huisstijl van de gemeente, 18 okt 2026). */
  .rd .bb-koppeling__tabel thead th { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
  .rd .bb-koppeling__tabel tbody th,
  .rd .bb-koppeling__tabel tbody td { padding: 12px 18px; }

  .melding { border-left: 4px solid var(--groen); background: var(--groen-licht); padding: 11px 14px; margin: 14px 0 0; font-size: 14.5px; }
  .melding.let-op { border-left-color: #D39A00; background: var(--let-op-vlak); }
  .melding b { display: block; }

  /* Inhoud van de envelop, zoals bb-inhoud in de besteltool */
  .inhoud { border: 1px solid var(--lijn); padding: 2px 12px 12px; margin-top: 8px; }
  .inhoud .kopje { margin-top: 8px; }
  .inhoud-kop { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
  .inhoud-kop .nr { width: 24px; height: 24px; background: var(--groen); color: var(--wit); display: grid; place-items: center; font-size: 13px; font-weight: 800; }
  .inhoud-kop .weg, .bestand .weg { margin-left: auto; background: none; border: 0; color: var(--sub); cursor: pointer; text-decoration: underline; }
  .toevoegen { margin-top: 8px; width: 100%; border: 2px dashed var(--groen); background: var(--wit); color: var(--groen); font-weight: 700; padding: 7px; cursor: pointer; }

  /* Kaartvoorbeeld in stap 2 */
  .voorbeeld { position: relative; border: 1px solid var(--lijn); aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #F4F1EA; }
  .voorbeeld svg { width: 100%; height: 100%; display: block; }
  .voorbeeld .open { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); }
  .gebied-regel { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--lijn-zacht); font-size: 15px; }
  .gebied-regel b { font-variant-numeric: tabular-nums; }

  .schakel { margin-top: 10px; }
  .schakel button { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: var(--sub); font-size: 14px; cursor: pointer; }
  .schakel button:hover span { text-decoration: underline; color: var(--inkt); }
  .drop { border: 2px dashed var(--lijn); padding: 18px; text-align: center; background: var(--vlak); cursor: pointer; }
  .drop b { display: block; }
  .bestand { display: flex; gap: 12px; align-items: center; border: 1px solid var(--lijn); padding: 10px 12px; margin-top: 8px; }
  .bestand .icoon { width: 32px; height: 40px; background: var(--groen-licht); border: 1px solid var(--groen); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--groen); flex: none; }

  /*
     EEN LANGE BESTANDSNAAM DUWDE DE KNOP WEG (melding Bart, 1 okt 2026).

     De middelste kolom had geen `min-width: 0`, en dan krimpt een flexvak niet
     onder zijn inhoud. De naam liep door tot tegen Verwijderen aan en over de
     rand heen. Hij mag nu afbreken, net als in .bestandrij hierboven, en de
     knop staat bovenaan uitgelijnd zodat hij bij twee regels niet zweeft.
  */
  .bestand { align-items: flex-start; }
  .bestand .bestand-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .bestand .bestand-naam { overflow-wrap: anywhere; }
  .bestand .weg { flex: none; align-self: flex-start; padding-top: 1px; }

  /* Op een telefoon neemt die knop zoveel breedte af dat de naam in zeven
     stukjes brak. Daar staat hij onder de naam, uitgelijnd met de tekst. */
  @media (max-width: 520px) {
    .bestand { flex-wrap: wrap; }
    .bestand .weg { flex-basis: 100%; margin-left: 44px; text-align: left; padding-top: 4px; }
  }

  /* Samenvatting */
  /*
     Twee kolommen, om verticale ruimte te sparen (verzoek Rick, 19 sep 2026).
     De samenvatting liep anders zo lang door dat de prijs onder de vouw viel
     en je moest scrollen om te zien wat je bestelt.

     Twee kolommen alleen als er ook ruimte voor is: onder 700px staat alles
     al onder elkaar, en dan wordt het weer één kolom.
  */
  .samenvatting { border: 1px solid var(--lijn-zacht); margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .samenvatting .rij:nth-child(odd) { border-right: 1px solid var(--lijn-zacht); }
  /*
     De etiketkolom past zich aan het langste woord aan. Hij stond vast op
     7,5rem, en "Inkoopordernummer" is breder: dat woord liep dwars over de
     waarde heen (melding Rick, 21 sep 2026). max-content met een bovengrens,
     zodat een lang etiket ruimte krijgt maar de waarde niet wegdrukt.
  */
  .samenvatting .rij { display: grid; grid-template-columns: minmax(7.5rem, max-content) minmax(6rem, 1fr); gap: 10px 14px; padding: 9px 14px; border-bottom: 1px solid var(--lijn-zacht); font-size: 15px; align-items: baseline; }
  @media (max-width: 460px) { .samenvatting .rij { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
  .samenvatting .rij:last-child { border-bottom: 0; }
  /* Bij een even aantal staat de op een na laatste naast de laatste, dus die
     hoort ook geen streep eronder te hebben. */
  .samenvatting .rij:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  /* Een oneven laatste rij loopt over beide kolommen, anders staat er een
     lege cel naast die het blok scheef laat ogen. */
  .samenvatting .rij:last-child:nth-child(odd) { border-right: 0; grid-column: 1 / -1; }
  /*
     Etiket links licht, waarde rechts donker en vet. Ze stonden allebei in een
     grijstint van bijna dezelfde sterkte, en dan leest het hele blok als één
     grijze lap (melding Rick, 21 sep 2026).
  */
  .samenvatting dt { color: var(--sub); font-size: 13px; font-weight: 600; }
  .samenvatting .fijn { display: block; color: var(--sub); font-size: 13.5px; margin-top: 2px; }
  .samenvatting dd { margin: 0; color: var(--inkt); font-weight: 700; overflow-wrap: anywhere; }
  .prijs { border: 2px solid var(--inkt); padding: 12px 14px; }
  .prijs table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
  .prijs td { padding: 4px 0; vertical-align: top; }
  .prijs td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; }
  .prijs .totaal td { border-top: 1px solid var(--lijn); padding-top: 10px; font-weight: 800; font-size: 19px; }
  /* Bij een offerte is de totaalregel de enige regel, en dan hing die streep
     los boven de kop (melding Rick, 21 sep 2026). */
  .prijs tr:first-child.totaal td { border-top: 0; padding-top: 0; }
  .fijn { color: var(--sub); font-size: 13px; }
  /*
     Het akkoordblok stond in dezelfde grijze rand als alle andere velden en viel
     daardoor weg, terwijl dit de regel is waarmee je namens de gemeente opdracht
     geeft (verzoek Rick, 21 sep 2026). Zolang het vinkje uit staat is het blok
     okerkleurig: dit moet nog gebeuren. Zet je het aan, dan wordt het groen,
     dezelfde bevestiging als elders in de tool.
  */
  .akkoord { display: grid; grid-template-columns: 22px 1fr; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 2px solid var(--let-op); background: var(--let-op-vlak); cursor: pointer; font-size: 15px; }
  .akkoord input { width: 18px; height: 18px; accent-color: var(--groen); margin: 3px 0 0; }
  .akkoord:has(input:checked) { border-color: var(--groen); background: var(--groen-licht); }

  /*
     Een kader voor een afspraak die je moet kunnen teruglezen, zoals de
     spoedtermijn. Geen waarschuwing en geen hulptekst: een mededeling met een
     rand eromheen.
  */
  .rd-kader { margin-top: 16px; padding: 12px 16px; background: var(--let-op-vlak); border-left: 4px solid var(--let-op); font-size: 14.5px; color: var(--inkt); }
  .rd-kader b { display: block; margin-bottom: 4px; }
  /* De opsomming staat elders in de tool op list-style:none; hier horen de
     bolletjes wel, anders leest het als drie losse zinnen. */
  .rd-kader ul { margin: 0; padding-left: 20px; list-style: disc; }
  .rd-kader li { margin-top: 2px; }

  /* Knoppen onderaan */
  .verder { display: flex; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--lijn-zacht); flex-wrap: wrap; align-items: center; }
  .knop { border: 2px solid transparent; padding: 10px 18px; font-weight: 700; cursor: pointer; }
  .knop-hoofd { background: var(--actie); color: var(--wit); }
  .knop-hoofd:hover { background: var(--actie-donker); }
  .knop-groen { background: var(--groen); color: var(--wit); }
  .knop-groen:hover { background: var(--groen-donker); }
  .knop-rand { background: var(--wit); border-color: var(--groen); color: var(--groen); }
  .knop-tekst { background: none; border: 0; color: var(--sub); text-decoration: underline; cursor: pointer; padding: 10px 4px; }
  .knop:disabled { background: #B9C5CA; border-color: #B9C5CA; color: var(--wit); cursor: not-allowed; }
  .rechts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

  /* Schermvullende kaart */
  .kaartvenster { position: fixed; inset: 0; z-index: 20; background: #F4F1EA; }
  .kaartvenster svg { width: 100%; height: 100%; display: block; }
  /* Niet voor de tekenkaart: Leaflet zet zijn tekenlaag zelf op maat. Met 100% vielen
     de getekende lijnen buiten beeld (melding Rick, 15 sep 2026). */
  .kaartvenster .leaflet-container svg { width: auto; height: auto; display: inline; }
  .kaart-boven { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .zoom { display: flex; background: var(--wit); border: 1px solid var(--lijn); }
  .zoom button { width: 40px; height: 40px; border: 0; background: var(--wit); font-size: 20px; font-weight: 700; cursor: pointer; }
  .zoom button + button { border-left: 1px solid var(--lijn); }
  .zoeken { height: 42px; width: min(22rem, 60vw); border: 1px solid var(--lijn); padding: 0 12px; background: var(--wit); }
  .zwevend { position: absolute; right: 16px; top: 72px; width: min(20rem, calc(100vw - 32px)); background: var(--wit); border: 1px solid var(--lijn); padding: 16px; box-shadow: 0 6px 24px rgba(20, 40, 45, .18); }
  /* Vet en in de inktkleur: op 18px zonder gewicht las het als bijschrift
     in plaats van als kop (melding Rick, 23 sep 2026). */
  .zwevend h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--inkt); }
  .zwevend .kruis { visibility: hidden; border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
  .zwevend .gebied-regel:hover .kruis, .zwevend .kruis:focus-visible { visibility: visible; }
  @media (max-width: 700px) { .zwevend { top: auto; bottom: 16px; } .samenvatting { grid-template-columns: minmax(0, 1fr); } .samenvatting .rij:nth-child(odd) { border-right: 0; } .samenvatting .rij { grid-template-columns: 1fr; gap: 0; } .samenvatting dt { font-size: 13.5px; } }
  @media (prefers-reduced-motion: no-preference) { .stap { animation: in .16s ease-out; } @keyframes in { from { opacity: .5; } to { opacity: 1; } } }

/* Smalle pagina (inloggen, geen toegang) en voettekst, gebouwd na het prototype */
.rd .rd-smal { max-width: 30rem; margin: 0 auto; padding: 32px 20px 80px; }
.rd .rd-smal .kaart-paneel { max-width: none; }
.rd .rd-smal .kopje { display: block; margin: 16px 0 6px; }
.rd .voet { border-top: 1px solid var(--lijn-zacht); background: var(--wit); padding: 16px 20px; margin-top: 40px; }
/* Zelfde breedte als de kopbalk en de besteltool. */
.rd .voet-binnen { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--sub); }
.rd .voet-binnen a { color: var(--sub); }
.rd main.rd-smal + .voet { margin-top: 0; }

/*
   De eisen aan een nieuw wachtwoord, bij Wachtwoord vergeten (verzoek Rick,
   18 okt 2026). Eerst grijs, groen met een vinkje zodra er aan voldaan is.
   Geen rood: een eis waar u nog niet aan toe bent is geen fout.
*/
.rd .rd-eisen { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; color: var(--sub); }
.rd .rd-eisen li { display: flex; gap: 8px; align-items: center; margin: 0 0 3px; }
.rd .rd-eisen li::before { content: ""; flex: 0 0 14px; height: 14px; border: 1.5px solid var(--lijn); }
.rd .rd-eisen li[data-goed="ja"] { color: var(--groen); }
.rd .rd-eisen li[data-goed="ja"]::before { border-color: var(--groen); background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }

/*
    DE CHAT IN DE HUISSTIJL VAN ROTTERDAM (verzoek Rick, 19 sep 2026).

    De chatballon komt uit onze eigen site en staat in ons geel met afgeronde
    hoeken. In de omgeving van de gemeente viel hij daarmee uit de toon: alles
    daar is groen, hoekig en in Bolder.

    Deze regels staan buiten .rd, want de chat hangt aan het einde van de body
    en niet in dat blok. Dat mag: dit bestand wordt alleen door de
    Rotterdam-opmaak geladen.

    Met `body` ervoor, want de chat zet zijn eigen stijlen onderaan de body en
    wint dan op gelijke specificiteit.
*/
body .bb-chat { font-family: 'Bolder', Arial, sans-serif; }

body .bb-chat__knop {
    border-radius: 0;
    background: var(--groen);
    box-shadow: 0 10px 24px -14px rgba(0, 104, 24, .9);
}

body .bb-chat__knop:hover { background: var(--groen-donker); }

body .bb-chat__paneel {
    border-radius: 0;
    border: 1px solid var(--lijn);
    box-shadow: 0 18px 48px -26px rgba(20, 40, 45, .7);
}

body .bb-chat__kop { border-bottom-color: var(--lijn-zacht); }

/* Wat je zelf zegt in het groen van de gemeente, met witte letters. Geel op
   donker is ons merk, niet dat van hen. */
body .bb-chat__bericht { border-radius: 0; }
body .bb-chat__bericht.van-jij { background: var(--groen); color: var(--wit); }
body .bb-chat__bericht.van-ons { background: var(--vlak); color: var(--inkt); }

body .bb-chat__verstuur {
    border-radius: 0;
    background: var(--groen);
    color: var(--wit);
}

body .bb-chat__verstuur:hover { background: var(--groen-donker); }

body .bb-chat__velden input,
body .bb-chat__invoer textarea { border-radius: 0; }

body .bb-chat__velden input:focus,
body .bb-chat__invoer textarea:focus { border-color: var(--groen); }

/*
    DE MELDINGEN VAN SWEETALERT IN DE HUISSTIJL VAN ROTTERDAM
    (verzoek Rick, 19 sep 2026).

    In de besteltool komen er drie voorbij, allemaal uit de tekenkaart: "Adressen
    worden opgehaald", "Gelukt!" met het aantal, en "Kon adressen niet laden".
    Ze stonden in de standaardopmaak van SweetAlert: afgeronde hoeken, een blauwe
    knop en een ander lettertype dan de rest van het scherm.

    Deze regels staan buiten .rd, want SweetAlert hangt zijn venster aan de body.
    Dat mag: dit bestand wordt alleen door de Rotterdam-opmaak geladen. Met `body`
    ervoor, want SweetAlert zet zijn eigen opmaak ook in de pagina.
*/
body .swal2-popup {
    border-radius: 0;
    border: 1px solid var(--lijn);
    font-family: 'Bolder', Arial, sans-serif;
    color: var(--inkt);
}

/* style.css kleurt deze knoppen geel met !important voor onze eigen site; die
   regels gelden ook hier, dus hieronder staat !important waar het nodig is. */
body .swal2-title { color: var(--inkt) !important; font-family: 'Bolder', Arial, sans-serif !important; font-weight: 800 !important; }
body .swal2-html-container { color: var(--sub); }

body .swal2-actions button.swal2-styled {
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Bolder', Arial, sans-serif !important;
    font-weight: 700;
}

body .swal2-actions button.swal2-styled.swal2-confirm {
    background: var(--groen) !important;
    background-color: var(--groen) !important;
    color: var(--wit) !important;
}

body .swal2-actions button.swal2-styled.swal2-confirm:hover,
body .swal2-actions button.swal2-styled.swal2-confirm:focus {
    background-color: var(--groen-donker) !important;
    color: var(--wit) !important;
}

body .swal2-actions button.swal2-styled.swal2-cancel {
    background: var(--wit) !important;
    border: 1px solid var(--lijn) !important;
    border-radius: 0 !important;
    color: var(--inkt) !important;
}

body .swal2-icon.swal2-question { border-color: var(--lijn) !important; color: var(--sub) !important; }

/* Het vinkje en het draaiwieltje in het groen van de gemeente. */
body .swal2-icon.swal2-success { border-color: var(--groen); color: var(--groen); }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--groen-licht); }
body .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--groen); }
body .swal2-icon.swal2-info { border-color: var(--lijn); color: var(--sub); }
body .swal2-loader { border-color: var(--groen) transparent var(--groen) transparent; }

/* Alleen woningen of alleen bedrijven (18 okt 2026): klein en stil, onder het
   aantal. Hier en niet in rotterdam-bestellen.css: de orderpagina heeft hem
   ook, om de keuze achteraf om te zetten. De gekozen soort is vet en onderstreept, de rest grijs. */
.rd .rd-adressoort { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 8px; font-size: 13.5px; color: var(--sub); }
.rd .rd-adressoort[hidden] { display: none; }
.rd .rd-adressoort button { background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; color: var(--sub); cursor: pointer; }
.rd .rd-adressoort button:hover { color: var(--inkt); text-decoration: underline; }
.rd .rd-adressoort button[aria-pressed="true"] { color: var(--inkt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Zonder puntjes ertussen: in een smalle kolom (orderpagina, telefoon) loopt
   de rij over twee regels en bleef er een los puntje aan het eind hangen. */
.rd .rd-adressoort { gap: 0 14px; }
.rd .rd-adressoort > span[aria-hidden] { display: none; }

/* Koppen in Bolder Heading, regelafstand gelijk aan de lettergrootte; zie
   het lettertype bovenaan dit bestand. */
.rd h1, .rd h2, .rd .mg-h1 { font-family: "Bolder Heading", "Bolder", Arial, sans-serif; font-weight: 400; line-height: 1; }

/*
   Tweestapsverificatie op het adres van de gemeente (verzoek Rick, 19 okt 2026).
   Zie resources/views/rotterdam/tweefactor. Hoekig, zoals de rest.
*/
.rd .rd-tweefactor .rd-stapkop { margin: 26px 0 8px; font-size: 18px; color: var(--inkt); }
.rd .rd-qr { display: inline-block; margin: 8px 0 0; padding: 10px; background: var(--wit); border: 1px solid var(--lijn); line-height: 0; }
.rd .rd-qr svg { display: block; width: 200px; height: 200px; }
.rd .rd-sleutel { display: block; margin-top: 6px; padding: 10px 12px; background: var(--vlak); border: 1px solid var(--lijn-zacht); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .06em; overflow-wrap: anywhere; }
.rd .rd-herstelcodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 8px 0 0; padding: 12px 14px; list-style: none; background: var(--let-op-vlak); border-left: 4px solid #D39A00; }
.rd .rd-herstelcodes li { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .08em; color: var(--inkt); }
.rd .rd-code { max-width: 13rem; font-size: 22px; letter-spacing: .2em; text-align: center; }
.rd .rd-tweefactor h1 { margin-bottom: 10px; }

/* Adressen uitsluiten (22 okt 2026): één stille regel; de keuze klapt open. */
.rd .rd-uitsluiten { width: 100%; }
.rd .rd-uitsluiten summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; color: var(--sub); list-style: none; }
.rd .rd-uitsluiten summary::-webkit-details-marker { display: none; }
.rd .rd-uitsluiten summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.rd .rd-uitsluiten[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.rd .rd-uitsluiten summary:hover { color: var(--inkt); text-decoration: underline; }
.rd .rd-uitsluiten summary span { color: var(--inkt); font-weight: 700; }
.rd .rd-uitsluiten__keuze { display: flex; flex-wrap: wrap; gap: 0 14px; padding-left: 2px; }