/* ============================================================
   PRIJZENPAGINA
   Toegevoegd 06-08-2026. De knop "Bekijk alle prijzen" ging tot dan naar
   /reparatie, waar alleen reparaties stonden; mods en verzendkosten waren
   nergens naast elkaar te zien.

   Opzet: twee tabellen (reparaties, mods) met de DualSense en de Edge naast
   elkaar. Op mobiel klapt elke rij om naar een blokje met labels ervoor,
   zodat er nooit horizontaal gescrold hoeft te worden.
   ============================================================ */

.prijzen {
  padding-top: calc(var(--nav-h, 84px) + var(--s-7));
  padding-bottom: var(--s-9);
}

/* ---- Kop ---- */
.prijzen__head {
  max-width: 62ch;
  margin-bottom: var(--s-5);
}
.prijzen__head h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  margin: var(--s-3) 0 var(--s-4);
  text-wrap: balance;
}
.prijzen__lead {
  color: var(--c-text-dim);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  margin-bottom: var(--s-5);
}
.prijzen__usp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.prijzen__usp li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.prijzen__usp li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-red);
  flex: 0 0 6px;
}

.prijzen__start {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.prijzen__start .btn { min-height: 48px; }
.prijzen__start .btn svg { width: 18px; height: 18px; }
.prijzen__start > span { max-width: 38ch; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.45; }

@media (max-width: 620px) {
  .prijzen__start { align-items: stretch; flex-direction: column; }
  .prijzen__start .btn { width: 100%; justify-content: center; }
}

/* ---- Secties ---- */
.prijzen__blok { margin-bottom: var(--s-8); }
.prijzen__blok h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--s-2);
}
.prijzen__blok-lead {
  color: var(--c-text-dim);
  max-width: 64ch;
  margin-bottom: var(--s-5);
}

.prijzen__noscript {
  padding: 14px 16px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text-dim);
  margin-bottom: var(--s-6);
}

/* ---- Tabel ---- */
.prijstabel-wrap { overflow-x: auto; }
.prijstabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prijstabel thead th {
  text-align: left;
  padding: 0 var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--c-border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-reg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.prijstabel tbody th,
.prijstabel tbody td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  color: var(--c-text-dim);
  font-weight: var(--fw-reg);
  text-align: left;
}
.prijstabel .num,
.prijstabel td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--c-text);
}
.prijstabel tbody th { padding-right: var(--s-5); }
.prijstabel__naam {
  display: block;
  color: var(--c-text);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  margin-bottom: 3px;
}
.prijstabel__desc {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
  max-width: 46ch;
}
.prijstabel__toeslag {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.prijstabel__nvt,
.prijstabel__onbekend {
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.prijstabel__laden {
  padding: var(--s-6) 0;
  color: var(--c-text-muted);
  text-align: center;
}

/* Beschikbaarheid. Kleur is nooit het enige signaal — de tekst zegt het ook,
   voor wie kleuren niet goed onderscheidt. */
.vrd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  white-space: nowrap;
}
.vrd::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 7px;
}
.vrd--ja::before       { background: #3ddc84; }
.vrd--beperkt::before  { background: var(--c-warning, #f59e0b); }
.vrd--aanvraag::before { background: var(--c-text-muted); }
.vrd--nee::before      { background: var(--c-red-dark, #cc0000); }
.vrd--ja       { color: #7fe3ab; }
.vrd--beperkt  { color: #f0bd63; }
.vrd--aanvraag { color: var(--c-text-muted); }
.vrd--nee      { color: #ff9b9b; }
.vrd__aantal {
  color: var(--c-text-muted);
  font-size: 11px;
}

/* ---- Verzendkaarten ---- */
.verzendkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.verzendkaart {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-2, rgba(18,18,20,.78));
}
.verzendkaart h3 {
  font-size: var(--fs-base);
  margin-bottom: var(--s-2);
  color: var(--c-text);
}
.verzendkaart p {
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  margin: 0;
}
.verzendkaart strong { color: var(--c-text); }
.verzendkaart__prijs {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-text) !important;
  margin-bottom: var(--s-3) !important;
}
.verzendkaart__prijs span {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
/* De kaart die geld kost krijgt de nadruk — dat is het punt dat klanten
   eerder misten. De gratis optie krijgt een groene rand als tegenhanger. */
.verzendkaart--let-op {
  border-color: var(--c-border-red, rgba(255,0,0,.45));
  background: linear-gradient(180deg, rgba(255,0,0,.06), rgba(18,18,20,.78));
}
.verzendkaart--gratis { border-color: rgba(61, 220, 132, .32); }

.prijzen__voetnoot {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  max-width: 72ch;
}

/* ---- Uitleg ---- */
.prijzen__uitleg { max-width: 72ch; }
.prijzen__uitleg dt {
  color: var(--c-text);
  font-weight: var(--fw-semi);
  margin-top: var(--s-4);
}
.prijzen__uitleg dt:first-child { margin-top: 0; }
.prijzen__uitleg dd {
  margin: 6px 0 0;
  color: var(--c-text-dim);
  line-height: var(--lh-base);
}

/* ---- Slot ---- */
.prijzen__cta {
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--grad-surface, rgba(14,14,16,.8));
  text-align: center;
}
.prijzen__cta h2 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.prijzen__cta p { color: var(--c-text-dim); margin-bottom: var(--s-5); }
.prijzen__cta-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MOBIEL — tabel omklappen naar blokken
   Vijf kolommen passen niet op een telefoon. In plaats van horizontaal
   scrollen wordt elke rij een kaartje met het kolomlabel ervoor.
   ============================================================ */
@media (max-width: 760px) {
  .prijstabel thead { display: none; }
  .prijstabel,
  .prijstabel tbody,
  .prijstabel tr,
  .prijstabel tbody th,
  .prijstabel tbody td { display: block; width: 100%; }

  .prijstabel tr {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--c-surface-1, rgba(14,14,16,.72));
  }
  .prijstabel tbody th,
  .prijstabel tbody td {
    border-bottom: 0;
    padding: 0;
  }
  .prijstabel tbody th { margin-bottom: var(--s-3); padding-right: 0; }
  .prijstabel__desc { max-width: none; }

  /* Label ervoor, waarde erachter. */
  .prijstabel tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 7px 0;
    border-top: 1px solid var(--c-border);
  }
  .prijstabel tbody td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-text-muted);
  }
  .prijstabel__laden { border-top: 0 !important; display: block !important; }

  .prijzen { padding-top: calc(var(--nav-h, 64px) + var(--s-5)); }
  .prijzen__head h1 { font-size: var(--fs-2xl); }
}