/*
  Design richting: Provisual-huisstijl (2026 rebrand) — fris blauw-naar-groen,
  gedeeld met de nieuwe website. Blauw (#0B84FF) blijft de primaire merkkleur
  voor acties/links/focus, groen (#22C55E) is het gradient-partnerkleur
  (--accent-2, al gebruikt in bestaande knop-gradients). Statuskleuren
  (succes/waarschuwing/fout) staan daar bewust los van, zodat "betaald"
  altijd zijn eigen groen blijft ongeacht de merkkleur.
*/

:root {
    --ink: #101828;
    --ink-soft: #3E4757;
    --paper: #F5F8FF;
    --panel: #ffffff;
    --line: #DCE4F2;

    --accent: #0B84FF;
    --accent-2: #22C55E;
    --accent-soft: #DCEBFF;

    --success: #16a34a;
    --success-soft: #e7f8ed;
    --warn: #ea9a1a;
    --warn-soft: #fef3e0;
    --danger: #ef4444;
    --danger-soft: #fdeaea;
    --focus: var(--accent);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-glow: 0 8px 20px rgba(11, 132, 255, 0.25);

    --radius-lg: 16px;
    --radius-md: 10px;

    --font-display: -apple-system, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body: -apple-system, 'SF Pro Text', 'Segoe UI', Arial, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Bredere variant voor pagina's met brede tabellen (bv. de rollen-matrix
   op gigs/faq.php) — anders moet je horizontaal scrollen om alle kolommen
   te zien. Alleen op de pagina's die 'm expliciet gebruiken, de rest van
   de site houdt de smallere, leesbaardere 900px. */
.shell--wide {
    max-width: 1180px;
}

/* --- Topbar --- */
.topbar {
    position: sticky;
    top: 0;
    /* Hoger dan .cart-summary op mobiel (z-index: 15, zie hieronder) — .topbar
       zet zelf een eigen stacking context neer (position:sticky + z-index),
       dus het dropdownmenu erin (.topbar nav, z-index: 20) werd alsnog door
       de winkelmand overlapt zolang .topbar zelf een lagere z-index had dan
       die winkelmand: bij een eigen stacking context telt voor vergelijking
       met elementen BUITEN die context alleen de z-index van de context zelf,
       niet die van kinderen erbinnen. */
    z-index: 25;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.topbar .shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-logo {
    height: 44px;
    width: auto;
    display: block;
}
.brand-tag {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    padding-left: 10px;
    border-left: 1px solid var(--line);
}
/* Nav zit altijd achter de menu-knop (zie .nav-toggle) — op elk schermformaat,
   niet alleen mobiel. Voorkomt dat de topbar dichtslibt naarmate er meer
   pagina's/links bijkomen. */
.topbar .shell { position: relative; }
.topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 24px;
    min-width: 200px;
    max-height: calc(100vh - 90px); /* fallback voor browsers zonder dvh-steun */
    max-height: calc(100dvh - 90px); /* correcte zichtbare hoogte, ook als de adresbalk in-/uitschuift (iOS Safari) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    margin-top: 8px;
    z-index: 20;
}
.topbar nav.nav-open { display: flex; }
.topbar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 7px;
    transition: color 0.15s ease, background 0.15s ease;
}
.topbar nav a:hover { color: var(--ink); background: var(--paper); text-decoration: none; }
.topbar nav a svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); transition: color 0.15s ease; }
.topbar nav a:hover svg { color: var(--accent); }
/* Groepslabels (bv. "Diensten"/"Account") en een scheidingslijn vóór
   Uitloggen — verdeelt een lange platte lijst in behapbare stukjes i.p.v.
   tien gelijkwaardig ogende regels onder elkaar. */
.topbar nav .nav-group-label {
    display: block;
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}
.topbar nav .nav-group-label:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.topbar nav a.nav-divider { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; border-radius: 0 0 7px 7px; }
/* Externe links (Moneybird/Mijn Host/LaPosta) openen in een nieuw tabblad
   — het ↗-merkje maakt dat vantevoren duidelijk i.p.v. dat je het pas na
   het klikken merkt. */
.topbar nav a.nav-ext::after { content: '↗'; margin-left: auto; font-size: 11px; color: var(--ink-soft); }

.nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 8px 14px 8px 10px;
    margin: 0 0 0 auto;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.nav-toggle:hover { border-color: var(--accent); background: var(--accent-soft); }
.nav-toggle svg { display: block; flex-shrink: 0; }

.topbar-search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 22vw, 280px);
    margin: 0;
}
.topbar-search input {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13.5px;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
}
.topbar-search input:focus { outline: none; border-color: var(--accent); }

.topbar-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 360px;
    overflow-y: auto;
    z-index: 30;
    text-align: left;
}
.topbar-search-results.open { display: block; }
.topbar-search-results .tsr-group-label {
    padding: 10px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}
.topbar-search-results a {
    display: block;
    padding: 7px 14px;
    margin: 0 6px;
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 7px;
}
.topbar-search-results a:hover { background: var(--paper); }
.topbar-search-results .tsr-empty,
.topbar-search-results .tsr-more {
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
}
.topbar-search-results .tsr-more { display: block; }

/* Zoekresultaten in /admin/handleiding.php — zelfde look als hierboven. */
.handleiding-search-hit { color: var(--ink); text-decoration: none; font-size: 13.5px; }
.handleiding-search-hit:hover { background: var(--paper); text-decoration: none; }

@media (max-width: 640px) {
    .topbar nav {
        left: 16px;
        right: 16px;
        min-width: 0;
    }
    /* Op mobiel is er geen ruimte voor het gecentreerde zoekveld naast logo
       + menuknop in één rij van 64px — i.p.v. het (zoals voorheen) helemaal
       te verbergen, krijgt de rij een tweede regel: logo + menuknop blijven
       op regel 1, het zoekveld valt op zijn volledige breedte naar regel 2.
       De "Beheer"-tag naast het logo (alleen in de adminnav) en een iets
       kleiner logo maken regel 1 smal genoeg om niet zelf ook al te wrappen
       — zonder die twee ruimte-ingrepen viel de menuknop óók naar een
       eigen regel, met een lelijk leeg gat ertussen. */
    .topbar .shell {
        flex-wrap: wrap;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        row-gap: 8px;
    }
    .brand-tag { display: none; }
    .brand-logo { height: 34px; }
    .topbar-search {
        display: block;
        /* relative (i.p.v. static) zodat .topbar-search-results — top:100%
           /left:0/right:0, absoluut gepositioneerd — nog steeds recht onder
           dit veld verschijnt i.p.v. onder de hele (nu tweeregelige) shell. */
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        order: 10;
        flex: 1 0 100%;
        width: 100%;
    }
}

/* --- Auth / login --- */
.auth-wrap {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(480px circle at 15% 20%, rgba(11, 132, 255, 0.13), transparent 60%),
        radial-gradient(520px circle at 85% 80%, rgba(34, 197, 94, 0.13), transparent 60%);
}
.auth-card {
    width: 100%;
    max-width: 380px;
    padding: 40px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
}
.auth-card h1 {
    font-family: var(--font-display);
    font-size: 23px;
    margin: 0 0 6px;
}
.auth-card p.lead {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0 0 24px;
}
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--ink);
}
input[type="email"], input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select, textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
/* Zonder dit valt elke <textarea> terug op de browser-default (~20 kolommen
   breed, 2 regels hoog) — ondanks width:100% hierboven, want dat wordt door
   het cols-attribuut/intrinsieke default overruled zonder expliciete
   min-height. */
textarea {
    min-height: 90px;
    resize: vertical;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
    background: var(--panel);
}

/* Radio-knoppen vierkant i.p.v. de native ronde vorm — consistent met
   checkboxes (die al vierkant zijn, browser-default). Alleen van
   toepassing op nog "kale" radio's zonder eigen custom-styled wrapper
   (bv. .plan-card/.ext-pill verbergen hun eigen radio al bewust). */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: border-color 0.12s ease, background 0.12s ease;
}
input[type="radio"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 1px;
}
button, .btn {
    display: inline-block;
    width: 100%;
    padding: 11px 16px;
    margin-top: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: center;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
button:hover, .btn:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
    text-decoration: none;
    opacity: 0.96;
}
button:active, .btn:active { transform: translateY(0); }
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.notice {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.notice.success { background: var(--success-soft); color: #0d5b2c; border-color: rgba(22, 163, 74, 0.15); }
.notice.error { background: var(--danger-soft); color: #9a2727; border-color: rgba(239, 68, 68, 0.15); }
.notice.info { background: var(--accent-soft); color: #0A6FDB; border-color: rgba(11, 132, 255, 0.15); }
.notice.warning { background: var(--warn-soft); color: #8a5c07; border-color: rgba(234, 154, 26, 0.2); }

/* --- Dashboard --- */
.page-header {
    padding: 36px 0 22px;
}
.page-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.page-header .sub {
    color: var(--ink-soft);
    font-size: 14px;
}

.status-strip {
    display: flex;
    gap: 12px;
    margin: 20px 0 32px;
    flex-wrap: wrap;
}
.status-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.status-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot.ok { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.panel-header {
    padding: 17px 22px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
}

.table-scroll {
    overflow-x: auto;
}
.table-scroll table {
    width: auto;
    min-width: 100%;
}
.table-scroll th, .table-scroll td {
    white-space: nowrap;
}

/* Zelfde als .table-scroll, maar zonder de geforceerde white-space:nowrap —
   voor tabellen met weinig, smalle kolommen (bv. admin/customers.php) waar
   die nowrap onnodig een horizontale scrollbalk triggerde: cellen mogen hier
   gewoon binnen hun kolom afbreken, overflow-x blijft alleen als vangnet. */
.table-wrap {
    overflow-x: auto;
}
.table-wrap td {
    overflow-wrap: break-word;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    font-weight: 600;
    padding: 12px 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
td {
    padding: 15px 22px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--paper); }
.mono { font-family: var(--font-body); }

.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge.paid { background: var(--success-soft); color: #0d5b2c; }
.badge.open { background: var(--warn-soft); color: #8a5c07; }
.badge.overdue { background: var(--danger-soft); color: #9a2727; }
.badge.neutral { background: var(--line); color: var(--ink-soft); }

/* Eigen tooltip (bv. productomschrijvingen op shop.php) i.p.v. de
   browser-native title="..." — die verschijnt pas na een vertraging en is
   makkelijk te missen. Direct zichtbaar zodra je over titel of icoontje
   hovert. */
.tooltip-wrap {
    position: relative;
    display: inline;
}
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
.tooltip-bubble {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    padding: 8px 30px 8px 12px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: max-content;
    max-width: 280px;
    z-index: 50;
}
.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap:focus-within .tooltip-bubble {
    display: block;
}
/* Vaste, ondubbelzinnige sluitknop — vooral op mobiel bedoeld, waar
   "ergens anders tikken om te sluiten" kwetsbaar bleek voor iOS-eigen-
   aardigheden rond klikken op elementen binnen een <label>. */
.tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.tooltip-close:hover { background: rgba(255, 255, 255, 0.28); }

.progress-track {
    background: var(--line);
    border-radius: 100px;
    height: 9px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), #22c55e);
    border-radius: 100px;
    transition: width 0.3s ease;
}
.progress-fill.warn { background: linear-gradient(90deg, var(--warn), #f5b942); }
.progress-fill.danger { background: linear-gradient(90deg, var(--danger), #f87171); }

.empty-state {
    padding: 44px 20px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
}

.impersonation-banner {
    background: linear-gradient(90deg, var(--warn), #f5b942);
    color: #4a3300;
    text-align: center;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
}
.impersonation-banner a {
    color: #4a3300;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 10px;
}

footer {
    border-top: 1px solid var(--line);
    padding: 28px 0 40px;
    margin-top: 40px;
}
.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    justify-content: space-between;
}
.footer-col {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.footer-col a { color: var(--ink-soft); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 13.5px;
    margin-bottom: 4px;
}
.footer-legal { text-align: right; }
@media (max-width: 640px) {
    .footer-legal { text-align: left; }
    /* Domeinnaam-invulveld + "Check beschikbaarheid"-knop naast elkaar
       knijpt het naamveld op mobiel te smal — onder elkaar, allebei
       volledige breedte, is dan duidelijker. */
    .domain-row { flex-direction: column; }
    .domain-row .check-btn { width: 100%; padding: 12px 16px; }
    /* Klantenlijst-zoekbalk (/admin/customers.php): tekstveld + twee
       dropdowns naast elkaar knijpt het tekstveld op mobiel tot bijna
       niets — zelfde soort fix als .domain-row hierboven, tekstveld op
       zijn eigen volle-breedte regel, de twee dropdowns eronder. */
    #customer-search-form { flex-wrap: wrap; }
    #customer-search-form #customer-search-q { flex: 1 0 100%; }
    #customer-search-form #customer-search-type,
    #customer-search-form #customer-search-segment { flex: 1; width: auto; }
    /* Bulkactie-balk ("0 geselecteerd" + type-select + "Toepassen op
       selectie") op dezelfde klantenlijst: de knop viel op mobiel buiten
       beeld omdat de rij niet mocht wrappen — zelfde fix, knop op zijn
       eigen volle-breedte regel. */
    #bulk-tag-form { flex-wrap: wrap; }
    #bulk-tag-submit { flex: 1 0 100%; }
}

/* --- Uptime-strip (admin/status.php, status.php) --- */
.uptime-strip {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.uptime-dot {
    width: 10px;
    height: 18px;
    border-radius: 3px;
    background: var(--success);
    flex-shrink: 0;
}
.uptime-dot.degraded {
    background: var(--warn);
}
.uptime-dot.down {
    background: var(--danger);
}
/* --- Kennisbank-antwoorden (faq.php), opgemaakt via Quill in /admin/faq.php --- */
.faq-answer img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul, .faq-answer ol { margin: 0 0 10px; padding-left: 22px; }

.uptime-dot.outage {
    /* Klant-status.php: langdurige (8+ uur) storing, bewust oranje i.p.v.
       het felrode .down dat de admin-pagina's gebruiken. */
    background: var(--warn);
}
.uptime-dot.none {
    background: var(--line);
}

/* --- Winkelmandje (shop.php) --- */
/* Bestelpagina krijgt een bredere container dan de standaard .shell
   (900px) — zodat de productkolom niet hoeft in te leveren voor de
   winkelmandje-kolom ernaast. Zie shop.php: <div class="shell shop-shell">. */
.shell.shop-shell {
    max-width: 1300px;
}
.cart-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.cart-layout .cart-main {
    flex: 1;
    min-width: 0;
}
.cart-summary {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 88px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.cart-summary h3 {
    font-family: var(--font-display);
    font-size: 15px;
    margin: 0 0 12px;
}
.cart-summary .cart-empty {
    color: var(--ink-soft);
    font-size: 13.5px;
}
.cart-summary-items {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}
.cart-summary.has-items .cart-summary-items { display: flex; }
.cart-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
}
.cart-summary-item .mono { flex-shrink: 0; }
.cart-summary-item .freq { color: var(--ink-soft); font-size: 10.5px; font-weight: 400; }
.cart-summary-item .name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cart-item-remove {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.cart-item-remove:hover { background: var(--danger-soft); color: var(--danger); }
.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: 700;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-bottom: 14px;
}
.cart-summary button[type="submit"] {
    margin-top: 0;
}
.cart-summary button[type="submit"]:disabled {
    background: var(--line);
    color: var(--ink-soft);
}
.cart-foot-note {
    text-align: center;
    font-size: 11px;
    color: var(--ink-soft);
}

/* Onder 1600px is er geen betrouwbare marge naast .shell om het
   winkelmandje los te pinnen zonder overlap met de content — dan valt
   terug op een onderaan vastgepind "bottom sheet": groeit mee met de
   inhoud (tot 65vh), met een scrollbare productlijst, zodat je op mobiel
   ook echt ziet wat er in het winkelmandje zit i.p.v. alleen het totaal. */
@media (max-width: 1599px) {
    .cart-summary {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-height: 65vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.15);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 15;
        flex-direction: column;
        gap: 0;
    }
    .cart-summary.has-items { display: flex; }
    .cart-summary h3, .cart-summary .cart-empty { display: none; }
    .cart-summary-items {
        max-height: 32vh;
        overflow-y: auto;
        margin: 0 0 10px;
        padding-right: 2px;
    }

    /* Kassakoopje blijft zichtbaar op mobiel, maar compacter: omschrijving
       weg, icoon/tekst kleiner, alles op minder regels. */
    .impulse-card { padding: 8px 10px; margin: 0 0 10px; }
    .impulse-head { margin-bottom: 3px; }
    .impulse-icon { width: 18px; height: 18px; }
    .impulse-icon svg { width: 10px; height: 10px; }
    .impulse-label { font-size: 9.5px; }
    .impulse-title { font-size: 12px; margin-bottom: 0; }
    .impulse-desc { display: none; }

    .cart-summary-total {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-top: 1px solid var(--line);
        padding-top: 10px;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-soft);
    }
    .cart-summary-total .cart-total-amount {
        font-size: 17px;
        font-weight: 700;
        color: var(--ink);
    }
    .cart-summary button[type="submit"] {
        width: 100%;
        margin-top: 0;
    }
}

/* ============================================================
   Bestelpagina (shop.php) — stappen-indeling, hosting-kaarten,
   domeinnaam-widget, "erbij?"-kaarten en het kassakoopje in het
   winkelmandje. Hergebruikt overal dezelfde tokens/componenten
   als de rest van de site (.panel, .mono, .tooltip-*, cart-*).
   ============================================================ */
.step-label { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.step-label:first-child { margin-top: 0; }
.step-label .num {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-family: var(--font-display); font-size: 12.5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(11, 132, 255, 0.25);
}
.step-label .num.optional { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.step-label h2 { font-family: var(--font-display); font-size: 16.5px; margin: 0; }
.step-label .step-hint { color: var(--ink-soft); font-size: 13px; }

/* hosting-pakketkaarten */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.plan-card {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px 16px 14px;
    cursor: pointer;
    background: var(--panel);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.plan-card:hover { border-color: var(--accent); }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-badge {
    position: absolute; top: -10px; left: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: 100px; letter-spacing: 0.02em;
}
.plan-title { font-family: var(--font-display); font-size: 15.5px; padding-right: 24px; }
.plan-price { margin-top: 12px; display: flex; align-items: baseline; gap: 5px; }
.plan-price .amount { font-size: 19px; font-weight: 700; }
.plan-price .unit { color: var(--ink-soft); font-size: 12px; }
.plan-check {
    position: absolute; top: 14px; right: 14px;
    width: 19px; height: 19px; border-radius: 50%;
    border: 1.5px solid var(--line); background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.plan-card.selected .plan-check { border-color: var(--accent); background: var(--accent); }
.plan-check svg { width: 11px; height: 11px; opacity: 0; }
.plan-card.selected .plan-check svg { opacity: 1; }
.plan-card-hint { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); }

/* domeinnaam-widget */
.domain-row { display: flex; gap: 8px; }
.domain-row input[type="text"] { flex: 1; }
.ext-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ext-pill {
    position: relative;
    border: 1.5px solid var(--line); border-radius: 100px;
    padding: 7px 14px; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 6px; background: var(--panel);
}
.ext-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ext-pill.selected { border-color: var(--accent); background: var(--accent-soft); color: #0A6FDB; font-weight: 600; }
.ext-pill .mono { color: var(--ink-soft); }
.ext-pill.selected .mono { color: #0A6FDB; }
.domain-result { margin-top: 10px; font-size: 13px; min-height: 18px; }
.domain-result.available { color: var(--success); }
.domain-result.unavailable { color: var(--danger); }
.domain-hint {
    margin-top: 12px; font-size: 12.5px; color: var(--ink-soft);
    background: var(--paper); border-radius: var(--radius-md); padding: 9px 12px;
    display: none;
}
.domain-hint.show { display: block; }

/* "erbij?"-kaarten (upsells) */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.addon-card {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--line); border-radius: var(--radius-md);
    padding: 13px 14px; cursor: pointer; background: var(--panel);
}
.addon-card:hover { border-color: var(--ink-faint, #94a3b8); }
.addon-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.addon-row { display: flex; gap: 11px; align-items: center; }
.addon-card input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; }
.addon-card .addon-title { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; }
.addon-card .addon-price { margin-left: auto; text-align: right; flex-shrink: 0; padding-left: 8px; }
.addon-card .addon-price .mono { font-weight: 700; font-size: 13.5px; }
.addon-card .addon-price .unit { display: block; color: var(--ink-soft); font-size: 10.5px; }
.addon-card .product-description { margin-left: 28px; }

/* Nette productomschrijving — alleen op desktop zichtbaar (zie de
   media query onderaan dit blok), als vervanging van de mobiele tooltip
   (.tooltip-wrap hierboven). Moneybird-omschrijvingen zijn meestal een
   handvol losse kenmerken per regel, vandaar een opsomming i.p.v. lopende
   tekst — leest in één oogopslag als een mini-featurelijst. */
.product-description {
    display: none;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.product-description li {
    position: relative;
    padding: 1.5px 0 1.5px 14px;
}
.product-description li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}
p.product-description { padding: 0; }

@media (min-width: 641px) {
    .product-description { display: block; }
    /* Op desktop is er ruimte voor de volledige omschrijving hierboven —
       de mobiele hover-tooltip is dan overbodig (en hover is op desktop
       sowieso minder betrouwbaar bereikbaar dan op mobiel getikt). De
       !important is nodig omdat de hover-regel (.tooltip-wrap:hover
       .tooltip-bubble) specifieker is dan een simpele class-selector. */
    .tooltip-icon { display: none; }
    .tooltip-bubble { display: none !important; }
}

/* winkelmandje: item-aantal + kassakoopje */
.cart-summary h3 { display: flex; align-items: center; justify-content: space-between; }
.cart-count {
    background: var(--paper); color: var(--ink-soft);
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 100px;
}
.cart-summary.has-items .cart-count { background: var(--accent-soft); color: #0A6FDB; }
.impulse-card {
    margin: 4px 0 12px;
    border: 1.5px dashed rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(11, 132, 255, 0.05));
    border-radius: var(--radius-md);
    padding: 12px;
}
.impulse-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.impulse-icon {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-2); display: flex; align-items: center; justify-content: center;
}
.impulse-icon svg { width: 12px; height: 12px; }
.impulse-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); }
.impulse-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.impulse-desc { font-size: 12px; color: var(--ink-soft); margin-bottom: 9px; line-height: 1.45; }
.impulse-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.impulse-price { font-size: 12.5px; font-weight: 700; }
.impulse-price .unit { color: var(--ink-soft); font-weight: 400; font-size: 10.5px; }
.impulse-add {
    border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-family: var(--font-body);
    font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 100px; cursor: pointer;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(11, 132, 255, 0.25);
}
.impulse-add:hover { opacity: 0.96; }

.status-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: status-dot-pulse 2.2s ease-out infinite; }
.status-dot.ok { background: var(--success); }
.status-dot.critical { background: var(--danger); }
@keyframes status-dot-pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .status-dot::before { animation: none; }
}
.impulse-add.added { background: var(--success); box-shadow: none; }

.check-btn {
    width: auto; white-space: nowrap; margin-top: 0; padding: 0 18px;
    border: none; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
    cursor: pointer; box-shadow: var(--shadow-glow);
}
.check-btn:hover { opacity: 0.96; transform: translateY(-1px); }

/* --- Afspraak-wizard (public/afspraak.php, public/appointments.php) --- */
.appt-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.appt-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: all 0.2s ease; flex-shrink: 0; }
.appt-step-dot.done { background: var(--success); }
.appt-step-dot.current { background: var(--accent); width: 20px; border-radius: 4px; }
.appt-step-line { flex: 1; height: 1px; background: var(--line); }
.appt-step-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-bottom: 4px; }
.appt-step-hint { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 22px; }

.appt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.appt-cal-head .month-label { font-weight: 600; font-size: 14.5px; }
.appt-cal-nav-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
    color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.appt-cal-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.appt-cal-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.appt-cal-dow {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; font-size: 11px; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; text-align: center;
}
.appt-cal-week {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; border-radius: 10px; padding: 6px 4px;
    cursor: pointer; border: 1.5px solid transparent; transition: all 0.12s ease; margin-bottom: 4px; position: relative;
}
.appt-cal-week:hover:not(.disabled) { background: var(--accent-soft); }
.appt-cal-week.selected { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.appt-cal-week.disabled { cursor: not-allowed; opacity: 0.35; }
.appt-cal-week.full { cursor: not-allowed; opacity: 0.5; }
.appt-cal-week.blocked { cursor: not-allowed; opacity: 0.5; background: var(--paper); }
.appt-cal-day { text-align: center; font-size: 13.5px; padding: 6px 0; border-radius: 6px; color: var(--ink); }
.appt-cal-week.selected .appt-cal-day { color: #fff; font-weight: 600; }
.appt-cal-day.muted { color: var(--ink-soft); opacity: 0.5; }
.appt-cal-full-label {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger); background: var(--danger-soft);
    padding: 2px 6px; border-radius: 100px;
}
.appt-cal-blocked-label { color: var(--ink-soft); background: var(--line); }
.appt-cal-legend { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; }
.appt-week-picked-note {
    margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
    font-size: 13.5px; font-weight: 600; display: none; align-items: center; gap: 8px;
}
.appt-week-picked-note.show { display: flex; }

.appt-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.appt-choice-grid.four { grid-template-columns: repeat(4, 1fr); }
.appt-choice-card {
    border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 18px 14px; text-align: center;
    cursor: pointer; transition: all 0.12s ease; background: var(--panel);
}
.appt-choice-card:hover { border-color: var(--accent); }
.appt-choice-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.appt-choice-card svg { width: 24px; height: 24px; margin-bottom: 10px; color: var(--ink-soft); }
.appt-choice-card.selected svg { color: var(--accent); }
.appt-choice-card .ct-label { font-weight: 600; font-size: 13.5px; display: block; }
.appt-choice-card .ct-sub { font-size: 11.5px; color: var(--ink-soft); display: block; margin-top: 2px; }
@media (max-width: 640px) { .appt-choice-grid.four { grid-template-columns: repeat(2, 1fr); } }

.appt-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }

.appt-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; gap: 12px; }
.appt-summary-row:last-child { border-bottom: none; }
.appt-summary-row .k { color: var(--ink-soft); flex-shrink: 0; }
.appt-summary-row .v { font-weight: 600; text-align: right; }

.appt-btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 10px; }

.appt-ics-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md);
    border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 13.5px;
    cursor: pointer; text-decoration: none;
}
.appt-ics-btn svg { width: 16px; height: 16px; color: var(--accent); }
.appt-ics-btn:hover { border-color: var(--accent); text-decoration: none; }

/* Oogje-knop om een wachtwoordveld (bv. gevoelige ticketinfo) tijdelijk
   leesbaar te maken tijdens het intypen — zelfde soort wrapper-patroon als
   het €-prefix bij de geschatte kosten van een afspraak. */
.sensitive-value-wrap { position: relative; }
.sensitive-value-wrap input { padding-right: 42px !important; }
.sensitive-value-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 0; margin: 0; border: none; background: none;
    color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
/* transform hier herhalen: de generieke "button:hover"-regel (element+pseudo-
   class) is specifieker dan deze ene class-selector en zou anders bij hover
   de translateY(-50%) overschrijven met zijn eigen translateY(-1px), waardoor
   het oogje bij hover uit het midden springt. */
.sensitive-value-toggle:hover { color: var(--accent); background: var(--accent-soft); transform: translateY(-50%); }
.sensitive-value-toggle svg { width: 18px; height: 18px; }

/* Zwevende "Hulp nodig?"-knop op de bestelpagina (public/shop.php) — linkt
   naar het zakelijke WhatsApp-nummer, met een voorgevulde openingszin. */
.whatsapp-help {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #25d366;
    color: #fff;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.whatsapp-help:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5);
    text-decoration: none;
    color: #fff;
}
@media (max-width: 640px) {
    .whatsapp-help span { display: none; }
    .whatsapp-help { padding: 13px; bottom: 84px; }
    /* Zodra er iets in de winkelmand zit, groeit .cart-summary op mobiel
       naar een full-width bottom sheet (tot 65vh) — een vaste bottom-positie
       voor deze knop kan daar dan altijd overheen komen te staan, ongeacht
       hoe hoog die sheet is. Op dat moment is de klant al aan het bestellen,
       dus verberg de knop simpelweg zolang de winkelmand zichtbaar is; hij
       komt vanzelf terug zodra de mand weer leeg is. */
    body:has(.cart-summary.has-items) .whatsapp-help { display: none; }
}