/*
 * Medic-Design für die öffentlichen Seiten von Easy!Appointments (Buchung, Bestätigung, Absage).
 * Farben und Schrift wie die Website (medic-theme/theme.json). Eingebunden über
 * components/company_color_style.php – nicht im Backend.
 */

@font-face {
    font-family: "D-DIN";
    src: url("fonts/D-DIN.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "D-DIN";
    src: url("fonts/D-DIN-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    --medic-kontrast: #003d5c;
    --medic-blau: #0073ae;
    --medic-lila: #6f0d56;
    --medic-rot: #ed1c23;
    --medic-beige: #f7f5f5;
    --medic-text: #2d2d2e;
    --medic-verlauf: linear-gradient(90deg, #6f0d56 0%, #ed1c23 100%);
    --medic-radius: 8px;

    /* Bootstrap: unabhängig von der Einstellung „Firmenfarbe“ */
    --bs-primary: var(--medic-lila);
    --bs-primary-rgb: 111, 13, 86;
    --bs-link-color: var(--medic-lila);
    --bs-link-color-rgb: 111, 13, 86;
    --bs-link-hover-color: #8e1a6f;
    --bs-body-color: var(--medic-text);
    --bs-body-font-family: "D-DIN", system-ui, sans-serif;
    --bs-focus-ring-color: rgba(111, 13, 86, .25);
}

body {
    background: var(--medic-beige);
    color: var(--medic-text);
    font-family: var(--bs-body-font-family);
    font-size: 1.0625rem;
}

#book-appointment-wizard,
#message-frame {
    border-radius: var(--medic-radius);
    box-shadow: 0 1px 2px rgb(0 61 92 / 6%), 0 8px 24px rgb(0 61 92 / 8%);
}

/* ---------- Kopf ---------- */

/* #book-appointment-wizard #header … : stärker als die Regeln der Firmenfarbe (company_color_style.php) */
#book-appointment-wizard #header.medic-header {
    background-color: #fff !important;
}

.medic-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-bottom: 4px solid transparent;
    border-image: var(--medic-verlauf) 1;
}

#book-appointment-wizard #company-name.medic-header__marke {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 1.25rem;
    min-width: min(100%, 20rem);
    margin: 0;
}

.medic-header__logo {
    display: block;
    height: 56px;
    width: auto;
}

.medic-header__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: 1.25rem;
    border-left: 1px solid rgb(0 61 92 / 15%);
}

.medic-header__titel {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    text-transform: uppercase;
    background: var(--medic-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#book-appointment-wizard #company-name .medic-header__auswahl {
    font-size: .9375rem;
    color: rgb(45 45 46 / 75%);
    overflow-wrap: anywhere;
}

/* Schritt-Anzeige: Kreise, aktiver Schritt gefüllt (frontend.css setzt Größen mit !important) */
#book-appointment-wizard #steps.medic-header__schritte {
    display: flex;
    gap: .5rem;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
}

#book-appointment-wizard #steps .book-step,
#book-appointment-wizard #steps .book-step.active-step {
    display: grid !important;
    place-items: center;
    width: 2.25rem !important;
    height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--medic-lila);
    border-radius: 50% !important;
    background: #fff !important;
    transition: background-color .25s;
}

#book-appointment-wizard #steps .book-step.active-step {
    background: var(--medic-lila) !important;
}

#book-appointment-wizard #steps .book-step strong {
    color: var(--medic-lila) !important;
    font-size: 1rem !important;
    line-height: 1;
}

#book-appointment-wizard #steps .book-step.active-step strong {
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .medic-header {
        justify-content: center;
        text-align: center;
    }

    .medic-header__marke {
        flex-direction: column;
        gap: .75rem;
    }

    .medic-header__text {
        padding-left: 0;
        border-left: 0;
    }
}

/* ---------- Schritte ---------- */

.frame-title {
    color: var(--medic-text) !important;
    font-weight: 400 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.form-control,
.form-select {
    border-radius: var(--medic-radius);
    border-color: rgb(0 61 92 / 20%);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--medic-lila);
    box-shadow: 0 0 0 .25rem rgba(111, 13, 86, .2);
}

.form-check-input {
    border-color: rgb(0 61 92 / 35%);
}

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

/* Buttons wie auf der Website: Weiter/Bestätigen gefüllt, Zurück als Rahmen */
.btn {
    border-radius: var(--medic-radius);
    font-weight: 700;
    letter-spacing: .02em;
}

.button-next,
#book-appointment-submit,
.btn-dark,
.btn-primary {
    background: var(--medic-lila) !important;
    border-color: var(--medic-lila) !important;
    color: #fff !important;
}

.button-next:hover,
#book-appointment-submit:hover,
.btn-dark:hover,
.btn-primary:hover {
    background: #57093f !important;
    border-color: #57093f !important;
}

.button-back,
.btn-outline-secondary {
    background: #fff !important;
    border: 2px solid var(--medic-lila) !important;
    color: var(--medic-lila) !important;
}

.button-back:hover,
.btn-outline-secondary:hover {
    background: var(--medic-beige) !important;
}

/* ---------- Termin über den Mail-Link geöffnet: absagen / Daten löschen ---------- */

.medic-verwalten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1.5rem;
    background: var(--medic-beige);
    border-bottom: 1px solid rgb(0 61 92 / 10%);
}

.medic-verwalten__text {
    margin: 0;
    font-size: .9375rem;
}

.medic-verwalten .btn {
    background: #fff;
    border: 2px solid var(--medic-lila);
    color: var(--medic-lila);
}

.medic-verwalten .btn:hover {
    background: var(--medic-lila);
    color: #fff;
}

.medic-verwalten--daten .btn {
    border-color: #b3261e;
    color: #b3261e;
}

.medic-verwalten--daten .btn:hover {
    background: #b3261e;
    color: #fff;
}

/* ---------- Button-Leiste aller Schritte (Zurück / Weiter / Buchen) ----------
   Upstream: Inline-Abstände, unterschiedliche Höhen, mobil untereinander ohne Abstand. */
#book-appointment-wizard .command-buttons {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

#book-appointment-wizard .command-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
    margin: 0 !important;
    padding: .5rem 1.25rem;
    box-shadow: none !important;
    white-space: nowrap;
}

/* Schritt 4: bündig mit dem Kasten der Einwilligung darüber */
#wizard-frame-4 .command-buttons {
    max-width: 630px;
}

#wizard-frame-4 #book-appointment-form {
    margin: 0;
}

/* mobil: Hauptaktion oben über die volle Breite, „Zurück“ darunter */
@media (max-width: 575.98px) {
    #book-appointment-wizard .command-buttons {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .5rem;
    }

    #book-appointment-wizard .command-buttons > *,
    #book-appointment-wizard .command-buttons .btn {
        width: 100%;
    }

    /* Schritt 1 hat links nur einen Platzhalter */
    #book-appointment-wizard .command-buttons > span {
        display: none;
    }
}

/* ---------- Schritt 1: Impfungen (medic-booking.js) ---------- */

.medic-impfungen {
    margin-bottom: 1.5rem;
}

.medic-impfungen__legende {
    margin-bottom: .25rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.medic-impfungen__hinweis {
    margin-bottom: 1rem;
    color: rgb(45 45 46 / 75%);
}

.medic-impfungen__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .75rem;
}

.medic-impfung {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    border: 1px solid rgb(0 61 92 / 20%);
    border-radius: var(--medic-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.medic-impfung:hover {
    border-color: var(--medic-lila);
}

.medic-impfung:has(input:checked) {
    border-color: var(--medic-lila);
    background: rgb(111 13 86 / 5%);
    box-shadow: inset 0 0 0 1px var(--medic-lila);
}

.medic-impfung__box {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: .1rem 0 0;
}

.medic-impfung__text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.medic-impfung__name {
    font-weight: 700;
    line-height: 1.3;
}

.medic-impfung__info {
    font-size: .875rem;
    color: rgb(45 45 46 / 75%);
}

.medic-anbieter {
    margin: 0;
    padding: .75rem 1rem;
    border-left: 3px solid var(--medic-lila);
    background: var(--medic-beige);
    border-radius: 0 var(--medic-radius) var(--medic-radius) 0;
}

.medic-impfungen__fehler {
    margin: .75rem 0 0;
    color: #b3261e;
    font-weight: 700;
}

/* ---------- Schritt 3: „Meine Daten merken“ ausblenden ----------
   Upstream speichert Name und Kontaktdaten auf Wunsch im Browser (localStorage) – auf geteilten Geräten
   heikel und nicht Teil der Datenschutzhinweise. */
#wizard-frame-3 .mb-3:has(#remember-me) {
    display: none;
}

/* ---------- Schritt 2: Kalender und Uhrzeiten ---------- */

/* Zeitzone: alle Termine sind vor Ort in Dresden */
#select-time .mb-3:has(#select-timezone) {
    display: none;
}

.flatpickr-calendar.inline {
    box-shadow: none;
    border: 1px solid rgb(0 61 92 / 15%);
    border-radius: var(--medic-radius);
    overflow: hidden;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--medic-lila) !important;
    color: #fff !important;
    fill: #fff !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--medic-lila) !important;
    border-color: var(--medic-lila) !important;
}

.flatpickr-day.today {
    border-color: var(--medic-lila);
}

/* Uhrzeiten: Raster ohne eigenen Scrollbereich (Upstream: Liste, max-height 250px, overflow auto);
   Überschriften „Freie Uhrzeiten am …“, „Vormittags“, „Nachmittags“ aus medic-booking.js */
#book-appointment-wizard #select-time {
    max-width: 24rem !important;
}

#book-appointment-wizard #available-hours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

/* „Keine freien Termine“ ist reiner Text – dann kein Raster */
#book-appointment-wizard #available-hours:not(:has(.available-hour)) {
    display: block;
}

/* „Bitte wählen Sie eine Uhrzeit aus.“ (booking.js) über die volle Breite */
#book-appointment-wizard #available-hours #select-hour-prompt {
    grid-column: 1 / -1;
    margin: 0 !important;
    font-weight: 700;
}

#book-appointment-wizard #available-hours .available-hour {
    margin: 0 !important;
    padding: .5rem 0;
    border-radius: var(--medic-radius) !important;
    font-variant-numeric: tabular-nums;
}

.medic-zeit-titel {
    grid-column: 1 / -1;
    margin: .5rem 0 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgb(45 45 46 / 65%);
}

.medic-zeit-titel--datum {
    margin: 0 0 .25rem;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--medic-text);
}

.available-hour.selected-hour,
.available-hour:hover {
    background: var(--medic-lila) !important;
    border-color: var(--medic-lila) !important;
    color: #fff !important;
}

/* ---------- Schritt 4: Einwilligung Datenschutz – gut sichtbar, nicht als Kleingedrucktes ---------- */

#wizard-frame-4 .form-check:is(:has(#accept-to-privacy-policy), :has(#accept-to-terms-and-conditions)) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .25rem .75rem;
    width: 100%;
    margin: 0 0 1rem !important;
    padding: 1rem 1.25rem;
    border: 2px solid var(--medic-lila);
    border-radius: var(--medic-radius);
    background: rgb(111 13 86 / 4%);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

#wizard-frame-4 .form-check:is(:has(#accept-to-privacy-policy), :has(#accept-to-terms-and-conditions)) .form-check-input {
    float: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border-width: 2px;
    border-color: var(--medic-lila);
    cursor: pointer;
}

#wizard-frame-4 .form-check-label {
    cursor: pointer;
}

#wizard-frame-4 .form-check-label a {
    font-weight: 700;
}

/* ohne Haken bestätigt: booking.js setzt .is-invalid an der Checkbox (medic-booking.js entfernt es beim Anhaken) */
#wizard-frame-4 .form-check:is(:has(#accept-to-privacy-policy), :has(#accept-to-terms-and-conditions)):has(.is-invalid) {
    border-color: #b3261e;
    background: rgb(179 38 30 / 6%);
}

#wizard-frame-4 .form-check:has(#accept-to-privacy-policy.is-invalid)::after {
    content: "Bitte bestätigen Sie den Datenschutz, um den Termin zu buchen.";
    grid-column: 2;
    color: #b3261e;
    font-weight: 700;
    font-size: .9375rem;
}

/* ---------- Fuß ---------- */

.medic-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgb(0 61 92 / 10%);
    font-size: .875rem;
}

.medic-fuss__links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.medic-fuss a {
    color: var(--medic-kontrast);
}

.medic-fuss__hinweis {
    color: rgb(45 45 46 / 60%);
}

.medic-fuss__hinweis a {
    color: inherit;
}

/* Bestätigungsseite (pages/booking_confirmation.php) */
.medic-bestaetigung {
    padding: .5rem 0;
}

.medic-bestaetigung__logo {
    display: block;
    width: 200px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 2rem;
}

.medic-bestaetigung__symbol {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgb(111 13 86 / 10%);
    color: var(--medic-lila);
}

.medic-bestaetigung__text {
    margin: 0 auto 1rem;
    max-width: 32rem;
    color: rgb(45 45 46 / 80%);
}

.medic-bestaetigung__fertig {
    margin: 0 0 1.75rem;
    font-weight: 700;
    font-size: 1.0625rem;
}

.medic-bestaetigung__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

/* Bestätigungs- und Absageseite: Erfolgsfarbe und Symbol in Medic-Lila */
#message-frame .text-success {
    color: var(--medic-lila) !important;
}

#message-frame .bg-success {
    background-color: var(--medic-lila) !important;
}

#message-frame h3,
#message-frame .h3 {
    font-weight: 700;
    text-transform: uppercase;
    background: var(--medic-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}