/* The floor plan and its seat buttons, shared by the website and the CMS editor so both look identical. */

.plan-scroll { overflow-x: auto; border: 2px solid rgba(255, 255, 255, .16); background: #0b0b0b; scrollbar-width: thin; scrollbar-color: #262626 transparent; }

/* --r is the image's width / height. Sizes follow the image, so seats keep their place on any screen. */
.plan {
    position: relative; container-type: size; aspect-ratio: var(--r);
    --tap: 40px;
    min-width: calc(880px * min(var(--r), 1));
    max-width: min(1060px, calc(85svh * var(--r)));
    margin-inline: auto;
}
/* Only small screens need a minimum width and scrolling. On a desktop the whole room fits on screen. */
@media (min-width: 1041px) {
    .plan { min-width: 0; }
}
.plan__bg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.plan.is-loading .tbl { opacity: .35; pointer-events: none; }

.tbl {
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
    display: block; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .15s;
    font-family: 'Archivo', Arial, Helvetica, sans-serif;
}
.tbl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.tbl span {
    display: grid; place-items: center; width: max(var(--tap), 4.2cqmax); height: max(var(--tap), 4.2cqmax); border: 2px solid #fff; border-radius: 50%;
    background: #fff; color: #0b0b0b; font-size: max(10px, 1.25cqmax); font-weight: 800; font-stretch: 100%; line-height: 1; white-space: nowrap;
    /* A dark rim keeps seats readable on light images too. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    transition: background-color .12s, color .12s, border-color .12s, transform .12s;
}
.tbl--wide span { width: max(64px, 6.8cqmax); height: max(34px, 3.6cqmax); border-radius: 3px; }
.tbl--tall span { width: max(var(--tap), 4.2cqmax); height: max(64px, 6.8cqmax); border-radius: 3px; }
.tbl--lounge span { width: max(92px, 9.8cqmax); height: max(54px, 5.8cqmax); border-radius: 12px; font-size: max(11px, 1.45cqmax); font-stretch: 112%; }
.tbl:hover span { background: #ff3131; border-color: #fff; color: #0b0b0b; transform: scale(1.1); }
.tbl input:focus-visible + span, button.tbl:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }
.tbl input:checked + span, .tbl.is-selected span {
    background: #ff3131; border-color: #fff; color: #0b0b0b; font-weight: 900;
    box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 6px #ff3131; transform: scale(1.1);
}
.tbl.is-taken { cursor: not-allowed; }
.tbl.is-taken span {
    background: linear-gradient(to top right, transparent calc(50% - 1px), #666 calc(50% - 1px), #666 calc(50% + 1px), transparent calc(50% + 1px)), #262626;
    border-color: #444; color: #8f8f8f; transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .tbl, .tbl span { transition: none; }
}