/* ==========================================================================
   Open Tickets theme - components
   Depends on: vendor/bootstrap-5.3.8/bootstrap.min.css and assets/css/tokens.css (loaded before this file).
   No colour, size or duration is written here directly: everything references a token from tokens.css.
   Class prefix: .ot-  (Bootstrap classes are used for layout, dropdowns and the offcanvas menu.)
   ========================================================================== */

/* ---------- Self-hosted font: Be Vietnam Pro (SIL OFL 1.1, see assets/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Bootstrap variables mapped to tokens ---------- */
:root,
[data-bs-theme="dark"] {
  --bs-body-bg: var(--ot-color-page);
  --bs-body-color: var(--ot-color-text);
  --bs-body-font-family: var(--ot-font-family);
  --bs-body-font-size: var(--ot-fs-body);
  --bs-body-line-height: var(--ot-lh-body);
  --bs-secondary-color: var(--ot-color-text-secondary);
  --bs-tertiary-bg: var(--ot-color-card);
  --bs-border-color: var(--ot-color-divider);
  --bs-border-radius: var(--ot-radius);
  --bs-link-color: var(--ot-color-text);
  --bs-link-hover-color: var(--ot-color-text);
  --bs-link-color-rgb: 244, 245, 247;
  --bs-link-hover-color-rgb: 244, 245, 247;
  --bs-heading-color: var(--ot-color-text);
  --bs-focus-ring-width: var(--ot-focus-width);
  --bs-focus-ring-color: var(--ot-color-focus);
  --bs-emphasis-color: var(--ot-color-text);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ot-color-page);
  color: var(--ot-color-text);
  font-family: var(--ot-font-family);
  font-size: var(--ot-fs-body);
  line-height: var(--ot-lh-body);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--ot-header-actual, calc(var(--ot-header-row) + var(--ot-header-search-row))); /* reserved space for the fixed header; app.js keeps --ot-header-actual equal to the measured height (text zoom) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  body { padding-top: var(--ot-header-actual, var(--ot-header-height)); }
}
main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 { letter-spacing: var(--ot-heading-tracking); color: var(--ot-color-text); }
h1, .ot-h1 { font-size: var(--ot-fs-h1); line-height: var(--ot-lh-h1); font-weight: var(--ot-fw-bold); }
h2, .ot-h2 { font-size: var(--ot-fs-h2); line-height: var(--ot-lh-h2); font-weight: var(--ot-fw-semibold); }
.ot-meta { font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }
a { color: var(--ot-color-text); text-underline-offset: 0.15em; }
img { max-width: 100%; height: auto; }
[x-cloak] { display: none !important; }

/* One focus style everywhere, including controls on the dark header and over posters. */
:focus { outline: none; }
:focus-visible {
  outline: var(--ot-focus-width) solid var(--ot-color-focus);
  outline-offset: var(--ot-focus-offset);
  box-shadow: none;
}
.btn:focus-visible, .form-control:focus, .btn-close:focus { box-shadow: none; }
.btn:focus-visible { outline: var(--ot-focus-width) solid var(--ot-color-focus); outline-offset: var(--ot-focus-offset); }  /* Bootstrap sets outline: 0 on .btn */
.form-control:focus { outline: var(--ot-focus-width) solid var(--ot-color-focus); outline-offset: var(--ot-focus-offset); }

.ot-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; vertical-align: -0.3em; }
.ot-icon--fill { fill: currentColor; stroke: none; }

.ot-skip {
  position: absolute; left: var(--ot-gutter); top: -100px; z-index: 2000;
  background: var(--ot-color-primary); color: var(--ot-color-on-primary);
  padding: var(--ot-space-2) var(--ot-space-4); border-radius: var(--ot-radius-sm); text-decoration: none;
}
.ot-skip:focus { top: var(--ot-space-2); }

.ot-container { width: 100%; max-width: var(--ot-container-max); margin-inline: auto; padding-inline: var(--ot-gutter); }
@media (min-width: 768px) { .ot-container { padding-inline: var(--ot-space-5); } }

/* ---------- Buttons ---------- */
.ot-btn {
  --bs-btn-padding-y: 0.65rem; --bs-btn-padding-x: 1.25rem;
  --bs-btn-font-weight: var(--ot-fw-semibold);
  --bs-btn-border-radius: var(--ot-radius-sm);
  --bs-btn-color: var(--ot-color-on-primary); --bs-btn-bg: var(--ot-color-primary); --bs-btn-border-color: var(--ot-color-primary);
  --bs-btn-hover-color: var(--ot-color-on-primary); --bs-btn-hover-bg: var(--ot-color-primary-hover); --bs-btn-hover-border-color: var(--ot-color-primary-hover);
  --bs-btn-active-color: var(--ot-color-on-primary); --bs-btn-active-bg: var(--ot-color-primary-hover); --bs-btn-active-border-color: var(--ot-color-primary-hover);
  transition: color var(--ot-dur-button) var(--ot-ease-out), background-color var(--ot-dur-button) var(--ot-ease-out), border-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-btn--secondary {
  --bs-btn-color: var(--ot-color-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ot-color-input-border);
  --bs-btn-hover-color: var(--ot-color-text); --bs-btn-hover-bg: var(--ot-color-card); --bs-btn-hover-border-color: var(--ot-color-text-secondary);
  --bs-btn-active-color: var(--ot-color-text); --bs-btn-active-bg: var(--ot-color-card); --bs-btn-active-border-color: var(--ot-color-text-secondary);
}
.ot-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ot-space-2);
  min-width: 44px; min-height: 44px; padding: 0 var(--ot-space-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--ot-radius-sm);
  color: var(--ot-color-text); font: inherit; font-size: var(--ot-fs-meta); font-weight: var(--ot-fw-medium);
  transition: background-color var(--ot-dur-button) var(--ot-ease-out), color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-iconbtn:hover { background: var(--ot-color-card); color: var(--ot-color-text); }
.ot-iconbtn .ot-icon { width: 1.4em; height: 1.4em; }

/* ---------- Header (fixed, shrinks on scroll) ---------- */
.ot-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  background: var(--ot-color-raised);
  box-shadow: var(--ot-shadow-header);
}
.ot-header__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "brand lang menu"
    "search search search";
  align-items: center;
  column-gap: var(--ot-space-2);
}
.ot-brand { grid-area: brand; display: inline-flex; align-items: center; height: var(--ot-header-row); text-decoration: none; }
.ot-brand__logo { height: 38px; width: auto; display: block; transition: height var(--ot-dur-header) var(--ot-ease-out); }
.ot-header__lang { grid-area: lang; }
.ot-header__menu { grid-area: menu; }
.ot-header__nav { grid-area: nav; display: none; }
.ot-search { grid-area: search; height: var(--ot-header-search-row); display: flex; align-items: flex-start; }

.ot-search__group {
  display: flex; width: 100%; max-width: var(--ot-search-max); height: var(--ot-search-height);
  background: var(--ot-color-input-bg); border: 1px solid var(--ot-color-input-border); border-radius: var(--ot-radius-pill);
  margin-inline: auto; overflow: visible;
}
.ot-search__group:focus-within { border-color: var(--ot-color-focus); }
.ot-search__input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  background: transparent; border: 0; border-radius: var(--ot-radius-pill) 0 0 var(--ot-radius-pill);
  color: var(--ot-color-text); font: inherit; font-size: var(--ot-fs-body); padding-inline: var(--ot-space-4);
}
.ot-search__input::placeholder { color: var(--ot-color-input-placeholder); }
.ot-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ot-search__input:focus { outline: none; }
.ot-search__group:focus-within { outline: var(--ot-focus-width) solid var(--ot-color-focus); outline-offset: var(--ot-focus-offset); }
.ot-search__btn {
  flex: 0 0 auto; width: 48px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0 var(--ot-radius-pill) var(--ot-radius-pill) 0;
  color: var(--ot-color-text-secondary);
  transition: color var(--ot-dur-button) var(--ot-ease-out), background-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-search__btn:hover { color: var(--ot-color-text); background: var(--ot-color-card); }

/* Nav links (shown as text at >= 1200px only; the menu button holds them below that) */
.ot-nav__list { display: flex; align-items: center; gap: var(--ot-space-1); list-style: none; margin: 0; padding: 0; }
.ot-nav__link {
  display: inline-flex; align-items: center; gap: var(--ot-space-1);
  min-height: 44px; padding: 0 var(--ot-space-3);
  color: var(--ot-color-text-secondary); text-decoration: none; font-size: var(--ot-fs-meta); font-weight: var(--ot-fw-medium); white-space: nowrap;
  background: transparent; border: 0; border-radius: var(--ot-radius-sm); font-family: inherit;
  transition: color var(--ot-dur-button) var(--ot-ease-out), background-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-nav__link:hover { color: var(--ot-color-text); background: var(--ot-color-card); }
.ot-nav__link.is-current { color: var(--ot-color-text); position: relative; }
.ot-nav__link.is-current::after {
  content: ""; position: absolute; left: var(--ot-space-3); right: var(--ot-space-3); bottom: 6px; height: 2px;
  background: var(--ot-color-primary); border-radius: 1px;
}
.ot-nav__link.dropdown-toggle::after { display: none; }

@media (min-width: 768px) {
  .ot-header__inner {
    min-height: var(--ot-header-height);
    grid-template-columns: auto minmax(200px, 1fr) auto auto;
    grid-template-areas: "brand search lang menu";
    column-gap: var(--ot-space-4);
    transition: min-height var(--ot-dur-header) var(--ot-ease-out);
  }
  .ot-brand { height: auto; }
  .ot-search { height: auto; align-items: center; }
  .ot-search__group { margin-inline: auto; }
  .ot-header.is-compact .ot-header__inner { min-height: var(--ot-header-height-compact); }
  .ot-header.is-compact .ot-brand__logo { height: 32px; }
}
@media (min-width: 1200px) {
  .ot-header__inner {
    grid-template-columns: auto minmax(260px, 1fr) auto auto;
    grid-template-areas: "brand search nav lang";
  }
  .ot-header__nav { display: block; }
  .ot-header__menu { display: none; }
}

/* Dropdowns (More, Language) */
.ot-dropdown {
  --bs-dropdown-bg: var(--ot-color-raised);
  --bs-dropdown-color: var(--ot-color-text);
  --bs-dropdown-border-color: var(--ot-color-divider);
  --bs-dropdown-border-radius: var(--ot-radius);
  --bs-dropdown-link-color: var(--ot-color-text);
  --bs-dropdown-link-hover-color: var(--ot-color-text);
  --bs-dropdown-link-hover-bg: var(--ot-color-card);
  --bs-dropdown-link-active-color: var(--ot-color-on-primary);
  --bs-dropdown-link-active-bg: var(--ot-color-primary);
  --bs-dropdown-item-padding-y: 0.6rem;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-font-size: var(--ot-fs-meta);
  box-shadow: var(--ot-shadow-card);
}
.ot-dropdown .dropdown-item { border-radius: var(--ot-radius-sm); }
.ot-dropdown .dropdown-item:focus-visible { outline-offset: -3px; }
.ot-dropdown .dropdown-item.active::after { content: " \2713"; }
.ot-lang__label { display: none; }
@media (min-width: 992px) { .ot-lang__label { display: inline; } }

/* Offcanvas menu (< 1200px) */
.ot-offcanvas {
  --bs-offcanvas-bg: var(--ot-color-raised);
  --bs-offcanvas-color: var(--ot-color-text);
  --bs-offcanvas-border-color: var(--ot-color-divider);
  --bs-offcanvas-width: min(360px, 88vw);
}
.ot-offcanvas .offcanvas-header { border-bottom: 1px solid var(--ot-color-divider); }
.ot-offcanvas__list { list-style: none; margin: 0; padding: 0; }
.ot-offcanvas__list a {
  display: flex; align-items: center; gap: var(--ot-space-3);
  padding: var(--ot-space-3) var(--ot-space-2); min-height: 48px;
  color: var(--ot-color-text); text-decoration: none; border-radius: var(--ot-radius-sm);
  transition: background-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-offcanvas__list a:hover { background: var(--ot-color-card); }
.ot-offcanvas__list a .ot-icon { color: var(--ot-color-text-secondary); }
.ot-offcanvas__heading { font-size: var(--ot-fs-meta); color: var(--ot-color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--ot-space-5) 0 var(--ot-space-2); }
.ot-offcanvas__langs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ot-space-1); }
.ot-offcanvas__langs a { min-height: 40px; }
.ot-offcanvas__langs a[aria-current="true"] { color: var(--ot-color-text); font-weight: var(--ot-fw-semibold); }

/* ---------- Hero (cinematic: sharp poster over its own pre-blurred backdrop) ---------- */
.ot-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ot-color-page);
  padding-block: var(--ot-space-4) var(--ot-space-5);
}
@media (min-width: 992px) { .ot-hero { padding-block: var(--ot-space-5) var(--ot-space-6); } }

.ot-hero__backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ot-hero > .ot-container { position: relative; z-index: 1; }   /* stage, dots and status sit above the backdrop */
.ot-hero__backdrop-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(var(--ot-backdrop-blur));        /* static blur: the layers crossfade, the blur never animates */
  transform: scale(var(--ot-backdrop-scale));
  opacity: 0;
  transition: opacity var(--ot-dur-backdrop) var(--ot-ease-out);
}
.ot-hero__backdrop-img.is-active { opacity: 1; }
.ot-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ot-backdrop-overlay) 0%, var(--ot-backdrop-overlay) var(--ot-backdrop-fade-start), var(--ot-color-page) 100%);
}

.ot-hero__stage {
  --ot-slide-w: min(100%, var(--ot-hero-max-width));
  position: relative; display: flex; justify-content: center; align-items: center;
}
.ot-hero__slide {
  position: relative; width: var(--ot-slide-w); aspect-ratio: var(--ot-hero-ratio);
  border-radius: var(--ot-radius); overflow: hidden;
  box-shadow: var(--ot-shadow-card);
  z-index: 2;
}
.ot-hero__link { position: absolute; inset: 0; display: block; border-radius: inherit; }
.ot-hero__link:focus-visible { outline-offset: calc(-1 * var(--ot-focus-width)); }
.ot-hero__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* true ratio, never cropped */
  opacity: 0; transform: scale(var(--ot-poster-scale-from));
  transition: opacity var(--ot-dur-poster) var(--ot-ease-out), transform var(--ot-dur-backdrop) var(--ot-ease-out);
  -webkit-user-drag: none; user-select: none;
}
.ot-hero__poster.is-active { opacity: 1; transform: scale(1); }

/* Neighbour peeks: >= 1200px only */
.ot-hero__peek {
  display: none; position: absolute; top: 0; width: var(--ot-slide-w); aspect-ratio: var(--ot-hero-ratio);
  padding: 0; border: 0; background: var(--ot-color-raised); border-radius: var(--ot-radius); overflow: hidden;
  transform: scale(var(--ot-hero-peek-scale)); opacity: var(--ot-hero-peek-opacity);
  cursor: pointer; z-index: 1;
  transition: opacity var(--ot-dur-button) var(--ot-ease-out);
}
.ot-hero__peek img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.ot-hero__peek:hover { opacity: 0.8; }
.ot-hero__peek--prev { right: calc(50% + var(--ot-slide-w) / 2 + var(--ot-space-5)); }
.ot-hero__peek--next { left: calc(50% + var(--ot-slide-w) / 2 + var(--ot-space-5)); }
@media (min-width: 1200px) {
  .ot-hero__stage { --ot-slide-w: min(76%, var(--ot-hero-max-width)); }
  .ot-hero__peek { display: block; }
}

/* Arrows and dots: opaque dark backings over the posters */
.ot-hero__arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: var(--ot-hero-control-size); height: var(--ot-hero-control-size);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ot-color-control-backing); color: var(--ot-color-text);
  border: 1px solid var(--ot-color-divider); border-radius: 50%;
  transition: background-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-hero__arrow:hover { background: var(--ot-color-raised); }
.ot-hero__arrow .ot-icon { width: 1.4rem; height: 1.4rem; }
.ot-hero__arrow--prev { left: calc(50% - var(--ot-slide-w) / 2 + var(--ot-space-3)); }
.ot-hero__arrow--next { right: calc(50% - var(--ot-slide-w) / 2 + var(--ot-space-3)); }
@media (max-width: 575.98px) {
  .ot-hero__arrow { display: none; }   /* phones: arrows would cover poster text; swipe and dots remain */
}

.ot-hero__dots {
  display: flex; justify-content: center; gap: var(--ot-space-1);
  margin: var(--ot-space-4) auto 0; padding: var(--ot-space-1) var(--ot-space-2); width: max-content; max-width: 100%;
  background: var(--ot-color-control-backing); border: 1px solid var(--ot-color-divider); border-radius: var(--ot-radius-pill);
  list-style: none; flex-wrap: wrap;
}
.ot-hero__dot {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ot-hero__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ot-color-text-secondary); opacity: 0.55;
  transition: transform var(--ot-dur-button) var(--ot-ease-out), opacity var(--ot-dur-button) var(--ot-ease-out), background-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-hero__dot:hover::before { opacity: 1; }
.ot-hero__dot[aria-selected="true"]::before { background: var(--ot-color-primary); opacity: 1; transform: scale(1.35); }
.ot-hero__dot:focus-visible { outline-offset: 0; }
@media (max-width: 575.98px) {
  .ot-hero__dots { gap: 2px; padding-inline: var(--ot-space-1); }
  .ot-hero__dot { width: 24px; height: 24px; }   /* 11 dots fit on one line at 390px; wraps only if more events are added */
}
.ot-hero__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Events grid ---------- */
.ot-events { padding-block: var(--ot-space-6) var(--ot-space-7); }
.ot-events__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ot-space-2) var(--ot-space-4); margin-bottom: var(--ot-space-5); }
.ot-events__head h2 { margin: 0; }
.ot-events__count { margin: 0; font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }
.ot-events__count q { quotes: "\201C" "\201D"; color: var(--ot-color-text); }

#events-grid { --bs-gutter-x: 1.5rem; }
#events-grid .grid-item { margin-bottom: var(--ot-space-5); }   /* vertical rhythm handled by margin so Isotope's fitRows sees it */
#events-grid .grid-item.mb-4 { margin-bottom: var(--ot-space-5) !important; }

/* Card: same anatomy as the live card. The OUTER .ot-card is what Isotope positions; only .ot-card__inner animates. */
.ot-card { height: 100%; }
.ot-card__inner {
  display: flex; flex-direction: column; height: 100%;
  background: var(--ot-color-card); border-radius: var(--ot-radius); overflow: hidden;
  color: var(--ot-color-text); text-decoration: none;
  box-shadow: var(--ot-shadow-card);
  transition: transform var(--ot-dur-card) var(--ot-ease-card), box-shadow var(--ot-dur-card) var(--ot-ease-card);
}
@media (hover: hover) and (pointer: fine) {
  .ot-card__inner:hover { transform: translateY(var(--ot-card-lift)); box-shadow: var(--ot-shadow-card-hover); }
}
.ot-card__inner:focus-visible { outline-offset: var(--ot-focus-offset); }
.ot-card__media { position: relative; aspect-ratio: var(--ot-hero-ratio); overflow: hidden; background: var(--ot-color-card); }  /* fixed 1210/450 box: rows align whatever the poster ratio */
.ot-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }  /* poster never cropped, never brightened */
.ot-card__divider { border-top: 1px dashed var(--ot-color-divider); margin: 0; }     /* fine dashed divider */
.ot-card__body { display: flex; gap: var(--ot-space-3); padding: var(--ot-space-4); align-items: flex-start; flex: 1 0 auto; }
.ot-card__date {
  flex: 0 0 auto; min-width: 56px; padding: var(--ot-space-2) var(--ot-space-2);
  background: var(--ot-color-primary); color: var(--ot-color-on-primary);
  border-radius: var(--ot-radius-sm); text-align: center; line-height: 1.1;
}
.ot-card__day { display: block; font-size: var(--ot-fs-date-day); font-weight: var(--ot-fw-bold); letter-spacing: var(--ot-heading-tracking); }
.ot-card__month { display: block; font-size: var(--ot-fs-date-month); font-weight: var(--ot-fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.ot-card__info { min-width: 0; flex: 1 1 auto; }
.ot-card__title {
  font-size: var(--ot-fs-card-title); line-height: var(--ot-lh-card-title); font-weight: var(--ot-fw-semibold);
  margin: 0 0 var(--ot-space-2); overflow-wrap: anywhere;   /* names wrap, never truncated */
}
.ot-card__meta { display: flex; align-items: flex-start; gap: var(--ot-space-2); margin: 0 0 var(--ot-space-1); font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); overflow-wrap: anywhere; }
.ot-card__meta .ot-icon { margin-top: 0.15em; width: 1.1em; height: 1.1em; }
.ot-card__meta time { color: var(--ot-color-text-secondary); }

/* Empty state (reads Isotope's result; shown by app.js when filteredItems is empty) */
.ot-empty {
  background: var(--ot-color-card); border: 1px dashed var(--ot-color-divider); border-radius: var(--ot-radius);
  padding: var(--ot-space-6) var(--ot-space-4); text-align: center; max-width: 560px; margin: 0 auto;
}
.ot-empty__title { font-size: var(--ot-fs-card-title); font-weight: var(--ot-fw-semibold); margin: 0 0 var(--ot-space-2); overflow-wrap: anywhere; }
.ot-empty__title q { quotes: "\201C" "\201D"; }
.ot-empty__hint { color: var(--ot-color-text-secondary); margin: 0 0 var(--ot-space-4); }

/* ---------- Footer ---------- */
.ot-footer { background: var(--ot-color-raised); border-top: 1px solid var(--ot-color-divider); padding-block: var(--ot-space-7) var(--ot-space-5); margin-top: auto; }
.ot-footer h2 { font-size: var(--ot-fs-body); font-weight: var(--ot-fw-semibold); letter-spacing: 0.02em; margin-bottom: var(--ot-space-4); }
.ot-footer__social { display: flex; gap: var(--ot-space-2); flex-wrap: wrap; }
.ot-footer__social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ot-color-card); color: var(--ot-color-text); border: 1px solid var(--ot-color-divider);
  transition: background-color var(--ot-dur-button) var(--ot-ease-out), border-color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-footer__social a:hover { background: var(--ot-color-primary); border-color: var(--ot-color-primary); color: var(--ot-color-on-primary); }
.ot-footer__social .ot-icon { width: 1.3rem; height: 1.3rem; }
.ot-footer__links { list-style: none; margin: 0; padding: 0; }
.ot-footer__links a {
  display: inline-flex; align-items: center; gap: var(--ot-space-2);
  min-height: 40px; color: var(--ot-color-text-secondary); text-decoration: none;
  transition: color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-footer__links a:hover { color: var(--ot-color-text); text-decoration: underline; }
.ot-footer__links .ot-icon { color: var(--ot-color-text-secondary); }
.ot-footer__lang { position: relative; }
.ot-footer__lang-btn {
  display: inline-flex; align-items: center; gap: var(--ot-space-2); min-height: 44px; padding: 0 var(--ot-space-3);
  background: var(--ot-color-card); color: var(--ot-color-text); border: 1px solid var(--ot-color-divider); border-radius: var(--ot-radius-sm); font: inherit; font-size: var(--ot-fs-meta);
}
.ot-footer__lang-menu {
  position: absolute; bottom: calc(100% + var(--ot-space-2)); left: 0; z-index: 20; min-width: 200px;
  background: var(--ot-color-raised); border: 1px solid var(--ot-color-divider); border-radius: var(--ot-radius); box-shadow: var(--ot-shadow-card); padding: var(--ot-space-1);
}
.ot-footer__lang-menu a { display: block; padding: var(--ot-space-2) var(--ot-space-3); border-radius: var(--ot-radius-sm); color: var(--ot-color-text); text-decoration: none; font-size: var(--ot-fs-meta); }
.ot-footer__lang-menu a:hover { background: var(--ot-color-card); }
.ot-footer__lang-menu a[aria-current="true"] { font-weight: var(--ot-fw-semibold); }
.ot-footer__bottom { border-top: 1px solid var(--ot-color-divider); margin-top: var(--ot-space-6); padding-top: var(--ot-space-5); text-align: center; color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); }
.ot-footer__bottom a { color: var(--ot-color-text); }

/* ---------- Utilities ---------- */
.ot-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ==========================================================================
   Event detail page
   ========================================================================== */
.ot-hero--single { padding-block: var(--ot-space-4) var(--ot-space-5); }
.ot-hero--single .ot-hero__stage { --ot-slide-w: min(100%, var(--ot-hero-max-width)); }

.ot-event__body { padding-block: var(--ot-space-4) var(--ot-space-7); }
.ot-back {
  display: inline-flex; align-items: center; gap: var(--ot-space-1); min-height: 44px;
  color: var(--ot-color-text-secondary); text-decoration: none; font-size: var(--ot-fs-meta); font-weight: var(--ot-fw-medium);
  margin-bottom: var(--ot-space-3); border-radius: var(--ot-radius-sm); padding-inline: var(--ot-space-1);
  transition: color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-back:hover { color: var(--ot-color-text); text-decoration: underline; }

/* Opaque panels: title block, About, Location */
.ot-panel {
  background: var(--ot-color-card); border-radius: var(--ot-radius); padding: var(--ot-space-5);
  box-shadow: var(--ot-shadow-card); margin-bottom: var(--ot-space-4);
}
@media (max-width: 575.98px) { .ot-panel { padding: var(--ot-space-4); } }
.ot-panel__heading { font-size: var(--ot-fs-card-title); line-height: var(--ot-lh-card-title); font-weight: var(--ot-fw-semibold); margin: 0 0 var(--ot-space-3); overflow-wrap: anywhere; }
.ot-event__title h1 { margin: 0 0 var(--ot-space-3); overflow-wrap: anywhere; }
.ot-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ot-space-2) var(--ot-space-4); margin: 0; }
.ot-event__venue { display: inline-flex; align-items: center; gap: var(--ot-space-2); color: var(--ot-color-text-secondary); font-size: var(--ot-fs-body); }
.ot-chip {
  display: inline-flex; align-items: center; gap: var(--ot-space-2);
  padding: var(--ot-space-1) var(--ot-space-3); border-radius: var(--ot-radius-sm);
  font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); font-weight: var(--ot-fw-semibold);
  background: var(--ot-color-raised); color: var(--ot-color-text);
}
.ot-chip--primary { background: var(--ot-color-primary); color: var(--ot-color-on-primary); }   /* the red date: white on red (5.53), not red text on dark */
.ot-chip time { color: inherit; }
.ot-event__address { color: var(--ot-color-text-secondary); margin: 0 0 var(--ot-space-4); overflow-wrap: anywhere; }
.ot-event__address strong { color: var(--ot-color-text); }

/* Client's About text (presentation attributes stripped by the build; words unchanged) */
.ot-prose { color: var(--ot-color-text-secondary); font-size: var(--ot-fs-body); line-height: var(--ot-lh-body); overflow-wrap: anywhere; }
.ot-prose > :last-child { margin-bottom: 0; }
.ot-prose p, .ot-prose ul, .ot-prose ol { margin: 0 0 var(--ot-space-3); }
.ot-prose h2, .ot-prose h3, .ot-prose h4, .ot-prose h5 { font-size: var(--ot-fs-body); line-height: var(--ot-lh-body); font-weight: var(--ot-fw-semibold); color: var(--ot-color-text); margin: var(--ot-space-4) 0 var(--ot-space-2); }
.ot-prose strong { color: var(--ot-color-text); font-weight: var(--ot-fw-semibold); }
.ot-prose a { color: var(--ot-color-text); }
.ot-prose img { max-width: 100%; height: auto; border-radius: var(--ot-radius-sm); }
.ot-prose:empty { display: none; }

.ot-map { width: 100%; aspect-ratio: 21 / 9; border-radius: var(--ot-radius-sm); overflow: hidden; background: var(--ot-color-raised); }
@media (max-width: 575.98px) { .ot-map { aspect-ratio: 16 / 9; } }   /* taller on phones; no min-height (with aspect-ratio it would widen the box) */
.ot-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ot-map:focus-within, .ot-map.is-focused { outline: var(--ot-focus-width) solid var(--ot-color-focus); outline-offset: var(--ot-focus-offset); }  /* .is-focused: app.js, for keyboard focus inside the cross-origin frame */

/* Booking panel: opaque surface, ticket notches at the dashed line, sticky on desktop */
.ot-booking {
  position: relative; background: var(--ot-color-card); border-radius: var(--ot-radius); padding: var(--ot-space-5);
  box-shadow: var(--ot-shadow-card);
}
@media (max-width: 575.98px) { .ot-booking { padding: var(--ot-space-4); } }
@media (min-width: 992px) {
  .ot-booking {
    position: sticky; top: calc(var(--ot-header-actual, var(--ot-header-height-compact)) + var(--ot-space-4));
    max-height: calc(100vh - var(--ot-header-actual, var(--ot-header-height-compact)) - var(--ot-space-6));
    overflow-y: auto;   /* at 200 % text zoom the panel can be taller than the viewport: it scrolls inside, Book Now stays reachable */
  }
}
.ot-booking__notice {
  background: var(--ot-color-info-bg); color: var(--ot-color-info-text);
  border-radius: var(--ot-radius-sm); padding: var(--ot-space-3) var(--ot-space-4);
  font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta);
}
.ot-booking__notch { position: relative; height: 0; border-top: 1px dashed var(--ot-color-divider); margin: var(--ot-space-5) calc(-1 * var(--ot-space-5)); }
@media (max-width: 575.98px) { .ot-booking__notch { margin-inline: calc(-1 * var(--ot-space-4)); } }
.ot-booking__notch::before, .ot-booking__notch::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ot-color-page);                     /* cut-outs: the page shows through */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
}
.ot-booking__notch::before { left: -12px; }
.ot-booking__notch::after { right: -12px; }
.ot-booking__heading { font-size: var(--ot-fs-h2); line-height: var(--ot-lh-h2); font-weight: var(--ot-fw-semibold); margin: 0 0 var(--ot-space-3); border-radius: var(--ot-radius-sm); }
.ot-booking__label { color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); margin: 0 0 var(--ot-space-2); }
.ot-booking__table {
  --bs-table-bg: transparent; --bs-table-color: var(--ot-color-text); --bs-table-border-color: var(--ot-color-divider);
  margin-bottom: var(--ot-space-4); font-size: var(--ot-fs-body);
}
.ot-booking__table th, .ot-booking__table td { padding: var(--ot-space-2) var(--ot-space-1); vertical-align: middle; border-bottom: 1px solid var(--ot-color-divider); }
.ot-booking__table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ot-color-text-secondary); font-weight: var(--ot-fw-medium); }
.ot-booking__table th[scope="row"] { font-weight: var(--ot-fw-semibold); overflow-wrap: break-word; }
.ot-booking__table td { text-align: right; white-space: nowrap; font-weight: var(--ot-fw-semibold); }
.ot-booking__table thead th:not(:first-child) { text-align: right; }
.ot-booking__table tbody tr:last-child th, .ot-booking__table tbody tr:last-child td { border-bottom: 0; }
.ot-booking__cta { width: 100%; }

/* Mobile sticky bar (< 992px); the body reserves its measured height (app.js sets --ot-stickybar-height) */
.ot-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ot-space-3);
  min-height: 72px; padding: var(--ot-space-3) var(--ot-gutter);
  padding-bottom: calc(var(--ot-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--ot-color-raised); border-top: 1px solid var(--ot-color-divider);
  box-shadow: 0 -8px 24px var(--ot-color-shadow);
}
.ot-stickybar__info { margin: 0; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.ot-stickybar__name { color: var(--ot-color-text); font-size: var(--ot-fs-body); font-weight: var(--ot-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* the one place a name may truncate */
.ot-stickybar__date { color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-stickybar__date time { color: inherit; }
.ot-stickybar__btn { flex: 0 0 auto; min-width: min(140px, 40%); }
body.ot-has-stickybar { padding-bottom: var(--ot-stickybar-height, 72px); }
@media (min-width: 992px) {
  .ot-stickybar { display: none; }
  body.ot-has-stickybar { padding-bottom: 0; }
}

/* ==========================================================================
   FAQ pages and Search page
   ========================================================================== */
.ot-page { padding-block: var(--ot-space-6) var(--ot-space-8); }
.ot-page--narrow { max-width: 920px; }
.ot-page__header { margin-bottom: var(--ot-space-6); }
.ot-page__header h1 { margin: 0 0 var(--ot-space-2); overflow-wrap: anywhere; }
.ot-page__kicker { margin: 0 0 var(--ot-space-2); color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--ot-fw-medium); }
.ot-page__lead { margin: 0; color: var(--ot-color-text-secondary); }

/* FAQ category cards */
.ot-faq-cats { list-style: none; padding: 0; margin-block: 0; }   /* keep .row's negative side margins so card edges align with the heading */
.ot-faq-cat {
  display: flex; flex-direction: column; gap: var(--ot-space-2); height: 100%;
  padding: var(--ot-space-5); background: var(--ot-color-card); border-radius: var(--ot-radius);
  box-shadow: var(--ot-shadow-card); color: var(--ot-color-text); text-decoration: none;
  transition: transform var(--ot-dur-card) var(--ot-ease-card), box-shadow var(--ot-dur-card) var(--ot-ease-card);
}
@media (hover: hover) and (pointer: fine) { .ot-faq-cat:hover { transform: translateY(var(--ot-card-lift)); box-shadow: var(--ot-shadow-card-hover); } }
.ot-faq-cat__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ot-radius-sm); background: var(--ot-color-primary); color: var(--ot-color-on-primary); margin-bottom: var(--ot-space-2); }
.ot-faq-cat__icon .ot-icon { width: 1.5rem; height: 1.5rem; }
.ot-faq-cat__title { font-size: var(--ot-fs-card-title); line-height: var(--ot-lh-card-title); font-weight: var(--ot-fw-semibold); letter-spacing: var(--ot-heading-tracking); }
.ot-faq-cat__count { color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); }

/* Accordion (Bootstrap) themed through its variables; chevron icons drawn in the text colour */
.ot-accordion {
  --bs-accordion-bg: var(--ot-color-card);
  --bs-accordion-color: var(--ot-color-text);
  --bs-accordion-border-color: var(--ot-color-divider);
  --bs-accordion-border-radius: var(--ot-radius);
  --bs-accordion-inner-border-radius: calc(var(--ot-radius) - 1px);
  --bs-accordion-btn-color: var(--ot-color-text);
  --bs-accordion-btn-bg: var(--ot-color-card);
  --bs-accordion-active-color: var(--ot-color-text);
  --bs-accordion-active-bg: var(--ot-color-raised);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 1.1rem;
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F4F5F7'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F4F5F7'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-transition: color var(--ot-dur-button) var(--ot-ease-out), background-color var(--ot-dur-button) var(--ot-ease-out);
  box-shadow: var(--ot-shadow-card); border-radius: var(--ot-radius);
}
.ot-accordion .accordion-button { font-weight: var(--ot-fw-semibold); font-size: var(--ot-fs-body); line-height: var(--ot-lh-body); letter-spacing: var(--ot-heading-tracking); overflow-wrap: anywhere; }
.ot-accordion .accordion-button:not(.collapsed) { box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--ot-color-divider); }
.ot-accordion .accordion-button:focus-visible { outline: var(--ot-focus-width) solid var(--ot-color-focus); outline-offset: calc(-1 * var(--ot-focus-width)); z-index: 2; position: relative; }
.ot-accordion .accordion-body { color: var(--ot-color-text-secondary); }
.ot-accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: var(--ot-radius); border-top-right-radius: var(--ot-radius); }
@media (prefers-reduced-motion: reduce) { .ot-accordion .collapsing { transition: none; } }

/* Search page */
.ot-search--page { max-width: 640px; margin-top: var(--ot-space-4); }
.ot-search--page .ot-search__group { margin-inline: 0; max-width: none; }
.ot-page__header h1 q { quotes: "\201C" "\201D"; }
.ot-events--search { padding-top: 0; }

/* ---------- Step 4: <picture> wrappers, footer preview line, 404 ---------- */
.ot-hero picture, .ot-card__media picture { display: contents; }
.ot-footer__preview { margin-top: var(--ot-space-2); font-size: var(--ot-fs-meta); color: var(--ot-color-text-secondary); }
.ot-footer__preview a { color: var(--ot-color-text-secondary); }
.ot-404__actions { display: flex; flex-wrap: wrap; gap: var(--ot-space-3); }

/* ==========================================================================
   Step 4b: seating-map concept page (concepts/seating-appel.html). Sample layout only; reuses panel, booking and chip components.
   ========================================================================== */
/* Concept label: big on the page, compact in the summary */
.ot-concept {
  background: var(--ot-color-concept-bg); color: var(--ot-color-concept-text);
  border: 1px solid var(--ot-color-concept-border); border-left-width: 6px; border-radius: var(--ot-radius);
  padding: var(--ot-space-4) var(--ot-space-5); margin-bottom: var(--ot-space-4);
}
@media (max-width: 575.98px) { .ot-concept { padding: var(--ot-space-3) var(--ot-space-4); } }
.ot-concept__label { margin: 0 0 var(--ot-space-1); font-size: var(--ot-fs-card-title); line-height: var(--ot-lh-card-title); font-weight: var(--ot-fw-bold); letter-spacing: var(--ot-heading-tracking); }
.ot-concept__text { margin: 0; font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); }
.ot-concept--compact { margin: 0; padding: var(--ot-space-3) var(--ot-space-4); border-left-width: 4px; border-radius: var(--ot-radius-sm); font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); font-weight: var(--ot-fw-semibold); }

/* Map panel */
.ot-seatmap__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ot-space-2) var(--ot-space-4); margin-bottom: var(--ot-space-3); }
.ot-seatmap__head .ot-panel__heading { margin: 0; }
.ot-seatmap__zoom { display: inline-flex; align-items: center; gap: var(--ot-space-1); background: var(--ot-color-raised); border: 1px solid var(--ot-color-input-border); border-radius: var(--ot-radius-sm); padding: 2px; }
.ot-seatmap__zoombtn, .ot-stepper__btn { font-size: var(--ot-fs-card-title); font-weight: var(--ot-fw-semibold); line-height: 1; }
.ot-seatmap__zoombtn[aria-disabled="true"], .ot-stepper__btn[aria-disabled="true"] { color: var(--ot-color-input-placeholder); cursor: not-allowed; background: transparent; }
.ot-seatmap__zoomlevel { min-width: 3.5em; text-align: center; font-size: var(--ot-fs-meta); color: var(--ot-color-text-secondary); font-variant-numeric: tabular-nums; }
.ot-seatmap__help { margin: 0 0 var(--ot-space-3); font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }

/* Legend */
.ot-legend { list-style: none; margin: 0 0 var(--ot-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--ot-space-2) var(--ot-space-5); font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }
.ot-legend li { display: inline-flex; align-items: center; gap: var(--ot-space-2); }
.ot-legend__swatch { position: relative; width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; }
.ot-legend__swatch--available { background: var(--ot-color-seat-available); }
.ot-legend__swatch--selected { background: var(--ot-color-seat-selected); box-shadow: inset 0 0 0 2px var(--ot-color-seat-selected-mark); }
.ot-legend__swatch--selected::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 10px; border: solid var(--ot-color-seat-selected-mark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ot-legend__swatch--unavailable { background: var(--ot-color-seat-unavailable); }
.ot-legend__swatch--unavailable::before, .ot-legend__swatch--unavailable::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 2px; background: var(--ot-color-seat-unavailable-mark); transform: rotate(45deg); }
.ot-legend__swatch--unavailable::after { transform: rotate(-45deg); }
.ot-legend__swatch--standing { background: var(--ot-color-standing-fill); border: 2px dashed var(--ot-color-standing); }

/* Scroll box + SVG (the width follows the zoom level; the box scrolls sideways) */
.ot-seatmap__scroll { overflow-x: auto; overflow-y: hidden; background: var(--ot-color-page); border: 1px solid var(--ot-color-divider); border-radius: var(--ot-radius-sm); padding: var(--ot-space-2); overscroll-behavior-x: contain; }
.ot-seatmap__svg { display: block; width: calc(var(--ot-seatmap-zoom, 1) * 100%); max-width: none; height: auto; font-family: var(--ot-font-family); }
.ot-seatmap__stage { fill: var(--ot-color-stage); }
.ot-seatmap__stage-label { fill: var(--ot-color-text); font-size: 18px; font-weight: var(--ot-fw-bold); letter-spacing: 0.3em; text-anchor: middle; dominant-baseline: central; }
.ot-seatmap__standing { fill: var(--ot-color-standing-fill); stroke: var(--ot-color-standing); stroke-width: 2; stroke-dasharray: 8 6; }
.ot-seatmap__area-label { fill: var(--ot-color-text); font-size: 18px; font-weight: var(--ot-fw-bold); letter-spacing: 0.12em; text-anchor: middle; dominant-baseline: central; }
.ot-seatmap__area-sub { fill: var(--ot-color-text-secondary); font-size: 14px; text-anchor: middle; dominant-baseline: central; }
.ot-seatmap__row-label { fill: var(--ot-color-text-secondary); font-size: 14px; font-weight: var(--ot-fw-semibold); text-anchor: middle; dominant-baseline: central; }
.ot-seatmap__aisle-label { fill: var(--ot-color-input-placeholder); font-size: 11px; letter-spacing: 0.2em; text-anchor: middle; dominant-baseline: central; writing-mode: vertical-rl; }

/* Seats: shape + mark (check or X) + focus ring. Colour is never the only signal: selected has a check, unavailable an X. */
.ot-seat { cursor: pointer; outline: none; }
.ot-seat:focus, .ot-seat:focus-visible { outline: none; }
.ot-seat__shape { fill: var(--ot-color-seat-available); stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill var(--ot-dur-button) var(--ot-ease-out), stroke var(--ot-dur-button) var(--ot-ease-out); }
.ot-seat__mark { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ot-seat__check { stroke: var(--ot-color-seat-selected-mark); opacity: 0; }
.ot-seat__ring { fill: none; stroke: transparent; stroke-width: var(--ot-seat-focus-width); vector-effect: non-scaling-stroke; }
@media (hover: hover) and (pointer: fine) {
  .ot-seat:not(.is-unavailable):hover .ot-seat__shape { stroke: var(--ot-color-seat-hover-stroke); }
}
.ot-seat[aria-checked="true"] .ot-seat__shape { fill: var(--ot-color-seat-selected); stroke: var(--ot-color-seat-selected-mark); }
.ot-seat[aria-checked="true"] .ot-seat__check { opacity: 1; }
.ot-seat.is-unavailable { cursor: not-allowed; }
.ot-seat.is-unavailable .ot-seat__shape { fill: var(--ot-color-seat-unavailable); }
.ot-seat.is-unavailable .ot-seat__mark { stroke: var(--ot-color-seat-unavailable-mark); }
.ot-seat:focus-visible .ot-seat__ring { stroke: var(--ot-color-focus); }

/* Standing quantity */
.ot-standing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ot-space-3) var(--ot-space-4); margin-top: var(--ot-space-4); padding: var(--ot-space-3) var(--ot-space-4); border: 2px dashed var(--ot-color-standing); border-radius: var(--ot-radius-sm); background: var(--ot-color-standing-fill); }
.ot-standing__info { min-width: 0; flex: 1 1 14rem; }
.ot-standing__title { margin: 0; font-weight: var(--ot-fw-semibold); }
.ot-standing__meta { margin: 0; font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }
.ot-stepper { display: inline-flex; align-items: center; gap: var(--ot-space-1); background: var(--ot-color-raised); border: 1px solid var(--ot-color-input-border); border-radius: var(--ot-radius-sm); padding: 2px; }
.ot-stepper__value { min-width: 2.5em; text-align: center; font-weight: var(--ot-fw-semibold); font-variant-numeric: tabular-nums; }

/* Summary (booking panel component) */
.ot-summary__empty { color: var(--ot-color-text-secondary); margin: 0 0 var(--ot-space-4); }
.ot-summary__seats { margin-bottom: var(--ot-space-3); }
.ot-summary__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ot-space-2); }
.ot-seatchip { border: 1px solid var(--ot-color-input-border); cursor: pointer; min-height: 32px; }
.ot-seatchip:hover { border-color: var(--ot-color-text-secondary); }
.ot-seatchip__x { font-size: 1.1em; line-height: 1; color: var(--ot-color-text-secondary); }
.ot-summary__table td { white-space: nowrap; }
.ot-summary__table tfoot th, .ot-summary__table tfoot td { border-bottom: 0; border-top: 1px solid var(--ot-color-divider); font-weight: var(--ot-fw-bold); padding-top: var(--ot-space-3); }
.ot-summary__table tbody tr:last-child th, .ot-summary__table tbody tr:last-child td { border-bottom: 1px solid var(--ot-color-divider); }
.ot-summary__limit { margin: 0 0 var(--ot-space-3); color: var(--ot-color-concept-text); font-size: var(--ot-fs-meta); font-weight: var(--ot-fw-semibold); }
.ot-summary__clear { width: 100%; margin-top: var(--ot-space-2); }
.ot-summary__note { margin: var(--ot-space-3) 0 0; font-size: var(--ot-fs-meta); line-height: var(--ot-lh-meta); color: var(--ot-color-text-secondary); }

/* Secondary link from the Appel event page booking panel */
.ot-booking__concept {
  display: flex; align-items: center; justify-content: center; gap: var(--ot-space-2); min-height: 44px; margin-top: var(--ot-space-3);
  color: var(--ot-color-text-secondary); font-size: var(--ot-fs-meta); font-weight: var(--ot-fw-medium); text-decoration: underline; text-underline-offset: 0.2em;
  border-radius: var(--ot-radius-sm); transition: color var(--ot-dur-button) var(--ot-ease-out);
}
.ot-booking__concept:hover { color: var(--ot-color-text); }