/* ===== CUSTOM FONTS ===== */
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFPRODISPLAYREGULAR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFPRODISPLAYMEDIUM.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('../fonts/SFPRODISPLAYBOLD.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== CSS VARIABLES ===== */
:root {
    --color-brand: #6adbd9;
    --color-heading: #124846;
    --color-nav: #212529;
    --color-text: #2d3d3d;
    --color-black: #1e1e1e;
    --color-white: #ffffff;
}

/* ===== BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'DM Sans', sans-serif;
    color: var(--color-text);
    line-height: 1.3;
    overflow-x: hidden;
}
.font-sf { font-family: 'SF Pro Display', 'DM Sans', sans-serif; }
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-orbitron { font-family: 'Orbitron', sans-serif; }
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; transition: all 0.3s; }
.container { max-width: 1230px; margin: 0 auto; padding: 0 15px; }

/* ===== BUTTONS ===== */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 16px;
    min-width: 182px;
    height: 45px;
    border-radius: 60px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}
.btn-brand:hover { background: #2bb4b1; }

/* Voorkomt een donkere anti-alias-rand ("zwart streepje") aan de afgeronde
   randen van pill-elementen die over de YouTube-iframe liggen: promoot ze
   naar een eigen GPU-/compositing-laag. */
.nav-pill,
.btn-brand,
.btn-brand-sm,
.btn-outline,
.btn-outline-footer,
.btn-pill-fix {
    border-radius: 60px;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.btn-brand-sm {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--color-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    min-width: 164px;
    height: 45px;
    border-radius: 60px;
    transition: all 0.3s;
    cursor: pointer;
}
.btn-brand-sm:hover { background: #2bb4b1; }
/* Zodat deze knop-classes identiek ogen op zowel <a> als <button> */
.btn-brand, .btn-brand-sm, .btn-outline, .btn-outline-footer { font-family: inherit; }
button.btn-brand-sm { border: none; }

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 16px;
    min-width: 182px;
    height: 45px;
    border-radius: 60px;
    border: 1px solid var(--color-brand);
    transition: all 0.3s;
    cursor: pointer;
}
.btn-outline:hover { background: var(--color-brand); color: #1b1b18; }
.btn-outline:hover svg path { stroke: #1b1b18; }

.btn-outline-footer {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    color: var(--color-brand);
    font-size: 16px;
    font-weight: 700;
    padding: 8px 16px;
    min-width: 182px;
    height: 45px;
    border-radius: 60px;
    border: 1px solid var(--color-brand);
    transition: all 0.3s;
    cursor: pointer;
}
.btn-outline-footer:hover { background: var(--color-brand); color: #1b1b18; }
.btn-outline-footer:hover svg path { stroke: #1b1b18; }

/* ===== HEADER ===== */
#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    padding: 4px 0;
    transition: background 0.3s, padding 0.3s;
}
#main-header.scrolled {
    position: fixed;
    background: rgba(30,30,30,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2px 0;
}
/* Desktop nav pill */
.nav-pill {
    display: none;
    gap: 18px;
}
@media (min-width: 768px) {
    .nav-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 12px 22px;
        border-radius: 60px;
    }
}
/* Volle grootte pas op grote schermen; daaronder compact zodat de
   gecentreerde nav samen met logo + knoppen blijft passen. */
@media (min-width: 1280px) {
    .nav-pill {
        gap: 30px; /* gap-7.5 = 30px */
        padding: 16px 40px;
    }
}
/* Compacte navbar tussen tablet en desktop: kleinere knoppen + nav-links
   zodat de nav exact gecentreerd blijft en niets afkapt of overlapt. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    #main-header .nav-link {
        font-size: 13px;
    }
    #main-header .btn-brand-sm {
        min-width: 0;
        height: 38px;
        font-size: 13px;
        padding: 6px 12px;
        gap: 8px;
    }
}

.nav-link {
    color: var(--color-nav);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s;
    white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: #6ADBD9; }

/* ===== MOBILE MENU ===== */
#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    padding: 24px;
    overflow-y: auto;
}
#mobile-menu.open { transform: translateY(0); }
#mobile-menu .nav-link { color: #fff; font-size: 18px; font-weight: 500; }
#mobile-menu .nav-link:hover { color: var(--color-brand); }

/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-section .video-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero-section .video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.77vh;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}
@media (min-aspect-ratio: 16/9) {
    .hero-section .video-background iframe {
        width: 100vw;
        height: 56.25vw;
    }
}
/* Overlay over de video: vangt ALLE muis-/touch-events af zodat YouTube
   nooit play-knop, titel of controls toont (ook niet bij hover), en geeft
   de hero-tekst contrast. */
.hero-section .video-overlay {
    background: rgba(15, 23, 32, 0.25);
    pointer-events: auto;
    cursor: default;
}

/* ===== HERO — METALLIC TEKST ===== */
/* Gepolijst-staal verloop met een lichtband die heen en weer 'glanst'. */
.metal-text {
    background: linear-gradient(100deg,
        #8b9097 0%,
        #e9ebee 16%,
        #ffffff 28%,
        #aeb3b9 44%,
        #6c7077 56%,
        #c4c8cd 70%,
        #ffffff 84%,
        #9aa0a6 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    animation: metalShine 5s ease-in-out infinite alternate;
}
@keyframes metalShine {
    0%   { background-position: 0% center; }
    100% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
    .metal-text { animation: none; }
}

/* ===== "WIJ BEWIJZEN HET" — SCREAM-KOP ===== */
.scream-heading {
    text-wrap: balance;
}
.scream-heading .text-brand {
    background: linear-gradient(180deg, #6adbd9 0%, #2bb4b1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===== WORKING STEPS ===== */
/* Achtergrond: lange overgang wit -> donkerblauw over de hele sectie.
   Bovenaan wit (sluit aan op de witte sectie erboven), onderaan volledig
   donkerblauw (sluit aan op de blauwe prijzen-sectie eronder). */
.working-steps {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 22%, #0b1f3a 100%);
}
.steps-gradient {
    background: linear-gradient(to top, #0b1f3a, transparent);
}

/* ===== FEATURES SLIDER — gelijke kaarthoogtes ===== */
.featuresSwiper .swiper-wrapper { align-items: stretch; }
.featuresSwiper .swiper-slide { height: auto; }

/* ===== PRICING TOGGLE ===== */
.pricing-toggle { position: relative; display: inline-flex; background: #f1f1f1; border-radius: 60px; padding: 4px; }
.pricing-toggle button {
    padding: 10px 24px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}
.pricing-toggle button.active { background: var(--color-brand); color: #fff; }

/* ===== PRICING CARDS ===== */
.pricing-card {
    background: #fff;
    border: 2px solid #f1f1f1;
    border-radius: 20px;
    padding: 40px 30px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    /* Eigen compositing-laag: voorkomt streep-/outline-artefacten bij scrollen. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* Inhoud vult de kaart; knop wordt naar de onderkant geduwd zodat alle
   knoppen op dezelfde lijn staan, ongeacht de lengte van de lijst. */
.pricing-single {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.pricing-single > a {
    margin-top: auto;
}
.pricing-card:hover {
    transform: translateY(-10px) scale(1.035);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4);
    border-color: var(--color-brand);
    z-index: 2;
}
.pricing-card.featured {
    border-color: var(--color-brand);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3), 0 0 34px rgba(106, 219, 217, 0.45);
    animation: featuredGlow 3.2s ease-in-out infinite;
    z-index: 1;
}
.pricing-card.featured:hover {
    transform: translateY(-10px) scale(1.045);
    animation: none;
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4), 0 0 50px rgba(106, 219, 217, 0.7);
}
@keyframes featuredGlow {
    0%, 100% { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3), 0 0 26px rgba(106, 219, 217, 0.35); }
    50%      { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3), 0 0 50px rgba(106, 219, 217, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .pricing-card.featured { animation: none; }
}
/* Abonnement "Beste deal"-rij — subtiele glans die voorbij veegt */
.sub-best { overflow: hidden; }
.sub-best::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: subShine 3.8s ease-in-out infinite;
}
@keyframes subShine {
    0%   { left: -60%; }
    40%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .sub-best::after { display: none; }
}

.most-chosen-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--color-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 60px;
    text-transform: uppercase;
}

/* ===== FAQ ACCORDION ===== */
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-heading);
}
.faq-question svg { transition: transform 0.3s; flex-shrink: 0; }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0;
}
.faq-item.open .faq-answer { max-height: 500px; padding-bottom: 20px; }

/* ===== GALLERY FILTER ===== */
.gallery-filter button {
    padding: 10px 20px;
    border-radius: 60px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
}
.gallery-filter button.active,
.gallery-filter button:hover {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

/* ===== TESTIMONIAL CARD ===== */
.testimonial-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Navigatiepijlen testimonials-carrousel */
.testi-arrow {
    position: absolute;
    top: calc((100% - 3rem) / 2); /* midden van de kaarten (3rem = pb-12 voor de bolletjes) */
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #fff;
    color: var(--color-heading);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.testi-arrow:hover {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}
.testi-prev { left: -6px; }
.testi-next { right: -6px; }
@media (min-width: 1280px) {
    .testi-prev { left: -24px; }
    .testi-next { right: -24px; }
}

/* ===== BEFORE/AFTER SLIDER ===== */
.ba-slider {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: col-resize;
}
.ba-slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.ba-slider .ba-after { clip-path: inset(0 0 0 50%); }
.ba-slider .ba-before { clip-path: inset(0 50% 0 0); }
.ba-slider .ba-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-brand);
    left: 50%;
    z-index: 2;
}
.ba-slider .ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;
    height: 55px;
    background: var(--color-brand);
    border: 2px solid var(--color-brand);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: col-resize;
}

/* ===== FOOTER ===== */
footer {
    background: var(--color-black);
    position: relative;
    overflow: hidden;
}

/* Footer — ronde bubbels die langzaam omhoog stijgen */
.water-drop {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(106,219,217,0.6), rgba(58,203,198,0.2));
    animation: bubbleRise linear infinite;
    animation-fill-mode: backwards;
    box-shadow: inset -1px -1px 2px rgba(255,255,255,0.25);
}
@keyframes bubbleRise {
    0%   { transform: translateY(100vh) scale(0.4); opacity: 0; }
    8%   { opacity: 0.8; }
    50%  { transform: translateY(40vh) scale(1); opacity: 0.6; }
    85%  { opacity: 0.3; }
    100% { transform: translateY(-20vh) scale(0.6); opacity: 0; }
}
.water-drop:nth-child(3n) {
    background: radial-gradient(circle at 30% 30%, rgba(106,219,217,0.5), rgba(58,203,198,0.1));
}
.water-drop:nth-child(5n) {
    animation-name: bubbleDrift;
}
@keyframes bubbleDrift {
    0%   { transform: translateY(100vh) translateX(0) scale(0.45); opacity: 0; }
    10%  { opacity: 0.7; }
    50%  { transform: translateY(45vh) translateX(25px) scale(0.9); opacity: 0.4; }
    100% { transform: translateY(-15vh) translateX(-15px) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .water-drop { animation: none; opacity: 0; }
}
.footer-cta {
    background: #2B2B2B;
    color: #fff;
    font-weight: 700;
    padding: 24px;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: all 0.3s;
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 10000;
    display: none;
}
.cookie-banner.show { display: block; }

/* ===== WHATSAPP FLOATING WIDGET (klik-naar-chat) ===== */
#wa-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990; /* onder cookiebalk (10000) en modals */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    /* De container zelf vangt GEEN klikken op: het (verborgen) paneel neemt
       ruimte in en zou anders een grote onzichtbare zone rechtsonder vormen
       die over onderliggende knoppen (zoals "Boek een behandeling") heen valt.
       Alleen de knop en het geopende paneel zijn klikbaar (zie hieronder). */
    pointer-events: none;
}
.wa-fab,
.wa-panel { pointer-events: auto; }
.wa-fab {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 9999px;
    background: #25D366;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgba(0,0,0,0.3); }
.wa-fab svg { width: 32px; height: 32px; }
/* Subtiele pulserende ring */
.wa-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    animation: waPulse 2.4s infinite;
}
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
#wa-widget.open .wa-fab::after { animation: none; }

.wa-panel {
    width: 320px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    transform-origin: bottom right;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s;
}
#wa-widget.open .wa-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}
.wa-head {
    background: #075E54;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.wa-head-avatar {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wa-head-info { flex: 1; min-width: 0; }
.wa-head-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.wa-head-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.wa-head-status::before { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: #4ade80; display: inline-block; }
.wa-close {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    opacity: 0.8;
    padding: 0 2px;
}
.wa-close:hover { opacity: 1; }

.wa-body { background: #ECE5DD; padding: 18px 16px; }
.wa-bubble {
    background: #fff;
    border-radius: 0 10px 10px 10px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text);
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
    max-width: 92%;
}
.wa-bubble-name { font-size: 12px; font-weight: 700; color: #075E54; margin-bottom: 2px; }

.wa-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; background: #fff; }
.wa-input {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    max-height: 100px;
    color: var(--color-text);
}
.wa-input:focus { outline: none; border-color: #25D366; }
.wa-send {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #25D366;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.wa-send:hover { background: #1da851; }
.wa-send svg { width: 20px; height: 20px; }

/* ===== SWIPER OVERRIDES ===== */
.swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; border: 1px solid var(--color-brand); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--color-brand); }

/* Foto-marquee (about) — pure CSS, continu en naadloos (stopt nooit) */
.marquee { overflow: hidden; width: 100%; }
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 90s linear infinite;
}
/* Carousel pauzeert bewust NIET bij hover (blijft gewoon doorlopen). */
.marquee-item { flex: 0 0 auto; margin-right: 16px; }
.marquee-item img {
    width: 280px;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
@media (min-width: 768px) {
    .marquee-item img { width: 440px; height: 320px; }
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ===== UTILITIES ===== */
.text-brand { color: var(--color-brand); }
.bg-brand { background-color: var(--color-brand); }
.text-heading { color: var(--color-heading); }

/* ===== BOEK-WIZARD (MODAL) ===== */
.booking-panel {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
#booking-body { flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }

/* Stappen: alleen de actieve is zichtbaar */
.book-step { display: none; }
.book-step.active { display: block; }

/* Secundaire knop (Vorige / Sluiten) — zichtbaar op witte modal-achtergrond */
.btn-book-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: var(--color-heading);
    font-size: 15px;
    font-weight: 700;
    padding: 8px 16px;
    height: 45px;
    border-radius: 60px;
    border: 1px solid #d8dede;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s;
}
.btn-book-secondary:hover { border-color: var(--color-brand); background: rgba(106, 219, 217, 0.08); }

/* Voortgangsbalk */
.book-progress-bar { height: 6px; background: #eef2f2; border-radius: 60px; overflow: hidden; }
.book-progress-fill { height: 100%; background: var(--color-brand); border-radius: 60px; transition: width 0.35s ease; }

/* Selecteerbare kaarten (type dienst & pakketten) */
.book-select {
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.book-select:hover { border-color: var(--color-brand); }
.book-select.selected {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(106, 219, 217, 0.25);
    background: rgba(106, 219, 217, 0.06);
}
/* Vinkje wordt pas zichtbaar bij selectie */
.book-check { opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.book-select.selected .book-check { opacity: 1; transform: scale(1); }
/* In de pakketkaarten verbergen we het vinkje zodat de naam links uitlijnt met
   de beschrijving eronder; selectie blijft zichtbaar via de gekleurde rand. */
.book-pkg .book-check { display: none; }

/* Pakket-details inklapbaar */
.book-pkg-details { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.book-pkg-details.open { max-height: 600px; }
.book-pkg-toggle.open svg { transform: rotate(180deg); }

/* Invoervelden */
.book-field {
    width: 100%;
    border: 1px solid #d8dede;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-text);
    background: #fff;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.book-field:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(106, 219, 217, 0.2); }
.book-field.book-invalid { border-color: #e3342f; box-shadow: 0 0 0 3px rgba(227, 52, 47, 0.15); }
.book-label { display: block; font-size: 13px; font-weight: 600; color: var(--color-heading); margin-bottom: 6px; }

/* Honeypot-veld (anti-spam) — onzichtbaar voor mensen, blijft bereikbaar voor bots */
.book-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Extra services (checkboxes) */
.book-addon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.book-addon:hover { border-color: var(--color-brand); }
.book-addon.checked { border-color: var(--color-brand); background: rgba(106, 219, 217, 0.06); }
.book-addon input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--color-brand); }

/* Bredere modal voor de abonnement-kaarten (naast elkaar) */
.booking-panel.booking-wide { max-width: 64rem; }

/* Abonnement: hergebruik pricing.html, maar compact en naast elkaar in de modal.
   We tonen alleen de kaartkop (naam + prijs/maand + aantal wasbeurten); de lange
   kenmerkenlijst en de wa.me-knoppen verbergen we — details staan al op de site. */
#booking-abonnement section { padding: 16px !important; border-radius: 16px; }
#booking-abonnement .container { padding: 0 !important; max-width: 100% !important; }
#booking-abonnement .container > *:not(.grid) { display: none !important; }
#booking-abonnement .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
@media (min-width: 640px) {
    #booking-abonnement .grid { grid-template-columns: repeat(3, 1fr) !important; }
}
#booking-abonnement .pricing-card { padding: 22px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
#booking-abonnement .pricing-card:hover { transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
#booking-abonnement .pricing-card.featured { animation: none; }
#booking-abonnement .pricing-monthly > .border-t { display: none !important; }
/* Kaart als kolom zodat de "Selecteren in klantportaal"-knop onderaan uitlijnt */
#booking-abonnement .pricing-monthly { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 16px; }
#booking-abonnement .pricing-monthly > a { margin-top: auto; }
/* 'Meest gekozen'-badge gecentreerd bovenaan i.p.v. over de titel (botste op
   mobiel met "Premium X2"); prijs iets kleiner zodat de kaarten netjes in de
   smallere modal passen. */
#booking-abonnement .most-chosen-badge { top: 8px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
#booking-abonnement .pricing-monthly .text-\[42px\] { font-size: 30px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .footer-cta { flex-direction: column; text-align: center; }
}
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
}