/* ── BESTAAND: focus-ring ── */
:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow: none;
}

/* ── BESTAAND: section-title ── */
.section-title {
    color: var(--green-dark);
    position: relative;
    display: inline-block;
    margin-bottom: 1.2rem;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--orange);
    border-radius: 4px;
    margin-top: 6px;
}

/* ── BESTAAND: content-card ── */
.content-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem 2.2rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}

@media (max-width: 767px) {
    .content-card {
        padding: 1.25rem;
    }
}

/* ── BESTAAND: form-label, field-hint ── */
.form-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: .35rem;
    display: block;
}

.form-label .required {
    color: var(--error-red);
    margin-left: .15rem;
    font-weight: 800;
}

.field-hint {
    font-size: .875rem;
    color: var(--text-muted);
    margin-top: .2rem;
    display: block;
}

/* ── BESTAAND: form-control / form-select ── */
.form-control,
.form-select {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: .6rem .85rem;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    color: var(--text-dark);
    background: #fff;
    min-height: 44px;
    width: 100%;
    transition: border-color .18s, box-shadow .18s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 3px rgba(0, 87, 184, .2);
    outline: none;
}

/* ── BESTAAND: invalid-state ── */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--error-red);
}

.invalid-feedback {
    color: var(--error-red);
    font-size: .875rem;
    font-weight: 600;
    display: none;
    margin-top: .25rem;
}

.form-control.is-invalid~.invalid-feedback,
.form-select.is-invalid~.invalid-feedback,
.form-check-input.is-invalid~.invalid-feedback {
    display: block;
}

/* ── BESTAAND: form-check ── */
.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: .1rem;
    accent-color: var(--green-dark);
}

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

.form-check-input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.form-check-input.is-invalid {
    border-color: var(--error-red);
}

.form-check-label {
    font-size: .95rem;
    color: var(--text-dark);
    cursor: pointer;
}

/* ── BESTAAND: form-steps ── */
.form-steps {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: .4rem;
}

.form-step {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.form-step .step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
    background: #fff;
    transition: background .2s, border-color .2s, color .2s;
}

.form-step.active .step-dot {
    background: var(--green-dark);
    border-color: var(--green-dark);
    color: #fff;
}

.form-step.active {
    color: var(--green-dark);
}

.form-step-connector {
    flex: 1;
    height: 2px;
    background: #d0d0d0;
    min-width: 20px;
    display: none;
}

@media (min-width: 576px) {
    .form-step-connector {
        display: block;
    }
}

/* ── BESTAAND: price-summary, price-row, price-total ── */
.price-summary {
    background: #fff;
    border-radius: var(--radius);
    border: 2px solid #e0dbd3;
    padding: 1.3rem 1.5rem;
    position: sticky;
    top: 90px;
}

.price-summary h3 {
    color: var(--green-dark);
    font-size: 1.6rem;
    margin-bottom: .9rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e0dbd3;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .35rem 0;
    font-size: .9rem;
    border-bottom: 1px solid #f0ece4;
}

.price-row:last-of-type {
    border-bottom: none;
}

.price-row .pr-label {
    color: var(--text-muted);
}

.price-row .pr-value {
    font-weight: 700;
    color: var(--text-dark);
}

.price-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .7rem 0 0;
    margin-top: .3rem;
    border-top: 2px solid var(--green-dark);
}

.price-total .pt-label {
    color: var(--green-dark);
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    font-weight: 700;
}

.price-total .pt-value {
    color: var(--green-dark);
    font-size: 1.25rem;
    font-weight: 800;
}

.price-note {
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .4rem;
    font-style: italic;
}

/* ── BESTAAND: mollie-info ── */
.mollie-info {
    background: #f0f4ff;
    border: 1px solid #c5d5f5;
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin-top: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.mollie-info i {
    color: #2c6fbe;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.mollie-info p {
    margin: 0;
    font-size: .875rem;
    color: #2c3e6b;
    line-height: 1.55;
}

.mollie-info strong {
    color: #1a2a5e;
}

/* ── BESTAAND: btn-mollie ── */
.btn-mollie {
    background: #4a90e2;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: .75rem 2rem;
    font-weight: 800;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s;
}

.btn-mollie[disabled] {
    background: #ccc;
    pointer-events: none;
    color: darkslategrey;
}

.btn-mollie:not([disabled]):hover {
    background: #2c6fbe;
    color: #fff;
    transform: translateY(-2px);
}

.btn-mollie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ============================================================
    NIEUW – pagina-specifieke stijlen
    (alles hieronder bestaat NIET in index.html of de andere pagina's)
============================================================ */

/*
    NIEUW: .form-section-title
    Verschilt van .section-title: bevat een subtitel-regel,
    is gecentreerd en heeft een groter bottom-margin.
    Niet aanwezig in zaalverhuur-kinderfeestje.html of index.html.
*/
.form-section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.form-section-title h1 {
    color: var(--green-dark);
    margin-bottom: .2rem;
}

.form-section-title p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 560px;
    margin: 0 auto;
}

/* Oranje accent-streep onder de h1 (gecentreerd) */
.form-section-title h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--orange);
    border-radius: 4px;
    margin: .4rem auto 0;
}

/*
    NIEUW: .form-block-header
    Het label-blok bovenin elke content-card met icoon + koptitel.
    In zaalverhuur-kinderfeestje.html staat de h3 los, hier is het
    een eigen flex-rij met icoon-achtergrond – de stijl verschilt.
*/
.form-block-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.4rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid #ede9e2;
}

.form-block-header .fbh-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.form-block-header h2 {
    margin: 0;
    font-size: 1.6rem;
    color: var(--green-dark);
    letter-spacing: 0.02em;
}

/*
    NIEUW: .form-vereist-uitleg
    Het "Velden gemarkeerd met * zijn verplicht"-blokje.
    Kleine grijze tekst boven het formulier.
    Bestaat niet elders in het template.
*/
.form-vereist-uitleg {
    font-size: .875rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.form-vereist-uitleg .req-star {
    color: var(--error-red);
    font-weight: 800;
}

/*
    NIEUW: .checkbox-row
    Flexbox-rij voor checkbox + label + eventuele foutmelding.
    In zaalverhuur-kinderfeestje.html staat dit als losse d-flex,
    hier wordt het een herbruikbare klasse met vaste spacing.
*/
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
}

.checkbox-row:last-child {
    margin-bottom: 0;
}

.checkbox-row .cb-label-wrap {
    flex: 1;
}

.checkbox-row .cb-label-wrap .form-check-label {
    display: block;
    margin-bottom: .15rem;
}

/*
    NIEUW: .extras-checkbox-row
    Horizontale rij van checkboxes (ranja / chips) naast elkaar.
    In zaalverhuur-kinderfeestje.html is dit ook een flex-rij maar
    zonder naam; hier expliciet als class gedocumenteerd.
*/
.extras-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: .5rem;
}

.extras-checkbox-row .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

/*
    NIEUW: .voorwaarden-section
    Aparte visuele behandeling voor het voorwaarden-blok:
    lichte achtergrondkleur ter onderscheiding van de andere blokken.
    Bestaat niet in de eerdere pagina's.
*/
.voorwaarden-section .content-card {
    background: #f8fdf5;
    border: 1px solid #c8e6b0;
}

/*
    NIEUW: .submit-wrap
    Centrering + extra witruimte boven de betaalknop.
    Klein hulpklasje, niet elders aanwezig.
*/
.submit-wrap {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

/*
    NIEUW: .form-status-msg (live region feedback)
    Visuele foutmelding-balk boven het formulier die verschijnt
    bij validatiefouten. Niet aanwezig in andere pagina's.
*/
.form-status-msg {
    background: #fdecea;
    border: 2px solid var(--error-red);
    border-radius: 8px;
    padding: .75rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    color: #7a1a14;
    /* op #fdecea: 8.2:1 ✓ */
    display: none;
    margin-bottom: 1rem;
    align-items: flex-start;
    gap: .6rem;
}

.form-status-msg.visible {
    display: flex;
}

.form-status-msg i {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: .1rem;
}

/* High contrast mode */
@media (forced-colors: active) {

    .btn-mollie,
    .content-card,
    .price-summary,
    .mollie-info {
        border: 2px solid ButtonText;
    }

    .form-block-header .fbh-icon {
        border: 2px solid ButtonText;
    }

    .form-status-msg {
        border: 2px solid ButtonText;
    }

    :focus-visible {
        outline: 3px solid Highlight;
    }
}