/*
 * Die feste Aktionsleiste [Live | Jetzt buchen | Menü].
 *
 * Gemeinsam: sie öffnet das Menü, im Editor wie im Frontend.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/*
 * Aktionsleiste wie im Design: weißes Pill, links/rechts 88px breite
 * Icon-Buttons, in der Mitte der orange CTA.
 */
.spo-actionbar-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    z-index: 30;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.spo-actionbar {
    pointer-events: auto;
    display: flex;
    width: 100%;
    max-width: 420px;
    align-items: stretch;
    gap: 8px;
    margin: 0 16px;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(20, 12, 4, .28);
}

/*
 * Der Grund kommt über eine Custom Property herein, wie bei den Buttons
 * (65-button.css): so steht er an einer Stelle, und die Sperre weiter unten
 * kann ihn wieder herstellen, ohne ihn ein zweites Mal hinzuschreiben.
 *
 * Kein `transition` mehr: es gibt nichts zu überblenden, seit weder Zeiger noch
 * Zustand den Grund ändern. Eine Überblendung, die nie läuft, ist eine Zusage
 * auf Vorrat.
 */
.spo-action {
    width: 88px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    --spo-action-padding: 8px 6px;
    padding: var(--spo-action-padding);
    border: 0;
    border-radius: 8px;
    background: var(--spo-action-bg, transparent);
    color: var(--spo-blue-dark);
    font: inherit;
    cursor: pointer;
}

/*
 * Die Aufschriften der drei Hauptknöpfe stehen auf 600 und nicht auf den 500 des
 * Exports: die Leiste ist die einzige Fläche, die immer sichtbar ist, und ihre
 * drei Wörter tragen das ganze Menü.
 */
.spo-action-label {
    font-size: calc(14px - var(--spo-text-shrink));
    font-weight: 600;
    letter-spacing: .01em;
}

.spo-action--cta {
    position: relative;
    width: auto;
    flex: 1;
    min-width: 0;
    flex-direction: row;
    gap: 9px;
    --spo-action-padding: 0 20px;
    color: var(--spo-blue-dark);
    box-shadow: 0 5px 14px rgba(226, 100, 11, .4);
    --spo-action-bg: var(--spo-orange);
}

/*
 * Weder Zeiger noch Zustand ändern den Grund — und zwar auch dann nicht, wenn
 * die Website einen Hover hat.
 *
 * Hier stand für beide Knöpfe je eine Aufhellung: ein blauer Hauch unter Live
 * und Menü, das hellere #ffab4d unter der Handlungsfläche. Die offene Ebene
 * sagt sich am Menü selbst an, nicht am Knopf, der sie geöffnet hat — mit
 * Aufhellung sah der Knopf aus, als wäre er das Ziel.
 *
 * Dass jede Sperre die eigene Custom Property zurückholt statt eine Farbe
 * hinzuschreiben, ist der Punkt: die orange Fläche bleibt orange, weil sie es
 * an einer Stelle ist.
 *
 * `!important` und `:not(:focus-visible)` aus denselben Gründen wie bei den
 * Buttons (65-button.css): eine Regel der Website darf beliebig spezifisch
 * sein, und der Fokus-Ring ist ein Schatten, der bleiben muss.
 */
.spo-action:hover:not(:focus-visible),
.spo-action.is-active {
    background: var(--spo-action-bg, transparent) !important;
    color: var(--spo-blue-dark) !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

.spo-action:hover .spo-action-label,
.spo-action:focus .spo-action-label {
    text-decoration: none !important;
}

/*
 * Und die Geometrie, im Zeiger- wie im Fokus-Zustand — getrennt, weil hier
 * `:focus-visible` nicht ausgenommen ist: Innenabstand und Ring stören sich
 * nicht. Der Anlass steht in der Zielumgebung: `a:focus { padding: 0; border:
 * 2px solid #003C6E; white-space: nowrap }`. Ohne diese Zeilen fällt die
 * Leiste im Fokus in sich zusammen und "Jetzt buchen" bricht nicht mehr um.
 */
.spo-action:hover,
.spo-action:focus {
    padding: var(--spo-action-padding) !important;
    border: 0 !important;
    white-space: normal !important;
}

/*
 * Kein `text-transform` mehr. Im Export steht die Aufschrift dieser Fläche in
 * Großbuchstaben, aber das gehört der Aufschrift und nicht dem Stylesheet: was
 * dasteht, tippt die Redaktion (ActionBarTexts, je Sprache). Ein erzwungenes
 * Uppercase nahm ihr die Wahl und schrieb "Schließen" als "SCHLIESSEN", auch wo
 * das Design es gemischt zeigt.
 */
.spo-action--cta .spo-action-label {
    /* 15px auf dem Schreibtisch, 14px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-action-cta);
    letter-spacing: -.01em;
}

.spo-cart-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #fff;
    border-radius: 10px;
    background: #d92d20;
    color: #fff;
    font-size: calc(11.5px - var(--spo-text-shrink));
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.spo-live-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3a9d5d;
}

.spo-live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #3a9d5d;
    animation: spoPulse 2.4s ease-out infinite;
}