@media (min-width:768px){#book-appointment-wizard{border-radius:var(--bs-border-radius)!important;box-shadow:var(--bs-box-shadow-sm)!important}}#book-appointment-wizard .book-step.active-step{height:45px!important;width:45px!important;background:var(--bs-white)!important;padding:7px!important;margin-right:13px!important;margin-top:0!important}#book-appointment-wizard .book-step.active-step strong{color:var(--bs-primary)!important;font-size:21px!important}#book-appointment-wizard .book-step:not(.active-step){height:35px!important;width:35px!important;background:rgba(0,0,0,.2)!important;padding:8px!important;margin-right:12px!important;margin-top:6px!important}#book-appointment-wizard .book-step:not(.active-step) strong{color:rgba(255,255,255,.5)!important;font-size:12px!important}#book-appointment-wizard #available-hours .available-hour{margin-bottom:10px}#book-appointment-wizard #available-hours .selected-hour{background-color:var(--bs-primary)!important;border-color:var(--bs-primary)!important;color:var(--bs-white)!important}#book-appointment-wizard .captcha-title .fa-sync-alt{cursor:pointer;transition:all .3s linear}#book-appointment-wizard .captcha-title .fa-sync-alt:hover{color:var(--bs-primary)}.popover .popover-title{text-align:center}.popover .popover-content #language-list .language{margin:15px 0}#book-appointment-wizard .flatpickr-calendar.inline{margin:auto}
/* ===================================================================
   gaertner.onl Custom Branding for EasyAppointments
   Recolor (green -> blue #2563eb) + optional dark theme (html.ea-dark)
   Appended after EA's own frontend styles so these rules win.
   =================================================================== */

/* --- Brand recolor: Bootstrap primary green -> site blue --- */
:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1e40af;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;
}
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
    --bs-btn-active-bg: #1d4ed8;
    --bs-btn-active-border-color: #1d4ed8;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}
.bg-primary { background-color: #2563eb !important; }
.text-primary { color: #2563eb !important; }
.btn-outline-primary {
    --bs-btn-color: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #2563eb;
    --bs-btn-active-border-color: #2563eb;
}

/* --- flatpickr calendar: material_green -> blue --- */
.flatpickr-months,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: #2563eb !important;
}
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    color: #fff !important;
    fill: #fff !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #2563eb !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.flatpickr-day.today { border-color: #2563eb !important; }
.flatpickr-day.today:hover { background: #2563eb !important; color: #fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #dbeafe !important; }

/* Non-bookable days: material_green renders them at ~0.1 alpha (barely
   legible). Lift to a muted-but-readable gray so users can still read them,
   while staying clearly dimmer than the dark, bookable days. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #94a3b8 !important; }

/* ===================================================================
   Dark theme — activated via <html class="ea-dark"> (toggled by the
   parent page through postMessage). Best-effort; refine as needed.
   =================================================================== */
html.ea-dark,
html.ea-dark body { background-color: #020617 !important; color: #e2e8f0 !important; }

html.ea-dark .bg-body,
html.ea-dark .bg-white,
html.ea-dark .wizard-frame,
html.ea-dark #book-appointment-wizard { background-color: #0f172a !important; color: #e2e8f0 !important; }

html.ea-dark .book-step { background-color: #1e293b !important; color: #e2e8f0 !important; }
html.ea-dark .book-step.active-step.bg-white { background-color: #334155 !important; color: #fff !important; }

html.ea-dark .form-control,
html.ea-dark .form-select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
html.ea-dark .form-control::placeholder { color: #64748b !important; }
html.ea-dark .text-muted,
html.ea-dark small { color: #94a3b8 !important; }
html.ea-dark hr { border-color: #334155 !important; }

/* Weiter/Zurück (btn-dark) would vanish on dark bg -> make it blue */
html.ea-dark .btn-dark {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1d4ed8;
}

/* Available-hour / outline buttons */
html.ea-dark .btn-outline-secondary,
html.ea-dark .available-hour {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
html.ea-dark .available-hour:hover { background-color: #1e293b !important; }

/* flatpickr dark — the visible white box is .flatpickr-innerContainer /
   .flatpickr-time (the .flatpickr-calendar itself is transparent), so those
   are what must be painted dark. Without this the day numbers turned light
   but sat on a white background -> available days looked faded and disabled
   days looked highlighted (inverted). */
html.ea-dark .flatpickr-calendar,
html.ea-dark .flatpickr-innerContainer,
html.ea-dark .flatpickr-days,
html.ea-dark .flatpickr-time { background: #0f172a !important; box-shadow: none !important; }
html.ea-dark .flatpickr-days { border-left-color: #334155 !important; border-right-color: #334155 !important; }
html.ea-dark .flatpickr-innerContainer { border-bottom-color: #334155 !important; }
html.ea-dark .flatpickr-day { color: #e2e8f0 !important; }
html.ea-dark .flatpickr-day.flatpickr-disabled,
html.ea-dark .flatpickr-day.flatpickr-disabled:hover,
html.ea-dark .flatpickr-day.notAllowed,
html.ea-dark .flatpickr-day.prevMonthDay,
html.ea-dark .flatpickr-day.nextMonthDay { color: #64748b !important; }
html.ea-dark .flatpickr-day:hover { background: #1e293b !important; border-color: #1e293b !important; }