/**
 * Zwischendialog nach dem Ablegen im Feratel-Warenkorb.
 *
 * Gehoert zu `Resources/Public/JavaScript/tosc5-widget.js` (Kundenrunde
 * 22.09.2026, Punkt 1): das Feratel-Widget meldet „im Warenkorb", und statt
 * sofort in den Buchungsabschluss zu springen, fragt der Dialog erst, ob der
 * Gast weitersuchen oder zum Warenkorb will.
 *
 * Eigene Datei, weil das Skript auf mehreren Modulseiten laeuft und der Dialog
 * an <body> haengt - er kann sich also nicht auf das Stylesheet einer einzelnen
 * Modulseite verlassen. Die Knopf-Gestalt kommt aus `.ob-root .ob-btn` und wird
 * hier NICHT wiederholt; der Wrapper traegt `ob-root` genau dafuer.
 *
 * z-index: `--z-modal` (700) liegt ueber der fixierten Kopfzeile der Wirtsseite
 * (z-index 500, siehe Ebenen-Tabelle in ob-live.css) - sonst stuende der Dialog
 * hinter dem Seitenkopf.
 *
 * Copyright: Stefan Ennemoser, web-crossing GmbH
 */
.ob-tosc5-added {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--c-scrim, rgba(24, 28, 32, 0.45));
}

.ob-tosc5-added__box {
    width: 100%;
    max-width: 480px;
    /* min-height statt height: der Text ist uebersetzt und je Sprache
       unterschiedlich lang. */
    min-height: 0;
    box-sizing: border-box;
    padding: 24px;
    border-radius: var(--radius-xl, 28px);
    background: var(--c-surface, #ffffff);
    box-shadow: var(--shadow-modal, 0 16px 48px rgba(20, 20, 20, 0.18));
    text-align: center;
}

.ob-tosc5-added__title {
    margin: 0 0 8px;
    font-family: var(--font-display, inherit);
    font-size: var(--fs-xl, 22px);
    color: var(--c-text, #333333);
}

.ob-tosc5-added__text {
    margin: 0 0 20px;
    font-family: var(--font-body, inherit);
    font-size: var(--fs-base, 16px);
    line-height: var(--lh-base, 1.55);
    color: var(--c-text-muted, #5d5d5d);
}

.ob-tosc5-added__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Auf schmalen Geraeten untereinander und volle Breite - zwei Knoepfe mit je
   220px Mindestbreite (--ob-btn-minw) passen sonst nicht nebeneinander. */
@media (max-width: 519px) {
    .ob-tosc5-added__actions {
        flex-direction: column;
    }

    .ob-tosc5-added__actions > * {
        width: 100%;
    }
}

/* ---- Rueckfall-Gestalt der zwei Knoepfe ----
   `.ob-root .ob-btn` steht ausschliesslich in
   `Resources/FileadminOverrides/Css/ob-live.css` - also nur dort, wo das
   Live-Design geladen ist. Die Basisvorlagen der Extension laden `tokens.css`,
   das Modul-CSS und `app.css`, aber kein `ob-live.css`; dort waeren „Weiter
   suchen" und „Zum Warenkorb" ein nackter Systemknopf und ein blauer Link.

   `:where()` haelt die Regeln auf der Spezifitaet von `.ob-tosc5-added` allein
   (0,0,1,0). `.ob-root .ob-btn` aus ob-live.css (0,0,2,0) schlaegt sie damit
   IMMER, unabhaengig davon, welche Datei zuerst geladen wird - die
   Live-Gestaltung bleibt also unberuehrt, und nur wo sie fehlt, greift dieser
   Rueckfall. */
.ob-tosc5-added :where(.ob-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 2px solid var(--c-primary, #b51621);
    border-radius: var(--radius-md, 4px);
    background: var(--c-primary, #b51621);
    color: var(--c-bg, #ffffff);
    font-family: var(--font-display, inherit);
    font-size: var(--fs-base, 16px);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ob-tosc5-added :where(.ob-btn--inverted) {
    background: transparent;
    color: var(--c-primary, #b51621);
}