/*
 * The steps after the search (legacy views): ticket, products, login/registration, confirmation code, payment summary,
 * confirmation. The markup and class names come from online/index.php and legacy/*.js; only the look is new.
 * The three recently revised areas keep their structure: ticket (header / inset / footer), product cards, price summary.
 */

.headline {
    margin: 0 0 var(--s-4);
    text-align: left;
}

.headline h4 {
    margin: 0;
    font-size: var(--fs-xl);
}

.headline.big {
    text-align: center;
    margin: var(--s-5) 0;
}

.headline.big h4 {
    font-size: 1.6rem;
}

.slot-message {
    margin: var(--s-4) 0;
    font-size: var(--fs-sm);
    text-align: left;
    color: var(--ink-muted);
}

.slot-message table {
    border-spacing: 0;
}

.slot-message td {
    vertical-align: top;
    padding: 0 var(--s-2) var(--s-2) 0;
}

.slot-input {
    margin-bottom: var(--s-3);
}

.warningfont {
    color: var(--warning);
    font-weight: 650;
}

/* ---- ticket ---------------------------------------------------------------------------------------------------------------------- */
/* Compact like a cinema ticket: a stub with activity and booking number, a perforation with two punched notches, date and
   time in large type, a few facts, the category chip in its own colour and the price at the bottom. The card colour comes
   from the calendar (sys_calendar.color → --ticket-a / --ticket-b, a gradient from a darker shade of the colour to the
   colour itself, and the text colour --ticket-ink, set by js/components/ticket.js); the values below are the default orange
   of the system, never the operator colour of the page. The dark middle part always has white text. */
.ticket-wrapper,
.ticket-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.ticket-container {
    width: 100%;
    max-width: 23rem;
    filter: drop-shadow(0 6px 14px rgba(15, 20, 30, .22));
}

/* the ticket has the colour of its calendar (js/components/ticket.js); only without a usable one the colour of the center:
   from a darker shade of it to the colour itself, the text colour of the center on it */
.ticket {
    --notch: 4.0rem;
    --ticket-a: color-mix(in srgb, var(--op-accent) 55.3%, #000000);
    --ticket-b: var(--op-accent);
    --ticket-ink: var(--op-on-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--ticket-ink);
    text-align: left;
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--ticket-a) 0%, var(--ticket-b) 100%);
    -webkit-mask:
            radial-gradient(circle 10px at 0 var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle 10px at 100% var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
    mask:
            radial-gradient(circle 10px at 0 var(--notch), #0000 97%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle 10px at 100% var(--notch), #0000 97%, #000) right / 51% 100% no-repeat;
}

.ticket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    height: var(--notch);
    padding: 0 var(--s-5);
    border-bottom: 2px dashed rgba(255, 255, 255, 1);
}

.ticket__cal {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: var(--fs-lg);
    letter-spacing: .01em;
}

.ticket__activity {
    flex: none;
    margin-right: var(--s-2);
    vertical-align: -.2em;
}

.ticket__id {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 750;
}

.ticket__main {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-6) var(--s-5);
    color: #fff;
    background: linear-gradient(150deg, #333 0%, #222 100%);
    box-shadow: inset 0px -1px 6px 1px rgba(0, 0, 0, .35), inset 0 30px 60px -10px rgba(0, 0, 0, 0.5);
}

.ticket__date,
.ticket__time {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    line-height: 1.25;
}

.ticket__date {
    font-size: var(--fs-sm);
    opacity: .9;
}

.ticket__time {
    font-size: var(--fs-xl);
    font-weight: 750;
    letter-spacing: .01em;
}

.ticket__date svg,
.ticket__time svg {
    flex: none;
    opacity: .75;
}

.ticket__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: var(--s-2) var(--s-3);
    margin: var(--s-1) 0 0;
    padding: var(--s-2) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.ticket__fact dt {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
}

.ticket__fact dd {
    margin: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ticket__category {
    margin: var(--s-1) 0 0;
}

.ticket__chip {
    --chip-a: rgba(255, 255, 255, .2);
    --chip-b: rgba(255, 255, 255, .12);
    display: inline-block;
    max-width: 100%;
    padding: .2rem var(--s-3);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--chip-a), var(--chip-b));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    font-weight: 700;
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

/* between the dark middle part and the foot, across the whole width of the ticket */
.ticket__notices {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ticket__notices .alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s-1) var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: 0;
    font-size: var(--fs-sm);
    background: var(--bg-card);
    color: var(--ink);
}

/* the icon on the left of the text (also of a text over several lines), on its first line */
.ticket__notices .alert > svg {
    flex: none;
    margin-top: .15rem;
}

.ticket__notices .alert > span {
    flex: 1 1 0;
    min-width: 0;
}

.ticket__notices .alert ul {
    flex-basis: 100%;
    margin: 0;
    padding-left: var(--s-5);
    list-style: disc;
}

.ticket__notices .alert--error { background: var(--danger-bg); color: var(--danger); }
/* a warning on the ticket stands out: the stronger amber of the warning line (light #f0cf8e, dark #6a5226; the text keeps
   more than 4.5:1 on it) */
.ticket__notices .alert--warning { background: var(--warning-line); color: var(--warning); font-weight: 600; }
.ticket__notices .alert--info { background: var(--info-bg); color: var(--info); }

.ticket__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 3.3rem;
    padding: var(--s-2) var(--s-4) var(--s-3);
    border-top: 2px solid rgb(255 255 255);
}

.ticket__foot-right {
    margin-left: auto;
    text-align: right;
}

.ticket__price {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.ticket__onsite {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.ticket__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-h-sm);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.ticket__remove:hover {
    background: rgba(255, 255, 255, .24);
}

:root[data-input="keyboard"] .ticket__remove:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .ticket {
        -webkit-mask: none;
        mask: none;
        border: 2px solid CanvasText;
    }
}

.addBookingButton {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-4);
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-md);
    text-align: left;
    cursor: pointer;
    max-width:23rem;
}

.addBookingButton:hover {
    border-color: var(--op-accent);
    background: var(--op-accent-soft);
}

.addBookingButton .icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--op-accent-soft);
    color: var(--op-accent-ink);
}

.addBookingButton .right {
    display: flex;
    flex-direction: column;
}

.addBookingButton .caption {
    font-weight: 700;
}

.addBookingButton .desc {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* ---- product cards --------------------------------------------------------------------------------------------------------------- */
.slot-view {
    display: none;
    text-align: left;
}

.slot-header {
    margin-bottom: var(--s-3);
}

.slot-header h2 {
    margin: 0;
    font-size: var(--fs-xl);
}

.slot-subtitle {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.slot-message.info {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    background: var(--info-bg);
    color: var(--info);
}

.slot-message.info p {
    margin: 0;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.product-card:has(.pc-thumb-wrap) {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.pc-thumb-wrap {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    min-height: 5.5rem;
    overflow: hidden;
    background: var(--bg-muted);
}

.pc-thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The badge ("Pflicht", offers ...) sits in the corner of the card and never takes a grid cell of its own. */
.pc-badges {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-1);
    max-width: 50%;
    font-size: var(--fs-xs);
}

.pc-badges:empty {
    display: none;
}

/* AP261001-03: stock-controlled product without enough units left in the booking period */
.product-card.is-unavailable {
    opacity: 0.65;
}

.product-card.is-unavailable .btn-add {
    cursor: not-allowed;
}

.pc-unavailable {
    margin: var(--s-1) 0 0;
    color: var(--warning);
    font-size: var(--fs-xs);
}

.pc-badges .badge-limited {
    border-color: var(--warning-line);
    color: var(--warning);
}

/* keep the name clear of the badge */
.product-card:has(.pc-badges .badge) .pc-header {
    padding-right: 4.5rem;
}

.pc-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-1) 0;
}

.product-card:has(.pc-thumb-wrap) .pc-meta {
    grid-column: 2;
    grid-row: 1;
    padding: var(--s-3) var(--s-4);
}

.pc-name {
    margin: 0;
    font-size: var(--fs-md);
    overflow-wrap: anywhere;
}

.pc-desc {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

ul.pc-rows {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    list-style: disc;
    padding-left: var(--s-4);
}

/* a row without text: invisible (no bullet either), its height stays */
ul.pc-rows li.is-empty {
    visibility: hidden;
}

/* AP261001-04: one card, the variants as rows with their own quantity control. The rows share the columns of the list (name,
   price, quantity): prices and controls line up. Every row is as high as a control and has the same space above and below its
   line - also a row without control (used up). */
.pc-variants {
    display: flex;
    flex-direction: column;
    margin: var(--s-1) 0 0;
    padding: 0;
    list-style: none;
}

/* A row: the name (never narrower than 9rem, so a long list of variants in a narrow card puts the name on a line of its own
   instead of squeezing it into a column of single letters), then price and quantity control at the right. */
.pc-variant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    min-height: calc(2.25rem + 2 * var(--s-1) + 2px); /* as high as the quantity control */
    padding: var(--s-2) 0;
    border-top: 1px solid var(--line);
}

.pc-variant:first-child {
    border-top: 0;
    padding-top: 0;
}

.pc-variant:last-child {
    padding-bottom: 0;
}

.pc-variant-name {
    flex: 1 1 9rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: break-word;
}

.pc-variant-price {
    margin-left: auto;
    color: var(--ink-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pc-variant .pc-variant-qty {
    margin-left: auto;
}

.pc-variant-price + .pc-variant-qty,
.pc-variant-price + .pc-variant-state {
    margin-left: 0;
}

.pc-variant.is-unavailable .pc-variant-name,
.pc-variant.is-unavailable .pc-variant-price {
    color: var(--ink-muted);
    font-weight: 500;
}

/* used up in the period: in the place of the control, as wide as it and as high, quiet */
.pc-variant-state {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-width: calc(2 * 2.25rem + 2.75rem + 4 * var(--s-1) + 2px);
    padding: 0 var(--s-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
}

/* without subgrid (older browsers) the rows stay simple flex rows */
@supports not (grid-template-columns: subgrid) {
    .pc-variants,
    .pc-variants.has-prices {
        display: flex;
        flex-direction: column;
    }

    .pc-variant {
        display: flex;
        align-items: center;
        gap: var(--s-3);
        min-height: calc(2.25rem + 2 * var(--s-1) + 2px + 2 * var(--s-2));
    }

    .pc-variant-name {
        flex: 1 1 auto;
    }
}

.pc-variants-hint {
    margin: var(--s-2) 0 0;
    color: var(--warning);
    font-size: var(--fs-xs);
}

.pc-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    margin-top: auto;
}

.pc-price {
    font-weight: 700;
    font-size: var(--fs-lg);
}

.qty-control {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--bg-card);
}

.qty-control .qty-dec,
.qty-control .qty-inc {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--bg-muted);
    font-weight: 700;
    font-size: var(--fs-lg);
    line-height: 1;
}

.qty-control .qty-dec:disabled,
.qty-control .qty-inc:disabled {
    opacity: .35;
}

.qty-control .qty-input {
    width: 2.75rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
}

.qty-control .qty-input::-webkit-outer-spin-button,
.qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-card .btn-add {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    padding: 0 var(--s-4);
    border: 0;
    border-radius: var(--r-pill);
    background: var(--op-accent);
    color: var(--op-on-accent);
    font-weight: 650;
}

.product-card .btn-remove {
    display: none;
}

.req-asterisk {
    color: var(--danger);
}

/* ---- hint ----------------------------------------------------------------------------------------------------------------------------- */
#hinttext {
    margin: 0 0 var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--warning-line);
    border-radius: var(--r-md);
    background: var(--warning-bg);
    color: var(--ink);
    text-align: left;
    overflow-wrap: anywhere;
}

#hinttext > :last-child { margin-bottom: 0; }
#hinttext img { max-width: 100%; border-radius: var(--r-sm); }

/* ---- login / registration -------------------------------------------------------------------------------------------------------------- */
.loginAccount,
.newAccount {
    text-align: left;
}

#LoginViewPassLost {
    margin-top: var(--s-2);
}

#LoginViewPassLost span {
    cursor: pointer;
    color: var(--op-accent-ink);
    text-decoration: underline;
}

#SlotRegisterView > div,
#SlotLoginView > div:not(#buttonBar) {
    text-align: left;
}

/* ---- the amount cannot be paid online (checkout, js/components/amount-limit.js) ------------------------------------------------ */
.amount-limit {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--warning-line);
    border-left: 4px solid var(--warning);
    border-radius: var(--r-md);
    background: var(--warning-bg);
    color: var(--ink);
    text-align: left;
}

.amount-limit__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.amount-limit__icon {
    flex: none;
    color: var(--warning);
}

.amount-limit__title {
    font-size: var(--fs-lg);
}

.amount-limit__text {
    margin: 0;
    line-height: 1.5;
}

/* the bar: what can be paid online (accent) and the part above it (danger) */
.amount-limit__bar {
    display: flex;
    height: .875rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--danger);
}

.amount-limit__allowed {
    background: var(--success);
}

.amount-limit__rest {
    flex: 1 1 auto;
}

.amount-limit__gauge--min .amount-limit__bar {
    background: var(--bg-muted);
}

.amount-limit__gauge--min .amount-limit__allowed {
    background: var(--warning);
}

.amount-limit__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-3);
    margin-top: var(--s-1);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.amount-limit__gauge--max .amount-limit__over {
    color: var(--danger);
    font-weight: 650;
}

.amount-limit__call {
    text-decoration: none;
}

/* ---- expired page (booking/expired): the link of a reservation that no longer continues; a friendly card, a new search -- */
.expired__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) 0 var(--s-4);
    text-align: center;
}

.expired__title {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.25;
}

.expired__text {
    max-width: 30rem;
    margin: 0;
    color: var(--ink-muted);
}

.expired__hints {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    list-style: none;
    text-align: left;
}

.expired__hints li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.expired__hints li[hidden] {
    display: none;
}

.expired__hint-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--op-accent-ink);
}

.expired__hints a {
    font-weight: 650;
    white-space: nowrap;
}

/* ---- payment check (payment/return): picture, title, text, then the note with the number of the payment ---------------- */
.paycheck {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.paycheck[hidden] {
    display: none;
}

.paycheck__title {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-xl);
    line-height: 1.25;
}

.paycheck__text {
    max-width: 30rem;
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.5;
}

#FailedInfo {
    max-width: 30rem;
}

/* the note: set apart from the text above by more space; the number of the payment to quote */
.paycheck__info {
    display: grid;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--info-line);
    border-radius: var(--r-md);
    background: var(--info-bg);
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
    text-align: left;
}

.paycheck__info--neutral {
    border-color: var(--line);
    background: var(--bg-subtle);
}

.paycheck__info p {
    margin: 0;
}

.paycheck__info-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--info);
}

.paycheck__info-title svg {
    flex: none;
}

.paycheck__ref {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid color-mix(in srgb, var(--info-line) 70%, transparent);
    color: var(--ink-muted);
}

.paycheck__ref[hidden] {
    display: none;
}

.paycheck__ref code {
    padding: .1rem .45rem;
    border-radius: var(--r-sm);
    background: var(--bg-card);
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
    user-select: all;
}

.paycheck__actions {
    width: 100%;
    margin-top: var(--s-4);
}

/* ---- illustrations (online/lib/OnlineIllustration.php): one style - a soft circle in the colour of the moment, dark grey
   objects, white paper, small crosses and circles, a pill with an icon and a translated word (it grows with the word) ------ */
.illu {
    --illu-tone: var(--secure);
    --illu-on-tone: #ffffff;
    position: relative;
    width: min(17rem, 85%);
    margin: 0 auto var(--s-3);
}

.illu--danger {
    --illu-tone: var(--danger-strong);
}

/* "warning" pictures (already booked, expired) in the colour of the center, not in an orange of their own */
.illu--warning {
    --illu-tone: var(--op-accent);
    --illu-on-tone: var(--op-on-accent);
}

.illu--accent {
    --illu-tone: var(--op-accent);
    --illu-on-tone: var(--op-on-accent);
}

.illu__art {
    display: block;
    width: 100%;
    height: auto;
}

.illu__glow {
    fill: color-mix(in srgb, var(--illu-tone) 14%, var(--bg-card));
}

.illu__deco {
    fill: none;
    stroke: var(--illu-deco);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.illu__plane-a {
    fill: var(--illu-plane);
}

.illu__plane-b {
    fill: var(--illu-plane-2);
}

.illu__trail {
    fill: none;
    stroke: var(--illu-plane);
    stroke-width: 2;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
}

.illu__dark {
    fill: var(--illu-dark);
}

.illu__dark-front {
    fill: var(--illu-dark-2);
}

.illu__sheet {
    fill: var(--illu-sheet);
}

/* the light objects (payment card, calendar of "all set"): paper with a thin frame, lifted a little off the circle */
.illu__card {
    fill: var(--illu-sheet);
    stroke: var(--illu-line);
    stroke-width: 2;
}

.illu__lift {
    filter: drop-shadow(0 6px 8px rgba(16, 24, 40, .08));
}

/* confetti and sparkles of "all set": the tone, the gold of the chip and the colour of the center */
.illu__festive {
    fill: var(--op-accent);
}

.illu__streamer {
    fill: none;
    stroke: var(--illu-tone);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.illu__streamer--b {
    stroke: var(--op-accent);
}

.illu__glass {
    stroke: var(--illu-dark);
    stroke-width: 2;
}

.illu__line {
    fill: var(--illu-line);
}

.illu__line-dark {
    fill: var(--illu-dark-line);
}

.illu__tone-soft {
    fill: color-mix(in srgb, var(--illu-tone) 30%, var(--illu-sheet));
}

.illu__tone {
    fill: var(--illu-tone);
}

.illu__chip {
    fill: var(--illu-chip);
}

.illu__mark {
    fill: none;
    stroke: var(--illu-on-tone);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.illu__ring {
    fill: var(--illu-sheet);
    stroke: var(--illu-dark);
    stroke-width: 2;
}

.illu__badge {
    position: absolute;
    top: 56%;
    right: 2%;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 72%;
    padding: .4rem .95rem .4rem .55rem;
    border-radius: 999px;
    background: var(--illu-tone);
    color: var(--illu-on-tone);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--illu-tone) 70%, transparent);
    transform: translateY(-50%);
}

.illu__badge-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
}

.illu__spinner {
    width: .95rem;
    height: .95rem;
    border: 2px solid color-mix(in srgb, var(--illu-on-tone) 35%, transparent);
    border-top-color: var(--illu-on-tone);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

/* ---- waiting for the summary and the payment provider (checkout #loading): the picture of the payment (OnlineIllustration
   card, the pill turns), a short title and the text -------------------------------------------------------------------- */
.wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-2) var(--s-7); /* below the text as much space as the picture has above it */
    text-align: center;
}

.wait[hidden] {
    display: none;
}

.wait__title {
    margin: 0;
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.wait__text {
    max-width: 28rem;
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.5;
}

/* ---- an identical booking exists (pages/partials/booking-blocked.php): picture, question, what "book anyway" means ------ */
.same-booking__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
}

.same-booking__title {
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.25;
}

.same-booking__text {
    max-width: 30rem;
    margin: 0;
    color: var(--ink-muted);
    line-height: 1.5;
}

/* the appointments of that day the server found: day and time, the booking code below */
.same-booking__list {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
}

.same-booking__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-left: 4px solid var(--op-accent);
    border-radius: var(--r-md);
    background: var(--bg-card);
    text-align: left;
}

.same-booking__item svg {
    grid-row: span 2;
    color: var(--op-accent-ink);
}

.same-booking__when {
    font-weight: 650;
}

.same-booking__code {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.same-booking__hint {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: var(--s-4) 0 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    text-align: left;
}

.same-booking__hint svg {
    flex: none;
    margin-top: .15rem;
    color: var(--op-accent-ink);
}

/* ---- legal texts of the platform (info/terms, info/privacy; pages/legal/*.php): German and English, one shown ---------- */
.legal__languages {
    display: inline-flex;
    gap: var(--s-1);
    margin: 0 0 var(--s-4);
    padding: .2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
}

.legal__language {
    padding: .25rem .9rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.legal__language[aria-pressed="true"] {
    background: var(--op-accent);
    color: var(--op-on-accent);
}

.legal-doc {
    color: var(--ink);
    line-height: 1.6;
    overflow-wrap: anywhere;
    text-align: left;
}

.legal-doc[hidden] {
    display: none;
}

.legal-doc__title {
    margin: 0 0 var(--s-1);
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.legal-doc__meta {
    margin: 0 0 var(--s-4);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.legal-doc h3 {
    margin: var(--s-5) 0 var(--s-2);
    font-size: var(--fs-md);
    line-height: 1.35;
}

.legal-doc p,
.legal-doc ul {
    margin: 0 0 var(--s-3);
}

.legal-doc ul {
    padding-left: 1.25rem;
}

.legal-doc li {
    margin-bottom: var(--s-1);
}

.legal-doc__contact {
    margin-top: var(--s-5);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* intl-tel-input v16 (core/js/plugins/intltelinput brings its own flag sprites). Its stylesheet comes after this one and
   fixes light colours (a white list, grey dial codes): every colour is set here with a higher specificity, so the list
   follows the light and the dark scheme */
.iti .iti__selected-flag {
    color: var(--ink-muted);
}

.iti.iti--separate-dial-code .iti__selected-flag {
    border-radius: var(--r-md) 0 0 var(--r-md);
    background-color: var(--bg-subtle);
}

.iti.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: var(--bg-muted);
}

.iti .iti__arrow {
    border-top-color: var(--ink-muted);
}

.iti .iti__arrow--up {
    border-bottom-color: var(--ink-muted);
}

.iti--separate-dial-code input {
    padding-left: 5.5rem !important;
}

.iti .iti__country-list {
    z-index: 100;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background-color: var(--bg-card);
    box-shadow: var(--shadow-md);
    color: var(--ink);
}

.iti .iti__country {
    padding: var(--s-2) var(--s-3);
}

.iti .iti__country.iti__highlight {
    background-color: var(--op-accent-soft);
}

.iti .iti__dial-code {
    color: var(--ink-muted);
}

.iti .iti__divider {
    border-bottom-color: var(--line);
}

.iti {
    display: block !important;
    width: 100%;
    margin-bottom: var(--s-3);
}

.iti input {
    margin-bottom: 0 !important;
}

/* ---- confirmation code ------------------------------------------------------------------------------------------------------------------- */
.confirmationSend {
    text-align: center;
}

.confirmationSend #confirmationcode {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin: var(--s-4) 0;
}

.confirmationSend #confirmationcode input {
    width: 3.5rem;
    height: 4rem;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}

.confirmationSend #codeSentTo {
    display: inline-block;
    margin: var(--s-3) 0;
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-sm);
    background: var(--bg-muted);
    font-weight: 650;
}

.confirmationSend #countdown {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.confirmationSend #resendConfirmationcode {
    justify-content: center;
    margin: var(--s-2) auto 0;
}


/* ---- payment summary (price summary) ---------------------------------------------------------------------------------------------------- */
.summary-wrapper {
    margin: 0 0 var(--s-4);
}

.summary {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.summary .inset {
    padding: var(--s-3) var(--s-4);
    color: var(--ink);
}

.summary table,
.SlotPriceSummaryViewTable {
    width: 100%;
    border-spacing: 0;
}

.summary td {
    padding: .35rem 0;
    vertical-align: top;
    line-height: 1.4;
}

.summary td:first-child { text-align: left; }
.summary td:last-child { text-align: right; }

.SlotPriceSummaryViewTable .service-total {
    font-weight: 650;
}

.SlotPriceSummaryViewTable td.price {
    vertical-align: bottom;
    white-space: nowrap;
    padding-left: var(--s-3);
}

.SlotPriceSummaryViewTable td.price.state-onsite {
    color: var(--warning);
}

.SlotPriceSummaryViewTable .row-sublabel {
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.SlotPriceSummaryViewTable .row-sublabel.row-calc {
    white-space: normal;
}

.SlotPriceSummaryViewTable .indent td:first-child {
    padding-left: var(--s-4);
}

.SlotPriceSummaryViewTable .tax-line td {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.SlotPriceSummaryViewTable .total-gross {
    font-weight: 700;
    font-size: var(--fs-lg);
}

.ps-tax-table {
    margin-top: var(--s-2);
    padding-top: var(--s-1);
    border-top: 1px solid var(--line);
}

/* one separator in the summary and its details: a hairline in the line colour; the total stands out by its type, never by a
   second, stronger or doubled line */
.ps-sum-table {
    margin-top: var(--s-2);
    padding-top: var(--s-1);
    border-top: 1px solid var(--line);
}

/* in the details the group above already draws the line */
.ps-dialog-body .ps-sum-table {
    margin-top: 0;
    padding-top: var(--s-2);
    border-top: 0;
}

.ps-notice {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    background: var(--warning-bg);
    color: var(--warning);
    font-size: var(--fs-sm);
    text-align: left;
}

.ps-summary-error {
    padding: var(--s-3);
    color: var(--danger);
}

.ps-details-btn {
    display: block;
    width: 100%;
    min-height: var(--control-h);
    margin-top: var(--s-3);
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--op-accent);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--op-accent-ink);
    font-weight: 650;
}

.price-details-dialog {
    width: min(35rem, calc(100% - 2rem));
    max-height: 85vh;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--bg-card);
    color: var(--ink);
    overflow: hidden;
}

.price-details-dialog[open] {
    display: flex;
    flex-direction: column;
}

.price-details-dialog::backdrop {
    background: rgba(16, 24, 40, .55);
}

.ps-dialog-head,
.ps-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
}

.ps-dialog-foot {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.ps-dialog-head h4 {
    margin: 0;
}

.ps-dialog-x {
    min-width: var(--control-h);
    min-height: var(--control-h);
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-muted);
}

.ps-dialog-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--s-1) var(--s-4) var(--s-3);
    text-align: left;
}

.ps-detail-group {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--line);
}

.ps-detail-title { font-weight: 650; }
.ps-detail-meta { font-size: var(--fs-sm); color: var(--ink-muted); }

.ps-detail-group--total .ps-detail-meta {
    margin-top: var(--s-2);
}

.SlotPriceSummaryViewTable .total-online {
    font-weight: 650;
}

/* ---- before paying: the payment information (three short points) ------------------------------------------------------ */
.pay-notes {
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    text-align: left;
}

.pay-notes__title {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.pay-notes__list {
    display: grid;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.pay-notes__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.pay-notes__list svg {
    flex: none;
    margin-top: .15rem;
    color: var(--ink-faint);
}

/* the cancellation terms of the center below the notes (js/components/cancellation-terms.js): to unfold, the button in the
   style of "Details anzeigen" */
.cancel-terms {
    margin: 0 0 var(--s-4);
    text-align: left;
}

.cancel-terms[hidden] {
    display: none;
}

.cancel-terms__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-h);
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--op-accent);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--op-accent-ink);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.cancel-terms__toggle::-webkit-details-marker {
    display: none;
}

.cancel-terms__toggle::after {
    width: .5rem;
    height: .5rem;
    margin-left: var(--s-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t) var(--ease);
}

.cancel-terms[open] .cancel-terms__toggle::after {
    transform: translateY(2px) rotate(-135deg);
}

.cancel-terms__body {
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.cancel-terms__body > :first-child {
    margin-top: 0;
}

.cancel-terms__body > :last-child {
    margin-bottom: 0;
}

/* below the button: the click accepts the cancellation terms */
.cancel-accept {
    margin: var(--s-2) 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    line-height: 1.5;
    text-align: center;
}

.cancel-accept[hidden] {
    display: none;
}

.cancel-accept__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--op-accent-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.ps-dialog-close {
    width: 100%;
    min-height: var(--control-h);
    border: 0;
    border-radius: var(--r-md);
    background: var(--bg-inverse);
    color: var(--ink-inverse);
    font-weight: 650;
}

@media (max-width: 40rem) {
    .price-details-dialog {
        width: 100%;
        max-width: 100%;
        margin: auto 0 0;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }
}

/* ---- confirmation / failure screens ------------------------------------------------------------------------------------------------------ */
#PendingSection,
#FailedInfo,
#FailedUnknownInfo {
    text-align: center;
}

#confirmedBookingIDS {
    margin: var(--s-4) 0;
    font-weight: 600;
}

/* ---- success page (pages/success.php, js/components/booking-summary.js): cards of its own on the page background ------ */
.success {
    display: grid;
    gap: var(--s-4);
    text-align: left;
}

.success-hero,
.code-card,
.bcard,
.next-steps,
.place {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.code-card[hidden],
.next-steps[hidden],
.place[hidden],
.bsum[hidden] {
    display: none;
}

/* the payment summary of a reservation with amounts to pay on site: without them no row of the grid (and no gap for it) */
#confirmPriceSummary:empty {
    display: none;
}

/* what was finished: the picture beside the title (below each other on a narrow screen), a breath of the green of the
   payment behind it */
.success-hero {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: color-mix(in srgb, var(--success-bg) 60%, var(--bg-card));
}

#SuccessSection .illu {
    flex: none;
    width: min(11rem, 38%);
    margin: 0;
}

/* the picture alone: the title says what happened */
#SuccessSection .illu__badge {
    display: none;
}

.success-hero__body {
    display: grid;
    gap: var(--s-2);
    min-width: 0;
}

.success-hero__title {
    margin: 0;
    color: var(--secure-ink); /* the green of the payment */
    font-size: clamp(1.2rem, 1rem + .9vw, 1.5rem);
    font-weight: 750;
    line-height: 1.2;
}

/* the title follows what was finished (js/pages/success.js): its line is kept while it is still empty */
.success-hero__title:empty::before {
    content: "\00a0";
}

/* the thanks and the note about the e-mail: the same size, type and colour */
.success__text {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.success__text > span {
    display: block;
}

.success__text > span + span {
    margin-top: var(--s-2);
}

#LandingCancelPreview:empty {
    display: none;
}

/* the booking code of a single booking, to name at the counter or on the telephone, with the button to copy it */
.code-card {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-color: var(--op-accent-soft-border);
    background: color-mix(in srgb, var(--op-accent-soft) 55%, var(--bg-card));
}

.code-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--op-accent-soft);
    color: var(--op-accent-ink);
}

.code-card__body {
    flex: 1;
    min-width: 0;
}

.code-card__label {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.code-card__value {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    user-select: all;
}

.code-card__copy {
    flex: none;
    gap: var(--s-2);
    border-color: var(--op-accent);
    color: var(--op-accent-ink);
}

.code-card__button-icon {
    display: inline-flex;
}

.code-card__copy.is-copied {
    border-color: var(--success-line);
    color: var(--secure-ink);
}

/* the confirmed bookings: one card each */
.bsum {
    margin: 0;
}

.bsum__skeleton {
    height: 14rem;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--line) 45%, var(--bg-subtle) 90%) 0 0 / 220% 100%;
    animation: shimmer 1.3s linear infinite;
    opacity: .6;
}

.bsum__list {
    display: grid;
    gap: var(--s-4);
}

/* "1 Stunde", "14:00 – 15:00 Uhr" stay together: the lines break only between the parts */
.bsum__part {
    white-space: nowrap;
}

/* a booking like a ticket: the edge in the colour of its calendar, the notches on both sides at the height of the facts */
.bcard {
    --card-pad: var(--s-5);
    --card-edge: 6px;
    --notch: 1.6rem;
    position: relative;
    padding: var(--card-pad);
    border-left: var(--card-edge) solid var(--item-color, var(--op-accent));
}

.bcard__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

/* the activity in the colour of its calendar */
.bcard__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--item-color, var(--op-accent));
    color: var(--item-on, var(--op-on-accent));
}

.bcard__titles {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.bcard__titles p {
    margin: 0;
}

.bcard__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin: 0;
    font-size: var(--fs-xl);
    line-height: 1.2;
}

.bcard__chip {
    padding: .15rem .65rem;
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.bcard__schedule {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
}

.bcard__schedule > .bcard__fact {
    flex: 1 1 8rem;
}

.bcard__schedule > .bcard__fact:first-child {
    flex: 2 1 12rem;
}

/* the facts in two columns: time and persons, then date and payment */
.bcard__facts {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
    margin: var(--s-5) 0 0;
    padding: 0;
    list-style: none;
}

/* the notches: a half circle of the page background cut into each edge (only the half inside the card shows) */
.bcard__facts::before,
.bcard__facts::after {
    position: absolute;
    top: calc(1.375rem - var(--notch) / 2);
    width: var(--notch);
    height: var(--notch);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg-page);
    content: "";
}

.bcard__facts::before {
    left: calc(-1 * var(--card-pad) - var(--card-edge) - var(--notch) / 2);
    clip-path: inset(0 0 0 50%);
}

.bcard__facts::after {
    right: calc(-1 * var(--card-pad) - 1px - var(--notch) / 2);
    clip-path: inset(0 50% 0 0);
}

.bcard__fact {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    min-width: 0;
}

.bcard__fact-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--bg-subtle);
    color: var(--ink-muted);
}

.bcard__fact-body {
    display: grid;
    justify-items: start;
    gap: .1rem;
    min-width: 0;
}

.bcard__label {
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

.bcard__value {
    color: var(--ink);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bcard__extra {
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

/* the payment: "Bezahlt" in the green of the payment, "Vor Ort" quiet */
.bcard__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.bcard__badge--paid {
    border-color: var(--success-line);
    background: var(--success-bg);
    color: var(--secure-ink);
}

.bcard__badge svg {
    flex: none;
}

.bcard__code {
    letter-spacing: .04em;
    user-select: all;
}

.bcard__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    margin: var(--s-3) 0 0;
    color: var(--warning);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.bcard__notice svg {
    flex: none;
    margin-top: .15rem;
}

/* until it begins: below a line, a quiet field; counts down every second (js/components/countdown.js) */
.bcard__countdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: calc(var(--s-4) * 2 + 1px);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    color: var(--ink-muted);
}

.bcard__countdown::before {
    position: absolute;
    top: calc(-1 * var(--s-4) - 1px);
    right: 0;
    left: 0;
    border-top: 1px solid var(--line);
    content: "";
}

.bcard__countdown[hidden] {
    display: none;
}

.bcard__countdown svg {
    flex: none;
}

.countdown__text {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
    .bcard {
        --card-pad: var(--s-4);
    }

    .bcard__icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .bcard__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* who booked: a small card below the bookings (quieter than they are) - the initials in the colour of the center, the
   name, e-mail and telephone, left-aligned */
/* who booked, within the card of the booking: between its facts and the countdown (js/components/customer-card.js) */
.customer-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    text-align: left;
}

.customer-card__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--op-accent);
    color: var(--op-on-accent);
    font-size: var(--fs-xs);
    font-weight: 750;
    letter-spacing: .02em;
}

.customer-card__body {
    display: grid;
    gap: 0;
    min-width: 0;
}

.customer-card__name {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 650;
}

/* e-mail and telephone side by side while they fit */
.customer-card__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--s-3);
    margin: .1rem 0 0;
    padding: 0;
    list-style: none;
}

.customer-card__line {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

.customer-card__line svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--ink-faint);
}

.customer-card__line span {
    min-width: 0;
    overflow-wrap: anywhere; /* a long e-mail address breaks instead of leaving the card */
}

/* the next steps: into the calendar (a wide button, Google below it), then the call and the way there side by side */
.next-steps {
    padding: var(--s-5);
}

.next__heading {
    margin: 0;
    font-size: var(--fs-lg);
}

.next__intro {
    margin: .25rem 0 var(--s-4);
    color: var(--ink-muted);
}

.next__calendar-form {
    margin: 0;
}

.next__calendar {
    gap: var(--s-2);
}

.next__tiles {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.next__tile {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    min-height: 3.5rem;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.next__tile:hover {
    border-color: var(--op-accent);
    box-shadow: var(--shadow-sm);
}

.next__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--op-accent-soft);
    color: var(--op-accent-ink);
}

.next__text {
    flex: 1;
    min-width: 0;
}

.next__chevron {
    flex: none;
    color: var(--ink-faint);
}

.next__more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-1) var(--s-2);
    margin: var(--s-2) 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.next__google {
    color: var(--op-accent-ink);
    font-weight: 600;
}

.next__sep {
    color: var(--ink-faint);
}

/* the center: address, telephone and e-mail beside the map */
.place {
    padding: var(--s-5);
}

.place__heading {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-lg);
}

.place__body {
    display: grid;
    gap: var(--s-3);
}

.place__body.has-map {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.place__info {
    display: grid;
    align-content: start;
    gap: var(--s-3);
    margin: 0;
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    list-style: none;
}

.place__row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    min-width: 0;
}

.place__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--op-accent-soft);
    color: var(--op-accent-ink);
}

.place__item {
    display: grid;
    gap: .1rem;
    min-width: 0;
}

.place__label {
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

.place__address {
    display: grid;
    color: var(--ink);
    font-style: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.place__gap {
    height: .6em;
}

.place__value {
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.place__value:hover {
    text-decoration: underline;
}

/* the map: the picture of our server (OpenStreetMap in grey), the pin in the colour of the center in its middle */
.place__map {
    position: relative;
    min-height: 12rem;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-muted);
}

.place__map-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

:root[data-theme="dark"] .place__map-image {
    filter: invert(.9) contrast(.9);
}

.place__map-pin {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 3px solid var(--bg-card);
    border-radius: 50% 50% 50% 0;
    background: var(--op-accent);
    color: var(--op-on-accent);
    box-shadow: var(--shadow-md);
    transform: rotate(-45deg);
}

.place__map-pin svg {
    transform: rotate(45deg);
}

/* the pin stands with its tip on the place */
.place__map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
}

.place__map-credit {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 .3rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    color: var(--ink-muted);
    font-size: .625rem;
    line-height: 1.5;
    text-decoration: none;
}

@media (max-width: 36rem) {
    .success-hero {
        flex-direction: column;
        padding: var(--s-4);
        text-align: center;
    }

    #SuccessSection .illu {
        width: min(10rem, 60%);
    }

    .code-card,
    .next-steps,
    .place {
        padding: var(--s-4);
    }
}

@media (max-width: 30rem) {
    .code-card {
        flex-wrap: wrap;
    }

    .code-card__copy {
        width: 100%;
    }
}

/* while the extras of a step load (and their pictures): placeholders of the width of the product cards */
.product-skeleton {
    width: 100%;
    height: 8.5rem;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--line) 45%, var(--bg-subtle) 90%) 0 0 / 220% 100%;
    animation: shimmer 1.3s linear infinite;
    opacity: .6;
}

/* while the bookings are loaded: a quiet placeholder of the size of one ticket */
.ticket-skeleton {
    width: 100%;
    max-width: 23rem;
    height: 15rem;
    border-radius: var(--r-lg);
    background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--line) 45%, var(--bg-subtle) 90%);
    background-size: 220% 100%;
    animation: sv-shimmer 1.3s linear infinite;
    opacity: .6;
}

/* cancellation page: the booking that is about to be cancelled, the neutral refund note, then the question */
.cancel-preview__title {
    margin: 0;
}

/* the booking plainly: label and value per line */
.cancel-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    text-align: left;
}

.cancel-facts:empty {
    display: none;
}

.cancel-facts dt {
    color: var(--ink-muted);
}

.cancel-facts dd {
    margin: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* cancelled: a friendly confirmation */
.cancel-done {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    border: 1px solid var(--success-line);
    border-radius: var(--r-md);
    background: var(--success-bg);
    color: var(--ink);
    text-align: center;
}

.cancel-done > svg {
    color: var(--success);
}

.cancel-done__title {
    font-size: var(--fs-lg);
}

.cancel-done p {
    margin: 0;
}

/* after the cancellation window: the call comes first */
.cancel-phone {
    display: grid;
    gap: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--danger-line);
    border-left: 4px solid var(--danger);
    border-radius: var(--r-md);
    background: var(--danger-bg);
    color: var(--ink);
    text-align: left;
}

.cancel-phone__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--danger);
    font-size: var(--fs-lg);
}

.cancel-phone p {
    margin: 0;
    line-height: 1.5;
}

.cancel-phone__number {
    display: inline-block;
    color: var(--ink);
    font-size: 1.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.cancel-preview__refund {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--info-bg);
    color: var(--info);
    font-size: var(--fs-sm);
    text-align: left;
}

.cancel-preview__question {
    margin: 0;
}

#confirmedBookingIDS > div {
    display: inline-block;
    margin: var(--s-1);
    padding: .1rem var(--s-3);
    border-radius: var(--r-pill);
    background: var(--success-bg);
    color: var(--success);
    font-family: var(--font-mono);
}

#SlotTimeoutView,
#SlotErrorView,
#SlotLoginMaxBookingsReached,
#SlotLoginTooManyNoShows,
#SlotLoginPassChangeSuccessView,
#SlotLoginPassChangeWaitView,
#SlotRegisterConfirmView,
#SlotHasSameBooking,
.view[id^="Landing"] {
    text-align: left;
}

.error-message h2 {
    font-size: var(--fs-lg);
}

/* ---- secondary pages (opening hours, plan, event list) -------------------------------------------------------------------------------- */
/* ---- opening hours: open now, the next 14 days, the regular week, the note on online times (pages/hours.php, js/pages/hours.js) */
.hours__status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.hours__dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--ink-faint);
}

.hours__status.is-open .hours__dot {
    background: var(--success, #1f9d55);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #1f9d55) 25%, transparent);
}

/* every line on the same columns: the day, then "Geöffnet" and "Online buchbar" (one column without other online times) */
.hours__section {
    --hours-cols: minmax(0, 1fr) auto;
    margin-top: var(--s-4);
}

.hours__section.is-split {
    --hours-cols: minmax(0, 1fr) 7rem 7rem;
}

.hours__head,
.hours__day {
    display: grid;
    grid-template-columns: var(--hours-cols);
    column-gap: var(--s-3);
    align-items: baseline;
}

.hours__head {
    padding: 0 var(--s-3) var(--s-2);
    border-bottom: 1px solid var(--line);
}

.hours__head[hidden] {
    display: none;
}

.hours__title,
.hours__col {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hours__col {
    text-align: right;
}

.hours__section:not(.is-split) .hours__col[data-col="open"],
.hours__section:not(.is-split) .hours__col[data-col="online"],
.hours__section.is-split .hours__col[data-col="both"] {
    display: none;
}

.hours__days,
.hours__regular {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hours__day {
    row-gap: var(--s-1);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--line);
}

.hours__day:last-child {
    border-bottom: 0;
}

.hours__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-2);
    min-width: 0;
}

.hours__date {
    color: var(--ink);
    font-weight: 600;
}

.hours__cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hours__cell--open {
    color: var(--ink-muted);
}

.hours__cell--online {
    color: var(--ink);
    font-weight: 650;
}

.hours__cell--online.is-none,
.hours__cell--closed {
    color: var(--ink-muted);
    font-weight: 500;
}

/* closed: over both columns */
.hours__cell--closed {
    grid-column: 2 / -1;
}

.hours__day.is-closed .hours__date {
    color: var(--ink-muted);
}

/* today: highlighted */
.hours__day.is-today {
    border-radius: var(--r-md);
    background: var(--op-accent-soft);
    box-shadow: inset 3px 0 0 var(--op-accent);
}

.hours__today {
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--op-accent);
    color: var(--op-on-accent);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* below the line: public holiday, different hours with the usual ones and the reason */
.hours__extra {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    font-size: var(--fs-sm);
}

.hours__badge {
    padding: 0 .45rem;
    border: 1px solid var(--warning-line, var(--line-strong));
    border-radius: 999px;
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.hours__holiday {
    color: var(--ink);
    font-weight: 650;
}

.hours__usual,
.hours__note {
    color: var(--ink-muted);
}

.hours__online-note {
    margin: var(--s-4) 0 0;
    padding-top: var(--s-3);
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.hours__phone {
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .hours__section.is-split {
        --hours-cols: minmax(0, 1fr) 6rem 6rem;
    }

    .hours__head,
    .hours__day {
        column-gap: var(--s-2);
        padding-left: var(--s-2);
        padding-right: var(--s-2);
    }

    .hours__day {
        font-size: var(--fs-sm);
    }
}

/* ---- category page (info/events, "Kategorien"): one inviting card per category in its colour (--category-color, set by
   js/pages/events.js; the accent without one): activity, name, description; the whole card is the link */
.categories__intro {
    margin: 0 0 var(--s-4);
    color: var(--ink-muted);
}

.categories__list {
    display: grid;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.categories__empty {
    margin: 0;
    color: var(--ink-muted);
}

.category {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-left: 5px solid var(--category-color, var(--op-accent));
    border-radius: var(--r-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--category-color, var(--op-accent)) 7%, var(--bg-card)) 0%, var(--bg-card) 65%);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

.category:hover {
    border-color: var(--line-strong);
    border-left-color: var(--category-color, var(--op-accent));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.category:focus-within {
    box-shadow: var(--focus);
}

.category__activity {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.category__name {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-lg);
    line-height: 1.3;
}

.category__desc {
    color: var(--ink-muted);
    line-height: 1.5;
}

.category__desc > :first-child {
    margin-top: 0;
}

.category__desc > :last-child {
    margin-bottom: 0;
}

/* links in the description stay usable above the link of the card */
.category__desc a {
    position: relative;
    z-index: 1;
}

.category__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
    color: var(--op-accent-ink);
    font-weight: 700;
    text-decoration: none;
}

.category__cta:focus-visible {
    outline: none;
}

/* the whole card opens the event link */
.category__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.category:hover .category__cta svg {
    transform: translateX(2px);
}

.category__cta svg {
    transition: transform var(--t) var(--ease);
}

.plan-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

/* ---- booking plan: calendar left, day right, the grid below (pages/plan.php, components/booking-plan.js) ---------------- */
.plan__toolbar {
    align-items: center;
}

/* calendar, arrows and day on one centre line */
.plan__toolbar .field {
    height: var(--control-h);
    margin: 0;
}

.plan__calendar {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
}

.plan__calendar .field {
    width: 100%;
}

.plan__calendar .field.has-icon {
    padding-left: 2.6rem;
}

.plan__calendar-icon {
    position: absolute;
    top: 50%;
    left: var(--s-3);
    display: inline-flex;
    color: var(--ink);
    transform: translateY(-50%);
    pointer-events: none;
}

.plan__date {
    display: flex;
    flex: 2 1 20rem;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.plan__date .field {
    flex: 1 1 auto;
    min-width: 9.5rem;
}

.plan__step {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
}

.plan__step:hover:not(:disabled) {
    border-color: var(--op-accent);
}

.plan__step:disabled {
    opacity: .4;
}

.plan__day {
    margin: 0 0 var(--s-2);
    color: var(--ink);
    font-weight: 650;
}

.plan__grid-wrap {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
}

.plan__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
}

.plan__grid th,
.plan__grid td {
    height: 1.6rem;
    min-width: 2.25rem;
    padding: 0;
    border-bottom: 1px solid var(--line);
    text-align: center;
    white-space: nowrap;
}

.plan__grid td + td {
    border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* times and resources stay in view while the grid scrolls */
.plan__grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--s-2) var(--s-1);
    background: var(--bg-subtle);
    color: var(--ink);
    font-weight: 650;
}

.plan__grid tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 0 var(--s-3);
    border-bottom: 0;
    background: var(--bg-card);
    color: var(--ink);
    font-weight: 650;
    text-align: right;
    vertical-align: top;
}

/* the time stands on the line of its hour (as in a calendar); the first one inside its row */
.plan__time {
    display: block;
    line-height: 1;
    transform: translateY(-50%);
}

.plan__grid tbody tr:first-child .plan__time {
    padding-top: var(--s-1);
    transform: none;
}

.plan__grid thead .plan__corner {
    left: 0;
    z-index: 3;
}

.plan__grid tr.is-hour td {
    border-top: 1px solid var(--line-strong);
}

/* a booking is a bar along its time (rounded where it starts and ends) */
.plan__grid td.is-taken {
    position: relative;
}

.plan__grid td.is-taken::before {
    content: '';
    position: absolute;
    z-index: 1;
    /* over the lines of the rows: one bar along the booking */
    top: -1px;
    right: 3px;
    bottom: -1px;
    left: 3px;
    /* opaque: the pieces of one bar overlap at the lines of the rows without a seam */
    background: color-mix(in srgb, var(--op-accent) 88%, var(--bg-card));
}

.plan__grid td.run-start::before {
    top: 3px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.plan__grid td.run-end::before {
    bottom: 3px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.plan__grid .is-blocked {
    background: var(--bg-muted);
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 5px);
}

/* today: the past is dimmed, the current slot marked */
.plan__grid tr.is-past td,
.plan__grid tr.is-past th {
    opacity: .45;
}

.plan__grid tr.is-now th {
    color: var(--op-accent-ink);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--op-accent);
}

.plan__grid tr.is-now td {
    background: color-mix(in srgb, var(--op-accent) 7%, transparent);
}

.plan__empty {
    margin: var(--s-3) 0;
    padding: var(--s-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
    color: var(--ink-muted);
    text-align: center;
}

.plan__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    margin: var(--s-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.plan__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.plan__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--bg-card);
}

.plan__swatch--taken {
    border-color: var(--op-accent);
    background: var(--op-accent);
}

.plan__swatch--blocked {
    background: var(--bg-muted);
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--line) 3px 4px);
}

/* ---- payment page: embedded checkout (components of Adyen Web, js/pages/payment-link.js) ------------------------------------- */
/* A page like every step: the orange head "Payment" with the countdown, the payment method and the note on security in the
   card of the page. */
.pay {
    display: grid;
    gap: var(--s-4);
    text-align: left;
    /* the colour of the center, kept under its own names for the parts of the green payment card that stay in it */
    --center-accent: var(--op-accent);
    --center-accent-hover: var(--op-accent-hover);
    --center-accent-pressed: var(--op-accent-pressed);
    --center-on-accent: var(--op-on-accent);
    --center-accent-ink: var(--op-accent-ink);
    --center-accent-ring: var(--op-accent-ring);
    --center-gradient: var(--op-gradient);
    --center-gradient-hover: var(--op-gradient-hover);
    --center-glow: var(--op-glow);
    --center-focus: var(--focus);
}

/* The payment itself is green - security, independent of the colour of the operator: the payment method card (tiles,
   fields, pay button, notes) and the layer while paying use the secure tokens wherever they use the accent of the
   operator (the switch to the secure payment page and the terms keep the colour of the center, see below). The gradients and the focus ring are derived again here (custom properties resolve where
   they are defined). */
.pay-methods,
.pay-overlay {
    --op-accent: var(--secure);
    --op-accent-hover: var(--secure-hover);
    --op-accent-pressed: var(--secure-pressed);
    --op-on-accent: #ffffff;
    --op-accent-ink: var(--secure-ink);
    --op-accent-ring: var(--secure-ring);
    --op-accent-soft: var(--success-bg);
    --op-accent-soft-border: var(--success-line);
    --op-gradient: linear-gradient(135deg, color-mix(in srgb, var(--op-accent) 92%, #ffffff) 0%, var(--op-accent) 50%, color-mix(in srgb, var(--op-accent) 92%, #000000) 100%);
    --op-gradient-hover: linear-gradient(135deg, color-mix(in srgb, var(--op-accent-hover) 92%, #ffffff) 0%, var(--op-accent-hover) 50%, color-mix(in srgb, var(--op-accent-hover) 92%, #000000) 100%);
    --op-glow: color-mix(in srgb, var(--op-accent) 32%, transparent);
    --focus: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--op-accent-ring);
}

/* in the colour of the center inside the green card: the switch to the secure payment page of Adyen and the links of the
   terms (they lead away from the payment) */
.pay-hosted,
.pay-terms {
    --op-accent: var(--center-accent);
    --op-accent-hover: var(--center-accent-hover);
    --op-accent-pressed: var(--center-accent-pressed);
    --op-on-accent: var(--center-on-accent);
    --op-accent-ink: var(--center-accent-ink);
    --op-accent-ring: var(--center-accent-ring);
    --op-gradient: var(--center-gradient);
    --op-gradient-hover: var(--center-gradient-hover);
    --op-glow: var(--center-glow);
    --focus: var(--center-focus);
}

/* the parts of the payment page stand in the card of the page (no card of their own) */
.pay-card {
    text-align: left;
}

.pay-wait {
    display: grid;
    gap: var(--s-3);
    justify-items: center;
    padding: var(--s-6) var(--s-5);
}

.pay-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    margin-bottom: var(--s-1);
}

.pay-card__title {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.3;
}

.pay-card__head .pay-card__title {
    margin: 0;
}

.pay-card__lead {
    margin: 0 0 var(--s-4);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: .2rem var(--s-3) .2rem var(--s-2);
    border: 1px solid var(--success-line);
    border-radius: var(--r-pill);
    background: var(--success-bg);
    color: var(--success);
    font-size: var(--fs-xs);
    font-weight: 650;
    white-space: nowrap;
}

/* -- the total amount in the payment method card, right above the pay button (plain: no frame, no field) -- */
.pay-booking {
    display: grid;
    gap: var(--s-3);
}

.pay-booking__onsite {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--warning-line);
    border-radius: var(--r-md);
    background: var(--warning-bg);
    color: var(--warning);
    font-size: var(--fs-sm);
}

.pay-booking__onsite svg {
    flex: none;
    margin-top: .15rem;
}

/* the amount to pay: green like the payment */
.pay-booking__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
}

.pay-booking__total-label {
    font-weight: 650;
}

.pay-booking__total-amount {
    font-size: var(--fs-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pay-booking__tax {
    flex-basis: 100%;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    text-align: right;
}

/* -- payment methods: tiles, panel of the chosen method, pay button -- */
.pay-error {
    margin-bottom: var(--s-4);
}

.pay-tiles,
.pay-tiles__methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
    gap: var(--s-3);
}

/* with stored cards: the grid of the methods, then their rows (a row across the grid would keep its empty columns) */
.pay-tiles.pay-tiles--stored {
    grid-template-columns: minmax(0, 1fr);
}

.pay-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 5.75rem;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg-card);
    color: var(--ink);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.pay-tile:hover {
    border-color: var(--op-accent);
}

.pay-tile.is-selected {
    border-color: var(--op-accent);
    background: var(--op-accent-soft);
    box-shadow: inset 0 0 0 1px var(--op-accent);
}

:root[data-input="keyboard"] .pay-tile:has(.pay-tile__input:focus-visible) {
    box-shadow: var(--focus);
}

.pay-tile:has(.pay-tile__input:disabled) {
    cursor: not-allowed;
    opacity: .6;
}

/* the radio stays in the page for keyboard and screen readers, the tile shows it */
.pay-tile__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pay-tile__check {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    display: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    background: var(--op-accent);
    color: var(--op-on-accent);
}

.pay-tile.is-selected .pay-tile__check {
    display: grid;
}

.pay-tile__visual {
    display: grid;
    place-items: center;
    height: 2rem;
}

.pay-tile__logo {
    display: block;
    width: auto;
    height: 1.75rem;
    max-width: 4.75rem;
    border-radius: 4px;
}

.pay-tile__icon {
    color: var(--op-accent-ink);
}

.pay-tile__name {
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.25;
}

/* a card Adyen keeps for the customer: a row of its own above the methods (brand, last four digits, expiry) */
.pay-tile--stored {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s-3);
    min-height: 4rem;
    padding: var(--s-3) var(--s-4);
    text-align: left;
}

.pay-tile__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.pay-tile--stored .pay-tile__name {
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
}

.pay-tile__meta {
    color: var(--ink-muted);
    font-size: var(--fs-xs);
}

.pay-tile__expiry {
    white-space: nowrap;
}

.pay-tile--skeleton {
    cursor: default;
    border-color: var(--line);
    background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-subtle) 50%, var(--bg-muted) 100%) 0 0 / 220% 100%;
    animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
    from { background-position: 100% 0; }
    to { background-position: -120% 0; }
}

.pay-panel {
    margin-top: var(--s-3);
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
}

.pay-panel__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 700;
}

.pay-panel__hint {
    margin: var(--s-1) 0 var(--s-3);
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.pay-panel__component:empty {
    min-height: 3rem;
}

.pay-submit,
.pay-hosted {
    justify-content: center;
}

.pay-submit {
    min-height: 3.25rem;
    margin-top: var(--s-2);
}

.pay-hosted {
    margin-top: var(--s-4);
}

.pay-submit__arrow {
    display: inline-flex;
}

.pay-terms {
    margin: var(--s-3) 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-xs);
    text-align: center;
}

.pay-terms a {
    color: var(--op-accent-ink);
    font-weight: 600;
}

.pay-or {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-4) 0 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

.pay-or::before,
.pay-or::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--line);
}

.pay-hosted.btn--secondary {
    border-color: var(--op-accent);
    background: transparent;
    color: var(--op-accent-ink);
}

/* security is a reassuring note below the card (its title green) - in every scheme and independent of the colour of the
   operator; on the page background, without a frame of its own */
.pay-safe {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    color: var(--ink);
    font-size: var(--fs-sm);
}

.pay-safe__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--success);
}

.pay-safe__text strong {
    color: var(--success);
}

.pay-safe__text p {
    margin: var(--s-1) 0 0;
    color: var(--ink-muted);
}

.pay-back {
    margin-top: calc(var(--s-2) * -1);
}

/* -- the layer while the payment is prepared or processed (the page below is blurred and cannot be used) -- */
.pay-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: var(--s-4);
    background: color-mix(in srgb, var(--bg-page) 45%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: pay-overlay-in 160ms var(--ease);
}

.pay-overlay__card {
    display: grid;
    justify-items: center;
    gap: var(--s-2);
    width: min(24rem, 100%);
    padding: var(--s-6) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.pay-overlay__spinner {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--s-2);
    border: 4px solid var(--op-accent-soft);
    border-top-color: var(--op-accent);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

.pay-overlay__title {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.pay-overlay__text {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
}

@keyframes pay-overlay-in {
    from { opacity: 0; }
}

/* Adyen Web (adyen.css) in the colours of the page, light and dark, through its design tokens; the text inside the
   secured card fields (iframes of Adyen) gets its colours through the component options (securedFieldStyles) */
.pay-panel {
    --adyen-sdk-color-label-primary: var(--ink);
    --adyen-sdk-color-label-secondary: var(--ink-muted);
    --adyen-sdk-color-label-tertiary: var(--ink-muted);
    --adyen-sdk-color-label-disabled: var(--ink-faint);
    --adyen-sdk-color-label-highlight: var(--op-accent-ink);
    --adyen-sdk-color-label-critical: var(--danger);
    --adyen-sdk-color-label-success: var(--success);
    --adyen-sdk-color-background-primary: var(--bg-card);
    --adyen-sdk-color-background-primary-hover: var(--bg-subtle);
    --adyen-sdk-color-background-secondary: var(--bg-subtle);
    --adyen-sdk-color-background-tertiary: var(--bg-muted);
    --adyen-sdk-color-background-disabled: var(--bg-muted);
    --adyen-sdk-color-outline-primary: var(--line-strong);
    --adyen-sdk-color-outline-primary-hover: var(--ink-faint);
    --adyen-sdk-color-outline-primary-active: var(--op-accent-ring);
    --adyen-sdk-color-outline-secondary: var(--line);
    --adyen-sdk-color-outline-tertiary: var(--line-strong);
    --adyen-sdk-color-outline-critical: var(--danger);
    --adyen-sdk-color-outline-disabled: var(--line);
    --adyen-sdk-color-separator-primary: var(--line);
    --adyen-sdk-color-separator-secondary: var(--line);
    --adyen-sdk-focus-ring-color: var(--op-accent-ring);
    --adyen-sdk-border-radius-m: var(--r-md);
    --adyen-sdk-text-body-font-size: var(--fs-md);
    font-family: var(--font);
}

/* the fields of Adyen (holder name, IBAN and the containers of the secured fields): our global form control style does
   not apply - the wrapper of Adyen draws the frame; every field has the height of our controls (touch target) */
.pay-panel .adyen-checkout__input {
    min-height: 0;
    height: calc(var(--control-h) - 2px);
    margin: 0;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    box-shadow: none;
    font-size: var(--fs-md);
}

/* the card data in the font of the card fields, like the secured fields (securedFieldStyles) */
.pay-panel .adyen-checkout__input {
    font-family: var(--font-card);
    letter-spacing: .03em;
}

/* the brand logos of the card number field stay on white (dark lettering) */
:root[data-theme="dark"] .pay-panel .adyen-checkout__card__brands img,
:root[data-theme="dark"] .pay-panel .adyen-checkout-card-input__icon {
    background: #ffffff;
    border-radius: 3px;
}

/* logos with dark lettering stay readable on the dark theme */
:root[data-theme="dark"] .pay-tile__logo {
    padding: 2px 4px;
    background: #ffffff;
}

@media (max-width: 30rem) {
    .pay-tiles,
    .pay-tiles__methods {
        grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
        gap: var(--s-2);
    }

    .pay-tiles.pay-tiles--stored {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-tile {
        min-height: 5.25rem;
    }

    .pay-panel {
        padding: var(--s-3);
    }
}

@media (forced-colors: active) {
    .pay-tile.is-selected {
        outline: 3px solid Highlight;
    }
}

.pay-window {
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--s-4);
}

/* ---- confirm step: a booking without online payment, confirmed with "Reserve now" (pages/checkout.php) ------------------------ */
#confirm-tickets {
    margin-bottom: var(--s-3);
}