@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/ibm-plex-sans-var.woff2") format("woff2"); }

/* Colson IT, printable price list. One A4 landscape page, same type and colours as the site.
   Generated content: build.mjs. PDF: tools/make-pdf.mjs */


:root {
  --dark: #16181D; --blue: #1F3FBF; --blue-tint: #F0F3FC;
  --orange: #C93C1E;
  --tint: #F1F1EE; --ink: #16181D; --ink-2: #3A3D45; --muted: #5C606A; --line: #E2E2DE;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #E8E8E4; color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: middle; }
.icon--terug { transform: rotate(180deg); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- screen chrome */
.scherm-balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 297mm; margin: 0 auto; padding: 20px 12px; font-size: 15px;
}
.terug { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--blue); font-weight: 600; text-decoration: none; }
.terug:hover { text-decoration: underline; }
.scherm-acties { display: flex; flex-wrap: wrap; gap: 8px; }
.knop {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px;
  border: 0; background: #EEEEEA; color: var(--ink);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.2s;
}
.knop:hover { background: #E3E3DE; }
.knop--primair { background: var(--blue); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(17, 19, 24, 0.18); }
.knop--primair:hover { background: #1C3AB0; }
.knop[hidden] { display: none; }
.sheet-wrap { position: relative; overflow-x: auto; padding: 0 12px 40px; }

/* ---------- the sheet */
.sheet {
  width: 297mm; min-height: 210mm; margin: 0 auto; padding: 10mm 11mm 9mm;
  background: #fff; border-radius: 4px; box-shadow: 0 20px 50px -30px rgba(22, 24, 29, 0.45);
  font-size: 8.4pt; line-height: 1.35; display: flex; flex-direction: column; gap: 5mm;
}

.pt-kop { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 7mm; padding-bottom: 4.5mm; border-bottom: 0.3mm solid var(--ink); position: relative; }
.pt-kop::after { content: ""; position: absolute; left: 0; bottom: -0.3mm; width: 38mm; height: 1.06mm; background: var(--orange); }
.pt-logo { height: 22mm; width: auto; display: block; }
.pt-titel h1 { font: 600 20pt/1.1 var(--sans); letter-spacing: -0.01em; margin: 0 0 2mm; }
.pt-geldig { margin: 0; font: 400 9pt/1 var(--sans); color: var(--muted); }
.pt-geldig time { color: var(--ink); }
.pt-adres { font-style: normal; text-align: right; font-size: 8pt; line-height: 1.55; color: var(--ink-2); }
.pt-adres strong { font-weight: 600; font-size: 9.5pt; color: var(--ink); }

/* main table */
.pt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.pt th, .pt td { padding: 1.3mm 2.2mm; border-bottom: 0.2mm solid var(--line); text-align: left; vertical-align: middle; }
.pt td { font-variant-numeric: tabular-nums; }
.pt tbody th, .pt tfoot th { font-weight: 600; width: 44mm; }
.pt .rij-groep th { font: 600 7.6pt/1 var(--sans); color: var(--muted); border-bottom: 0; padding-bottom: 1.6mm; }
.pt .rij-groep th + th { box-shadow: inset 0.2mm 0 0 var(--line); }
.pt .rij-groep td { border-bottom: 0; }
.pt .rij-plan th { background: var(--dark); color: #fff; font: 600 9pt/1.2 var(--sans); padding-block: 2.4mm; border-bottom: 0; }
.pt .rij-plan th:first-child { border-radius: 1.5mm 0 0 1.5mm; color: rgba(255, 255, 255, 0.7); }
.pt .rij-plan th:last-child { border-radius: 0 1.5mm 1.5mm 0; }
.pt .rij-plan th.is-featured { background: var(--blue); }
.pt tbody .is-featured, .pt tfoot .is-featured { background: var(--blue-tint); }
.pt .w { display: inline-flex; align-items: center; gap: 1mm; }
.pt .w--num { font-weight: 600; }
.pt .w--ja { color: var(--blue); }
.pt .w--ja .icon { width: 3.8mm; height: 3.8mm; stroke-width: 2.6; }
.pt .w--nee { color: var(--muted); font-size: 7.4pt; }
.pt .w--nee .icon { width: 2.6mm; height: 2.6mm; }
.pt tfoot th, .pt tfoot td { border-bottom: 0; }
.pt .rij-prijs--excl th, .pt .rij-prijs--excl td { border-top: 0.3mm solid var(--ink); padding-top: 2.2mm; }
.pt .rij-prijs--excl td { font: 600 12.5pt/1 var(--sans); letter-spacing: -0.01em; }
.pt .rij-prijs--incl td { color: var(--muted); font: 400 8pt/1.2 var(--sans); }
.pt .rij-prijs--incl th { font-weight: 400; color: var(--muted); }

/* bottom row: domains, options, notes */
.pt-onder { display: grid; grid-template-columns: 1fr 1.25fr 1.35fr; gap: 7mm; align-items: start; margin-top: auto; }
.pt-mini { width: 100%; border-collapse: collapse; }
.pt-mini th, .pt-mini td { padding: 1.3mm 2mm 1.3mm 0; border-bottom: 0.2mm solid var(--line); text-align: left; }
.pt-mini thead th { font: 600 7.6pt/1 var(--sans); color: var(--muted); border-bottom: 0.3mm solid var(--ink); white-space: nowrap; }
.pt-mini thead th:first-child { font: 600 10pt/1 var(--sans); color: var(--ink); }
.pt-mini tbody th { font-weight: 600; }
.pt-mini td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-mini td:nth-child(2) { font-weight: 600; }
.pt-mini td:nth-child(3) { color: var(--muted); }
.pt-mini .per { font-weight: 400; color: var(--muted); }
.pt-voetnoten { list-style: none; margin: 0; padding: 2.5mm 3mm; background: var(--tint); border-radius: 2mm; display: grid; gap: 1.2mm; font-size: 7.6pt; color: var(--ink-2); }
.pt-voetnoten li { position: relative; padding-left: 3mm; }
.pt-voetnoten li::before { content: ""; position: absolute; left: 0; top: 1.5mm; width: 1mm; height: 1mm; border-radius: 50%; background: var(--muted); }

/* ---------- print */
@page { size: A4 landscape; margin: 0; }
@media print {
  body { background: #fff; }
  .scherm-balk { display: none !important; }
  .sheet-wrap { padding: 0; overflow: visible; }
  .sheet { box-shadow: none; border-radius: 0; margin: 0; width: 297mm; height: 210mm; min-height: 0; overflow: hidden; break-inside: avoid; }
}