/* ══════════════════════════════════════════════════════════════════
   EuroActs — dashboard (15 sep 2026)

   Alles achter het inloggen staat op een LICHTE achtergrond met zwarte
   tekst. De rest van de site blijft precies zoals hij is: donker.

   Hoe dat kan zonder één regel van style.css aan te raken: die stylesheet
   is volledig var()-gedreven (--bg, --tekst, --rand, …). We zetten die
   variabelen hier opnieuw, maar alleen binnen `.ds`. Elke bestaande
   component — .paneel, .knop, .form-veld — wordt daarmee vanzelf licht,
   en buiten .ds verandert er niets. Eén scope, geen dubbele componenten
   die uit elkaar kunnen lopen.

   De header, de menu-overlay, de footer en de mobiele onderbalk komen uit
   dist/_chrome/{taal}.txt — dezelfde HTML als elke publieke pagina. Die
   blijft dus donker, en het lichte vlak zit ertussen.
   ══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────── 1. Scope en palet ──── */

.ds {
  /* Neutraal met een vleugje violet, zodat het licht is maar niet kil. */
  --bg: #f4f3f9;
  --bg-2: #ffffff;
  --bg-3: #efedf7;

  --tekst: #14121d;          /* bijna zwart — 16:1 op wit          */
  --tekst-2: #2a2740;
  --gedempt: #55526b;        /* 7,4:1 op wit                       */
  --gedempt-2: #55526b;
  --gedempt-3: #5f5c75;

  --violet: #7c3aed;
  --violet-diep: #5b21b6;
  --violet-tekst: #6025d0;   /* 6,5:1 op wit — links en accenten   */
  /* Goud is op wit als TEKST onleesbaar (#f0b429 haalt 1,9:1). Binnen het
     dashboard is --goud daarom de donkere variant: elke `color:var(--goud)`
     in de bestaande dashboardcode wordt daarmee vanzelf leesbaar. De gouden
     knop houdt zijn heldere verloop via de expliciete regel hieronder. */
  --goud: #a16207;           /* 4,9:1 op wit                       */
  --goud-licht: #c98a10;
  --goud-diep: #7c4a00;

  --rand: #e7e4f1;
  --rand-2: #e1ddef;
  --rand-sterk: #cec8e4;

  /* Eigen tokens voor de nieuwe dashboardonderdelen. */
  --ds-groen: #157f46;
  --ds-groen-vlak: #e9f7ef;
  --ds-rood: #b3261e;
  --ds-rood-vlak: #fdecea;
  --ds-amber: #8a5a00;
  --ds-amber-vlak: #fff6e2;
  --ds-schaduw: 0 1px 2px rgb(20 18 29 / .04), 0 8px 24px -12px rgb(20 18 29 / .16);
  --ds-schaduw-op: 0 2px 4px rgb(20 18 29 / .06), 0 14px 34px -14px rgb(20 18 29 / .22);
  --ds-kop-h: 70px;          /* de vaste site-header               */

  background: var(--bg);
  color: var(--tekst);
  /* GEEN ruimte voor de vaste header hier. Het chrome-fragment zet
     <main id="hoofd"> al onder de header (gemeten: main begint op y=70),
     dus een tweede keer 70px erbij gaf een gat van 95 px bovenaan — op een
     telefoon een leeg scherm waar de eerste kaart hoort te staan.
     --ds-kop-h blijft wél nodig: de tabrij plakt eraan vast, en die moet
     onder de header stoppen, niet eronder verdwijnen. */
  padding: 26px 0 72px;
  min-height: 60vh;
}
.ds a { color: var(--violet-tekst); }
.ds h1, .ds h2, .ds h3, .ds h4 { color: var(--tekst); }

.ds-binnen { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 18px; }

/* Bestaande componenten die een harde kleur droegen, lichter gezet.
   Specificiteit .ds X (0,2,0) wint van de site-regel (0,1,0). */
.ds .paneel { box-shadow: var(--ds-schaduw); border-radius: 18px; }
.ds .knop-stil { background: #fff; color: var(--tekst); border: 1px solid var(--rand-sterk); }
.ds .knop-stil:hover { background: var(--bg-3); border-color: var(--violet); color: var(--violet-diep); }
.ds .knop-spook { background: #fff; color: var(--violet-diep); border: 1.5px solid var(--violet); }
.ds .knop-spook:hover { background: #f5f0ff; }
.ds .knop-secundair { background: #f1eaff; color: var(--violet-diep); border: 1px solid #d9c9ff; }
.ds .knop-secundair:hover { background: #e8dcff; color: var(--violet-diep); border-color: var(--violet); }
.ds .knop-goud { background: linear-gradient(135deg, #ffd76a, #f0b429, #d99e12); color: #241a00; }
.ds .knop-goud:hover { background: linear-gradient(135deg, #ffe08a, #f5bd3c, #e0a51b); }
.ds .form-veld input[type="text"], .ds .form-veld input[type="email"],
.ds .form-veld input[type="tel"], .ds .form-veld input[type="url"],
.ds .form-veld input[type="password"], .ds .form-veld input[type="number"],
.ds .form-veld input[type="date"], .ds .form-veld input:not([type]),
.ds .form-veld select, .ds .form-veld textarea,
.ds input[type="email"], .ds input[type="text"], .ds input[type="url"] {
  color: var(--tekst); background: #fff; border: 1px solid var(--rand-sterk);
}
/* Een <input> ZONDER type-attribuut valt buiten de opsomming in style.css
   en stond daardoor als een piepklein kaal veldje in het dashboard — het
   naamveld van het widgetpaneel, de sitebouwer en het blogformulier. Op het
   donkere thema viel dat net zo min op; hier krijgt het dezelfde doos als
   elk ander veld. Alleen binnen .ds, dus de publieke site blijft zoals hij
   is. */
.ds .form-veld input:not([type]), .ds .form-veld input[type="search"] {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .96rem;
  border-radius: var(--r, 14px); outline: none;
}
.ds .form-veld input::placeholder, .ds .form-veld textarea::placeholder { color: #8b8799; }
.ds :is(input, select, textarea, button, a, summary):focus-visible {
  outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px;
}

/* ───────────────────────────────── 2. Welkomstkop ──── */

.ds-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #ffffff 0%, #f7f4ff 60%, #fdf6e8 100%);
  border: 1px solid var(--rand); border-radius: 22px;
  padding: 22px 24px; box-shadow: var(--ds-schaduw); margin-bottom: 18px;
}
.ds-hero-tekst { flex: 1 1 260px; min-width: 0; }
.ds-hero h1 { font-size: clamp(1.35rem, 3.2vw, 1.75rem); margin: 0 0 4px; line-height: 1.2; }
.ds-hero p { margin: 0; color: var(--gedempt); font-size: .93rem; word-break: break-word; }
.ds-hero-acties { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-hero-ring {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, var(--violet), var(--goud)); color: #fff;
  box-shadow: 0 6px 18px -8px rgb(124 58 237 / .7);
}
.ds-hero--klein { padding: 18px 22px; margin-bottom: 16px; }
.ds-hero--klein h1 { font-size: clamp(1.2rem, 2.8vw, 1.45rem); }

/* Alleen op mobiel: de zin die uitlegt dat je op een kop kunt tikken. Op
   een breed scherm staat alles al open en is de zin onzin. */
.ds-mobielhint { display: none; }
@media (max-width: 860px) {
  .ds-mobielhint:not([hidden]) {
    display: flex; gap: 8px; align-items: center;
    margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
    background: var(--bg-3); border: 1px solid var(--rand-2);
    color: var(--gedempt); font-size: .86rem; font-weight: 600;
  }
}

.dash-acties { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }

/* ───────────────────────────────── 3. Tabnavigatie ──── */
/* Eén rij die op mobiel horizontaal scrollt. Geen hamburger erbij: het
   dashboard heeft zes bestemmingen, dat past. */

.ds-nav {
  position: sticky; top: var(--ds-kop-h); z-index: 20;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  background: rgb(244 243 249 / .92); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand); margin: 0 0 20px; padding: 8px 0;
  scroll-snap-type: x proximity;
}
.ds-nav::-webkit-scrollbar { display: none; }
.ds-nav a {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .88rem; color: var(--gedempt);
  border: 1px solid transparent; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.ds-nav a:hover { background: #fff; color: var(--tekst); border-color: var(--rand-sterk); }
.ds-nav a[aria-current="true"] {
  background: var(--tekst); color: #fff; border-color: var(--tekst);
}
.ds-nav a[aria-current="true"]:hover { color: #fff; }

/* ───────────────────────────────── 4. Sectiekaart ──── */
/* <details> zodat het zonder JavaScript openstaat en met één tik dichtgaat.
   Op mobiel klapt app.js ze in, behalve de eerste. */

.ds-sectie {
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 20px;
  box-shadow: var(--ds-schaduw); margin: 0 0 16px; overflow: hidden;
}
.ds-sectie > summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px 20px; list-style: none; user-select: none;
}
.ds-sectie > summary::-webkit-details-marker { display: none; }
.ds-sectie > summary:hover { background: #faf9fd; }
.ds-sectie-icoon {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 20px;
  background: var(--bg-3); border: 1px solid var(--rand-2);
}
.ds-sectie-titel { flex: 1 1 auto; min-width: 0; }
.ds-sectie-titel b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.ds-sectie-titel span { display: block; color: var(--gedempt); font-size: .86rem; line-height: 1.45; }
.ds-sectie-pijl {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gedempt);
  background: var(--bg-3); transition: transform .22s ease;
}
.ds-sectie[open] > summary .ds-sectie-pijl { transform: rotate(180deg); }
.ds-sectie-in { padding: 2px 20px 22px; border-top: 1px solid var(--rand); padding-top: 18px; }
.ds-sectie-in > :first-child { margin-top: 0; }
.ds-sectie-in > :last-child { margin-bottom: 0; }
/* Binnen een sectiekaart is een .paneel geen tweede doos meer. */
.ds-sectie-in .paneel {
  background: #fbfaff; border-color: var(--rand-2); box-shadow: none;
  border-radius: 14px; padding: 18px;
}

/* ───────────────────────────────── 5. Uitleg ──── */
/* "Wat is dit en hoe gebruik ik het" — het verschil tussen een dashboard
   dat werkt en een dashboard dat begrepen wordt. */

.ds-uitleg {
  background: #f5f1ff; border: 1px solid #e2d8fb; border-left: 4px solid var(--violet);
  border-radius: 12px; padding: 14px 16px; margin: 0 0 16px;
  font-size: .9rem; line-height: 1.6; color: var(--tekst-2);
}
.ds-uitleg b { color: var(--tekst); }
.ds-uitleg ol, .ds-uitleg ul { margin: 8px 0 0; padding-left: 20px; }
.ds-uitleg li { margin: 4px 0; }
.ds-uitleg.ds-uitleg-goud { background: var(--ds-amber-vlak); border-color: #f0dcae; border-left-color: var(--goud-diep); }

/* ───────────────────────────────── 6. Schakelaar ──── */
/* Een echte aan/uit-schakelaar op een checkbox: werkt met toetsenbord,
   werkt zonder JavaScript, en is op een telefoon groot genoeg (44px). */

.ds-schakel {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--rand-2); border-radius: 14px;
  background: #fbfaff; margin: 0 0 10px; min-height: 44px;
}
.ds-schakel:hover { border-color: var(--rand-sterk); }
.ds-schakel input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-schuif {
  flex: none; width: 46px; height: 26px; border-radius: 999px; margin-top: 2px;
  background: #cdc9db; position: relative; transition: background .2s;
}
.ds-schuif::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s;
}
.ds-schakel input:checked + .ds-schuif { background: var(--ds-groen); }
.ds-schakel input:checked + .ds-schuif::after { transform: translateX(20px); }
.ds-schakel input:focus-visible + .ds-schuif { outline: 3px solid var(--violet); outline-offset: 2px; }
.ds-schakel-tekst { min-width: 0; }
.ds-schakel-tekst b { display: block; font-size: .95rem; font-weight: 700; }
.ds-schakel-tekst span { display: block; color: var(--gedempt); font-size: .85rem; line-height: 1.5; }

/* ───────────────────────────────── 7. Profielkaart ──── */

.ds-profiel {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px;
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 18px;
  padding: 18px; box-shadow: var(--ds-schaduw); margin: 0 0 14px;
}
.ds-profiel-foto {
  width: 92px; height: 92px; border-radius: 15px; background: var(--bg-3) center/cover no-repeat;
  border: 1px solid var(--rand-2); display: grid; place-items: center; font-size: 30px;
}
.ds-profiel h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.ds-profiel-meta { margin: 3px 0 0; color: var(--gedempt); font-size: .9rem; }
.ds-profiel-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: .86rem; font-weight: 700; word-break: break-all;
}

.ds-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ds-chip {
  font-size: .73rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--rand-sterk); color: var(--gedempt); background: #fff;
}
.ds-chip.groen { background: var(--ds-groen-vlak); border-color: #b7e3c9; color: var(--ds-groen); }
.ds-chip.goud  { background: var(--ds-amber-vlak); border-color: #f0dcae; color: var(--ds-amber); }
.ds-chip.wacht { background: #f3eeff; border-color: #ddd0fa; color: var(--violet-diep); }
.ds-chip.rood  { background: var(--ds-rood-vlak); border-color: #f3c6c2; color: var(--ds-rood); }

/* ───────────────────────────────── 8. Meldingen ──── */

.ds-melding {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #b7e3c9; background: var(--ds-groen-vlak); color: var(--ds-groen);
  border-radius: 14px; padding: 13px 16px; margin: 0 0 16px; font-weight: 600; font-size: .94rem;
}
.ds-melding.ds-fout { border-color: #f3c6c2; background: var(--ds-rood-vlak); color: var(--ds-rood); }
.ds-melding.ds-let  { border-color: #f0dcae; background: var(--ds-amber-vlak); color: var(--ds-amber); }
/* De dashboardpagina's gebruikten .dash-melding; zelfde uiterlijk. */
.ds .dash-melding { border: 1px solid #b7e3c9; background: var(--ds-groen-vlak); color: var(--ds-groen);
  border-radius: 14px; padding: 13px 16px; margin: 0 0 16px; font-weight: 600; }
.ds .dash-fout { border-color: #f3c6c2; background: var(--ds-rood-vlak); color: var(--ds-rood); }

/* ───────────────────────────────── 9. Tegels en lijsten ──── */

.ds-tegels { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 16px; }
.ds-tegel {
  background: var(--bg-2); border: 1px solid var(--rand); border-radius: 15px; padding: 15px 16px;
}
.ds-tegel dt { font-size: .78rem; font-weight: 700; color: var(--gedempt); letter-spacing: .03em; text-transform: uppercase; }
.ds-tegel dd { margin: 5px 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.ds-tegel dd small { display: block; font-size: .8rem; font-weight: 600; color: var(--gedempt); margin-top: 3px; }

.ds-leeg {
  text-align: center; padding: 28px 18px; color: var(--gedempt);
  background: #fbfaff; border: 1px dashed var(--rand-sterk); border-radius: 15px; font-size: .93rem;
}
.ds-leeg-icoon { font-size: 30px; display: block; margin-bottom: 8px; }

.ds-aanvraag { border-bottom: 1px solid var(--rand); padding: 14px 0; }
.ds-aanvraag:first-child { padding-top: 0; }
.ds-aanvraag:last-child { border-bottom: 0; padding-bottom: 0; }
.ds-aanvraag b { color: var(--tekst); }
.ds-aanvraag p { margin: 5px 0 0; color: var(--gedempt); font-size: .91rem; }

/* ────────────────────────── 9b. Wat eraan komt ──── */
/* Staat op de plek waar eerst het aantal aanvragen stond. Een kaart, geen
   tegel: het is geen cijfer maar een vooruitblik, en die mag ruimte hebben.
   Wel bewust rustig — hij staat bóven het eigenlijke werk, dus hij mag het
   niet overschreeuwen. */

.ds-bk {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f6f1ff 45%, #fff6e4 100%);
  border: 1px solid var(--rand-sterk); border-radius: 20px;
  padding: 22px 24px; margin: 0 0 18px; box-shadow: var(--ds-schaduw);
}
/* Gouden haarlijn bovenaan, dezelfde als de header van de site. */
.ds-bk::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--violet), #f0b429 60%, var(--violet));
}
.ds-bk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--violet-diep); background: #efe6ff; border: 1px solid #d9c9ff;
  border-radius: 999px; padding: 5px 12px;
}
.ds-bk h2 { margin: 12px 0 6px; font-size: clamp(1.15rem, 2.6vw, 1.42rem); line-height: 1.25; }
.ds-bk-lead { margin: 0 0 16px; color: var(--gedempt); font-size: .95rem; max-width: 60ch; }
/* Vier punten, dus bewust twee kolommen en niet auto-fit: die maakte er op
   een laptop 3 + 1 van, met een gat naast de laatste. */
.ds-bk-punten {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) { .ds-bk-punten { grid-template-columns: 1fr; } }
.ds-bk-punten li {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgb(255 255 255 / .72); border: 1px solid var(--rand-2);
  border-radius: 13px; padding: 11px 13px;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
}
.ds-bk-punten li span { font-size: 17px; line-height: 1.3; flex: none; }
.ds-bk-voet {
  margin: 16px 0 0; padding-top: 13px; border-top: 1px solid var(--rand);
  color: var(--gedempt); font-size: .86rem;
}

/* ───────────────────────────────── 10. Codeblok ──── */

.ds-code {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.55;
  background: #f7f6fb; color: #1d1b2b; border: 1px solid var(--rand-sterk);
  border-radius: 12px; padding: 12px 14px; resize: vertical;
}
.ds-code:focus { outline: 3px solid var(--violet); outline-offset: 1px; }
.ds-veldkop { display: block; font-weight: 700; font-size: .85rem; color: var(--gedempt); margin: 0 0 6px; }
.ds-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ds-rij-eind { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* ───────────────────────────────── 11. Compleetheidsbalk ──── */

.ds .compleet { margin-top: 10px; }
.ds .compleet-kop { font-size: .9rem; color: var(--tekst); }
.ds .compleet-balk { height: 9px; border-radius: 999px; background: #e6e3f0; overflow: hidden; margin: 6px 0 0; }
.ds .compleet-balk span { display: block; height: 9px; border-radius: 999px; transition: width .4s; }
.ds .compleet-lijst { list-style: none; margin: 0; padding: 0; font-size: .88rem; line-height: 1.5; }
.ds .compleet-lijst li { margin: 3px 0; }
.ds .compleet-lijst a { color: var(--violet-tekst); font-weight: 700; }
.ds .compleet-lijst span { color: var(--gedempt); }

/* ───────────────────────────────── 12. Agenda (licht) ──── */
/* De maandkalender brengt zijn eigen donkere <style> mee; deze regels
   staan met .ds ervoor en winnen daarom op specificiteit. */

.ds .ag-kop b { color: var(--tekst); }
.ds .ag-nav button { background: #fff; border: 1px solid var(--rand-sterk); color: var(--tekst); }
.ds .ag-nav button:hover { border-color: var(--violet); color: var(--violet-diep); }
.ds .ag-legenda { color: var(--gedempt); }
.ds .ag-raster .ag-dag { color: var(--gedempt); }
.ds .ag-cel { border: 1px solid var(--rand-2); background: #fff; color: var(--tekst); }
.ds .ag-cel.bezet { background: #fbdedb; border-color: #e88b83; }
.ds .ag-cel.optie { background: #fdf0cf; border-color: #e5bf62; }
.ds .ag-cel.ical::after { background: var(--violet); }
.ds .ag-cel.vandaag { box-shadow: 0 0 0 2px var(--violet) inset; }
.ds .ag-cel.gewijzigd { outline: 2px dashed var(--violet); outline-offset: -3px; }
.ds .ag-cel.verleden { opacity: .45; }

/* ───────────────────────────────── 13. Pakketkeuze ──── */

.ds .pakket-kies label {
  border: 1px solid var(--rand-sterk); background: #fff; border-radius: 14px;
  padding: 14px; transition: border-color .18s, background .18s;
}
.ds .pakket-kies label:hover { border-color: var(--violet); background: #faf7ff; }
.ds .pakket-kies input:checked + span { color: var(--violet-diep); }
.ds .pakket-kies label:has(input:checked) { border-color: var(--violet); background: #f5f0ff; box-shadow: 0 0 0 3px rgb(124 58 237 / .12); }

/* ─────────────────────────── 13b. WhatsApp op het profiel ──── */
/* Eén blok met nummer + schakelaar, zodat de aan/uit-keuze visueel aan het
   veld vastzit waar hij van afhangt. De schakelaar staat uit en is
   uitgeschakeld zolang er geen nummer is — app.js regelt dat. */

.ds-wa {
  border: 1px solid #b7e3c9; background: linear-gradient(180deg, #f2fbf5, #ffffff);
  border-radius: 16px; padding: 16px 18px; margin: 0 0 20px;
}
.ds-wa h3 { margin: 0 0 5px; font-size: 1.02rem; }
.ds-wa-uit { margin: 0 0 14px; color: var(--gedempt); font-size: .9rem; }
.ds-wa .form-veld { margin-bottom: 12px; }
.ds-wa-leeg { margin: 8px 0 0; color: var(--ds-amber); font-size: .86rem; font-weight: 600; }
.ds-wa .ds-schakel[aria-disabled="true"] { opacity: .55; }
.ds-hint { display: block; margin-top: 5px; color: var(--gedempt); font-size: .83rem; }

/* .pakket-kies heeft nergens anders een basis: de pakketkeuze staat alleen in
   dit scherm. Het zijn er twee (Nationaal en Internationaal) — plus een derde
   label als dit profiel nog een pakket draagt dat niet meer wordt aangeboden,
   zoals 'gratis'. auto-fit hieronder vangt allebei op. */
.ds .pakket-kies { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ds .pakket-kies label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ds .pakket-kies input { accent-color: var(--violet); width: 18px; height: 18px; flex: none; }
.ds .pakket-kies span { font-weight: 700; }

/* ───────────────────────────────── 14. Terug-link ──── */

.ds-terug {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-weight: 700; font-size: .9rem; text-decoration: none;
}
.ds-terug:hover { text-decoration: underline; }

/* ───────────────────────────────── 15. Inlogkaart ──── */
/* Inloggen, wachtwoord vergeten, account maken: één smalle kaart midden
   in het lichte vlak. */

/* Zonder het chrome-fragment staat er geen vaste header boven het
   dashboard; dan hoeft er ook geen ruimte voor te worden vrijgehouden. */
.ds-kaal { padding-top: 18px; }
.ds-kaal .ds-nav { top: 0; }

.ds-smal { max-width: 460px; margin: 0 auto; }
.ds-smal .paneel { padding: 28px 24px; }
.ds-smal h1 { font-size: 1.45rem; margin: 0 0 6px; }

/* ───────────────────────────────── 16. Mobiel ──── */

@media (max-width: 760px) {
  .ds { padding-top: 16px; padding-bottom: calc(var(--bodem-h, 64px) + 40px); }
  .ds-binnen { padding: 0 14px; }
  .ds-hero { padding: 18px; border-radius: 18px; gap: 14px; }
  .ds-hero-acties { width: 100%; }
  .ds-hero-acties .knop { flex: 1 1 140px; }
  .ds-nav { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .ds-sectie > summary { padding: 15px 16px; gap: 12px; }
  .ds-sectie-in { padding: 16px 16px 20px; }
  .ds-sectie-in .paneel { padding: 14px; }
  .ds-profiel { grid-template-columns: 64px 1fr; gap: 14px; padding: 15px; }
  .ds-profiel-foto { width: 64px; height: 64px; font-size: 24px; }
  .ds-tegel dd { font-size: 1.3rem; }
  .ds-bk { padding: 18px; border-radius: 18px; }
  .ds-bk-punten { gap: 8px; }
}
@media (max-width: 420px) {
  .ds-sectie-icoon { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
  .ds-sectie-titel b { font-size: .98rem; }
  .ds-sectie-titel span { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-sectie-pijl, .ds-schuif, .ds-schuif::after, .ds .compleet-balk span { transition: none; }
}

/* ───────────────────────────── 17. Websitebouwer (licht) ──── */
/* /account/website brengt een eigen <style> mee met donkere kleuren.
   Deze regels staan met .ds ervoor en winnen op specificiteit. */

.ds .wb-branche-in { border: 1px solid var(--rand-sterk); background: #fff; }
.ds .wb-branche-in b { color: var(--tekst); }
.ds .wb-branche input:checked + .wb-branche-in {
  border-color: var(--violet); background: #f5f0ff; box-shadow: 0 0 0 3px rgb(124 58 237 / .14);
}
.ds .wb-status { border: 1px solid var(--rand-sterk); color: var(--gedempt); background: #fff; }
.ds .wb-status.live { border-color: #b7e3c9; background: var(--ds-groen-vlak); color: var(--ds-groen); }
.ds .wb-sectie-blok { border: 1px solid var(--rand-2); background: #fbfaff; }
.ds .wb-verwijder { background: #fff; border: 1px solid #f3c6c2; color: var(--ds-rood); }
.ds .wb-stat { border: 1px solid var(--rand-2); background: #fbfaff; }
.ds .wb-stat b { color: var(--tekst); }

/* 13. "Website live zetten" — een <details> waarvan de summary een knop is.
   Bewust geen JavaScript: zonder script klapt hij precies zo open. */
.ds details.ds-live > summary { list-style: none; display: inline-block; cursor: pointer; }
.ds details.ds-live > summary::-webkit-details-marker { display: none; }
.ds details.ds-live > summary::marker { content: ""; }
.ds details.ds-live[open] > summary { opacity: .55; }