/* ===========================================================
   funnel.css
   Gedeelde componenten voor alle funnel-pagina's.
   Gebruikt de Webflow design tokens uit kristel-jansen.webflow.shared.min.css
   zodat één wijziging in een variabele overal doorwerkt.
   =========================================================== */

/* === Topbar (gedeelde header met logo) === */
.topbar{background:var(--_primitives---colors--paars);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:center}
.topbar__logo{height:2.5rem;width:auto;display:block}

/* === Landing-page scroll progress (de balk die met scroll meegroeit) === */
.progress-bar{transform:translateX(-100%);transform-origin:left center;will-change:transform}

/* === FAQ accordion === */
.faq4_answer{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease}
.faq4_accordion.is-open .faq4_answer{max-height:1200px;padding-bottom:1rem}
.faq4_question{cursor:pointer;user-select:none}
.faq4_icon-wrappper{transition:transform .25s ease}
.faq4_accordion.is-open .faq4_icon-wrappper{transform:rotate(45deg)}

/* === Hero opt-in form (inline op landing) === */
.hero-optin{max-width:34rem;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
.hero-optin__title{font-family:var(--_typography---font-styles--heading);font-weight:700;font-size:1.125rem;line-height:1.3;color:inherit;margin:0 0 .25rem;white-space:nowrap}
.hero-optin__input{font:inherit;font-family:var(--_typography---font-styles--body);font-size:1rem;padding:.85rem 1.1rem;border:1px solid var(--_primitives---colors--paars-lighter);border-radius:.625rem;background:var(--_primitives---colors--paars-lightest);color:var(--_primitives---colors--paars-darkest);outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;width:100%;box-sizing:border-box}
.hero-optin__input::placeholder{color:var(--_primitives---colors--neutral)}
.hero-optin__input:focus{border-color:var(--_primitives---colors--lichtpaars);background:var(--_primitives---colors--white);box-shadow:0 0 0 3px rgba(131,0,233,.25)}
.hero-optin__submit{font:inherit;font-family:var(--_typography---font-styles--heading);font-weight:600;font-size:1rem;border:none;cursor:pointer;background:var(--_primitives---colors--oranje);color:var(--_primitives---colors--white);border-radius:100px;padding:.95rem 1.75rem;transition:transform .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.25rem}
.hero-optin__submit:hover{transform:translateY(-1px)}
.hero-optin__submit:active{transform:translateY(0)}
.hero-optin__arrow{transition:transform .2s ease}
.hero-optin__submit:hover .hero-optin__arrow{transform:translateX(3px)}
@media (max-width:560px){
  .hero-optin__title{white-space:normal;font-size:1.1rem}
}

/* === Modal (popup met opt-in form) === */
.modal{position:fixed;inset:0;display:none;z-index:1000;align-items:center;justify-content:center;padding:1rem}
.modal.is-open{display:flex;animation:funnelFade .2s ease-out}
.modal__overlay{position:absolute;inset:0;background:rgba(20,0,40,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal__panel{position:relative;background:var(--_primitives---colors--paars);color:var(--_primitives---colors--white);border-radius:1rem;padding:2.5rem 2rem 2rem;max-width:30rem;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4);max-height:90vh;overflow-y:auto;animation:funnelSlide .25s ease-out}
.modal__close{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--_primitives---colors--white);font-size:1.75rem;line-height:1;cursor:pointer;border-radius:.5rem;display:flex;align-items:center;justify-content:center;padding:0}
.modal__close:hover{background:rgba(255,255,255,.1)}
.modal .hero-optin{margin:0;max-width:100%}
.modal .hero-optin__title{white-space:normal;font-size:1.25rem;color:var(--_primitives---colors--white)}
body.no-scroll{overflow:hidden}

/* === Questionnaire / vragenlijst === */
.q-wrap{max-width:46rem;margin:0 auto;padding:3rem 1.5rem 5rem}
.q-screen{display:none}
.q-screen.is-active{display:block;animation:funnelFade .35s ease}

.q-progress{height:.4rem;background:var(--_primitives---colors--paars-lightest);border-radius:100px;overflow:hidden;margin-bottom:2rem}
.q-progress__fill{height:100%;background:var(--_primitives---colors--lichtpaars);border-radius:100px;width:0;transition:width .35s ease}

.q-step{display:none;animation:funnelFade .35s ease}
.q-step.is-active{display:block}
.q-step__question,.q-screen--intro h1{font-family:var(--_typography---font-styles--heading);font-size:clamp(1.4rem,3vw,1.875rem);font-weight:700;line-height:1.25;margin:0 0 1.5rem;color:var(--_primitives---colors--paars)}
.q-step__hint{color:var(--_primitives---colors--neutral);font-size:.95rem;margin:-1rem 0 1.75rem}

/* Option cards (unselected = wit + zachte paarse rand, selected = paarse accent) */
.q-options{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.75rem}
.q-option{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;background:var(--_primitives---colors--white);border:1.5px solid var(--_primitives---colors--paars-lighter);border-radius:.85rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease;font-size:1.0625rem;line-height:1.4;color:var(--_primitives---colors--paars-darkest)}
.q-option:hover{border-color:var(--_primitives---colors--lichtpaars-light);background:var(--_primitives---colors--paars-lightest)}
.q-option:active{transform:scale(.99)}
.q-option input{position:absolute;opacity:0;pointer-events:none}
.q-option__indicator{flex-shrink:0;width:1.35rem;height:1.35rem;border:2px solid var(--_primitives---colors--paars-lighter);background:var(--_primitives---colors--white);display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,background .15s ease}
.q-option--radio .q-option__indicator{border-radius:50%}
.q-option--check .q-option__indicator{border-radius:.3rem}
.q-option input:checked + .q-option__indicator{border-color:var(--_primitives---colors--lichtpaars);background:var(--_primitives---colors--lichtpaars)}
.q-option--radio input:checked + .q-option__indicator::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--_primitives---colors--white)}
.q-option--check input:checked + .q-option__indicator::after{content:"";width:.7rem;height:.45rem;border-left:2.5px solid var(--_primitives---colors--white);border-bottom:2.5px solid var(--_primitives---colors--white);transform:rotate(-45deg) translate(1px,-1px)}
.q-option:has(input:checked){background:var(--_primitives---colors--lichtpaars-lightest);border-color:var(--_primitives---colors--lichtpaars)}

/* Rating scale 1-10 */
.q-rating{display:grid;grid-template-columns:repeat(10,1fr);gap:.4rem;margin-bottom:.5rem}
.q-rating__btn{aspect-ratio:1;border:1.5px solid var(--_primitives---colors--paars-lighter);background:var(--_primitives---colors--white);color:var(--_primitives---colors--paars-darkest);font-family:var(--_typography---font-styles--heading);font-weight:700;font-size:1rem;border-radius:.55rem;cursor:pointer;transition:all .15s ease}
.q-rating__btn:hover{background:var(--_primitives---colors--paars-lightest);border-color:var(--_primitives---colors--lichtpaars-light)}
.q-rating__btn.is-selected{background:var(--_primitives---colors--lichtpaars);border-color:var(--_primitives---colors--lichtpaars);color:var(--_primitives---colors--white);transform:scale(1.05)}
.q-rating-labels{display:flex;justify-content:space-between;font-size:.8rem;color:var(--_primitives---colors--neutral);margin-bottom:1.75rem}

/* Action row + buttons */
.q-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem}
.q-btn{font:inherit;font-family:var(--_typography---font-styles--heading);font-weight:600;font-size:1rem;border:none;cursor:pointer;background:var(--_primitives---colors--oranje);color:var(--_primitives---colors--white);border-radius:100px;padding:.95rem 1.75rem;display:inline-flex;align-items:center;gap:.5rem;transition:transform .15s ease,opacity .15s ease;text-decoration:none}
.q-btn:hover:not(:disabled){transform:translateY(-1px)}
.q-btn:disabled{opacity:.5;cursor:not-allowed}
.q-btn--ghost{background:transparent;border:none;color:var(--_primitives---colors--paars);opacity:.5;padding:.95rem 1rem;box-shadow:none}
.q-btn--ghost:hover:not(:disabled){opacity:.9;background:transparent;transform:none}
.q-btn--ghost svg{display:none}
.q-btn svg{transition:transform .2s ease}
.q-btn:hover:not(:disabled) svg{transform:translateX(3px)}

/* Final / bedankt-scherm */
.q-screen--final{text-align:center;padding-top:1rem}
.q-screen--final h1,.q-screen--final p{text-align:center}
.q-screen--final p{max-width:32rem;margin-left:auto;margin-right:auto}
.q-screen--final .check-icon{width:5rem;height:5rem;border-radius:50%;background:var(--_primitives---colors--lichtpaars);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}

/* === Calendar buttons (add-to-agenda op masterclass-bevestiging) === */
.calendar-buttons{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:42rem}
.calendar-btn{flex:1 1 0;min-width:9rem;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:var(--_primitives---colors--white);border:1.5px solid var(--_primitives---colors--paars-lighter);border-radius:.75rem;padding:.85rem 1rem;color:var(--_primitives---colors--paars);font-family:var(--_typography---font-styles--heading);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .15s ease,background .15s ease,transform .1s ease;cursor:pointer}
.calendar-btn:hover{border-color:var(--_primitives---colors--lichtpaars);background:var(--_primitives---colors--paars-lightest)}
.calendar-btn:active{transform:scale(.99)}
.calendar-btn svg,.calendar-btn__icon{flex-shrink:0;width:1.5rem;height:1.5rem;display:block;object-fit:contain}
.calendar-download-link{display:inline-block;margin-top:1rem;font-size:.875rem;color:var(--_primitives---colors--neutral);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;font-family:inherit}
.calendar-download-link:hover{color:var(--_primitives---colors--paars)}
@media (max-width:560px){
  .calendar-btn{flex:1 1 100%}
}

/* === Focus wrapper (gestipte paarse omlijning, gebruikt op upsell pagina) ===
   Webflow-origineel: was uitgefilterd door PurgeCSS, hier weer opgenomen. */
.focus_wrapper{border:4px dashed var(--_primitives---colors--lichtpaars);border-radius:var(--_ui-styles---radius--small,.5rem);background-color:var(--_primitives---colors--white);width:100%;max-width:42.1875rem;color:var(--_primitives---colors--paars);margin-top:2rem;margin-left:auto;margin-right:auto;padding:2rem 3.75rem;box-sizing:border-box}
@media (max-width:680px){
  .focus_wrapper{padding-left:2rem;padding-right:2rem}
}

/* === Upsell / one-time-offer page ===
   Uses Webflow section/grid wrappers (section_header1, section_layout1, etc.) +
   these custom components for product-specific UI. */
.offer-image-frame{background:var(--_primitives---colors--paars-lightest);border-radius:var(--_ui-styles---radius--large,1rem);padding:2.5rem;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1}
.offer-image{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain}
.offer-bullets{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-direction:column;gap:.85rem}
.offer-bullets li{position:relative;padding-left:2.25rem;font-size:1.0625rem;line-height:1.5;color:inherit}
.offer-bullets li::before{content:"";position:absolute;left:0;top:.15rem;width:1.4rem;height:1.4rem;background:var(--_primitives---colors--lichtpaars);border-radius:50%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");background-size:.85rem;background-position:center;background-repeat:no-repeat}
.offer-price{display:flex;align-items:baseline;gap:.5rem;margin:1.5rem 0 0;flex-wrap:wrap}
.offer-price__amount{font-family:var(--_typography---font-styles--heading);font-size:3rem;font-weight:700;color:var(--_primitives---colors--paars);line-height:1}
.offer-price__per{font-size:1rem;color:var(--_primitives---colors--neutral);font-style:italic}
@media (max-width:680px){
  .offer-image-frame{padding:2rem;aspect-ratio:auto;min-height:18rem}
}

@keyframes funnelFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes funnelSlide{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

@media (max-width:520px){
  .q-rating{grid-template-columns:repeat(5,1fr)}
}