/* Flash banners: --error and --success are styled in the theme's styles.scss.
   --info and --warning are plugin-only. */
.slash-flash.slash-flash--info    { background-color: #d1ecf1; color: #000; }
.slash-flash.slash-flash--warning { background-color: #fffbeb; color: #92400e; }

/* Theme styles __links a but not button — mirror for form submit buttons */
.slash-flash__links button {
    text-align: center;
    padding: .3em .7em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: 2px solid #000;
    background-color: #000;
    color: #fff;
}

/* Inline status badges */
.slash-badge {
    display: inline-block;
    /* The card's meta line runs at the body size; 0.75rem sat too far under it to
       read as part of the same line. */
    font-size: 0.875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    vertical-align: middle;
    margin-left: 0.5rem;
    border: 1px solid currentColor;
}

/* Only the pill carries the state; the label is black on all of them.
   --info is the flash banner's blue — the #d1ecf1 behind the Konto's
   e-mail-confirmation notices — lifted towards white, so a badge-sized patch of
   it sits as lightly on the row as the green and amber next to it do. The border
   keeps the full-strength tone and draws the edge. */
.slash-badge--success { background: #f0fdf4; border-color: #bbf7d0; }
.slash-badge--warning { background: #fffbeb; border-color: #fde68a; }
.slash-badge--info    { background: #e8f6fa; border-color: #bee5eb; }

/* Said outright rather than left to the theme. `.entry-content span { color: #000
   !important }` in styles.scss produces this today, but that rule is not ours to
   rely on — a badge rendered outside .entry-content, or the day the rule changes,
   must not drift to a tinted label. !important and (0,2,0) so it also wins while
   the theme rule is in place; .slash-ticketing is the wrapper slash_render() puts
   around every plugin page. */
.slash-ticketing .slash-badge {
    color: #000 !important;
}

/* The margin-left above is for a badge that trails a label (the profile pages).
   The accreditation state line opens with one, where it reads as an indent. */
.slash-ticket-card__status .slash-badge:first-child {
    margin-left: 0;
}

/* Password visibility toggle (WCAG 2.2) */
.slash-pw-wrapper {
    display: flex;
    align-items: stretch;
}
.slash-pw-wrapper input {
    flex: 1;
}
.slash-pw-toggle {
    min-width: 5rem;
    min-height: 24px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #94a3b8;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    font-size: 0.875rem !important;
    white-space: nowrap;
    margin-left: -1px;
}
.slash-pw-toggle:hover {
    background: #e2e8f0;
}
.slash-pw-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Availability dots */
.slash-availability-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.slash-availability-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e5e5;
}
.slash-availability-dot--active {
    background: #555;
}

/* Ticket sort toggles */
.slash-ticket-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Ticket status label (italic, inline) */
.slash-ticket-card__status {
    font-style: italic;
}

/* In-place accreditation actions (bd 7gs).
   The state and message slots are always in the markup and toggled with the
   hidden attribute, so a re-render never has to insert or remove nodes — the
   theme sets `display` on spans, hence the !important. */
.slash-ticket-card [hidden] {
    display: none !important;
}

/* The only thing an in-place action ever writes: a failure, beside its own row.
   Success is told by the row itself — badge, buttons, seat count. Red, and the
   one place in the card that is: same !important + (0,2,0) as the badges above,
   because the theme would otherwise paint this span black too. */
.slash-acc-message {
    font-weight: bold;
}
.slash-ticketing .slash-acc-message {
    color: #b91c1c !important;
}

/* Requests in flight: the button keeps its box so the row does not jump, and
   says so for anyone not watching the cursor. */
.slash-ticket-card__actions button[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}
.slash-ticket-card__actions button:disabled {
    cursor: not-allowed;
}

/* Order detail: subtotal / discount / total */
.slash-order-subtotal,
.slash-order-discount,
.slash-order-total {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.25rem 0;
}
.slash-order-detail .slash-order-subtotal {
    border-top: 2px solid #000;
}
.slash-order-detail .slash-order-total {
    border-top: 2px solid #000;
}
.slash-order-detail .slash-order-subtotal ~ .slash-order-total {
    border-top: none;
}
.slash-order-discount {
    color: #15803d;
}


/* bd brh: Platzwahl seat-type rows. The row itself is inline-flex in the theme,
   so each one needs a block wrapper to sit on its own line. */
.slash-platzwahl-line {
    display: block;
}
.slash-platzwahl-companion {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.slash-cart-item__companion {
    color: #666;
}

/* Back link on the konto subpages. slash_render() hoists it out of
   .entry-content so it sits above the heading — restore the spacing. */
.slash-back-link { margin: 0 0 0.5em; }

/* bd lkc: die Rolle im Konto ist ein englischer Name in Versalien (GUEST).
   Nur das Label, nicht die ganze Zeile -- "Deine Akkreditierung:" bleibt
   normal gesetzt. Der Datenwert bleibt Title Case (Pass#account_label). */
.slash-accreditation-pass__role {
    text-transform: uppercase;
}

/* Brief 44: Einzelticket-Gutscheine. The redeem form sits between the item list
   and the totals, because a code is entered once the tickets are in the cart and
   it changes the sum directly below it — right-aligned to the same edge as the
   price column, and collapsed until the toggle is clicked. */
.slash-voucher {
    margin: 1em 0;
    text-align: right;
}
/* Stays display: list-item. WebKit drops the disclosure role — and with it the
   expanded/collapsed announcement and the Enter/Space handling — as soon as a
   summary gets any other display type, so the marker is hidden instead. */
.slash-voucher > summary {
    cursor: pointer;
    display: list-item;
    list-style: none;
    font-weight: bold;
    text-decoration: underline;
}
.slash-voucher > summary::-webkit-details-marker {
    display: none;
}
.slash-voucher > summary:hover {
    text-decoration: none;
}
/* Keeps the underline on focus — it is the only affordance the line has — and
   adds the same ring as the password toggle. */
.slash-voucher > summary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.slash-voucher-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75em;
    flex-wrap: wrap;
    margin: 0.75em 0 0 auto;
    max-width: 26em;
}
.slash-voucher-form input[type="text"] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    width: 14em;
    min-width: 0;
}
.slash-cart-item__voucher {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    margin-top: 0.25em;
    color: #666;
}
.slash-cart-item__voucher-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.08em;
}
/* Reads as a text link, not a button: removing the code is a minor undo next to
   the line's own "Entfernen". Needs .slash-ticketing in front of it — the theme
   styles every bare `button` inside that wrapper as a boxed, uppercase button
   (`.slash-ticketing button`, styles.scss), which outranks a lone class. */
.slash-ticketing .slash-cart-item__voucher-remove,
.slash-ticketing .slash-cart-item__voucher-remove:hover,
.slash-ticketing .slash-cart-item__voucher-remove:focus {
    display: inline;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font: inherit;
    /* Not `inherit` — .slash-cart-item__info sets UniversLTPro-65Bold, so
       inheriting would keep the bold face. The theme's own regular stack,
       matching .slash-cart-item__meta. */
    font-family: UniversLTPro-55Roman, sans-serif;
    font-weight: normal;
    text-transform: none;
    color: #000;
    transform: none;
    cursor: pointer;
    text-decoration: underline;
}
.slash-ticketing .slash-cart-item__voucher-remove:hover {
    text-decoration: none;
}
/* The reset above flattens the theme's focused button, box-shadow included, and
   the underline is the only thing left to lose — so the keyboard ring is drawn
   here explicitly. */
.slash-ticketing .slash-cart-item__voucher-remove:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Brief 49: fullscreen pages, rendered by slash_render_fullscreen() instead of
   slash_render(). No theme header, nav or footer and no grid containers — the
   bar and the content are the whole document, so nothing below the content can
   make it taller than the viewport. The seated seat chooser is the only one:
   its map lives in a plane that pans and zooms, and it must not scroll.

   Sized in flex rather than measured in JS: the bar's height is the only thing
   above the content, so the content is simply what is left. */
html:has(> body.slash-fullscreen) {
    height: 100%;
    overflow: hidden;
}
body.slash-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
body.slash-fullscreen .slash-fullscreen__bar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 19px;
    border-bottom: 1px solid #000;
    background: #fff;
}
body.slash-fullscreen .slash-fullscreen__logo {
    display: block;
    line-height: 0;
    color: #000;
    border: 0;
}
body.slash-fullscreen .slash-fullscreen__logo svg {
    display: block;
    width: auto;
    height: 26px;
}
/* The close link, matched to the panel's outline button (seatmap styles.js) so
   the two ways out of the page look like the same control. */
body.slash-fullscreen .slash-fullscreen__close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 16px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}
body.slash-fullscreen .slash-fullscreen__close:hover,
body.slash-fullscreen .slash-fullscreen__close:focus {
    background: #EEEEEE;
    color: #000;
    text-decoration: none;
}
body.slash-fullscreen .slash-fullscreen__close svg {
    display: block;
    width: 13px;
    height: auto;
}
/* Empty until Slash_Flash or hydrateFlash fills it, and it must take no room
   while it is: it sits between the bar and the plane. */
body.slash-fullscreen .slash-fullscreen__flash:not(:empty) {
    flex: none;
    padding: 12px 19px 0;
}
body.slash-fullscreen .slash-fullscreen__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.slash-seatchooser {
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}
.slash-seatchooser__loading {
    padding: 24px;
}

@media screen and (max-width: 640px) {
    body.slash-fullscreen .slash-fullscreen__bar { padding: 10px 12px; }
    body.slash-fullscreen .slash-fullscreen__logo svg { height: 20px; }
    body.slash-fullscreen .slash-fullscreen__close-label { display: none; }
    body.slash-fullscreen .slash-fullscreen__close { padding: 0 12px; height: 36px; }
}