/* =========================================================
   Veelgestelde vragen — zelfde gele banner als Hoe het werkt en Wat accepteren we
   ========================================================= */
.faq-hero { background: radial-gradient(ellipse at 95% 90%, #ffdcad 0, transparent 60%), linear-gradient(100deg, #fff4ae, #fff7c9); overflow: hidden; }
.faq-hero-inner { max-width: 1240px; margin: auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 450px; padding: 34px 32px 24px; }
.faq-eyebrow { font-size: 13px; letter-spacing: 1.6px; font-weight: 700; margin-bottom: 10px; color: var(--bs-ink); }
.faq-hero-copy { position: relative; z-index: 1; }
.faq-hero-copy h1 { font-family: var(--bs-heading); font-size: 58px; line-height: 1.02; letter-spacing: -2px; color: var(--bs-ink); }
.faq-hero-copy h1 span, .faq-cta-copy h2 span { color: var(--bs-pink); }
.faq-hero-copy > p { font-size: 18px; line-height: 27px; max-width: 500px; margin: 18px 0 24px; }
.faq-search { display: flex; align-items: center; gap: 12px; background: #fff; padding: 6px 6px 6px 20px; border-radius: 999px; box-shadow: 0 8px 24px #5e481014; max-width: 620px; }
.faq-search > .bs-icon { width: 22px; height: 22px; flex: none; }
.faq-search input { min-width: 0; flex: 1; border: 0; background: none; font-size: 15px; padding: 12px 0; color: var(--bs-ink); }
.faq-search input:focus { outline: none; }
.faq-search:focus-within { outline: 3px solid var(--bs-focus); outline-offset: 3px; }
.faq-search .bs-button { min-height: 46px; padding: 10px 26px; }
.faq-hero-visual { position: relative; align-self: stretch; display: flex; align-items: flex-end; }
.faq-hero-photo { width: 112%; max-width: none; height: 400px; object-fit: contain; }
.faq-doodle { position: absolute; width: 64px; height: 64px; pointer-events: none; }
.faq-hero-visual .faq-doodle { left: 0; top: 24px; transform: rotate(-15deg); }

.faq-page { max-width: 1240px; margin: auto; padding: 36px 32px 44px; }
.faq-section-title { font-family: var(--bs-heading); font-size: 34px; line-height: 1.2; letter-spacing: -1px; color: var(--bs-ink); }

/* Onderwerpen */
.faq-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 22px; margin: 20px 0 42px; }
.faq-category-card { position: relative; min-width: 0; border: 2px solid transparent; border-radius: var(--bs-radius-l); overflow: hidden; min-height: 206px; text-align: left; padding: 18px 20px; isolation: isolate; color: var(--bs-ink); transition: transform .15s, border-color .15s, box-shadow .15s; }
.faq-category-card:hover { transform: translateY(-3px); border-color: #ffc0da; box-shadow: 0 10px 24px #0b0f1a12; }
.faq-category-card[aria-pressed=true] { border-color: var(--bs-pink); box-shadow: 0 0 0 4px #ff4f9324; }
.faq-category-card.pink { background: linear-gradient(110deg, #ffedf4, #fbe7ee); }
.faq-category-card.lilac { background: linear-gradient(110deg, #f4eaff, #f5f0fc); }
.faq-category-card.mint { background: linear-gradient(110deg, #e8fbef, #eaf7ed); }
.faq-category-card.yellow { background: linear-gradient(110deg, #fff7cd, #fff9e2); }
.faq-category-copy { position: relative; z-index: 2; display: block; max-width: 58%; pointer-events: none; }
.faq-category-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #ffffffa6; margin-bottom: 10px; }
.faq-category-icon .bs-icon { width: 28px; height: 28px; }
.faq-category-title { display: block; font-size: 21px; line-height: 25px; font-weight: 800; letter-spacing: -.5px; }
.faq-category-description { display: block; font-size: 14px; line-height: 19px; margin: 5px 0 7px; color: var(--bs-blue); }
.faq-category-count { font-size: 13px; color: var(--bs-muted); }
.faq-category-photo { position: absolute; z-index: 1; right: -8px; top: 6px; width: 46%; height: 160px; object-fit: contain; pointer-events: none; }
.faq-category-card[data-category=sales] .faq-category-photo { mix-blend-mode: multiply; object-fit: cover; right: 0; top: 0; height: 100%; width: 42%; }
.faq-category-card[data-category=money] .faq-category-photo { right: 6px; top: 14px; height: 180px; width: 44%; transform: rotate(4deg); }
.faq-security-visual { position: absolute; right: 24px; top: 20px; width: 112px; height: 122px; transform: rotate(6deg); border-radius: 25px; background: linear-gradient(135deg, #ffdce9, #ff90b9); box-shadow: 6px 9px 20px #bc166523; display: grid; place-items: center; }
.faq-security-visual img { width: 64px; height: 64px; filter: brightness(0) invert(1); }
.faq-category-arrow { position: absolute; right: 16px; bottom: 16px; border-radius: 50%; background: var(--bs-pink); width: 40px; height: 40px; display: grid; place-items: center; z-index: 3; border: 5px solid #ffffffa0; box-sizing: content-box; }
.faq-category-arrow img { filter: brightness(0) invert(1); width: 20px; height: 20px; }

/* Vragenlijst */
.faq-list-section { scroll-margin-top: 24px; }
.faq-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.faq-text-link { border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.faq-text-link .bs-icon { width: 17px; height: 17px; }
.faq-filter-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; min-height: 30px; font-size: 14px; color: var(--bs-muted); }
.faq-filter-reset { border: 1px solid var(--bs-line); border-radius: 99px; background: #fff; padding: 6px 13px; color: var(--bs-ink); font-size: 13px; }
.faq-filter-reset[aria-pressed=true] { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); }
.faq-accordion { display: grid; gap: 8px; }
.faq-item { border: 1px solid #efede7; border-radius: 18px; background: #fff; box-shadow: 0 3px 10px #100c0305; overflow: hidden; }
.faq-item h3 { margin: 0; }
.faq-question { width: 100%; display: flex; align-items: center; gap: 16px; padding: 9px 20px; border: 0; background: none; text-align: left; font-size: 16px; font-weight: 700; min-height: 58px; color: var(--bs-ink); }
.faq-question:hover { background: #fff8fb; }
.faq-question-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--bs-mint); flex: none; }
.faq-question-icon img { width: 20px; height: 20px; }
.faq-question-icon.shipping, .faq-question-icon.impact { background: var(--bs-softpink); }
.faq-question-icon.selection, .faq-question-icon.account { background: var(--bs-lilac); }
.faq-question-icon.money { background: var(--bs-yellow-soft); }
.faq-chevron { margin-left: auto; flex: none; transition: transform .2s; width: 18px; height: 18px; }
.faq-question[aria-expanded=true] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 56px 20px 74px; font-size: 16px; line-height: 25px; color: var(--bs-blue); }
.faq-answer p + p { margin-top: 10px; }
.faq-answer a.faq-text-link { margin-top: 10px; }
.faq-empty { background: var(--bs-yellow-soft); border-radius: var(--bs-radius-l); text-align: center; padding: 36px 20px; }
.faq-empty h3 { font-size: 23px; margin-bottom: 8px; color: var(--bs-ink); }
.faq-empty p { margin-bottom: 18px; }

/* Staffel en rekenhulp in het antwoord */
.faq-staffel { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.faq-staffel table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fffdf7; border-radius: 14px; overflow: hidden; }
.faq-staffel th, .faq-staffel td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #f1eee6; }
.faq-staffel th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--bs-muted); }
.faq-staffel td:last-child { font-weight: 700; color: var(--bs-ink); }
.faq-calc { background: var(--bs-yellow-soft); border-radius: 16px; padding: 16px; }
.faq-calc label { display: block; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.faq-calc-input { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 12px; padding: 0 12px; margin: 6px 0 10px; border: 1px solid #e8dfb5; }
.faq-calc-input input { border: 0; background: none; font: 700 20px var(--bs-font); padding: 9px 0; width: 100%; min-width: 0; color: var(--bs-ink); }
.faq-calc-input input:focus { outline: none; }
.faq-calc output { display: block; font-size: 15px; color: var(--bs-ink); }
.faq-calc output strong { font-family: var(--bs-heading); font-size: 24px; color: var(--bs-pink); }
.faq-calc small { display: block; margin-top: 6px; font-size: 12px; line-height: 17px; color: var(--bs-muted); }

/* Contact */
.faq-contact-cta { position: relative; overflow: hidden; margin-top: 48px; border-radius: 28px; background: radial-gradient(ellipse at 93% 90%, #ffd8a5 0, transparent 60%), linear-gradient(100deg, #fff1a0, #fff5c9); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 310px; padding: 34px 46px; }
.faq-cta-copy { position: relative; z-index: 1; }
.faq-cta-copy h2 { font-family: var(--bs-heading); font-size: 44px; line-height: 1.06; letter-spacing: -1.8px; color: var(--bs-ink); }
.faq-cta-copy p { font-size: 18px; margin: 12px 0 20px; }
.faq-cta-visual { position: relative; }
.faq-cta-photo { width: 100%; height: 250px; object-fit: contain; }
.faq-cta-visual .faq-doodle { left: -20px; top: 30px; transform: rotate(-20deg); }

.faq-contact-modal { margin: auto; border: 0; border-radius: 27px; padding: 30px; width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--bs-paper); color: var(--bs-blue); box-shadow: 0 20px 70px #0b0f1a26; }
.faq-contact-modal::backdrop { background: #0b0f1a55; backdrop-filter: blur(3px); }
.faq-modal-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.faq-modal-head h2 { font-family: var(--bs-heading); font-size: 26px; line-height: 1.2; letter-spacing: -.7px; color: var(--bs-ink); }
.faq-modal-close { flex: none; margin-left: auto; display: grid; place-items: center; border: 0; background: var(--bs-softpink); border-radius: 50%; width: 36px; height: 36px; }
.faq-modal-close img { width: 16px; height: 16px; }
.faq-contact-form { display: grid; gap: 14px; }
.faq-contact-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--bs-ink); }
.faq-contact-form input, .faq-contact-form textarea { width: 100%; border: 1px solid #d6d3cb; border-radius: 12px; padding: 12px 13px; background: #fff; color: var(--bs-ink); font: inherit; font-weight: 400; }
.faq-contact-form textarea { resize: vertical; min-height: 120px; }
.faq-contact-form [aria-invalid=true] { border-color: #ce295b; }
.faq-contact-form .faq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.faq-modal-note { font-size: 12px; line-height: 18px; color: var(--bs-muted); }
.faq-modal-note a { text-decoration: underline; }
.faq-contact-success { text-align: center; background: var(--bs-mint); padding: 26px 18px; border-radius: 18px; }
.faq-contact-success h3 { font-size: 23px; line-height: 1.25; margin-bottom: 9px; color: var(--bs-ink); }
.faq-contact-success p { font-size: 15px; margin-bottom: 18px; }

@media (max-width: 1020px) {
  .faq-hero-copy h1 { font-size: 46px; }
  .faq-hero-photo { height: 340px; }
  .faq-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-contact-cta { padding: 30px; }
  .faq-cta-copy h2 { font-size: 36px; }
}
@media (max-width: 760px) {
  .faq-hero-inner { display: flex; flex-direction: column; padding: 28px 20px 8px; min-height: 0; }
  .faq-hero-copy { width: 100%; }
  .faq-hero-copy h1 { font-size: 40px; letter-spacing: -1.4px; }
  .faq-hero-copy h1 br { display: none; }
  .faq-hero-copy > p { font-size: 16px; line-height: 24px; }
  .faq-search { flex-wrap: wrap; border-radius: 20px; padding: 12px; }
  .faq-search input { width: calc(100% - 40px); padding: 6px 0; }
  .faq-search .bs-button { width: 100%; }
  .faq-hero-visual { width: 100%; justify-content: center; }
  .faq-hero-photo { width: 100%; max-width: 100%; height: 250px; }
  .faq-hero-visual .faq-doodle { width: 46px; height: 46px; }
  .faq-page { padding: 26px 20px 36px; }
  .faq-section-title { font-size: 27px; }
  .faq-categories { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 30px; }
  .faq-category-card { min-height: 190px; }
  .faq-list-heading .faq-text-link { font-size: 13px; flex: none; }
  .faq-question { font-size: 15px; padding: 10px 12px; gap: 10px; }
  .faq-question-icon { width: 32px; height: 32px; }
  .faq-answer { padding: 0 18px 18px 54px; font-size: 15px; line-height: 23px; }
  .faq-staffel { grid-template-columns: minmax(0, 1fr); }
  .faq-contact-cta { margin-top: 32px; padding: 28px 22px 6px; grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .faq-cta-copy h2 { font-size: 33px; letter-spacing: -1px; }
  .faq-cta-copy .bs-button { width: 100%; }
  .faq-cta-photo { height: 220px; }
  .faq-contact-modal { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-category-card, .faq-chevron { transition: none; }
  .faq-category-card:hover { transform: none; }
}
.faq-calc-parts { display: block; font-size: 13px; color: var(--bs-blue); margin-top: 2px; }
/* Zakelijk: brede kaart over de hele rij */
.faq-category-card[data-category=business] { grid-column: 1 / -1; min-height: 170px; }
.faq-category-card[data-category=business] .faq-category-copy { max-width: 62%; }
.faq-category-card[data-category=business] .faq-category-photo { object-fit: cover; right: 0; top: 0; height: 100%; width: 34%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.faq-question-icon.business { background: var(--bs-yellow-soft); }