:root {
  --gold: #FFC300;
  --gold-dark: #bd9530;
  --wine: #5F021F;
  --beige: #E3D3A6;
  --cream: #FAF3E0;
  --ink: #262626;
  --gray: #595959;
  --line: #E8DCC0;
}

* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink);
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #fffdf8;
  display: flex; min-height: 100vh; flex-direction: column;
}

/* header */
.hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  background: #fff;
}
.hdr__logo { width: 52px; height: 52px; }
.hdr__brand {
  font-family: 'Marcellus SC', serif; font-size: 1.25rem; color: var(--wine);
  letter-spacing: .4px;
}
.hdr__tagline {
  font-family: 'Dancing Script', cursive; font-size: 1.05rem; color: var(--beige);
}

/* layout */
.wrap { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 18px 40px; }
.ftr {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  padding: 16px; border-top: 1px solid var(--line);
  font-family: 'Marcellus', serif; font-size: .78rem; letter-spacing: .4px;
  color: var(--gray); text-transform: uppercase; background: #fff;
}

/* typografie */
h1 { font-family: 'Marcellus SC', serif; font-weight: 400; color: var(--gold-dark); font-size: 1.7rem; margin: .2em 0 .4em; }
h2 { font-family: 'Marcellus SC', serif; font-weight: 400; color: var(--gold-dark); font-size: 1.25rem; margin: 0 0 .5em; }
.lead { font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.muted { color: var(--gray); font-size: .9rem; }

/* kaarten */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(95, 2, 31, .04);
}
.card h2 { display: flex; align-items: center; gap: 8px; }

/* flash */
.flash { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .95rem; }
.flash--ok { background: #f3efe2; border: 1px solid var(--beige); color: #6b5b1e; }
.flash--fout { background: #fbeaea; border: 1px solid #e6b8b8; color: var(--wine); }

/* formulieren */
label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: .92rem; color: var(--wine); }
input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; background: #fffdf8;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.fout-tekst { color: var(--wine); font-size: .85rem; margin-top: 3px; }

.btn {
  display: inline-block; margin-top: 14px; padding: 11px 26px;
  background: var(--wine); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: #7a0f31; }
.btn--licht { background: var(--gold-dark); }
.btn--klein { padding: 7px 18px; font-size: .88rem; margin-top: 8px; }

/* pill-knoppen (flessen / frequentie).
   Keuze ≠ actie (Koen 15-08): een geselecteerde pill is een stánd en mag er
   niet uitzien als de bevestig-knop — die blijft als enige massief bordeaux. */
.tiers, .pillrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tiers input, .pillrow input { display: none; }
.tiers label, .pill {
  margin: 0; padding: 10px 19px; border: 0; border-radius: 999px;
  cursor: pointer; font-weight: 600; color: var(--gray); background: #fff;
  box-shadow: 0 1px 5px rgba(95, 2, 31, .10); transition: .12s;
}
.tiers input:checked + label, .pillrow input:checked + .pill {
  color: var(--wine); background: var(--cream);
  box-shadow: inset 0 0 0 2px var(--wine);
  font-weight: 700;
}
.tiers input:checked + label::before,
.pillrow input:checked + .pill::before { content: "✓ "; }
/* volumebonus op de flessenkeuze: een klein goud label achter het aantal,
   zodat 9 en 12 zichtbaar meer opleveren zonder de rij onrustig te maken */
.pill__bonus {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  border-radius: 999px; background: var(--gold, #c7a53f); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  vertical-align: 1px;
}
.bonus-regel {
  display: inline-block; margin-top: 5px; color: var(--wine);
  font-size: .9rem; font-weight: 600;
}

/* smaak-chips — randloos; aan = cream + vinkje, uit = wit, geblokkeerd = doorgestreept */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips input { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 15px;
  border-radius: 999px; background: #fff; border: 0; color: var(--gray);
  font-weight: 600; cursor: pointer; user-select: none; transition: .12s; line-height: 1.2;
  box-shadow: 0 1px 5px rgba(95, 2, 31, .10);
}
.chip .ci { width: 19px; height: 19px; flex: none; fill: currentColor; }
.chip small { display: block; font-weight: 400; color: var(--gray); font-size: .74rem; line-height: 1.25; }
.chips input:checked + .chip {
  background: var(--cream); color: var(--wine);
  box-shadow: 0 2px 8px rgba(95, 2, 31, .16);
}
.chips input:checked + .chip::before {
  content: "✓"; font-weight: 700; color: var(--wine); margin-right: -2px;
}
.chip--type .ci { width: 22px; height: 22px; }
.chip--uit {
  opacity: .35; cursor: default; box-shadow: none; background: #f6f2e8;
  text-decoration: line-through; text-decoration-color: rgba(95, 2, 31, .4);
}
.chip--uit .ci { filter: grayscale(1); }
/* groepskopjes bij de stijlen */
.stijl-groep {
  display: flex; align-items: center; gap: 7px; margin: 14px 0 2px;
  font-weight: 700; font-size: .88rem; color: var(--ink);
}
.stijl-groep .muted { font-weight: 400; }
/* keuze-chips (jaar / akkoord) met zichtbaar vinkje */
.chip--keuze {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-top: 6px;
  border-radius: 12px; border: 1px solid #efe7d3; background: #fff; cursor: pointer;
  font-weight: 600; color: var(--ink);
}
.chip--keuze input { display: inline-block; width: auto; accent-color: var(--wine); margin-top: 2px; flex: none; }
.chip--keuze small { display: block; font-weight: 400; color: var(--gray); font-size: .82rem; }
.chip--keuze:has(input:checked) { border-color: var(--wine); background: var(--cream); }
.chip--fout { border-color: #e0a3a3; }
/* stijl-iconen gekleurd naar wit/rood-associatie */
.chip .ci--rood { fill: #9c1b2e; }
.chip .ci--wit  { fill: #c7a53f; }
.stijl-legenda { margin-top: 7px; font-size: .8rem; display: flex; align-items: center; gap: 2px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dot--wit { background: #c7a53f; }
.dot--rood { background: #9c1b2e; }

/* budget-slider */
.budget-row { display: flex; align-items: center; gap: 14px; }
input[type=range] { flex: 1; accent-color: var(--wine); }
.budget-val { font-weight: 700; color: var(--wine); min-width: 84px; text-align: left; }
.indicatie, .bedragbox, .voordeelbox {
  margin-top: 12px; padding: 12px 14px; background: var(--cream);
  border-radius: 10px; font-size: .95rem;
}
.indicatie b, .bedragbox b, .voordeelbox b { color: var(--wine); }
.voordeelbox ul { margin: 6px 0 0 18px; padding: 0; }
.voordeelbox li { margin-bottom: 3px; }

/* sterren (pure css, radio's) */
.sterren { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.sterren input { display: none; }
.sterren label {
  margin: 0; font-size: 1.5rem; color: #d9cfb4; cursor: pointer; padding: 0 1px;
}
.sterren input:checked ~ label,
.sterren label:hover, .sterren label:hover ~ label { color: var(--gold); }

/* leveringen */
.wijn-rij { padding: 14px 0; border-top: 1px solid var(--line); }
.wijn-rij:first-of-type { border-top: 0; }
.wijn-rij__naam { font-family: 'Marcellus', serif; font-size: 1.02rem; color: var(--ink); }
.wijn-rij__meta { font-size: .82rem; color: var(--gray); }
.beoordeeld { color: var(--gold-dark); font-size: .88rem; }

details.historie { margin-top: 6px; }
details.historie summary { cursor: pointer; font-weight: 600; color: var(--wine); padding: 6px 0; }
.historie-maand { font-family: 'Marcellus SC', serif; color: var(--gold-dark); margin: 12px 0 2px; }

/* dripvraag */
.vraag-opties { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vraag-opties label {
  margin: 0; font-weight: 500; color: var(--ink); display: flex; gap: 10px;
  align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 10px; cursor: pointer; background: #fff;
}
.vraag-opties input { accent-color: var(--wine); margin-top: 3px; }
.vraag-opties label:has(input:checked) { border-color: var(--wine); background: var(--cream); }

/* home hero */
.hero { text-align: center; padding: 26px 8px 8px; }
.hero .tagline-groot { font-family: 'Dancing Script', cursive; font-size: 2rem; color: var(--gold-dark); }
.usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0; }

/* stappen-balk aanmelden */
.stappen {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 18px;
  font-size: .82rem; color: var(--gray);
}
.stappen span { display: inline-flex; align-items: center; gap: 5px; }
.stappen b { color: var(--wine); }

/* adres */
.adres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* stille secundaire knop */
.btn--stil { background: #fff; color: var(--gray); border: 1px solid var(--line); }
.btn--stil:hover { background: var(--cream); color: var(--wine); }

/* vaste frequentie-pill (jaarabonnement) */
/* mini-toggles: het antwoord op de vraag die een klant bíj die plek heeft,
   uitklapbaar zodat de pagina rustig blijft (patroon Koen 15-08) */
.mini-toggle { margin-top: 8px; }
.mini-toggle summary { cursor: pointer; color: var(--wine); font-size: .9rem; font-weight: 600; }
.mini-toggle p, .mini-toggle form { margin: 6px 0 0; }

.pill--vast { padding: 9px 18px; border-radius: 999px; background: var(--cream);
  border: 1px solid var(--line); color: var(--gray); font-weight: 600; }
.pill--vast small { font-weight: 400; }

/* jaar-status banner */
.jaar-status { background: var(--cream); border: 1px solid var(--beige); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px; font-size: .95rem; line-height: 1.5; }
.jaar-status .muted { display: block; margin-top: 4px; }

/* rebuy-kaartje */
.rebuy-kaart { background: var(--cream); border: 1.5px solid var(--gold); border-radius: 10px;
  padding: 12px 14px; margin: 8px 0; font-size: .95rem; }

/* diagnosekaart: bij drie sterren of lager vragen we door (plan C, fase 2,
   taak D4). Zelfde kader als de rebuy-kaart hierboven -- het is dezelfde
   plek in de wijnrij en dezelfde toon (kort, vrijblijvend). */
.diagnose-kaart { background: var(--cream); border: 1.5px solid var(--gold); border-radius: 10px;
  padding: 12px 14px; margin: 8px 0; font-size: .95rem; }
.diagnose-vraag { margin: 10px 0 4px; }
.diagnose-opties { display: flex; flex-direction: column; gap: 4px; }
.diagnose-opties label { font-weight: normal; cursor: pointer; }

/* cadans: 'af en toe'-favoriet terug in de doos (plan C, fase 2). De forms
   zelf staan al op display:inline via hun eigen style-attribuut (zie
   dashboard.html); hier alleen de tussenruimte voor de knoppen. */
.cadans { margin-top: 8px; font-size: .95rem; }
.cadans .voordeel-link { margin: 0 0 0 10px; }

/* wijn-details / beschrijving */
.wijn-details summary { cursor: pointer; color: var(--wine); font-size: .9rem; margin-top: 4px; }
.wijn-details summary.wijn-rij__naam { color: var(--ink); font-size: 1.02rem; margin-top: 0; }
.beschrijving { margin-top: 8px; padding: 12px 14px; background: #fdfaf2; border: 1px solid var(--line);
  border-radius: 10px; font-size: .92rem; line-height: 1.5; }
.beschrijving p { margin: 0 0 8px; }
.beschrijving p:last-child { margin-bottom: 0; }
.beschrijving b { color: var(--wine); }

/* jaar-popup */
.voordeel-link { display: inline-block; margin-top: 8px; color: var(--wine); font-weight: 600; }
dialog {
  border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px;
  max-width: 560px; width: calc(100% - 40px); background: #fffdf8; color: var(--ink);
  box-shadow: 0 10px 40px rgba(95, 2, 31, .18);
}
dialog::backdrop { background: rgba(38, 22, 12, .45); }
dialog h2 { margin-top: 0; }

/* welkom */
.stappenlijst { margin: 0; padding-left: 20px; line-height: 1.7; }
.stappenlijst li { margin-bottom: 6px; }
.linkbox {
  display: inline-block; word-break: break-all; padding: 10px 14px; margin: 6px 0;
  background: var(--cream); border: 1px solid var(--line); border-radius: 8px;
  color: var(--wine); text-decoration: none; font-size: .9rem;
}

@media (max-width: 560px) {
  .hdr__tagline { display: none; }
  h1 { font-size: 1.4rem; }
  .adres-grid { grid-template-columns: 1fr; }
}

/* ---------- cockpit (/beheer) ---------- */
.kaart {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.kaart h2 {
  font-family: 'Marcellus', serif; color: var(--wine);
  font-size: 1.15rem; margin: 0 0 10px;
}
.kaart h3 {
  font-family: 'Marcellus', serif; font-size: 1rem;
  color: var(--ink); margin: 14px 0 6px;
}
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th, .tbl td {
  text-align: left; padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.tbl th { font-weight: 600; color: var(--gray); font-size: .85rem; }
.tbl tr:last-child td { border-bottom: none; }
.tbl a { color: var(--wine); }
.rij--laat td { background: #fbeaea; }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--beige);
  font-size: .75rem; color: var(--gray); vertical-align: middle;
}
.tag--betaald { background: #edf6ed; border-color: #bcd9bc; color: #2f6b2f; }
.tag--verzonden { background: #eef1f6; border-color: #c3cddd; color: #3a4b66; }
.tag--betaalverzoek { background: #fdf3e3; border-color: #e8cf9e; color: #8a6212; }
/* De cockpit is een werktafel: op een breed scherm mag hij breder dan de
   klantpagina's, anders passen de tabellen niet. */
body.cockpit .wrap { max-width: 1040px; }
.tag--gat { background: #fbeaea; border-color: #e6b8b8; color: #8a2020; }

/* ---------- actielijst bovenaan de cockpit (Koen 31-08) ----------
   Eén blok dat vertelt wat er vandaag moet gebeuren. De linkerrand draagt de
   urgentie: rood laat je niet liggen, goud is voor vandaag, grijs kan wachten.
   Kleur alléén zou te weinig zijn, dus 'nu' krijgt er een uitroepteken bij. */
.kaart--acties { border-color: #e6b8b8; }
.actie { padding: 9px 0 9px 12px; border-left: 3px solid var(--beige); }
.actie + .actie { border-top: 1px solid var(--line); }
.actie--nu { border-left-color: #b3261e; }
.actie--vandaag { border-left-color: var(--gold); }
.actie__kop { margin: 0; font-size: .98rem; }
.actie__kop a { color: var(--wine); font-weight: 600; }
.actie__bel { margin-right: 4px; }
.tbl--pick { margin: 7px 0 2px; font-size: .88rem; }
.tbl--pick th, .tbl--pick td { padding: 4px 10px 4px 0; }

/* startkeuze op het aanmeldformulier: twee opties met echte datums erbij */
.startkeuze { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.startkeuze__optie { display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border: 1px solid #e8dcc0; border-radius: 6px;
  background: #fff; cursor: pointer; }
.startkeuze__optie:has(input:checked) { border-color: var(--wine);
  box-shadow: 0 0 0 1px var(--wine) inset; }
.startkeuze__optie input { margin: 3px 0 0; }
.startkeuze__optie b { display: block; }
.startkeuze__optie .muted { display: block; font-size: .88rem; line-height: 1.5; }
.startkeuze__optie--uit { opacity: .55; cursor: not-allowed; }

/* -- statuskaart bovenaan het dashboard ----------------------------------- */
/* Alleen een openstaande betaling en een beëindigd abonnement krijgen nadruk.
   De rest is een rustige mededeling: er is niets te doen, dus schreeuw niet. */
.status__kop { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.status--betalen, .status--beeindigd { border-color: var(--gold); }
.status--betalen .status__kop { font-weight: 600; }

/* Kopjes bínnen een kaart; portal.css ging tot nu toe niet verder dan h2. */
h3 {
  font-family: 'Marcellus SC', serif; font-weight: 400;
  color: var(--gold-dark); font-size: 1.05rem; margin: 20px 0 .4em;
}

/* -- smaakstrook onder de wijnen ------------------------------------------ */
.smaakstrook { border-top: 1px dotted var(--line); margin-top: 16px; padding-top: 12px; }
/* alleen-lezen chips: geen hover/cursor die klikken suggereert, en de
   geselecteerde look van ".chips input:checked + .chip" met de hand
   gespiegeld - deze chips zijn losse <span>'s zonder <input> ernaast, dus
   die sibling-selector raakt ze niet vanzelf */
.chips--toon .chip {
  cursor: default; background: var(--cream); color: var(--wine);
  box-shadow: 0 2px 8px rgba(95, 2, 31, .16);
}
button.voordeel-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* -- dekkingsmelding onder de stijlkeuze ----------------------------------- */
.dekking-melding { margin: 8px 0 0; font-size: .92rem; }
.dekking-melding--waarschuw { color: var(--gold-dark); }

/* -- favorieten onder de smaakstrook -------------------------------------- */
.favorieten { border-top: 1px dotted var(--line); margin-top: 14px; padding-top: 12px; }
.favoriet-rij { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 4px 0; }
.favoriet-knop { margin-left: 8px; }
.dekking-melding--blok { color: #a03030; font-weight: 600; }