/* =========================================================
   ByeStuff — gedeelde stijl voor alle pagina's
   Kleuren, typografie, header, footer, knoppen, formulieren,
   dialoog, toast en herbruikbare blokken.
   Pagina-specifieke stijl staat in home.css, flow.css, account.css.
   ========================================================= */

:root {
  --bs-yellow: #fff27a;
  --bs-yellow-soft: #fff1ba;
  --bs-pink: #ff4f93;
  --bs-pink-dark: #e7397c;
  --bs-mint: #dff7e4;
  --bs-mint-strong: #c9f8e1;
  --bs-softpink: #ffe5ee;
  --bs-lilac: #e9e5ff;
  --bs-lilac-strong: #e4d1ff;
  --bs-periwinkle: #edf0ff;
  --bs-ink: #0b0f1a;
  --bs-blue: #090f30;
  --bs-paper: #fffdf7;
  --bs-white: #ffffff;
  --bs-line: #e5e3dc;
  --bs-muted: #5a5f74;
  --bs-error: #ad2148;
  --bs-focus: #8b49d6;

  --bs-font: Arial, Helvetica, sans-serif;
  --bs-heading: 'Arial Black', Arial, sans-serif;

  --bs-radius-s: 12px;
  --bs-radius-m: 16px;
  --bs-radius-l: 22px;
  --bs-container: 1270px;
  --bs-gutter: 32px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bs-paper);
  color: var(--bs-blue);
  font: 16px/1.4 var(--bs-font);
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bs-focus);
  outline-offset: 4px;
}
section[id], article[id] { scroll-margin-top: 20px; }
.bs-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;
}
.bs-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.bs-inline-hand { display: inline-block; width: 43px; height: 43px; vertical-align: -6px; margin-left: 8px; }

/* ---------- Typografie ---------- */
.bs-eyebrow {
  font-size: 12px; line-height: 18px; letter-spacing: 1.25px; text-transform: uppercase;
  font-weight: 700; color: var(--bs-ink); margin-bottom: 8px;
}
.bs-title {
  font-family: var(--bs-heading); font-weight: 900;
  font-size: 40px; line-height: 1.12; letter-spacing: -1.5px; margin-bottom: 12px;
}
.bs-title > .bs-icon { width: 36px; height: 36px; vertical-align: -5px; margin-left: 8px; }
.bs-subtitle { font-size: 17px; line-height: 26px; color: #4b5168; max-width: 720px; }
.bs-small { font-size: 12px; line-height: 18px; color: var(--bs-muted); }
.bs-center { text-align: center; }
.bs-center .bs-subtitle { margin: 0 auto; }

/* ---------- Knoppen ---------- */
.bs-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 42px; padding: 10px 22px;
  border: 1px solid transparent; border-radius: 13px;
  background: var(--bs-blue); color: #fff;
  font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none;
  transition: background .15s, transform .15s;
}
.bs-button:hover { background: #232c52; text-decoration: none; transform: translateY(-1px); }
.bs-button:active { transform: translateY(1px); }
.bs-button:disabled { transform: none; }
.bs-button .bs-icon, .bs-button > img { width: 19px; height: 19px; filter: invert(1); }
.bs-button.bs-pill { border-radius: 999px; min-height: 48px; padding: 12px 25px; font-size: 16px; }
.bs-button.bs-pink { background: var(--bs-pink); }
.bs-button.bs-pink:hover { background: var(--bs-pink-dark); }
.bs-button.bs-outline { background: #fff; color: var(--bs-blue); border-color: #c4c8d6; font-weight: 400; }
.bs-button.bs-outline:hover { background: #f4f3fa; }
.bs-button.bs-outline .bs-icon, .bs-button.bs-outline > img { filter: none; }
.bs-button.bs-full { width: 100%; }
.bs-link-button {
  border: 0; background: none; padding: 8px 0; color: var(--bs-ink); font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px;
}
.bs-link-button:hover { color: #c62065; }

/* ---------- Header ---------- */
.bs-header {
  min-height: 56px; background: #fffdfb;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 7px max(24px, calc((100% - var(--bs-container)) / 2));
}
.bs-logo { width: 179px; flex-shrink: 0; display: block; }
.bs-nav { display: flex; align-items: center; gap: 32px; white-space: nowrap; font-size: 13px; }
.bs-header-actions { display: flex; gap: 9px; align-items: center; }
.bs-menu-button { display: none; background: transparent; border: 0; padding: 10px; }
.bs-menu-button img { width: 25px; height: 25px; }
.bs-mobile-nav { background: #fff; padding: 12px 24px 20px; display: grid; gap: 3px; border-top: 1px solid #eee; }
.bs-mobile-nav a {
  font-size: 16px; min-height: 44px; display: flex; align-items: center; padding: 8px 0; color: var(--bs-blue);
}

/* Smalle header voor de verzendflow */
.bs-topbar {
  min-height: 82px; border-bottom: 1px solid var(--bs-line); background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 max(36px, calc((100% - 1240px) / 2));
}
.bs-topbar .bs-logo { width: 183px; }
.bs-topbar-right { display: flex; align-items: center; gap: 24px; }
.bs-topbar .bs-link-button { text-decoration: none; display: flex; align-items: center; gap: 7px; }
.bs-caption { font-size: 13px; color: var(--bs-muted); }

/* ---------- Footer ---------- */
.bs-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  max-width: 1280px; margin: auto; padding: 21px 0 17px;
}
.bs-footer .bs-logo { width: 144px; }
.bs-footer-nav { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 11px; line-height: 18px; }
.bs-socials { display: flex; gap: 18px; align-items: center; }
.bs-socials button { border: 0; padding: 4px; background: none; min-width: 28px; min-height: 32px; }
.bs-socials img { width: 21px; height: 21px; }

.bs-bottom {
  max-width: 1240px; margin: 20px auto 0; padding: 20px 0 22px; border-top: 1px solid var(--bs-line);
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
.bs-bottom-copy { font-size: 12px; color: #6f7488; }
.bs-bottom-links { display: flex; gap: 22px; align-items: center; font-size: 12px; }
.bs-bottom-links a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Formulieren ---------- */
.bs-field { display: block; margin-bottom: 18px; font-size: 14px; font-weight: 700; }
.bs-field input {
  display: block; width: 100%; height: 54px; margin-top: 8px; padding: 12px 16px;
  border: 1px solid #ced2dd; background: #fff; border-radius: var(--bs-radius-s);
  color: var(--bs-ink); font-size: 16px; font-weight: 400;
}
.bs-field input::placeholder { color: #9398aa; }
.bs-field input[aria-invalid=true] { border-color: #ce295b; }
.bs-field-error { color: var(--bs-error); font-size: 13px; line-height: 19px; display: block; margin-top: 7px; font-weight: 400; }
.bs-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 22px; margin: 0 0 21px; }
.bs-consent input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--bs-pink); flex-shrink: 0; }
.bs-consent a { text-decoration: underline; text-underline-offset: 3px; }
.bs-form-message { padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 21px; margin-bottom: 18px; }
.bs-form-message.is-error { background: #ffe3ea; color: var(--bs-error); }
.bs-form-message.is-ok { background: var(--bs-mint); color: var(--bs-ink); }

/* ---------- Herbruikbare blokken ---------- */
.bs-checklist { list-style: none; padding: 0; margin: 19px 0 23px; display: grid; gap: 9px; }
.bs-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; }
.bs-checklist .bs-icon { width: 20px; height: 20px; }

.bs-panel { border-radius: var(--bs-radius-l); padding: 25px; background: var(--bs-yellow-soft); }
.bs-panel h2, .bs-panel h3 { font-size: 19px; line-height: 25px; margin-bottom: 13px; }
.bs-panel .bs-checklist { margin: 0; gap: 15px; }

.bs-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.bs-category { border-radius: var(--bs-radius-m); padding: 13px 10px 12px; background: var(--bs-periwinkle); margin: 0; text-align: center; min-width: 0; }
.bs-category:nth-child(5n+2) { background: #fff1bd; }
.bs-category:nth-child(5n+3) { background: #ffe2ed; }
.bs-category:nth-child(5n+4) { background: #eee1ff; }
.bs-category:nth-child(5n+5) { background: #dcf8ec; }
.bs-category img { width: 100%; height: 113px; object-fit: contain; margin: 0 auto 7px; }
.bs-category figcaption { font-size: 13px; font-weight: 700; line-height: 17px; min-height: 34px; display: grid; place-items: center; }
.bs-more-icon { height: 113px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bs-more-icon span { width: 8px; height: 8px; background: var(--bs-ink); border-radius: 50%; }

/* Status-tijdlijn (flow en account) */
.bs-timeline { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 24px 0; }
.bs-timeline li { position: relative; text-align: center; font-size: 13px; color: #84899b; line-height: 18px; }
.bs-timeline li:not(:last-child)::after {
  content: ''; height: 2px; background: #e8e8e9; position: absolute; top: 17px;
  left: calc(50% + 18px); width: calc(100% - 36px);
}
.bs-status-dot {
  width: 36px; height: 36px; display: grid; place-items: center; background: #e9e9ea;
  margin: 0 auto 10px; border-radius: 50%; font-weight: 700; color: #a5a7af;
}
.bs-timeline .done .bs-status-dot, .bs-timeline .current .bs-status-dot { background: var(--bs-pink); color: #fff; }
.bs-timeline .done, .bs-timeline .current { color: var(--bs-ink); font-weight: 700; }
.bs-timeline .done::after { background: var(--bs-pink) !important; }

/* ---------- Dialoog ---------- */
.bs-dialog {
  border: 0; border-radius: 27px; padding: 0;
  width: min(560px, calc(100% - 32px)); max-height: 85dvh;
  color: var(--bs-blue); background: var(--bs-paper); box-shadow: 0 20px 70px #0b0f1a26;
}
.bs-dialog::backdrop { background: #0b0f1a55; backdrop-filter: blur(3px); }
.bs-dialog-body { padding: 34px 34px 30px; position: relative; }
.bs-dialog-close {
  position: absolute; right: 16px; top: 16px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: #eceaf1; display: grid; place-items: center; padding: 0;
}
.bs-dialog-close img { width: 18px; height: 18px; }
.bs-dialog h2 { font-family: var(--bs-heading); font-size: 27px; line-height: 33px; letter-spacing: -1px; margin: 0 36px 16px 0; }
.bs-dialog p { margin: 0 0 14px; font-size: 15px; line-height: 23px; }
.bs-dialog ul { padding-left: 19px; margin: 12px 0 20px; font-size: 15px; line-height: 25px; }
.bs-dialog-art { width: 132px; height: 95px; object-fit: contain; margin-bottom: 16px; }

/* ---------- Toast ---------- */
.bs-toast {
  position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); overflow-wrap: anywhere;
  background: var(--bs-ink); color: #fff; border-radius: 14px; padding: 15px 22px;
  z-index: 20; font-size: 14px; box-shadow: 0 6px 22px #0b102d24;
}

/* ---------- Eenvoudige tekstpagina (voorwaarden, privacy) ---------- */
.bs-text-page { max-width: 760px; margin: 48px auto 64px; padding: 0 24px; }
.bs-text-page h2 { font-size: 22px; margin: 32px 0 10px; letter-spacing: -.5px; }
.bs-text-page p, .bs-text-page li { font-size: 16px; line-height: 26px; }
.bs-text-page p + p { margin-top: 12px; }
.bs-concept-note { background: var(--bs-yellow-soft); border-radius: var(--bs-radius-m); padding: 16px 20px; margin: 20px 0; font-size: 14px; line-height: 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
  .bs-header { padding: 9px 28px; gap: 18px; min-height: 64px; }
  .bs-nav { gap: 22px; font-size: 12px; }
  .bs-footer { padding: 22px 30px; gap: 20px; }
  .bs-footer-nav { gap: 18px; }
  .bs-socials { gap: 10px; }
  .bs-bottom { margin-left: 32px; margin-right: 32px; }
  .bs-topbar { padding: 0 32px; }
}
@media (max-width: 1099px) {
  .bs-nav { display: none; }
  .bs-menu-button { display: block; }
  .bs-footer { flex-wrap: wrap; }
  .bs-footer-nav { order: 3; justify-content: flex-start; width: 100%; }
}
@media (max-width: 767px) {
  .bs-header { padding: 10px 20px; min-height: 65px; }
  .bs-header .bs-logo { width: 156px; }
  .bs-header-actions > .bs-button { display: none; }
  .bs-footer { padding: 28px 24px; gap: 24px; }
  .bs-footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; }
  .bs-socials { gap: 12px; }
  .bs-topbar { min-height: 70px; padding: 0 20px; }
  .bs-topbar .bs-logo { width: 157px; }
  .bs-topbar-right { gap: 10px; }
  .bs-caption { display: none; }
  .bs-bottom { margin: 16px 20px 0; padding: 18px 0; align-items: flex-start; flex-direction: column; gap: 8px; }
  .bs-title { font-size: 31px; line-height: 1.15; letter-spacing: -1.2px; }
  .bs-title > .bs-icon, .bs-title .bs-inline-hand { display: none; }
  .bs-subtitle { font-size: 16px; line-height: 24px; }
  .bs-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bs-category { padding: 12px 7px 8px; }
  .bs-category img, .bs-more-icon { height: 93px; }
  .bs-category figcaption { font-size: 12px; }
  .bs-timeline { margin: 20px -9px; }
  .bs-timeline li { font-size: 10px; line-height: 15px; }
  .bs-status-dot { width: 29px; height: 29px; }
  .bs-timeline li:not(:last-child)::after { top: 14px; left: calc(50% + 15px); width: calc(100% - 30px); }
  .bs-dialog-body { padding: 30px 24px 25px; }
  .bs-dialog h2 { font-size: 24px; line-height: 30px; }
}
@media (max-width: 360px) {
  .bs-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-title { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.bs-nav a[aria-current=page] { font-weight: 700; }
/* Categoriefoto met eigen achtergrond (accept/*) netjes in de tegel */
.bs-category img.bs-photo-bg { object-fit: cover; border-radius: 12px; mix-blend-mode: multiply; }

/* ---------- Blok "Wat houd ik over?" (rekenhulp.js) ---------- */
.bs-earnings { max-width: 1240px; margin: 40px auto; padding: 0 32px; }
.bs-earn-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; background: radial-gradient(ellipse at 95% 95%, #ffdcad 0, transparent 55%), linear-gradient(100deg, #fff4ae, #fff7c9); border-radius: 28px; padding: 36px 40px; }
.bs-earn-copy .bs-section-title { margin: 4px 0 12px; }
.bs-earn-intro { font-size: 17px; line-height: 26px; max-width: 560px; }
.bs-earn-steps { list-style: none; margin: 20px 0 18px; padding: 0; display: grid; gap: 8px; max-width: 520px; }
.bs-earn-steps li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; }
.bs-earn-range { color: var(--bs-blue); }
.bs-earn-bar { height: 12px; background: #ffffffa6; border-radius: 99px; overflow: hidden; }
.bs-earn-bar i { display: block; height: 100%; background: var(--bs-pink); border-radius: 99px; }
.bs-earn-steps strong { text-align: right; font-size: 15px; color: var(--bs-ink); }
.bs-earn-promises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.bs-earn-promises li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.bs-earn-promises img { width: 17px; height: 17px; }
.bs-earn-card { background: #fff; border-radius: 24px; padding: 26px; box-shadow: 0 16px 40px #5e481018; }
.bs-earn-label { display: block; font-size: 15px; font-weight: 700; color: var(--bs-ink); margin-bottom: 8px; }
.bs-earn-input { display: flex; align-items: center; gap: 6px; border: 2px solid var(--bs-ink); border-radius: 16px; padding: 0 16px; font: 900 26px var(--bs-heading); color: var(--bs-ink); }
.bs-earn-input input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; padding: 10px 0; outline: none; }
.bs-earn-input:focus-within { outline: 3px solid var(--bs-focus); outline-offset: 2px; }
.bs-earn-range-input { width: 100%; margin: 14px 0 8px; accent-color: var(--bs-pink); }
.bs-earn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bs-earn-chips button { border: 1px solid var(--bs-line); background: #fffdf7; border-radius: 99px; padding: 6px 14px; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.bs-earn-chips button:hover { border-color: var(--bs-ink); }
.bs-earn-result { display: block; background: var(--bs-softpink); border-radius: 18px; padding: 14px 18px; margin-bottom: 12px; }
.bs-earn-result span { display: block; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.bs-earn-result strong { display: block; font-family: var(--bs-heading); font-size: 40px; line-height: 1.1; color: var(--bs-pink-dark); letter-spacing: -1px; }
.bs-earn-result small { display: block; font-size: 13px; color: var(--bs-blue); margin-top: 2px; }
.bs-earn-steps li { opacity: .45; transition: opacity .2s; }
.bs-earn-steps li.is-used { opacity: 1; }
.bs-earn-calc { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--bs-blue); }
.bs-earn-calc li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; }
.bs-earn-calc strong { color: var(--bs-ink); }
.bs-earn-small { font-size: 13px; line-height: 19px; color: var(--bs-blue); margin: 12px 0 0; max-width: 520px; }
.bs-earn-split { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: #eee; }
.bs-earn-split .you { background: var(--bs-pink); transition: flex .25s; }
.bs-earn-split .us { background: #d9d5ca; transition: flex .25s; }
.bs-earn-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bs-muted); margin: 6px 0 12px; }
.bs-earn-legend span { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.bs-earn-legend span:first-child { margin-left: 0; }
.bs-earn-legend .you { background: var(--bs-pink); }
.bs-earn-legend .us { background: #d9d5ca; }
.bs-earn-note { font-size: 13px; line-height: 19px; color: var(--bs-muted); margin-bottom: 16px; }
.bs-earn-note a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .bs-earn-inner { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; } }
@media (max-width: 560px) {
  .bs-earnings { padding: 0 16px; margin: 28px auto; }
  .bs-earn-inner { padding: 24px 18px; border-radius: 22px; }
  .bs-earn-steps li { grid-template-columns: 96px minmax(0, 1fr) 40px; font-size: 13px; }
  .bs-earn-card { padding: 20px 16px; }
  .bs-earn-result strong { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { .bs-earn-split i { transition: none; } }
@media (max-width: 640px) {
  .bs-earn-calc li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  .bs-earn-calc li span:nth-child(2) { grid-row: 2; font-size: 12px; color: var(--bs-muted); }
  .bs-earn-calc li strong { grid-row: 1 / 3; grid-column: 2; align-self: center; }
}
/* Pilotregel: gratis insturen vanaf {{minItems}} spullen */
.bs-min-items { background: var(--bs-softpink); border-radius: 14px; padding: 12px 14px; margin: 14px 0 0; font-size: 14px; line-height: 21px; color: var(--bs-ink); }
.bs-min-items strong { display: inline-block; margin-bottom: 2px; }
.bs-min-items.acc-min { max-width: 860px; margin: 18px auto 0; text-align: center; }