/**
 * Echt Inzicht — Bookly CSS overrides
 *
 * Layout: datum links, tijdsloten naast elkaar rechts, één rij per dag.
 * Toon alleen één "scherm" met dagen tegelijk — gebruik Bookly's eigen
 * volgende/vorige-knop voor meer dagen.
 */

:root {
    --bookly-main-color: #ED6F54 !important;
    --bookly-color: #ED6F54 !important;
}

/* ── Wrapper ── */
.bookly-css-root .bookly-form {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 16px !important;
    color: #252639 !important;
    background: transparent !important;
}

/* ── Intro tekst en bookly's "klik om door te gaan" tekst verbergen, want we hebben eigen lead ── */
.bookly-css-root .bookly-form > .bookly-box:first-child {
    display: none !important;
}

.bookly-css-root .bookly-service-step > .bookly-box.bookly-bold {
    display: none !important;
}

.bookly-css-root .bookly-mobile-step-1,
.bookly-css-root .bookly-mobile-step-2 {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   TIJDSTAP — Datum links, tijdsloten op rij rechts
   ════════════════════════════════════════════════════════════════ */

/* Kader op de bookly-form (buitenste container), NIET op time-step.
   Bookly zet zelf een inline width op .bookly-time-step en als wij daar
   een border of padding op zetten, klopt zijn schuif-berekening niet meer. */
.bookly-css-root .bookly-form {
    border: 1px solid #e2dbd4 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* Tijdstep-container: GEEN width/border/padding overrides — laat Bookly zijn
   eigen inline width hanteren zodat de pagination-berekening klopt. */
.bookly-css-root .bookly-time-step {
    background: transparent !important;
}

/* Columnizer-wrap: venster dat één scherm tegelijk laat zien.
   Bookly's JS schuift de columnizer naar links via een left-property,
   en wij maskeren met overflow:hidden zodat alleen het actieve scherm
   zichtbaar is. */
.bookly-css-root .bookly-columnizer-wrap {
    overflow: hidden !important;
    position: relative !important;
}

/* Columnizer = container van alle schermen, naast elkaar in een rij.
   GEEN transition op left — Bookly's JS animeert al zelf en als wij
   ook een transition toepassen, krijg je conflicten bij het dynamisch
   toevoegen van nieuwe schermen na een AJAX-call. */
.bookly-css-root .bookly-columnizer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    /* Bookly's JS zet hier inline 'left' op om te schuiven; niet overrulen */
    width: auto !important;
    transition: none !important;
}

/* Elk scherm: vaste breedte (100% van wrap), dagen verticaal eronder.
   GEEN min-width/max-width 100% met !important — dat verstoort Bookly's
   eigen berekening wanneer hij nieuwe schermen invoegt. Bookly zet zelf
   een inline width op de tijd-step container, en de schermen passen zich
   daarop aan. */
.bookly-css-root .bookly-time-screen {
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 100% !important;
    position: static !important;
    box-sizing: border-box !important;
}

/* Per dag: één rij — datum links, tijdsloten naast elkaar rechts.
   Hogere specificiteit om Bookly's eigen regels te overrulen. */
.bookly-css-root .bookly-form .bookly-columnizer .bookly-column,
.bookly-css-root .bookly-column {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid #e2dbd4 !important;
    background: #ffffff !important;
    width: 100% !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    position: static !important;
    float: none !important;
}

.bookly-css-root .bookly-form .bookly-columnizer .bookly-column:last-child,
.bookly-css-root .bookly-column:last-child {
    border-bottom: none !important;
}

/* Dag label — vast aan de linkerkant
   Specificiteit moet hoger zijn dan Bookly's eigen
   .bookly-form .bookly-columnizer .bookly-day (3 classes). */
.bookly-css-root .bookly-form .bookly-columnizer .bookly-day,
.bookly-css-root .bookly-form .bookly-schedule-date,
.bookly-css-root .bookly-day {
    font-family: 'PP Editorial New', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #252639 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 1.5rem 0 0 !important; /* alleen rechts ruimte voor tijdsloten */
    cursor: default !important;
    white-space: nowrap !important;
    min-width: 140px !important;
    width: auto !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    height: auto !important;
    box-shadow: none !important;
}

/* Tijdslot-knoppen — hogere specificiteit voor over Bookly's eigen regels */
.bookly-css-root .bookly-form .bookly-columnizer .bookly-hour,
.bookly-css-root .bookly-hour {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #252639 !important;
    background: #F4FBFB !important;
    border: 1px solid #e2dbd4 !important;
    border-radius: 6px !important;
    padding: 0.4rem 0.85rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    height: auto !important;
    min-width: 64px !important;
    width: auto !important;
    line-height: 1.3 !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
}

.bookly-css-root .bookly-form .bookly-columnizer .bookly-hour:hover:not(.booked),
.bookly-css-root .bookly-hour:hover:not(.booked) {
    background: #F3DBC9 !important;
    border-color: #ED6F54 !important;
    color: #252639 !important;
}

.bookly-css-root .bookly-form .bookly-columnizer .bookly-hour.bookly-active,
.bookly-css-root .bookly-form .bookly-columnizer .bookly-hour:focus:not(.booked),
.bookly-css-root .bookly-hour.bookly-active,
.bookly-css-root .bookly-hour:focus:not(.booked) {
    background: #ED6F54 !important;
    border-color: #ED6F54 !important;
    color: #ffffff !important;
    outline: none !important;
}

.bookly-css-root .bookly-form .bookly-columnizer .bookly-hour.booked,
.bookly-css-root .bookly-hour.booked {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
}

/* Iconen binnen tijdslot weghalen */
.bookly-css-root .bookly-hour-icon,
.bookly-css-root .bookly-time-additional {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATIE ONDERAAN — Eerdere / Volgende dagen knoppen
   ════════════════════════════════════════════════════════════════ */

.bookly-css-root .bookly-nav-steps {
    padding: 1.25rem 1.5rem !important;
    background: transparent !important;
    border-top: 1px solid #e2dbd4 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.bookly-css-root .bookly-nav-steps .bookly-right {
    display: flex !important;
    gap: 0.75rem !important;
    float: none !important;
}

/* Beide knoppen donkergrijs (secundaire actie) */
.bookly-css-root .bookly-time-prev,
.bookly-css-root .bookly-time-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    background: #252639 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    min-width: 200px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

.bookly-css-root .bookly-time-prev:hover,
.bookly-css-root .bookly-time-next:hover {
    background: #A14B39 !important;
}

/* Verberg Bookly's eigen "<" en ">" tekst en zet onze eigen labels via pseudo-element */
.bookly-css-root .bookly-time-prev .ladda-label,
.bookly-css-root .bookly-time-next .ladda-label {
    font-size: 0 !important; /* verberg originele "<" / ">" */
    line-height: 1 !important;
}
.bookly-css-root .bookly-time-prev::after {
    content: '← Eerdere dagen';
    font-size: 11px;
    letter-spacing: 0.12em;
}
.bookly-css-root .bookly-time-next::after {
    content: 'Volgende dagen →';
    font-size: 11px;
    letter-spacing: 0.12em;
}

/* Vorige/back step knop (terug naar service-keuze) — meestal verborgen */
.bookly-css-root .bookly-back-step {
    background: transparent !important;
    color: #5a5870 !important;
    border: 1px solid #e2dbd4 !important;
    border-radius: 6px !important;
    padding: 0.65rem 1.25rem !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Algemene next-step knop (na keuze tijdslot) */
.bookly-css-root .bookly-next-step {
    background: #ED6F54 !important;
    color: #ffffff !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 0.85rem 1.75rem !important;
    border: none !important;
    cursor: pointer !important;
}

.bookly-css-root .bookly-next-step:hover {
    background: #A14B39 !important;
}

/* Algemene bookly-btn (fallback) */
.bookly-css-root .bookly-btn {
    font-family: 'Instrument Sans', sans-serif !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* ════════════════════════════════════════════════════════════════
   PROGRESS TRACKER — verbergen, we hebben eigen stappen-indicator
   ════════════════════════════════════════════════════════════════ */

.bookly-css-root .bookly-progress-tracker {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   FORMULIER-STAP (naam, e-mail, etc.) — stap 3
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   FORMULIER-STAP (naam, e-mail, etc.) — stap 3
   
   Werkelijke HTML-structuur:
   .bookly-details-step
   ├── .bookly-box.bookly-table        ← container met voornaam + achternaam
   │   ├── .bookly-form-group (voornaam) + .bookly-label-error
   │   └── .bookly-form-group (achternaam) + .bookly-label-error
   ├── .bookly-box.bookly-table        ← container met telefoon + e-mail
   │   ├── .bookly-form-group (telefoon) + .bookly-label-error
   │   └── .bookly-form-group (e-mail) + .bookly-label-error
   └── .bookly-custom-fields-container
       └── .bookly-box.bookly-custom-field-row
           └── .bookly-form-group
   ════════════════════════════════════════════════════════════════ */

/* Details-step: alle blokken (table-wrappers + custom fields) onder elkaar */
.bookly-css-root .bookly-form .bookly-details-step,
.bookly-css-root .bookly-form .bookly-js-details-step,
.bookly-css-root .bookly-details-step,
.bookly-css-root .bookly-js-details-step {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 1.5rem !important;
    background: #ffffff !important;
}

/* Bookly-table containers: 2-koloms grid voor de form-group paren.
   Voornaam+Achternaam vormen rij 1, Telefoon+E-mail rij 2. */
.bookly-css-root .bookly-details-step > .bookly-box.bookly-table,
.bookly-css-root .bookly-js-details-step > .bookly-box.bookly-table,
.bookly-css-root .bookly-details-step .bookly-box.bookly-table {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 1.5rem !important;
    align-items: start !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Form-groups in de tables: gewoon block, vullen automatisch hun cel */
.bookly-css-root .bookly-form-group {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    clear: none !important;
    display: block !important;
}

/* Lege error-labels nemen geen ruimte — pas tonen bij fout */
.bookly-css-root .bookly-label-error:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wel tonen wanneer er een fout-tekst staat */
.bookly-css-root .bookly-label-error:not(:empty) {
    display: block !important;
    margin-top: 0.4rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Custom fields container: gewoon block-flow */
.bookly-css-root .bookly-custom-fields-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0 !important;
}

.bookly-css-root .bookly-custom-fields-container .bookly-box.bookly-custom-field-row {
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Labels boven het veld */
.bookly-css-root .bookly-form-group > label,
.bookly-css-root .bookly-form-group label {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #5a5870 !important;
    display: block !important;
    margin: 0 0 0.5rem !important;
    width: auto !important;
    text-align: left !important;
}

/* Verplicht-sterretje */
.bookly-css-root .bookly-required-mark,
.bookly-css-root .bookly-label-required {
    color: #ED6F54 !important;
    margin-left: 0.15rem !important;
}

/* Input/textarea-styling */
.bookly-css-root .bookly-form-group input[type="text"],
.bookly-css-root .bookly-form-group input[type="email"],
.bookly-css-root .bookly-form-group input[type="tel"],
.bookly-css-root .bookly-js-user-phone-input,
.bookly-css-root .bookly-js-first-name,
.bookly-css-root .bookly-js-last-name,
.bookly-css-root .bookly-js-user-email,
.bookly-css-root .bookly-js-custom-field,
.bookly-css-root .bookly-form-control,
.bookly-css-root .bookly-form-group textarea,
.bookly-css-root textarea.bookly-form-control,
.bookly-css-root .bookly-form-group select {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #252639 !important;
    background: #ffffff !important;
    border: 1px solid #e2dbd4 !important;
    border-radius: 6px !important;
    padding: 0.75rem 1rem !important;
    width: 100% !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.bookly-css-root .bookly-form-group textarea,
.bookly-css-root textarea.bookly-form-control {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Focus-state */
.bookly-css-root .bookly-form-group input:focus,
.bookly-css-root .bookly-form-group textarea:focus,
.bookly-css-root .bookly-form-group select:focus,
.bookly-css-root .bookly-js-user-phone-input:focus {
    outline: none !important;
    border-color: #ED6F54 !important;
    box-shadow: 0 0 0 3px rgba(237, 111, 84, 0.15) !important;
}

/* Placeholder-stijl */
.bookly-css-root .bookly-form-group input::placeholder,
.bookly-css-root .bookly-form-group textarea::placeholder {
    color: #b8b6c0 !important;
    font-weight: 300 !important;
}

/* Hint-tekst onder velden: voor custom fields heeft Bookly een losse div
   zonder class als laatste child binnen .bookly-form-group */
.bookly-css-root .bookly-custom-field-row .bookly-form-group > div:last-child:not([id]):not(.bookly-label-error) {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    color: #5a5870 !important;
    font-style: italic !important;
    margin-top: 0.4rem !important;
    line-height: 1.4 !important;
}

/* ── Vorige/Volgende knoppen op stap 3 ──
   Format matched de pagination-knoppen op stap 2 (.bookly-time-prev / .bookly-time-next):
   zelfde font, padding, border-radius, hoogte. Kleur verschilt:
   Terug = donkernavy (secundair, zoals stap 2), Volgende = oranje (primaire actie).
   
   Belangrijk: Bookly's ladda-button styling voegt extra padding/min-height toe via
   een attribute-selector. We overrulen die door height en padding hard te zetten,
   en de ladda-label container ook expliciet hetzelfde line-height geven. */
.bookly-css-root .bookly-form .bookly-details-step + .bookly-box.bookly-nav-steps .bookly-back-step,
.bookly-css-root .bookly-form .bookly-js-details-step + .bookly-box.bookly-nav-steps .bookly-back-step {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #252639 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    min-width: 200px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.bookly-css-root .bookly-form .bookly-details-step + .bookly-box.bookly-nav-steps .bookly-back-step:hover,
.bookly-css-root .bookly-form .bookly-js-details-step + .bookly-box.bookly-nav-steps .bookly-back-step:hover {
    background: #A14B39 !important;
    color: #ffffff !important;
}

/* "Volgende" knop op stap 3 = primair (oranje), zelfde format als hierboven */
.bookly-css-root .bookly-form .bookly-details-step + .bookly-box.bookly-nav-steps .bookly-next-step,
.bookly-css-root .bookly-form .bookly-js-details-step + .bookly-box.bookly-nav-steps .bookly-next-step {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ED6F54 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.75rem 1.5rem !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    min-width: 200px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.bookly-css-root .bookly-form .bookly-details-step + .bookly-box.bookly-nav-steps .bookly-next-step:hover,
.bookly-css-root .bookly-form .bookly-js-details-step + .bookly-box.bookly-nav-steps .bookly-next-step:hover {
    background: #A14B39 !important;
}

/* De interne span met de tekst (ladda-label) erft de styling van de knop maar
   krijgt soms een eigen line-height/padding van ladda — die we hier neutraliseren. */
.bookly-css-root .bookly-form .bookly-details-step + .bookly-box.bookly-nav-steps .ladda-label,
.bookly-css-root .bookly-form .bookly-js-details-step + .bookly-box.bookly-nav-steps .ladda-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nav-balk op stap 3: beide knoppen rechts uitgelijnd met ruimte ertussen */
.bookly-css-root .bookly-details-step + .bookly-box.bookly-nav-steps,
.bookly-css-root .bookly-js-details-step + .bookly-box.bookly-nav-steps {
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

/* Bookly's eigen .bookly-right wrapper rond de Next-knop op stap 3 mag geen
   extra ruimte meer claimen — anders staan de knoppen alsnog uit elkaar. */
.bookly-css-root .bookly-details-step + .bookly-box.bookly-nav-steps .bookly-right,
.bookly-css-root .bookly-js-details-step + .bookly-box.bookly-nav-steps .bookly-right {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    display: inline-flex !important;
}


/* ── Telefoon ── */
.bookly-css-root .iti {
    width: 100% !important;
    display: block !important;
}

.bookly-css-root .iti .iti__selected-country {
    background: #F4FBFB !important;
    border: 1px solid #e2dbd4 !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    height: auto !important;
    padding: 0.75rem !important;
}

/* ── Foutmeldingen ── */
.bookly-css-root .bookly-label-error:not(:empty) {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 13px !important;
    color: #A14B39 !important;
    background: none !important;
    border: none !important;
    padding: 0.5rem 0 !important;
}

/* ── Submit knop ── */
.bookly-css-root .bookly-btn-submit {
    background: #ED6F54 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.85rem 1.75rem !important;
    cursor: pointer !important;
}

.bookly-css-root .bookly-btn-submit:hover {
    background: #A14B39 !important;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

/* TABLET (601-1024px): twee kolommen behouden, info compacter,
   tijdsloten springen in bij wrap (start onder eerste rij tijdsloten,
   niet onder de datum). */
@media (min-width: 601px) and (max-width: 1024px) {

    /* Per dag — datum absoluut positioneren zodat tijdsloten kunnen
       wrappen met inspringing. */
    .bookly-css-root .bookly-form .bookly-columnizer .bookly-column,
    .bookly-css-root .bookly-column {
        position: relative !important;
        padding-left: calc(140px + 1.5rem) !important; /* ruimte voor datum + gap */
        padding-right: 1rem !important;
    }

    .bookly-css-root .bookly-form .bookly-columnizer .bookly-day,
    .bookly-css-root .bookly-form .bookly-schedule-date,
    .bookly-css-root .bookly-day {
        position: absolute !important;
        left: 1rem !important;
        top: 1rem !important;
        margin: 0 !important;
    }
}

/* MOBIEL (≤600px): info-kolom boven, agenda eronder.
   Per dag: datum boven, tijdsloten daaronder. */
@media (max-width: 600px) {
    .bookly-css-root .bookly-column {
        padding: 0.875rem 1rem !important;
        gap: 0.4rem !important;
    }
    .bookly-css-root .bookly-day {
        min-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
        font-size: 15px !important;
    }
    .bookly-css-root .bookly-hour {
        min-width: 68px !important;
        font-size: 13px !important;
        padding: 0.45rem 1rem !important;
    }
    .bookly-css-root .bookly-nav-steps {
        padding: 1rem !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
    }
    .bookly-css-root .bookly-time-prev,
    .bookly-css-root .bookly-time-next {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0.65rem 0.5rem !important;
        font-size: 10px !important;
    }

    /* Stap 3 op mobiel: alle velden onder elkaar (geen 1fr 1fr meer) */
    .bookly-css-root .bookly-details-step,
    .bookly-css-root .bookly-js-details-step {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }
}