:root { --od-bg:#011127; --od-text:#f4f8fc; --od-muted:#9aa9b9; --od-line:rgba(255,255,255,.16); --od-orange:#ff7c22; }
.original-detail-body { margin:0; min-height:100vh; background:var(--od-bg); color:var(--od-text); font-family:Inter,Arial,sans-serif; }
.original-detail-body * { box-sizing:border-box; }.original-detail-body a { color:inherit; text-decoration:none; }.original-detail-body img { max-width:100%; display:block; }
.od-page { min-height:100vh; background:#011127; }.od-topbar { max-width:1420px; min-height:88px; margin:auto; padding:18px 34px; display:flex; align-items:center; justify-content:space-between; }.od-top-actions { display:flex; gap:12px; }
.od-round-button,.od-icon-button { width:42px; height:42px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:grid; place-items:center; background:rgba(18,44,70,.65); color:#fff; cursor:pointer; transition:transform .18s ease,background .18s ease; }.od-round-button:hover,.od-icon-button:hover { transform:translateY(-2px); background:#173a5d; }.od-back-button { font-size:35px; line-height:1; padding-bottom:5px; }.od-icon-button { font-size:19px; }
.od-container { max-width:1420px; margin:auto; padding:12px 34px 86px; }.od-layout { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:42px; align-items:start; }.od-cover-frame { min-height:0; height:auto; max-height:none; display:flex; justify-content:center; align-items:center; overflow:hidden; background:transparent; box-shadow:none; border:0; border-radius:22px; }.od-cover-frame img { display:block; width:82%; max-width:82%; height:auto; min-height:0; max-height:none; object-fit:contain; object-position:center center; border-radius:22px; margin:0 auto; }.od-cover-empty { min-height:580px; display:grid; place-items:center; color:var(--od-muted); background:linear-gradient(135deg,#0c2540,#173f62); border-radius:22px; }
.od-content-column { padding-top:2px; }.od-producer { display:inline-flex; align-items:center; gap:8px; color:#dce9f4; font-size:14px; margin:0 0 12px; }.od-producer img { width:29px; height:29px; border-radius:50%; object-fit:contain; background:#fff; }.od-producer:hover span { text-decoration:underline; }.od-content-column h1 { max-width:660px; margin:0; color:#fff; font-size:clamp(28px,3vw,43px); font-weight:750; line-height:1.14; letter-spacing:-.025em; }.od-event-meta { margin-top:18px; display:grid; gap:9px; }.od-event-meta p { margin:0; color:var(--od-muted); display:flex; align-items:center; gap:11px; font-size:15px; }.od-meta-icon { width:24px; height:25px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; color:#9ba5b7; }.od-meta-icon svg { display:block; width:24px; height:25px; }.od-calendar-icon { width:20px; flex-basis:20px; height:20px; }.od-calendar-icon svg { width:20px; height:20px; }.od-divider { height:1px; width:100%; margin:27px 0 23px; background:var(--od-line); }.od-description { max-width:700px; color:#a7b5c4; font-size:15px; line-height:1.72; white-space:normal; }.od-description p { margin:17px 0 0; }.od-description strong { color:#e8eff5; }.od-buy-wrap { position:relative; z-index:50; pointer-events:auto; }.od-buy-button { width:100%; min-height:0; margin-top:40px; border:0; border-radius:9999px; padding:16px 24px; background:#fff; color:#011127; font-size:24px; line-height:1.2; font-weight:700; text-align:center; cursor:pointer; position:relative; z-index:51; display:block; pointer-events:auto; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; transition:opacity .3s ease,background-color .3s ease,color .3s ease; }.od-buy-button:hover { opacity:1; background:#ff7c22; border-color:#ff7c22; color:#fff; }.od-buy-button:active { opacity:.88; }
.od-ticket-dialog { width:min(610px,calc(100vw - 28px)); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:0; background:#0b263f; color:#fff; box-shadow:0 26px 75px rgba(0,0,0,.48); }.od-ticket-dialog::backdrop { background:rgba(0,10,25,.78); backdrop-filter:blur(4px); }.od-ticket-dialog-inner { padding:31px; position:relative; }.od-dialog-close { position:absolute; top:14px; right:15px; width:34px; height:34px; background:transparent; color:#fff; border:0; font-size:30px; cursor:pointer; }.od-kicker { color:#ffa057; font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:800; }.od-ticket-dialog h2 { margin:5px 0 19px; font-size:28px; }.od-ticket-option { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:16px 0; border-top:1px solid var(--od-line); }.od-ticket-option small { display:block; color:#a7b5c4; margin-top:4px; }.od-ticket-note { color:#9aa9b9; margin:22px 0 0; font-size:13px; }.od-not-found { min-height:100vh; padding:35px; background:#011127; color:#fff; }.od-back-link { color:#ff9b51; display:inline-flex; align-items:center; gap:8px; font-size:17px; }.od-not-found-card { width:min(620px,100%); margin:13vh auto; padding:42px; border:1px solid var(--od-line); border-radius:18px; background:rgba(19,48,76,.6); text-align:center; }.od-not-found-card h1 { font-size:38px; }.od-not-found-card p { color:var(--od-muted); }
.od-purchase-panel { min-height:100%; display:flex; flex-direction:column; gap:16px; }.od-purchase-panel[hidden] { display:none !important; }.od-purchase-panel#tickets:target { display:flex !important; }.od-purchase-close { align-self:flex-end; display:inline-flex; gap:6px; align-items:center; border:0; color:#fff; background:transparent; font-size:13px; cursor:pointer; }.od-purchase-close:first-letter { font-size:23px; }.od-purchase-list { display:grid; gap:15px; }.od-ticket-card { min-height:88px; align-items:stretch; background:transparent; padding:0; border:0; border-radius:0; }.od-ticket-shape { min-width:0; }.od-ticket-header::after { content:""; position:absolute; left:calc(100% - 120px); bottom:-1px; width:115px; height:1px; background:#e9ebf091; border-bottom:1px solid orange; }.od-ticket-card h3 { color:#fff; margin:0; font-size:17px; }.od-ticket-card p { color:#9dabbc; font-size:12px; margin:0; }.od-ticket-description p:empty { display:none; }.od-quantity { color:#fff; white-space:nowrap; }.od-quantity button { border:0; cursor:pointer; padding:0; }.od-quantity button:disabled { opacity:.4; cursor:not-allowed; }.od-quantity output { min-width:28px; text-align:center; }.od-continue-button { margin-top:auto; min-height:55px; border:0; border-radius:999px; background:#fff; color:#07172c; font-size:19px; font-weight:800; cursor:pointer; }.od-continue-button:disabled { background:#526173; color:#1f2a36; cursor:not-allowed; }.od-topbar .od-round-button,.od-topbar .od-icon-button { border:0; background-color:rgba(167,167,167,.1); color:#fff; }.od-topbar .od-icon-button { padding:0; cursor:pointer; }.od-topbar .od-icon-button:hover path { fill:#ff8a3c; stroke:#ff8a3c; }
[dir="rtl"] .od-topbar,[dir="rtl"] .od-layout,[dir="rtl"] .od-event-meta p,[dir="rtl"] .od-producer,[dir="rtl"] .od-ticket-option { direction:rtl; }.original-detail-body.rtl { text-align:right; }
@media (max-width:900px) { .od-topbar { min-height:68px; padding:13px 18px; }.od-container { padding:6px 18px 48px; }.od-layout { grid-template-columns:1fr; gap:25px; }.od-cover-frame { min-height:0; height:auto; max-height:none; aspect-ratio:auto; background:transparent; border-radius:18px; }.od-cover-frame img { width:88%; max-width:88%; height:auto; min-height:0; max-height:none; object-fit:contain; object-position:center center; border-radius:18px; }.od-content-column h1 { font-size:30px; }.od-buy-button { min-height:56px; font-size:18px; margin-top:26px; } }
@media (max-width:480px) { .od-topbar { padding-inline:14px; }.od-container { padding-inline:14px; }.od-round-button,.od-icon-button { width:38px; height:38px; }.od-content-column h1 { font-size:26px; }.od-description { font-size:14px; }.od-ticket-dialog-inner { padding:25px 20px; }.od-ticket-option { align-items:flex-start; flex-direction:column; gap:5px; } }

/* Seats.io theatre plan */
.od-theatre-purchase .theatre-map { width: 100%; min-height: 560px; height: min(72vh, 760px); background: #fff; border-radius: 16px; overflow: hidden; position: relative; }
.od-theatre-purchase .theatre-map iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }
.od-theatre-purchase .od-ticket-note { padding: 24px; color: #68788a; }
@media (max-width: 700px) { .od-theatre-purchase .theatre-map { min-height: 480px; height: 72vh; } }

/* Mobile touch hardening for Acheter via plan */
.od-buy-wrap { position: relative; z-index: 1000; isolation: isolate; pointer-events: auto; }
.od-buy-button { display:block; align-items:initial; justify-content:initial; width:100%; min-height:0; font-family:inherit; -webkit-appearance:none; appearance:none; touch-action:manipulation; pointer-events:auto; cursor:pointer; }
.od-buy-button:focus-visible { outline: 3px solid #ff9b51; outline-offset: 4px; }
@media (max-width: 900px) {
  .od-buy-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; padding: 10px 18px max(10px, env(safe-area-inset-bottom)); background: var(--od-bg); box-shadow: 0 -6px 18px rgba(0,0,0,.28); }
  .od-buy-button { min-height: 0; padding: 16px 24px; font-size: 24px; margin-top: 0; }
  .od-container { padding-bottom: 120px; }
}
@media (hover: none) and (pointer: coarse) {
  .od-buy-button { min-height: 0; transform: translateZ(0); }
  .od-buy-button:active { opacity: .82; }
}

/* Seats.io original integration: reserve a real viewport on mobile. */
.od-theatre-purchase .theatre-map { width: 100%; min-height: 460px; height: min(72vh, 760px); overflow: hidden; position: relative; }
.od-theatre-purchase .theatre-map iframe { width: 100% !important; height: 100% !important; min-height: 100% !important; border: 0; display: block; }
@media (max-width: 700px) { .od-theatre-purchase .theatre-map { min-height: 500px; height: 70vh; } }

/* Theatre-only layout: hide event artwork and center the seating plan. */
.od-theatre-page .od-original-slick { display: none !important; }
.od-theatre-page .original-detail-grid { display: block !important; }
.od-theatre-page .od-original-content { width: min(1180px, 100%); max-width: 1180px; margin-inline: auto; }
.od-theatre-page .od-theatre-purchase { width: 100%; min-height: calc(100vh - 150px); }
.od-theatre-page .od-theatre-purchase .theatre-map { width: min(1180px, 100%); height: min(78vh, 900px); min-height: 520px; margin-inline: auto; }
.od-theatre-page .od-theatre-purchase .theatre-map iframe { width: 100% !important; height: 100% !important; min-height: 100% !important; }
.od-theatre-page .od-theatre-purchase .theatre-selection { text-align: center; margin: 0; }
.od-theatre-page .od-theatre-purchase .od-continue-button { width: min(1180px, 100%); margin-inline: auto; position: sticky; bottom: 12px; z-index: 20; }
@media (max-width: 700px) {
  .od-theatre-page .od-container { max-width: none; padding-inline: 12px; }
  .od-theatre-page .od-original-content { width: 100%; }
  .od-theatre-page .od-theatre-purchase { min-height: calc(100vh - 90px); }
  .od-theatre-page .od-theatre-purchase .theatre-map { width: 100%; height: 66vh; min-height: 500px; border-radius: 14px; }
  .od-theatre-page .od-theatre-purchase .od-continue-button { bottom: max(8px, env(safe-area-inset-bottom)); min-height: 58px; }
}

/* Fallback for pages where PHP does not add the theatre-page class. */
.od-theatre-open .od-original-slick { display: none !important; }
.od-theatre-open .original-detail-grid { display: block !important; }
.od-theatre-open .od-original-content { width: min(1180px, 100%); max-width: 1180px; margin-inline: auto; }
.od-theatre-open .od-theatre-purchase .theatre-map { width: min(1180px, 100%); margin-inline: auto; }


/* Overrides for the Seats.io renderer: theatre-plan.css also targets .theatre-map
   and turns the renderer iframe into one grid column, leaving the rest white. */
.od-theatre-page .od-theatre-purchase .theatre-map,
.od-theatre-open .od-theatre-purchase .theatre-map {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.od-theatre-page .od-theatre-purchase .theatre-map > iframe,
.od-theatre-open .od-theatre-purchase .theatre-map > iframe {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
}

/* The cover belongs on the detail view; the seat-map view gets the full viewport. */
.od-theatre-page .od-original-slick {
  display: block !important;
  width: 100%;
}

body.od-theatre-open .od-theatre-page .od-original-slick {
  display: none !important;
}


/* Do not let the legacy theatre layout create an off-canvas 100vw renderer. */
.od-theatre-page .od-theatre-purchase .theatre-map,
.od-theatre-open .od-theatre-purchase .theatre-map {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  transform: none !important;
}


/* Theatre viewport guard: keeps the renderer inside a stable, uncropped surface. */
.od-theatre-purchase .theatre-map-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 10px;
  border: 1px solid rgba(8, 31, 55, .16);
  border-radius: 18px;
  background: #f6f9fc;
  box-shadow: 0 8px 26px rgba(1, 17, 39, .12);
}

.od-theatre-purchase .theatre-map-shell .theatre-map {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  border-radius: 12px;
}

.od-theatre-purchase .theatre-map-shell .theatre-map > iframe {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
}

.od-theatre-purchase .theatre-legend {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin: 10px 2px 0;
  color: #142c45;
  font-size: 13px;
  line-height: 1.35;
}

.od-theatre-purchase .theatre-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(8, 31, 55, .12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(1, 17, 39, .08);
}

.od-theatre-purchase .theatre-legend-item strong { color: #142c45; }
.od-theatre-purchase .theatre-legend-item small { color: #65768a; }
.od-theatre-purchase .od-ticket-error { margin: 0; padding: 42px 18px; text-align: center; color: #9b2c2c; }

@media (max-width: 700px) {
  .od-theatre-purchase .theatre-map-shell {
    padding: 8px;
    border-radius: 14px;
  }

  .od-theatre-purchase .theatre-map-shell .theatre-map {
    height: clamp(560px, calc(100svh - 260px), 860px) !important;
    min-height: 560px !important;
    border-radius: 10px;
  }

  .od-theatre-purchase .theatre-legend {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 2px 0 4px;
    scrollbar-width: thin;
  }

  .od-theatre-purchase .theatre-legend-item {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
  }

  .od-theatre-purchase .theatre-selection {
    margin-bottom: 18px;
  }
}