/* ========================================================================
   Booking Public Flow — Shared CSS
   ========================================================================
   Shared between BookingServices.razor and BookingStaff.razor (and andere
   Booking-Pages). Vorher: in BookingServices.razor.css scoped — was dazu
   führte, dass Staff die Klassen NICHT anwenden konnte (scoped CSS bekommt
   nur das Page-eigene b-xxx Attribut). 2026-06-23 in globales File gezogen
   um die Pages visuell anzugleichen.

   Klassen-Inventar (BEM-ähnlich):
   - .sz-booking-tabs / .sz-booking-tabs__inner  — fixed Tab-Bar
   - .sz-booking-top / .sz-booking-top--hidden   — Header-Block über Layer 1
   - .sz-layer1 / .sz-layer1--hidden             — Page-Content-Wrapper
   - .sz-svc-card                                — Service-Karten
   - .sz-cart / .sz-cart--expanded               — Sticky Bottom-Sheet
   - .sz-cart__header, __body, __cta-wrap, …    — Sheet-Innenstruktur
*/

/* ── Booking-Confirmation Success-Animation ────────────────────────
   Expandierende Ring-Pulses (radial nach aussen, fade-to-white) +
   animierter Checkmark mit stroke-draw. Pure CSS, kein JS.
   Respektiert prefers-reduced-motion. Spec 2026-06-23. */

.sz-success-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 120px;
    margin-bottom: 16px;
}

/* Ring-Pulses — 3 konzentrische Ringe, gestaffelte Delays. Expandieren
   nach aussen und faden gleichzeitig aus. Die Border-Variante erzeugt
   den "Ring"-Look (statt einer ausgefüllten Welle). */
.sz-success-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--sz-primary);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

/* Checkmark — solid green circle + animierter white check path.
   Wichtig: Wir scalen das GANZE SVG (CSS-Element), NICHT den circle
   intern via transform-origin: 40px 40px. Letzteres verhält sich quer-Browser
   inkonsistent (Chrome/Firefox interpretieren transform-origin auf SVG-Children
   anders → Octagon-Render-Artefakt während der Animation). */
.sz-success-check {
    position: relative;
    z-index: 1;
    transform-origin: center center;
}

.sz-success-check__path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

/* Animationen nur wenn User Motion erlaubt. */
@media (prefers-reduced-motion: no-preference) {
    .sz-success-ring {
        animation: sz-ring-pulse 2.6s ease-out forwards;
    }
    .sz-success-ring--1 { animation-delay: 0.0s; }
    .sz-success-ring--2 { animation-delay: 0.55s; }
    .sz-success-ring--3 { animation-delay: 1.1s; }

    .sz-success-check {
        animation: sz-check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .sz-success-check__path {
        animation: sz-check-draw 0.35s 0.45s ease-out forwards;
    }
}

@keyframes sz-ring-pulse {
    0%   {
        width: 80px; height: 80px;
        opacity: 0.5;
        border-width: 3px;
    }
    100% {
        width: 440px; height: 440px;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes sz-check-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes sz-check-draw {
    to { stroke-dashoffset: 0; }
}

/* ── Calendar Day (Slots-Page Month-Picker) ─────────────────────── */
.sz-cal-day:hover {
    background-color: var(--sz-surface-elevated);
}

/* ── Native <details>/<summary> Reset (Kategorien-Akkordeons) ─────── */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.cat-chevron { transition: transform 0.2s ease; }
details[open] .cat-chevron { transform: rotate(180deg); }

/* ── Kategorie-Header (Spec 2026-06-24)
   Sentence case + zwei Indikatoren rechts: graue Anzahl + grünes "X gewählt"-Badge.
   Beide auch im zugeklappten Zustand sichtbar, damit der User auf einen Blick sieht
   wo er schon etwas gewählt hat (statt jede Kategorie aufklappen zu müssen).
   Offene Kategorie wird subtil hinterlegt — zweites Zustands-Signal neben dem Chevron. */
.sz-cat-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 4px;
    user-select: none;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sz-text);
    border-bottom: 1px solid var(--sz-border);
    transition: background 120ms ease;
}

/* Transientes Hover-Feedback — signalisiert Klickbarkeit, verschwindet sobald
   die Maus weg ist. Auf Touch greift's nicht, dort genügt das Chevron. */
.sz-cat-summary:hover {
    background: var(--sz-surface-elevated);
}

.sz-cat-summary__indicators {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sz-cat-summary__selected-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 180, 140, 0.12);
    color: var(--sz-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.sz-cat-summary__count {
    color: var(--sz-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 1.5em;
    text-align: right;
}

/* Kein Hintergrund auf offener Kategorie (Spec 2026-06-24 Revision):
   Chevron + sichtbare Cards markieren den Zustand bereits eindeutig. Eine
   Flächen-Tönung würde leere Grid-Zellen (3 Cards in 2 Spalten → 4. Zelle leer)
   als störende graue Lücke ausstellen. Hover-Feedback auf der Header-Zeile
   bleibt als transientes Klick-Affordance erhalten. */

/* ── Service-Card (selektierbar via Tap) ──────────────────────────── */
.sz-svc-card { transition: border-color 0.15s, background 0.15s; }
.sz-svc-card:hover { border-color: var(--sz-primary) !important; }

/* ── Fixed Tabs ─────────────────────────────────────────────────────
   Position:fixed direkt unter dem Layout-Header (56px).
   Full-width Bar, Inner-Content auf 640px zentriert.
   z-index 100 überdeckt den Cart (z-index 50) damit der Cart die Tabs
   nie verdeckt. Position fixed (statt sticky) weil sticky innerhalb von
   Layout-/MudBlazor-Containern mit overflow-Constraints nicht zuverlässig
   greift — fixed garantiert die Position immer. */
.sz-booking-tabs {
    position: fixed;
    top: var(--sz-booking-header-height);
    left: 0;
    right: 0;
    z-index: var(--sz-z-tabs);
    background: var(--sz-bg);
    border-bottom: 2px solid var(--sz-border);
    height: var(--sz-booking-tabs-height);
    display: flex;
    justify-content: center;
}

.sz-booking-tabs__inner {
    max-width: 640px;
    width: 100%;
    padding: 0 24px;
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
}

/* ── Top-Block (Breadcrumb/H4/Subline/Location-Chips) ───────────────
   padding-top reserviert Platz für die fixed Tab-Bar (sonst verdeckt
   sie den Breadcrumb) PLUS 40px Atemraum. Im expanded State komplett
   display:none → Tabs sitzen direkt am Layout-Header-Bottom (Y=56). */
.sz-booking-top {
    padding-top: calc(var(--sz-booking-tabs-height) + 40px);
}
.sz-booking-top--hidden {
    display: none;
}

/* Wenn der Top-Block sichtbar ist (collapsed default), nimmt er bereits
   das padding-top für die Tab-Bar — Layer 1 braucht es dann NICHT. */
.sz-booking-top:not(.sz-booking-top--hidden) ~ .sz-layer1 {
    padding-top: 0;
}

/* ── Layer 1 (Service-Katalog) ──────────────────────────────────────
   padding-top reserviert Platz für die fixed Tab-Bar (nur wenn Top
   nicht gerendert wird; siehe Selector oben).
   padding-bottom reserviert Platz für den fixed collapsed Cart am
   Viewport-Boden, damit die letzte Service-Karte nicht verdeckt wird. */
.sz-layer1 {
    padding-top: var(--sz-booking-tabs-height);
    padding-bottom: var(--sz-footer-collapsed-height);
}
.sz-layer1--hidden {
    display: none;
}

/* ========================================================================
   Sticky Cart (Layer 2) — Phorest-style Bottom Sheet
   ========================================================================
   Collapsed: position:fixed am Viewport-Boden, Header + CTA, ~1 Karte hoch.
   Expanded:  bottom-anchored, wächst durch Content nach oben bis Tabs-Bottom.
   Inner-Content: max-width 640px zentriert — matched die Layer-1-Spalte.

   Siehe Skill `sticky-bottom-sheet-pattern` für UX-Rationale. */

.sz-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--sz-z-cart);
    background: var(--sz-surface);
    border-top: 1px solid var(--sz-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08), 0 -2px 6px rgba(0, 0, 0, 0.04);
    /* Cart ist EIN Block. Inhalt (Header, Person-Sektionen, Gesamt-Zeile, CTA)
       stacken natürlich — KEIN flex:1, KEIN sticky-CTA. max-height kappt nach
       oben an Tabs-Bottom; overflow-y:auto erlaubt internes Scrollen wenn der
       Content höher ist (Mobile/kleines Window) damit der User die CTA erreicht. */
    max-height: calc(100vh - var(--sz-booking-header-height) - var(--sz-booking-tabs-height));
    max-height: calc(100dvh - var(--sz-booking-header-height) - var(--sz-booking-tabs-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sz-cart--expanded {
    /* Expanded: Cart bleibt bottom-anchored. Natürliche Höhe durch Content.
       Bei zu viel Content kappt max-height auf Tabs-Bottom und overflow:auto
       erlaubt Scrollen im Cart. */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* Inhalts-Container — 640px-Spalte wie Layer 1, mittig. */
.sz-cart__header,
.sz-cart__body,
.sz-cart__cta-wrap {
    max-width: 640px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* ── Header (informational, NOT clickable) ─────────────────────────
   Toggle ist als separater Outlined-Button .sz-cart__toggle innerhalb
   header-right realisiert (UX-Spec 2026-06-23). */
.sz-cart__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    min-height: 56px;
    color: var(--sz-text);
}

.sz-cart__header-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.sz-cart__icon {
    color: var(--sz-text-secondary);
    flex-shrink: 0;
}

.sz-cart__people {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--sz-text);
    white-space: nowrap;
}

.sz-cart__counts {
    color: var(--sz-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sz-cart__hint {
    color: var(--sz-text-secondary);
    font-style: italic;
    font-size: 0.9375rem;
}

.sz-cart__header-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sz-cart__total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--sz-primary);
    white-space: nowrap;
}

/* Toggle-Button (Filled-Pille mit neutralem Surface) — Affordance über
   Form + Fläche, NICHT Farbe. Klassisches Button-Stufenmodell:
   grün-gefüllt (CTA, primär) > grau-gefüllt (Toggle, sekundär). Eine
   gefüllte Fläche signalisiert "Bedienelement" klarer als nur eine Linie
   (besonders auf Touch). UX-Spec 2026-06-23. */
.sz-cart__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    /* Slate-200 als Fülle — distinkt gegen die weisse Cart-Fläche aber sanft.
       Slate-100 war zu subtil. Slate-300 (#CBD5E1) Hover. */
    background: var(--sz-border);
    color: var(--sz-text);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, transform 0.05s;
}

.sz-cart__toggle:hover {
    background-color: #CBD5E1;
}

.sz-cart__toggle:active {
    transform: translateY(1px);
}

.sz-cart__toggle:focus-visible {
    outline: 2px solid var(--sz-primary);
    outline-offset: 2px;
}

.sz-cart__chevron {
    color: var(--sz-text);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Chevron-Up = rotiert 180° gegenüber Basis (SVG zeigt ohne Klasse nach unten / v).
   Collapsed = ^ (öffnet sich nach oben), Expanded = v (klappt nach unten weg). */
.sz-cart__chevron--up {
    transform: rotate(180deg);
}

@media (max-width: 480px) {
    .sz-cart__header { padding: 14px 16px; gap: 8px; }
    .sz-cart__counts { display: none; }
    /* Auf Mobile nur Chevron im Button — Label "Details anzeigen" frisst
       sonst zu viel Platz neben Person-Summary + Preis. */
    .sz-cart__toggle-label { display: none; }
    .sz-cart__toggle { padding: 6px 10px; }
}

/* ── Body (nur expanded) ─────────────────────────────────────────── */
.sz-cart__body {
    padding: 8px 24px 0;
    border-top: 1px solid var(--sz-border);
}

@media (max-width: 480px) {
    .sz-cart__body { padding-left: 16px; padding-right: 16px; }
}

.sz-cart__empty {
    padding: 48px 0;
    color: var(--sz-text-secondary);
    text-align: center;
    font-style: italic;
}

.sz-cart__person {
    padding: 14px 0;
}

.sz-cart__person--separated {
    border-top: 1px solid var(--sz-border);
    margin-top: 6px;
}

.sz-cart__person-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.sz-cart__person-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 180, 140, 0.12);
    color: var(--sz-primary);
    font-weight: 600;
    font-size: 0.8125rem;
}

.sz-cart__person-meta {
    color: var(--sz-text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Hinweis-Note für Begleitungen auf Staff-Page —
   "Mitarbeiter wird automatisch zugewiesen". Italic, dezent. */
.sz-cart__person-note {
    color: var(--sz-text-secondary);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: -6px;
    margin-bottom: 6px;
}

.sz-cart__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
}

.sz-cart__row-info {
    min-width: 0;
    flex: 1;
}

.sz-cart__row-name {
    font-weight: 500;
    color: var(--sz-text);
    font-size: 0.9375rem;
}

.sz-cart__row-meta {
    font-size: 0.8125rem;
    color: var(--sz-text-secondary);
    margin-top: 2px;
}

.sz-cart__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sz-cart__row-price {
    font-weight: 600;
    color: var(--sz-text);
    font-size: 0.9375rem;
    white-space: nowrap;
}

.sz-cart__row-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--sz-text-secondary);
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
}

.sz-cart__row-remove:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--sz-text);
}

.sz-cart__gesamt {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 4px 8px;
    margin-top: 8px;
    border-top: 1px solid var(--sz-border);
}

.sz-cart__gesamt-label {
    color: var(--sz-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.sz-cart__gesamt-total {
    font-size: 1.125rem;
    color: var(--sz-primary);
    font-weight: 700;
}

/* ── CTA (Weiter-Button) ─────────────────────────────────────────── */
.sz-cart__cta-wrap {
    padding: 12px 24px 14px;
}

@media (max-width: 480px) {
    .sz-cart__cta-wrap { padding-left: 16px; padding-right: 16px; }
}

.sz-cart__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--sz-primary);
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.05s;
}

.sz-cart__cta:hover {
    background-color: var(--sz-primary-hover);
}

.sz-cart__cta:active {
    transform: translateY(1px);
}

.sz-cart__cta--disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Page-Container-Patterns (Spec 2026-07-05) ───────────────────────
   Zwei wiederkehrende 640-Container-Varianten aus dem Booking-Funnel:
   .sz-booking-content = Standard-Content-Wrapper (40px vertikale Marge, 24px seitl. Padding)
   .sz-booking-loading = zentrierter Loading/Not-Found/Empty-State (80px oben, text-align:center) */
.sz-booking-content {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 24px;
}

.sz-booking-loading {
    max-width: 640px;
    margin: 80px auto;
    padding: 0 16px;
    text-align: center;
}

/* ── AccessDenied Page ───────────────────────────────────────────────
   Full-Page Card-Layout unter EmptyLayout. Spec 2026-07-05: alle Inline-Styles
   in Klassen extrahiert damit die Page nicht als Ausreisser aus dem restlichen
   CSS-Modell fällt. */
.sz-ad-outer {
    min-height: 100vh;
    background: var(--sz-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.sz-ad-inner {
    width: 100%;
    max-width: 480px;
}

.sz-ad-header {
    text-align: center;
    margin-bottom: 32px;
}

.sz-ad-logo-link { text-decoration: none; }
.sz-ad-logo { display: block; }

.sz-ad-card {
    background: var(--sz-surface);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sz-ad-icon-circle {
    width: 64px;
    height: 64px;
    background: #FEF2F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.sz-ad-icon {
    font-size: 2rem;
    color: var(--sz-error);
}

.sz-ad-title {
    margin: 0 0 12px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sz-text);
}

.sz-ad-body {
    margin: 0 0 24px;
    color: var(--sz-text-secondary);
    line-height: 1.7;
}

.sz-ad-cta {
    display: inline-block;
    padding: 12px 32px;
    background: var(--sz-primary);
    color: var(--sz-text-on-primary);
    border-radius: var(--sz-radius-sm);
    font-weight: 700;
    text-decoration: none;
}

.sz-ad-switch-form { margin-top: 24px; }

.sz-ad-switch-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--sz-text-secondary);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}