/* ExamenKlaar "vanaf €0,99" — mandje, order bumps en bedankt. Bouwt voort op styles.css en checkout.css */

/* ---------- Mandje ---------- */
.cartlines { list-style: none; margin: 0; padding: 0; display: grid; }
.cartline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px dashed #CBD5E0; }
.cartline:first-child { padding-top: 0; }
.cartline__text { display: grid; line-height: 1.25; }
.cartline__text b { font-weight: 800; }
.cartline__text span { font-size: .86rem; font-weight: 600; color: var(--slate); }
.cartline__price { font-weight: 800; font-variant-numeric: tabular-nums; }
.cartline__remove {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  color: var(--slate); background: var(--paper); border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease;
}
.cartline__remove:hover { color: var(--red); border-color: var(--red); }

.cart-empty { display: grid; gap: 12px; }
.cart-empty p { color: var(--slate); }
.cart-empty strong { color: var(--carbon); }
.quickadd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quickadd button {
  display: grid; gap: 2px; text-align: left; cursor: pointer; font: inherit; color: var(--carbon);
  background: var(--paper); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.quickadd button:hover { border-color: var(--carbon); }
.quickadd b { font: 800 .95rem var(--font-head); }
.quickadd span { font-size: .85rem; font-weight: 700; color: var(--slate); }

/* ---------- Order bumps ---------- */
.bumps { display: grid; gap: 8px; }
.bumps__title { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.bumps__list { display: grid; gap: 8px; }
.bump {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  background: #FFFAF6; border: 2px dashed var(--orange); border-radius: 14px; padding: 12px 12px 12px 14px;
  animation: bumpin .4s var(--ease-spring) both;
}
@keyframes bumpin { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
.bump__text { display: grid; gap: 2px; line-height: 1.3; }
.bump__text b { font: 700 1rem var(--font-head); }
.bump__text span { font-size: .88rem; font-weight: 600; color: var(--slate); }
.bump__badge {
  position: absolute; top: -10px; left: 12px; background: var(--green); color: #fff;
  font: 700 .7rem var(--font-head); padding: 2px 8px; border-radius: 6px;
}
.bump__add {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  font: 800 .92rem var(--font-head); font-variant-numeric: tabular-nums; color: #fff;
  background: var(--carbon); border: 0; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 4px 0 -1px #000; transition: transform .15s ease;
}
.bump__add:hover { transform: translateY(-2px); }
.bump__add:active { transform: none; }

.cart .summary__name { font-variant-numeric: tabular-nums; }
.toast--undo { display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); }
.toast__undo { font: 800 .92rem var(--font-body); color: var(--orange); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Bedankt ---------- */
.thanks .done__lead strong { word-break: normal; overflow-wrap: anywhere; }
.thanks { display: grid; gap: 22px; max-width: 880px; }
.offer__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 22px; align-items: start;
  background: var(--white); border: 3px solid var(--orange); border-radius: 24px; padding: clamp(20px, 3.5vw, 32px);
  box-shadow: 0 30px 60px -34px rgba(255,85,0,.55);
}
.offer__who { display: grid; justify-items: center; gap: 6px; }
.offer__who img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #E8ECF1; }
.offer__eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); white-space: nowrap; }
.offer__body { display: grid; gap: 10px; }
.offer__body h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.02em; line-height: 1.12; }
.offer__body > p { color: var(--slate); max-width: 52ch; }
.offer__price { font: 800 2.2rem/1 var(--font-head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--carbon) !important; margin-top: 4px; }
.offer__price small { font: 700 .95rem var(--font-body); color: var(--slate); letter-spacing: 0; }
.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.offer__actions .btn.is-loading { pointer-events: none; opacity: .8; }
.offer__fine { font-size: .85rem; font-weight: 600; }
.offer__card.is-done { grid-template-columns: 1fr; border-color: var(--green); box-shadow: none; padding: 16px 20px; }
.offer__ok { display: flex; align-items: center; gap: 12px; color: #0B7A57; }
.offer__ok p { color: var(--carbon); }
.offer__ok--quiet p { color: var(--slate); }
.offer__card.is-done:has(.offer__ok--quiet) { border-color: var(--line); }

.receipt-mini { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; display: grid; gap: 12px; }
.receipt-mini h2 { font-size: 1.12rem; }
.receipt-mini h2 span { color: var(--slate); font: 700 .9rem var(--font-body); }
.receipt-mini .cartline { grid-template-columns: minmax(0, 1fr) auto; }
.receipt-mini__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--slate); font-weight: 600; }
.receipt-mini__total > b { font: 800 1.4rem var(--font-head); color: var(--carbon); font-variant-numeric: tabular-nums; }
.receipt-mini__total span b { color: var(--carbon); }

/* De standaard "done" kaart iets compacter, zodat het aanbod eronder in beeld komt */
.thanks .done__maya { max-height: 300px; width: auto; justify-self: center; }
.thanks .done__card { grid-template-columns: 180px 1fr; }

@media (max-width: 860px) {
  .cart .summary__total { display: grid; }
  .thanks .done__card { grid-template-columns: 1fr; }
  .thanks .done__maya { max-height: 170px; }
}
@media (max-width: 520px) {
  .offer__card { grid-template-columns: 1fr; }
  .offer__who { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .offer__who img { width: 52px; height: 52px; }
  .offer__actions .btn { flex: 1 1 100%; }
  .offer__actions .textlink { margin-inline: auto; }
  .bump { grid-template-columns: 1fr; }
  .bump__add { justify-self: start; }
}

/* ---------- Gegevens in de checkout ---------- */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-row--phone { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.field-cell { display: grid; gap: 6px; align-content: start; }
.notice-cancel { background: var(--orange-tint); border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: .95rem; }
@media (max-width: 380px) {
  .field-row, .field-row--phone { grid-template-columns: 1fr; }
}

/* ---------- Bedankt: direct beginnen ---------- */
.done__start { display: grid; gap: 6px; }
.done__start small { color: var(--slate); font-weight: 600; font-size: .9rem; }

.cartline--fee .cartline__text b { font-weight: 700; color: var(--slate); }
.cartline__remove--none { width: 32px; height: 32px; }

/* Gegevensblok in de checkout: verborgen bij alleen losse theoriedagen */
.details { display: grid; gap: 10px; }