/* css/style.css */
:root {
    --bg-color: #050505;
    --surface-color: #121212;
    --surface-color-light: #1e1e1e;
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --accent-color: #4FC3F7;
    --accent-hover: #29b6f6;
    --border-color: rgba(255, 255, 255, 0.1);
    
    --font-primary: 'Outfit', sans-serif;
    --font-script: 'Great Vibes', cursive;
    
    --container-width: 1200px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Vaste breedte voor gecentreerde sectietitels, zodat een lange titel (bv.
   "Veelgestelde vragen over ...") netjes over twee regels breekt in plaats
   van edge-to-edge te lopen. Titels die bewust links staan (.text-left,
   bv. de about-sectie) blijven op hun volle kolombreedte. */
.section-title:not(.text-left) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    hyphens: none;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--accent-color);
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.text-gradient {
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shiny-text {
    position: relative;
    display: inline-block;
}

.shiny-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg, 
        transparent 0%, 
        transparent 40%, 
        rgba(255, 255, 255, 0.9) 50%, 
        transparent 60%, 
        transparent 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: shine-sweep 6s infinite linear;
    pointer-events: none;
}

@keyframes shine-sweep {
    0% { background-position: -200% 0; }
    15% { background-position: 200% 0; }
    100% { background-position: 200% 0; } /* Wait before next sweep */
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: all 0.5s ease;
    z-index: 1;
}

.btn:hover::before {
    left: 200%;
}

.btn span, .btn i {
    position: relative;
    z-index: 2;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    /* Removed box-shadow as requested */
}

.btn-outline {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-outline:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
    background: transparent;
}

.header.scrolled {
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    pointer-events: none; /* Let clicks pass through to columns beneath if needed */
}

.logo-img {
    height: 160px;
    width: auto;
    margin-top: -10px;
    margin-bottom: -100px;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
    pointer-events: auto; /* Logo image itself is clickable if it was a link, but container isn't blocking */
}

.header.scrolled .logo-img {
    height: 70px;
    margin-bottom: 0;
    margin-top: 0;
    filter: none;
}

/* Redundant nav hidden */
.nav {
    display: none;
}

.header-left {
    z-index: 1200;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
}

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 22px;
    color: var(--text-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.menu-toggle i {
    font-size: 1.4rem;
}

/* Fullscreen Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(15px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.menu-close {
    position: absolute;
    top: 40px;
    right: 40px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 2.5rem;
    cursor: pointer;
    transition: var(--transition);
    opacity: 0;
    transform: scale(0.5);
}

.menu-overlay.active .menu-close {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.5s;
}

.menu-close:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.menu-overlay-logo {
    height: 80px;
    width: auto;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s ease 0.2s;
}

.menu-overlay.active .menu-overlay-logo {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay-links {
    list-style: none;
    text-align: center;
    margin-bottom: 50px;
}

.menu-overlay-links li {
    margin-bottom: 25px;
    overflow: hidden;
}

.menu-overlay-links a {
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-overlay.active .menu-overlay-links a {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay-links li:nth-child(1) a { transition-delay: 0.3s; }
.menu-overlay-links li:nth-child(2) a { transition-delay: 0.4s; }
.menu-overlay-links li:nth-child(3) a { transition-delay: 0.5s; }
.menu-overlay-links li:nth-child(4) a { transition-delay: 0.6s; }
.menu-overlay-links li:nth-child(5) a { transition-delay: 0.7s; }
.menu-overlay-links li:nth-child(6) a { transition-delay: 0.8s; }

.menu-overlay-links a:hover,
.menu-overlay-links a.active {
    color: var(--accent-color);
}

.menu-overlay-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.9s; /* Pushed by 0.1s */
}

.menu-overlay.active .menu-overlay-actions {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay-socials {
    display: flex;
    gap: 25px;
    margin-top: 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 1.0s; /* Pushed by 0.1s */
}

.menu-overlay.active .menu-overlay-socials {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay-socials a {
    color: var(--text-color);
    font-size: 1.5rem;
    transition: var(--transition);
}

.menu-overlay-socials a:hover {
    color: var(--accent-color);
    transform: translateY(-5px);
}

.menu-overlay .btn {
    min-width: 250px;
    justify-content: center;
}

.nav {
    display: none; /* Hidden on all devices, replaced by menu-overlay */
}

/* Base Sections */
.section {
    padding: 100px 0;
}

/* Footer */
.footer {
    background-color: var(--surface-color);
    padding: 80px 0 0;
    border-top: 1px solid var(--border-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    margin-bottom: 60px;
}

.footer-logo {
    margin-bottom: 1.5rem;
}

.footer-col h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-logo {
    display: inline-block;
    margin-bottom: 2rem;
}

.footer-logo:hover img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

.footer-col p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--surface-color-light);
    color: var(--text-color);
    font-size: 1.2rem;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.social-links a:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(79, 195, 247, 0.3);
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--text-muted);
    display: inline-block;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--accent-color);
    transform: translateX(5px);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: var(--text-muted);
}

.contact-info li i {
    color: var(--accent-color);
    margin-top: 5px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.contact-info a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    background-color: #000;
    padding: 25px 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    border-top: 1px solid #1a1a1a;
}

/* Drie delen: copyright links, links in het midden, bouwer rechts. */
.footer-bottom-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.footer-bottom-grid p {
    margin: 0;
}

.footer-bottom-left  { text-align: left; }
.footer-bottom-center { text-align: center; }
.footer-bottom-right { text-align: right; }

.footer-bottom-center a,
.footer-bottom-right a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
}

.footer-bottom-center a:hover,
.footer-bottom-right a:hover {
    color: var(--accent-hover);
}

.footer-bottom-sep {
    margin: 0 8px;
    opacity: 0.5;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 99;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* FAQ Accordion */
.faq-container {
    max-width: 800px;
    margin: 0 auto 40px;
}

.faq-group-cta {
    max-width: 800px;
    margin: -10px auto 40px;
}

.faq-group-title {
    max-width: 800px;
    margin: 40px auto 20px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent-color);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(79, 195, 247, 0.2);
    letter-spacing: -0.01em;
}

.faq-group-title:first-child {
    margin-top: 0;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item:hover {
    border-color: rgba(var(--accent-color-rgb), 0.5);
    background: rgba(255, 255, 255, 0.05);
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.faq-question i {
    font-size: 0.9rem;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.2);
}

.faq-answer-content {
    padding: 0 25px 25px;
    color: var(--text-muted);
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Large enough for content */
}

/* Reviews Marquee */
.reviews-section {
    overflow: hidden;
    position: relative;
}

.marquee-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Full width break out */
    position: relative;
    padding: 20px 0;
}

.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color), transparent);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color), transparent);
}

.marquee-row {
    display: flex;
    width: max-content;
}

.marquee-group {
    display: flex;
    flex-shrink: 0;
    gap: 30px;
    padding-right: 30px;
    animation: marquee-scroll 45s linear infinite;
}

.marquee-row.reverse .marquee-group {
    animation-direction: reverse;
}

.marquee-row:hover .marquee-group {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.review-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    width: 380px;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.review-card:hover {
    border-color: rgba(79, 195, 247, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

.review-stars {
    color: #FFD700;
    margin-bottom: 15px;
    font-size: 1rem;
}

.review-text {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.1rem;
}

.review-card:nth-child(even) .author-avatar {
    background: var(--accent-color);
    color: #000;
}

.author-info h4 {
    margin: 0;
    font-size: 1rem;
    color: #fff;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* Bij minder dan 3 pakketten de kaarten mooi centreren i.p.v. links in een
   grid met lege kolommen te laten staan. */
.pricing-grid-count-1 {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.pricing-grid-count-2 {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent-color);
    color: #fff;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.35);
    z-index: 2;
}

.pricing-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(79, 195, 247, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pricing-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.pricing-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}

.pricing-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: block;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    text-align: left;
    flex-grow: 1; /* Pushes button to bottom */
}

.pricing-features li {
    margin-bottom: 15px;
    color: #ddd;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.55;
}

.pricing-features li i {
    color: var(--accent-color);
    margin-top: 5px;
    flex-shrink: 0;
}

.pricing-features li.is-missing {
    color: var(--text-muted);
    opacity: 0.6;
}

.pricing-features li.is-missing i {
    color: var(--text-muted);
}

.pricing-features .feature-text {
    flex: 1;
    display: block;
}

.pricing-features .feature-text strong {
    display: inline;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pricing-features .feature-detail {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
}

/* Vergelijkende regels: label boven, daaronder de korte waarde. Na "Meer
   informatie" maakt de korte waarde plaats voor Hendriks volledige toelichting. */
.pricing-features.is-compared .feature-text strong {
    display: block;
    margin-bottom: 2px;
}

.pricing-features .feature-short {
    display: block;
    color: #bbb;
    font-size: 0.95rem;
}

.pricing-card.is-expanded .pricing-features .feature-short.has-detail {
    display: none;
}

.pricing-features li.is-missing .feature-text strong {
    color: var(--text-muted);
}

.pricing-features li.is-missing .feature-short {
    color: var(--text-muted);
    font-style: italic;
}

/* Standaard alleen labels tonen en de introtekst inkorten tot 3 regels,
   tot er op "Meer informatie" geklikt wordt (zie .pricing-card.is-expanded). */
.pricing-description {
    max-height: 4.5em; /* 3 regels bij line-height 1.5 */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.pricing-card.is-expanded .pricing-description {
    max-height: 40em;
}

.pricing-card.is-expanded .pricing-features .feature-text strong {
    display: block;
    margin-bottom: 3px;
}

.pricing-card.is-expanded .pricing-features .feature-detail {
    max-height: 20em;
    opacity: 1;
}

.pricing-expand-toggle {
    align-self: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin: 0 0 24px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.pricing-expand-toggle:hover {
    background: rgba(79, 195, 247, 0.1);
    border-color: rgba(79, 195, 247, 0.4);
}

.pricing-expand-toggle i {
    transition: transform 0.3s ease;
}

.pricing-expand-toggle.is-active i {
    transform: rotate(180deg);
}

.pricing-card .btn {
    width: 100%;
    margin-top: auto;
}

.optional-treatments-grid {
    display: grid;
    grid-template-columns: repeat(var(--ot-cols, 3), 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.optional-treatments-grid > div {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Utilities */
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 4rem; }
.text-center { text-align: center; }

/* --- Homepage Sections --- */
/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--surface-color); /* Fallback */
    padding-top: 80px;
    overflow: hidden;
}

.hero-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Overgangsduur komt uit het homepage-dashboard; deze waarde geldt
       alleen als de inline style om wat voor reden ook ontbreekt. */
    --hero-fade: 8s;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity var(--hero-fade, 8s) ease-in-out;
}

/* Hogere specificiteit dan [data-hc-edit] { position: relative; transition:
   all 0.2s ease; } uit frontend-editor.css (laadt voor ingelogde
   beheerders): anders vallen de slides terug in de normale documentflow
   i.p.v. over elkaar heen te liggen (tweede foto nooit zichtbaar), en wordt
   de trage crossfade overschreven door de 0.2s hover-transition van de
   editor (fade lijkt dan bijna instant). */
.hero-slides .hero-slide {
    position: absolute;
    transition: opacity var(--hero-fade, 8s) ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.4) 100%);
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 700px;
}

.text-left {
    text-align: left !important;
}

.mt-5 {
    margin-top: 4rem !important;
}

.mt-4 {
    margin-top: 2.5rem !important;
}

.hero-badge {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(79, 195, 247, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-desc {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 3rem;
}

.hero-stats {
    display: flex;
    gap: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #ccc;
}

.stat-item i {
    color: var(--accent-color);
}

/* Services Sections */
.bg-surface {
    background-color: var(--surface-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

/* Foto bovenin de kaart, met een scheidingslijn naar de donkere
   kaartachtergrond eronder i.p.v. tekst over de hele foto heen. */
.service-card-media {
    position: relative;
    height: 200px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-bottom: 2px solid rgba(79, 195, 247, 0.4);
    transition: var(--transition);
}

.service-card-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(79, 195, 247, 0.3);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}

.service-card:hover .service-card-media {
    filter: brightness(1.08);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.service-card p {
    color: var(--text-muted);
    margin-bottom: 25px;
    height: 4.8em; /* ~3 regels, vast zodat elke kaart evenveel tekst toont */
    overflow: hidden;
}

.service-link {
    color: var(--accent-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.service-link i { transition: transform 0.25s ease; }
.service-card:hover .service-link i { transform: translateX(4px); }

/* Contact-form meldingen */
.hc-form-success,
.hc-form-error {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px 24px;
    border-radius: 10px;
    margin-bottom: 24px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.hc-form-success {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: #d1fae5;
}

.hc-form-success i {
    color: #10b981;
    font-size: 1.5rem;
    margin-top: 2px;
}

.hc-form-success h3 {
    color: #fff;
    margin: 0 0 4px 0;
    font-size: 1.1rem;
}

.hc-form-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
    align-items: center;
}

.hc-form-error i {
    color: #ef4444;
    font-size: 1.3rem;
}

.hc-form-error a {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Aanbevolen-badge op service-card (zowel homepage als /diensten) */
.service-card.is-recommended {
    outline: 1px solid rgba(79, 195, 247, 0.5);
    box-shadow: 0 0 25px rgba(79, 195, 247, 0.12);
}

.service-card .service-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--accent-color);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.35);
}

/* Before / After Slider */
.ba-section {
    background-color: var(--bg-color);
}

.ba-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.ba-content .section-subtitle {
    text-transform: none;
    font-size: 1.25rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.ba-benefits {
    margin-bottom: 2rem;
}

.ba-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.ba-benefits i {
    color: #000;
    background: var(--accent-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.ba-slider-container {
    position: relative;
    /* De schuif volgt de vinger; zonder dit scrollt de pagina mee. */
    touch-action: none;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid var(--border-color);
}

.ba-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #222;
}

.ba-before {
    width: 100%;
    z-index: 2;
    overflow: hidden;
    clip-path: inset(0 50% 0 0);
}

.placeholder-img {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.after-bg { background: linear-gradient(45deg, #111, #2a2a2a); }
.before-bg { background: linear-gradient(45deg, #2a2a2a, #444); width: 200%; }

.ba-slider-input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 100%;
    background: transparent;
    outline: none;
    margin: 0;
    z-index: 5;
    cursor: ew-resize;
}

.ba-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px; height: 100%;
    background: transparent;
    cursor: ew-resize;
}

.ba-slider-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 4px;
    background: var(--accent-color);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
}

.ba-slider-button {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    border: 3px solid #fff;
}

/* About Snippet */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start; /* Changed from center to allow sticky to work from top */
}

.about-img {
    position: sticky;
    top: 120px; /* Distance from top of screen */
}

.about-content {
    align-self: center; /* Tekstkolom in het midden naast de (sticky) foto */
}

.image-wrapper {
    aspect-ratio: 3/4;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.img-placeholder {
    width: 100%; height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #333;
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--accent-color);
    color: #000;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
}

.experience-badge .number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.experience-badge .text {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
}

.quote-box {
    padding: 20px 25px;
    border-left: 4px solid var(--accent-color);
    background: var(--surface-color-light);
    border-radius: 0 8px 8px 0;
    margin-top: 30px;
}

.quote-box p {
    margin-bottom: 0;
    color: #fff;
    font-size: 1.1rem;
}

/* CTA Banner */
.cta-banner {
    padding: 100px 0;
    background: linear-gradient(rgba(5, 5, 5, 0.85), rgba(5, 5, 5, 0.85)), url('../img/hemrikacarcleaning_hero1.jpg') center/cover no-repeat fixed;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.cta-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-box h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-box p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-whatsapp {
    background-color: #25d366;
    color: #fff;
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

/* --- Diensten Page --- */
.page-header {
    background: linear-gradient(rgba(5, 5, 5, 0.8), rgba(5, 5, 5, 0.9)), url('../img/hero-bg.jpg') center/cover no-repeat;
    padding: 200px 0 80px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.page-header p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 650px;
    margin: 0 auto;
}

.hero-title {
    font-size: 4.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.service-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
}

.service-detail-row.reverse {
    direction: rtl;
}

.service-detail-row.reverse > * {
    direction: ltr;
}

.service-icon-large {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 25px;
}

.service-detail-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.service-detail-content p {
    color: #e0e0e0;
    font-size: 1.05rem;
    margin-bottom: 25px;
}

.features-list {
    margin-bottom: 30px;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.features-list i {
    color: var(--accent-color);
}

.service-detail-img {
    height: 100%;
}

.service-detail-img .placeholder-img {
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.action-banner {
    background: linear-gradient(135deg, rgba(79, 195, 247, 0.1) 0%, rgba(5, 5, 5, 1) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 60px;
    margin-top: 50px;
}

.action-content h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.action-card {
    background: var(--surface-color);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 30px;
    position: relative;
    transition: var(--transition);
}

.action-card:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 195, 247, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.action-card h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.action-card h3 small {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.action-list {
    margin-bottom: 30px;
}

.action-list li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
    color: #ddd;
}

.action-list li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--accent-color);
}

.action-price {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    position: absolute;
    bottom: 30px;
    right: 30px;
}

.action-combo {
    background: rgba(255,255,255,0.03);
    border-left: 4px solid var(--accent-color);
    padding: 25px;
    border-radius: 0 8px 8px 0;
}

/* --- Portfolio Page --- */
.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.95rem;
}

.filter-btn:hover, .filter-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.portfolio-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

a.portfolio-item { display: block; color: inherit; text-decoration: none; }

.portfolio-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover .portfolio-img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 30px 20px 20px;
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
}

.portfolio-overlay h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.portfolio-overlay span {
    color: var(--accent-color);
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* --- Contact Page --- */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info-boxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.info-box i {
    font-size: 2rem;
    color: var(--accent-color);
}

.info-box h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.info-box p, .info-box a {
    color: var(--text-muted);
}

.contact-form {
    background: var(--surface-color);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-primary);
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.08);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.map-container {
    height: 400px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 50px;
    border: 1px solid var(--border-color);
}

/* --- Lange woorden in koppen (bv. "Showroombehandeling") niet laten uitsteken op mobiel --- */
/* Lange woorden mogen afbreken als ze echt niet passen, maar niet met
   koppeltekens middenin gewone woorden (hyphens: auto deed dat wel). */
.page-title, .service-detail-content h2, .section-title, .hc-block-title, .pricing-card h3 { overflow-wrap: break-word; hyphens: manual; }

/* --- Tekstblokken (dienst) ---
   Kaarten in een grid i.p.v. losse stukken tekst onder elkaar: titel +
   ingekorte intro zijn meteen zichtbaar, de checklist klapt open via
   "Meer informatie" zodat een blok met veel punten niet de hele pagina
   vult. */
.hc-blocks { margin: 60px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }

/* Eén blok: vaste leesbreedte i.p.v. edge-to-edge, en alles direct
   zichtbaar (geen toggle om voor te doen alsof er iets te verbergen valt). */
.hc-blocks-single { grid-template-columns: minmax(0, 820px); justify-content: center; }
.hc-blocks-single .hc-block-text { height: auto; max-height: none; }
.hc-blocks-single .hc-block-list { max-height: none; opacity: 1; overflow: visible; margin-top: 18px; }

.hc-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 35px;
    display: flex;
    flex-direction: column;
}

.hc-block-icon { font-size: 1.8rem; color: var(--accent-color); margin-bottom: 18px; }
.hc-block-title { font-size: 1.4rem; margin-bottom: 12px; }

.hc-block-text {
    color: #ddd;
    line-height: 1.7;
    height: 5.1em; /* ~3 regels, vast (niet max) zodat kortere tekst niet voor een kleinere kaart zorgt */
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.hc-block-text p { margin-bottom: 1em; }
.hc-block.is-expanded .hc-block-text { height: auto; max-height: 40em; }

.hc-block-expand-toggle {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    margin: 18px 0 0;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.hc-block-expand-toggle:hover { background: rgba(79, 195, 247, 0.1); border-color: rgba(79, 195, 247, 0.4); }
.hc-block-expand-toggle i { transition: transform 0.3s ease; }
.hc-block.is-expanded .hc-block-expand-toggle i { transform: rotate(180deg); }

.hc-block-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}
.hc-block.is-expanded .hc-block-list { max-height: 40em; opacity: 1; margin-top: 18px; }
.hc-block-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: #ddd; line-height: 1.5; }
.hc-block-list li i { color: var(--accent-color); margin-top: 4px; flex-shrink: 0; }

/* --- Voor/na-galerij (dienst + portfolio) --- */
.hc-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin: 30px 0 50px; }
.hc-gallery-item { margin: 0; background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.hc-gallery-item .ba-slider-container { aspect-ratio: 4/3; height: auto; border-radius: 0; }
.hc-gallery-item .ba-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-gallery-single { aspect-ratio: 4/3; overflow: hidden; }
.hc-gallery-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-gallery-caption { padding: 10px 10px 10px 16px; font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-gallery-caption-text { flex: 1; }

.hc-gallery-zoom {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--transition);
}
.hc-gallery-zoom:hover { background: var(--accent-color); border-color: var(--accent-color); color: #000; }

/* --- Lightbox (galerijfoto's vergroot bekijken) --- */
.hc-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 60px 20px;
    background: rgba(5,5,5,0.92);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.hc-lightbox.is-open { opacity: 1; }
.hc-lightbox-inner {
    max-width: 900px;
    width: 100%;
    max-height: 100%;
}
.hc-lightbox-inner img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; border-radius: 8px; display: block; margin: 0 auto; }
.hc-lightbox-inner .ba-slider-container { position: relative; aspect-ratio: 4/3; height: auto; max-height: 78vh; border-radius: 8px; overflow: hidden; }
.hc-lightbox-caption { text-align: center; color: #ddd; margin-top: 16px; font-size: 0.95rem; }
.hc-lightbox-close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.hc-lightbox-close:hover { background: var(--accent-color); color: #000; border-color: var(--accent-color); }

/* --- FAQ op dienstpagina --- */
.dienst-faq { max-width: 900px; margin: 0 auto 40px; }

/* --- CTA-rij onderaan dienstpagina: "Terug" links, "Offerte" in het midden --- */
.dienst-cta-row { position: relative; display: flex; justify-content: center; align-items: center; gap: 15px; }
.dienst-cta-row .btn-outline { position: absolute; left: 0; }
@media (max-width: 576px) {
    .dienst-cta-row { position: static; flex-direction: column; }
    .dienst-cta-row .btn-outline { position: static; }
}

/* --- Portfolio detailpagina --- */
.portfolio-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; }
.portfolio-details .info-box { margin: 0; }
.portfolio-quote { border-left: 3px solid var(--accent-color); padding: 15px 25px; margin: 30px 0; font-style: italic; color: #ddd; }

/* --- WPForms in het donkere thema --- */
/* WPForms 'modern markup' stuurt kleuren via CSS-variabelen; die zetten we
   hier op de kleuren van het thema. Geldt voor elk formulier op de site
   (contact, offerte en wat er later nog bij komt). Zonder dit zijn de labels
   bijna onleesbaar en staat er een lichtgroen bevestigingsblok op zwart. */
.wpforms-container {
    --wpforms-label-color: #ddd;
    --wpforms-label-sublabel-color: #a0a0a0;
    --wpforms-label-error-color: #ff8a8a;
    --wpforms-field-background-color: rgba(255,255,255,0.05);
    --wpforms-field-text-color: #ffffff;
    --wpforms-field-border-color: rgba(255,255,255,0.1);
    --wpforms-field-border-radius: 4px;
    --wpforms-field-size-input-height: 52px;
    --wpforms-field-menu-color: #111315;
    --wpforms-button-background-color: var(--accent-color);
    --wpforms-button-text-color: #000000;
    --wpforms-button-border-radius: 4px;
    --wpforms-page-break-color: var(--accent-color);
}
.wpforms-container .wpforms-form .wpforms-field-label,
.wpforms-container .wpforms-form .wpforms-field-sublabel,
.wpforms-container .wpforms-form .wpforms-field-description { color: #ddd; }
.wpforms-container .wpforms-form .wpforms-field-description { font-size: 0.85rem; color: var(--text-muted); }
.wpforms-container .wpforms-form .wpforms-field-label { font-weight: 600; margin-bottom: 6px; }
.wpforms-container .wpforms-form .wpforms-required-label { color: var(--accent-color); }
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form input[type=url],
.wpforms-container .wpforms-form input[type=number],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    transition: var(--transition);
}
.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder { color: rgba(255,255,255,0.35); }
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus { outline: none; border-color: var(--accent-color); background: rgba(255,255,255,0.08); }
.wpforms-container .wpforms-form select option { background-color: #111315; color: #fff; }
.wpforms-container .wpforms-form .wpforms-uploader { background: rgba(255,255,255,0.03); border: 2px dashed var(--border-color); border-radius: 8px; color: #ddd; }
.wpforms-container .wpforms-form .wpforms-uploader .modern-title,
.wpforms-container .wpforms-form .wpforms-uploader .modern-hint,
.wpforms-container .wpforms-form .wpforms-uploader .dz-message { color: #ddd; }
.wpforms-container .wpforms-form .wpforms-uploader .modern-title a { color: var(--accent-color); }
.wpforms-container .wpforms-form .wpforms-submit-container { margin-top: 20px; }
.wpforms-container .wpforms-form button[type=submit] {
    background-color: var(--accent-color);
    color: #000;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 0;
    border-radius: 4px;
    transition: var(--transition);
}
.wpforms-container .wpforms-form button[type=submit]:hover { background-color: var(--accent-hover); transform: translateY(-2px); }
.wpforms-container .wpforms-form .wpforms-error { color: #ff8a8a; }

/* Bevestiging en foutmelding. WPForms zet deze zelf met een selector van twee
   klassen diep, dus die specificiteit halen we hier ook. */
div.wpforms-container-full.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: rgba(79,195,247,0.1);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    color: #fff;
    padding: 22px 24px;
}
div.wpforms-container-full.wpforms-container-full .wpforms-confirmation-container-full p { color: #fff; margin: 0; }
div.wpforms-container-full.wpforms-container-full .wpforms-error-container {
    background: rgba(255,138,138,0.08);
    border: 1px solid rgba(255,138,138,0.4);
    border-radius: 8px;
    color: #ffb3b3;
    padding: 16px 18px;
}

/* --- Offertepagina --- */
.offerte-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; margin-bottom: 60px; }
.offerte-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); border-radius: 12px; padding: 35px; }
.offerte-card h2 { font-size: 1.7rem; margin-bottom: 10px; }
.offerte-card .features-list { margin: 20px 0; }
.offerte-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 20px; }
.offerte-card-img { margin-top: 25px; border-radius: 8px; overflow: hidden; aspect-ratio: 16/10; }
.offerte-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offerte-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
@media (max-width: 992px) {
    .offerte-grid, .offerte-choice { grid-template-columns: 1fr; }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s ease-in-out;
        z-index: 1000;
    }
    
    .nav.active {
        left: 0;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .mobile-menu-btn {
        display: block;
    }

    .header-actions .btn {
        display: flex;
        padding: 10px 15px;
    }

    .header-actions .btn span {
        display: none;
    }

    .header-actions .btn i {
        margin: 0;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .page-title {
        font-size: 2.5rem !important;
    }

    .logo-img {
        height: 80px;
        margin-bottom: -40px;
    }

    .header.scrolled .logo-img {
        height: 50px;
    }

    .menu-toggle {
        padding: 10px 15px;
    }

    .menu-toggle span {
        display: none;
    }

    .hero {
        text-align: center;
        padding-top: 150px;
        padding-bottom: 60px;
    }
    
    .hero-content {
        align-items: center;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .about-grid,
    .contact-container,
    .action-grid,
    .ba-grid,
    .pricing-grid,
    .optional-treatments-grid {
        /* minmax(0, 1fr) in plaats van 1fr: anders kan een brede cel de
           kolom oprekken tot voorbij de schermrand. */
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* De foto bij "Over Hemrica" bleef op mobiel meescrollen en kwam onder
       de tekst door. Sticky heeft daar geen ruimte voor. */
    .about-img {
        position: static;
        top: auto;
    }

    .service-detail-row {
        grid-template-columns: 1fr;
        gap: 50px; /* More space between button and image as requested */
        margin-bottom: 40px; /* Further reduced space between services (above titles) */
        direction: ltr !important;
    }

    .service-detail-row.reverse {
        direction: ltr !important;
    }

    .action-combo {
        border-left: none;
        border-top: 4px solid var(--accent-color);
        border-radius: 8px;
        margin-top: 20px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Menu Overlay Mobile Fixes */
    .menu-overlay {
        justify-content: flex-start;
        padding-top: 20px;
    }

    .menu-overlay-header {
        position: absolute;
        top: 30px;
        left: 30px;
        margin: 0;
    }

    .menu-close {
        top: 30px;
        right: 30px;
    }

    .menu-overlay-logo {
        height: 50px;
    }

    .menu-overlay-links {
        margin-top: 120px;
        gap: 5px;
        margin-bottom: 20px;
    }

    .menu-overlay-links a {
        font-size: 1.5rem;
        padding: 5px 0;
    }

    .menu-overlay-actions {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        gap: 10px;
    }

    .menu-overlay-actions .btn {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .menu-overlay-socials {
        margin-top: 20px;
        gap: 20px;
    }

    /* Review Carousel Mobile Fixes */
    .marquee-wrapper {
        margin-left: 0;
        width: 100%;
        padding: 0;
        gap: 20px;
    }

    .marquee-wrapper::before,
    .marquee-wrapper::after {
        display: none; /* Remove shadows to make it cleaner on small screens */
    }

    .marquee-row {
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 10px 0 20px;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .marquee-row::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }

    .marquee-group {
        animation: none !important;
        padding-right: 20px;
        padding-left: 20px; /* Offset first card slightly */
    }

    .marquee-group[aria-hidden="true"] {
        display: none !important; /* Hide duplicate row on mobile */
    }

    .review-card {
        width: 85vw; /* Almost full width for better readability */
        max-width: 320px;
        scroll-snap-align: center;
        flex-shrink: 0;
    }
}

/* Zoekveld in de menu-overlay. Verschijnt mee met de menu-animatie, net
   na de links en net voor de knoppen. */
.menu-overlay-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(460px, 86vw);
    margin: 0 auto 35px;
    padding: 6px 6px 6px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.85s, border-color 0.25s ease, background 0.25s ease;
}

.menu-overlay.active .menu-overlay-search {
    opacity: 1;
    transform: translateY(0);
}

.menu-overlay-search:focus-within {
    border-color: rgba(79, 195, 247, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.menu-overlay-search i {
    color: var(--text-muted);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.menu-overlay-search input[type="search"] {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 0;
    -webkit-appearance: none;
    appearance: none;
}

.menu-overlay-search input[type="search"]::placeholder {
    color: var(--text-muted);
}

.menu-overlay-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.menu-overlay-search button {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--accent-color);
    color: #0a0a0a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.menu-overlay-search button:hover {
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(79, 195, 247, 0.3);
}

.menu-overlay-search button i {
    color: inherit;
    font-size: 0.9rem;
}

@media (max-width: 576px) {
    .menu-overlay-search {
        margin-bottom: 28px;
        padding-left: 16px;
    }

    .footer-bottom {
        text-align: center;
    }

    /* Op mobiel onder elkaar, gecentreerd. */
    .footer-bottom-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .footer-bottom-left,
    .footer-bottom-center,
    .footer-bottom-right {
        text-align: center;
    }
}

/* Standaard WordPress-klasse: alleen zichtbaar voor schermlezers. */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Labels "Voor" en "Na" op de vergelijkingsslider. De voor-foto wordt vanaf
   rechts weggeknipt, dus links staat altijd "voor" en rechts "na". De labels
   vangen geen muis, anders kun je de schuif daar niet meer pakken. */
.ba-label {
    position: absolute;
    top: 14px;
    z-index: 4;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.ba-label-before {
    left: 14px;
}

.ba-label-after {
    right: 14px;
    background: rgba(79, 195, 247, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
    color: #0a0a0a;
}

@media (max-width: 576px) {
    .ba-label {
        top: 10px;
        padding: 4px 10px;
        font-size: 0.62rem;
        letter-spacing: 1px;
    }
    .ba-label-before { left: 10px; }
    .ba-label-after  { right: 10px; }
}

/* Openingstijden — rooster in de footer en op de contactpagina */
.hours-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    padding: 4px 0;
}

.hours-list .hours-days {
    font-weight: 600;
}

.hours-list .hours-time {
    white-space: nowrap;
}

.footer-hours-note,
.contact-hours-note {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.contact-hours .hours-list li {
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .contact-hours .hours-list .hours-days {
        min-width: 170px;
    }
}

/* Op smalle schermen mag het tijdvak afbreken, anders duwt het de pagina
   breder dan het scherm. */
@media (max-width: 767px) {
    .hours-list .hours-time {
        white-space: normal;
    }
}

/* Footer: dagnaam boven de tijden, behalve bij "Op afspraak" */
.footer-hours .hours-list li {
    display: block;
    padding: 0 0 10px;
}

.footer-hours .hours-days,
.footer-hours .hours-time {
    display: block;
}

.footer-hours li.hours-note .hours-days,
.footer-hours li.hours-note .hours-time {
    display: inline;
}

.footer-hours li.hours-note .hours-days::after {
    content: ':';
}

.footer-hours li.hours-note .hours-time {
    margin-left: 5px;
}

/* --- Cookiemelding --- */
.hc-cookiebar {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    max-width: 640px;
    margin: 0 auto;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hc-cookiebar.is-open {
    opacity: 1;
    transform: translateY(0);
}

.hc-cookiebar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
}

.hc-cookiebar-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.hc-cookiebar-text a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

.hc-cookiebar-text a:hover {
    border-bottom-color: var(--accent-color);
}

.hc-cookiebar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hc-cookiebar-btn {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.hc-cookiebar-accept {
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #050505;
}

.hc-cookiebar-accept:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.hc-cookiebar-decline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.hc-cookiebar-decline:hover {
    border-color: var(--text-muted);
    color: var(--text-color);
}

.hc-cookie-herzien {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.hc-cookie-herzien:hover {
    opacity: 1;
    color: var(--accent-color);
}

@media (max-width: 576px) {
    .hc-cookiebar {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .hc-cookiebar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 18px;
    }

    .hc-cookiebar-actions {
        justify-content: stretch;
    }

    .hc-cookiebar-btn {
        flex: 1;
    }
}

/* --- Lopende tekst op gewone pagina's (privacyverklaring, voorwaarden) --- */
.hc-prose {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.8;
}

.hc-prose h2 {
    color: var(--text-color);
    font-size: 1.5rem;
    margin: 45px 0 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.hc-prose h2:first-child {
    margin-top: 0;
}

.hc-prose h3 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin: 30px 0 10px;
}

.hc-prose p {
    margin-bottom: 18px;
}

.hc-prose ul,
.hc-prose ol {
    margin: 0 0 18px 22px;
}

.hc-prose li {
    margin-bottom: 10px;
}

.hc-prose strong {
    color: var(--text-color);
}

.hc-prose a {
    color: var(--accent-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

.hc-prose a:hover {
    border-bottom-color: var(--accent-color);
}

.hc-prose em {
    font-size: 0.9rem;
    opacity: 0.8;
}