/* frank: dit is de styling, nu met de m3 kleuren en de cookie banner. */
:root {
    --primary-color: #0B69C1;
    --primary-hover-color: #0A58A3;
    --primary-container-color: #CFE6FC;
    --on-primary-container-color: #031A30;
    --secondary-color: #653994;
    --tertiary-color: #C50076;
    
    --bg-color: #FCFCFD;
    --text-color: #171A1C;
    --text-muted-color: #6c757d;
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-border: rgba(0, 0, 0, 0.08);

    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 11, 105, 193;
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--card-border);
    --bs-accordion-button-color: var(--text-color);
    --bs-nav-link-color: var(--text-muted-color);
    --bs-nav-link-hover-color: var(--primary-color);
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover-color);
    --bs-btn-hover-border-color: var(--primary-hover-color);
}

[data-bs-theme="dark"] {
    --bg-color: #171A1C;
    --text-color: #E3E2E6;
    --text-muted-color: #adb5bd;
    --card-bg: rgba(30, 30, 30, 0.75);
    --card-border: rgba(255, 255, 255, 0.15);

    --bs-body-color: var(--text-color);
    --bs-secondary-color: var(--text-muted-color);
    --bs-accordion-border-color: var(--card-border);
    --bs-accordion-button-color: var(--text-color);
    --bs-nav-link-color: var(--text-muted-color);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

.background-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-image: radial-gradient(circle at 10% 20%, rgba(11, 105, 193, 0.08), transparent 30%), radial-gradient(circle at 80% 90%, rgba(197, 0, 118, 0.05), transparent 30%);
    background-attachment: fixed;
}

header {
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--card-border);
}

.logo span { color: var(--text-color); }
.nav-link { font-weight: 600; }
.btn-icon { background: none !important; border: none !important; box-shadow: none !important; }
.btn-icon .material-icons { color: var(--text-color); }
.theme-icon-dark { display: none; }
[data-bs-theme="dark"] .theme-icon-dark { display: block; }
[data-bs-theme="dark"] .theme-icon-light { display: none; }

section { padding: 5rem 0; }

.glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, border 0.3s ease;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.feature-card .icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    background-color: var(--primary-container-color);
    padding: 0.75rem;
    border-radius: 0.75rem;
}
[data-bs-theme="dark"] .feature-card .icon {
    color: var(--primary-container-color);
    background-color: var(--on-primary-container-color);
}


.accordion-button:not(.collapsed) { color: var(--primary-color); background-color: transparent; box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button::after { filter: grayscale(1) brightness(150%); }
[data-bs-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(150%); }

#faq h3 { color: var(--text-muted-color); }

footer {
    background-color: var(--bg-color);
    border-top: 1px solid var(--card-border);
    transition: background-color 0.3s ease;
}
footer .logo span, footer h6 { color: var(--text-color); }
footer .nav-link, footer .text-muted { color: var(--bs-secondary-color) !important; }
footer .nav-link:hover { color: var(--primary-color) !important; }

/* frank: contact-stepper styling */
.contact-flow-stepper .contact-flow-step { background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--card-border); border-radius: 1rem; margin-bottom: 1.5rem; transition: all 0.4s ease-in-out; }
.contact-flow-step .step-header { display: flex; align-items: center; padding: 1.25rem 1.5rem; cursor: default; }
.contact-flow-step .step-header h3 { margin: 0; transition: color 0.3s ease; }
.contact-flow-step .step-icon { margin-right: 1rem; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; transition: background-color 0.3s ease, color 0.3s ease; }
.contact-flow-step .step-icon::before { font-family: 'Material Icons'; font-size: 1.25rem; }
.contact-flow-step .step-body { max-height: 0; overflow: hidden; padding: 0 1.5rem; transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; }
.contact-flow-step.step-active .step-body { padding: 0 1.5rem 1.5rem; max-height: 600px; }
.contact-flow-step.step-upcoming .step-header { opacity: 0.5; }
.contact-flow-step.step-upcoming .step-icon { background-color: var(--bs-secondary-color); }
.contact-flow-step.step-active { border-color: var(--primary-color); }
.contact-flow-step.step-active .step-header h3 { color: var(--primary-color); }
.contact-flow-step.step-active .step-icon { background-color: var(--primary-color); color: #fff; }
.contact-flow-step.step-active .step-icon::before { content: 'edit'; font-size: 1rem; }
.contact-flow-step.step-completed .step-header { opacity: 0.7; }
.contact-flow-step.step-completed .step-icon { background-color: #198754; color: #fff; }
.contact-flow-step.step-completed .step-icon::before { content: 'check'; font-size: 1.25rem; }
#summary-content p { margin-bottom: 0.5rem; }
#summary-content strong { color: var(--text-color); }

/* frank: styling voor de cookie banner */
#cookie-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1050;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(200%);
    transition: transform 0.5s ease-in-out;
}
#cookie-banner.show {
    transform: translateY(0);
}
.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted-color);
}
.cookie-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
@media (max-width: 576px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-actions {
        margin-top: 1rem;
        justify-content: center;
    }
}