/* ==========================================================================
   main.css — shared public theme (event page, checkout/cart flow, organiser
   page, past events). Dark ground, heavy white type, one per-event accent
   colour (--accent, driven by --accent-raw set inline per event), solid pill
   primary CTA + ghost outline secondary buttons. Flips to a light theme via
   html[data-theme="light"]. Loaded after frontend.css; scoped to #event_page_wrap.
   ========================================================================== */

#event_page_wrap {
  --bg:     #000000;
  --text:   #ffffff;
  --dim:    rgba(255,255,255,.62);
  --faint:  rgba(255,255,255,.42);
  /* --accent-raw is the organiser's chosen colour (set inline per event).
     --accent is what the page actually uses; on the dark theme it's the raw
     colour, on the light theme it's auto-darkened for contrast (see below). */
  --accent-raw: #5FE3D4;   /* NEBÁL aqua */
  --accent: var(--accent-raw);
  /* Always-safe darkened accent for surfaces that render on white regardless
     of the page theme (e.g. the language-switcher menu below) — the raw
     accent can be arbitrarily light (e.g. an event with a yellow accent),
     which would be unreadable as text on a white background. */
  --accent-on-light: color-mix(in srgb, var(--accent-raw) 55%, #000);
  --line:   rgba(255,255,255,.12);
  --fill:   rgba(255,255,255,.06);
  /* Accent-tinted input/field background (used by the ticket selects and the
     whole checkout form). color-mix falls back to --fill where unsupported. */
  --field-bg: var(--fill);
  --field-bg: color-mix(in srgb, var(--accent) 10%, var(--bg));

  /* Primary buttons / stepper circles — a light pill on the dark theme */
  --btn-bg:    #ffffff;
  --btn-text:  #000000;
  --btn-hover: #e9e9e9;

  /* Inverted (light) palette — for surfaces that render on white,
     e.g. the language dropdown menu. */
  --inv-surface: #ffffff;
  --inv-text:    #1A1820;
  --inv-muted:   #5A5666;
  --inv-line:    rgba(0,0,0,.10);
  --inv-hover:   rgba(0,0,0,.06);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Subtle ground tint: the event's own accent colour mixed into the theme
     base (--bg flips black/light with the day–night switcher). Falls back to
     a flat base on browsers without color-mix(). */
  background: var(--bg);
  /* Both gradient ends MUST rest at plain var(--bg): the page edges meet the
     root canvas (html/body background, flat --bg) there, and iOS rubber-band
     overscroll reveals that canvas past either edge — a gradient that ends
     on a tint reads as a hard "cut" against it. The accent concentration
     therefore lives mid-page, not at the edges. --bg flips with the
     day/night switch, so this holds in both themes. */
  background: linear-gradient(160deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--accent) 22%, var(--bg)) 50%,
    var(--bg) 100%);
  /* `fixed` is broken on iOS Safari: it forces a repaint of the whole
     gradient on every scroll frame (visible as stutter, worse combined with
     the dynamic toolbar resizing the viewport mid-scroll), and separately
     mis-scales the accent bands against the full document instead of the
     viewport. `scroll` avoids both — sized to the wrapper, repainted once. */
  background-attachment: scroll;
  /* 100vh on iOS is measured against the viewport with the toolbar hidden,
     not the current visible area, so the ground can be taller than what's
     actually on screen and jump as the toolbar shows/hides while scrolling.
     100dvh tracks the real visible viewport; vh stays as the fallback for
     browsers without dvh support. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--text);
}

/* Near-black ground — a very subtle diagonal gradient that drifts from a
   deep-blue black into an accent-tinted black. Overrides the per-event bg. */
html, body, body.attendize { background: #000 !important; background-image: none !important; }
/* Safari 26 "Liquid Glass" tints its toolbar from html/body's own
   background-color (it ignores theme-color entirely) — so this needs to
   track the day/night toggle everywhere the toggle exists, not just default
   to black, or the toolbar stays the wrong colour after switching to light. */
html[data-theme="light"] body.attendize { background: #f5f4f0 !important; }

/* The vendor bundle (frontend.css) hardcodes `html, body { height: 100% }`,
   which locks <html> to exactly the viewport height. Every page here is
   taller than one screen, so that traps scrolling inside body as its own
   internal auto-overflow box instead of native document-level scroll —
   breaks the browser's native scroll-restoration on refresh/back (it
   restores the wrong scroller, so the page reads as stuck at one spot) and
   was also why Safari's Liquid Glass toolbar never got a clean scroll
   signal to composite through. */
html, body, body.attendize { height: auto !important; }

/* Flatten the stacked white "boxes" into one black canvas with hairlines ---- */
#event_page_wrap section.container {
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 46px 15px;
  border-bottom: 1px solid var(--line);
}
#event_page_wrap #location.container { padding: 0; }
/* The map is its own framed card and the organiser block sits before the footer,
   so drop the section hairline under both — and under whatever section sits
   directly above the map (so no divider touches the map top or bottom). */
#event_page_wrap #location.container,
#event_page_wrap #organiser.container,
#event_page_wrap #details.container,
#event_page_wrap section.container:has(+ #location.container) { border-bottom: none; }
/* Organiser page: same idea — drop the hairline under whichever section sits
   directly above the footer, so the last section blends into the transparent
   footer band instead of leaving a visible line where they meet. */
#organiser_page_wrap section.container:has(+ footer#footer) { border-bottom: none; }

/* --------------------------------------------------------------- HERO ------ */

#event_page_wrap #organiserHead {
  background: transparent;
  opacity: 1;
  color: var(--dim);
  padding: 22px 0 4px;
  line-height: 1.4;
}
#event_page_wrap #organiserHead .event_organizer b { color: var(--text); font-weight: 600; }

#event_page_wrap #intro {
  background: transparent;
  /* viewport-fit=cover draws the page under the notch/dynamic island, so
     the safe-area inset needs adding on top of the normal top padding
     (0 on devices without one, so this is a no-op elsewhere). */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 15px 40px;
  border-bottom: 1px solid var(--line);
}
#event_page_wrap #intro h1 {
  color: var(--text);
  font-weight: 900;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  margin-left: -5px;   /* optical: pull the heavy glyph edge onto the icon column */
  text-align: left;
  text-wrap: balance;
  /* A title with no break opportunity (a long emoji run, URL, or a stray
     non-breaking space) has no wrap point for text-wrap:balance to use, so it
     renders as one unbroken line and pushes #intro wider than the viewport —
     on mobile the site's overflow-x:hidden safety net just clips it invisibly,
     but above that breakpoint it's real page-level horizontal scroll. Force a
     break inside the word itself as a last resort once nothing else fits. */
  overflow-wrap: break-word;
  word-break: break-word;
}
#event_page_wrap #intro .event_venue { color: var(--dim); font-size: 15px; }
#event_page_wrap #intro .event_when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 14px;
  margin-bottom: 10px;
}
#event_page_wrap #intro .event_where {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#event_page_wrap #intro .event_when .ev-when-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
#event_page_wrap #intro .event_when .ev-when-link:hover .ev-meta { color: var(--text); }
#event_page_wrap .ev-meta {
  display: inline-flex;
  align-items: center;
  color: var(--dim);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
#event_page_wrap .ev-meta i {
  display: inline-flex;
  align-items: center;      /* centre the glyph in its box rather than stretch */
  justify-content: center;
  width: 20px;              /* fixed box so every icon + following text lines up */
  flex: 0 0 20px;
  color: var(--accent);     /* keep the aqua accent on the icons */
  font-size: 16px;
  line-height: 1;
  margin-right: 8px;
}
#event_page_wrap #intro .event_where .ev-meta {
  color: var(--dim);
  font-weight: 400;
  white-space: normal;
}
/* "All events" back link above the title — matches the header link text style
   (ev-link) but rendered in the event accent colour. var(--accent) is already
   theme-aware (auto-darkened on the light theme), so contrast holds both ways. */
#event_page_wrap a.ev-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  /* Match the language switcher toggle: it sets no font of its own, so it
     renders in the inherited page font. Inherit the same weight/size/family
     here so the two top-bar controls read as one consistent set. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
#event_page_wrap a.ev-back:hover { text-decoration: underline; opacity: .85; }
/* Same arrow as the language switcher: reuse its Bootstrap .caret (a down
   triangle in the accent colour) and rotate it 90° so it points left. */
#event_page_wrap a.ev-back .caret { transform: rotate(90deg); margin: 0; }

/* Shared style for all clickable header links (location, promoter) */
#event_page_wrap #intro a.ev-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
#event_page_wrap #intro a.ev-link:hover { text-decoration: underline; }
#event_page_wrap #intro .event_promoter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6px;
}
#event_page_wrap #intro .event_promoter .ev-meta { color: var(--dim); font-weight: 400; }
#event_page_wrap #intro .event_promoter .ev-name { color: var(--dim); font-weight: 600; }

/* Category badges — pill rows below the promoter */
#event_page_wrap .event_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
#event_page_wrap .ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
#event_page_wrap .ev-badge i { color: var(--dim); font-size: 11px; line-height: 1; }
/* Cigarette glyph isn't in the icon font — draw it with a mask so it inherits
   the badge's theme-aware colour just like the real glyphs do. */
#event_page_wrap .ev-badge i.ico-cigarette {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='13'%20width='15'%20height='4'%20rx='1'/%3E%3Cline%20x1='13'%20y1='13'%20x2='13'%20y2='17'/%3E%3Cpath%20d='M4%2011c-.6-.7-.6-1.8%200-2.5'/%3E%3Cpath%20d='M7%2011c-.6-.7-.6-1.8%200-2.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='13'%20width='15'%20height='4'%20rx='1'/%3E%3Cline%20x1='13'%20y1='13'%20x2='13'%20y2='17'/%3E%3Cpath%20d='M4%2011c-.6-.7-.6-1.8%200-2.5'/%3E%3Cpath%20d='M7%2011c-.6-.7-.6-1.8%200-2.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
#event_page_wrap .ev-badge i.ico-cigarette::before { content: none; }

/* Event-list card (shared by the organiser page + the past-events upcoming
   list). Image left, event-header-style meta + tags right, full-width
   Tickets/Information links. Overrides frontend.css's fixed 120px / floats. */
#event_page_wrap .event-listing-heading {
  color: var(--text); font-weight: 500; font-size: 34px;
  letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin: 8px 0 30px;
}
#event_page_wrap .event-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; margin: 0 0 60px; padding: 0;   /* gap below the cards separates one section from the next heading */
}
#event_page_wrap .event-list > li {
  display: flex !important;
  align-items: stretch;
  height: auto !important;
  position: relative;
  flex: 1 1 500px;               /* card width is capped at 540px inline in EventCard.blade.php */
  background: var(--fill); border: 1px solid var(--line);
  border-radius: 12px; margin: 0; overflow: hidden;
  --accent: var(--accent-raw);   /* each card uses its own event's accent (inline on the <li>) */
}
html[data-theme="light"] #event_page_wrap .event-list > li {
  --accent: color-mix(in srgb, var(--accent-raw) 55%, #000);
}
/* Cover art is a fixed crop box matching the organiser's cover_image_aspect_ratio
   (1:1 by default) — the SAME crop configured on the event/customize design tab.
   The ratio and focal point arrive inline on the <img> (aspect-ratio +
   object-position); object-fit:cover zoom-crops the source into that box around
   the focal point. align-self:flex-start stops the card's flex row from
   stretching the image to the card's content height (which used to make every
   thumbnail a different, non-square ratio). Same box on every page that renders
   .event-list (organiser page, past-events). */
#event_page_wrap .event-list > li > img.eventcover {
  width: 190px !important; height: auto !important; min-height: 0 !important;
  /* Desktop (horizontal card): the image fills the card's full height so there's
     no empty gap below it, and the organiser's crop ratio is NOT applied here —
     a wide/tall ratio would leave dead space beside the info. object-fit:cover
     zoom-crops the source into the fixed-width, full-height box. */
  align-self: stretch;
  object-fit: cover; object-position: 50% 50%;
  float: none !important; border-radius: 0; flex-shrink: 0;
}

/* Past events stay dimmed (cover + text) so a finished card reads faded. */
#event_page_wrap .event-list > li.ev-past > img.eventcover { filter: grayscale(.5) brightness(.5); }
#event_page_wrap .event-list > li.ev-past > .info { filter: grayscale(.5) brightness(.5); }
/* On the open event page, dim the header (title/date/venue) of a finished event
   to the same degree as its hero and badge. */
#event_page_wrap #intro.is-past { filter: grayscale(.5) brightness(.5); }

/* Organiser footer band — a grounded block that closes the page (event page and
   past-events index): soft top hairline, no background of its own. Transparent
   so the page's own accent-tinted gradient (main.css:47-59, which builds to its
   strongest accent concentration at the very bottom) shows through here instead
   of being painted over with a flatter, fixed-strength tint. */
#event_page_wrap #organiser.container {
  background: transparent !important;
  border-top: 1px solid var(--line);
  padding: 46px 15px 44px;
}
#event_page_wrap #organiser .org-footer { max-width: 640px; margin: 0 auto; }
#event_page_wrap #organiser .org-name { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
#event_page_wrap #organiser .org-name a { color: var(--text); text-decoration: none; }
#event_page_wrap #organiser .org-name a:hover { color: var(--accent); }
#event_page_wrap #organiser .org-about {
  color: var(--dim); font-size: 15px; line-height: 1.7;
  max-width: 520px; margin: 0 auto 6px;
}
#event_page_wrap #organiser .org-about p { margin: 0; }
/* Footer social links — same look as the event page's Location socials (accent
   icon + label rows, fixed-width icon column, hover underline), centred as a
   block with a hairline divider above. */
#event_page_wrap #organiser .org-socials {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  width: max-content; max-width: 100%;
  margin: 24px auto 0; padding-top: 22px; border-top: 1px solid var(--line);
}
#event_page_wrap #organiser .org-social {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); text-decoration: none; font-weight: 600;
}
#event_page_wrap #organiser .org-social > i { flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; }
#event_page_wrap #organiser .org-social > svg { flex: 0 0 18px; width: 15px; height: 15px; fill: currentColor; }
#event_page_wrap #organiser .org-social:hover { text-decoration: underline; }
#event_page_wrap #organiser .organiser-socials { margin: 18px auto 22px; }
#event_page_wrap #organiser .org-contact-btn { margin: 0; }
#event_page_wrap #organiser .contact_form { text-align: left; margin: 22px auto 0; max-width: 520px; }
#event_page_wrap #organiser .org-admin-links { margin: 24px 0 0; font-size: 13px; color: var(--faint); }
#event_page_wrap #organiser .org-admin-links .adminLink { color: var(--dim); text-decoration: none; }
#event_page_wrap #organiser .org-admin-links .adminLink:hover { color: var(--accent); }
#event_page_wrap #organiser .org-admin-sep { color: var(--faint); margin: 0 8px; }
@media (max-width: 767px) {
  /* Bottom clearance so the sticky Buy bar (event page) can't cover the links. */
  #event_page_wrap #organiser.container { padding-bottom: 92px; }
}
#event_page_wrap .event-list > li > .info {
  position: static !important; height: auto !important;
  background: transparent !important;
  flex: 1; padding: 14px 18px !important; text-align: left;
  /* Same min-width:auto trap as the button row below: without this, the
     nowrap .ellipsis title's full length becomes the column's minimum width,
     so a long title silently widens .info past the card edge — badges clip
     at the border and the Tickets/Information bar centres on the phantom
     width instead of the visible card. min-width:0 lets the column actually
     shrink, which is also what finally lets the title's ellipsis kick in. */
  min-width: 0;
  /* Column layout so the Tickets/Information bar can be pinned to the bottom
     (via margin-top:auto below). Without this the bar sits right after the
     badges and detaches from the card's bottom edge whenever a taller sibling
     in the same row stretches the card — leaving a dead gap and misaligned
     button bars across a row. */
  display: flex; flex-direction: column;
}
#event_page_wrap .event-list .info .title { margin: 0 !important; padding: 0 !important; font-size: 20px; font-weight: 700; }
#event_page_wrap .event-list .info .title a,
#event_page_wrap .event-list .info .title .ev-soldout-trigger { padding: 0; margin: 0; color: var(--text); }
/* Sold-out event title: same look as the normal <a>, but as a non-navigating
   <button> — clicking the event name shouldn't open the ticket page either,
   it should just flash the Tickets button the same way clicking it directly
   does (see badge-clamp.js). display:inline so the h2's .ellipsis truncation
   still applies to it exactly like it did to the <a>. */
#event_page_wrap .event-list .info .title .ev-soldout-trigger {
  display: inline; border: none; background: transparent; font: inherit; text-align: inherit; cursor: pointer;
}
/* Header info (meta) + tags: kept on one line, cropped (not scrolled) at
   whatever doesn't fit — no horizontal scroll at any width, so it can't
   hijack vertical page scroll on touch devices. */
#event_page_wrap .oe-meta {
  display: flex; flex-wrap: nowrap; gap: 6px 10px; margin-top: 8px; margin-bottom: 10px;
  overflow: hidden;
}
#event_page_wrap .oe-meta .ev-meta { white-space: nowrap; flex: 0 0 auto; }
/* Badges wrap onto (at most) 2 lines instead of scrolling. badge-clamp.js
   measures actual rows and hides whatever doesn't fit past line 2, replacing
   it with a single "…" badge; the max-height here is just a pre-JS fallback
   so nothing taller ever shows before the script runs. */
#event_page_wrap .event-list .event_badges {
  margin: 0 0 12px; flex-wrap: wrap; gap: 6px 8px;
  overflow: hidden; max-height: 56px;
}
#event_page_wrap .event-list .event_badges .ev-badge { flex: 0 0 auto; }
#event_page_wrap .event-list .event_badges .ev-badge-more {
  color: var(--faint); border-style: dashed; cursor: default;
}
#event_page_wrap .event-list .info > ul {
  position: static !important;
  background: transparent !important;
  border-top: 1px solid var(--line);
  margin: 0; padding: 0;
  margin-top: auto;   /* pin the button bar to the bottom of the card */
  display: flex; width: 100%;
}
/* flex-basis:0 alone only splits the two buttons evenly while there's slack to
   give; flex items default to min-width:auto, so an unbreakable word (a long
   translated "tickets"/"information" label, e.g. Italian's "Informazioni" vs
   "Biglietti") can still force its own box wider once the row gets tight,
   pushing the other button down to a sliver. min-width:0 removes that content
   based floor so flex-basis:0 actually holds; the ellipsis on .ev-btn>a is a
   safety net so an even longer label truncates instead of reintroducing the
   same fight for space. */
#event_page_wrap .event-list .info > ul > li { flex: 1 1 0; min-width: 0; width: auto !important; padding: 0; border-radius: 0; text-align: center; }
#event_page_wrap .event-list .info > ul > li + li { border-left: 1px solid var(--line); }
#event_page_wrap .event-list .info > ul > li .ev-btn { overflow: hidden; }
#event_page_wrap .event-list .info > ul > li > .ev-btn > a {
  display: block; padding: 11px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); font-weight: 500; text-transform: uppercase;
  font-size: 12px; letter-spacing: .06em;
}
#event_page_wrap .event-list .info > ul > li:hover { background: var(--fill); }
#event_page_wrap .event-list .info > ul > li:hover > .ev-btn > a { color: var(--text); }

/* Sold-out Tickets button: reuses the same box as the normal <a> but as a
   disabled <button> (no href, so there's nothing to navigate to). Clicking it
   doesn't do anything useful, so instead of silently ignoring the click we
   flash the label red->white->red as direct feedback that the click landed. */
#event_page_wrap .event-list .info > ul > li > .ev-btn > .ev-soldout-btn {
  display: block; width: 100%; padding: 11px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: none; background: transparent; margin: 0;
  font: inherit; font-weight: 500; text-transform: uppercase;
  font-size: 12px; letter-spacing: .06em;
  color: #ff4d4d; cursor: pointer; text-decoration: none;
}
#event_page_wrap .event-list .info > ul > li:hover > .ev-btn > .ev-soldout-btn { color: #ff4d4d; }
@keyframes ev-soldout-flash {
  0%, 100% { color: #ff4d4d; }
  50% { color: #fff; }
}
#event_page_wrap .event-list .info > ul > li > .ev-btn > .ev-soldout-btn.is-flashing {
  animation: ev-soldout-flash 0.5s ease-in-out;
}
/* Sold-out Information button: same box + accent colour as the normal
   Information <a>, but a non-navigating <button> — a sold-out event has no
   working links, so clicking it flashes the "Sold Out" ticket button (via
   badge-clamp.js) instead of opening the event. */
#event_page_wrap .event-list .info > ul > li > .ev-btn > .ev-soldout-info {
  display: block; width: 100%; padding: 11px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: none; background: transparent; margin: 0;
  font: inherit; font-weight: 500; text-transform: uppercase;
  font-size: 12px; letter-spacing: .06em;
  color: var(--accent); cursor: pointer;
}
#event_page_wrap .event-list .info > ul > li:hover > .ev-btn > .ev-soldout-info { color: var(--text); }
#event_page_wrap .alert-info { background: var(--fill); border: 1px solid var(--line); color: var(--dim); }
/* Narrow screens: stack the card (image on top, info full-width) so the info
   and the Tickets/Information buttons aren't squeezed/clipped by overflow. */
@media (max-width: 520px) {
  #event_page_wrap .event-list > li { flex-direction: column; }
  #event_page_wrap .event-list > li > img.eventcover {
    /* Mobile (stacked card): full-width banner using the organiser's chosen crop
       ratio (var(--cover-ar), set inline per event). */
    width: calc(100% - 10px) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center;
    aspect-ratio: var(--cover-ar);
  }
}

/* Section headings — bold white, left aligned ------------------------------ */
#event_page_wrap .section_head {
  border: none !important;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 22px;
}

/* --------------------------------------------------------------- TICKETS --- */

#event_page_wrap #tickets .tickets_table_wrap {
  border-radius: 10px;
}

#event_page_wrap #tickets table.table { margin: 0; background: transparent; }
/* The "choose the number of tickets…" note — muted body text, readable in both themes */
#event_page_wrap #tickets tr.below-tickets-note td { color: var(--dim); font-size: 13px; }
#event_page_wrap #tickets table tr td {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  vertical-align: middle;
}
#event_page_wrap #tickets .ticket-title { color: var(--dim); font-weight: 600; font-size: 16px; }
#event_page_wrap #tickets .ticket-addon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent);
  background: rgba(95, 227, 212, 0.12);
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
#event_page_wrap #tickets .ticket-descripton,
#event_page_wrap #tickets .ticket-description { color: var(--dim) !important; font-size: 13px; margin-top: 3px; }
#event_page_wrap #tickets .ticket-pricing { color: var(--text); font-weight: 700; font-size: 18px; white-space: nowrap; }
#event_page_wrap #tickets .tickets-left {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
#event_page_wrap #tickets .ticket-pricing .tax-amount,
#event_page_wrap #tickets .ticket-pricing .text-smaller { color: var(--faint); font-weight: 400; font-size: 12px; }
#event_page_wrap #tickets .text-danger {
  color: #ff6b6b !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
#event_page_wrap #tickets select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 66px;
  height: auto;
  padding: 9px 14px;
  color: var(--text) !important;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
}
#event_page_wrap #tickets select.form-control:focus { border-color: var(--accent); outline: none; }

/* Quantity stepper: white round − / + buttons with black glyphs */
#event_page_wrap #tickets td[style*="width:85px"] { width: 112px !important; white-space: nowrap; }
#event_page_wrap #tickets .qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#event_page_wrap #tickets .qty-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Rapid-tapping + / − to change the quantity must adjust the count, not
     trigger the browser's double-tap-to-zoom. Scoped to the buttons only —
     the rest of the page keeps normal pinch/double-tap zoom. Also removes
     the legacy 300ms tap delay on these buttons. */
  touch-action: manipulation;
  transition: background .15s ease;
  -webkit-user-select: none;
  user-select: none;
}
#event_page_wrap #tickets .qty-btn:hover { background: var(--btn-hover); }
/* Per-order limit reached — greyed out via the same theme tokens used
   everywhere else (--fill/--faint/--line), not a hardcoded colour, so it
   reads correctly in both the dark and light theme. */
#event_page_wrap #tickets .qty-btn.is-maxed {
  background: var(--fill);
  color: var(--faint);
  cursor: not-allowed;
}
#event_page_wrap #tickets .qty-btn.is-maxed:hover { background: var(--fill); }
#event_page_wrap #tickets .qty-value {
  min-width: 16px;
  text-align: center;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
/* Prompts the buyer to pick a quantity when "Select Tickets" is clicked
   with nothing chosen yet — a short attention pulse on the stepper's
   circles, using --accent so it's visible (and theme-correct) either way. */
@keyframes qty-flash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%, 75% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); }
}
#event_page_wrap #tickets .qty-stepper.qty-flash .qty-btn {
  animation: qty-flash-pulse 0.5s ease-in-out 2;
  border-radius: 50%;
}
/* Unlock-code row kept quiet so it doesn't compete with the primary CTA */
#event_page_wrap #tickets tr.has-access-codes td { color: var(--faint); }
#event_page_wrap #tickets #unlock_code {
  color: var(--dim) !important;
  background: var(--field-bg);
  border: 1px solid var(--line);
}
/* Compact, subdued Apply button sitting inline right after the unlock input */
#event_page_wrap #tickets #apply_access_code {
  padding: 8px 18px !important;
  font-size: 13px;
  font-weight: 500;
  margin-left: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--dim) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
#event_page_wrap #tickets #apply_access_code:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text) !important;
}
#event_page_wrap #tickets tr.checkout img { opacity: .8; }

/* Primary CTA — solid white pill (Register / Buy tickets) ------------------ */
#event_page_wrap .btn-primary,
#event_page_wrap .btn-success {
  background: var(--btn-bg) !important;
  background-image: none !important;
  border: none !important;
  color: var(--btn-text) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 14px 32px;
  box-shadow: none;
  text-shadow: none;
  transition: background .15s ease;
}
#event_page_wrap .btn-primary:hover,
#event_page_wrap .btn-success:hover { background: var(--btn-hover) !important; }

/* Buy button lives in the form as normal — always in-flow, never fixed to
   the viewport. (Mobile used to stick it to the bottom via .is-stuck once
   scrolled out of view; the IntersectionObserver in EventTicketsSection
   still toggles that class, but it's a no-op now — disabled CSS-only, same
   as the cookie banner, so the JS wiring stays untouched.) */
#event_page_wrap .sticky-buy-bar { display: flex; justify-content: flex-end; }
#event_page_wrap .sticky-buy-bar .btn-primary { float: none !important; margin: 0 !important; }
#event_page_wrap #tickets tr.checkout td { border: none; }

/* --------------------------------------------------------------- DETAILS --- */

#event_page_wrap #details { color: var(--dim); }
#event_page_wrap #details .event_details { color: var(--dim); font-size: 15px; line-height: 1.72; }
#event_page_wrap #details .event_details h1,
#event_page_wrap #details .event_details h2,
#event_page_wrap #details .event_details h3,
#event_page_wrap #details .event_details h4,
#event_page_wrap #details .event_details h5,
#event_page_wrap #details .event_details h6 { color: var(--text); font-weight: 700; }
#event_page_wrap #details .event_details a { color: var(--accent); text-decoration: none; }
#event_page_wrap #details .event_details a:hover { text-decoration: underline; }
#event_page_wrap #details .event_details strong,
#event_page_wrap #details .event_details b { color: var(--text); }
#event_page_wrap #details .event_poster img { border: none; border-radius: 10px; }

/* ----------------------------------------------------------------- MAP ----- */

#event_page_wrap #location .google-maps {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* No isolation/mix-blend-mode here: combining those with a filtered iframe
     forced the browser to recomposite this element's own GPU layer on every
     scroll, producing a visible black flash mid-scroll. Plain stacking +
     absolute overlay avoids that recompositing trigger entirely. */
}
#event_page_wrap #location .google-maps iframe {
  min-height: 460px;
  width: 100%;
  display: block;
  border-radius: 11px;
  /* The classic Google embed can't be JS-styled, so recolour it with a filter:
     dark map on the night theme, untouched on the day theme. */
  filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.85);
}
html[data-theme="light"] #event_page_wrap #location .google-maps iframe { filter: none; }

/* ------------------------------------------------------------- ORGANISER --- */

#event_page_wrap #organiser { color: var(--dim); text-align: center; }
#event_page_wrap #organiser [property="description"] { color: var(--dim); }
#event_page_wrap #organiser .event_organiser_details > a { color: var(--accent); text-decoration: none; }
#event_page_wrap #organiser .btn,
#event_page_wrap #organiser .btn-primary {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  text-shadow: none;
  /* Mobile has a rule making .btn-primary (the main Buy Tickets CTA) full
     width; Contact shares that class but should stay sized to its own text. */
  width: auto !important;
  display: inline-block !important;
}
#event_page_wrap #organiser .btn:hover { border-color: rgba(255,255,255,.45) !important; }
#event_page_wrap #organiser .contact_form {
  background: #0d0d0d;
  border: 1px solid var(--line);
  border-radius: 12px;
}
#event_page_wrap #organiser .contact_form .form-control { color: #eee !important; background: #111; border-color: var(--line); }

/* -------------------------------------------------------------- FOOTER ----- */

/* Transparent: a --fill wash here reads as a lighter band against the darker
   gradient above/below it — same visible-edge effect as an actual border,
   just from a background contrast instead of a border property. Letting the
   page's own gradient show through avoids that edge entirely. */
#footer {
  background: transparent !important; color: var(--faint); padding-top: 14px;
  /* Keeps footer text clear of the home-indicator now the page draws under
     it (viewport-fit=cover); 0 on devices without a safe area. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#footer a, #footer .adminLink { color: var(--dim); }
#footer a:hover, #footer .adminLink:hover { color: #fff; }
.powered_by_embedded a { color: var(--dim) !important; }

/* Organiser page: the fallback site logo (assets/images/logo-dark.png, used when
   an organiser hasn't uploaded their own — flagged with .is-fallback-logo in
   OrganiserHeaderSection.blade.php) is a dark wordmark — invisible on the dark
   theme's near-black background. Invert only THAT fallback image; an organiser's
   own uploaded logo may be any colour and must never be force-inverted. */
.organiser_logo .thumbnail img.is-fallback-logo { filter: invert(1); }
html[data-theme="light"] .organiser_logo .thumbnail img.is-fallback-logo { filter: none; }

/* Language switcher: the toggle (on the dark page) uses the accent colour... */
#event_page_wrap .lang-switcher .dropdown-toggle,
#event_page_wrap .lang-switcher .dropdown-toggle:hover,
#event_page_wrap .lang-switcher .dropdown-toggle:focus {
  color: var(--accent);
  text-decoration: none;
}
#event_page_wrap .lang-switcher .dropdown-toggle .caret { color: var(--accent); }

/* ...while the open menu renders on white, so it uses the inverted palette
   with a light hover (a dark/white hover would be invisible here). */
#event_page_wrap .lang-switcher .dropdown-menu {
  background: var(--inv-surface);
  border: 1px solid var(--inv-line);
}
#event_page_wrap .lang-switcher .dropdown-menu > li > a {
  color: var(--inv-text);
}
#event_page_wrap .lang-switcher .dropdown-menu > li > a:hover,
#event_page_wrap .lang-switcher .dropdown-menu > li > a:focus {
  background: var(--inv-hover);
  color: var(--inv-text);
}
#event_page_wrap .lang-switcher .dropdown-menu > .active > a,
#event_page_wrap .lang-switcher .dropdown-menu > .active > a:hover,
#event_page_wrap .lang-switcher .dropdown-menu > .active > a:focus {
  background: var(--inv-hover);
  color: var(--accent-on-light);
  font-weight: 600;
}

/* ============================ DAY / NIGHT ================================= */

#event_page_wrap .theme-toggle {
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
#event_page_wrap .theme-toggle:hover { opacity: .8; }

/* Light ("day") theme — flip the palette tokens... */
html[data-theme="light"] #event_page_wrap {
  --bg:        #f5f4f0;
  --text:      #17151c;
  --dim:       rgba(0,0,0,.62);
  --faint:     rgba(0,0,0,.42);
  --line:      rgba(0,0,0,.12);
  --fill:      rgba(0,0,0,.05);
  --btn-bg:    #17151c;
  --btn-text:  #ffffff;
  --btn-hover: #2c2833;
  /* Auto-darken the chosen accent on the light background so links/icons keep
     good contrast without the organiser picking a second colour. */
  --accent:    color-mix(in srgb, var(--accent-raw) 55%, #000);
}
/* ...plus the surfaces that aren't purely token-driven */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.attendize { background: #f5f4f0 !important; }
html[data-theme="light"] #event_page_wrap #tickets #unlock_code {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}
html[data-theme="light"] #event_page_wrap #tickets #apply_access_code {
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.12) !important;
}
html[data-theme="light"] #event_page_wrap #tickets #apply_access_code:hover { background: rgba(0,0,0,.10) !important; }
html[data-theme="light"] #event_page_wrap #organiser .btn:hover { border-color: rgba(0,0,0,.35) !important; }
html[data-theme="light"] #event_page_wrap #organiser .contact_form { background: #fff; }
html[data-theme="light"] #event_page_wrap #organiser .contact_form .form-control { color: #333 !important; background: #f7f7f7; }
html[data-theme="light"] #footer { background: var(--fill) !important; color: rgba(0,0,0,.5); }
html[data-theme="light"] #footer a, html[data-theme="light"] #footer .adminLink { color: rgba(0,0,0,.6); }
html[data-theme="light"] #footer a:hover, html[data-theme="light"] #footer .adminLink:hover { color: #000; }

/* --------------------------------------------------------------- MOBILE ---- */

@media (max-width: 767px) {
  /* Horizontal-overflow safety net. MUST be clip, not hidden: overflow-x:
     hidden forces overflow-y to compute to auto (the spec forbids a
     hidden/visible axis pair), which in Safari/WebKit turns <body> into an
     independent nested scroller inside the viewport — alternate swipes get
     eaten by the wrong scroller ("second scroll ignored"), refresh restores
     the wrong scroller's position, and the scrollbar tracks the wrong box.
     clip clips without ever creating a scroll container. The hidden line
     stays first only as a fallback for pre-2022 browsers without clip. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  #event_page_wrap #intro { padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 30px; }
  #event_page_wrap #intro h1 { font-size: 27px; }
  #event_page_wrap section.container { padding: 34px 18px; }
  #event_page_wrap .btn-primary:not(#mirror_buyer_info) { width: 100%; float: none !important; }

  /* The ticket <table> has inline fixed column widths (200px + 85px) that
     overflow narrow screens. Break the ticket rows out of table layout into
     a stacked flex card: name/description on top, price + quantity below. */
  #event_page_wrap #tickets table tr.ticket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  #event_page_wrap #tickets table tr.ticket td {
    display: block;
    width: auto !important;
    border: none !important;
    padding: 0 !important;
  }
  #event_page_wrap #tickets table tr.ticket td:first-child {
    flex: 1 1 100%;
    margin-bottom: 10px;
  }
  #event_page_wrap #tickets table tr.ticket td:nth-child(2) {
    flex: 1 1 auto;
    text-align: left !important;
  }
  #event_page_wrap #tickets table tr.ticket td:last-child {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
  }
  #event_page_wrap #tickets .ticket-pricing { margin-right: 0 !important; font-size: 16px; }

  /* Tighten the − / + stepper further on phones so the price + quantity row
     stays on one line. */
  #event_page_wrap #tickets td[style*="width:85px"] { width: auto !important; }
  #event_page_wrap #tickets .qty-stepper { gap: 5px; }
  #event_page_wrap #tickets .qty-btn { width: 22px; height: 22px; font-size: 14px; }
  #event_page_wrap #tickets .qty-value { min-width: 13px; font-size: 14px; }
}

/* ==========================================================================
   CHECKOUT / CART FLOW  (#order_form) — buyer details, payment, order view.
   Renders inside #event_page_wrap, so it inherits the theme tokens + --accent.
   ========================================================================== */

#event_page_wrap #order_form { padding: 46px 15px; color: var(--dim); }
#event_page_wrap #order_form h3,
#event_page_wrap #order_form .panel-title {
  color: var(--text);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  border: none !important;
  margin: 0 0 18px;
}
#event_page_wrap #order_form .panel-title { font-size: 16px; margin: 0; }

/* Labels */
#event_page_wrap #order_form .control-label,
#event_page_wrap #order_form label {
  color: var(--dim);
  font-weight: 500;
  font-size: 13px;
}
#event_page_wrap #order_form label.required::after,
#event_page_wrap #order_form .control-label.required::after { color: var(--accent); }

/* Input fields — transparent fill, readable text, hairline border.
   !important on color beats the layout's inline `input,select{color:#999}`. */
#event_page_wrap #order_form .form-control {
  background: transparent;
  color: var(--text) !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  height: auto;
  padding: 10px 12px;
}
#event_page_wrap #order_form textarea.form-control { min-height: 90px; }
#event_page_wrap #order_form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  outline: none;
}
#event_page_wrap #order_form .form-control::placeholder { color: var(--faint); }

/* Stop iOS Safari auto-zooming the page when a form field is focused. iOS
   zooms in whenever the focused input's font-size is under 16px (the vendor
   .form-control is 13–14px), which reads as an annoying jump on every tap.
   A 16px floor prevents it. This is PURELY typographic — no viewport meta,
   overflow, touch-action, or user-scalable is touched, so pinch-zoom stays
   fully available and nothing about scrolling changes. Scoped to the public
   wrapper so the admin UI is unaffected. */
#event_page_wrap .form-control,
#event_page_wrap select,
#event_page_wrap textarea,
#event_page_wrap input[type="text"],
#event_page_wrap input[type="email"],
#event_page_wrap input[type="tel"],
#event_page_wrap input[type="number"],
#event_page_wrap input[type="password"],
#event_page_wrap input[type="search"],
#event_page_wrap input[type="url"] {
  font-size: 16px;
}

/* Thin hairline dividers between fields, like the ticket-type rows */
#event_page_wrap #order_form .form-group {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
#event_page_wrap #order_form .panel-body > .row:last-child .form-group,
#event_page_wrap #order_form .form-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Panels — attendee blocks and order summary: subtle card on the dark ground */
#event_page_wrap #order_form .panel {
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
  margin-bottom: 20px;
}
#event_page_wrap #order_form .panel-heading {
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  color: var(--text);
}
/* Ticket-holder panels: no box border, no heading underline — matches the
   borderless "Your information" section above it */
#event_page_wrap #order_form .panel-primary { border: none; background: transparent; }
#event_page_wrap #order_form .panel-primary > .panel-heading { background: transparent; border: none; }
#event_page_wrap #order_form .panel-primary .panel-title { color: var(--text); }
#event_page_wrap #order_form .panel-body { color: var(--dim); background: transparent; }
/* Attendee ("Ticket Holder") fields sit inside a Bootstrap .panel-body whose
   default 15px side padding insets their grid, making the inputs narrower than
   the un-panelled "Your information" fields above. Drop the side padding so both
   grids span the same width and the inputs match size. */
#event_page_wrap #order_form .ticket_holders_details .panel-body { padding-left: 0 !important; padding-right: 0 !important; }
#event_page_wrap #order_form .panel-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--text);
}

/* Order-summary table */
#event_page_wrap #order_form .panel table.table { margin: 0; background: transparent; }
#event_page_wrap #order_form .panel table.table > tbody > tr > td {
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  padding: 10px 0;
}
#event_page_wrap #order_form .panel table.table > tbody > tr:last-child > td { border-bottom: none; }
#event_page_wrap #order_form .panel-footer h5 { color: var(--text); }
#event_page_wrap #order_form .panel-footer h5 b { color: var(--accent); }

/* Primary submit (.btn-success.card-submit) already renders as the white pill
   via the shared .btn-primary,.btn-success rule — just round it fully. */
#event_page_wrap #order_form .card-submit { border-radius: 999px; }

/* "Copy buyer details" — smaller, secondary (ghost outline), not the white pill.
   Neutral gray (not accent-colored) so it doesn't compete with the primary CTA.
   !important beats the inline `.btn{color:#fff}` and the shared btn rule. */
#event_page_wrap #order_form #mirror_buyer_info {
  display: inline-block !important;
  width: auto !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--faint) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  padding: 3px 10px !important;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  text-shadow: none;
  margin-bottom: 16px;
}
#event_page_wrap #order_form #mirror_buyer_info:hover {
  border-color: var(--dim) !important;
  color: var(--dim) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Helper text / countdown */
#event_page_wrap #order_form .help-block { color: var(--faint); }
#event_page_wrap #order_form #countdown { color: var(--accent); }

/* ---- Order confirmation (EventViewOrderSection) — override its inline light
   hardcodes (#FCFCFC / #656565 / green icon) with theme tokens. ---- */
#event_page_wrap #order_form .order_details.well,
#event_page_wrap #order_form .well,
#event_page_wrap #order_form .offline_payment_instructions {
  background: var(--fill) !important;
  color: var(--dim) !important;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-shadow: none !important;
}
#event_page_wrap #order_form .order_header .massive-icon { color: var(--accent) !important; }
#event_page_wrap #order_form .order_header h1,
#event_page_wrap #order_form .order_header h2 { color: var(--text); }
#event_page_wrap #order_form table.table > thead > tr > th {
  /* frontend.css (vendor) hardcodes the old brand purple (#310093) here —
     override with this event's accent instead. It's a filled bar with white
     text, so the accent must be DARK enough for white to read on it: a bright
     accent (e.g. a yellow event) would leave white text nearly invisible.
     --accent-on-light is exactly that — the raw accent darkened 45% (the same
     bright-colour contrast fix used for accent text on light surfaces and the
     cookie banner). Based on --accent-raw, so it doesn't double-darken on the
     light theme where --accent is already darkened. */
  background: var(--accent-on-light);
  color: #fff;
  /* Vendor sets border-bottom: 2px solid #3c426e !important (old brand navy)
     on every table thead th — a stray blue line under this filled bar. No
     border is needed on a filled header, so drop it (needs !important to beat
     the vendor's). */
  border-bottom: none !important;
}
#event_page_wrap #order_form table.table > tbody > tr > td {
  border-color: var(--line) !important;
  color: var(--dim);
  background: transparent;
}
#event_page_wrap #order_form table.table-hover > tbody > tr:hover > td { background: var(--fill); }
#event_page_wrap #order_form .ticket_download_link { color: var(--accent); }

/* Highlights grid — the categorised Mega/Flagship/Signature/Unique/More past-
   events sections, shared between the /past-events showcase (Index.blade.php,
   which still keeps its own copy of these rules — not removed there, to avoid
   any regression risk) and the organiser page's own "past events" section
   (Shared/Partials/EventHighlightsGrid.blade.php), which has no such styling
   of its own otherwise. */
#event_page_wrap .pe-cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
#event_page_wrap .pe-cat-dot-mega { background: #5cb85c; }
#event_page_wrap .pe-cat-dot-flagship { background: #5bc0de; }
#event_page_wrap .pe-cat-dot-signature { background: #f0ad4e; }
#event_page_wrap .pe-cat-dot-unique { background: #d9534f; }
#event_page_wrap .pe-cat-dot-more { background: var(--faint); }
#event_page_wrap .pe-section-header { max-width: 1170px; margin: 0 auto; padding: 35px 15px 5px; color: var(--text); }
#event_page_wrap .pe-section-header h2 { font-size: 22px; font-weight: 200; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 4px; }
#event_page_wrap .pe-section-header p { font-size: 13px; font-weight: 300; color: var(--faint); margin: 0; }
#event_page_wrap .pe-grid-wrap { max-width: 1170px; margin: 0 auto; padding: 15px 15px 0; }
/* Card row wraps onto further rows instead of scrolling horizontally — no
   horizontal scroll at any width, so it can't hijack vertical page scroll or
   have a touch gesture ambiguously claimed by the row (see Index.blade.php's
   own copy of this rule, used on the showcase page's identical category
   groups + its "Upcoming Events" row, which already used this same layout). */
#event_page_wrap .pe-grid-wrap .event-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px 20px;
}
#event_page_wrap .pe-grid-wrap .event-list > li {
  flex: 1 1 calc(50% - 10px);
  min-width: min(85vw, 540px);
  max-width: 540px;
}
@media (max-width: 767px) {
  #event_page_wrap .pe-grid-wrap .event-list > li { flex: 1 1 100%; min-width: 0; }
}

/* -------------------------------------------------- ORGANISER NOTICE ------- */
/* Small, centred message bar at the very top of the organiser's public pages
   (Shared/Partials/OrganiserNotice.blade.php). Three colour levels set by the
   organiser — alert (red) / warning (yellow) / info (green) — each theme-aware.
   In-flow (not fixed) so it never interferes with scrolling. Deliberately
   small: it's a notice, not a headline. */
.org-notice {
  width: 100%;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.org-notice .org-notice-text { display: inline-block; max-width: 900px; }

/* Dark theme (default): translucent colour tint + a bright, readable text tone. */
.org-notice-alert   { background: rgba(217, 83, 79, .16);  color: #f0938f; border-bottom-color: rgba(217, 83, 79, .30); }
.org-notice-warning { background: rgba(240, 173, 78, .16); color: #f0c079; border-bottom-color: rgba(240, 173, 78, .30); }
.org-notice-info    { background: rgba(92, 184, 92, .16);  color: #86c986; border-bottom-color: rgba(92, 184, 92, .30); }

/* Light theme: the same tints but a dark, readable text tone. */
html[data-theme="light"] .org-notice-alert   { background: rgba(217, 83, 79, .14);  color: #a12b26; border-bottom-color: rgba(217, 83, 79, .32); }
html[data-theme="light"] .org-notice-warning { background: rgba(240, 173, 78, .22); color: #855410; border-bottom-color: rgba(240, 173, 78, .38); }
html[data-theme="light"] .org-notice-info    { background: rgba(92, 184, 92, .16);  color: #2f7a2f; border-bottom-color: rgba(92, 184, 92, .32); }