:root {
  --lime: #315cff;
  --lime-strong: #4773ff;
  --blue: #19bd73;
  --purple: #6e4bff;
  --red: #ff4a4a;
  --gold: #ffc857;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
  --font: "Noto Sans Hebrew", Arial, sans-serif;
  --display: "Archivo Black", "Noto Sans Hebrew", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

html[data-theme="dark"] {
  --bg: #07110f;
  --bg-elevated: #0a1713;
  --surface: #0e1d18;
  --surface-2: #14251f;
  --surface-3: #1b2e27;
  --text: #f7f9f2;
  --muted: #a7b3aa;
  --faint: #728078;
  --line: rgba(255, 255, 255, 0.1);
  --soft-line: rgba(255, 255, 255, 0.06);
  --glass: rgba(7, 17, 15, 0.76);
  --card-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #f1f2e9;
  --bg-elevated: #f7f8f1;
  --surface: #ffffff;
  --surface-2: #e8ebdf;
  --surface-3: #dde2d4;
  --text: #132019;
  --muted: #5e6a62;
  --faint: #7e8981;
  --line: rgba(19, 32, 25, 0.13);
  --soft-line: rgba(19, 32, 25, 0.07);
  --glass: rgba(241, 242, 233, 0.82);
  --card-shadow: 0 22px 60px rgba(31, 45, 35, 0.12);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  transition: background-color .25s ease, color .25s ease;
}

html:not(.theme-ready) body { transition: none; }

button, input { font: inherit; }

button { color: inherit; }

button, .route-card { cursor: pointer; }

img { display: block; max-width: 100%; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { line-height: 1.13; }

em { color: var(--lime); font-style: normal; }

.ambient-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .33;
  background-image: linear-gradient(var(--soft-line) 1px, transparent 1px), linear-gradient(90deg, var(--soft-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 60% 12%, black, transparent 62%);
}

.shell { width: min(1400px, calc(100% - 64px)); margin-inline: auto; }

.topbar {
  height: 88px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 44px;
  position: relative;
  z-index: 50;
}

.brand {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand-word {
  font-family: var(--display);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -2.2px;
}

.brand-word .brand-o { color: var(--lime); }
.brand-word .brand-suffix { color: inherit; }

.brand small {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 1.2px;
  max-width: 46px;
  text-align: left;
}

.desktop-nav { display: flex; justify-content: center; gap: 6px; }

.desktop-nav button {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  transition: .2s ease;
}

.desktop-nav button:hover { color: var(--text); background: var(--surface-2); }

.desktop-nav button.active { color: var(--text); }

.desktop-nav button.active::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 3px;
  border-radius: 5px;
  background: var(--lime);
  bottom: 2px;
  right: calc(50% - 9px);
}

.header-actions { display: flex; align-items: center; gap: 9px; }

.icon-button, .profile-button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  font-size: 16px;
}

.theme-toggle { color: var(--gold); }

.profile-button {
  background: var(--lime);
  border-color: var(--lime);
  color: white;
}

.trip-pill {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  font-weight: 700;
  font-size: 14px;
}

.trip-pill > i { color: var(--lime-strong); }

.trip-pill b {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: white;
  border-radius: 50%;
  font-size: 12px;
}

.app-main { padding-bottom: 90px; }

.app-view { display: none; animation: viewIn .4s ease both; }

.app-view.active { display: block; }

@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } }

.mono, .section-kicker {
  font-family: var(--mono);
  direction: ltr;
  letter-spacing: 1.15px;
  font-size: 12px;
  font-weight: 700;
}

.section-kicker { display: block; color: var(--blue); margin-bottom: 9px; }

html[data-theme="dark"] .section-kicker { color: var(--lime); }

.primary-button, .secondary-button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--lime);
  color: white;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 10px 30px rgba(49, 92, 255, .2);
}

.primary-button:hover { background: #4974ff; transform: translateY(-1px); }

.secondary-button { color: var(--text); background: var(--surface-3); box-shadow: none; }

.text-button, .filter-button, .back-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  color: var(--text);
  font-weight: 750;
}

/* Discover */
.hero-card {
  position: relative;
  min-height: 610px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  background: #07110f;
  color: white;
}

.hero-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.001);
  transition: opacity .28s ease, transform .72s cubic-bezier(.2,.72,.2,1), object-position .45s ease;
  will-change: opacity, transform;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 9, 8, .1) 5%, rgba(3, 9, 8, .44) 44%, rgba(3, 9, 8, .96) 100%), linear-gradient(0deg, rgba(3, 9, 8, .78), transparent 55%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 56%;
  padding: 72px 72px 58px;
}

.hero-copy > *, .hero-ticket {
  transition: opacity .22s ease, transform .32s cubic-bezier(.2,.72,.2,1);
}

.hero-card.is-switching > img { opacity: .18; transform: scale(1.035); }
.hero-card.is-switching .hero-copy > * { opacity: 0; transform: translateY(8px); }
.hero-card.is-switching .hero-ticket { opacity: .3; transform: rotate(-2deg) translateY(7px); }

.hero-meta-row {
  max-width: 580px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

.hero-label {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.hero-label i { margin-left: 6px; }

.hero-carousel-nav {
  position: absolute;
  right: 50%;
  bottom: 34px;
  z-index: 5;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(50%);
}

.hero-carousel-nav button {
  width: 24px;
  height: 24px;
  padding: 0;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero-carousel-nav button::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: 50%;
  bottom: 50%;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 0 rgba(25,189,115,0);
  transform: translate(50%, 50%);
  transition: width .25s ease, height .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.hero-carousel-nav button:hover::after,
.hero-carousel-nav button:focus-visible::after { background: rgba(255,255,255,.8); }

.hero-carousel-nav button.active::after {
  width: 11px;
  height: 11px;
  border-color: white;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2);
}

.hero-copy .mono { margin-bottom: 10px; color: rgba(255,255,255,.68); }

.hero-copy .hero-date {
  width: fit-content;
  min-height: 38px;
  margin-bottom: 17px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 11px;
  background: rgba(3,9,8,.52);
  color: white;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .85px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.hero-date i { color: #ffd447; font-size: 14px; }

.hero-copy h1 {
  margin-bottom: 20px;
  font-size: clamp(50px, 5.15vw, 80px);
  font-weight: 900;
  letter-spacing: -3px;
}

.hero-description { max-width: 580px; color: rgba(255,255,255,.79); font-size: 18px; line-height: 1.7; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 18px; margin: 28px 0 32px; }

.hero-facts span { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; }

.hero-facts i { color: var(--lime); }

.hero-actions { display: flex; align-items: center; gap: 24px; }

.hero-price { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: baseline; }

.hero-price small { grid-column: 1 / -1; color: rgba(255,255,255,.6); font-size: 12px; }

.hero-price strong { font-family: var(--mono); font-size: 28px; }

.hero-price span { color: rgba(255,255,255,.62); font-size: 13px; }

.hero-ticket {
  width: 310px;
  position: absolute;
  z-index: 3;
  left: 50px;
  bottom: 46px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 22px;
  padding: 20px;
  background: rgba(15, 28, 25, .78);
  backdrop-filter: blur(18px);
  transform: rotate(-2deg);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.ticket-top { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: 12px; }
.ticket-top span { color: var(--lime); }
.ticket-route { margin: 20px 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.ticket-route strong { font-family: var(--display); font-size: 27px; }
.ticket-route strong:last-child { text-align: right; }
.ticket-route i { color: var(--lime); transform: rotate(5deg); }
.ticket-event { border-block: 1px dashed rgba(255,255,255,.23); padding: 16px 0; }
.ticket-event small { color: rgba(255,255,255,.58); font-size: 12px; }
.ticket-event strong { display: block; margin-top: 6px; font-family: var(--mono); font-size: 14px; }
.ticket-event strong span { color: var(--lime); margin: 0 3px; }
.ticket-event p { margin: 5px 0 0; color: rgba(255,255,255,.68); font-size: 12px; }
.ticket-code { height: 38px; display: flex; gap: 5px; align-items: end; overflow: hidden; margin-top: 15px; }
.ticket-code span { flex: 1; height: 30px; background: white; }
.ticket-code span:nth-child(2n) { height: 22px; }
.ticket-code span:nth-child(3n) { height: 35px; }

.smart-search {
  position: relative;
  z-index: 5;
  width: calc(100% - 92px);
  min-height: 104px;
  margin: -30px auto 0;
  padding: 15px 18px 15px 24px;
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr) 58px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.search-title { display: flex; align-items: center; gap: 12px; padding-left: 18px; }
.search-title > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--lime); color: white; }
.search-title small, .smart-search button small { display: block; color: var(--faint); font-size: 12px; margin-bottom: 2px; }
.search-title strong { font-size: 16px; }
.search-filter { position: relative; border-right: 1px solid var(--line); }
.search-filter-trigger { width:100%; height:100%; border:0; padding:8px 20px; background:transparent; text-align:right; }
.search-filter-trigger strong { display:flex; align-items:center; gap:9px; font-size:15px; white-space:nowrap; }
.search-filter-trigger strong > i:first-child { color:var(--muted); }
.search-filter-trigger .fa-chevron-down { margin-right: auto; color: var(--faint); font-size: 10px; transition: transform .2s ease; }
.search-filter.open .search-filter-trigger .fa-chevron-down { transform: rotate(180deg); }
.search-filter.open .search-filter-trigger { background: var(--surface-2); }
.search-menu {
  min-width: 220px;
  position: absolute;
  z-index: 45;
  top: calc(100% + 13px);
  right: 7px;
  display: none;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.search-filter.open .search-menu { display: grid; }
.search-menu button {
  min-height: 44px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.search-menu button:hover,
.search-menu button.selected { background: var(--surface-2); }
.search-menu button > i:first-child { width: 19px; color: var(--lime-strong); text-align: center; }
.search-menu button .fa-check { margin-right: auto; color: var(--blue); }
.time-menu { min-width:240px; }
.smart-search .search-go { border: 0; border-radius: 14px; background: var(--blue); color: white; font-size: 18px; }
.smart-search .search-go:hover { background: #10a864; }
.smart-search .search-go i { color: white !important; }

.content-section { margin-top: 78px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 25px; }
.section-heading h2 { margin-bottom: 6px; font-size: clamp(29px, 3vw, 42px); letter-spacing: -1.2px; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: 15px; }

.package-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 20px; }
.package-card { overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: var(--surface); box-shadow: var(--card-shadow); transition: transform .2s ease; }
.package-card:hover { transform: translateY(-4px); }
.package-image { height: 205px; position: relative; background-size: cover; background-position: center; }
.featured-package .package-image { height: 235px; }
[data-view="discover"] .content-section .package-image,
[data-view="discover"] .content-section .featured-package .package-image { height: 235px; }
.package-image.catalog-photo {
  background-image: linear-gradient(0deg, rgba(4,10,20,.74) 0%, rgba(4,10,20,.18) 58%, rgba(4,10,20,.08) 100%), var(--package-photo) !important;
  background-color: #12233e;
  transition: background-size .45s ease;
}
.package-card:hover .package-image.catalog-photo { background-size: 106%; }
.package-image.catalog-photo.chicago { background-position: center 62%; }
.package-image.catalog-photo.roland-garros { background-position: center 54%; }
.venue-chip,
.sport-identity {
  min-height: 34px;
  position: absolute;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(4,12,24,.66);
  color: white;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.venue-chip { left: 14px; }
.sport-identity { right: 14px; }
.club-logo-row {
  position: absolute;
  right: 14px;
  bottom: 13px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-inline: 7px;
}
.club-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-inline-start: -7px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 7px 22px rgba(0,0,0,.34);
}
.club-logo:first-child { margin-inline-start: 0; }
.club-logo img { width: 30px; height: 30px; display: block; object-fit: contain; }
.package-image.madrid { background-image: linear-gradient(0deg, rgba(0,0,0,.55), transparent 70%), url("assets/spot-stadium-hero.png"); }
.package-image.london { background-image: linear-gradient(130deg, rgba(49,92,255,.55), rgba(0,0,0,.08)), url("assets/match-highlight.png"); }
.package-image.barcelona { background-image: linear-gradient(130deg, rgba(111,46,255,.35), rgba(0,0,0,.12)), url("assets/fans-live.png"); }
.tag { position: absolute; top: 15px; right: 15px; padding: 6px 10px; border-radius: 999px; background: rgba(8,16,13,.8); color: white; font-size: 12px; font-weight: 800; backdrop-filter: blur(8px); }
.tag.hot { background: var(--lime); color: white; }
.favorite { width: 38px; height: 38px; position: absolute; top: 14px; left: 14px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(9,16,14,.58); color: white; font-size: 16px; }
.favorite.saved { color: #ff6978; }
.package-body { padding: 20px; }
.card-date { color: var(--blue); font-family: var(--mono); font-size: 12px; font-weight: 700; }
html[data-theme="dark"] .card-date { color: var(--lime); }
.card-meta-row { min-height:24px; display:flex; align-items:center; justify-content:flex-start; gap:12px; }
.package-body h3 { min-height: 48px; margin: 8px 0 9px; font-size: 20px; }
.package-body > p { margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.package-includes { display: flex; flex-wrap: wrap; gap: 8px; }
.package-includes span { padding: 6px 9px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 650; }
.card-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; }
.card-footer small { display: block; color: var(--faint); font-size: 12px; }
.card-footer strong { font-family: var(--mono); font-size: 22px; }
.card-footer button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--lime); color: white; }
.catalog-price { min-width:0; }
.price-label { min-height:18px; margin-bottom:2px; font-weight:650; }
.spot-price-row { display:flex; align-items:center; }
.installment-note { display: block; margin-top: 3px; color: var(--faint); font-family: var(--font); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0; }
.hero-price .installment-note { grid-column: 1 / -1; color: rgba(255,255,255,.72); }

/* All packages */
.packages-hero {
  min-height: 320px;
  position: relative;
  margin-bottom: 24px;
  padding: 50px 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: white;
  background: radial-gradient(circle at 15% 20%, rgba(25,189,115,.35), transparent 30%), linear-gradient(125deg, #173aa8, #315cff 58%, #18307d);
  box-shadow: var(--shadow);
}
.packages-hero::after { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000); }
.packages-hero > * { position: relative; z-index: 2; }
.packages-hero .back-button { position: absolute; top: 24px; right: 24px; border-color: rgba(255,255,255,.25); background: rgba(8,20,67,.28); color: white; backdrop-filter: blur(10px); }
.packages-hero .section-kicker { color: rgba(255,255,255,.75); }
.packages-hero h1 { margin: 0 0 13px; font-size: clamp(47px, 5vw, 72px); letter-spacing: -3px; }
.packages-hero h1 em { color: white; }
.packages-hero p { margin: 0; color: rgba(255,255,255,.77); font-size: 16px; }
.package-count { min-width: 145px; padding: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 19px; background: rgba(8,20,67,.28); text-align: center; backdrop-filter: blur(10px); }
.package-count strong,
.package-count span { display: block; }
.package-count strong { font-family: var(--mono); font-size: 40px; line-height: 1; }
.package-count span { margin-top: 6px; color: rgba(255,255,255,.72); font-size: 12px; }
.packages-toolbar { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.package-filter-tabs { max-width: none; justify-content: flex-start; }
.catalog-info-note { margin:-4px 0 22px; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid rgba(49,92,255,.18); border-radius:16px; background:linear-gradient(100deg,rgba(49,92,255,.09),rgba(25,189,115,.08)); color:var(--muted); }
.catalog-info-note > span { display:flex; align-items:center; gap:7px; font-size:14px; }
.catalog-info-note > span i { color:var(--blue); }
.catalog-info-note b { color:var(--text); }
.catalog-info-note small { color:var(--faint); font-size:12px; text-align:left; }
.all-packages-grid { grid-template-columns: repeat(3, 1fr); }
.all-packages-grid .featured-package .package-image { height: 205px; }
.all-packages-grid .package-card.filtered-out { display: none !important; }
.package-image.seville { background-image: linear-gradient(130deg, rgba(49,92,255,.5), rgba(0,0,0,.14)), url("assets/madrid-hotel.png"); }
.package-image.madrid-alt { background-image: linear-gradient(130deg, rgba(25,189,115,.34), rgba(0,0,0,.2)), url("assets/spot-stadium-hero.png"); background-position: center 58%; }
.package-image.clasico { background-image: linear-gradient(130deg, rgba(49,92,255,.3), rgba(0,0,0,.25)), url("assets/fans-live.png"); }
.package-image.london-double { background-image:linear-gradient(125deg,rgba(215,32,62,.62),rgba(16,38,94,.26)),url("assets/fans-live.png"); background-position:center 34%; }
.package-image.metropolitano { background-image:linear-gradient(135deg,rgba(206,24,48,.58),rgba(39,70,181,.34)),url("assets/match-highlight.png"); background-position:34% center; }
.package-image.villarreal { background-image:linear-gradient(135deg,rgba(252,206,27,.5),rgba(28,65,186,.42)),url("assets/fans-live.png"); background-position:center 58%; }
.package-image.celta { background-image:linear-gradient(135deg,rgba(62,177,231,.46),rgba(0,0,0,.28)),url("assets/spot-stadium-hero.png"); background-position:center 42%; }
.package-image.alaves { background-image:linear-gradient(135deg,rgba(28,78,190,.5),rgba(255,255,255,.08)),url("assets/madrid-hotel.png"); background-position:center 45%; }
.package-image.arsenal-city { background-image:linear-gradient(125deg,rgba(211,25,50,.58),rgba(49,92,255,.4)),url("assets/match-highlight.png"); background-position:70% center; }
.package-image.chicago { background-image:linear-gradient(135deg,rgba(230,51,67,.62),rgba(22,67,154,.48)),url("assets/fans-live.png"); background-position:center 30%; }
.package-image.champions { background-image:linear-gradient(135deg,rgba(32,57,169,.42),rgba(11,19,59,.56)),url("assets/spot-stadium-hero.png"); background-position:center 48%; }
.package-image.barca-winter { background-image:linear-gradient(135deg,rgba(83,42,173,.48),rgba(36,110,210,.34)),url("assets/fans-live.png"); background-position:center 43%; }
.package-image.north-london { background-image:linear-gradient(135deg,rgba(205,26,53,.63),rgba(18,37,87,.46)),url("assets/match-highlight.png"); background-position:62% center; }
.package-image.osasuna { background-image:linear-gradient(135deg,rgba(19,78,196,.5),rgba(14,19,42,.34)),url("assets/madrid-hotel.png"); background-position:center 52%; }
.package-image.sociedad { background-image:linear-gradient(135deg,rgba(30,126,209,.45),rgba(92,35,162,.36)),url("assets/spot-stadium-hero.png"); background-position:center 60%; }
.package-image.arsenal-united { background-image:linear-gradient(135deg,rgba(198,21,49,.62),rgba(255,188,25,.2)),url("assets/fans-live.png"); background-position:center 28%; }
.package-image.betis { background-image:linear-gradient(135deg,rgba(22,151,99,.5),rgba(24,62,164,.36)),url("assets/match-highlight.png"); background-position:30% center; }
.package-image.barca-sevilla { background-image:linear-gradient(135deg,rgba(82,38,171,.5),rgba(217,32,65,.4)),url("assets/fans-live.png"); background-position:center 63%; }
.package-image.madrid-derby { background-image:linear-gradient(135deg,rgba(201,24,48,.52),rgba(26,69,170,.48)),url("assets/spot-stadium-hero.png"); background-position:center 39%; }
.package-image.chelsea-city { background-image:linear-gradient(135deg,rgba(22,78,178,.58),rgba(94,187,232,.32)),url("assets/match-highlight.png"); background-position:72% center; }
.package-image.roland-garros { background-image:linear-gradient(135deg,rgba(211,91,31,.6),rgba(23,74,139,.28)),url("assets/madrid-hotel.png"); background-position:center 72%; }
.packages-empty { margin-top:24px; padding:55px 24px; border:1px dashed var(--line); border-radius:24px; background:var(--surface); text-align:center; box-shadow:var(--card-shadow); }
.packages-empty > i { width:58px; height:58px; margin:0 auto 17px; display:grid; place-items:center; border-radius:18px; background:rgba(49,92,255,.09); color:var(--lime-strong); font-size:23px; }
.packages-empty h2 { margin-bottom:7px; font-size:27px; }
.packages-empty p { margin-bottom:20px; color:var(--muted); }

.split-promo { margin-top: 78px; display: grid; grid-template-columns: 1.22fr .78fr; gap: 20px; }
.split-promo article { min-height: 350px; position: relative; overflow: hidden; border-radius: 26px; color: white; box-shadow: var(--card-shadow); }
.split-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-promo::after, .community-promo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,12,10,.92), rgba(5,12,10,.05) 72%); }
.video-promo-copy, .community-promo > div { position: absolute; z-index: 2; right: 30px; left: 30px; bottom: 28px; }
.video-promo-copy > span, .community-promo .live-dot { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); font-weight: 800; font-size: 13px; }
.video-promo-copy h2, .community-promo h2 { max-width: 580px; margin: 8px 0 17px; font-size: 31px; }
.video-promo-copy button, .community-promo button { padding: 0; border:0; background:transparent; color:white; font-weight:800; }
.community-promo p { margin-bottom: 14px; color: rgba(255,255,255,.72); }

/* Page intros */
.page-intro { min-height: 220px; padding: 55px 4px 36px; display: flex; align-items: center; justify-content: space-between; }
.page-intro h1 { margin-bottom: 12px; font-size: clamp(44px, 5.3vw, 76px); letter-spacing: -3px; }
.page-intro p { color: var(--muted); font-size: 17px; }

/* Video */
.video-layout { display: grid; grid-template-columns: 1.55fr .7fr; gap: 20px; }
.featured-video, .live-match-card { border-radius: 26px; overflow: hidden; box-shadow: var(--card-shadow); }
.video-frame { min-height: 550px; position: relative; color: white; background: #06100d; }
.video-frame > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-gradient { position:absolute; inset:0; background:linear-gradient(0deg, rgba(2,8,6,.94), transparent 70%), linear-gradient(90deg, transparent, rgba(4,9,8,.18)); }
.play-button { width: 82px; height: 82px; position: absolute; top: calc(50% - 41px); right: calc(50% - 41px); border: 1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(49,92,255,.94); color:white; font-size:25px; backdrop-filter:blur(8px); }
.play-button i { margin-left: -3px; }
.video-duration { position:absolute; top:20px; left:20px; padding:6px 9px; border-radius:7px; background:rgba(0,0,0,.68); font-family:var(--mono); font-size:12px; }
.video-caption { position:absolute; right:32px; left:32px; bottom:28px; }
.video-caption > span { color:var(--lime); font-size:13px; font-weight:900; }
.video-caption h2 { max-width:740px; margin:6px 0 8px; font-size:32px; }
.video-caption p { margin:0; color:rgba(255,255,255,.67); }
.live-match-card { padding: 24px; background:var(--surface); border:1px solid var(--line); }
.live-card-head { display:flex; justify-content:space-between; align-items:center; }
.live-card-head > span:last-child { color:var(--muted); font-family:var(--mono); font-weight:700; }
.live-badge { width:fit-content; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:rgba(255,74,74,.14); color:var(--red); font-family:var(--mono); font-size:12px; font-weight:800; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px rgba(255,74,74,.1); animation:pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 9px transparent; } }
.competition { margin:26px 0 20px; color:var(--faint); text-align:center; font-family:var(--mono); font-size: 12px; }
.score-board { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:9px; }
.score-board > div { display:grid; justify-items:center; gap:9px; text-align:center; }
.score-board > b { font-family:var(--mono); font-size:33px; padding-top:12px; }
.score-board strong { font-size:13px; }
.team-mark { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; font-family:var(--display); font-size:14px; color:white; box-shadow:inset 0 0 0 3px rgba(255,255,255,.15); }
.team-mark.white { background:#f7f7f1; color:#15201a; }
.team-mark.blue { background:#315cff; }
.team-mark.red { background:#e43b45; }
.team-mark img { width:72%; height:72%; display:block; object-fit:contain; }
.team-mark.official-crest { overflow:hidden; background:#fff; box-shadow:0 7px 24px rgba(0,0,0,.16), inset 0 0 0 2px rgba(14,36,75,.08); }
.match-moment { margin:27px 0 18px; padding:14px; border-right:3px solid var(--lime); border-radius:10px; background:var(--surface-2); }
.match-moment span { color:var(--lime-strong); font-family:var(--mono); font-size: 12px; }
.match-moment p { margin:5px 0 0; color:var(--muted); font-size:13px; }
.possession { margin-bottom:22px; }
.possession > div { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.possession > i { display:block; height:5px; margin-top:8px; overflow:hidden; border-radius:9px; background:var(--blue); }
.possession > i em { display:block; height:100%; background:var(--lime); }
.live-match-card .secondary-button { width:100%; }

/* Live Polymarket connection */
.polymarket-card {
  margin-top:22px;
  overflow:hidden;
  border:1px solid rgba(109,146,255,.32);
  border-radius:26px;
  background:linear-gradient(135deg,#071739,#0c2457 58%,#081c41);
  color:white;
  box-shadow:var(--card-shadow);
}
.polymarket-card > header { padding:24px 26px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; border-bottom:1px solid rgba(255,255,255,.1); }
.polymarket-brand { width:88px; height:64px; display:grid; place-content:center; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.06); font-family:var(--display); font-size:13px; line-height:1.05; letter-spacing:-.5px; }
.polymarket-brand span { color:#73a7ff; }
.polymarket-brand strong { color:white; }
.polymarket-card h2 { margin:0 0 4px; font-size:24px; }
.polymarket-card header p { margin:0; color:rgba(255,255,255,.58); font-size:12px; }
.polymarket-card header > a { min-height:43px; padding:0 15px; display:inline-flex; align-items:center; gap:8px; border-radius:11px; background:#19bd73; color:white; text-decoration:none; font-size:13px; font-weight:850; }
.market-probabilities { padding:20px 26px 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.market-outcome { padding:17px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.055); }
.market-outcome > span { display:flex; align-items:center; gap:9px; }
.market-outcome .team-mark,
.market-outcome > span > i:not(.team-mark) { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:12px; font-style:normal; }
.market-outcome > span > i:not(.team-mark) { background:rgba(255,255,255,.1); }
.market-outcome > strong { display:block; margin:15px 0 10px; font-family:var(--mono); font-size:31px; }
.market-outcome > em { height:6px; display:block; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.market-outcome > em > i { width:0; height:100%; display:block; border-radius:inherit; background:#6d91ff; transition:width .7s ease; }
.market-outcome.draw > em > i { background:#a9b6cb; }
.market-outcome.malaga > em > i { background:#19bd73; }
.polymarket-card > footer { min-height:52px; padding:10px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(0,0,0,.12); }
.market-status { display:flex; align-items:center; gap:8px; color:#91b4ff; font-size:12px; font-weight:750; }
.market-status .fa-rotate { animation:market-spin 1.2s linear infinite; }
.market-status.fallback { color:#ffc857; }
.polymarket-card footer small { color:rgba(255,255,255,.52); text-align:left; font-size:12px; }
@keyframes market-spin { to { transform:rotate(360deg); } }

.who-is-there { min-height:350px; margin-top:22px; display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:var(--card-shadow); }
.who-is-there > img { width:100%; height:100%; min-height:350px; object-fit:cover; }
.fans-copy { padding:42px; align-self:center; }
.fans-copy h2 { margin:16px 0 12px; font-size:34px; }
.fans-copy p { color:var(--muted); }
.fan-avatars { margin:23px 0; display:flex; align-items:center; }
.fan-avatars span, .fan-stack span, .message-avatar { background-image:url("assets/fans-live.png"); background-size:520%; background-position:var(--p, 20% 45%); }
.fan-avatars span { width:46px; height:46px; margin-left:-10px; border:3px solid var(--surface); border-radius:50%; }
.fan-avatars b { margin-right:10px; color:var(--muted); font-size:13px; }

.live-center { margin-top:22px; display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; }
.scores-panel,.standings-panel { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--card-shadow); }
.scores-panel > header,.standings-panel > header { min-height:82px; padding:17px 21px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.scores-panel h2,.standings-panel h2 { margin:0; font-size:22px; }
.scores-panel header button,.standings-panel header button { min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:transparent; font-size:12px; font-weight:750; }
.score-row { min-height:69px; padding:10px 20px; display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:13px; border-bottom:1px solid var(--line); }
.score-row:last-child { border-bottom:0; }
.score-row > span { color:var(--faint); font-family:var(--mono); font-size:12px; }
.score-row > div b,.score-row > div small { display:block; }
.score-row > div b { font-size:14px; }.score-row > div small { color:var(--muted); }
.score-row > strong { font-family:var(--mono); font-size:18px; }
.score-row.active { background:rgba(49,92,255,.06); }
.table-head,.table-row { min-height:49px; padding:0 20px; display:grid; grid-template-columns:36px 1fr 50px 55px 45px; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.table-head { min-height:38px; color:var(--faint); font-size:12px; }
.table-row:last-child { border-bottom:0; }
.table-row > span,.table-row > strong { text-align:center; font-size:12px; }
.table-row > b { display:flex; align-items:center; gap:9px; font-size:13px; }
.team-dot { width:23px; height:23px; display:inline-block; flex:0 0 auto; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); }
.madrid-dot { background:#f3f3ed; }.city-dot { background:#4386ff; }.arsenal-dot { background:#e33f43; }.inter-dot { background:#171f4d; }

.pill-tabs { display:flex; gap:7px; flex-wrap:wrap; }
.pill-tabs button { min-height:38px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font-weight:700; }
.pill-tabs button.active { background:var(--text); color:var(--bg); border-color:var(--text); }
.clip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.clip-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.clip-image { height:220px; position:relative; background-image:url("assets/match-highlight.png"); background-size:cover; }
.clip-image.crop-two { background-position:20% center; filter:hue-rotate(20deg); }
.clip-image.crop-three { background-image:url("assets/fans-live.png"); }
.clip-image::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%); }
.clip-image button { width:48px; height:48px; position:absolute; z-index:2; top:calc(50% - 24px); right:calc(50% - 24px); border:0; border-radius:50%; background:var(--lime); color:white; }
.clip-image > span { position:absolute; z-index:2; bottom:12px; left:12px; padding:4px 7px; border-radius:5px; background:rgba(0,0,0,.68); color:white; font-family:var(--mono); font-size: 12px; }
.clip-card h3 { margin:17px 17px 7px; font-size:18px; }
.clip-card p { margin:0 17px 17px; color:var(--muted); font-size:13px; }

/* Shop */
.shop-hero { min-height:550px; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; overflow:hidden; border-radius:var(--radius-xl); background:linear-gradient(135deg,#342169,#1846c2 58%,#11a490); color:white; box-shadow:var(--shadow); }
.shop-hero > div:first-child { padding:55px; position:relative; z-index:2; }
.shop-hero h1 { margin-bottom:20px; font-size:clamp(50px,5.5vw,78px); letter-spacing:-3px; }
.shop-hero h1 em { color:#ffd447; text-shadow:0 3px 24px rgba(255,212,71,.28); }
.shop-hero p { max-width:470px; color:rgba(255,255,255,.75); font-size:17px; }
.merch-stage { height:100%; min-height:550px; position:relative; display:grid; place-items:center; background:radial-gradient(circle at center,rgba(49,92,255,.24),transparent 58%); }
.merch-stage::before { content:""; width:470px; height:470px; position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 52px rgba(255,255,255,.035),0 0 0 104px rgba(255,255,255,.025); }
.merch-stage img { width:min(620px,95%); position:relative; z-index:2; filter:drop-shadow(0 34px 30px rgba(0,0,0,.3)); transform:rotate(-2deg); }
.merch-sticker { width:94px; height:94px; position:absolute; z-index:3; top:55px; left:50px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:white; font-family:var(--display); text-align:center; line-height:1.05; transform:rotate(11deg); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--card-shadow); }
.product-image { height:310px; position:relative; background-color:var(--surface-2); background-image:url("assets/clasico-merch.png"); background-repeat:no-repeat; background-size:205%; }
.product-shirt-blue { background-position:96% 4%; }
.product-shirt-white { background-position:4% 3%; }
.product-scarf { background-position:96% 96%; }
.product-glasses { background-position:4% 96%; }
.product-image > span { position:absolute; top:14px; right:14px; padding:5px 8px; border-radius:5px; background:var(--lime); color:white; font-family:var(--mono); font-size: 12px; font-weight:800; }
.product-info { padding:18px; }
.product-info > small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.product-info h3 { min-height:44px; margin:7px 0 16px; font-size:17px; }
.product-info > h3:first-child { margin-top:23px; }
.product-info > div { display:flex; justify-content:space-between; align-items:center; }
.product-info > div > span { display:flex; flex-direction:column; }
.product-info strong { font-size:20px; }
.add-cart { width:40px; height:40px; border:0; border-radius:12px; background:var(--text); color:var(--bg); }
.cart-dock { max-width:460px; position:sticky; z-index:20; bottom:22px; margin:40px auto 0; padding:10px 10px 10px 16px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; border:1px solid var(--line); border-radius:18px; background:var(--glass); backdrop-filter:blur(20px); box-shadow:var(--shadow); }
.cart-dock > span { width:45px; height:45px; position:relative; display:grid; place-items:center; border-radius:12px; background:var(--surface-2); }
.cart-dock > span b { width:20px; height:20px; position:absolute; top:-6px; left:-6px; display:grid; place-items:center; border-radius:50%; background:var(--blue); color:white; font-size: 12px; }
.cart-dock small { display:block; color:var(--faint); font-size: 12px; }
.cart-installments { font-weight:700; }
.cart-dock > button { min-height:43px; border:0; border-radius:11px; padding:0 15px; background:var(--lime); color:white; font-weight:800; }

/* Community */
.community-hero { min-height:460px; position:relative; overflow:hidden; border-radius:var(--radius-xl); color:white; box-shadow:var(--shadow); }
.community-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.community-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,10,8,.93),transparent 80%); }
.community-hero-copy { position:absolute; z-index:2; right:46px; left:46px; bottom:38px; }
.community-lock { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:var(--lime); color:white; font-size:12px; font-weight:800; }
.community-hero h1 { margin:15px 0 7px; font-size:44px; }
.community-hero p { margin-bottom:18px; color:rgba(255,255,255,.75); }
.fan-stack { display:flex; align-items:center; }
.fan-stack span { width:38px; height:38px; margin-left:-8px; border:2px solid white; border-radius:50%; }
.fan-stack span:nth-child(2){--p:35% 45%}.fan-stack span:nth-child(3){--p:58% 45%}.fan-stack span:nth-child(4){--p:78% 45%}
.fan-stack b { margin-right:12px; font-size:13px; }
.community-layout { margin-top:22px; display:grid; grid-template-columns:1.25fr .75fr; gap:22px; align-items:start; }
.chat-panel, .itinerary-card, .poll-card { border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--card-shadow); }
.chat-panel > header { height:78px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.chat-panel > header > div { display:flex; align-items:center; gap:13px; }
.chat-panel > header > div > i { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--blue); color:white; }
.chat-panel header strong, .chat-panel header span { display:block; }
.chat-panel header span { color:var(--muted); font-size:12px; }
.chat-panel header span i { display:inline-block; width:7px; height:7px; margin-left:5px; border-radius:50%; background:#35dc75; }
.chat-panel header > button { border:0; background:transparent; }
.messages { height:600px; overflow:hidden; padding:18px 22px; }
.date-separator { display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; }
.date-separator::before,.date-separator::after { content:""; height:1px; flex:1; background:var(--line); }
.message { margin-top:20px; display:flex; align-items:start; gap:11px; }
.message-avatar { width:38px; height:38px; flex:0 0 auto; border-radius:50%; --p:8% 45%; }
.message-avatar.a2{--p:30% 45%}.message-avatar.a3{--p:55% 45%}.message-avatar.a4{--p:78% 45%}
.message > div { max-width:72%; }
.message p { margin:0 2px 5px; }
.message p strong { font-size:13px; }
.message time { margin-right:8px; color:var(--faint); font-size: 12px; }
.bubble { padding:11px 14px; border-radius:5px 16px 16px 16px; background:var(--surface-2); font-size:14px; }
.message.own { flex-direction:row-reverse; }
.message.own > div { display:flex; flex-direction:column; align-items:flex-end; }
.message.own .bubble { border-radius:16px 5px 16px 16px; background:var(--blue); color:white; }
.read { margin-top:4px; color:var(--faint); font-size: 12px; }
.image-bubble { padding:6px; }
.image-bubble img { width:260px; height:125px; object-fit:cover; border-radius:11px; }
.image-bubble span { display:block; padding:8px 7px 4px; }
.chat-input { height:72px; padding:10px 14px; display:grid; grid-template-columns:40px 1fr 42px; gap:8px; align-items:center; border-top:1px solid var(--line); }
.chat-input div { padding:10px 14px; border-radius:12px; background:var(--surface-2); color:var(--faint); font-size:14px; }
.chat-input button { width:40px; height:40px; border:0; border-radius:11px; background:var(--surface-2); }
.chat-input .send { background:var(--lime); color:white; }
.community-sidebar { display:grid; gap:20px; }
.itinerary-card, .poll-card { padding:22px; }
.side-title { display:flex; align-items:center; gap:11px; }
.side-title > i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(49,92,255,.13); color:var(--blue); }
.side-title h2 { margin:0; font-size:21px; }
.itinerary-card ol { margin:23px 0 0; padding:0; list-style:none; }
.itinerary-card li { position:relative; display:grid; grid-template-columns:64px 1fr; gap:15px; min-height:77px; }
.itinerary-card li::after { content:""; position:absolute; top:27px; bottom:0; right:68px; border-right:1px dashed var(--line); }
.itinerary-card li > span { color:var(--faint); font-size: 12px; }
.itinerary-card li > div { position:relative; padding-right:22px; }
.itinerary-card li > div::before { content:""; width:11px; height:11px; position:absolute; top:4px; right:-5px; z-index:2; border:3px solid var(--surface); border-radius:50%; background:var(--faint); box-shadow:0 0 0 1px var(--line); }
.itinerary-card li.done > div::before { background:var(--lime); }
.itinerary-card li strong, .itinerary-card li small { display:block; }
.itinerary-card li strong { font-size:14px; }
.itinerary-card li small { margin-top:2px; color:var(--muted); font-size: 12px; }
.poll-card > span { color:var(--blue); font-size:12px; font-weight:800; }
.poll-card h3 { margin:12px 0 18px; font-size:20px; }
.poll-card button { width:100%; min-height:46px; position:relative; overflow:hidden; margin-bottom:8px; padding:0 11px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:11px; background:transparent; font-size:12px; }
.poll-card button i { position:absolute; z-index:0; inset-block:0; right:0; background:rgba(49,92,255,.12); }
.poll-card button b,.poll-card button em { position:relative; z-index:1; color:var(--text); font-style:normal; }
.poll-card > small { color:var(--faint); font-size: 12px; }

/* Order */
.order-success { max-width:760px; margin:40px auto 36px; text-align:center; }
.success-mark { width:70px; height:70px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; background:var(--lime); color:white; font-size:26px; box-shadow:0 0 0 12px rgba(49,92,255,.1); }
.order-success h1 { margin-bottom:12px; font-size:52px; }
.order-success > p { max-width:590px; margin-inline:auto; color:var(--muted); font-size:16px; }
.order-number { width:fit-content; margin:20px auto 0; padding:9px 10px 9px 16px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.order-number span { color:var(--faint); font-size:12px; }
.order-number strong { font-family:var(--mono); }
.order-number button { width:34px; height:34px; border:0; border-radius:8px; background:var(--surface-2); }
.order-pass { display:grid; grid-template-columns:1.4fr .6fr; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:var(--card-shadow); }
.pass-main { padding:30px 34px; }
.pass-heading { display:flex; justify-content:space-between; align-items:center; }
.pass-heading > div { display:flex; align-items:end; gap:9px; }
.pass-heading .brand-word { font-size:25px; }
.pass-heading small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.confirmed { color:#31c96c; font-size:13px; font-weight:800; }
.order-route { margin:28px 0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; }
.order-route > div:not(.flight-path) { display:flex; flex-direction:column; }
.order-route > div:last-child { text-align:right; }
.order-route small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.order-route strong { font-family:var(--display); font-size:38px; }
.order-route span { color:var(--muted); font-size:12px; }
.flight-path { display:flex; align-items:center; gap:10px; color:var(--lime-strong); }
.flight-path i { height:1px; flex:1; background:var(--line); }
.order-event { padding:20px 0; display:flex; align-items:center; gap:17px; border-block:1px dashed var(--line); }
.order-event small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.order-event h2 { margin:5px 0; font-size:24px; }
.order-event p { margin:0; color:var(--muted); font-size:13px; }
.pass-grid { margin-top:24px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:20px; }
.pass-grid div { padding-left:14px; border-left:1px solid var(--line); }
.pass-grid div:last-child { border:0; }
.pass-grid small,.pass-grid strong,.pass-grid span { display:block; }
.pass-grid small { color:var(--faint); font-size: 12px; }
.pass-grid strong { margin:4px 0; font-size:14px; }
.pass-grid span { color:var(--muted); font-size: 12px; }
.wallet-panel { padding:32px; border-right:1px dashed var(--line); background:var(--surface-2); }
.wallet-panel h2 { margin-bottom:8px; font-size:25px; }
.wallet-panel > p { margin-bottom:23px; color:var(--muted); font-size:13px; }
.wallet-button { width:100%; min-height:62px; margin-bottom:9px; padding:3px; display:grid; place-items:center; border:0; border-radius:12px; background:transparent; }
.wallet-button:hover { background:rgba(49,92,255,.06); }
.wallet-button img { width:auto; height:55px; max-width:100%; object-fit:contain; }
.wallet-note { display:block; margin-top:13px; color:var(--faint); font-size: 12px; text-align:center; }
.order-content-grid { margin-top:22px; display:grid; grid-template-columns:1.25fr .75fr; gap:22px; }
.trip-gallery,.next-steps { padding:25px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--card-shadow); }
.trip-gallery header { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.trip-gallery h2,.next-steps h2 { margin:0; font-size:25px; }
.trip-gallery header button { min-height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:transparent; font-size:12px; }
.gallery-grid { height:310px; display:grid; grid-template-columns:1.35fr .65fr; grid-template-rows:1fr 1fr; gap:8px; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.gallery-big { grid-row:1 / 3; }
.next-steps ol { margin:24px 0 0; padding:0; list-style:none; }
.next-steps li { min-height:78px; display:grid; grid-template-columns:42px 1fr; gap:13px; position:relative; }
.next-steps li::after { content:""; position:absolute; top:40px; bottom:0; right:20px; border-right:1px dashed var(--line); }
.next-steps li:last-child::after { display:none; }
.next-steps li > i { width:40px; height:40px; z-index:2; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface-2); color:var(--faint); }
.next-steps li.complete > i { background:var(--lime); color:white; }
.next-steps li.active > i { background:var(--blue); color:white; }
.next-steps li strong,.next-steps li span { display:block; }
.next-steps li strong { font-size:14px; }
.next-steps li span { color:var(--muted); font-size: 12px; }
.next-steps li button { margin-top:5px; padding:0; border:0; background:transparent; color:var(--blue); font-size:12px; font-weight:800; }

/* Package details */
.package-detail-hero { min-height:530px; position:relative; overflow:hidden; border-radius:var(--radius-xl); color:white; box-shadow:var(--shadow); }
.package-detail-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,10,8,.1),rgba(4,10,8,.45) 42%,rgba(4,10,8,.93)); }
.package-detail-hero .back-button { position:absolute; z-index:2; top:24px; right:24px; border-color:rgba(255,255,255,.22); background:rgba(5,12,10,.56); color:white; backdrop-filter:blur(10px); }
.detail-copy { position:absolute; z-index:2; right:52px; bottom:48px; }
.detail-copy .tag { position:static; display:inline-flex; align-items:center; gap:6px; }
.detail-copy .mono { margin:20px 0 8px; color:rgba(255,255,255,.66); }
.detail-copy h1 { margin-bottom:14px; font-size:53px; letter-spacing:-2px; }
.rating { display:flex; align-items:center; gap:10px; }
.rating span { color:var(--gold); }
.rating b { color:rgba(255,255,255,.67); font-size:12px; }
.detail-price { min-width:290px; position:absolute; z-index:3; left:40px; bottom:40px; padding:23px; border:1px solid rgba(255,255,255,.25); border-radius:20px; background:rgba(8,17,14,.75); backdrop-filter:blur(18px); }
.detail-price > span,.detail-price > small { display:block; color:rgba(255,255,255,.67); font-size:12px; }
.detail-price > strong { display:block; font-family:var(--mono); font-size:38px; }
.detail-price .installment-note { margin-top:2px; color:rgba(255,255,255,.75); }
.detail-price .primary-button { width:100%; margin-top:15px; }
.detail-price p { margin:11px 0 0; color:rgba(255,255,255,.62); text-align:center; font-size: 12px; }
.detail-stepper { width:calc(100% - 100px); min-height:105px; position:relative; z-index:4; margin:-20px auto 0; padding:15px 35px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--card-shadow); }
.detail-stepper button { display:grid; grid-template-columns:43px 1fr; grid-template-rows:1fr 1fr; gap:0 11px; border:0; background:transparent; text-align:right; }
.detail-stepper button > span { width:43px; height:43px; grid-row:1 / 3; display:grid; place-items:center; border-radius:12px; background:var(--surface-2); color:var(--muted); }
.detail-stepper button.active > span { background:var(--lime); color:white; }
.detail-stepper button b { align-self:end; font-size:13px; }
.detail-stepper button small { color:var(--faint); font-size: 12px; }
.detail-stepper > i { width:36px; height:1px; background:var(--line); }
.detail-layout { margin-top:30px; display:grid; grid-template-columns:1fr 330px; gap:22px; align-items:start; }
.detail-components { display:grid; gap:15px; }
.component-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--card-shadow); }
.component-card > header { min-height:77px; padding:14px 20px; display:flex; align-items:center; gap:13px; border-bottom:1px solid var(--line); }
.component-card header .component-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--surface-2); color:var(--blue); }
.component-card header > div:nth-child(2) { flex:1; }
.component-card header span { display:block; color:var(--faint); font-family:var(--mono); font-size: 12px; }
.component-card header h2 { margin:2px 0 0; font-size:20px; }
.component-card header button { border:0; background:transparent; color:var(--blue); font-weight:800; font-size:12px; }
.component-card header .included { padding:5px 8px; border-radius:7px; background:rgba(53,202,108,.1); color:#35ca6c; font-family:var(--font); }
.traveler-chips { padding:18px 20px; display:flex; gap:10px; }
.traveler-chips span { padding:8px 12px; border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:13px; }
.flight-row { padding:20px; display:grid; grid-template-columns:110px 1fr 1.2fr 1fr; align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.airline { display:flex; align-items:center; gap:9px; }
.airline b { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:#ef3b45; color:white; font-family:var(--mono); font-size: 12px; }
.airline span { color:var(--muted); font-size: 12px; }
.flight-row > div:not(.airline):not(.flight-line) { display:flex; flex-direction:column; }
.flight-row > div:last-child { text-align:right; }
.flight-row strong { font-family:var(--mono); font-size:21px; }
.flight-row span { color:var(--muted); font-size: 12px; }
.flight-line { display:grid; grid-template-columns:1fr; grid-template-rows:auto 20px auto; justify-items:center; row-gap:3px; }
.flight-line span { color:var(--faint); }
.flight-line i { width:100%; height:1px; margin:9px 0 10px; position:relative; background:var(--line); }
.flight-line i::after { content:"\f072"; position:absolute; right:calc(50% - 8px); top:-10px; padding:0 4px; background:var(--surface); color:var(--blue); font-family:"Font Awesome 6 Free"; font-weight:900; line-height:20px; }
.flight-line small { margin-top:5px; color:#19bd73; font-family:var(--mono); font-size: 12px; line-height:1; }
.luggage-row { padding:13px 20px; display:flex; align-items:center; gap:15px; color:var(--muted); font-size: 12px; }
.luggage-row button { margin-right:auto; border:0; background:transparent; color:var(--blue); font-size: 12px; font-weight:800; }
.ticket-match { padding:20px; display:flex; align-items:center; gap:16px; }
.ticket-match > div:nth-child(2) { flex:1; text-align:center; }
.ticket-match small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.ticket-match h3 { margin:5px 0; font-size:20px; }
.ticket-match p { margin:0; color:var(--muted); font-size: 12px; }
.seat-summary { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); }
.seat-summary small,.seat-summary strong,.seat-summary span { display:block; }
.seat-summary small,.seat-summary span { color:var(--muted); font-size: 12px; }
.seat-summary strong { font-size:14px; }
.seat-summary .included { padding:7px 10px; border-radius:8px; background:rgba(53,202,108,.1); color:#35ca6c; }
.hotel-row { padding:20px; display:grid; grid-template-columns:210px 1fr; gap:20px; }
.hotel-row > img { width:210px; height:145px; object-fit:cover; border-radius:14px; }
.hotel-rating { display:flex; align-items:center; justify-content:space-between; }
.hotel-rating span { color:var(--gold); }
.hotel-rating b { color:var(--gold); font-size:12px; }
.hotel-row h3 { margin:10px 0 6px; font-size:22px; }
.hotel-row p { margin-bottom:13px; color:var(--muted); font-size:12px; }
.hotel-features { display:flex; flex-wrap:wrap; gap:8px; }
.hotel-features span { padding:6px 8px; border-radius:7px; background:var(--surface-2); color:var(--muted); font-size: 12px; }
.booking-summary { position:sticky; top:20px; padding:21px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--card-shadow); }
.reservation-clock { padding:13px; display:flex; align-items:center; justify-content:space-between; border-radius:12px; background:rgba(255,200,87,.13); color:#ba7a00; }
html[data-theme="dark"] .reservation-clock { color:var(--gold); }
.reservation-clock span { font-size: 12px; }
.reservation-clock strong { font-family:var(--mono); font-size:19px; }
.booking-summary h2 { margin:23px 0 16px; font-size:21px; }
.summary-line { margin-bottom:12px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.summary-line strong { color:var(--text); }
.summary-total { margin-top:18px; padding-top:18px; display:flex; align-items:end; justify-content:space-between; border-top:1px solid var(--line); }
.summary-total span b,.summary-total span small { display:block; }
.summary-total span small { color:var(--faint); font-size: 12px; }
.summary-total > strong { font-family:var(--mono); font-size:27px; }
.booking-summary .primary-button { width:100%; margin-top:18px; }
.booking-summary > p { margin:10px 0 0; color:var(--faint); text-align:center; font-size: 12px; }
.installment-choice { width:100%; min-height:51px; margin-top:14px; padding:8px 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; border:1px solid rgba(49,92,255,.22); border-radius:12px; background:rgba(49,92,255,.07); text-align:right; }
.installment-choice > i { color:var(--lime-strong); }
.installment-choice span { color:var(--muted); font-size:12px; }
.installment-choice strong { font-family:var(--mono); font-size:16px; }
.checkout-installments { margin-top:13px; }

/* Checkout */
.checkout-header { min-height:180px; padding:30px 0; display:grid; grid-template-columns:220px 1fr 220px; align-items:center; }
.checkout-header > div:nth-child(2) { text-align:center; }
.checkout-header h1 { margin:0 0 6px; font-size:39px; }
.checkout-header p { margin:0; color:var(--muted); }
.reservation-clock.compact { justify-self:end; width:190px; }
.reservation-clock.compact span { display:block; }
.reservation-clock.compact strong { font-size:25px; }
.checkout-layout { display:grid; grid-template-columns:1fr 370px; gap:22px; align-items:start; }
.seat-picker { display:grid; gap:18px; }
.stadium-map { min-height:430px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--card-shadow); }
.stadium-title { padding:18px 22px; display:flex; justify-content:space-between; border-bottom:1px solid var(--line); }
.stadium-title span { font-weight:800; }
.stadium-title b { color:var(--muted); font-size: 12px; }
.pitch { width:260px; height:145px; position:absolute; top:154px; right:calc(50% - 130px); border:3px solid rgba(255,255,255,.72); background:#3b9f5a; box-shadow:0 0 0 13px #317f4b; }
.pitch::before { content:""; width:55px; height:55px; position:absolute; top:calc(50% - 28px); right:calc(50% - 28px); border:2px solid rgba(255,255,255,.66); border-radius:50%; }
.pitch::after { content:""; position:absolute; inset-block:0; right:50%; border-right:2px solid rgba(255,255,255,.66); }
.pitch span::before,.pitch span::after { content:""; width:42px; height:75px; position:absolute; top:32px; border:2px solid rgba(255,255,255,.66); }
.pitch span::before { right:-2px; }.pitch span::after { left:-2px; }
.stand,.corner { position:absolute; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:white; font-family:var(--display); font-size:18px; box-shadow:inset 0 0 20px rgba(255,255,255,.06); }
.stand.north { width:370px; height:50px; top:90px; right:calc(50% - 185px); border-radius:50% 50% 15px 15px; }
.stand.south { width:370px; height:50px; top:315px; right:calc(50% - 185px); border-radius:15px 15px 50% 50%; }
.stand.east { width:58px; height:175px; top:140px; right:calc(50% - 204px); border-radius:12px 50% 50% 12px; }
.stand.west { width:58px; height:175px; top:140px; left:calc(50% - 204px); border-radius:50% 12px 12px 50%; }
.corner { width:65px; height:65px; border-radius:24px; }
.corner.c1 { top:104px; right:calc(50% - 218px); }.corner.c2 { top:104px; left:calc(50% - 218px); }.corner.c3 { top:285px; right:calc(50% - 218px); }.corner.c4 { top:285px; left:calc(50% - 218px); }
.cat-3 { background:#315cff; }.cat-2 { background:#7647e8; }.cat-2-plus { background:#a73ee6; }.cat-1 { background:#ef8467; }.platinum { background:#d5a328; }
.map-legend { position:absolute; right:22px; left:22px; bottom:17px; display:flex; justify-content:center; flex-wrap:wrap; gap:16px; color:var(--muted); font-size: 12px; }
.map-legend span { display:flex; align-items:center; gap:5px; }
.map-legend i { width:9px; height:9px; border-radius:3px; }.map-legend .l3{background:#315cff}.map-legend .l2{background:#8d41e8}.map-legend .l1{background:#ef8467}.map-legend .lp{background:#d5a328}
.seat-options { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.seat-option { min-height:86px; position:relative; padding:13px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; border:1px solid var(--line); border-radius:15px; background:var(--surface); cursor:pointer; }
.seat-option.selected { border:2px solid var(--blue); background:rgba(49,92,255,.055); }
.seat-option input { position:absolute; opacity:0; }
.seat-color { width:13px; height:44px; border-radius:6px; }.seat-color.c3{background:#315cff}.seat-color.c2{background:#7647e8}.seat-color.c2p{background:#a73ee6}.seat-color.c1{background:#ef8467}.seat-color.c1p{background:#ef655d}.seat-color.cp{background:#d5a328}
.seat-option strong,.seat-option small,.seat-option em { display:block; }
.seat-option strong { font-size:14px; }
.seat-option small { color:var(--muted); font-size: 12px; }
.seat-option em { margin-top:4px; color:var(--blue); font-size: 12px; font-weight:800; }
.seat-option > b { text-align:left; font-family:var(--mono); font-size:12px; }
.seat-option > b small { font-family:var(--font); }
.checkout-summary { position:sticky; top:18px; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--card-shadow); }
.mini-trip { padding-bottom:18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.mini-trip small,.mini-trip strong,.mini-trip span { display:block; }
.mini-trip small { color:var(--faint); font-family:var(--mono); font-size: 12px; }
.mini-trip strong { margin:3px 0; font-size:14px; }
.mini-trip span { color:var(--muted); font-size: 12px; }
.travelers-control { padding:18px 0; display:flex; align-items:center; justify-content:space-between; }
.travelers-control small,.travelers-control strong { display:block; }
.travelers-control small { color:var(--faint); font-size: 12px; }
.travelers-control > div:last-child { display:flex; align-items:center; gap:13px; }
.travelers-control button { width:35px; height:35px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.travelers-control b { min-width:20px; text-align:center; font-family:var(--mono); }
.add-traveler { width:100%; min-height:60px; padding:10px 12px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:9px; border:1px dashed var(--line); border-radius:12px; background:transparent; text-align:right; }
.add-traveler > i:first-child { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--surface-2); color:var(--blue); }
.add-traveler strong,.add-traveler small { display:block; }
.add-traveler strong { font-size:12px; }.add-traveler small { color:var(--faint); font-size: 12px; }.add-traveler > i:last-child { color:var(--faint); font-size: 12px; }
.price-breakdown { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.price-breakdown h2 { margin-bottom:15px; font-size:18px; }
.price-breakdown > div { margin-bottom:10px; display:flex; justify-content:space-between; color:var(--muted); font-size: 12px; }
.price-breakdown strong { color:var(--text); }
.checkout-total { margin-top:18px; padding-top:18px; display:flex; align-items:end; justify-content:space-between; border-top:1px solid var(--line); }
.checkout-total span small,.checkout-total span b { display:block; }
.checkout-total span small { color:var(--faint); font-size: 12px; }.checkout-total span b { font-size:15px; }
.checkout-total > strong { font-family:var(--mono); font-size:28px; }
.checkout-summary .primary-button { width:100%; margin-top:18px; }
.secure-note { margin:10px 0 0; color:var(--faint); text-align:center; font-size: 12px; }

.mobile-nav { display:none; }

.toast {
  position:fixed;
  z-index:100;
  right:50%;
  bottom:28px;
  transform:translate(50%,130px);
  padding:12px 17px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--text);
  color:var(--bg);
  box-shadow:var(--shadow);
  opacity:0;
  transition:.28s ease;
}
.toast.show { transform:translate(50%,0); opacity:1; }

@media (max-width: 1080px) {
  .shell { width:min(100% - 40px, 1400px); }
  .topbar { gap:20px; }
  .hero-copy { width:65%; padding-right:45px; }
  .hero-ticket { width:270px; left:28px; }
  .smart-search { width:calc(100% - 45px); grid-template-columns:1fr 1fr 1fr 58px; }
  .search-title { display:none; }
  .package-grid { grid-template-columns:1fr 1fr; }
  .package-card:last-child { display:none; }
  .all-packages-grid .package-card:last-child { display:block; }
  .video-layout { grid-template-columns:1fr .55fr; }
  .polymarket-card > header { grid-template-columns:auto 1fr; }
  .polymarket-card header > a { grid-column:1 / -1; width:fit-content; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .order-pass { grid-template-columns:1.25fr .75fr; }
  .detail-layout { grid-template-columns:1fr 300px; }
  .checkout-layout { grid-template-columns:1fr 330px; }
}

@media (max-width: 760px) {
  :root { --radius-xl:22px; --radius-lg:19px; }
  body { font-size:16px; padding-bottom:76px; }
  .ambient-grid { background-size:32px 32px; }
  .shell { width:calc(100% - 28px); }
  .topbar { height:68px; grid-template-columns:1fr auto; gap:10px; }
  .brand-word { font-size:27px; }
  .brand small,.desktop-nav,.trip-pill,.header-actions > .icon-button:not(.theme-toggle) { display:none; }
  .header-actions { gap:7px; }
  .theme-toggle,.profile-button { width:39px; height:39px; }
  .app-main { padding-bottom:20px; }

  .hero-card { min-height:690px; border-radius:22px; }
  .hero-card > img { object-position:60% center; }
  .hero-shade { background:linear-gradient(0deg,rgba(3,9,8,.98) 5%,rgba(3,9,8,.74) 48%,rgba(3,9,8,.12) 100%); }
  .hero-copy { width:auto; position:absolute; right:21px; left:21px; bottom:50px; padding:0; }
  .hero-meta-row { margin-bottom:12px; gap:10px; }
  .hero-label { font-size:12px; }
  .hero-carousel-nav { bottom:9px; gap:5px; }
  .hero-carousel-nav button { width:22px; height:22px; }
  .hero-copy .mono { font-size: 12px; }
  .hero-copy .hero-date { min-height:34px; margin-bottom:12px; padding:6px 9px; font-size:12px; }
  .hero-date i { font-size:12px; }
  .hero-copy h1 { margin-bottom:13px; font-size:45px; letter-spacing:-2px; }
  .hero-description { font-size:15px; line-height:1.55; }
  .hero-facts { gap:12px; margin:18px 0 20px; }
  .hero-facts span { font-size:12px; }
  .hero-actions { justify-content:space-between; gap:12px; }
  .hero-actions .primary-button { padding:0 15px; font-size:14px; }
  .hero-price strong { font-size:22px; }
  .hero-ticket { width:210px; top:23px; left:18px; bottom:auto; padding:14px; opacity:.95; }
  .ticket-route { margin:12px 0 10px; }
  .ticket-route strong { font-size:19px; }
  .ticket-event { padding:10px 0; }
  .ticket-event p,.ticket-code { display:none; }

  .smart-search { width:calc(100% - 18px); min-height:auto; margin-top:-12px; padding:10px; grid-template-columns:1fr 1fr 48px; grid-template-areas:"sport destination go" "time time time"; row-gap:7px; border-radius:17px; }
  .search-filter[data-filter="sport"] { grid-area:sport; }
  .search-filter[data-filter="destination"] { grid-area:destination; }
  .search-filter[data-filter="time"] { grid-area:time; min-height:48px; padding-top:7px; border-top:1px solid var(--line); border-right:0; }
  .search-go { grid-area:go; }
  .search-filter-trigger { padding:8px 10px; }
  .search-filter-trigger strong { font-size:13px; }
  .search-filter-trigger .fa-chevron-down { display:none; }
  .search-menu { min-width:calc(100vw - 48px); }
  .search-filter:first-of-type .search-menu { right:0; }
  .search-filter:nth-of-type(2) .search-menu { right:auto; left:0; }
  .search-filter[data-filter="time"] .search-menu { width:100%; min-width:100%; right:0; left:auto; }
  .smart-search .search-go { min-height:48px; }

  .content-section { margin-top:52px; }
  .section-heading { align-items:start; margin-bottom:18px; }
  .section-heading h2 { font-size:29px; }
  .section-heading p,.section-heading > .text-button { display:none; }
  .package-grid { display:flex; margin-left:-14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .package-card,.package-card:last-child { min-width:82vw; display:block; scroll-snap-align:start; }
  .packages-hero { min-height:340px; padding:74px 24px 25px; grid-template-columns:1fr; gap:21px; }
  .packages-hero .back-button { top:17px; right:17px; }
  .packages-hero h1 { font-size:44px; letter-spacing:-2px; }
  .packages-hero p { font-size:13px; }
  .package-count { min-width:0; width:100%; padding:13px; display:flex; align-items:center; justify-content:space-between; text-align:right; }
  .package-count strong { font-size:29px; }
  .package-count span { margin:0; }
  .packages-toolbar { align-items:start; overflow:hidden; }
  .package-filter-tabs { max-width:100%; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; scrollbar-width:none; }
  .package-filter-tabs button { flex:0 0 auto; }
  .package-filter-tabs button:nth-child(n+3) { display:block; }
  .catalog-info-note { padding:13px 14px; align-items:flex-start; flex-direction:column; gap:7px; }
  .catalog-info-note > span { align-items:flex-start; font-size:13px; line-height:1.5; }
  .catalog-info-note small { text-align:right; line-height:1.55; }
  .all-packages-grid { display:grid; grid-template-columns:1fr; margin:0; overflow:visible; }
  .all-packages-grid .package-card,
  .all-packages-grid .package-card:last-child { min-width:0; width:auto; }
  .package-image,.featured-package .package-image,
  [data-view="discover"] .content-section .package-image,
  [data-view="discover"] .content-section .featured-package .package-image { height:205px; }
  .package-body h3 { min-height:auto; font-size:20px; }
  .split-promo { margin-top:52px; grid-template-columns:1fr; }
  .split-promo article { min-height:315px; }
  .video-promo-copy h2,.community-promo h2 { font-size:27px; }

  .page-intro { min-height:150px; padding:27px 2px 22px; }
  .page-intro h1 { margin-bottom:8px; font-size:42px; letter-spacing:-2px; }
  .page-intro p { margin:0; font-size:14px; }
  .filter-button { display:none; }
  .video-layout { grid-template-columns:1fr; }
  .video-frame { min-height:470px; }
  .play-button { width:66px; height:66px; top:calc(50% - 33px); right:calc(50% - 33px); }
  .video-caption { right:20px; left:20px; bottom:20px; }
  .video-caption h2 { font-size:25px; }
  .video-caption p { font-size:12px; }
  .live-match-card { padding:20px; }
  .polymarket-card > header { padding:20px; grid-template-columns:1fr; gap:15px; }
  .polymarket-brand { width:78px; height:54px; }
  .polymarket-card h2 { font-size:21px; }
  .polymarket-card header > a { grid-column:auto; width:100%; justify-content:center; }
  .market-probabilities { padding:16px; grid-template-columns:1fr; }
  .market-outcome { display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 14px; }
  .market-outcome > strong { margin:0; font-size:26px; }
  .market-outcome > em { grid-column:1 / -1; }
  .polymarket-card > footer { padding:14px 18px; align-items:flex-start; flex-direction:column; gap:7px; }
  .polymarket-card footer small { text-align:right; }
  .who-is-there { grid-template-columns:1fr; }
  .who-is-there > img { min-height:260px; height:260px; }
  .fans-copy { padding:24px; }
  .fans-copy h2 { font-size:27px; }
  .live-center { grid-template-columns:1fr; }
  .table-head,.table-row { padding-inline:13px; grid-template-columns:26px 1fr 38px 44px 36px; }
  .clip-grid { display:flex; margin-left:-14px; overflow-x:auto; scrollbar-width:none; }
  .clip-card { min-width:78vw; }
  .pill-tabs { max-width:210px; justify-content:flex-end; }
  .pill-tabs button:nth-child(n+3) { display:none; }
  .package-filter-tabs.pill-tabs { max-width:100%; justify-content:flex-start; }
  .package-filter-tabs.pill-tabs button:nth-child(n+3) { display:block; }

  .shop-hero { min-height:650px; grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .shop-hero > div:first-child { padding:30px 24px 0; }
  .shop-hero h1 { font-size:46px; }
  .shop-hero p { font-size:14px; }
  .merch-stage { min-height:360px; }
  .merch-stage::before { width:300px; height:300px; }
  .merch-stage img { width:365px; }
  .merch-sticker { width:76px; height:76px; top:18px; left:22px; font-size:13px; }
  .product-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .product-image { height:190px; }
  .product-info { padding:13px; }
  .product-info h3 { min-height:44px; font-size:14px; }
  .product-info strong { font-size:17px; }
  .cart-dock { bottom:83px; }

  .community-hero { min-height:420px; }
  .community-hero-copy { right:23px; left:23px; bottom:25px; }
  .community-hero h1 { font-size:31px; }
  .community-layout { grid-template-columns:1fr; }
  .messages { height:530px; padding:16px; }
  .message > div { max-width:82%; }
  .community-sidebar { grid-template-columns:1fr; }

  .order-success { margin-top:25px; }
  .order-success h1 { font-size:38px; }
  .order-success > p { font-size:14px; }
  .order-pass { grid-template-columns:1fr; }
  .pass-main { padding:22px 19px; }
  .order-route { gap:12px; }
  .order-route strong { font-size:29px; }
  .order-event h2 { font-size:18px; }
  .pass-grid { grid-template-columns:1fr 1fr; }
  .pass-grid div:first-child { grid-column:1 / -1; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .wallet-panel { padding:23px 19px; border-top:1px dashed var(--line); border-right:0; }
  .order-content-grid { grid-template-columns:1fr; }
  .gallery-grid { height:260px; }
  .trip-gallery header button { width:40px; overflow:hidden; white-space:nowrap; }

  .package-detail-hero { min-height:650px; }
  .detail-shade { background:linear-gradient(0deg,rgba(4,10,8,.97),rgba(4,10,8,.32) 90%); }
  .detail-copy { right:22px; left:22px; bottom:205px; }
  .detail-copy h1 { font-size:38px; }
  .detail-price { right:18px; left:18px; bottom:18px; min-width:0; }
  .detail-price > strong { font-size:31px; }
  .detail-stepper { width:calc(100% - 18px); min-height:83px; padding:11px; grid-template-columns:repeat(4,1fr); overflow:hidden; }
  .detail-stepper > i { display:none; }
  .detail-stepper button { grid-template-columns:1fr; grid-template-rows:42px auto; justify-items:center; text-align:center; }
  .detail-stepper button > span { width:40px; height:40px; grid-row:auto; }
  .detail-stepper button small { display:none; }
  .detail-layout { grid-template-columns:1fr; }
  .flight-row { grid-template-columns:80px 1fr 1fr; gap:10px; padding:16px 13px; }
  .flight-row .airline span { display:none; }
  .flight-line { display:none; }
  .hotel-row { grid-template-columns:1fr; }
  .hotel-row > img { width:100%; height:190px; }
  .booking-summary { position:relative; top:auto; }

  .checkout-header { min-height:auto; padding:20px 0 26px; grid-template-columns:1fr auto; gap:12px; }
  .checkout-header > .back-button { grid-column:1 / -1; justify-self:start; }
  .checkout-header > div:nth-child(2) { text-align:right; }
  .checkout-header h1 { font-size:30px; }
  .checkout-header p { font-size:12px; }
  .reservation-clock.compact { width:107px; padding:10px; flex-direction:column; }
  .reservation-clock.compact strong { font-size:20px; }
  .checkout-layout { grid-template-columns:1fr; }
  .stadium-map { min-height:360px; }
  .pitch { width:190px; height:107px; top:136px; right:calc(50% - 95px); }
  .pitch span::before,.pitch span::after { width:31px; height:55px; top:23px; }
  .stand.north,.stand.south { width:275px; right:calc(50% - 137px); height:40px; }
  .stand.north { top:86px; }.stand.south { top:253px; }
  .stand.east,.stand.west { width:44px; height:127px; top:126px; }
  .stand.east { right:calc(50% - 153px); }.stand.west { left:calc(50% - 153px); }
  .corner { width:48px; height:48px; }
  .corner.c1 { top:98px; right:calc(50% - 165px); }.corner.c2 { top:98px; left:calc(50% - 165px); }.corner.c3 { top:230px; right:calc(50% - 165px); }.corner.c4 { top:230px; left:calc(50% - 165px); }
  .map-legend { bottom:14px; gap:9px; }
  .seat-options { grid-template-columns:1fr; }
  .seat-option { min-height:78px; }
  .checkout-summary { position:relative; top:auto; }

  .mobile-nav {
    height:70px;
    position:fixed;
    z-index:80;
    right:8px;
    left:8px;
    bottom:8px;
    padding:7px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--glass);
    backdrop-filter:blur(22px);
    box-shadow:var(--shadow);
  }
  .mobile-nav button { border:0; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:transparent; color:var(--faint); font-size: 12px; font-weight:700; }
  .mobile-nav button i { font-size:17px; }
  .mobile-nav button.active { background:var(--surface-2); color:var(--text); }
  .mobile-nav button.active i { color:var(--lime-strong); }
  .toast { bottom:88px; }
}

@media (max-width: 380px) {
  .hero-copy h1 { font-size:40px; }
  .hero-description { font-size:14px; }
  .hero-ticket { width:190px; }
  .product-grid { grid-template-columns:1fr; }
  .product-image { height:300px; }
  .checkout-header h1 { font-size:27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Readability floor: supporting labels stay at an app-sized 12px minimum. */
body :where(
  small,
  time,
  .ticket-top,
  .competition,
  .match-moment > span,
  .clip-image > span,
  .product-image > span,
  .cart-dock > span > b,
  .read,
  .itinerary-card li > span,
  .next-steps li > div > span,
  .airline > span,
  .luggage-row,
  .luggage-row button,
  .map-legend,
  .price-breakdown > div,
  .mobile-nav button,
  .component-card header > div:nth-child(2) > span
) { font-size: 12px !important; }