/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Vernieuwde openbare boekingservaring (Boekingspagina, Widget en Pagina).
   Alle kleuren komen uit CSS-variabelen die de BookingFlow-component per bedrijf zet
   (--bf-accent, --bf-bg, --bf-text, --bf-button, --bf-selected, --bf-font, …), zodat de
   vormgeving-instellingen van Beheer → Boekingspagina overal identiek doorwerken.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

.bf-root {
    --bf-surface: #ffffff;
    --bf-border: #e5e7eb;
    --bf-muted: #64748b;
    --bf-radius: 14px;
    font-family: var(--bf-font, "Segoe UI", system-ui, sans-serif);
    color: var(--bf-text, #0f172a);
    background: var(--bf-bg, #f4f6fb);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}

.bf-root *,
.bf-root *::before,
.bf-root *::after { box-sizing: border-box; }

.bf-mode-standalone { min-height: 100vh; padding: 24px 16px 12px; }
.bf-mode-widget,
.bf-mode-inline { background: var(--bf-bg, #f4f6fb); }

/* In een iframe mag de flow NIET op min-height:100% staan. Het iframe krijgt zijn hoogte van de
   inhoud; staat de inhoud daarna op "minstens de vensterhoogte", dan houdt ze zichzelf op de vorige,
   grotere hoogte. Ga je van de urenlijst terug naar het eerste scherm, dan blijft het iframe hoog
   en zie je een witte zone onder de kaart. Met height:auto krimpt het weer mee.

   Sinds 07/09/2026 geldt dit ook voor de widget: dat paneel groeit en krimpt nu mee met zijn
   inhoud (booking-widget.js luistert naar de hoogteberichten). Zolang de flow zich hier op de
   volle hoogte van het paneel zette, mat ze altijd het paneel en nooit zichzelf. */
.bf-mode-inline,
.bf-mode-widget { min-height: 0; height: auto; }

/* Eén breedte voor alle drie de varianten: de eigen boekingspagina, de widget en het iframe tonen
   dezelfde kaart. Stond de boekingspagina eerder op 680px, waardoor ze naast de ingesloten module
   merkbaar breder en losser oogde. */
.bf-shell {
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.bf-mode-standalone .bf-shell {
    background: var(--bf-bg, #f4f6fb);
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
    overflow: hidden;
}

/* Vangnet voor de ingesloten varianten. De eigenlijke maat wordt door de embed-scripts gezet
   (booking-widget.js: data-width/data-height, booking-page.js: data-max-width) — dat is de knop
   die de klant in de gekopieerde code kan aanpassen. Deze bovengrens vangt enkel het geval op
   waarin iemand zelf een kale <iframe> over de volle paginabreedte plaatst: zonder grens rekken
   rijen, knoppen en typografie mee uit en oogt de flow veel te groot. Zelfde waarde als de
   gewone boekingspagina. */
.bf-mode-widget .bf-shell,
.bf-mode-inline .bf-shell { max-width: 460px; }

.bf-body { padding: 16px 22px 16px; }

/* ── Kop ─────────────────────────────────────────────────────────────────────────────────── */

/* Compacte kop: het logo staat naast de naam, niet erboven. Dat scheelt 64px zonder dat er iets
   verdwijnt, en houdt de dienstenlijst meteen zichtbaar — ook in het widgetvenster. */
.bf-hero { position: relative; min-height: 116px; }
.bf-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-hero-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 116px;
    padding: 14px 22px 15px;
    /* Iets donkerder dan voorheen: witte tekst moet ook op een lichte coverfoto leesbaar blijven. */
    background: linear-gradient(180deg, rgba(2, 6, 23, .05) 25%, rgba(2, 6, 23, .66) 100%);
    color: #fff;
}
.bf-hero-identity { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.bf-hero-text { min-width: 0; }
.bf-hero-logo {
    width: 42px; height: 42px; border-radius: 11px; object-fit: contain;
    background: #fff; padding: 4px; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(2, 6, 23, .28);
}
.bf-hero-title { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.bf-hero-subtitle { margin: 2px 0 0; font-size: .84rem; opacity: .9; }

.bf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 22px 12px;
    border-bottom: 1px solid var(--bf-border);
}
.bf-topbar-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bf-topbar-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.bf-topbar-text { display: flex; flex-direction: column; min-width: 0; }
.bf-topbar-name { font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-topbar-subtitle { color: var(--bf-muted); font-size: .82rem; }

.bf-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, .06);
    color: var(--bf-text);
    cursor: pointer;
    flex-shrink: 0;
}
.bf-close:hover { background: rgba(15, 23, 42, .12); }
.bf-close-on-hero { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, .92); color: #0f172a; }

/* ── Algemene bouwstenen ─────────────────────────────────────────────────────────────────── */

.bf-card { padding-top: 18px; }

.bf-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bf-step-title { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; }
.bf-service-heading { margin-bottom: 12px; }
.bf-step-intro { margin: 0 0 14px; color: var(--bf-muted); font-size: .92rem; }

.bf-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bf-border);
    border-radius: 50%;
    background: var(--bf-surface);
    color: var(--bf-text);
    cursor: pointer;
    flex-shrink: 0;
}
.bf-back:hover { background: var(--bf-accent-soft); }

.bf-context-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border: 1px solid var(--bf-accent-border);
    border-radius: 12px;
    background: var(--bf-accent-soft);
    font-size: .92rem;
    margin-bottom: 14px;
}
.bf-context-service { color: var(--bf-accent); font-weight: 700; }
.bf-context-sep { color: var(--bf-muted); }

.bf-info-banner {
    display: block;
    padding: 13px 15px;
    border-radius: 12px;
    background: var(--bf-accent-soft);
    border: 1px solid var(--bf-accent-border);
    font-size: .92rem;
    margin: 0 0 14px;
}
.bf-info-banner-icon { display: flex; gap: 10px; align-items: flex-start; }
.bf-info-banner-icon svg { flex-shrink: 0; margin-top: 1px; color: var(--bf-accent); }

/* Eigen boodschap van de zaak, en de melding bij een dienst die niet bij het gezelschap past:
   allebei een mededeling die de klant even moet lezen voor hij verder klikt, dus allebei dezelfde
   zachte waarschuwingskleur. */
.bf-custom-message,
.bf-gasten-melding {
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: .92rem;
    margin: 0 0 14px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* De melding staat pal boven de gastenbalk, die tegelijk openklapt: samen één blok. */
.bf-gasten-melding { margin-bottom: 10px; font-weight: 600; }

.bf-field-error { color: #b91c1c; font-size: .86rem; margin: 6px 0 0; font-weight: 600; }

.bf-footnote { color: var(--bf-muted); font-size: .8rem; text-align: center; margin: 10px 0 0; }
.bf-footnote a { color: var(--bf-accent); }
.bf-footnote-lock { display: flex; align-items: center; justify-content: center; gap: 6px; }

.bf-center { text-align: center; align-self: center; }

.bf-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bf-loading { display: flex; justify-content: center; padding: 48px 0; }
.bf-loading-inline { padding: 28px 0; }
.bf-spinner {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--bf-accent-soft);
    border-top-color: var(--bf-accent);
    animation: bf-spin .8s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ── Knoppen ─────────────────────────────────────────────────────────────────────────────── */

.bf-primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 13px 18px;
    border: none;
    border-radius: var(--bf-radius);
    background: var(--bf-button);
    color: var(--bf-button-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: filter .16s ease, box-shadow .16s ease;
}
/* Professionele hover zoals de dashboardknoppen: de kleur verdiept en de knop krijgt
   iets meer diepte; bij indrukken verdiept hij verder en zakt de schaduw weer weg. */
.bf-primary-button:hover:not(:disabled) { filter: brightness(.95); box-shadow: 0 6px 16px rgba(15, 23, 42, .18); }
.bf-primary-button:active:not(:disabled) { filter: brightness(.90); box-shadow: 0 1px 3px rgba(15, 23, 42, .16); }
.bf-primary-button:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.bf-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: .93rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.bf-secondary-button:hover { background: var(--bf-accent-soft); border-color: var(--bf-accent-border); color: var(--bf-accent); box-shadow: 0 3px 10px rgba(15, 23, 42, .10); }
.bf-secondary-button:active { background: var(--bf-accent-border); box-shadow: none; }

.bf-link-button {
    border: none;
    background: none;
    color: var(--bf-accent);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 0;
    text-align: left;
}
.bf-link-button:hover { text-decoration: underline; }
.bf-link-button.bf-center { display: block; width: 100%; text-align: center; margin-top: 10px; }

.bf-root button:focus-visible,
.bf-root a:focus-visible,
.bf-root input:focus-visible,
.bf-root select:focus-visible,
.bf-root textarea:focus-visible,
.bf-root summary:focus-visible {
    outline: 3px solid var(--bf-accent);
    outline-offset: 2px;
}

/* Een <summary> stond niet in de rij hierboven en kreeg dus de zwarte standaardrand van de browser
   — ook na een muisklik, waar niemand een focusrand verwacht. Toetsenbordgebruikers houden hem via
   :focus-visible hierboven. */
.bf-root summary:focus:not(:focus-visible) { outline: none; }

/* ── Scherm 1: diensten ──────────────────────────────────────────────────────────────────── */

.bf-category-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bf-pill {
    padding: 8px 16px;
    border: 1px solid var(--bf-border);
    border-radius: 999px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.bf-pill.selected {
    background: var(--bf-selected);
    border-color: var(--bf-selected);
    color: var(--bf-selected-text);
}
/* Subtiele hover i.p.v. de globale `button:hover { background: <blauw> }` uit site.css. */
.bf-pill:not(.selected):hover { border-color: var(--bf-accent-border); background: var(--bf-accent-soft); }

.bf-service-group { margin-bottom: 6px; }
.bf-service-group-title {
    margin: 12px 0 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bf-muted);
}
.bf-service-list { display: flex; flex-direction: column; gap: 8px; }

.bf-service-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 15px;
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Zelfde hover als de dashboardkaarten (o.a. "vandaag · afspraken ingepland"): de kaart licht
   subtiel op met een lift en zachte schaduw, i.p.v. een volle accentvulling. De expliciete
   background overschrijft de globale `button:hover { background: <blauw> }` uit site.css (de kaart
   is een <button>), die anders door de kaart heen zou slaan. */
.bf-service-card:hover { transform: translateY(-2px); border-color: var(--bf-accent-border); background: var(--bf-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
/* Dienst die niet past bij het gekozen aantal personen: zichtbaar blijven — anders weet een groep
   van tien niet dat er een zaal bestaat — maar duidelijk niet aanklikbaar. */

.bf-service-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bf-service-name { font-weight: 700; font-size: .92rem; }
.bf-service-meta { color: var(--bf-muted); font-size: .79rem; }
.bf-service-description {
    color: var(--bf-muted);
    font-size: .84rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bf-service-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bf-service-price { font-weight: 700; font-size: .88rem; }
/* Discreter: de chevron is een aanwijzing, geen knop op zich. */
.bf-chevron { color: #cbd5e1; flex-shrink: 0; width: 15px; height: 15px; }

/* Contact en openingsuren vormen samen de voet van het scherm: één scheidingslijn bovenaan, verder
   scheidt de hoofdlettterkop OPENINGSUREN zelf. Drie lijnen kort na elkaar oogde ingesnoerd. */
.bf-contact-block,
.bf-hours-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bf-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bf-contact-block + .bf-hours-block { margin-top: 18px; border-top: none; padding-top: 0; }
.bf-contact-name {
    padding-left: 26px;
    color: var(--bf-text);
    font-size: .9rem;
    font-weight: 700;
}
.bf-contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bf-text);
    font-size: .9rem;
    text-decoration: none;
}
.bf-contact-line svg { color: var(--bf-muted); flex-shrink: 0; }
a.bf-contact-line:hover span { text-decoration: underline; }
.bf-contact-link { color: var(--bf-accent); font-weight: 600; }
.bf-contact-link svg { color: var(--bf-accent); }

.bf-hours-header {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bf-muted);
}
.bf-hours-header svg { color: var(--bf-muted); }
/* Eén omkaderd blok met lichte zebra in plaats van zeven losse rijen met een streep ertussen:
   rustiger, en 12px per dag korter. */
.bf-hours-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bf-border);
    border-radius: 10px;
    overflow: hidden;
}
.bf-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: .82rem;
    padding: 6px 12px;
}
.bf-hours-row:nth-child(odd) { background: rgba(15, 23, 42, .018); }
.bf-hours-row dt { color: var(--bf-text); font-weight: 600; }
.bf-hours-row dd { margin: 0; color: var(--bf-muted); font-variant-numeric: tabular-nums; }
.bf-hours-row.today { background: var(--bf-accent-soft); }
.bf-hours-row.today dt { color: var(--bf-accent); font-weight: 700; }
.bf-hours-row.today dd { color: var(--bf-accent); font-weight: 700; }
.bf-hours-row.closed dd { color: var(--bf-muted); font-style: italic; }

/* ── Scherm 2A: adres ────────────────────────────────────────────────────────────────────── */

.bf-form { display: flex; flex-direction: column; gap: 14px; }
.bf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.bf-field label { font-size: .84rem; font-weight: 600; color: var(--bf-muted); }
.bf-field input,
.bf-field select,
.bf-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: .95rem;
}
.bf-field textarea { min-height: 84px; resize: vertical; }
.bf-field-row { display: flex; gap: 12px; }

.bf-phone-row { display: flex; gap: 10px; }
.bf-phone-row select { width: 96px; flex-shrink: 0; min-height: 48px; border: 1px solid var(--bf-border); border-radius: 12px; background: var(--bf-surface); color: var(--bf-text); font-family: inherit; padding: 0 8px; }
.bf-phone-row input { flex: 1; }

.bf-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; cursor: pointer; }
.bf-checkbox input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--bf-accent); flex-shrink: 0; }

/* ── Scherm 2B: resources ────────────────────────────────────────────────────────────────── */

.bf-resource-list { display: flex; flex-direction: column; gap: 10px; }
.bf-resource-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bf-resource-card:hover { transform: translateY(-2px); border-color: var(--bf-accent-border); background: var(--bf-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.bf-resource-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
    overflow: hidden;
}
.bf-resource-avatar-nopref { background: var(--bf-accent-soft); color: var(--bf-accent); }
.bf-resource-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bf-resource-name { font-weight: 700; }
.bf-resource-subtitle { color: var(--bf-muted); font-size: .84rem; }

/* ── Scherm 3: datum en tijd ─────────────────────────────────────────────────────────────── */

/* Groepsgrootte: label en stepper in één rustig kader in plaats van een losse rij met grote knoppen.
   Blijft bovenaan staan — bij horeca is dit een echte keuze vóór de dienst. */
.bf-party-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
    padding: 7px 8px 7px 14px;
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    background: rgba(15, 23, 42, .015);
}
.bf-party-label { font-weight: 600; font-size: .85rem; }
.bf-party-stepper {
    display: flex; align-items: center; gap: 2px;
    background: var(--bf-surface);
    border: 1px solid var(--bf-border);
    border-radius: 9px;
    padding: 2px;
}
.bf-party-button {
    /* inline-flex met line-height:1 — zonder deze centrering gaan "−" (U+2212) en "+" elk op hun
       eigen basislijn staan, waardoor de twee knoppen niet op dezelfde hoogte lijken. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 30px; height: 30px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--bf-muted);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.bf-party-button:hover:not(:disabled) { background: rgba(15, 23, 42, .05); color: var(--bf-text); }
.bf-party-button:disabled { opacity: .35; cursor: not-allowed; }
.bf-party-value { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; }

.bf-month-row { display: flex; justify-content: center; margin-bottom: 12px; position: relative; }
.bf-month-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    color: var(--bf-text);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
}
.bf-month-title:hover { background: var(--bf-accent-soft); }

.bf-month-picker {
    border: 1px solid var(--bf-border);
    border-radius: 16px;
    background: var(--bf-surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
    padding: 14px;
    margin: 0 auto 14px;
    max-width: 380px;
}
.bf-month-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bf-month-picker-year { font-weight: 800; }
.bf-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bf-month-cell {
    padding: 10px 4px;
    border: 1px solid var(--bf-border);
    border-radius: 10px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bf-month-cell:hover:not(:disabled):not(.selected) { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.bf-month-cell.current { border-color: var(--bf-accent); color: var(--bf-accent); }
.bf-month-cell.selected { background: var(--bf-selected); border-color: var(--bf-selected); color: var(--bf-selected-text); }
.bf-month-cell:disabled { opacity: .38; cursor: not-allowed; }

.bf-date-strip { display: flex; align-items: stretch; gap: 6px; justify-content: center; margin-bottom: 16px; }
.bf-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 58px;
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    background: var(--bf-surface);
    color: var(--bf-text);
    cursor: pointer;
    flex-shrink: 0;
}
.bf-month-picker .bf-nav-button { min-height: 38px; }
.bf-nav-button:disabled { opacity: .4; cursor: not-allowed; }
.bf-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    max-width: 64px;
    min-height: 58px;
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bf-day-cell .bf-day-name { font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--bf-muted); }
.bf-day-cell .bf-day-number { font-size: 1.05rem; font-weight: 800; }
.bf-day-cell.selected { background: var(--bf-selected); border-color: var(--bf-selected); }
.bf-day-cell.selected .bf-day-name, .bf-day-cell.selected .bf-day-number { color: var(--bf-selected-text); }
/* Zelfde hover als de uur-cellen (.bf-time-cell): zachte accent-tint i.p.v. de globale blauwval. */
.bf-day-cell:hover:not(.selected):not(:disabled) { border-color: var(--bf-accent); background: var(--bf-accent-soft); }
.bf-day-cell:disabled { opacity: .38; cursor: not-allowed; }

.bf-times-note { display: flex; align-items: center; gap: 8px; color: var(--bf-muted); font-size: .86rem; margin-bottom: 12px; }

.bf-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bf-time-cell {
    min-height: 46px;
    border: 1px solid var(--bf-border);
    border-radius: 12px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.bf-time-cell:hover { border-color: var(--bf-accent); background: var(--bf-accent-soft); }

.bf-fullday-box {
    border: 1px solid var(--bf-accent-border);
    border-radius: var(--bf-radius);
    background: var(--bf-accent-soft);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bf-fullday-title { margin: 0; font-weight: 800; }
.bf-fullday-info { margin: 0 0 6px; color: var(--bf-muted); font-size: .9rem; }

/* ── Scherm 4: samenvatting en formulier ─────────────────────────────────────────────────── */

.bf-summary {
    margin: 0 0 14px;
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    overflow: hidden;
}
.bf-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--bf-border);
    font-size: .92rem;
}
.bf-summary-row:last-child { border-bottom: none; }
.bf-summary-row dt {
    color: var(--bf-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    align-self: center;
    flex-shrink: 0;
}
.bf-summary-row dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.bf-summary-price { background: var(--bf-accent-soft); }
.bf-summary-price dt, .bf-summary-price dd { color: var(--bf-accent); font-weight: 800; }

/* ── Scherm 5: betaling ──────────────────────────────────────────────────────────────────── */

.bf-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    margin: 6px auto 14px;
    border-radius: 50%;
    background: var(--bf-accent-soft);
    color: var(--bf-accent);
}
.bf-payment-heading { margin: 0 0 4px; text-align: center; font-size: 1.25rem; font-weight: 800; }
.bf-payment-sub { margin: 0 0 16px; text-align: center; color: var(--bf-muted); font-size: .92rem; }
.bf-payment-summary {
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.bf-payment-service { margin: 0 0 4px; font-weight: 800; }
.bf-payment-line { margin: 0; color: var(--bf-muted); font-size: .9rem; }
.bf-payment-amounts { margin-bottom: 14px; }

/* ── Scherm 6: bevestiging ───────────────────────────────────────────────────────────────── */

.bf-confirm-card { display: flex; flex-direction: column; }
.bf-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    margin: 6px auto 14px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
}
.bf-confirm-card .bf-step-title { text-align: center; margin-bottom: 16px; }
.bf-confirm-message { margin: 0 0 6px; text-align: center; color: var(--bf-muted); font-size: .92rem; }
.bf-confirm-message:last-of-type { margin-bottom: 16px; }
.bf-manage-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── Voettekst ───────────────────────────────────────────────────────────────────────────── */

/* ── Inklapbare balken (gasten, adres, openingsuren) ──────────────────────────────────────────
   Naslag hoort niet vóór de keuze te staan. Native <details>: geen JavaScript, en de browser
   onthoudt de toetsbediening zelf. Door de gedeelde name= staat er altijd hoogstens één open.

   Banden, geen doosjes (08/09/2026). Tot dan had elke balk een rand rondom met afgeronde hoeken.
   Drie doosjes onder elkaar knippen de kaart in stukken, de inhoud staat ingesprongen in plaats
   van van rand tot rand, en al die randen kosten hoogte — waardoor de diensten onder de vouw
   zakten. Nu: geen zijranden, alleen haarlijnen tussen de rijen. */
/* Geen eigen vulling: de balk neemt de kleur van de kaart waarop hij staat. Met een witte
   achtergrond stak hij als een blok af tegen die kaart — zichtbaar zodra "Adres en contact" of
   "Openingsuren" openging (08/09/2026). */
.bf-uitklap { border-bottom: 1px solid var(--bf-border); background: transparent; }
/* De negatieve marge laat de hover-vulling iets búiten de tekst uitlopen, terwijl de tekst zelf op
   dezelfde lijn blijft staan als de tegels eronder (10 − 8 = 2px, net als voorheen). */
.bf-uitklap > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -10px;
    padding: 12px 10px;
    border-radius: 9px;
    cursor: pointer;
    list-style: none;
    /* Eén trap hoger dan voorheen (.88rem), en daarmee even groot als de dienstnamen eronder:
       "2 gasten", "Adres en contact" en "Openingsuren" zijn labels van dezelfde rang. */
    font-size: .92rem;
    transition: background-color .15s ease;
}
.bf-uitklap > summary::-webkit-details-marker { display: none; }
/* De balk reageert op de muis, net als de kaarten: hij is aanklikbaar, dus dat mag je zien. Een
   zachte vulling over de hele rij, niet enkel een kleurtje op de letters. */
.bf-uitklap > summary:hover { background: var(--bf-accent-soft); }
.bf-uitklap-icoon { display: inline-flex; color: var(--bf-muted); flex-shrink: 0; }
.bf-uitklap-titel { font-weight: 600; flex: 1; min-width: 0; }
/* De samenvatting rechts beantwoordt de vraag meestal al zonder openklappen. */
.bf-uitklap-kort { color: var(--bf-muted); font-size: .8rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-uitklap-pijl { display: inline-flex; color: var(--bf-muted); flex-shrink: 0; transition: transform .2s ease; }
.bf-uitklap[open] > summary .bf-uitklap-pijl { transform: rotate(180deg); }
/* Open verandert niets aan de kleur: de chevron zegt het al. Een accentkleur op de kop maakte de
   gastenbalk zwaarder dan "Adres en contact" eronder, terwijl het dezelfde soort rij is. */
.bf-uitklap > .bf-contact-block,
.bf-uitklap > .bf-hours-block { margin: 0; padding: 2px 2px 14px; border-top: none; }

/* ── Openschuiven ─────────────────────────────────────────────────────────────────────────────
   De inhoud groeide tot 08/09/2026 in één frame aan. `::details-content` met `interpolate-size`
   laat een <details> in pure CSS uitschuiven van 0 naar auto. Browsers die het niet kennen —
   dan valt `height: auto` gewoon terug op het oude, directe openklappen — merken er niets van.
   Dat is precies waarom dit hier in CSS staat en niet in JavaScript. */
@media (prefers-reduced-motion: no-preference) {
    .bf-uitklap { interpolate-size: allow-keywords; }
    .bf-uitklap::details-content {
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: height .2s ease, opacity .2s ease, content-visibility .2s allow-discrete;
    }
    .bf-uitklap[open]::details-content { height: auto; opacity: 1; }

    /* En de tegels groeien mee: van iets te klein naar vol, terwijl de band openschuift. */
    .bf-uitklap[open] .bf-gast,
    .bf-uitklap[open] .bf-gasten-teller { animation: bf-tegel-groeit .22s ease-out both; }
}
@keyframes bf-tegel-groeit { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* De klantgegevens-pagina (bevestig uw gegevens) houdt haar taalkiezer onderaan: die pagina
   heeft geen kop met de naam van de zaak waar een knop naast past. Het menu opent naar BOVEN,
   zodat de afgeronde kaarthoek de lijst niet afsnijdt. */
.bf-language-row { display: flex; justify-content: center; padding: 18px 0 0; }
.bf-language-row .language-picker-menu { top: auto; bottom: calc(100% + 6px); }

/* ── Aantal gasten ────────────────────────────────────────────────────────────────────────────
   Zelfde balk als adres en uren, maar dan mét keuze erin. De getallen staan als knoppen: één tik
   in plaats van vijf op een teller. */
/* De gastenbalk staat bovenaan, vóór de diensten. Geen lijn tussen de kop en de cijfers: die
   twee zijn één ding. De lijn eronder scheidt het gezelschap wél van de diensten. */
.bf-gasten { margin-top: 0; margin-bottom: 14px; }
.bf-gasten-inhoud { padding: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.bf-gasten-rooster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bf-gast {
    padding: 11px 0;
    border: 1px solid var(--bf-border);
    border-radius: 10px;
    background: var(--bf-surface);
    color: var(--bf-text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.bf-gast:hover { background: var(--bf-surface); border-color: var(--bf-accent-border); }
.bf-gast.actief, .bf-gast.actief:hover { background: var(--bf-selected); border-color: var(--bf-selected); color: var(--bf-selected-text); }
/* Meer gasten dan hier passen: de tiende knop schakelt naar een teller. */
.bf-gast.meer { color: var(--bf-accent); font-weight: 700; }
/* Staat de keuze bóven de negen, dan is die knop de gekozen knop: dan telt de kleur van een
   gekozen knop, niet de accentkleur — anders valt de "+" weg in zijn eigen vulling. */
.bf-gast.meer.actief, .bf-gast.meer.actief:hover { color: var(--bf-selected-text); }
/* Boven het plafond van de grootste tafel of zaal: zichtbaar, maar niet te kiezen. */
.bf-gast.uit, .bf-gast.uit:hover { background: var(--bf-surface-muted, #f8fafc); border-color: var(--bf-border); color: #cbd5e1; cursor: not-allowed; }
.bf-gasten-teller { display: flex; align-items: center; justify-content: center; gap: 14px; }
/* Bevestigen en terug even zichtbaar en even breed, onder elkaar. */
.bf-gasten-knoppen { display: flex; flex-direction: column; gap: 8px; }
.bf-gasten-knoppen .bf-secondary-button { width: 100%; min-height: 44px; }

/* ── Taalknop rechtsboven in de kop ───────────────────────────────────────────────────────────
   Stond tot 06/09/2026 onderaan de kaart. Daar vond niemand ze: wie de pagina niet leest omdat
   ze in de verkeerde taal staat, scrolt niet tot beneden. */
.bf-language { position: absolute; top: 12px; right: 12px; z-index: 30; }
/* Op de coverfoto: iets steviger schaduw, anders verdwijnt de witte knop in een licht beeld. */
/* Zelfde hover als de inklapbare balken: rand in de accentkleur, zachte accentvulling. */
.bf-language > summary:hover { background: var(--bf-accent-soft); border-color: var(--bf-accent-border); }
.bf-hero .bf-language { box-shadow: 0 3px 12px rgba(2, 6, 23, .35); border-radius: 9px; }
.bf-topbar { position: relative; }
.bf-topbar .bf-language { top: 50%; transform: translateY(-50%); }
/* In het widgetvenster zit rechtsboven de sluitknop. De taalknop staat daar vandaag niet (in een
   iframe wisselt de taal via de hostpagina), maar mocht dat ooit veranderen, dan schuift ze ernaast
   in plaats van eronder. */
.bf-mode-widget .bf-language { right: 52px; }
/* Enkel de initialen op de knop; de lijst houdt de taal voluit, zonder vlagkolom. */
.language-picker.codes-only summary { justify-content: center; padding: 0 12px; }
.language-picker.codes-only .language-picker-menu { min-width: 168px; width: auto; }
.language-picker.codes-only .language-picker-menu button { grid-template-columns: 1fr 20px; }

.bf-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 14px 0 4px;
    color: var(--bf-muted);
    opacity: .75;
    font-size: .7rem;
}
.bf-powered a { color: var(--bf-accent); font-weight: 700; text-decoration: none; }
.bf-powered a:hover { text-decoration: underline; }
.bf-mode-standalone .bf-powered { color: rgba(100, 116, 139, .9); }

.bf-blocked-card { padding: 26px; }

/* ── Mobiel ──────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .bf-mode-standalone { padding: 0; }
    .bf-mode-standalone .bf-shell { border-radius: 0; box-shadow: none; min-height: 100vh; }
    .bf-body { padding: 14px 16px 14px; }
    .bf-topbar { padding: 14px 16px 12px; }
    .bf-hero { min-height: 104px; }
    .bf-hero-overlay { min-height: 104px; padding: 12px 16px 13px; }
    .bf-field-row { flex-direction: column; gap: 14px; }
    /* Drie kolommen i.p.v. twee: op 460px passen drie uurblokjes ruim, en de lijst wordt een derde
       korter — bij een avond met veertig tijdstippen scheelt dat veel scrollen. */
    .bf-time-grid { grid-template-columns: repeat(3, 1fr); }
    .bf-month-grid { grid-template-columns: repeat(3, 1fr); }
    .bf-day-cell { max-width: none; }
    .bf-date-strip { gap: 4px; }
    .bf-nav-button { width: 34px; }
    .bf-manage-row { flex-direction: column; }
    .bf-manage-row .bf-secondary-button { width: 100%; }
    .bf-summary-row dd { text-align: right; }

    /* Maandkiezer als compact venster over de volle breedte. */
    .bf-month-picker { max-width: none; }
}

/* ── Diensten als kaarten met foto (06/09/2026) ──────────────────────────────────────────────────
   Eén rij per categorie die opzij schuift. Op een telefoon veegt de klant; op een desktop bestaat
   dat gebaar niet, dus staan er pijlen op de rand. De rij mag nooit de pagina zelf breed maken:
   alles schuift binnen bf-card-rail. */
.bf-card-rail { position: relative; margin: 0 -4px 6px; }
.bf-card-row {
    display: flex;
    gap: 10px;
    /* Ruimte links en rechts: de kaart snapt in het midden, dus de vorige en de volgende steken
       er allebei een randje in. Zonder dat randje lijkt de rij één kaart en veegt niemand. */
    padding: 4px 34px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.bf-card-row::-webkit-scrollbar { display: none; }

.bf-photo-card {
    /* Eén kaart per keer, bijna over de volle breedte: de foto is het argument, en op 190px werd
       ze een postzegel. De 34px marge aan weerszijden laat de buren zien. */
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0;
    overflow: hidden;
    background: var(--bf-surface);
    /* Kleur en lettertype expliciet: site.css geeft elke <button> witte tekst, en de kaart is er een. */
    color: var(--bf-text);
    font-family: inherit;
    border: 1px solid var(--bf-border);
    border-radius: 14px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* De expliciete achtergrond overschrijft de globale button:hover uit site.css, die anders
   dwars door de kaart heen slaat — dezelfde reden als bij .bf-service-card. */
.bf-photo-card:hover { transform: translateY(-2px); border-color: var(--bf-accent-border); background: var(--bf-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }

.bf-photo-card-beeld {
    height: 200px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Zonder foto: een vlak in de kleur van de dienst met haar beginletter. Een lege witte kaart zou
   de rij uit elkaar laten vallen. */
.bf-photo-card-letter { color: #fff; font-size: 1.9rem; font-weight: 800; text-shadow: 0 1px 6px rgba(15, 23, 42, .35); }

/* Plat gehouden: twee regels van elk één lijn hoog. Elke pixel die de strook niet opeet, gaat
   naar de foto — dat is waar de kaart het voor doet. */
.bf-photo-card-tekst { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 9px; }
.bf-photo-card-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bf-photo-card-naam { font-weight: 700; font-size: .92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-photo-card-duur { color: var(--bf-muted); font-size: .78rem; flex-shrink: 0; }
/* Omschrijving (of de reden waarom de dienst niet past) blijft op één lijn; een kaart is geen
   folder, en twee kaarten naast elkaar moeten even hoog blijven. */
.bf-photo-card-onder { color: var(--bf-muted); font-size: .79rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-photo-card-prijs { font-weight: 700; font-size: .88rem; flex-shrink: 0; }

.bf-card-bediening { display: flex; align-items: center; gap: 12px; margin: 8px 4px 2px; }
.bf-card-stippen { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; }
.bf-card-stip { width: 6px; height: 6px; border-radius: 50%; background: var(--bf-border); transition: width .16s ease, background .16s ease; }
.bf-card-stip.actief { width: 18px; border-radius: 3px; background: var(--bf-accent); }
/* Kale pijlen, geen knopjes: de kaart is de blikvanger, de bediening mag ernaast verdwijnen. */
.bf-card-pijl {
    border: none;
    background: none;
    padding: 4px;
    color: var(--bf-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bf-card-pijl:hover { background: none; color: var(--bf-text); }