@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1A2026;
  font-family: Overpass, Arial, Helvetica, sans-serif;
}
header.event-head,
header.site-header {
  background: #002868;
  border-bottom: 3px solid #BF0A30;
}
header.event-head .wrap,
header.site-header .bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  flex-wrap: nowrap;
}
header.event-head .brand,
header.site-header .brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
header.event-head .brand img,
header.site-header .brand img {
  height: 56px;
  width: auto;
  max-width: 260px;
  display: block;
}
header.event-head .slogan,
.slogan {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  font-family: Oswald, Overpass, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #fff !important;
  white-space: nowrap;
}
header.event-head .phone,
header.event-head a.phone,
.sales-phone {
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex: 0 0 auto;
}
header.event-head .phone:hover { color: #E7F6F7 !important; }
.mapHolder {
  height: calc(100vh - 80px) !important;
  min-height: 520px;
  margin: 0 !important;
  background: #fff;
  position: relative;
}
.event-below { padding: 28px 16px 80px; max-width: 1120px; margin: 0 auto; }
.event-below h1 { font-family:"Bebas Neue",Impact,Oswald,sans-serif; font-weight:400; font-size:clamp(32px,4.5vw,52px); letter-spacing:.04em; text-transform:uppercase; line-height:.92; margin: 0 0 10px; color: #002868; }
.event-below h2 { color: #002868; }
.event-below .kicker { color: #BF0A30; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.event-below .lead { color: #334155; line-height: 1.55; }
.event-below a { color: #002868; }
footer { background: #05101c; color: #c5c9ce; padding: 20px 16px; font-size: 13px; }
footer a { color: #9ec7ff; }
.stay22-wrap { margin: 16px 0 0; }
@media (max-width: 700px) {
  header.event-head .wrap { flex-wrap: wrap; }
  header.event-head .brand img { height: 44px; max-width: 72vw; }
  header.event-head .slogan { font-size: 12px; text-align: left; flex-basis: 55%; }
  .mapHolder { height: calc(100vh - 118px) !important; }
}

footer.site-footer {
  background: #05101c;
  color: #c5c9ce;
  padding: 40px 16px 24px;
  border-top: 3px solid #BF0A30;
  font-size: 13px;
  line-height: 1.55;
}
.footer-top {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: 36px;
  align-items: start;
}
.footer-legal h4 { margin: 0 0 10px; color: #fff; font-size: 16px; }
.footer-legal p { margin: 0 0 12px; color: #c5c9ce; }
.footer-legal a, .footer-bottom a { color: #9ec7ff; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.footer-cols h6 {
  margin: 0 0 10px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin: 0 0 8px; }
.footer-cols a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-cols a:hover { color: #BF0A30; }
.footer-bottom {
  max-width: 1120px;
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  color: #9aa3ad;
}
.footer-cards { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.footer-cards img { height: 28px; width: auto; background: #fff; border-radius: 4px; padding: 2px 4px; }
@media (max-width: 800px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}

.event-below .crumbs { font-size: 13px; color: #64748b; margin: 0 0 10px; }
.event-below .crumbs a { color: #002868; font-weight: 600; text-decoration: none; }
.event-copy { margin: 8px 0 0; color: #334155; line-height: 1.65; max-width: 720px; }
.event-copy h2 { color: #002868; font-size: 22px; margin: 28px 0 10px; font-family: Overpass, sans-serif; }
.event-copy p { margin: 0 0 12px; }
.event-copy a { color: #002868; font-weight: 600; }
.event-copy ul { margin: 0 0 16px; padding-left: 18px; }
.event-copy li { margin: 0 0 8px; }
.event-copy dl { margin: 0; }
.event-copy dt { font-weight: 800; color: #002868; margin: 14px 0 4px; }
.event-copy dd { margin: 0; }
.stay22-head { color: #002868; font-size: 22px; margin: 28px 0 10px; }
.event-below iframe { display: block; width: 100%; border: 0; background: #f8fafc; }
.related-dates { margin: 0 0 16px; padding-left: 18px; }

html, body { overflow-x: hidden; }
@media (max-width: 700px) {
  .event-copy { padding: 16px 12px 40px; }
  .event-copy iframe { height: 280px; }
  .event-copy h1, .event-below h1 { font-size: 28px; }
}


/* seatics mobile logo in widget header */
header.event-head { position: relative; z-index: 5; }
@media (max-width: 700px) {
  header.event-head { display: none !important; }
  .mapHolder { height: 100vh !important; min-height: 100svh !important; position: relative !important; z-index: 1 !important; }
}
.mobile-logo { display: inline-flex; align-items: center; margin-right: 8px; }
.mobile-logo img { height: 32px; width: 32px; object-fit: contain; display: block; }
.event-phone { display: inline-flex; align-items: center; color: inherit; }
.event-phone svg { width: 22px; height: 22px; fill: currentColor; }

/* 303-listing-fix-20261020: iOS Seatics fix (header flipping between sticky and not, swipe-back blocked after opening the map).
   overflow-x:hidden on html/body turns them into scroll containers on iOS; clip has the same visual effect without that.
   On mobile the map box is sized to the small viewport and contains its own scroll, so the page and the Seatics list stop fighting. */
html, body { overflow-x: clip; }
body.event-page .mapHolder { overflow: hidden; overscroll-behavior: contain; }
@media (max-width: 700px) {
  body.event-page .mapHolder { height: 100vh !important; height: 100svh !important; min-height: 0 !important; }
}

/* fold-20261020: foldables (Galaxy Fold inner screen ~880-920px wide, iPhone Fold ~760-830px) and short touch landscape.
   Touch devices only (pointer: coarse); ordinary phones (<700px wide) and desktop are unchanged.
   Seatics' mobile mode sizes its map from the full window width, so a true two-column split is not possible there;
   instead the stacked bars are compacted so the ticket list gets the room. */
@media (pointer: coarse) and (min-width: 700px) and (max-width: 991px) and (min-aspect-ratio: 3/4),
       (pointer: coarse) and (min-width: 700px) and (max-height: 760px) {
  /* resale disclaimer on one line */
  body.event-page .sea-list-disclosure { padding-top: 3px !important; padding-bottom: 3px !important; }
  body.event-page .sea-list-disclosure-inner { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Affirm "as low as" band: a slim one-line strip (24px) instead of its own 46px band */
  body.event-page .sea-affirm-low-as {
    margin: 0 !important; padding: 2px 8px !important; height: 24px; line-height: 20px; box-sizing: border-box;
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
@media (pointer: coarse) and (min-width: 992px) and (max-height: 760px) {
  /* short landscape (Fold inner turned sideways, tablets): keep only the resale line of the guarantee box */
  body.event-page .event-info-disclaimer li:nth-child(n+2) { display: none; }
  body.event-page #event-info-area { padding-top: 4px !important; padding-bottom: 4px !important; }
}

/* fold-cover-20261020: narrow phones and the Galaxy Fold cover screen (<=400px CSS wide, also with Chrome text scaling).
   Seatics bars are width:100% + padding in content-box, so they ran 12-30px past the screen edge (clipped by overflow-x).
   Make them fit, then compact the stacked bars so the ticket list starts higher. Desktop and >400px are unchanged. */
@media (max-width: 400px) {
  body.event-page #event-info-area,
  body.event-page #sea-list-disclosure-bottom,
  body.event-page #map-shower,
  body.event-page .sea-list-disclosure-inner,
  body.event-page .sea-affirm-low-as { box-sizing: border-box !important; max-width: 100vw; }
  /* our black bar: "Call" instead of the full number, never wider than the screen */
  body.event-page .site-header .site-branding { min-width: 0; justify-content: space-between; }
  body.event-page .site-header .protect-star { min-width: 0; flex: 0 1 auto; }
  body.event-page .site-header .sales-phone { font-size: 0 !important; white-space: nowrap; }
  body.event-page .site-header .sales-phone::after { content: "Call"; font-size: 13px; letter-spacing: .04em; }
  /* compact event header */
  body.event-page #event-info-area { padding-top: 2px !important; padding-bottom: 2px !important; }
  body.event-page #event-info-area h1, body.event-page .event-info-name { font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important; }
  body.event-page .event-info-place, body.event-page .event-info-date-time-span { font-size: 12px !important; line-height: 1.25 !important; }
  /* disclaimer: smaller, tight */
  body.event-page .sea-list-disclosure { padding: 2px 8px !important; }
  body.event-page .sea-list-disclosure-inner { font-size: 11px !important; line-height: 1.25 !important; padding: 0 !important; }
  /* tabs row: scroll inside the row instead of pushing Filters off-screen */
  body.event-page .sea-inventory-slider { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 96px); }
  /* Affirm line: wraps/truncates, slim */
  body.event-page .sea-affirm-low-as {
    margin: 0 !important; padding: 2px 8px !important; font-size: 11px !important; line-height: 16px !important;
    white-space: normal; overflow: hidden; max-height: 36px; width: auto !important;
  }
}