/* Taurelion customizations for the public booking page */

/* Remove the whole footer (Powered by / language badge / login button) */
#frame-footer {
    display: none !important;
}

/* Hide the timezone selector — all customers are assumed to be in Germany */
.mb-3:has(#select-timezone) {
    display: none !important;
}

/* Hide the "remember me" checkbox and its hint text */
.mb-3:has(#remember-me) {
    display: none !important;
}

/* Tighter frame now that the footer is gone */
#book-appointment-wizard {
    border-radius: 16px;
}

/* Dienstleistung/Anbieter-Unterzeile im Wizard-Header ausblenden */
.display-booking-selection {
    display: none !important;
}

/* Dienstleistung/Anbieter-Name auch im Bestätigungsschritt (Step 3) ausblenden */
#appointment-details .fw-bold.fs-3,
#appointment-details .fw-bold.text-muted {
    display: none !important;
}

/* Dezenter Blauton statt reinem Weiß, passend zur Landingpage (Navy-Familie) */
#book-appointment-wizard.bg-body,
#message-frame.bg-body {
    background-color: #E9EEF7 !important;
}

/* Flatpickr-Kalender hat eine fest codierte Breite (~308px) aus der Bibliothek selbst,
   die sich nicht an schmalere Container anpasst — das war die Ursache für den auf Mobile
   abgeschnittenen rechten Rand. Wochentag-Header (flex:1, ohne Deckel) und Tageszahlen
   (14.2857% Basis, aber mit max-width:39px gedeckelt) verwenden intern unterschiedliche
   Verteilungslogiken — werden beide auf 100% eines breiten Desktop-Containers gestreckt,
   laufen die beiden Zeilen zunehmend auseinander (rechts bis zu 40px Versatz). Deshalb den
   Kalender auf seine native Design-Breite deckeln (dort ist das Verhältnis stimmig) und
   zentrieren, statt ihn auf volle Containerbreite zu strecken. */
.flatpickr-calendar {
    width: 100% !important;
    max-width: 307.875px !important;
    margin: 0 auto !important;
}
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer,
.flatpickr-months,
.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

html, body {
    overflow-x: hidden;
}
@media (max-width: 420px) {
    #book-appointment-wizard {
        font-size: 14px;
    }
}