/* ==============================================================================
   ANIJAM — styles for the Билети / Tickets page.

   These used to live in a <style> block inside tickets.html AND an identical
   one inside en/tickets.html. Two copies of 550 lines that had to be edited in
   lockstep forever: the kind of arrangement that stays correct right up until
   somebody is in a hurry. One file, linked from both pages.

   Everything here is page-scoped on purpose — nothing on the home or lineup
   pages uses it, so it stays out of anijam.css.
   ============================================================================== */

/* ================= page-local: ticket, programme, map, policy, accordion ================= */

/* ---- THE TICKET ---- */
.ticket-wrap {
  border-radius: var(--radius-lg);
  position: relative;
  filter: drop-shadow(0 40px 80px rgba(123, 63, 140, 0.45));
}
.ticket-wrap::before { border-radius: var(--radius-lg); }

/* Геометрия: --seam е ЕДИНСТВЕНИЯТ източник за мястото на скъсването.
   И перфорацията (.ticket::before), и изрязаните полукръгове (mask) четат него,
   затова не могат да се разминат. Преди: изрезите бяха заковани на 64%, а истинският
   шев между .ticket__main и .ticket__stub е според съдържанието — на 390px беше
   на 72.3%, т.е. изрезите висяха ~90px по-нагоре, върху бутона. */
.ticket {
  --stub-h: 300px;                       /* височина на талона при вертикална подредба */
  --seam: calc(100% - var(--stub-h));
  --nx1: 0%;   --ny1: var(--seam);
  --nx2: 100%; --ny2: var(--seam);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr var(--stub-h); /* талонът получава точно --stub-h → шевът Е на --seam */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(168, 85, 196, 0.42), transparent 62%),
    linear-gradient(155deg, rgba(255, 246, 234, 0.09), rgba(61, 26, 71, 0.75));
  border: 1px solid rgba(224, 153, 90, 0.38);
  -webkit-mask-image:
    radial-gradient(circle 16px at var(--nx1) var(--ny1), transparent 16px, #000 16.5px),
    radial-gradient(circle 16px at var(--nx2) var(--ny2), transparent 16px, #000 16.5px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 16px at var(--nx1) var(--ny1), transparent 16px, #000 16.5px),
    radial-gradient(circle 16px at var(--nx2) var(--ny2), transparent 16px, #000 16.5px);
  mask-composite: intersect;
}
@media (min-width: 900px) {
  .ticket {
    --seam: 68%;                         /* = 100% − 32%, ширината на талона */
    grid-template-columns: 1fr 32%;
    grid-template-rows: 1fr;
    --nx1: var(--seam); --ny1: 0%;
    --nx2: var(--seam); --ny2: 100%;
  }
}

/* Перфорацията. Беше дефинирана като .ticket__perf, но този елемент никога не е
   съществувал в HTML-а — билетът имаше изрези без линия между тях. Сега е
   псевдоелемент, така че не изисква маркъп в двете езикови версии. */
.ticket::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: var(--seam);
  z-index: 2;
  pointer-events: none;
  border-top: 2px dashed rgba(255, 246, 234, 0.3);
}
@media (min-width: 900px) {
  .ticket::before {
    left: var(--seam); right: auto;
    top: 0; bottom: 0;
    border-top: 0;
    border-left: 2px dashed rgba(255, 246, 234, 0.3);
  }
}
/* faint printed grain over the whole ticket */
.ticket::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.35;
}

.ticket__main { padding: clamp(1.75rem, 4vw, 3.25rem); position: relative; z-index: 3; }
.ticket__stub {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr auto; /* шапка · цена (центрирана в остатъка) · баркод */
  align-items: center;
  gap: 12px;
  background: rgba(24, 12, 29, 0.4);
  text-align: center;
}

/* Валутата е горен индекс (baseline подравняване я слепваше с петицата) */
.megaprice {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.megaprice__num { font-size: clamp(4.5rem, 10vw, 7.5rem); }
.megaprice__cur {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  margin-top: 0.3em;
  color: var(--crust);
}

.stub-rot {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 246, 234, 0.55);
}

.ticket-line {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 246, 234, 0.12);
}
.ticket-line:last-of-type { border-bottom: 0; }
.ticket-line dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--crust);
}
.ticket-line dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: -0.02em;
}
.ticket-line dd small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0;
  color: var(--cream-dim);
  margin-top: 2px;
}

/* ---- programme cards ---- */
.prog {
  position: relative;
  padding: 26px 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 246, 234, 0.1);
  background: linear-gradient(160deg, rgba(255, 246, 234, 0.06), rgba(255, 246, 234, 0.015));
  transition: transform 0.5s var(--ease-out-expo), border-color 0.4s ease, background-color 0.4s ease;
  overflow: hidden;
}
.prog:hover { transform: translateY(-6px); border-color: rgba(224, 153, 90, 0.45); }
.prog__i {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(255, 246, 234, 0.07);
  pointer-events: none;
}
.prog__t { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; margin: 12px 0 6px; }
.prog__d { margin: 0; font-size: 0.88rem; color: var(--cream-dim); }
.prog__time {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--crust);
}
.prog--night {
  background: linear-gradient(160deg, rgba(168, 85, 196, 0.3), rgba(61, 26, 71, 0.5));
  border-color: rgba(224, 153, 90, 0.34);
}

/* ---- map ---- */
.map-shell {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(224, 153, 90, 0.22);
  background: var(--jam-ink);
  transition: border-color 0.3s var(--ease-out-expo);
}
.map-shell:hover { border-color: rgba(224, 153, 90, 0.55); }
.map-shell svg { display: block; width: 100%; height: auto; }
.map-shell__cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  border-radius: 999px;
  border: 1px solid rgba(224, 153, 90, 0.4);
  background: rgba(24, 12, 29, 0.9);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
}
.map-shell:hover .map-shell__cta { background: var(--crust); color: var(--ink); border-color: var(--crust); }
.map-shell__arrow { transition: transform 0.3s var(--ease-out-expo); }
.map-shell:hover .map-shell__arrow { transform: translate(2px, -2px); }
.map-shell:focus-visible { outline: 2px solid var(--crust); outline-offset: 3px; }
.map-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  fill: rgba(255, 246, 234, 0.5);
  text-transform: uppercase;
}
.map-label--road { font-size: 9.5px; letter-spacing: 0.2em; fill: rgba(255, 246, 234, 0.34); }
.map-label--hot { fill: var(--crust); }
@keyframes ping-out { 0% { r: 11; opacity: 0.9; } 100% { r: 52; opacity: 0; } }
@keyframes dash-run { to { stroke-dashoffset: -160; } }
.map-ping { animation: ping-out 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.map-ping--b { animation-delay: 1.4s; }
.map-route { stroke-dasharray: 7 9; animation: dash-run 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .map-ping, .map-route { animation: none; } }

/* ---- policy ---- */
.rule {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 246, 234, 0.1);
}
.rule:last-child { border-bottom: 0; }
.rule__no {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crust);
  padding-top: 5px;
}
.rule__t { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; margin: 0 0 6px; }
.rule__d { margin: 0; color: var(--cream-dim); font-size: 0.95rem; }

/* ---- accordion ---- */
.acc { border-bottom: 1px solid rgba(255, 246, 234, 0.12); transition: background-color 0.4s ease; }
.acc[open] { background: rgba(255, 246, 234, 0.03); }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 22px 26px 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  transition: color 0.3s ease, padding-left 0.4s var(--ease-out-expo);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--crust); padding-left: 14px; }
.acc summary:focus-visible { outline: 2px solid var(--crust); outline-offset: 4px; border-radius: 8px; }
.acc__mark {
  flex: 0 0 34px;
  height: 34px;
  margin-left: auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 246, 234, 0.26);
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.5s var(--ease-back), border-color 0.4s ease, background-color 0.4s ease;
}
.acc__mark::before, .acc__mark::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.45s var(--ease-out-expo), opacity 0.3s ease;
}
.acc__mark::before { width: 13px; height: 1.5px; }
.acc__mark::after  { width: 1.5px; height: 13px; }
.acc[open] .acc__mark { transform: rotate(135deg); border-color: var(--crust); background: rgba(224, 153, 90, 0.16); }
.acc[open] .acc__mark::after { opacity: 0; }
.acc__body { overflow: hidden; }
.acc__body > div { padding: 0 60px 28px 4px; max-width: 62ch; color: var(--cream-dim); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* skip link */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--jam-ink);
  color: var(--cream);
  border: 1px solid var(--crust);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---- reservation: capacity pill ---- */
.cap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(224, 153, 90, 0.35);
  background: rgba(224, 153, 90, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.cap__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--crust);
  box-shadow: 0 0 0 0 rgba(224, 153, 90, 0.5);
  animation: cap-pulse 2.4s ease-out infinite;
}
.cap--full .cap__dot { background: #FF6B6B; animation: none; }
.cap__n { color: var(--crust); font-weight: 700; }
@keyframes cap-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 153, 90, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 153, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 153, 90, 0); }
}
@media (prefers-reduced-motion: reduce) { .cap__dot { animation: none; } }

/* ---- reservation: consent checkbox (ported from contact) ---- */
.check { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.check__box {
  position: relative; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 7px; border: 1.5px solid rgba(255, 246, 234, 0.3);
  background: rgba(255, 246, 234, 0.04);
  transition: border-color .35s ease, background-color .35s ease;
}
.check__box::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: 2px solid var(--ink); border-top: 0; border-left: 0;
  transform: rotate(42deg) scale(0); transform-origin: 50% 50%;
  transition: transform .35s var(--ease-back);
}
.check:hover .check__box { border-color: var(--crust); }
.check input:checked ~ .check__box { background: var(--crust); border-color: var(--crust); }
.check input:checked ~ .check__box::after { transform: rotate(42deg) scale(1); }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--jam-bright); outline-offset: 3px; }
.check__text { font-size: .9rem; color: var(--cream-dim); line-height: 1.5; }
.field.has-error .check__box { border-color: #FF6B6B; }
/* Policy link sits OUTSIDE the <label> on purpose — inside it, a click would
   both follow the link and toggle the checkbox. Indent matches the box + gap. */
.check__legal { margin: 9px 0 0; padding-left: 36px; font-size: .82rem; line-height: 1.5; color: rgba(255, 246, 234, .6); }
.check__legal a { color: var(--crust); }

/* ---- reservation: submit loading (ported from contact) ---- */
.btn[data-state="loading"] { pointer-events: none; }
.btn[data-state="loading"] .btn__label { opacity: .35; }
.btn__spin { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; }
.btn[data-state="loading"] .btn__spin { display: grid; }
.btn__spin i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cream); margin: 0 4px;
  animation: res-pulse 1.05s ease-in-out infinite;
}
.btn__spin i:nth-child(2) { animation-delay: .14s; }
.btn__spin i:nth-child(3) { animation-delay: .28s; }
@keyframes res-pulse {
  0%, 80%, 100% { transform: scale(.45); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ---- reservation: success / waitlist reveal ---- */
/* Form and done-card are stacked in one grid cell, so the shell always grows to
   fit whichever is taller (the done card can be tall: title + text + DEV links). */
.res-shell { position: relative; display: grid; }
.res-shell > .res-body, .res-shell > .res-done { grid-area: 1 / 1; }
.res-shell.is-sent .res-body {
  opacity: 0; transform: translateY(-18px) scale(.98); pointer-events: none; filter: blur(6px);
}
.res-body { transition: opacity .6s var(--ease-out-expo), transform .7s var(--ease-out-expo), filter .6s ease; }
.res-done {
  display: grid; place-items: center; text-align: center;
  padding-block: clamp(0.5rem, 3vw, 1.5rem);
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity .8s var(--ease-out-expo) .3s, transform .9s var(--ease-out-expo) .3s, visibility 0s .3s;
}
.res-shell.is-sent .res-done { opacity: 1; visibility: visible; transform: none; }
.res-done__ring { stroke-dasharray: 640; stroke-dashoffset: 640; }
.res-shell.is-sent .res-done__ring { animation: res-ring 1.4s var(--ease-out-expo) .3s forwards; }
@keyframes res-ring { to { stroke-dashoffset: 0; } }

/* ---- reservation: party stepper ----
   The control used to be a lone pill floating at the right edge of a 520px
   column with its question stranded on the far left — two things that had
   nothing to do with each other. Question and stepper now share ONE bordered
   row styled exactly like the inputs above, so it reads as the third field
   rather than a widget that wandered in. */
.qty {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  min-height: 52px;
  padding: 6px 8px 6px 18px;
  border: 1px solid rgba(255, 246, 234, 0.16);
  border-radius: 14px;
  background: rgba(255, 246, 234, 0.045);
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
/* Tab onto either button and the whole row lights up — it IS one control. */
.qty:focus-within {
  border-color: var(--crust);
  background: rgba(255, 246, 234, 0.075);
  box-shadow: 0 0 0 3px rgba(224, 153, 90, 0.2);
}
.qty__label { font-size: .95rem; color: var(--cream-dim); line-height: 1.4; }
.qty__ctrl { display: flex; align-items: center; gap: 2px; }
.qty__btn {
  display: grid; place-items: center;
  /* 44px is the floor for a touch target. The old buttons were 38px round —
     under the line, on the one control people tap over and over. */
  width: 44px; height: 44px;
  border-radius: 12px; border: 0;
  background: transparent; color: var(--cream);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
/* SVG, not a "−" and a "+" glyph: text signs sit on the font's baseline and
   never optically centre in a square, which is exactly the kind of half
   millimetre that makes a control look unconsidered. */
.qty__btn svg { display: block; width: 15px; height: 15px; }
/* Hover is gated on a real pointer. On a phone :hover sticks to whatever you
   tapped last, so the + button sat there highlighted after every tap — one of
   the more common tells that nobody opened the thing on a phone. */
@media (hover: hover) {
  .qty__btn:hover:not(:disabled) { background: rgba(224, 153, 90, 0.16); color: var(--crust); }
}
.qty__btn:active:not(:disabled) { background: rgba(224, 153, 90, 0.26); }
.qty__btn:focus-visible { outline: 2px solid var(--crust); outline-offset: -2px; }
.qty__btn:disabled { opacity: .26; cursor: not-allowed; }
.qty__n {
  min-width: 2.4ch; text-align: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--crust);
  font-variant-numeric: tabular-nums;   /* 1 → 2 must not shift the buttons */
}
.qty__hint { margin: 9px 0 0; font-size: .82rem; line-height: 1.5; color: rgba(255, 246, 234, 0.6); }
/* Once the question and the stepper stop sharing a line, the stepper takes one
   of its own and spreads edge to edge — thumb left, thumb right, number in the
   middle. Controls hugging the left under a full-width label read as a layout
   that gave up rather than one that was chosen. */
.qty__ctrl { margin-left: auto; }
@media (max-width: 27rem) {
  .qty { padding: 14px 12px; gap: 10px; }
  .qty__ctrl { width: 100%; margin-left: 0; justify-content: space-between; }
  .qty__n { flex: 1 1 auto; }
}

/* ---- reservation: the commitment block ----
   A form is easier to finish when it has acts instead of a stack. Above the
   rule: who you are and how many. Below it: what you agree to, the bot check,
   and the button. One hairline does most of the work of making it look
   composed rather than assembled. */
.res-commit {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 246, 234, 0.13);
}
.res-actions { margin-top: 26px; }
/* Full-bleed button on phones (the thumb target should be the whole width),
   natural width once there is room for the line of reassurance beside it. */
.res-actions .btn { width: 100%; justify-content: center; }
.res-note {
  margin: 14px 0 0;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 246, 234, .5);
}
@media (min-width: 640px) {
  .res-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
  .res-actions .btn { width: auto; }
  .res-note { margin: 0; }
}

/* ---- reservation: closed / paused notice (painted from /api/status) ---- */
.res-closed {
  padding: 26px 4px; text-align: center;
}
.res-closed p { max-width: 44ch; margin: 0 auto; color: var(--cream-dim); line-height: 1.65; }

/* Turnstile mounts here. The height is reserved up front so the button below
   doesn't jump down when the widget finally renders. */
.cf-turnstile { margin-top: 20px; min-height: 65px; }


/* ---------- venue map (SVG traced from OSM, tools/map) ---------- */
.omap{width:100%;height:auto;display:block;background:var(--jam-ink,#24102B)}
.omap-green path{fill:rgba(168,85,196,.07);stroke:none}
.omap-bld path{fill:rgba(255,246,234,.055);stroke:rgba(255,246,234,.05);stroke-width:.7}
.omap-service path{fill:none;stroke:rgba(255,246,234,.07);stroke-width:2;stroke-linecap:round}
.omap-minor path{fill:none;stroke:rgba(255,246,234,.17);stroke-width:3.4;stroke-linecap:round}
.omap-mid path{fill:none;stroke:rgba(255,246,234,.24);stroke-width:5;stroke-linecap:round}
.omap-major path{fill:none;stroke:rgba(255,246,234,.32);stroke-width:8.5;stroke-linecap:round}
.omap-buda path{fill:none;stroke:#E0995A;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(224,153,90,.45))}
.omap-lbl{font:500 18px var(--font-mono,ui-monospace,monospace);fill:rgba(255,246,234,.6);letter-spacing:.04em;paint-order:stroke;stroke:rgba(36,16,43,.85);stroke-width:4;stroke-linejoin:round}
.omap-lbl--hot{fill:#E0995A;font-weight:700}
.omap-poi{font:500 18px var(--font-body,system-ui,sans-serif);fill:rgba(255,246,234,.62);paint-order:stroke;stroke:rgba(36,16,43,.85);stroke-width:4;stroke-linejoin:round}
.omap-note{font:500 16px var(--font-mono,ui-monospace,monospace);fill:rgba(255,246,234,.5);letter-spacing:.03em;paint-order:stroke;stroke:rgba(36,16,43,.8);stroke-width:4;stroke-linejoin:round}
.omap-metro{font:700 17px var(--font-body,system-ui,sans-serif);fill:#FFF6EA}
.omap-badge{font:700 21px var(--font-display,system-ui,sans-serif);fill:#FFF6EA}
.omap-badge-sub{font:500 16px var(--font-mono,ui-monospace,monospace);fill:#E0995A;letter-spacing:.04em}
.omap-route{fill:none;stroke:#C77DDF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 14;animation:omap-dash 1.5s linear infinite}
@keyframes omap-dash{to{stroke-dashoffset:-15}}
.omap-pulse{transform-origin:740.8px 392.3px;animation:omap-pulse 2.4s ease-out infinite}
.omap-pulse--late{animation-delay:1.2s}
@keyframes omap-pulse{0%{opacity:.75;transform:scale(.4)}100%{opacity:0;transform:scale(2)}}
@media (prefers-reduced-motion:reduce){.omap-route,.omap-pulse{animation:none}.omap-route{stroke-dasharray:6 10}}
.omap-zoom,.omap-fx--zoom{display:none}
/* A phone renders this box ~360px wide. Zoom the whole scene rather than
   enlarging the type: font-size alone would overflow every textPath and clip
   the street names. */
@media (max-width:640px){
  .omap-scene{transform:scale(1.8382) translate(-278px,-196px);transform-origin:0 0}
  .omap-service path,.omap-poi--t2{display:none}
  .omap-wide,.omap-fx--wide{display:none}
  .omap-zoom,.omap-fx--zoom{display:initial}
}


/* ---------- TOUCH: UNLATCH HOVER ----------
   Same reason as section 23 of anijam.css — mobile Safari keeps :hover on the
   last thing you touched. .qty__btn above is already gated; these are the rest.
   The two that actually shift layout (.prog lifts, .acc summary slides right)
   are the visible ones, and .acc summary is a FAQ heading on this page. */
@media (hover: none) {
  .prog:hover { transform: none; border-color: rgba(255, 246, 234, 0.1); }
  .map-shell:hover { border-color: rgba(224, 153, 90, 0.22); }
  .map-shell:hover .map-shell__cta {
    background: rgba(24, 12, 29, 0.9);
    color: var(--cream);
    border-color: rgba(224, 153, 90, 0.4);
  }
  .map-shell:hover .map-shell__arrow { transform: none; }
  .acc summary:hover { color: inherit; padding-left: 4px; }
  .check:hover .check__box { border-color: rgba(255, 246, 234, 0.3); }
  /* ...but a tap on the checkbox label still deserves feedback. */
  .check:active .check__box { border-color: var(--crust); }
}