/* ----------------------------------------------------------------------------
 * BKL Einbett-Modus (22.10.2026): Buchungsseite im iframe auf bkl.training.
 * Aktiv nur im iframe (Klasse bkl-embed von assets/js/bkl-embed.js), die eigenständige Seite bleibt unverändert.
 * Die Homepage liefert Rahmen, Überschrift und Hintergrund, das Widget nur den Ablauf.
 * Variante "karte" (?rahmen=karte, bleibt über window.name auch auf der Erfolgsseite, Klasse bkl-embed-karte): Morgenholz-Kasten, z. B. für grüne Abschnitte.
 * Impeccable-Critique 22.10.2026: .impeccable/critique/
 * ---------------------------------------------------------------------------- */

html.bkl-embed,
html.bkl-embed body {
    background: transparent !important;
}

/* Mindesthöhe aus: im iframe mit automatischer Höhe würde 100vh sich selbst hochschaukeln */
html.bkl-embed #main,
html.bkl-embed #main > .wrapper {
    min-height: 0 !important;
}

html.bkl-embed #main {
    max-width: none;
    padding: 0 !important;
}

html.bkl-embed #main > .wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

html.bkl-embed #book-appointment-wizard {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html.bkl-embed #book-appointment-wizard .wizard-frame {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 28px !important;
}

/* Kopf: Name und Auswahl stehen schon auf der Seite, es bleiben nur die Schritte */
html.bkl-embed #company-name,
html.bkl-embed #header .display-booking-selection {
    display: none !important;
}

html.bkl-embed #book-appointment-wizard #header {
    background: transparent !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

/* Schritte als ruhige Zeile: Kreis mit Zahl, Wort daneben */
html.bkl-embed #book-appointment-wizard #steps {
    width: auto !important;
    float: none !important;
    display: flex !important;
    gap: 28px;
    margin: 0 !important;
    padding: 0 !important;
}

html.bkl-embed #book-appointment-wizard .book-step.active-step,
html.bkl-embed #book-appointment-wizard .book-step:not(.active-step) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    background: none !important;
    transform: none !important;
}

html.bkl-embed #book-appointment-wizard .book-step.active-step strong,
html.bkl-embed #book-appointment-wizard .book-step:not(.active-step) strong {
    display: grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bkl-honigsaum);
    color: var(--bkl-erdton) !important;
    font-size: .9375rem !important;
    font-weight: 700;
    line-height: 1 !important;
}

html.bkl-embed #book-appointment-wizard .book-step.active-step strong {
    background: var(--bkl-kiefernpfad);
    color: var(--bkl-morgentau) !important;
}

html.bkl-embed #book-appointment-wizard .book-step::after {
    position: static;
    transform: none;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--bkl-erdton);
    opacity: 1;
}

html.bkl-embed #book-appointment-wizard .book-step.active-step::after {
    color: var(--bkl-tiefholz);
    font-weight: 600;
}

/* Schritt 1 (Leistung) ist über den Link vorgewählt, zurück gibt es von Schritt 2 aus nicht.
   Der unsichtbare Knopf hielt sonst 57px Platz unter „Weiter“ frei. */
html.bkl-embed #book-appointment-wizard .command-buttons #button-back-2 {
    display: none !important; /* stärker als die Knopf-Regel ab 600px, sonst bleibt er unsichtbar stehen (Abgleich Julian) */
}

html.bkl-embed #book-appointment-wizard .command-buttons {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* Überschrift im Widget eine Stufe kleiner als auf der eigenen Seite, die Seite hat schon ihre H1 */
html.bkl-embed #book-appointment-wizard .frame-title {
    font-size: clamp(1.5rem, 2vw, 1.75rem) !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

html.bkl-embed #frame-footer {
    display: none !important;
}

@media (max-width: 420px) {
    html.bkl-embed #book-appointment-wizard #steps {
        gap: 18px;
    }

    html.bkl-embed #book-appointment-wizard .book-step.active-step strong,
    html.bkl-embed #book-appointment-wizard .book-step:not(.active-step) strong {
        width: 28px;
        height: 28px;
    }

    html.bkl-embed #book-appointment-wizard .book-step.active-step,
    html.bkl-embed #book-appointment-wizard .book-step:not(.active-step) {
        gap: 8px;
    }
}

/* Kalender und Uhrzeiten an derselben Kante wie Überschrift und Knopf (Bootstrap-Spalten haben 12px Innenabstand) */
html.bkl-embed #wizard-frame-2 .frame-content > [class*="col-"],
html.bkl-embed #wizard-frame-2 .frame-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Kalender und Uhrzeiten linksbündig in voller Spaltenbreite (eigenständig: 640px mittig) */
html.bkl-embed #wizard-frame-2 .flatpickr-calendar.inline {
    max-width: none;
    margin: 8px 0 16px;
}

html.bkl-embed #select-time,
html.bkl-embed .bkl-hours-date {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Breites Widget (ab 600px Fensterbreite): "Weiter" ist ein normaler Knopf statt eines Balkens über die ganze Spalte */
@media (min-width: 600px) {
    html.bkl-embed #book-appointment-wizard .command-buttons {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 16px;
    }

    html.bkl-embed #book-appointment-wizard .command-buttons .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 220px !important;
        margin: 0 !important;
    }

    /* Zurück links und schmal, Weiter rechts daneben als einzige Hauptaktion (Abgleich Julian 22.10.2026) */
    html.bkl-embed #book-appointment-wizard .command-buttons .button-back {
        min-width: 0 !important;
    }

    /* Formular um "Termin buchen" nur so breit wie der Knopf, sonst rutscht er nach rechts */
    html.bkl-embed #book-appointment-wizard #book-appointment-form {
        width: auto !important;
    }
}

/* Heller Modus: rundum 8px Luft, damit der Fokusring (2px Abstand + 2px Linie, außen) nicht am iframe-Rand
   abgeschnitten wird. Julian gleicht die 8px auf der Seite aus (26.10.2026) */
html.bkl-embed:not(.bkl-embed-karte) #book-appointment-wizard {
    padding: 8px !important;
}

/* ---------- Variante Karte ---------- */

html.bkl-embed-karte #book-appointment-wizard,
html.bkl-embed-karte .bkl-message {
    background: var(--bkl-morgenholz) !important;
    border-radius: 16px !important;
    padding: 28px 28px 24px !important;
}

@media (max-width: 420px) {
    html.bkl-embed-karte #book-appointment-wizard,
    html.bkl-embed-karte .bkl-message {
        padding: 22px 18px 18px !important;
    }
}

/* ---------- Erfolgsseite im iframe ---------- */

html.bkl-embed #message-frame {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 8px !important; /* rundum 8px wie das Formular im hellen Modus (26.10.2026) */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

html.bkl-embed-karte #message-frame {
    background: var(--bkl-morgenholz) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
}

/* Uhrzeiten als gleichmäßiges Raster, füllt jede Breite ohne Lücke rechts */
html.bkl-embed #available-hours {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px 8px;
}

html.bkl-embed #available-hours .available-hour {
    min-width: 0;
    margin: 0 !important;
    padding: 10px 8px;
}

/* Schmale Karte (z. B. Handy auf grünem Grund): Schritte enger, damit "Bestätigen" passt */
@media (max-width: 380px) {
    html.bkl-embed #book-appointment-wizard #steps {
        gap: 12px;
    }

    html.bkl-embed #book-appointment-wizard .book-step.active-step strong,
    html.bkl-embed #book-appointment-wizard .book-step:not(.active-step) strong {
        width: 26px;
        height: 26px;
        font-size: .875rem !important;
    }

    html.bkl-embed #book-appointment-wizard .book-step::after {
        font-size: .875rem;
    }
}

/* Karte: kein zweiter Rahmen um den Kalender innerhalb der Karte (Abgleich Julian 22.10.2026) */
html.bkl-embed-karte #wizard-frame-2 .flatpickr-calendar.inline {
    border-color: transparent !important;
}

html.bkl-embed-karte #wizard-frame-2 .flatpickr-months {
    padding-left: 0 !important;
    padding-right: 0 !important; /* "November" bündig mit "Weiter" (Critique 22.10.2026 abends) */
}

/* Bestätigen im Widget: Titel steht links, die Karte auch */
html.bkl-embed #wizard-frame-4 .frame-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

html.bkl-embed .bkl-confirm-note,
html.bkl-embed .bkl-confirm-help {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}