/* ═══════════════════════════════════════════════════════════════
   MorphiToys · Checkout-flow — "zacht-tactiel toy-craft"
   Winkelwagen → Afrekenen → Bedankt. Rustig, vertrouwd, gefocust:
   warme witte panelen op crème, zachte ronding, clay-schaduw, één
   duidelijke grape-CTA per stap. Productfoto's als kleine helden.
   Prefixes: .cart-* · .afreken-* · .bestel-* · .bedankt-*
   Alle kleuren via tokens. Mobiel-eerst.
   ═══════════════════════════════════════════════════════════════ */

/* Gedeeld in deze flow: code-chip + gratis-label */
.cart-code-chip {
    display: inline-flex; align-items: center;
    font-family: var(--font-display); font-weight: 600; font-size: .72em;
    letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 9px; margin-left: 4px; border-radius: var(--r-pill);
    background: var(--grape-100); color: var(--grape-700);
    vertical-align: middle;
}
.cart-gratis {
    font-family: var(--font-display); font-weight: 700; color: var(--ok);
}

/* ════════════════════════════════════════════════════════════════
   1 · WINKELWAGEN
   ════════════════════════════════════════════════════════════════ */
.cart-sectie { max-width: 1080px; }

.cart-kop { margin-bottom: clamp(22px, 4vw, 34px); }
.cart-kop h1 { font-size: var(--t-3xl); margin-bottom: 4px; }
.cart-aantal { color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; }

/* Twee kolommen vanaf tablet: regels + sticky zijbalk */
.cart-layout {
    display: grid;
    gap: clamp(22px, 3vw, 34px);
    align-items: start;
}
@media (min-width: 860px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ── Cart-regels ─────────────────────────────────────────────── */
.cart-regels { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px; }

.cart-regel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "thumb info totaal"
        "thumb aantal totaal";
    align-items: center;
    gap: 4px 16px;
    padding: clamp(12px, 1.6vw, 16px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: box-shadow .3s var(--vloei), transform .3s var(--veer);
}
.cart-regel:hover { box-shadow: var(--sh-md); }

/* Productthumb: foto als kleine held op zacht warm vlak */
.cart-thumb {
    grid-area: thumb;
    display: flex; align-items: center; justify-content: center;
    width: clamp(72px, 16vw, 96px); aspect-ratio: 1;
    border-radius: var(--r-md); overflow: hidden;
    background:
        radial-gradient(120% 120% at 30% 18%, #fff 0%, transparent 58%),
        linear-gradient(160deg, var(--canvas-2), #E4ECF8);
    transition: transform .35s var(--veer);
}
.cart-thumb img { width: 84%; height: 84%; object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(20,32,74,.16)); }
.cart-regel:hover .cart-thumb { transform: rotate(-3deg) scale(1.04); }
.cart-thumb-leeg { color: var(--grape); opacity: .4; }

.cart-regel-info { grid-area: info; min-width: 0; }
.cart-regel .cart-regel-naam { font-size: var(--t-base); font-weight: 600; line-height: 1.25; margin-bottom: 1px; }
.cart-regel-naam a { color: var(--ink); }
.cart-regel-naam a:hover { color: var(--grape); }
.cart-regel-variant {
    display: inline-block; font-size: var(--t-xs); font-family: var(--font-display); font-weight: 600;
    color: var(--grape-700); background: var(--grape-100);
    padding: 2px 9px; border-radius: var(--r-pill); margin-top: 2px;
}
.cart-regel-stuk { font-size: var(--t-sm); color: var(--ink-faint); margin-top: 3px; }
/* Zelf-samengestelde bundel: gekozen diertjes onder de regelnaam */
.cart-regel-bundel, .bestel-regel-bundel, .bedankt-regel-bundel {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 5px;
    font-size: var(--t-xs); line-height: 1.45; color: var(--ink-soft); }
.cart-regel-bundel .icoon, .bestel-regel-bundel .icoon, .bedankt-regel-bundel .icoon {
    flex: none; color: var(--coral); margin-top: 2px; }

/* Aantal-veld: compact, zelfde gestylede input als gedeeld */
.cart-regel-aantal { grid-area: aantal; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Verwijder-knop per regel (hergebruikt 0=verwijderen via het bijwerken-formulier) */
.cart-regel-verwijder {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 11px; background: none; border: none; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
    color: var(--ink-faint); border-radius: var(--r-sm);
    transition: color .2s, background .2s;
}
.cart-regel-verwijder:hover { color: var(--bad); background: var(--bad-bg); }
.cart-regel-verwijder:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.cart-regel-verwijder .icoon { width: 15px; height: 15px; }
.cart-aantal-label {
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--ink-soft);
}
.cart-aantal-input {
    width: 74px; min-height: 44px; margin-top: 0;
    padding: 8px 10px; text-align: center;
    font-family: var(--font-display); font-weight: 600;
}
/* Spinners weghouden voor een rustiger, tactieler veld */
.cart-aantal-input::-webkit-outer-spin-button,
.cart-aantal-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-aantal-input { -moz-appearance: textfield; appearance: textfield; }

.cart-regel-totaal { grid-area: totaal; text-align: right; align-self: center; }
.cart-regel-totaal-label {
    display: block; font-size: var(--t-xs); color: var(--ink-faint);
    font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.cart-regel-totaal-bedrag {
    font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink);
    white-space: nowrap;
}

/* Onder de regels: verder winkelen + bijwerken */
.cart-regels-acties {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 18px;
}
.cart-verder {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--grape);
}
.cart-verder .cart-verder-pijl { transform: rotate(180deg); transition: transform .2s var(--veer); }
.cart-verder:hover { color: var(--grape-700); }
.cart-verder:hover .cart-verder-pijl { transform: rotate(180deg) translateX(3px); }

/* ── Zijbalk: totalen-paneel + korting ───────────────────────── */
.cart-zijbalk { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 860px) {
    .cart-zijbalk { position: sticky; top: 96px; }
}

.cart-totalen {
    padding: clamp(20px, 2.4vw, 26px);
    background: radial-gradient(130% 120% at 0% 0%, #3E82E6 0%, #2A6AD6 45%, #1C55BE 100%);
    border: 1px solid #1C55BE;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
    color: #fff;
}
.cart-totalen .cart-totalen-titel { font-size: var(--t-xl); margin-bottom: 16px; color: #fff; }

.cart-totalen-lijst { margin: 0 0 6px; }
.cart-totaal-rij {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 8px 0; color: #CFDCF4; font-size: var(--t-base);
}
.cart-totaal-rij dt { font-weight: 500; }
.cart-totaal-rij dd { font-family: var(--font-display); font-weight: 600; color: #fff; white-space: nowrap; }
.cart-totaal-rij.is-korting dd { color: #7BE3A8; }
.cart-totaal-rij.is-totaal {
    margin-top: 6px; padding-top: 16px; border-top: 2px dashed rgba(255, 255, 255, .3);
    color: #fff; font-size: var(--t-lg);
}
.cart-totaal-rij.is-totaal dt { font-family: var(--font-display); font-weight: 700; }
.cart-totaal-rij.is-totaal dt small,
.bestel-totaal-rij.is-totaal dt small,
.bedankt-totaal-rij.is-totaal dt small {
    display: block; font-family: var(--font-body); font-weight: 500;
    font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0;
}
.cart-totaal-rij.is-totaal dd { font-size: var(--t-2xl); color: var(--sun); line-height: 1; }
.cart-totalen .cart-totaal-rij.is-totaal dt small { color: #AEC0E6; }

/* Gratis-verzending-hint met voortgangsbalk */
.cart-gratis-hint {
    margin: 14px 0 18px; padding: 13px 15px;
    background: var(--sun-100); border-radius: var(--r-md);
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: #8A5A00;
}
.cart-gratis-hint p { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cart-gratis-hint strong { color: var(--coral-ink); }
.cart-hint-icoon { flex: none; color: #8A5A00; }
.cart-gratis-hint.is-behaald {
    display: flex; align-items: center; gap: 8px;
    background: var(--ok-bg); color: #15623a;
}
.cart-gratis-hint.is-behaald .cart-hint-icoon { color: var(--ok); }
.cart-gratis-hint.is-behaald strong { color: #15623a; }
.cart-voortgang { height: 8px; background: rgba(198,63,24,.16); border-radius: var(--r-pill); overflow: hidden; }
.cart-voortgang span {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--sun), var(--coral));
    transition: width .5s var(--vloei);
}

.cart-checkout { margin-top: 4px; }

.cart-geruststelling {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    font-family: var(--font-display); font-weight: 500; font-size: var(--t-xs); color: #CFDCF4;
}
.cart-geruststelling li { display: inline-flex; align-items: center; gap: 6px; }
.cart-geruststelling .icoon { color: var(--teal); }

/* ── Kortingscode-blok ───────────────────────────────────────── */
.cart-korting {
    padding: clamp(16px, 2vw, 20px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.cart-korting .melding { font-size: var(--t-xs); padding: 11px 14px; margin-bottom: 14px; }
.cart-korting-label {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); margin-bottom: 10px;
}
.cart-korting-rij { display: flex; gap: 10px; }
.cart-korting-rij input { margin-top: 0; flex: 1; min-width: 0; text-transform: uppercase; }
.cart-korting-rij input::placeholder { text-transform: none; }
.cart-korting-rij .btn { flex: none; }

.cart-korting-actief {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.cart-korting-toegepast {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: #15623a;
}
.cart-korting-toegepast .icoon { flex: none; color: var(--ok); }
.cart-korting-verwijder {
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px;
    min-height: 44px; padding: 0 4px;
}
.cart-korting-verwijder:hover { color: var(--bad); }

/* ════════════════════════════════════════════════════════════════
   2 · AFREKENEN
   ════════════════════════════════════════════════════════════════ */
.afreken-sectie { max-width: 1080px; }

.afreken-kop { margin-bottom: clamp(20px, 3.5vw, 30px); }
.afreken-kop h1 { font-size: var(--t-3xl); margin-bottom: 6px; }
.afreken-kop p { color: var(--ink-soft); font-size: var(--t-lg); }

/* De foutmelding bovenaan opvallend maar rustig */
.afreken-sectie > .melding.fout { align-items: center; }
.afreken-sectie > .melding.fout .icoon { flex: none; }

/* Formulier links (breed), overzicht rechts (sticky) */
.afrekenen-kolommen {
    display: grid;
    gap: clamp(22px, 3vw, 40px);
    align-items: start;
}
@media (min-width: 860px) {
    .afrekenen-kolommen { grid-template-columns: minmax(0, 1fr) 350px; }
}
/* Overzicht boven het formulier op mobiel: vertrouwen geven vóór invullen */
@media (max-width: 859px) {
    .afreken-form { order: 2; }
    .bestel-overzicht { order: 1; }
}

/* ── Formulier-blokken ───────────────────────────────────────── */
.afreken-blok {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-sm);
    padding: clamp(18px, 2.4vw, 28px);
    margin: 0 0 18px;
    display: flow-root; /* bevat de zwevende legend netjes binnen de kaart */
}
/* Legend zweeft standaard óp de bovenrand van de fieldset (half erboven).
   float+width:100% haalt 'm van de rand af en zet 'm als nette koptekst bovenin. */
.afreken-blok legend {
    float: left; width: 100%;
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); color: var(--ink);
    padding: 0; margin: 0 0 18px;
}
.afreken-blok legend + * { clear: left; }
.afreken-stap {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grape); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1;
}

/* ── Bezorgen of afhalen ─────────────────────────────────────── */
.leverkeuze { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 520px) {
    .leverkeuze { grid-template-columns: 1fr 1fr; }
}
.afreken-form .leverkeuze-kaart { display: block; margin: 0; cursor: pointer; }
.leverkeuze-kaart input {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
    opacity: 0; pointer-events: none;
}
.leverkeuze-vlak {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; height: 100%;
    border: 2px solid var(--border); border-radius: var(--r-lg);
    background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s;
}
.leverkeuze-kaart:hover .leverkeuze-vlak { border-color: var(--grape); }
.leverkeuze-kaart input:checked + .leverkeuze-vlak {
    border-color: var(--grape); background: var(--canvas-2); box-shadow: var(--sh-sm);
}
.leverkeuze-kaart input:focus-visible + .leverkeuze-vlak { outline: 3px solid var(--grape); outline-offset: 2px; }
.leverkeuze-icoon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--canvas-2); color: var(--grape);
}
.leverkeuze-kaart input:checked + .leverkeuze-vlak .leverkeuze-icoon { background: var(--grape); color: #fff; }
.leverkeuze-tekst { display: block; min-width: 0; }
.leverkeuze-tekst strong {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-base); color: var(--ink);
}
.leverkeuze-tekst small { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: 2px; }

.leverkeuze-info {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding: 14px 16px;
    border: 1px dashed var(--border-sterk); border-radius: var(--r-md);
    background: var(--canvas-2);
    font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55;
}
.leverkeuze-info[hidden] { display: none; }
.leverkeuze-info .icoon { flex: none; margin-top: 3px; color: var(--grape); }
.leverkeuze-info strong { color: var(--ink); }

/* Labels: kop-span + gestylede input eronder (gedeelde input-stijl) */
.afreken-form label { display: block; margin-bottom: 16px; }
.afreken-form .veld-rij > label { margin-bottom: 0; }
.afreken-form .veld-rij { margin-bottom: 16px; }
.afreken-form label:last-child,
.afreken-form .afreken-blok > label:last-child { margin-bottom: 0; }
.afreken-label {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: var(--t-sm); color: var(--ink);
}
.afreken-optioneel {
    font-family: var(--font-body); font-weight: 500; font-size: var(--t-xs);
    color: var(--ink-faint); margin-left: 4px;
}
.afreken-form input,
.afreken-form textarea { margin-top: 7px; }

/* Adres-verhoudingen: straat & plaats breder dan huisnr & postcode */
.afreken-straat { flex: 2 1 200px !important; }
.afreken-huisnr { flex: 1 1 90px !important; }
.afreken-postcode { flex: 1 1 120px !important; }
.afreken-plaats { flex: 2 1 180px !important; }

/* Veld-hint (niet-fout) onder een veld */
.veld-hint {
    display: block; font-size: var(--t-xs); color: var(--ink-faint);
    margin-top: 6px; font-family: var(--font-body);
}
/* Foutmelding-icoon netjes uitlijnen (klasse .veld-melding is gedeeld) */
.veld-melding { display: flex; align-items: center; gap: 5px; }
.veld-melding .icoon { flex: none; }

.afreken-voorwaarden {
    font-size: var(--t-sm); color: var(--ink-soft); margin: 4px 0 18px;
}
.afreken-voorwaarden a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.afreken-verzend { margin-top: 2px; }

.afreken-terug { text-align: center; margin-top: 16px; }
.afreken-terug a {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--ink-soft);
}
.afreken-terug a:hover { color: var(--grape); }
.afreken-terug-pijl { transform: rotate(180deg); }

/* ── Besteloverzicht (afrekenen) ─────────────────────────────── */
.bestel-overzicht { min-width: 0; }
.bestel-overzicht-binnen {
    padding: clamp(18px, 2.4vw, 24px);
    background: radial-gradient(130% 120% at 0% 0%, #3E82E6 0%, #2A6AD6 45%, #1C55BE 100%);
    border: 1px solid #1C55BE;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
    color: #fff;
}
@media (min-width: 860px) {
    .bestel-overzicht-binnen { position: sticky; top: 96px; }
}
.bestel-overzicht-binnen .bestel-overzicht-titel { font-size: var(--t-xl); margin-bottom: 16px; color: #fff; }
.bestel-overzicht-binnen .bestel-regel-naam, .bestel-overzicht-binnen .bestel-regel-prijs { color: #fff; }
.bestel-overzicht-binnen .bestel-regel-variant { color: #AEC0E6; }
.bestel-overzicht-binnen .bestel-regel-bundel { color: #C6D4F0; }
.bestel-overzicht-binnen .bestel-regel-bundel .icoon { color: var(--sun); }
.bestel-overzicht-binnen .bestel-regels { border-bottom-color: rgba(255, 255, 255, .25); }
.bestel-overzicht-binnen .bestel-regel-badge { background: var(--sun); color: var(--ink); border-color: transparent; }
.bestel-overzicht-binnen .bestel-totaal-rij { color: #CFDCF4; }
.bestel-overzicht-binnen .bestel-totaal-rij dd { color: #fff; }
.bestel-overzicht-binnen .bestel-totaal-rij.is-totaal { color: #fff; border-top-color: rgba(255, 255, 255, .3); }
.bestel-overzicht-binnen .bestel-totaal-rij.is-totaal dd { color: var(--sun); }
.bestel-overzicht-binnen .bestel-totaal-rij.is-totaal dt small { color: #AEC0E6; }

.bestel-regels { list-style: none; margin: 0 0 16px; padding: 0 0 16px;
    border-bottom: 2px dashed var(--border-sterk);
    display: flex; flex-direction: column; gap: 13px; }
.bestel-regel { display: flex; align-items: center; gap: 12px; }

/* Mini-thumb met aantal-badge */
.bestel-regel-thumb {
    position: relative; flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--r-sm); overflow: visible;
    background:
        radial-gradient(120% 120% at 30% 18%, #fff 0%, transparent 60%),
        linear-gradient(160deg, var(--canvas-2), #E4ECF8);
    color: var(--grape);
}
.bestel-regel-thumb img { width: 80%; height: 80%; object-fit: contain; border-radius: 8px;
    filter: drop-shadow(0 4px 7px rgba(20,32,74,.16)); }
.bestel-regel-badge {
    position: absolute; top: -7px; right: -7px;
    min-width: 22px; height: 22px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grape); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: .72rem;
    border-radius: var(--r-pill); border: 2px solid var(--surface-2);
}
.bestel-regel-tekst { flex: 1; min-width: 0; }
.bestel-regel-naam {
    display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: var(--ink); line-height: 1.3;
}
.bestel-regel-variant { display: block; font-size: var(--t-xs); color: var(--ink-faint); }
.bestel-regel-prijs {
    flex: none; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: var(--ink); white-space: nowrap;
}

.bestel-totalen { margin: 0; }
.bestel-totaal-rij {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0; color: var(--ink-soft); font-size: var(--t-sm);
}
.bestel-totaal-rij dt { font-weight: 500; }
.bestel-totaal-rij dd { font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.bestel-totaal-rij.is-korting dd { color: var(--ok); }
.bestel-totaal-rij.is-totaal {
    margin-top: 8px; padding-top: 13px; border-top: 1px solid var(--border-sterk);
    color: var(--ink); font-size: var(--t-base);
}
.bestel-totaal-rij.is-totaal dt { font-family: var(--font-display); font-weight: 700; }
.bestel-totaal-rij.is-totaal dd { font-size: var(--t-xl); color: var(--grape); line-height: 1; }

.bestel-geruststelling {
    list-style: none; margin: 16px 0 0; padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    display: flex; flex-direction: column; gap: 8px;
    font-family: var(--font-display); font-weight: 500; font-size: var(--t-xs); color: #CFDCF4;
}
.bestel-geruststelling li { display: flex; align-items: center; gap: 8px; }
.bestel-geruststelling .icoon { flex: none; color: var(--teal); }

/* ════════════════════════════════════════════════════════════════
   3 · BEDANKT
   ════════════════════════════════════════════════════════════════ */
.bedankt-sectie { max-width: 680px; }

.bedankt-kaart {
    position: relative;
    padding: clamp(28px, 5vw, 52px) clamp(22px, 4vw, 48px);
    background: radial-gradient(125% 115% at 50% 0%, #3E82E6 0%, #2A6AD6 40%, #1C55BE 74%, #1544A0 100%);
    border: 1px solid #1C55BE;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    color: #fff;
    overflow: hidden;
}

/* Feestelijke maar smaakvolle confetti-stippen (decoratief) */
.bedankt-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bedankt-stip { position: absolute; width: 12px; height: 12px; border-radius: 4px; opacity: .85;
    animation: bedankt-zweef 4.5s var(--vloei) infinite; }
.bedankt-stip.s1 { top: 9%;  left: 12%; background: var(--coral); transform: rotate(18deg); animation-delay: 0s; }
.bedankt-stip.s2 { top: 16%; left: 84%; background: var(--sun);   border-radius: 50%; animation-delay: .5s; }
.bedankt-stip.s3 { top: 30%; left: 6%;  background: var(--teal);  border-radius: 50%; animation-delay: 1.1s; }
.bedankt-stip.s4 { top: 7%;  left: 64%; background: var(--berry); transform: rotate(-12deg); animation-delay: 1.6s; }
.bedankt-stip.s5 { top: 24%; left: 30%; background: var(--grape); border-radius: 50%; animation-delay: .9s; width: 9px; height: 9px; }
.bedankt-stip.s6 { top: 12%; left: 46%; background: var(--sun);   transform: rotate(24deg); animation-delay: 1.9s; width: 9px; height: 9px; }
@keyframes bedankt-zweef {
    0%, 100% { transform: translateY(0) rotate(0); opacity: .85; }
    50%      { transform: translateY(-8px) rotate(20deg); opacity: 1; }
}

/* Alles boven de confetti */
.bedankt-kaart > *:not(.bedankt-confetti) { position: relative; z-index: 1; }

.bedankt-icoon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--ok); color: #fff;
    box-shadow: 0 14px 30px rgba(30,158,90,.34);
    margin-bottom: 18px;
    animation: bedankt-pop .55s var(--veer) both;
}
@keyframes bedankt-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.bedankt-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: var(--coral-ink); background: var(--coral-100);
    padding: 6px 15px; border-radius: var(--r-pill); margin-bottom: 14px;
}
.bedankt-eyebrow .icoon { color: var(--coral); }

.bedankt-kaart h1 { font-size: var(--t-2xl); margin-bottom: 12px; color: #fff; }
.bedankt-intro { color: #D3E0F7; font-size: var(--t-lg); margin-bottom: 22px; }
.bedankt-intro strong { color: #fff; }

/* Bestelnummer als opvallend "ticket" */
.bedankt-nummer {
    display: inline-flex; flex-direction: column; gap: 2px; align-items: center;
    padding: 14px 28px; margin-bottom: 26px;
    background: rgba(255, 255, 255, .1); border-radius: var(--r-lg);
    border: 1.5px dashed var(--sun);
}
.bedankt-nummer-label {
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: .08em; color: #AEC0E6;
}
.bedankt-nummer-waarde {
    font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); color: var(--sun);
    letter-spacing: .01em;
}

/* Overzicht-kaartje binnen de bedankkaart, links uitgelijnd voor leesbaarheid */
.bedankt-overzicht {
    text-align: left;
    padding: clamp(18px, 3vw, 24px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: 22px;
}
.bedankt-overzicht .bedankt-overzicht-titel {
    font-size: var(--t-sm); font-family: var(--font-display); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
    margin-bottom: 14px;
}
.bedankt-regels { list-style: none; margin: 0 0 14px; padding: 0 0 14px;
    border-bottom: 2px dashed var(--border-sterk);
    display: flex; flex-direction: column; gap: 11px; }
.bedankt-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.bedankt-regel-naam { font-size: var(--t-sm); color: var(--ink); line-height: 1.35; }
.bedankt-regel-aantal { font-family: var(--font-display); font-weight: 700; color: var(--grape); margin-right: 3px; }
.bedankt-regel-variant { color: var(--ink-faint); }
.bedankt-regel-prijs {
    flex: none; font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: var(--ink); white-space: nowrap;
}

.bedankt-totalen { margin: 0; }
.bedankt-totaal-rij {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 5px 0; color: var(--ink-soft); font-size: var(--t-sm);
}
.bedankt-totaal-rij dt { font-weight: 500; }
.bedankt-totaal-rij dd { font-family: var(--font-display); font-weight: 600; color: var(--ink); white-space: nowrap; }
.bedankt-totaal-rij.is-korting dd { color: var(--ok); }
.bedankt-totaal-rij.is-totaal {
    margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--border-sterk);
    color: var(--ink); font-size: var(--t-base);
}
.bedankt-totaal-rij.is-totaal dt { font-family: var(--font-display); font-weight: 700; }
.bedankt-totaal-rij.is-totaal dd { font-size: var(--t-xl); color: var(--grape); line-height: 1; }

.bedankt-levering {
    display: flex; align-items: center; gap: 9px; justify-content: center;
    font-size: var(--t-sm); color: var(--ink-soft);
    padding: 12px 16px; margin-bottom: 24px;
    background: var(--teal-100); border-radius: var(--r-md);
}
.bedankt-levering-icoon { flex: none; color: #0A6f7c; }

.bedankt-acties { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Reduced motion: zet de eigen sier-animaties stil ────────── */
@media (prefers-reduced-motion: reduce) {
    .bedankt-stip { animation: none; }
    .bedankt-icoon { animation: none; }
}