:root {
    --bsd-primary: #1f91cf;
    --bsd-primary-dark: #12699a;
    --bsd-accent: #ee5b43;
    --bsd-accent-dark: #c9412d;
    --bsd-yellow: #e4df13;
    --bsd-soft: #f3f9fd;
    --bsd-ink: #123047;
    --bsd-muted: #627688;
    --bsd-border: rgba(18, 48, 71, .12);
    --bsd-shadow: 0 1rem 3rem rgba(18, 105, 154, .14);
    --bsd-radius: 1.25rem;
}


/* baloo-bhai-2-latin-wght-normal */
@font-face {
    font-family: 'Baloo';
    font-style: normal;
    font-display: swap;
    font-weight: 400 800;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/baloo-bhai-2:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Baloo, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--bsd-ink);
    background: #fff;
}

.navbar {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--bsd-border);
}

.brand-logo {
    display: block;
    width: auto;
    height: 3rem;
    max-width: 15rem;
    object-fit: contain;
}

.hero-logo-panel {
    display: inline-flex;
    max-width: 34rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.hero-logo {
    display: block;
    width: 850px;
    height: auto;
    max-height: 23rem;
    object-fit: contain;
}

.btn-primary {
    --bs-btn-bg: var(--bsd-primary);
    --bs-btn-border-color: var(--bsd-primary);
    --bs-btn-hover-bg: var(--bsd-primary-dark);
    --bs-btn-hover-border-color: var(--bsd-primary-dark);
    --bs-btn-active-bg: var(--bsd-primary-dark);
    --bs-btn-active-border-color: var(--bsd-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--bsd-primary);
    --bs-btn-border-color: var(--bsd-primary);
    --bs-btn-hover-bg: var(--bsd-primary);
    --bs-btn-hover-border-color: var(--bsd-primary);
}

.text-primary-custom {
    color: var(--bsd-primary) !important;
}

.hero {
    position: relative;
    overflow: hidden;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cline x1='60' y1='0' x2='60' y2='120'/%3E%3Cline x1='0' y1='60' x2='120' y2='60'/%3E%3Crect x='10' y='10' width='100' height='100' rx='2'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(160deg, #c1440e 0%, #a83508 30%, #8b2d07 60%, #6b1f05 100%);
    background-size: 400px 400px, 120px 120px, cover;
    padding: 7.5rem 0 5rem;
    color: #fff;
}

    .hero::after {
        content: "";
        position: absolute;
        inset: auto -10% -25% auto;
        width: 34rem;
        height: 34rem;
        border-radius: 50%;
        background: rgba(193, 68, 14, .25);
        pointer-events: none;
    }

.eyebrow {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .45rem .75rem;
    border: 1px solid rgba(11, 79, 58, .18);
    border-radius: 999px;
    color: var(--bsd-primary-dark);
    background: rgba(255, 255, 255, .75);
    font-size: .9rem;
    font-weight: 600;
}

.hero-title {
    font-size: clamp(3.0rem, 3.5vw, 5.0rem);
    line-height: 1;
    letter-spacing: -.055em;
}

.hero-card {
    position: relative;
    z-index: 1;
    border: 1px solid var(--bsd-border);
    border-radius: 2rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--bsd-shadow);
    overflow: hidden;
}

.racket-visual {
    min-height: 26rem;
    background: linear-gradient(135deg, rgba(90, 24, 5, .97), rgba(155, 48, 10, .95)), url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10'%3E%3Cpath d='M0 40h80M40 0v80M0 0l80 80M80 0L0 80'/%3E%3C/g%3E%3C/svg%3E");
    color: #fff;
}

.string-card {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .1);
    border-radius: 1.25rem;
}

.metric-card,
.service-card,
.step-card,
.price-card,
.faq-card {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-radius);
    background: ##1f91cf1f;
    box-shadow: 0 .75rem 2rem rgba(16, 35, 29, .06);
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    color: #495057;
    background: rgb(237 123 100); 
    font-size: 1.35rem;
}

.section-padding {
    padding: 5rem 0;
}

.section-muted {
    background: var(--bsd-soft);
}

/* Contact section — gravel tennis court look */
#contact.section-muted {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'%3E%3Cline x1='60' y1='0' x2='60' y2='120'/%3E%3Cline x1='0' y1='60' x2='120' y2='60'/%3E%3Crect x='10' y='10' width='100' height='100' rx='2'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(160deg, #c1440e 0%, #a83508 30%, #8b2d07 60%, #6b1f05 100%);
    background-size: 400px 400px, 120px 120px, cover;
}

#contact .section-title,
#contact h2 {
    color: #fff;
}

#contact .lead-muted,
#contact p,
#contact .small,
#contact .text-secondary {
    color: rgba(255, 255, 255, .80) !important;
}

#contact .eyebrow {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .25);
    color: #ffd190;
}

#contact .service-card {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25);
}

#contact .service-card h2,
#contact .service-card h3,
#contact .service-card h4,
#contact .service-card strong {
    color: #fff;
}

#contact .form-control,
#contact .form-select {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(255, 255, 255, .3);
    color: var(--bsd-ink);
}

#contact .form-label {
    color: rgba(255, 255, 255, .90);
    font-weight: 600;
}

#contact .contact-link {
    color: #ffd190;
}

#contact .icon-badge {
    background: rgba(255, 209, 144, .20);
    color: #ffd190;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.lead-muted {
    color: var(--bsd-muted);
}

/* Inside the hero, override muted/ink text to be readable on dark gravel */
.hero .lead-muted,
.hero p,
.hero .small,
.hero .text-secondary {
    color: rgba(255, 255, 255, .80) !important;
}

.hero a.text-primary-custom,
.hero a {
    color: #ffd190 !important;
}

.hero .hero-title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .check-list li {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        margin-bottom: .85rem;
    }

    .check-list i {
        color: var(--bsd-primary);
        margin-top: .15rem;
    }

.process-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #fff;
    background: var(--bsd-primary);
    font-weight: 800;
}

.cta-band {
    border-radius: 2rem;
    background: radial-gradient(circle at 90% 0%, rgba(242, 183, 5, .35), transparent 30%), linear-gradient(135deg, var(--bsd-primary), var(--bsd-primary-dark));
    color: #fff;
    overflow: hidden;
}

.contact-link {
    color: inherit;
    text-decoration: none;
}

    .contact-link:hover {
        text-decoration: underline;
    }

.form-control:focus,
.form-select:focus {
    border-color: var(--bsd-primary);
    box-shadow: 0 0 0 .25rem rgba(11, 79, 58, .18);
}

footer {
    background: #071d15;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 991.98px) {
    .hero {
        padding: 6rem 0 3.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   APP PAGES — stijlen voor authenticatpagina's via _Layout
   ═══════════════════════════════════════════════════════════ */

/* App navbar (sticky, frosted — zelfde basis als home navbar) */
.app-navbar {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--bsd-border);
    z-index: 1030;
}

.app-navbar .navbar-nav .nav-link {
    color: var(--bsd-ink) !important;
    font-weight: 500;
    font-size: .95rem;
    padding: .45rem .8rem !important;
    border-radius: .5rem;
    transition: background .18s, color .18s;
}

.app-navbar .navbar-nav .nav-link:hover,
.app-navbar .navbar-nav .nav-link:focus {
    color: var(--bsd-primary) !important;
    background: rgba(31, 145, 207, .09);
}

.app-navbar .navbar-toggler {
    border: none;
    color: var(--bsd-ink);
}

.app-navbar .navbar-toggler:focus { box-shadow: none; }

.app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(18,48,71,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown menus */
.app-navbar .dropdown-menu {
    border: 1px solid var(--bsd-border);
    border-radius: 1rem;
    box-shadow: var(--bsd-shadow);
    padding: .5rem;
}

.app-navbar .dropdown-item {
    border-radius: .6rem;
    font-size: .92rem;
    color: var(--bsd-ink);
    padding: .5rem .85rem;
    transition: background .15s;
}

.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus {
    background: rgba(31, 145, 207, .09);
    color: var(--bsd-primary-dark);
}

.app-navbar .dropdown-divider {
    border-color: var(--bsd-border);
    margin: .35rem .5rem;
}

@media (max-width: 991.98px) {
    .app-navbar .navbar-collapse {
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(12px);
        border: 1px solid var(--bsd-border);
        border-radius: var(--bsd-radius);
        padding: 1rem;
        margin-top: .5rem;
        box-shadow: var(--bsd-shadow);
    }
}

/* Pagina body padding — navbar is sticky dus geen fixed offset nodig */
main { min-height: calc(100vh - 68px - 240px); }

/* ── Pagina-titel ─────────────────────────────────────────── */
.page-title {
    font-family: 'Baloo';
    font-weight: 800;
    color: var(--bsd-ink);
    margin-bottom: 1.75rem;
    position: relative;
    padding-bottom: .9rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3.5rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bsd-primary), var(--bsd-accent));
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    border: 1px solid var(--bsd-border);
    border-radius: var(--bsd-radius);
    box-shadow: 0 .5rem 1.5rem rgba(18, 105, 154, .07);
    transition: box-shadow .25s, transform .25s;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--bsd-shadow);
    transform: translateY(-3px);
}

.card-header {
    background: var(--bsd-soft);
    border-bottom: 2px solid var(--bsd-primary);
    font-family : 'baloo';
    font-weight: 600;
    padding: 1rem 1.25rem;
    color: var(--bsd-ink);
}

/* ── Tabellen ─────────────────────────────────────────────── */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: linear-gradient(135deg, var(--bsd-primary) 0%, var(--bsd-primary-dark) 100%);
    color: #fff;
    font-weight: 600;
    border: none;
    padding: .875rem 1rem;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.table tbody tr {
    transition: background .15s;
}

.table tbody tr:hover {
    background-color: rgba(31, 145, 207, .05);
}

.table-warning { --bs-table-bg: rgba(228, 223, 19, .12); }

/* ── Formulieren ──────────────────────────────────────────── */
.form-label {
    font-weight: 600;
    color: var(--bsd-ink);
    margin-bottom: .4rem;
    font-size: .9rem;
}

.form-control,
.form-select {
    border: 1.5px solid var(--bsd-border);
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bsd-primary);
    box-shadow: 0 0 0 .22rem rgba(31, 145, 207, .18);
    outline: none;
}

.form-check-input:checked {
    background-color: var(--bsd-primary);
    border-color: var(--bsd-primary);
}

.form-check-input:focus {
    border-color: var(--bsd-primary);
    box-shadow: 0 0 0 .22rem rgba(31, 145, 207, .2);
}

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border: none;
    border-radius: var(--bsd-radius);
    padding: 1rem 1.25rem;
}

/* ── Knoppen — aanvullingen voor app ─────────────────────── */
.btn {
    font-weight: 600;
    transition: transform .18s, box-shadow .18s;
}

.btn:active { transform: translateY(1px) !important; }

.btn-outline-secondary {
    border-color: var(--bsd-border);
    color: var(--bsd-ink);
}

.btn-outline-secondary:hover {
    background: var(--bsd-soft);
    border-color: var(--bsd-muted);
    color: var(--bsd-ink);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    font-weight: 600;
    padding: .35em .75em;
    border-radius: 999px;
    font-size: .78rem;
}

/* ── Logo-placeholder (icon-square voor app-items) ────────── */
.logo-placeholder {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bsd-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

/* ── Feature icons ────────────────────────────────────────── */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    transition: transform .25s;
}

.feature-icon.icon-primary {
    background: rgba(31, 145, 207, .12);
    color: var(--bsd-primary);
}

.feature-icon.icon-secondary {
    background: rgba(238, 91, 67, .12);
    color: var(--bsd-accent);
}

.feature-icon.icon-accent {
    background: rgba(228, 223, 19, .18);
    color: #8b7a00;
}

.card:hover .feature-icon { transform: scale(1.08) rotate(4deg); }

/* ── Dashboard-stat card ─────────────────────────────────── */
.dashboard-stat-card {
    border-top: 4px solid var(--bsd-primary);
    border-radius: var(--bsd-radius);
}

.dashboard-chart-wrapper {
    position: relative;
    min-height: 340px;
}

/* ── Voortgangsbalk ──────────────────────────────────────── */
.progress-bar {
    background: linear-gradient(90deg, var(--bsd-primary), var(--bsd-primary-dark));
}

/* ── Status-indicatoren ──────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-dot.status-success  { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,.2); }
.status-dot.status-warning  { background: #e4a910; box-shadow: 0 0 0 3px rgba(228,169,16,.2); }
.status-dot.status-danger   { background: var(--bsd-accent); box-shadow: 0 0 0 3px rgba(238,91,67,.2); }

/* ── Footer (app layout) ─────────────────────────────────── */
.footer {
    background: #071d2a;
    color: rgba(255, 255, 255, .78);
    padding: 3rem 0 2rem;
    margin-top: 5rem;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bsd-primary) 0%, var(--bsd-accent) 100%);
}

.footer h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
}

.footer a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s;
}

.footer a:hover { color: var(--bsd-primary); }

.footer .text-muted { color: rgba(255, 255, 255, .45) !important; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bsd-soft); }
::-webkit-scrollbar-thumb { background: var(--bsd-primary); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bsd-primary-dark); }

/* ── Utillity ────────────────────────────────────────────── */
.text-primary-custom  { color: var(--bsd-primary) !important; }
.bg-primary-custom    { background-color: var(--bsd-primary) !important; }
.bg-gradient-primary  { background: linear-gradient(135deg, var(--bsd-primary) 0%, var(--bsd-primary-dark) 100%) !important; }

/* ── Flatpickr capacity ──────────────────────────────────── */
.flatpickr-calendar {
    box-shadow: var(--bsd-shadow) !important;
    border-radius: var(--bsd-radius) !important;
    border: 1px solid var(--bsd-border) !important;
}

.flatpickr-day.capacity-available {
    background-color: rgba(31, 145, 207, .12) !important;
    border-color: var(--bsd-primary) !important;
    color: var(--bsd-primary-dark) !important;
    font-weight: 500;
}

.flatpickr-day.capacity-available:hover {
    background-color: var(--bsd-primary) !important;
    color: #fff !important;
}

.flatpickr-day.capacity-limited {
    background-color: rgba(228, 223, 19, .2) !important;
    border-color: #b0aa00 !important;
    color: #6b6600 !important;
}

.flatpickr-day.capacity-full {
    background-color: rgba(238, 91, 67, .12) !important;
    border-color: var(--bsd-accent) !important;
    color: var(--bsd-accent-dark) !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-chart-wrapper { min-height: 260px; }

    .btn-lg {
        padding: .7rem 1.5rem;
        font-size: .95rem;
    }
}

@media (max-width: 576px) {
    .page-title { font-size: 1.5rem; }
}