/**
 * events-page.css — Styles for events-page.html
 *
 * Load order: style.css → events-page/events-page.css
 * Scope: prefer `.events_page` for page-specific rules.
 *
 * TABLE OF CONTENTS
 * 1.  Design tokens (:root, .events_page booking tokens)
 * 2.  Empty / error states
 * 3.  Page header & metadata
 * 4.  Sidebar
 * 5.  Skeleton loading
 * 6.  Content sections (hero, description, terms)
 * 7.  Video player
 * 8.  Reviews carousel
 * 9.  Promo code card
 * 10. Seating plan & venue map modal
 * 11. Legacy inline booking components (venue-map patterns)
 * 12. Booking calendar & purchase column
 * 13. Booking UI (.events_page scoped)
 * 14. Booking wizard / checkout iframe
 * 15. Seating zone popup
 */


@import url("events-page-icons.css");

:root {
  /* ===== Design tokens (events page) ===== */

  /* Color palette */
  --primary-blue: #187dfd;
  --blue-hover: #1757c5;
  --soft-blue: #cde3ff;
  --text-dark: #1a1a1a;
  --text-gray: #666;
  --text-light: #999;
  --grey-text: #707696;
  --medium-grey: #d4d9ec;
  --light-grey: #eff0f5;
  --border-color: #e2e8f0;
  --border-medium: #ced2e5;
  --background-light: #f8f9fa;
  --background-card: #e7e9f1;
  --white: #ffffff;
  --black: #000000;

  /* Semantic colors */
  --early-bird: #4285f4;
  --regular: #4285f4;
  --balcony: #ff6b6b;
  --vip: #d4af37;
  --disability: #9c27b0;
  --unavailable: #e0e0e0;
  --selected: #34a853;
  --warning: #ffc107;
  --success: #4caf50;
  --success-bg: #e8f5e8;
  --success-text: #2e7d32;

  /* Typography */
  --font-family: Inter, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 36px;
  --font-size-3xl: 48px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 56px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 20px;
  --radius-full: 50%;

  /* Shadows (page-wide effective values) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Breakpoints */
  --bp-tablet: 768px;
  --bp-laptop: 991px;
  --bp-desktop: 1150px;

  /* Video player (namespaced — avoids clobbering page tokens) */
  --video-primary-color: #2563eb;
  --video-secondary-color: #64748b;
  --video-accent-color: #f59e0b;
  --video-text-color: #1e293b;
  --video-text-muted: #64748b;
  --video-background: #ffffff;
  --video-surface: #f8fafc;
  --video-border-color: #e2e8f0;
  --video-success-color: #10b981;
  --video-warning-color: #f59e0b;
  --video-error-color: #ef4444;
  --video-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --video-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --video-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --video-border-radius: 12px;
  --video-transition: all 0.3s ease;
  --video-transition-fast: all 0.15s ease;

  /* Reviews carousel */
  --reviews-background: hsl(240, 13%, 96%);
  --reviews-card: hsl(0, 0%, 100%);
  --reviews-card-shadow: hsl(220, 13%, 91%);
  --reviews-star: hsl(45, 93%, 58%);
  --reviews-star-empty: hsl(220, 13%, 91%);
  --reviews-nav-button: hsl(0, 0%, 100%);
  --reviews-nav-button-hover: hsl(220, 13%, 91%);
  --reviews-nav-arrow: hsl(220, 9%, 46%);
  --reviews-indicator: hsl(220, 9%, 46%);
  --reviews-text: hsl(222.2, 84%, 4.9%);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== .events_page booking tokens ===== */
/* Booking mockup tokens (Figma): primary #2483FF, checkout teal #00C1A1 */
.events_page {
  --booking-blue: #007bff;
  --booking-blue-fill: #187dfd;
  --booking-calendar-active-strip: #0b6efd;
  --booking-sold-ui: #ef4444;
  --booking-teal: #00c1a1;
  --booking-sold-bg: #dbe0f0;
  --booking-sold-text: #e55050;
  --booking-few-bg: #e5d100;
  --booking-few-border: #e5d100;
  --booking-footer-muted: #dbe0f0;
  --booking-tab-muted: #757b9a;
}


/* ===== 2. Empty / error states ===== */
/* Nothing was found (e.g. showId without auth or event not found) */
.event-nothing-found {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--background-light, #f8f9fa);
}

.event-nothing-found-inner {
  text-align: center;
  max-width: 480px;
}

.event-nothing-found-title {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark, #1a1a1a);
  margin: 0 0 12px;
}

.event-nothing-found-text {
  font-size: 16px;
  color: var(--text-gray, #666);
  margin: 0 0 8px;
}

.event-nothing-found-actions {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-gray, #666);
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
}

.event-nothing-found-actions .blue {
  color: var(--primary-blue, #187dfd);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.event-nothing-found-actions .blue svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.event-nothing-found-actions .red {
  color: #b00020;
}

.event-nothing-found-back {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  background: var(--primary-blue, #187dfd);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.event_page_header {
  --event-header-bg-image: none;
  min-height: 464px;
  height: auto;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background: var(--Light-grey, #eff0f5);
  isolation: isolate;
}

.event_page_header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%),
    var(--event-header-bg-image) lightgray 50% / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.06);
  transform-origin: center;
}

@media screen and (max-width: 991px) {
  .event_page_header {
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .event_page_header {
    height: auto;
  }
}

.event_page_header_content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  font-family: Inter, sans-serif;
  flex-direction: column;
  justify-content: flex-end;
  padding: 79px 79px 56px;
  padding-bottom: 32px;
}

@media screen and (max-width: 1520px) {
  .event_page_header_content {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media screen and (max-width: 1240px) {
  .event_page_header_content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Promoter manage actions (edit / delete) above sales-closed banner */
.event_page_header_content .event-manage-top-actions {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}

@media screen and (max-width: 768px) {
  .event_page_header_content .event-manage-top-actions {
    margin: 0;
    padding: 8px;
  }
}

.event_page_header_content .event-manage-top-actions button {
  display: flex;
  height: 50px;
  padding: 15px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 60px;
  cursor: pointer;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: uppercase;
  border: none;
  outline: none;
}

.event_page_header_content .event-manage-top-actions .edit-event-button {
  border: 2px solid var(--Blue, #187dfd);
  background: var(--Blue, #187dfd);
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.16);
  color: #fff;
}

.event_page_header_content .event-manage-top-actions button:active {
  transform: scale(0.98);
}

/* Sales closed banner above event title */
.sales-closed-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 12px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.sales-closed-banner-icon {
  font-size: 1em;
  line-height: 1;
}

.sales-closed-banner--hidden {
  background: #02c29a;
}

.sales-closed-banner--closed {
  background: #8e53e8;
}

.event_page_header_content .event_page_title {
  color: var(--White, #fff);

  /* ===== 3. Page header & metadata ===== */
  /* Large Header */
  font-family: Inter;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 54px;
  /* 112.5% */
  letter-spacing: -1.92px;
  margin-bottom: 16px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.event_page_header_content .event_info {
  display: flex;
  align-items: center;
  gap: 16px;
  /* margin-bottom: 16px; */
  flex-wrap: wrap;
  font-size: 14px;
}


.event_page_header_content .event_page_header_content_inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.event_page_header_content .event_tags:empty {
  display: none;
}

.event_page_header_content_inner.event_page_header_content_inner--no-tags .event_info .followers+.location {
  margin-left: 8px;
}

.event_page_header_content_inner.event_page_header_content_inner--no-tags .event_page_header_contacts {
  margin-top: 0;
}

@media screen and (max-width: 1150px) {
  .event_page_header_content .event_page_title {
    font-size: 50px;
    line-height: 62px;
  }
}

@media screen and (max-width: 991px) {
  .event_page_header_content .event_page_title {
    font-size: 40px;
    line-height: 52px;
  }
}

@media screen and (min-width: 769px) {
  .event_page_header_content .event_page_title.event_page_title--multiline {
    font-size: 32px;
    line-height: normal;
    letter-spacing: normal;
    max-width: 70%;
  }
}

@media screen and (max-width: 768px) {
  .event_page_header {
    min-height: 0;
    align-items: flex-start;
    background: #000;
  }

  .event_page_header::before {
    display: none;
  }

  .event_page_header_content {
    padding: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .event_page_header_hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 24px 16px;
    overflow: hidden;
    isolation: isolate;
  }

  .event_page_header_hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%),
      var(--event-header-bg-image) lightgray 50% / cover no-repeat;
    filter: blur(6px);
    transform: scale(1.06);
    transform-origin: center;
  }

  .event_page_header_hero:not(:has(.event-poster)) {
    display: none;
  }

  .event_page_header_hero .event_page_header_poster_host {
    position: relative;
    z-index: 1;
  }

  .event_page_header_body {
    width: 100%;
    background: #000;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .event_page_header_content .event_page_header_content_inner {
    gap: 8px;
  }

  .event_page_header_content .event_page_title {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.48px;
    color: #fff;
    margin-bottom: 0;
  }

  .event_page_header_content .event_info {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .event_page_header_content .event_info .location,
  .event_page_header_content .event_info .calendar-header-calendar-btn {
    flex: 0 0 100%;
    width: 100%;
  }

  .event_page_header_content .follow_btn {
    height: 28px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
  }

  .event_page_header_content .calendar-header-calendar-btn {
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.28px;
  }

  .event_page_header_contacts {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 16px;
  }

  .event_page_header_contacts_share_block {
    width: 100%;
  }

  .event_page_header_contacts_share_block:not(.hidden) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
}

.event_page_header_content .event_organizer {
  color: var(--White, #fff);

  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

.event_page_header_content .organizer {
  color: var(--Blue, #187dfd);

  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;
}

.event_page_header_content .organizer a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.event_page_header_content .organizer a:hover {
  text-decoration: underline;
}

.event_page_header_content .follow_btn {
  display: none;
  /* Shown via JS when promoter follow is available */
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}

.event_page_header_content .follow_btn .follow {
  display: inline;
}

.event_page_header_content .follow_btn .following,
.event_page_header_content .follow_btn .unfollow {
  display: none;
}

.event_page_header_content .follow_btn.follow_btn--following .follow {
  display: none;
}

.event_page_header_content .follow_btn.follow_btn--following .following {
  display: inline;
}

.event_page_header_content .follow_btn.follow_btn--following:hover {
  background: rgba(142, 83, 232, 0.35);
  border-color: rgba(142, 83, 232, 0.5);
}

.event_page_header_content .follow_btn.follow_btn--following:hover .following {
  display: none;
}

.event_page_header_content .follow_btn.follow_btn--following:hover .unfollow {
  display: inline;
}

.event_page_header_content .follow_btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.event_page_header_content .location {
  color: var(--Blue, #187dfd);

  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;

  display: flex;
  align-items: center;
  gap: 4px;

  cursor: pointer;
}

.event_page_header_content .calendar_btn {
  cursor: pointer;

  border-radius: 40px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  height: 32px;
  padding: 4px 16px 4px 12px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;

  color: #fff;

  /* Small text link */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
}

.event_page_header_content .calendar-header-calendar-btn {
  position: relative;
  flex-shrink: 0;
}

.event_page_header_content .calendar-header-calendar-btn[hidden],
.event_page_header_content .calendar-header-calendar-btn.calendar-header-calendar-btn--hidden {
  display: none !important;
}

.event_page_header_content .calendar-header-calendar-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.event_page_header_content .calendar-header-calendar-btn .event_page_add_to_calendar_menu {
  left: auto;
  right: 0;
  min-width: 220px;
}

@media screen and (max-width: 768px) {
  .event_page_header_content .calendar-header-calendar-btn {
    width: 100%;
    justify-content: center;
  }

  .event_page_header_content .calendar-header-calendar-btn .event_page_add_to_calendar_menu {
    right: 0;
    left: 0;
  }
}

.event_page_header_content .event_tags {
  display: flex;
  align-items: center;
  gap: 6px;
  /* margin-bottom: 24px; */
  flex-wrap: wrap;
  transition: max-height 0.3s ease;
}

.event_page_header_content .tag {
  border-radius: 20px;
  background: var(--Grey-text, #707696);
  color: white;
  display: flex;
  height: 32px;
  padding: 6px 16px 8px 16px;
  align-items: center;
  gap: 8px;

  color: var(--Light-grey, #eff0f5);
  text-decoration: none;

  /* Small text link */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
}

.event_page_header_content .tag:hover,
.event_page_header_content .tag:focus,
.event_page_header_content .tag:focus-visible {
  color: var(--Light-grey, #eff0f5);
  text-decoration: none;
}

.event_page_header_content .followers {
  color: var(--White, #fff);

  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

.event_page_header_content .view_all_tags {
  color: var(--Blue, #187dfd);
  cursor: pointer;
  transition: all 0.3s ease;

  /* Small text link */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
}

.event_page_header_content .view_all_tags:hover {
  opacity: 0.8;
}

/* Tags Accordion Expanded State */
.event_page_header_content .event_tags.tags-expanded {
  flex-wrap: wrap;
  max-height: 500px;
  overflow: visible;
}

.event_page_header_content .event_tags.tags-expanded .tag {
  display: inline-flex;
}

.event_page_header_categories {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.event_page_header_categories_item {
  display: flex;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #e7e9f1;
  background: #e7e9f1;
}

.event_page_header_promoter {
  color: #ffffff;
  display: flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.4px;
  gap: 4px;
}

.event_page_header_promoter .event_page_header_promoter_name {
  color: #187dfd;
}

.event_page_header_contacts {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

@media screen and (min-width: 769px) {
  .event_page_header_contacts {
    margin-top: 8px;
    /* margin-bottom: 32px; */
  }

  .event_page_header_contacts_share_block {
    margin-left: auto;
    flex-shrink: 0;
  }
}

.event_page_header_body {
  display: contents;
}

@media screen and (min-width: 769px) {
  .event_page_header_hero {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .event_page_header_body {
    display: flex;
  }
}

.event_page_header_contacts_buy_btn {
  display: flex;
  border: 0;
  border-radius: 6px;
  background: #187dfd;
  color: #fff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  padding: 15px 67px;
  cursor: pointer;
  width: 344px;
  justify-content: center;
  align-items: center;
}

.event_page_header_contacts_buy_btn:hover {
  background: #1757c5;
}

.event_page_header_contacts_buy_btn:disabled,
.event_page_header_contacts_buy_btn.disabled {
  background: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.8;
  box-shadow: none;
}

.event_page_header_contacts_buy_btn:disabled:hover,
.event_page_header_contacts_buy_btn.disabled:hover {
  background: #9e9e9e;
  transform: none;
  box-shadow: none;
}

@media screen and (max-width: 768px) {
  .event_page_header_contacts_buy_btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    letter-spacing: 0.84px;
    padding: 16px 24px;
  }
}

.event_page_header_poster_host:not(:empty) {
  width: 100%;
}

.sidebar-poster-host:empty {
  display: none;
}

.event-page-mobile-buy-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000001;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
  .event-page-mobile-buy-bar.is-visible {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .event-page-mobile-buy-bar {
    display: none !important;
  }
}

.event-page-mobile-buy-bar__btn {
  display: flex;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: #187dfd;
  color: #fff;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  padding: 16px 24px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.event-page-mobile-buy-bar__btn:hover {
  background: #1757c5;
}

.event-page-mobile-buy-bar__btn:disabled,
.event-page-mobile-buy-bar__btn.disabled {
  background: #9e9e9e;
  cursor: not-allowed;
  opacity: 0.8;
}

body.event-page-mobile-buy-bar-visible {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.event_page_header_contacts_share_block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.event_page_header_contacts_share_title {
  text-align: center;
  color: var(--Medium-grey, #d4d9ec);
  text-align: center;

  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;
}

@media screen and (max-width: 768px) {
  .event_page_header_contacts_share_title {
    display: flex;
  }
}

.event_page_header_contacts_share_links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event_page_header_contacts_share_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #d4d9ec;
  border: 1px solid #d4d9ec;
  border-radius: 50%;
  cursor: pointer;
  padding: 3px;
}

.event_page_header_contacts_share_item:hover {
  background-color: #d4d9ec;
}

.event_page_header_contacts_share_item.whatsapp {
  background-color: #25D467;
  border-color: #25D467;
  color: #fff;
}

.event_page_header_contacts_share_item.whatsapp:hover {
  background-color: #25D467;
  border-color: #25D467;
}

.event_page_header_copy_wrapper {
  position: relative;
  padding: 0;
}

.event_page_header_copy_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.event_page_header_copy_tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 16px;
  border-radius: 8px;
  background: var(--Purple, #8e53e8);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
  z-index: 2;
}

.event_page_header_copy_tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.event_page_header_copy_tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 42%;
  border-width: 8px 8px 0 8px;
  border-style: solid;
  border-color: var(--Purple, #8e53e8) transparent transparent transparent;
}

.event_page_add_to_calendar_menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  min-width: 200px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
  padding: 8px 0;
  display: none;
  flex-direction: column;
  z-index: 10;
}

.event_page_add_to_calendar_menu.is-open {
  display: flex;
}

.event_page_add_to_calendar_option {
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #1b1e21;
}

.event_page_add_to_calendar_option:hover {
  background: #f3f4f6;
}

.event_page_main_wrapper {
  padding: 40px 79px 72px 79px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 144px;

  max-width: 100vw;
  overflow-x: hidden;

  justify-content: center;
  /* padding-left: 0;
  padding-right: 0; */
  gap: 80px;
}

.event_page_main_wrapper .event-main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-width: 906px;
}

.event_page_main_wrapper .event-about-kiosk-block {
  min-width: 0;
}

.events_page .event-referrer-panel {
  min-width: 0;
  margin-bottom: 24px;
}

.events_page .event-referrer-panel[hidden] {
  display: none !important;
}

.events_page .event-referrer-panel__inner {
  box-sizing: border-box;
  border: 24px solid #187dfd;
  border-radius: 12px;
  padding: 24px 20px;
  background: #fff;
  text-align: center;
}

.events_page .event-referrer-panel__title {
  margin: 0 0 8px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
}

.events_page .event-referrer-panel__label {
  margin: 0 0 16px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #1a1a1a;
}

.events_page .event-referrer-panel__code-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid #ced2e5;
  border-radius: 8px;
  background: #fff;
}

.events_page .event-referrer-panel__code {
  flex: 1 1 auto;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  word-break: break-word;
}

.events_page .event-referrer-panel__copy-code {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
}

.events_page .event-referrer-panel__copy-code:hover:not(:disabled) {
  background: #f3f5fb;
}

.events_page .event-referrer-panel__copy-code:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.events_page .event-referrer-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.events_page .event-referrer-panel__btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: #187dfd;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.events_page .event-referrer-panel__btn--whatsapp {
  background: #25d366;
}

.events_page .event-referrer-panel__qr-block {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.events_page .event-referrer-panel__qr-block[hidden] {
  display: none !important;
}

.events_page .event-referrer-panel__qr-inner {
  position: relative;
  display: inline-block;
}

.events_page .event-referrer-panel__qr-dismiss {
  position: absolute;
  top: -8px;
  right: -8px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #eff0f5;
  color: #1a1a1a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.events_page .event-referrer-panel__qr-dismiss:hover {
  background: #e2e5ef;
}

.events_page .event-referrer-panel__qrcode {
  width: 145px;
  height: 145px;
}

.events_page .event-referrer-panel__qrcode img,
.events_page .event-referrer-panel__qrcode canvas {
  display: block;
}

.events_page .event-referrer-panel__btn:hover:not(:disabled) {
  filter: brightness(0.95);
}

.events_page .event-referrer-panel__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.events_page .event-referrer-panel__btn[hidden] {
  display: none !important;
}

.events_page .event-referrer-panel__tooltip {
  display: block;
  min-height: 0;
  margin-top: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #187dfd;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.events_page .event-referrer-panel__tooltip--code {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  margin-top: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: #1a1a1a;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.events_page .event-referrer-panel__tooltip.is-visible {
  opacity: 1;
}

.events_page .event-about-kiosk-block[hidden] {
  display: none !important;
}

@media screen and (min-width: 769px) and (max-width: 1106px) {
  .event_page_main_wrapper {
    /* gap: 8px;
    padding-left: 12px;
    padding-right: 12px; */
    padding-left: 40px;
    padding-right: 40px;
    gap: 32px;
  }
}

@media screen and (min-width: 1107px) and (max-width: 1520px) {
  .event_page_main_wrapper {
    padding-left: 60px;
    padding-right: 60px;
    gap: 32px;
    justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .event_page_main_wrapper {
    flex-direction: column;
    padding: 16px;
    gap: 24px;
  }

  .event_page_main_wrapper .event-main-column {
    display: contents;
  }

  .event_page_main_wrapper .event-referrer-panel {
    order: 0;
  }

  .event_page_main_wrapper .event-about-kiosk-block {
    order: 1;
  }

  .events_page .event-referrer-panel__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .events_page .event-referrer-panel__btn {
    width: 100%;
  }

  .event_page_main_wrapper .sidebar {
    order: 2;
    padding: 0;
    border-bottom: none;
    width: 100%;
  }

  .event_page_main_wrapper .main-content {
    order: 3;
    width: 100%;
  }

  .event_page_main_wrapper .address-section,
  .event_page_main_wrapper .promoter-section {
    width: 100%;
    box-sizing: border-box;
  }
}

.event_page_main_location {
  border-radius: 8px;
  border: 1px solid #ced2e5;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 344px;
}

.event_page_main_location .marker {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
}

@media screen and (max-width: 768px) {
  .event_page_main_location {
    max-width: 100%;
  }
}

.event_page_main_location_address {
  color: var(--Black, #000);
  /* Text Header */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 130% */
  letter-spacing: -0.4px;
}

.event_page_main_location_name {
  color: var(--Black, #000);
  /* Text */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 160% */
}

.event_page_main_content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: flex-start;
}

@media screen and (max-width: 1150px) {
  .event_page_main_content {
    gap: 36px;
  }
}

.event_page_main_content_about_block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.event_page_main_content_block_title {
  color: var(--Black, #000);
  /* Medium Header */
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  /* 111.111% */
  letter-spacing: -0.72px;
}

.event_page_main_content_about_block_description {
  color: var(--Black, #000);
  /* Text */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 160% */
}

.event_page_main_content_info_block {
  display: grid;
  grid-column-gap: 22px;
  grid-row-gap: 24px;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 991px) {
  .event_page_main_content_info_block {
    grid-template-columns: 1fr;
  }
}

.event_page_main_content_info_block_item_title {
  color: var(--Black, #000);
  /* Text Header */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 130% */
  letter-spacing: -0.4px;
}

.event_page_main_content_info_block_item_content {
  color: var(--Black, #000);
  /* Text */
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  /* 160% */
}

.event_page_main_content_info_block_item_content a {
  color: #187dfd;
}

.event_page_main_content_hints {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.event_page_main_content_hints_item {
  display: flex;
  padding: 16px 24px;
  border-radius: 8px;
  background: #e7e9f1;
  width: 100%;
  gap: 16px;
}

.event_page_main_content_hints_item_icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: black;
  min-width: 60px;
}

.event_page_main_content_hints_item_content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event_page_main_content_hints_item_content_title {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 130% */
  letter-spacing: -0.4px;
}

.event_page_main_content_hints_item_content_description {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.event_page_main_content_hints_item_content_description a {
  color: #187dfd;
}

/* ===== 4. Sidebar ===== */
.event_page_main_wrapper .sidebar {
  background: var(--white);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 344px;
  min-width: 344px;
  flex-shrink: 0;
  border-radius: 8px;
  height: fit-content;
  padding: 0;
}

@media screen and (max-width: 1150px) {
  .event_page_main_wrapper .sidebar {
    max-width: 300px;
    min-width: 300px;
  }
}

@media screen and (max-width: 991px) {
  .event_page_main_wrapper .sidebar {
    max-width: 250px;
    min-width: 250px;
  }
}

@media screen and (max-width: 768px) {
  .event_page_main_wrapper .sidebar {
    max-width: 100%;
    min-width: 100%;
  }
}

.event_page_main_wrapper .event-poster {
  position: relative;
  border-radius: 16px;
  height: 487px;
  width: 100%;
  overflow: hidden;
  background: var(--Light-grey, #eff0f5);
}

.event_page_main_wrapper .event-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event_page_main_wrapper .event-poster--expandable,
.event_page_header_poster_host .event-poster--expandable {
  cursor: pointer;
}

.event_page_main_wrapper .event-poster__trigger,
.event_page_header_poster_host .event-poster__trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.event_page_main_wrapper .event-poster__trigger:focus-visible,
.event_page_header_poster_host .event-poster__trigger:focus-visible {
  outline: 2px solid var(--Primary, #4f46e5);
  outline-offset: 2px;
}

.event_page_main_wrapper .event-poster__trigger img,
.event_page_header_poster_host .event-poster__trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event_page_main_wrapper .event-poster__zoom-badge,
.event_page_header_poster_host .event-poster__zoom-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.event_page_main_wrapper .event-poster__trigger:hover .event-poster__zoom-badge,
.event_page_main_wrapper .event-poster__trigger:focus-visible .event-poster__zoom-badge,
.event_page_header_poster_host .event-poster__trigger:hover .event-poster__zoom-badge,
.event_page_header_poster_host .event-poster__trigger:focus-visible .event-poster__zoom-badge {
  background: rgba(0, 0, 0, 0.58);
}

.event_page_main_wrapper .event-poster__zoom-icon,
.event_page_header_poster_host .event-poster__zoom-icon {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  margin: 0 !important;
}

.event_page_main_wrapper .event-poster--video .event-poster__media,
.event_page_header_poster_host .event-poster--video .event-poster__media {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.event_page_main_wrapper .event-poster--video .event-poster__media img,
.event_page_header_poster_host .event-poster--video .event-poster__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 150ms ease;
}

.event_page_main_wrapper .event-poster--video.event-poster--modal-closing .event-poster__media>img,
.event_page_header_poster_host .event-poster--video.event-poster--modal-closing .event-poster__media>img {
  opacity: 0;
  transition: none;
}

.event_page_main_wrapper .event-poster--video.event-poster--modal-handoff .event-poster__media>img,
.event_page_header_poster_host .event-poster--video.event-poster--modal-handoff .event-poster__media>img {
  opacity: 1;
}

.event_page_main_wrapper .event-poster--video .event-poster-play,
.event_page_header_poster_host .event-poster--video .event-poster-play {
  display: flex;
  left: auto;
  right: 12px;
  top: 12px;
}

.event_page_main_wrapper .event-poster--video .event-poster__media.event-poster-preview--active .event-poster-preview-video,
.event_page_header_poster_host .event-poster--video .event-poster__media.event-poster-preview--active .event-poster-preview-video {
  display: block;
}

.event_page_main_wrapper .event-poster--video .event-poster__media.event-poster-preview--active img,
.event_page_header_poster_host .event-poster--video .event-poster__media.event-poster-preview--active img {
  opacity: 0;
}

.events_page .glightbox-container {
  z-index: 10000002 !important;
}

.events_page .glightbox-container .goverlay {
  background: rgba(0, 0, 0, 0.92);
}

.events_page .glightbox-container .gcontainer {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.events_page .glightbox-container .gslide-image img {
  object-fit: contain;
  max-height: min(90dvh,
      calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 72px));
  max-width: min(calc(100vw - 32px), 1200px);
  width: auto;
  height: auto;
}

.events_page .glightbox-container .gclose {
  width: 44px;
  height: 44px;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  opacity: 0.95;
}

.events_page .glightbox-container .gclose svg {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 768px) {

  .event_page_main_wrapper .event-poster__zoom-badge,
  .event_page_header_poster_host .event-poster__zoom-badge {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .event_page_main_wrapper .event-poster__zoom-icon,
  .event_page_header_poster_host .event-poster__zoom-icon {
    font-size: 1rem;
  }

  .events_page .glightbox-container .gslide-image img {
    max-height: min(88dvh,
        calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px));
    max-width: calc(100vw - 24px);
  }

  .events_page .glightbox-container .gclose {
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 1150px) {
  .event_page_main_wrapper .event-poster {
    max-width: 300px;
    height: 400px;
  }
}

@media screen and (max-width: 991px) {
  .event_page_main_wrapper .event-poster {
    max-width: 250px;
    height: 350px;
  }
}

@media screen and (max-width: 768px) {
  .event_page_main_wrapper .event-poster {
    max-width: 100%;
    width: 100%;
    height: 475px;
  }

  .event_page_header_poster_host:not(:empty) {
    width: auto;
    display: flex;
    justify-content: center;
  }

  .event_page_header_poster_host .event-poster {
    width: 160px;
    height: 225px;
    aspect-ratio: 32 / 45;
    border-radius: 12px;
  }
}

.event_page_main_wrapper .address-section,
.event_page_main_wrapper .promoter-section,
.event_page_main_wrapper .supported-by {
  border-radius: 8px;
  border: 1px solid var(--Medium-grey, #d4d9ec);
  background: var(--White, #fff);
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px 24px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.event_page_main_wrapper .address-section h3 {
  color: var(--Black, #000);

  /* Small Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 141.667% */
  letter-spacing: -0.48px;
  margin-bottom: 8px;
}

.event_page_main_wrapper .promoter-section h4,
.event_page_main_wrapper .other-events h4,
.event_page_main_wrapper .supported-by h4 {
  color: var(--Black, #000);

  /* Text Header */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;
}

.event_page_main_wrapper .promoter-section h4 a {
  color: var(--Blue, #187dfd);
  font-weight: inherit;
  text-decoration: none;
}

.event_page_main_wrapper .promoter-section h4 a:hover {
  text-decoration: underline;
}

.event_page_main_wrapper .venue-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event_page_main_wrapper .venue-info h4 {
  color: var(--Black, #000);

  /* Text Header */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;
}

.event_page_main_wrapper .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--Black, #000);

  /* Small Text */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
  flex-wrap: nowrap;
}

.event_page_main_wrapper .contact-item .icon {
  aspect-ratio: 1/1;
  flex: 0 0 24px;
}

.event_page_main_wrapper .contact-item .icon svg {
  width: 24px;
  height: 24px;
}

.event_page_main_wrapper .contact-item span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  word-break: break-word;
}

.event_page_main_wrapper .map-container {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  height: 320px;
  background: var(--Light-grey, #eff0f5);
  cursor: pointer;
}

.event_page_main_wrapper .map-placeholder {
  width: 100%;
  height: 100%;
  background: var(--Light-grey, #eff0f5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.event_page_main_wrapper .map-placeholder.has-map {
  background: var(--Light-grey, #eff0f5);
}

.event_page_main_wrapper .map-embed {
  width: 100%;
  height: 100%;
  border: 0;
  position: relative;
  z-index: 0;
}

.event_page_main_wrapper .map-content {
  text-align: center;
  display: inline-flex;
  height: 32px;
  padding: 4px 16px 4px 12px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 40px;
  background: var(--Soft-blue, #cde3ff);

  /* Medium Shadow */
  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);

  color: var(--Blue, #187dfd);

  /* Small text link */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
}

.event_page_main_wrapper .map-link {
  position: absolute;
  bottom: 12px;
  right: 25%;
  text-decoration: none;
  z-index: 2;
}

.event_page_main_wrapper .promoter-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--Medium-grey, #d4d9ec);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

.event_page_main_wrapper .promoter-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.event_page_main_wrapper .rating {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.event_page_main_wrapper .stars {
  color: #ffc107;
  margin-right: 8px;
}

.event_page_main_wrapper .rating-text {
  color: var(--Black, #000);

  /* Small text link */
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
  margin-right: 8px;
}

.event_page_main_wrapper .reviews {
  color: var(--Grey-text, #707696);

  /* Caption */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 128.571% */
}

.event_page_main_wrapper .promoter-description {
  color: var(--Grey-text, #707696);

  /* Small Text */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

.event_page_main_wrapper .other-events,
.event_page_main_wrapper .supported-by {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  width: 100%;
}

.event_page_main_wrapper .event-thumbnails,
.event_page_main_wrapper .sponsors-logos {
  gap: 8px;
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.event_page_main_wrapper .sponsors-logos {
  margin-top: 12px;
}

.event_page_main_wrapper .event-thumbnails img {
  width: 92px;
  height: 128px;
  border-radius: 6px;
  object-fit: cover;
}

.event_page_main_wrapper .promoter-link {
  color: var(--Blue, #187dfd);

  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 22.4px */
}

.event_page_main_wrapper .event-description {
  /* margin-bottom: 32px; */
}

.event_page_main_wrapper .event-description p {
  color: var(--Black, #000);

  /* Text */
  font-family: Inter;

  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.event_page_main_wrapper .notification-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event_page_main_wrapper .notification-badges-dynamic-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event_page_main_wrapper .notification-badges.placeholder-badges {
  flex-wrap: wrap;
  gap: 8px;
}

.event_page_main_wrapper .public-additional-settings {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Invite-only access component */
.invite-access-section {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-access-wrapper {
  border-radius: 8px;
  background: #eff0f5;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-access-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--SH-Light-Yellow, #fffbd5);
  color: #000;
}

.invite-access-alert-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.invite-access-alert-title {
  margin: 0;
  font-family: Inter;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.invite-access-card {
  border-radius: 8px;
  border: 1px solid var(--Medium-grey, #d4d9ec);
  background: #ffffff;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.invite-access-description {
  margin: 0;
  font-family: Inter;
  font-size: 14px;
  line-height: 1.5;
  color: var(--Grey-text, #707696);
}

.invite-access-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invite-access-label {
  font-family: Inter;
  font-size: 13px;
  font-weight: 600;
  color: var(--Black, #000);
}

.invite-access-input-row {
  display: flex;
  gap: 8px;
}

.invite-access-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  border-radius: 6px;
  border: 1px solid var(--Medium-grey, #d4d9ec);
  padding: 0 12px;
  font-family: Inter;
  font-size: 16px;
}

.invite-access-input:focus {
  outline: none;
  border-color: var(--Blue, #187dfd);
  box-shadow: 0 0 0 2px rgba(24, 125, 253, 0.2);
}

.invite-access-button {
  height: 52px;
  border-radius: 25px;
  border: none;
  padding: 0 24px;
  background: var(--Blue, #187dfd);
  color: #fff;
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-access-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.invite-access-message {
  margin: 0;
  font-family: Inter;
  font-size: 13px;
  line-height: 1.4;
}

.invite-access-message.error {
  color: #b00020;
}

.invite-access-message.success {
  color: #0f7b2b;
}

.event_page_main_wrapper .badge {
  display: flex;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid var(--Medium-grey, #d4d9ec);
  background: var(--White, #fff);
  gap: 16px;

  padding: 12px 24px;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.event_page_main_wrapper .badge-icon {
  /* margin-right: 16px; */
  font-size: 16px;
  flex-shrink: 0;
}

.event_page_main_wrapper .badge-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.event_page_main_wrapper .badge.badge--offer {
  background: #d4fff6;
  border: none;
}

.event_page_main_wrapper .badge.badge--offer .badge-icon--offer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1b1e21;
  color: #fff;
  flex-shrink: 0;
}

.event_page_main_wrapper .badge.badge--offer .badge-icon--offer .icon {
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

.event_page_main_wrapper .badge.badge--offer .badge-offer-title,
.event_page_main_wrapper .badge.badge--offer .badge-offer-subtitle {
  margin: 0;
  color: var(--Black, #000);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.event_page_main_wrapper .badge.badge--offer .badge-offer-subtitle {
  margin-bottom: 6px;
}

.event_page_main_wrapper .badge.badge--offer .badge-offer-body {
  margin: 0;
  color: var(--Black, #000);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.event_page_main_wrapper .sales-ended-badge {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  min-height: 64px;
  height: auto;
  border-radius: 8px;
  background: var(--SH-Light-Yellow, #fffbd5);
  border: none;
}

.event_page_main_wrapper .sales-ended-badge .badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0;
  flex-shrink: 0;
}

.event_page_main_wrapper .sales-ended-badge .badge-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.event_page_main_wrapper .sales-ended-badge .badge-content {
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.32px;
  min-width: 0;
  overflow-wrap: break-word;
  text-align: center;
}

.event_page_main_wrapper .sales-ended-badge .badge-title {
  /* margin: 0 0 4px; */
  font-size: 18px;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.36px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.event_page_main_wrapper .priority-pass-success-badge {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  height: 64px;
  border-radius: 8px;
  background: rgba(15, 123, 43, 0.15);
  border: none;
}

.event_page_main_wrapper .priority-pass-success-badge .badge-icon {
  font-size: 24px;
  margin: 0;
}

.event_page_main_wrapper .priority-pass-success-badge .badge-content-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event_page_main_wrapper .priority-pass-success-badge .badge-content {
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  letter-spacing: -0.36px;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 640px) {

  .event_page_main_wrapper .sales-ended-badge,
  .event_page_main_wrapper .priority-pass-success-badge {
    height: auto;
    min-height: 64px;
    align-items: center;
  }
}

.event_page_main_wrapper .badge-content h5 {
  color: var(--Black, #000);

  /* Text Header */
  font-family: Inter;
  font-size: 1.28571rem;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 1.41429rem */
  letter-spacing: -0.02571rem;
  overflow-wrap: break-word;
}

.event_page_main_wrapper .badge-content p {
  color: var(--Grey-text, #707696);

  /* Small Text */
  font-family: Inter;
  font-size: 1.14286rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  /* 1.6rem */
  overflow-wrap: break-word;
}

.event_page_main_wrapper .badge.skeleton-container {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background-color: #eff0f5;
  overflow: hidden;
}

.event_page_main_wrapper .badge-icon.skeleton-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg,
      #e0e0f3 25%,
      #e0e0e0 50%,
      #e0e0e0 75%) !important;
  border-radius: 50%;
}

/* ===== 5. Skeleton loading ===== */
.events_page .skeleton-wrapper {
  display: none;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

.is-loading .events_page .skeleton-wrapper {
  display: block;
}

.events_page .skeleton {
  display: block;
  background: linear-gradient(90deg, #e6e8f1 25%, #f2f3f8 50%, #e6e8f1 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.events_page .skeleton-line {
  height: 14px;
  margin: 8px 0;
}

.events_page .skeleton-rect {
  height: 16px;
}

.events_page .skeleton-circle {
  border-radius: 50%;
}

.events_page .sk-w-30 {
  width: 30%;
}

.events_page .sk-w-45 {
  width: 45%;
}

.events_page .sk-w-60 {
  width: 60%;
}

.events_page .sk-w-75 {
  width: 75%;
}

.events_page .sk-w-90 {
  width: 90%;
}

.events_page .sk-h-10 {
  height: 10px;
}

.events_page .sk-h-14 {
  height: 14px;
}

.events_page .sk-h-18 {
  height: 18px;
}

.events_page .sk-h-24 {
  height: 24px;
}

.events_page .sk-48 {
  width: 48px;
  height: 48px;
}

.events_page .sk-64 {
  width: 64px;
  height: 64px;
}

.events_page .sk-32 {
  width: 32px;
  height: 32px;
}

.events_page .skeleton-grid {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.events_page .skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure skeleton lines can fill flex rows */
.events_page .skeleton-grid .skeleton-line {
  flex: 1 1 auto;
  min-width: 0;
}

/* Venue block: lines use sk-w-* elsewhere; sidebar should read full-width */
.events_page .venue-skeleton {
  width: 100%;
  box-sizing: border-box;
}

.events_page .venue-skeleton>.skeleton-line {
  width: 100%;
}

.events_page .venue-skeleton .skeleton-grid .skeleton-line {
  width: auto;
  flex: 1 1 auto;
}

/* Booking column: skeleton mirrors dates, times, tickets, summary, CTAs, gallery */
.events_page .presales-iframe-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.events_page .presales-iframe-wrapper iframe {
  width: 100%;
  min-height: 500px;
  height: 100vh;
  border: none;
  background: #fff;
}

.events_page .booking-shell {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: var(--Light-grey, #eff0f5);
  border-radius: 8px;
  /* padding: 16px; */
}

@media screen and (max-width: 768px) {
  .events_page .booking-shell {
    padding: 0px;
  }
}

.events_page .booking-seating-slot[hidden] {
  display: none !important;
}

.events_page .booking-seating-slot:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.events_page .booking-seated-panel {
  width: 100%;
  box-sizing: border-box;
}

.booking-shell-live {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.events_page .booking-shell-skeleton {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 8px;
}

.events_page .booking-shell--loading .booking-shell-skeleton {
  display: block;
}

.events_page .booking-shell--loading .booking-shell-live {
  display: none;
}

.events_page .booking-skeleton-block {
  margin-bottom: 20px;
}

.events_page .booking-skeleton-title {
  height: 22px;
  width: 42%;
  max-width: 200px;
  margin: 0 0 12px;
  border-radius: 6px;
}

.events_page .booking-skeleton-title--sm {
  width: 36%;
  max-width: 160px;
  margin-bottom: 12px;
}

.events_page .booking-skeleton-month-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 14px;
  overflow: hidden;
}

.events_page .booking-skeleton-month-pill {
  height: 22px;
  width: 72px;
  flex-shrink: 0;
  border-radius: 4px;
}

.events_page .booking-skeleton-date-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  margin-left: -4px;
  margin-right: -4px;
  width: calc(100% + 8px);
  padding-bottom: 4px;
}

.events_page .booking-skeleton-date-card {
  flex: 0 0 auto;
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  height: 76px;
  border-radius: 10px;
}

.events_page #dateGrid.date-grid--skeleton {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 12px;
  width: max-content;
  max-width: none;
}

.events_page .calendar-section--date-grid-loading .dates-scroll-btn {
  display: none !important;
}

@media screen and (max-width: 640px) {
  .events_page .calendar-section.calendar-section--dates-grid-mobile #dateGrid.date-grid--skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
  }

  .events_page .booking-skeleton-date-card {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 63px;
    border-radius: 8px;
  }
}

.events_page .booking-skeleton-time-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow: hidden;
  padding-bottom: 4px;
}

.events_page .booking-skeleton-time-pill {
  flex: 0 0 auto;
  height: 44px;
  width: 88px;
  border-radius: 999px;
}

.events_page .booking-skeleton-tickets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.events_page .booking-skeleton-ticket-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 88px;
  padding: 18px 20px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

.events_page .booking-skeleton-ticket-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.events_page .booking-skeleton-ticket-card__line {
  margin: 0;
  height: 16px;
  max-width: 100%;
}

.events_page .booking-skeleton-qty {
  flex-shrink: 0;
  width: 148px;
  height: 44px;
  border-radius: 8px;
}

.events_page .booking-skeleton-summary {
  margin-bottom: 16px;
}

.events_page .booking-skeleton-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.events_page .booking-skeleton-summary__label {
  margin: 0;
  height: 16px;
  width: 38%;
  max-width: 140px;
}

.events_page .booking-skeleton-summary__amount {
  margin: 0;
  height: 16px;
  width: 72px;
  flex-shrink: 0;
}

.events_page .booking-skeleton-summary__divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0 14px;
}

.events_page .booking-skeleton-summary__total-label {
  margin: 0;
  height: 22px;
  width: 45%;
  max-width: 160px;
}

.events_page .booking-skeleton-summary__total-amount {
  margin: 0;
  height: 22px;
  width: 88px;
  flex-shrink: 0;
}

.events_page .booking-skeleton-ctas {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 28px;
}

.events_page .booking-skeleton-cta {
  width: 100%;
  height: 52px;
  border-radius: 10px;
}

.events_page .booking-skeleton-instagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}

.events_page .booking-skeleton-ig-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .events_page .booking-skeleton-ctas {
    flex-direction: row;
    gap: 12px;
  }

  .events_page .booking-skeleton-cta {
    flex: 1;
    min-width: 0;
  }
}

/* Hide real content while loading */
.is-loading .events_page .event-poster> :not(.poster-skeleton) {
  display: none !important;
}

.is-loading .events_page .event_page_header_content> :not(.header-skeleton) {
  display: none !important;
}

.is-loading .events_page .header-skeleton {
  display: block;
}

.is-loading .events_page .event_page_header_content> :not(.header-skeleton) {
  display: none !important;
}

/* Header skeleton layout (title + metadata + pill row) */
.events_page .header-skeleton {
  margin: 12px 0 6px;
}

.events_page .header-skeleton-mobile {
  display: none;
}

.events_page .header-skeleton .skeleton-stack {
  gap: 6px;
}

.events_page .header-skeleton-pills {
  margin-top: 10px;
  gap: 10px;
}

.events_page .header-skeleton-pills .skeleton-rect {
  height: 32px;
  border-radius: 999px;
}

.events_page .header-skeleton-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.events_page .header-skeleton-organizer-text {
  flex: 1 1 200px;
  min-width: 140px;
  max-width: 300px;
  margin: 0;
}

.events_page .header-skeleton-follow-pill {
  width: 80px;
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
}

.events_page .header-skeleton-calendar-pill {
  width: min(240px, 70vw);
  height: 32px;
  border-radius: 999px;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .is-loading .events_page .event_page_header_content {
    padding: 0;
  }

  .events_page .header-skeleton {
    margin: 0;
    width: 100%;
  }

  .events_page .header-skeleton-desktop {
    display: none;
  }

  .events_page .header-skeleton-mobile {
    display: block;
    width: 100%;
  }

  .events_page .header-skeleton-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 24px 16px;
    background: #1a1a1a;
  }

  .events_page .header-skeleton-poster {
    width: 160px;
    height: 225px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .events_page .header-skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 16px;
    background: #000;
    box-sizing: border-box;
  }

  .events_page .header-skeleton-body .skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.08) 75%);
    background-size: 200% 100%;
  }

  .events_page .header-skeleton-hero .skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
  }

  .events_page .header-skeleton-body .header-skeleton-meta-row {
    margin-top: 0;
    flex-wrap: nowrap;
  }

  .events_page .header-skeleton-body .header-skeleton-organizer-text {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
  }

  .events_page .header-skeleton-body .header-skeleton-follow-pill {
    width: 72px;
    height: 28px;
  }

  .events_page .header-skeleton-followers-text {
    width: 88px;
    flex-shrink: 0;
    margin: 0;
  }

  .events_page .header-skeleton-location {
    width: 100%;
    margin: 0;
  }

  .events_page .header-skeleton-calendar-pill--mobile {
    width: 100%;
    height: 40px;
    border-radius: 40px;
    flex: 0 0 100%;
  }

  .events_page .header-skeleton-body .header-skeleton-pills {
    margin-top: 0;
  }

  .events_page .header-skeleton-buy-btn {
    width: 100%;
    height: 48px;
    border-radius: 6px;
  }

  .events_page .header-skeleton-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .events_page .header-skeleton-share-title {
    width: 48px;
    height: 16px;
    margin: 0;
  }

  .events_page .header-skeleton-share-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .events_page .header-skeleton-share-icons .skeleton-rect {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}

.is-loading .events_page .venue-info> :not(.venue-skeleton) {
  display: none !important;
}

.is-loading .events_page .promoter-section> :not(.promoter-skeleton) {
  display: none !important;
}

.is-loading .events_page .description-content> :not(.description-skeleton) {
  display: none !important;
}

.is-loading .events_page .event-thumbnails> :not(.thumbnails-skeleton) {
  display: none !important;
}

/* Sidebar hero video — skeleton sits in .sidebar-video-card (normally background #000) */
.is-loading .events_page .sidebar-video-card {
  background: #e6e8f1;
}

.is-loading .events_page .sidebar-video-card .hero_section {
  display: none !important;
}

.is-loading .events_page .sidebar-video-card .video-player-container {
  display: none !important;
}

.is-loading .events_page .video-hero-skeleton {
  display: block !important;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
}

.is-loading .events_page .video-hero-skeleton__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 160px;
  margin: 0;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Location heading */
.is-loading .events_page .address-section-heading {
  display: none !important;
}

.is-loading .events_page .address-section-heading-skeleton {
  display: block !important;
  margin-bottom: 8px;
}

.is-loading .events_page .address-section-heading-skeleton .skeleton {
  height: 20px;
  max-width: 180px;
  margin-bottom: 0;
}

/* Other events block in sidebar */
.is-loading .events_page .other-events>h4,
.is-loading .events_page .other-events>.event-thumbnails,
.is-loading .events_page .other-events>a.promoter-link {
  display: none !important;
}

.is-loading .events_page .other-events-skeleton {
  display: block !important;
  margin-top: 8px;
}

.is-loading .events_page .other-events-skeleton .skeleton-line {
  max-width: 160px;
  margin-bottom: 12px;
}

.is-loading .events_page .other-events-skeleton__thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.is-loading .events_page .other-events-skeleton__thumbs .skeleton {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  margin: 0;
}

/* Description section title */
.is-loading .events_page .description-section>.section-title {
  display: none !important;
}

.is-loading .events_page .description-section-title-skeleton {
  display: block !important;
  margin-bottom: 16px;
}

.is-loading .events_page .description-section-title-skeleton .skeleton {
  height: 24px;
  max-width: 200px;
  margin: 0;
}

/* Reviews block (reviews load after event details promise) */
.is-loading .events_page .events-reviews-terms-section>.reviews-section {
  display: none !important;
}

.is-loading .events_page .events-reviews-terms-skeleton {
  display: block !important;
}

.is-loading .events_page .events-reviews-terms-skeleton .skeleton-line {
  margin: 10px 0;
}

.is-loading .events_page .events-reviews-terms-skeleton__cards .skeleton {
  height: 120px;
  border-radius: 12px;
  margin: 0 0 10px;
}

.events_page .poster-skeleton {
  height: 100%;
}

.events_page .poster-skeleton .skeleton {
  height: 100%;
  width: 100%;
}

.events_page .thumbnails-skeleton {
  display: flex;
  gap: 8px;
  width: 100%;
}

.events_page .thumbnails-skeleton .skeleton {
  width: 72px;
  height: 72px;
  border-radius: 8px;
}

.event_page_main_wrapper .datetime-section {
  margin-bottom: 32px;
}

.event_page_main_wrapper .datetime-section h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.event_page_main_wrapper .month-year {
  font-size: 14px;
  color: var(--text-gray);
  margin-bottom: 16px;
}

.event_page_main_wrapper .date-selector {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.event_page_main_wrapper .nav-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-gray);
}

.event_page_main_wrapper .dates {
  display: flex;
  gap: 8px;
  margin: 0 16px;
}

.event_page_main_wrapper .date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 60px;
  background: white;
}

.event_page_main_wrapper .date-item.active {
  background: #2196f3;
  color: white;
  border-color: #2196f3;
}

.event_page_main_wrapper .date-number {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.event_page_main_wrapper .date-label {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}

.event_page_main_wrapper .time-selection h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #212121;
}

.event_page_main_wrapper .time-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.event_page_main_wrapper .time-btn {
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s;
}

.event_page_main_wrapper .time-btn.active {
  background: #2196f3;
  color: white;
  border-color: #2196f3;
}

.event_page_main_wrapper .duration-info {
  font-size: 13px;
  color: var(--text-gray);
}

.event_page_main_wrapper .seating-section {
  margin-bottom: 32px;
}

.event_page_main_wrapper .seating-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.event_page_main_wrapper .stage-label {
  font-size: 14px;
  color: #757575;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 24px;
}

.event_page_main_wrapper .zoom-controls {
  display: flex;
  gap: 4px;
}

.event_page_main_wrapper .zoom-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-gray);
}

.event_page_main_wrapper .seating-chart {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  min-height: 400px;
}

.event_page_main_wrapper .stage {
  background: var(--background-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-gray);
}

.event_page_main_wrapper .seating-tier {
  margin-bottom: 20px;
  position: relative;
}

.event_page_main_wrapper .tier-label {
  font-size: 14px;
  color: #424242;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 600;
}

.event_page_main_wrapper .seats-grid {
  display: grid;
  gap: 2px;
  justify-content: center;
}

.event_page_main_wrapper .dress-circle-seats {
  grid-template-columns: repeat(40, 6px);
  margin-bottom: 16px;
}

.event_page_main_wrapper .stalls-seats {
  grid-template-columns: repeat(50, 6px);
  margin-bottom: 16px;
}

.event_page_main_wrapper .balcony-seats {
  grid-template-columns: repeat(35, 6px);
}

.event_page_main_wrapper .seat {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  cursor: pointer;
}

.event_page_main_wrapper .fullscreen-btn {
  background: none;
  border: none;
  color: #2196f3;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 0.2s;
}

.event_page_main_wrapper .fullscreen-btn:hover {
  color: #1976d2;
  text-decoration: underline;
}

.event_page_main_wrapper .special-offer {
  background: #00bcd4;
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 14px;
  color: white;
  margin-bottom: 16px;
  font-weight: 600;
  text-align: center;
}

.event_page_main_wrapper .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
  margin-top: 24px;
}

.event_page_main_wrapper .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.event_page_main_wrapper .legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event_page_main_wrapper .legend-dot.early-bird {
  background: #ffb300;
}

.event_page_main_wrapper .legend-dot.regular {
  background: #2196f3;
}

.event_page_main_wrapper .legend-dot.balcony {
  background: var(--balcony);
}

.event_page_main_wrapper .legend-dot.vip {
  background: #f44336;
}

.event_page_main_wrapper .legend-dot.disability {
  background: var(--disability);
}

.event_page_main_wrapper .legend-dot.unavailable {
  background: var(--unavailable);
}

.event_page_main_wrapper .legend-dot.selected {
  background: var(--selected);
}

.event_page_main_wrapper .ticket-selection {
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
}

.event_page_main_wrapper .main-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;

  flex: 1;
  /* Take remaining space */
  min-width: 0;
  /* Allow shrinking below content size */
  gap: 40px;
}

@media (max-width: 1024px) {
  .event_page_main_wrapper .container {
    flex-direction: column;
  }

  .event_page_main_wrapper .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
}

@media (max-width: 768px) {
  .event_page_main_wrapper .sidebar {
    border-bottom: none;
    padding: 0;
  }

  .event_page_main_wrapper .dates {
    flex-wrap: wrap;
  }

  .event_page_main_wrapper .legend {
    flex-direction: column;
    gap: 8px;
  }

  .event_page_main_wrapper .ticket-type {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .event_page_main_wrapper .quantity-selector {
    width: 100%;
    justify-content: space-between;
  }

  .event_page_main_wrapper .main-container .events-purchase-section {
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .events_page .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .event_page_main_wrapper .main-content {
    width: 100%;
    min-width: 0;
  }
}

.events_page .tickets-card .ticket-card-header {
  display: none;
}

/* ===== 6. Hero section ===== */
.hero_section {
  /* padding: 2rem 0; */
}

.video-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  border-radius: var(--video-border-radius);
  overflow: hidden;
  box-shadow: var(--video-shadow-lg);
  cursor: pointer;
  transition: var(--video-transition);
}

.video-container:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  transition: var(--video-transition);
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  transition: var(--video-transition);
}

.video-container:hover .video-overlay {
  background: rgba(0, 0, 0, 0.1);
}

.play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--video-transition);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-button svg {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Description Section */
.description-section {
  /* background-color: var(--video-background); */
}

.section-title {
  margin-bottom: 16px;
  text-align: left;

  /* Medium Header */
  font-family: Inter;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}

.description-content {
  /* max-width: 800px; */
  color: var(--Black, #000);

  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 20.8px */
}

.description-content p {
  /* margin-bottom: 1.5rem; */
  margin: 0;
}

.contact-link {
  color: var(--Blue, #187dfd);

  /* Small Text */
  font-family: Inter;
  font-size: 1.14286rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

.contact-link:hover {
  color: #1d4ed8;
}

/* Terms Section */
.terms-content {
  max-height: none;
  overflow: visible;
}

.terms-intro {
  color: var(--video-text-muted);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.terms-list,
.terms-body ul {
  list-style: none;
  padding: 0;
}

.terms-list li,
.terms-body ul li,
.terms-body p {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  /* color: var(--video-text-muted); */
  color: var(--Grey-text, #707696);

  /* Caption */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}

.terms-list li::before,
.terms-body ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--video-primary-color);
  font-weight: bold;
}

.terms-body a {
  color: var(--video-primary-color);
  text-decoration: underline;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.description-section,
.reviews-section,
.terms-section {
  animation: fadeInUp 0.8s ease-out;
}

/* Focus States for Accessibility */
.play-button:focus,
.carousel-nav:focus {
  outline: 2px solid var(--video-primary-color);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --video-text-muted: #000000;
    --shadow-md:
      0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.event_page_main_wrapper .main-container {
  margin: 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.event_page_main_wrapper .main-container .events-purchase-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 100px;
  background: var(--Light-grey, #eff0f5);
}

@media screen and (max-width: 768px) {
  .event_page_main_wrapper .main-container .events-purchase-section {
    padding: 0;
  }
}

.event_page_main_wrapper .main-container .events-purchase-section-wrapper {
  background: var(--Light-grey, #eff0f5);
  /* padding: 22px 22px 32px 22px; */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
}

@media (max-width: 480px) {
  .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    padding: 16px;
  }
}

.event_page_main_wrapper .main-container .events-reviews-terms-section {
  /* margin-top: 71px; */
  display: flex;
  flex-direction: column;
  gap: 71px;
}

.seating-legend-host {
  width: 100%;
  margin-top: 1rem;
}

.seating-plan-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 320px;
  margin-top: 1rem;
  padding: 32px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--Light-grey, #eff0f5);
}

.seating-plan-loading.seating-plan-loading--visible {
  display: flex;
}

.seating-plan-loading__text {
  margin: 0;
  color: var(--Deep-Grey, #1b1e21);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .seating-plan-loading {
    min-height: 480px;
  }
}

.ticket-section-stack {
  position: relative;
}

.ticket-section-stack--busy {
  min-height: 420px;
}

.ticket-section--skeleton {
  pointer-events: none;
}

.ticket-section-skeleton {
  width: 100%;
}

.events_page .ticket-actions--seated-map-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.events_page .ticket-actions--seated-map-hint .seated-map-hint {
  font-size: 13px;
  color: #6b7280;
  text-align: right;
}

.seating-legend {
  background: #212126;
  color: #fff;
  border-radius: 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 12px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.seating-legend__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.seating-legend__row--status {
  margin-top: 8px;
}

.seating-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.seating-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.seating-legend__swatch--unavailable {
  background: #6b7280;
}

.seating-legend__swatch--reserved {
  background: transparent;
  border: 2px solid #fff;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
}

.seating-legend__label {
  color: #fff;
  min-width: 0;
}

.reviews-section .title {
  text-align: center;
}

.reviews-section .title,
.terms-section .title {
  color: var(--Black, #000);

  /* Small Header */
  font-family: Inter;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.terms-section .title {
  margin: 0 0 1rem;
  text-align: left;
}

/* ===== 7. Video player ===== */
/* Video Player Container */
.video-player-container {
  background: var(--video-background);
  border-radius: var(--video-border-radius);
  box-shadow: var(--video-shadow-lg);
  overflow: hidden;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  background: #000;
  overflow: hidden;
}

/* Video Element */
.video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: var(--video-transition);
}

.video-element:hover {
  filter: brightness(1.05);
}

/* Play Button Overlay */
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  transition: var(--video-transition);
  z-index: 10;
}

.play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.play-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--video-transition);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.play-button:hover {
  transform: scale(1.1);
}

.play-button:active {
  transform: scale(0.95);
}

.play-icon {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: var(--video-transition);
}

.play-button:hover .play-icon {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

/* Loading Spinner */
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: var(--video-transition);
}

.loading-spinner.visible {
  opacity: 1;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Video Controls */
.video-controls {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
  color: white;
  padding: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: var(--video-transition);
  z-index: 20;
}

.video-player-container:hover .video-controls,
.video-controls.visible {
  transform: translateY(0);
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.controls-row:last-child {
  margin-bottom: 0;
}

/* Progress Bar */
.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  transition: var(--video-transition-fast);
}

.progress-bar:hover {
  height: 8px;
}

.progress-filled {
  height: 100%;
  background: var(--video-primary-color);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s ease;
  position: relative;
}

.progress-handle {
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--video-primary-color);
  border-radius: 50%;
  opacity: 0;
  transition: var(--video-transition-fast);
  cursor: pointer;
}

.progress-bar:hover .progress-handle {
  opacity: 1;
}

.time-display {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  min-width: 80px;
}

.time-separator {
  margin: 0 0.25rem;
  opacity: 0.7;
}

/* Control Buttons */
.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.controls-left {
  flex: 1;
}

.control-button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: var(--video-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.control-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.control-button:active {
  transform: scale(0.95);
}

.control-button svg {
  width: 20px;
  height: 20px;
  transition: var(--video-transition-fast);
}

/* Play/Pause Button */
.play-pause-btn .pause-svg {
  display: none;
}

.play-pause-btn.playing .play-svg {
  display: none;
}

.play-pause-btn.playing .pause-svg {
  display: block;
}

/* Volume Controls */
.volume-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.volume-btn .volume-muted-svg {
  display: none;
}

.volume-btn.muted .volume-high-svg {
  display: none;
}

.volume-btn.muted .volume-muted-svg {
  display: block;
}

.volume-slider-container {
  width: 0;
  overflow: hidden;
  transition: var(--video-transition);
}

.volume-container:hover .volume-slider-container {
  width: 80px;
  margin-left: 0.5rem;
}

.volume-slider {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--video-primary-color);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--video-transition-fast);
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--video-primary-color);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: var(--video-transition-fast);
}

.volume-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Fullscreen Button */
.fullscreen-btn .fullscreen-exit-svg {
  display: none;
}

.fullscreen-btn.fullscreen .fullscreen-enter-svg {
  display: none;
}

.fullscreen-btn.fullscreen .fullscreen-exit-svg {
  display: block;
}

/* Video Information */
.video-info {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.video-info h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--video-text-color);
}

.video-info p {
  color: var(--video-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 1rem 0.5rem;
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .video-controls {
    padding: 0.75rem;
  }

  .controls-row {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .control-button {
    padding: 0.375rem;
  }

  .control-button svg {
    width: 18px;
    height: 18px;
  }

  .play-icon {
    width: 60px;
    height: 60px;
  }

  .time-display {
    font-size: 0.75rem;
    min-width: 70px;
  }

  .volume-container:hover .volume-slider-container {
    width: 60px;
  }

  .volume-slider {
    width: 60px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0.5rem 0.25rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  .video-controls {
    padding: 0.5rem;
  }

  .controls-row {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .control-button {
    padding: 0.25rem;
  }

  .control-button svg {
    width: 16px;
    height: 16px;
  }

  .play-icon {
    width: 50px;
    height: 50px;
  }

  .time-display {
    font-size: 0.7rem;
    min-width: 60px;
  }

  .progress-bar {
    height: 4px;
  }

  .progress-bar:hover {
    height: 6px;
  }

  .progress-handle {
    width: 10px;
    height: 10px;
    right: -5px;
  }

  /* Hide volume slider on very small screens */
  .volume-slider-container {
    display: none;
  }
}

/* Fullscreen Styles */
.video-player-container:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

.video-player-container:-moz-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

.video-player-container:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

/* Focus States for Accessibility */
.play-button:focus,
.control-button:focus,
.progress-bar:focus,
.volume-slider:focus {
  outline: 2px solid var(--video-primary-color);
  outline-offset: 2px;
}

.events_page .other_events_section {
  margin-bottom: 72px;
  padding-top: 0px;
}

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

/* ===== 8. Reviews carousel ===== */
.reviews-section {
  background-color: var(--reviews-background);
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 12px;
}

.reviews-container {
  width: 100%;
  max-width: 100%;
}

/* Header */
.reviews-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 16px;
}

.reviews-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--reviews-text);
  margin: 0;
  flex: 1 1 auto;
}

.slide-indicator {
  color: var(--reviews-indicator);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0.75rem;
}

.reviews-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reviews-sort-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.reviews-sort-label {
  color: var(--reviews-text);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.reviews-sort-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reviews-sort-select {
  border: none;
  outline: none;
  background: transparent;
  color: var(--primary-blue);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  padding: 0 1rem 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.reviews-sort-select-wrapper::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Navigation Buttons */
.nav-button {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #c4cde5;
  color: var(--reviews-nav-arrow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: var(--transition-smooth);
}

.nav-button:hover:not(:disabled) {
  background-color: #e8edf9;
  border-color: #a9b8df;
  transform: scale(1.05);
}

.nav-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--reviews-indicator);
}

.nav-button:disabled {
  opacity: 1;
  color: #bcc6e3;
  border-color: #d5ddee;
  cursor: not-allowed;
}

/* Reviews List (paginated vertical feed) */
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.reviews-list-empty,
.reviews-list-error {
  text-align: center;
  color: var(--reviews-indicator);
  font-size: 1.125rem;
  padding: 2rem 1rem;
}

/* Review Card */
.review-card {
  background-color: var(--reviews-card);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid var(--reviews-card-shadow);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.review-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Review Rating */
.review-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.star {
  font-size: 1.25rem;
  line-height: 1;
}

.star.filled {
  color: var(--reviews-star);
}

.star.empty {
  color: var(--reviews-star-empty);
}

.star.half,
.star.partial {
  position: relative;
  color: var(--reviews-star-empty);
}

.star.half .star-fill,
.star.partial .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: var(--reviews-star);
}

.star.partial .star-fill {
  width: 80%;
  /* Adjust for different partial ratings */
}

.rating-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--reviews-text);
  margin-left: 0.5rem;
}

/* Review Text */
.review-text {
  color: var(--reviews-text);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* Review Author */
.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

.author-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--reviews-card-shadow);
  flex-shrink: 0;
}

.author-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-blue);
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
}

.author-info {
  flex: 1;
}

.author-name {
  font-weight: 600;
  color: var(--reviews-text);
  margin: 0;
}

/* Reviews Footer (CTA Button) */
.reviews-footer {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--reviews-card-shadow);
}

.reviews-see-all-btn {
  padding: 0.875rem 2rem;
  background-color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  border-radius: 25px;
  cursor: pointer;
  transition: var(--transition-smooth);
  color: var(--White, #fff);

  /* Small text link */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 20.8px */
  letter-spacing: -0.32px;
}

.reviews-see-all-btn:hover {
  background-color: var(--primary-blue);
  color: var(--white);
}

.reviews-see-all-btn:active {
  transform: scale(0.98);
}

/* Responsive Design */
@media (max-width: 767px) {
  .reviews-section {
    padding: 1.5rem 1rem;
  }

  .reviews-header {
    flex-direction: column;
    align-items: center;
  }

  .reviews-title {
    font-size: 1.5rem;
    width: auto;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .reviews-controls {
    align-self: center;
  }

  .nav-button {
    width: 2rem;
    height: 2rem;
  }

  .reviews-sort-label,
  .reviews-sort-select {
    font-size: 1rem;
  }

  .reviews-list {
    gap: 1rem;
  }

  .review-card {
    padding: 1.25rem;
  }

  .reviews-see-all-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .reviews-section {
    padding: 1.5rem 0.5rem;
  }

  .review-card {
    padding: 1rem;
  }

  .review-text {
    font-size: 0.9375rem;
  }

  .author-avatar,
  .author-avatar-fallback {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }
}

/* Animation Classes */
.fade-in {
  animation: fade-in 0.4s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scale-in {
  animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Focus Styles for Accessibility */
.nav-button:focus-visible {
  outline: 2px solid var(--reviews-indicator);
  outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .review-card {
    border: 2px solid var(--reviews-text);
  }

  .nav-button {
    border: 2px solid var(--reviews-text);
  }
}

/* ===== 9. Promo code card ===== */
/* Promo Code Card */
.event_page_main_wrapper .ui.promocode-card {
  border-radius: 0;
  background: var(--White, #fff);
  /* padding: 22px; */
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.event_page_main_wrapper .ui.promocode-card .content {
  padding: 16px 0;
}

@media screen and (max-width: 970px) {
  .event_page_main_wrapper .ui.promocode-card {
    /* padding: 18px; */
  }
}

.event_page_main_wrapper .ui.promocode-card .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  padding: 0;
}

.event_page_main_wrapper .ui.promocode-card .title .dropdown.right.icon {
  transform: rotate(90deg);
  margin-left: 6px;
  margin-right: 0;
}

.event_page_main_wrapper .ui.promocode-card .title.active .dropdown.right.icon {
  transform: rotate(270deg);
}

.event_page_main_wrapper .ui.promocode-card .title .percent-icon-wrapper {
  background: #000;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  padding: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50px;
  margin-right: 6px;
}

.event_page_main_wrapper .ui.promocode-card .title .percent-icon-wrapper .percent.icon {
  margin: 0;
}

.event_page_main_wrapper .ui.promocode-card .title .dropdown.icon {
  margin-top: 6px;
  margin-left: 6px;
}

.event_page_main_wrapper .ui.promocode-card .promo-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e7eb;
  height: 50px;
  font-size: 16px;
  border-radius: 6px;
  background: var(--Light-grey, #eff0f5);
  margin-bottom: 16px;
}

.event_page_main_wrapper .ui.promocode-card .add-code-btn {
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
  background: var(--Blue, #187dfd);
  color: var(--light-text-color, #fff);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.72px;
}

.event_page_main_wrapper .ui.promocode-card .add-code-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

.event_page_main_wrapper .ui.promocode-card .ui.basic.styled.accordion {
  width: 100%;
  /* padding-top: 8px; */
  /* padding-bottom: 8px; */
  border: none;
  box-shadow: none;
  padding: 0;
}

.event_page_main_wrapper .ui.styled.accordion>.content .help-text {
  color: var(--Grey-text, #7f86a4);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

/* ===== 10. Seating plan & venue map modal ===== */

#venue-map-modal {
  font-family: var(--font-family) !important;
}

#venue-map-modal .header .modal-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

#venue-map-modal .event-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}

#venue-map-modal .venue-name {
  font-size: var(--font-size-sm);
  color: var(--text-gray);
  font-weight: 500;
}

.venue-map-container {
  position: relative;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

.section-quick-select-container .ui.button {
  margin: 0 4px 4px 0 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  background: white !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease !important;
}

.section-quick-select-container .ui.button:hover {
  background: var(--primary-blue) !important;
  color: white !important;
  border-color: var(--primary-blue) !important;
  transform: translateY(-1px);
}

.section-quick-select-container .ui.button.highlighted {
  background: var(--primary-blue) !important;
  color: white !important;
  border-color: var(--primary-blue) !important;
}

.section-quick-select-container .price {
  font-weight: 600;
  margin-left: 5px;
  opacity: 0.8;
}

.venue-map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.venue-map-loading .spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

.venue-map-loading p {
  color: var(--text-gray);
  font-size: var(--font-size-sm);
  margin: 0;
}

.venue-map-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #f44336;
  font-size: var(--font-size-sm);
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Selected Seats Panel */
.selected-seats-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid var(--primary-blue);
}

.selected-seats-panel h4 {
  margin: 0 0 15px 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-dark);
}

.selected-seats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.selected-seat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.selected-seat-item:last-child {
  border-bottom: none;
}

.selected-seat-item .seat-info {
  flex: 1;
}

.selected-seat-item .seat-info strong {
  color: var(--text-dark);
  font-weight: 600;
}

.selected-seat-item .seat-price {
  font-weight: 700;
  color: var(--primary-blue);
  font-size: var(--font-size-base);
}

.selected-seats-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 2px solid var(--border-color);
  margin-top: 15px;
}

.selected-seats-total .total-seats {
  font-weight: 600;
  color: var(--text-dark);
  font-size: var(--font-size-base);
}

.selected-seats-total .total-amount {
  font-weight: 700;
  color: var(--primary-blue);
  font-size: var(--font-size-lg);
}

#venue-map-modal .actions {
  padding: 20px 30px !important;
  background: var(--background-light);
  border-top: 1px solid var(--border-color);
}

#venue-map-modal .ui.button {
  font-family: var(--font-family) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-size: var(--font-size-sm) !important;
}

#venue-map-modal .ui.primary.button {
  background: var(--primary-blue) !important;
  transition: all 0.2s ease !important;
}

#venue-map-modal .ui.primary.button:hover {
  background: var(--blue-hover) !important;
  transform: translateY(-1px);
}

/* Legend Styles */
.price-level-legend,
.venue-map-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  min-width: 180px;
}

.price-level-legend h4,
.venue-map-legend h4 {
  margin: 0 0 12px 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-dark);
}

.price-level-item,
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.price-level-item:last-child,
.legend-item:last-child {
  margin-bottom: 0;
}

.price-level-color,
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.price-level-name,
.legend-label {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--text-dark);
  font-weight: 500;
}

.price-level-range {
  font-size: var(--font-size-xs);
  color: var(--text-gray);
  font-weight: 500;
}

/* Instructions */
.venue-map-instructions {
  margin-top: 8px;
}

.venue-map-instructions small {
  display: block;
  line-height: 1.4;
}

/* Select Seats Button Enhancement */
/* Remove .temporarily-hidden to re-enable Select Seats */
.temporarily-hidden {
  display: none !important;
}

.select-seats-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
}

.select-seats-btn::before {
  /* content: "🎫";
  margin-right: 8px; */
}

.select-seats-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 125, 253, 0.3);
}

.select-seats-btn:disabled:hover,
.select-seats-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

.select-seats-btn:active {
  transform: translateY(0);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  #venue-map-modal .modal-header-content {
    padding: 15px;
  }

  #venue-map-modal .event-title {
    font-size: var(--font-size-lg);
  }

  .venue-map-container {
    height: 400px !important;
    min-height: 400px !important;
  }

  .section-quick-select-container {
    justify-content: center;
  }

  .section-quick-select-container .ui.button {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  .selected-seats-panel {
    margin: 10px;
    padding: 15px;
  }

  .price-level-legend,
  .venue-map-legend {
    position: relative;
    top: auto;
    right: auto;
    margin: 15px;
    width: auto;
  }

  .venue-map-instructions small {
    font-size: 11px;
  }
}

/* Print Styles */
@media print {

  #venue-map-modal,
  .venue-map-container {
    display: none !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .venue-map-container {
    background: #1a1a1a;
  }

  .selected-seats-panel,
  .price-level-legend,
  .venue-map-legend {
    background: #2d2d2d;
    color: #ffffff;
  }

  .venue-map-loading {
    background: rgba(45, 45, 45, 0.95);
    color: #ffffff;
  }
}

/* ===== 11. Legacy inline booking components ===== */
/*
 * Prototype / venue-map inline styles removed (unused in events-page.html & events-page.js).
 * Kept shared loading spinner classes used by checkout CTA and seating-plan loading UI.
 */

.loading-overlay-inline-events {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-overlay-inline-events.hidden {
  display: none;
}

.loading-spinner-inline-events {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text-inline {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--text-gray);
}

/* ===== 12. Booking calendar & purchase column ===== */

.datetime-section-events {
  border-radius: 8px;
  margin-bottom: 0px !important;
}

.datetime-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #1a1a1a;
}

/* Tabs */
.calendar-section .tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.calendar-section .tab {
  padding: 12px 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  position: relative;
}

.calendar-section .tab.active {
  color: #1a1a1a;
  font-weight: 600;
}

.calendar-section .tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1a1a1a;
  border-radius: 2px 2px 0 0;
}

/* Month Scroll Navigation */
.calendar-section .month-scroll {
  position: relative;
  margin-bottom: 6px;
  padding: 0 48px;
  /* Space for arrow buttons (matches quick purchase) */
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
}

/* When the strip is fitted, JS sets month-scroll--no-overflow; hide arrows in case */
.calendar-section .month-scroll.month-scroll--no-overflow .scroll-button {
  display: none !important;
  pointer-events: none;
}

/* Center year + month chips when the strip fits (no horizontal scroll) */
.calendar-section .month-scroll.month-scroll--no-overflow .month-container {
  display: flex;
  justify-content: center;
}

.calendar-section .month-scroll.month-scroll--no-overflow .month-list {
  padding-left: 0;
}

.calendar-section .month-container {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* IE and Edge */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
  flex: 1;
  width: 100%;
}

.calendar-section .month-container::-webkit-scrollbar {
  display: none;
}

.calendar-section .month-list {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
  padding-left: 10px;
}

.calendar-section .year {
  color: var(--Deep-Grey, #1b1e21);
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  padding: 8px 16px;
  user-select: none;
  flex-shrink: 0;
}

.calendar-section .month {
  color: var(--Blue, #187dfd);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  user-select: none;
  flex-shrink: 0;
}

.calendar-section .month.active {
  background: var(--Soft-blue, #b8d7ff);
}

.calendar-section .month:not(.active):hover {
  background-color: var(--Grey, rgb(206 210 229 / 50%));
}

.calendar-section .scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 10px;
  z-index: 2;
  color: #6b7280;
  height: 100%;
  display: flex;
  align-items: center;
  width: 50px !important;
}

@media screen and (max-width: 970px) {
  .calendar-section .scroll-button {
    padding: 0px;
    width: 16px;
  }

  .calendar-section .month-scroll {
    padding: 0 24px;
  }
}

.calendar-section .scroll-left {
  left: 0;
}

.calendar-section .scroll-right {
  right: 0;
}

.calendar-section .current-month {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  text-align: left;
  padding: 8px 0;
}

/* Dates horizontal scroll wrapper and arrows */
.calendar-section .dates-scroll-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.calendar-section .dates-scroll-inner {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  display: block;
  text-align: center;
  touch-action: pan-x;
}

.calendar-section .dates-scroll-inner.dates-scroll-inner--overflow {
  text-align: left;
}

.calendar-section .dates-scroll-inner>.calendar {
  display: inline-flex;
  flex-wrap: nowrap;
  flex: none;
  width: max-content;
  max-width: none;
  vertical-align: top;
  text-align: left;
}

.calendar-section .dates-scroll-inner::-webkit-scrollbar {
  display: none;
}

.calendar-section .dates-scroll-inner {
  scrollbar-width: none;
}

.calendar-section .dates-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.calendar-section .dates-scroll-left {
  left: 0;
}

.calendar-section .dates-scroll-right {
  right: 0;
}

.calendar-section .dates-scroll-btn:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.calendar-section .dates-scroll-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ensure hidden chevrons stay out of layout (author display:flex must not win) */
.calendar-section .dates-scroll-btn[hidden] {
  display: none !important;
}

/* Calendar Grid - Date cells with date+time card design (horizontal scroll) */
.calendar-section .calendar {
  display: inline-flex;
  flex-wrap: nowrap;
  flex: none;
  gap: 12px;
  justify-content: flex-start;
  padding: 2px 0;
  width: max-content;
  max-width: none;
  vertical-align: top;
}

.calendar-section .calendar .date-cell {
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 120px;
}

.calendar-section .date-cell {
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  padding: 0;
  font-family: inherit;
  overflow: hidden;
  min-width: 0;
}

.calendar-section .date-cell .date-cell-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 8px;
}

.calendar-section .date-cell .date-cell-month {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.calendar-section .date-cell .date-cell-date {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.calendar-section .date-cell .date-cell-day {
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  text-transform: capitalize;
  margin-bottom: 2px;
}

.calendar-section .date-cell .date-cell-label {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  text-transform: lowercase;
}

.calendar-section .date-cell .date-cell-slot-time {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
}

.calendar-section .date-cell .date-cell-footer,
.calendar-section .date-cell .date-cell-time {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 6px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #dbe0f0;
  color: #111827;
  border-radius: 0 0 7px 7px;
  min-height: 30px;
  max-height: 32px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-section .date-cell .date-cell-time {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.calendar-section .date-cell.selectable:not(.active):not(.soldout):hover {
  border-color: #007bff;
}

.calendar-section .date-cell.selectable:not(.active):not(.soldout):hover .date-cell-footer,
.calendar-section .date-cell.selectable:not(.active):not(.soldout):hover .date-cell-time {
  background: #e8edfc;
}

.calendar-section .date-cell.selectable.active {
  border: 1px solid #007bff;
  background: #fff;
}

.calendar-section .date-cell.selectable.active .date-cell-month,
.calendar-section .date-cell.selectable.active .date-cell-date,
.calendar-section .date-cell.selectable.active .date-cell-day,
.calendar-section .date-cell.selectable.active .date-cell-label,
.calendar-section .date-cell.selectable.active .date-cell-slot-time {
  color: #007bff;
}

.calendar-section .date-cell.selectable.active .date-cell-footer,
.calendar-section .date-cell.selectable.active .date-cell-time {
  background: #007bff;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendar-section .date-cell.past {
  opacity: 0.4;
  cursor: not-allowed;
}

.calendar-section .date-cell.soldout {
  cursor: not-allowed;
}

.calendar-section .date-cell.soldout:disabled,
.calendar-section .date-cell.soldout[aria-disabled="true"] {
  pointer-events: none;
}

.calendar-section .date-cell.soldout .date-cell-month,
.calendar-section .date-cell.soldout .date-cell-date,
.calendar-section .date-cell.soldout .date-cell-day,
.calendar-section .date-cell.soldout .date-cell-slot-time,
.calendar-section .date-cell.soldout .date-cell-label {
  color: #9ca3af;
}

.calendar-section .date-cell.soldout.few-left {
  opacity: 1;
}

.calendar-section .date-cell.soldout .date-cell-footer,
.calendar-section .date-cell.soldout .date-cell-time {
  background: #dbe0f0;
  color: #e55050;
  font-weight: 800;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendar-section .date-cell.few-left:not(.soldout):not(.active) {
  border: 2px solid #e5d100;
}

.calendar-section .date-cell.few-left:not(.soldout):not(.active) .date-cell-footer,
.calendar-section .date-cell.few-left:not(.soldout):not(.active) .date-cell-time {
  background: #e5d100;
  color: #111827;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Time Selection */
.calendar-section .timeslot-wrapper {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.calendar-section .select-time-header {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 0 4px;
  margin: 0 0 12px;
}

.calendar-section .time-slots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  overflow-x: auto;
  padding: 4px;
}

.calendar-section .time-slots::-webkit-scrollbar {
  display: none;
}

.calendar-section .time-slot {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  position: relative;
  font-family: inherit;
}

.calendar-section .time-slot .time-slot-label {
  font-weight: 600;
  font-size: 14px;
}

.calendar-section .time-slot .time-slot-label-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calendar-section .time-slot.time-slot--sold-out .time-slot-label-block {
  padding: 0 8px;
}

.calendar-section .time-slot.time-slot--sold-out .sold-out-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #dc2626;
  background: rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
}

.calendar-section .time-slot.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

.calendar-section .time-slot.unavailable {
  opacity: 1;
  color: #d1d5db;
  border-color: #e5e7eb;
  background: #fff;
  cursor: not-allowed;
}

.calendar-section .time-slot.few-left:not(.active) .few-left-text {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
}

.calendar-section .time-slot.active .few-left-text {
  color: #fecaca;
}

.duration-info-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  border-radius: 40px;
  background: var(--Light-grey, #eff0f5);
  backdrop-filter: blur(10px);
  margin: 12px 0 0;
  padding: 0 4px;

  color: var(--Deep-Grey, #1b1e21);

  /* Caption */
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.28571rem;
  /* 128.571% */

  padding: 12px 8px;
}

.duration-info-text svg {
  flex-shrink: 0;
  color: #9ca3af;
}

/* Ticket section */
.ticket-section {
  display: flex;
  flex-direction: column;
  /* gap: 24px; */
}

.ticket-section .information-card {
  border-radius: 0;
  background: var(--White, #fff);
  padding: 22px;
  margin-top: 0;

  padding-bottom: 0;
  padding-top: 0;
}

.ticket-section .information-card .form-title {
  color: var(--Black, #000);

  /* Text Header */
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 130% */
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

.tickets-card {
  /* padding: 22px; */
  border-radius: 0;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding-bottom: 0;
}

@media screen and (max-width: 970px) {
  .tickets-card {
    /* padding: 18px; */
    padding-bottom: 0;
  }
}

.no-tickets-card {
  padding-bottom: 22px;
  border-radius: 8px;
}

.tickets-card .ticket-card-header {
  display: flex;
  gap: 16px;
}

.tickets-card .ticket-card-header .event-image {
  width: 80px;
}

.tickets-card .ticket-card-header .event-image img {
  border-radius: 8px;
}

@media screen and (max-width: 400px) {
  .tickets-card .ticket-card-header .event-image {
    width: 25%;
  }

  .tickets-card .ticket-card-header .event-details {
    width: 75%;
  }
}

.tickets-card .event-title {
  color: var(--Black, #000);
  /* Small Header */
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  /* 141.667% */
  letter-spacing: -0.48px;
  margin-bottom: 8px;
}

.tickets-card .ticket-card-header .event-details {
  flex: 1;
}

@media screen and (max-width: 970px) {
  .tickets-card .ticket-card-header .event-details .event-title {
    font-size: 20px;
  }
}

.tickets-card .event-date {
  color: var(--Black, #000);
  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
  margin-bottom: 8px;
}

.tickets-card .event-address {
  color: var(--Grey-text, #7f86a4);
  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  margin-bottom: 8px;
}

@media screen and (max-width: 970px) {
  .tickets-card .event-address {
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
  }
}

.tickets-card .event-address .address-link {
  color: var(--Blue, #187dfd);
  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

@media screen and (max-width: 970px) {
  .tickets-card .event-address .address-link {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
  }
}

.tickets-card .ticket-notice {
  color: var(--Grey-text, #7f86a4);
  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  display: none;
  /* 150% */
}

@media screen and (max-width: 970px) {
  .tickets-card .ticket-notice {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
  }
}

.tickets-card .ticket-notice .time {
  color: var(--Grey-text, #7f86a4);
  font-feature-settings:
    "liga" off,
    "clig" off;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  /* 114.286% */
}

.tickets-card .ticket-types {
  margin-top: 16px;
}

.tickets-card .ticket-types .seated-ticket-refs {
  display: none;
}

.tickets-card .ticket-types .ticket-type {
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: all 0.2s ease-in-out;

  position: relative;
  overflow: visible;
}

.tickets-card .ticket-types .ticket-type.max-quantity-reached {
  padding-left: 8px;
  padding-right: 8px;
  background: #ffeaeb;
  border-radius: 8px;
}

.tickets-card .ticket-types .ticket-type.max-quantity-reached:nth-of-type(1) {
  border-top: none;
}

.tickets-card .ticket-types .ticket-type.max-quantity-reached .max-quantity-reached-notice {
  color: var(--Red, #ff4b53);
  font-family: Inter;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.tickets-card .ticket-types .ticket-type.max-quantity-reached .quantity-control .quantity {
  color: #ff4b53;
}

.tickets-card .ticket-types .ticket-group {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.tickets-card .ticket-types .ticket-group .group-header {
  width: 100%;
}

.tickets-card .ticket-types .ticket-group .group-header .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  padding-bottom: 12px;
}

.tickets-card .ticket-types .ticket-group .group-header .heading {
  display: flex;
  margin-bottom: 12px;
  width: 100%;
  align-items: flex-start;
  gap: 0px;
}

.tickets-card .ticket-types .ticket-group .group-header .heading .group-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .tickets-card .ticket-types .ticket-group .group-header .heading .group-image {
    width: 25%;
  }

  .tickets-card .ticket-types .ticket-group .group-header .heading .group-info {
    width: 75%;
  }
}

.tickets-card .ticket-types .ticket-group .group-header .heading .group-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tickets-card .ticket-types .ticket-group .group-header .title.active .dropdown.icon.right {
  transform: rotate(180deg);
}

.tickets-card .ticket-types .ticket-group .group-header .title .dropdown.icon.right {
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
  transform: rotate(360deg);
}

.tickets-card .ticket-types .ticket-group .group-header .title.active .view-text {
  display: none;
}

.tickets-card .ticket-types .ticket-group .group-header .title.active .hide-text {
  display: inline;
}

.tickets-card .ticket-types .ticket-group .group-header .title .hide-text {
  display: none;
}

.tickets-card .ticket-types .ticket-group .group-header .title .view-text {
  display: inline;
}

.tickets-card .ticket-types .ticket-group .group-header .ticket-group-name {
  color: var(--Black, #000);

  /* Text Header */
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  /* 130% */
  letter-spacing: -0.4px;
}

.tickets-card .ticket-types .ticket-group .group-header .heading .group-info .ticket-group-description {
  color: var(--Grey-text, #7f86a4);

  /* Caption */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 128.571% */

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  max-width: 300px;
  min-width: 250px;
}

.events_page .tickets-card .ticket-types .ticket-description-container.is-expanded .ticket-group-description {
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  display: block;
  overflow: visible;
}

.ticket-description-container .ticket-desc-read-more {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--Blue, #187dfd);
  font-family: Inter;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0 0;
}

/* Only show the button when description is actually clamped */
.ticket-description-container .ticket-desc-read-more.is-visible {
  display: inline-block;
}

@media screen and (max-width: 970px) {
  .tickets-card .ticket-types .ticket-group .group-header .heading .group-info .ticket-group-description {
    max-width: 100%;
    width: 100%;
  }
}

.tickets-card .ticket-type .ticket-info {
  display: flex;
  flex-direction: column;
  gap: 4px;

  flex: 1;

  max-width: 70%;
}

@media screen and (max-width: 425px) {
  .tickets-card .ticket-type .ticket-info {
    max-width: 100%;
  }
}

.booking-fee-explained-modal-trigger:not(.booking-fee-info-icon) {
  color: var(--Blue, #187dfd);
  font-family: Inter;
  /* font-size: 14px; */
  font-style: normal;
  font-weight: 400;
  /* line-height: 24px; */
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  text-decoration: underline;
}

@media screen and (max-width: 400px) {
  .booking-fee-explained-modal-trigger:not(.booking-fee-info-icon) {
    font-size: 12px;
    line-height: 16px;
  }
}

.tickets-card .ticket-type.sold-out .ticket-info span.disabled,
.tickets-card .ticket-type.disabled .ticket-info span.disabled {
  color: var(--Blue, #187dfd);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  pointer-events: none;
  opacity: 0.2;
}

@media screen and (max-width: 425px) {
  .tickets-card .ticket-types .ticket-type {
    flex-direction: column;
    align-items: flex-start;
  }

  .tickets-card .ticket-type .ticket-info {
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 970px) {
  .tickets-card .ticket-types .ticket-actions .ticket-total {
    text-align: left !important;
  }

  .tickets-card .ticket-types .ticket-group .group-header .title {
    flex-direction: column;
    align-items: flex-start;
  }

  .tickets-card .ticket-types .ticket-group .group-header .ticket-group-name {
    margin-bottom: 16px;
  }
}

.tickets-card .ticket-types .ticket-group .group-header .toggle-options-btn {
  color: #187dfd;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 180px;
  height: 50px;
  text-transform: uppercase;
  background: var(--Medium-grey, #e7e9f1);
  text-align: center;
  /* Rubricator */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.72px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.tickets-card .ticket-types .ticket-group .group-header .toggle-options-btn:hover {
  background: var(--Medium-grey, #e2e2e3);
}

.tickets-card .ticket-types .ticket-group .group-header .toggle-options-btn .options-text {
  margin-left: 4px;
}

.tickets-card .ticket-types .ticket-type:nth-of-type(1) {
  border-top: 1px solid #e5e7eb;
}

.tickets-card .ticket-types .ticket-type:last-of-type {
  border-bottom: none;
}

.tickets-card .ticket-types .ticket-info .ticket-type-name {
  color: var(--Black, #000);
  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}

.tickets-card .ticket-types .ticket-subtitle {
  margin-top: 4px;
  color: var(--Black, #000);

  /* Caption */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  /* 128.571% */
}

.ticket-description-container {
  position: relative;
  max-width: 100%;
  margin: 4px 0 0;
}

.ticket-description-container .ticket-description-wrapper {
  overflow: hidden;
  position: relative;
  transition: height 0.3s ease-in-out;
}

.ticket-description-container .ticket-description-wrapper:not(.expanded) .description {
  /* Collapsed: multi-line clamp for long descriptions */
  overflow: hidden;
}

.ticket-description-container .ticket-description-wrapper.expanded .description {
  white-space: normal;
}

.ticket-description-container .ticket-description-wrapper .description {
  position: relative;
  width: 100%;
  color: var(--Grey-text, #7f86a4);
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

.ticket-description-container .ticket-description-wrapper .description.expandable {
  cursor: pointer;
}

.tickets-card .ticket-types .ticket-description {
  color: var(--Grey-text, #7f86a4);
  /* Caption */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;

  display: inline;

  /* max-width: 70%;
  min-width: 45%; */
}

/* Clamp the actual text to 3 lines when collapsed */
.ticket-description-container .ticket-description-wrapper:not(.expanded) .ticket-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Only show pointer cursor / affordance when JS marks it expandable */
.ticket-description-container .ticket-description-wrapper .description:not(.expandable) {
  cursor: default;
}

.ticket-description-container .ticket-description-wrapper .description .icon {
  color: #3b82f6;
  font-size: 14px;
  vertical-align: middle;
}

/* Collapsed: caret at bottom-right of clamped description (not on its own line) */
.ticket-description-container .ticket-description-wrapper:not(.expanded) .description.expandable .ticket-description {
  padding-right: 1.25em;
  box-sizing: border-box;
}

.ticket-description-container .ticket-description-wrapper:not(.expanded) .description.expandable .arrow-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  line-height: 1;
}

/* Expanded: caret inline after full description text */
.ticket-description-container .ticket-description-wrapper.expanded .description .arrow-icon {
  position: relative;
  right: auto;
  bottom: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

@media screen and (max-width: 425px) {
  .ticket-description-container {
    max-width: 100%;
  }

  .tickets-card .ticket-types .ticket-description {
    max-width: 100%;
    width: 100%;
  }
}

.tickets-card .ticket-types .ticket-price {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}

.tickets-card .ticket-types .base-price {
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.tickets-card .ticket-types .booking-fee-inline {
  color: var(--Grey-text, #707696);

  /* Small Text */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 20.8px */
}

.tickets-card .ticket-type.sold-out .ticket-info .ticket-price,
.tickets-card .ticket-type.disabled .ticket-info .ticket-price,
.tickets-card .ticket-type.sold-out .ticket-info .ticket-type-name,
.tickets-card .ticket-type.disabled .ticket-info .ticket-type-name {
  opacity: 0.2;
}

.events_page .tickets-card .ticket-type.ticket-type--manager-purchasable.sold-out .ticket-info .ticket-price,
.events_page .tickets-card .ticket-type.ticket-type--manager-purchasable.disabled .ticket-info .ticket-price,
.events_page .tickets-card .ticket-type.ticket-type--manager-purchasable.sold-out .ticket-info .ticket-type-name,
.events_page .tickets-card .ticket-type.ticket-type--manager-purchasable.disabled .ticket-info .ticket-type-name {
  opacity: 1;
}

.tickets-card .ticket-types .select-btn {
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 112px;
  height: 50px;
  text-transform: uppercase;
  background: var(--Blue, #187dfd);
  color: var(--light-text-color, #fff);
  text-align: center;
  /* Rubricator */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 166.667% */
  letter-spacing: 0.72px;
}

.tickets-card .ticket-types .select-btn:hover {
  background: #2563eb;
}

.tickets-card .ticket-types .ticket-actions .ticket-total {
  /* display: none; */
  margin-bottom: 12px;
  text-align: right;
  color: var(--Black, #000);
  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}

.tickets-card .ticket-types .ticket-actions .quantity-control {
  display: flex;
  align-items: center;
  height: 40px;
}

.tickets-card .ticket-types .ticket-actions .quantity-control--view-only-disabled,
.tickets-card .ticket-types .ticket-actions .quantity-control--view-only-disabled .quantity-btn:disabled,
.tickets-card .ticket-types .ticket-actions .quantity-control--view-only-disabled .quantity:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity-btn {
  width: 40px;
  /* height: 40px; */
  height: 100%;
  border: none;
  background-color: #f8f9fa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity-btn .icon {
  margin: 0;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity-btn.minus {
  background-color: #e7e9f1;
  color: #fff;
  border-radius: 6px 0 0 6px;
  border-right: none;
  pointer-events: none;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity-btn.minus.has-quantity {
  background: var(--Blue, #187dfd);
  color: #fff;
  pointer-events: all;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity-btn.plus {
  background: var(--Blue, #187dfd);
  color: #fff;
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.tickets-card .ticket-types .ticket-type.max-quantity-reached .quantity-btn.plus {
  background-color: #e7e9f1;
  pointer-events: none;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity {
  /* height: 40px; */
  height: 100%;
  width: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  background-color: white;
  text-align: center;
  font-size: 20px;
  color: #7f86a4;
  font-weight: 500;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  padding: 0;
  font-weight: 700;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity.has-quantity {
  color: #111;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity::-webkit-inner-spin-button,
.tickets-card .ticket-types .ticket-actions .quantity-control .quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tickets-card .ticket-types .ticket-actions .quantity-control .quantity:focus {
  outline: none;
}

/* Divider */
.event_page_main_wrapper .divider-wrapper {
  display: flex;
  justify-content: center;
  background: #fff;
  /* padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 16px; */
  padding: 0;
}

.event_page_main_wrapper .divider-wrapper.pt-0 {
  padding-top: 0 !important;
}

.event_page_main_wrapper .divider-wrapper.pb-0 {
  padding-bottom: 0 !important;
}

.event_page_main_wrapper .divider-wrapper .divider {
  width: 100%;
  height: 1px;
  opacity: 0.5;
  background: #ced2e5;
}

/* ===== Footer card & dual CTA ===== */
.event_page_main_wrapper .footer-card {
  border-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* padding: 22px; */
  padding-bottom: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.event_page_main_wrapper .footer-card .summary-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event_page_main_wrapper .footer-card .footer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.event_page_main_wrapper .footer-card .footer-section .label {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

.event_page_main_wrapper .footer-card .footer-section .label .link {
  color: var(--Blue, #187dfd);
  cursor: pointer;
}

.event_page_main_wrapper .footer-card .footer-section .label .link:hover {
  text-decoration: underline;
}

.event_page_main_wrapper .footer-card .footer-section .amount {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.event_page_main_wrapper .footer-card .footer-section.total-section {
  margin-bottom: 12px;
}

.event_page_main_wrapper .footer-card .booking-fee-section .icon {
  cursor: pointer;
  color: #187dfd;
  font-size: 16px;
}

.event_page_main_wrapper .footer-card .total-section .amount {
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
}

@media screen and (max-width: 970px) {
  .event_page_main_wrapper .footer-card .total-section .amount {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.36px;
  }
}

.event_page_main_wrapper .footer-card .total-section .total-label {
  color: var(--Black, #000);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.event_page_main_wrapper .next-btn {
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
  background: var(--Blue, #187dfd);
  color: var(--light-text-color, #fff);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.72px;
}

.event_page_main_wrapper .next-btn:hover:not(:disabled) {
  background: var(--blue-hover, #1757c5);
}

.event_page_main_wrapper .next-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed;
}

.event_page_main_wrapper .footer-card .form-errors {
  color: var(--Red, #ff4b53);
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-top: 16px;
}

.event_page_main_wrapper .footer-card .reservation-time {
  text-align: center;
  color: #6b7280;
  margin-top: 16px;
  font-size: 14px;
  display: none;
}

/* Ticket section */
.ticket-section {
  display: flex;
  flex-direction: column;
  /* margin-top: 16px; */
}

.tickets-card {
  /* padding: 22px; */
  border-radius: 8px;
  background: var(--White, #fff);
}

.ticket-card-header {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.event-image {
  width: 80px;
}

.event-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

.event-details {
  flex: 1;
}

.event-title {
  color: var(--Black, #000);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.event-date {
  color: var(--Black, #000);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.event-address {
  color: var(--Grey-text, #7f86a4);
  font-size: 14px;
}

.ticket-types {
  margin-top: 16px;
}

.ticket-type {
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.ticket-type:last-of-type {
  border-bottom: none;
}

.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  max-width: 70%;
}

.ticket-type-name {
  color: var(--Black, #000);
  font-size: 18px;
  font-weight: 700;
}

.ticket-subtitle,
.ticket-description {
  color: var(--Grey-text, #7f86a4);
  font-size: 14px;
  line-height: 1.5;
}

.ticket-price {
  display: flex;
  gap: 6px;
  align-items: center;
}

.base-price {
  color: var(--Black, #000);
  font-size: 16px;
}

.booking-fee {
  color: var(--Grey-text, #7f86a4);
  font-size: 14px;
}

.ticket-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.quantity-control {
  display: flex;
  align-items: center;
  height: 40px;
}

.quantity-btn {
  width: 40px;
  height: 100%;
  border: none;
  background-color: #f8f9fa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
}

.quantity-btn.minus {
  background-color: #e7e9f1;
  color: #fff;
  border-radius: 6px 0 0 6px;
  border-right: none;
  pointer-events: none;
}

.quantity-btn.minus.has-quantity {
  background: var(--Blue, #187dfd);
  color: #fff;
  pointer-events: all;
}

.quantity-btn.plus {
  background: var(--Blue, #187dfd);
  color: #fff;
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.quantity {
  height: 100%;
  width: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  background-color: white;
  text-align: center;
  font-size: 20px;
  color: #7f86a4;
  font-weight: 700;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  padding: 0;
}

.quantity.has-quantity {
  color: #111;
}

.quantity::-webkit-inner-spin-button,
.quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity:focus {
  outline: none;
}

.ticket-group {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.group-header {
  width: 100%;
}

.group-header .heading {
  display: flex;
  margin-bottom: 12px;
  width: 100%;
  align-items: center;
  gap: 16px;
}

.group-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}

.group-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticket-group-name {
  color: var(--Black, #000);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ticket-group-description {
  color: var(--Grey-text, #7f86a4);
  font-size: 14px;
  line-height: 18px;
}

.toggle-options-btn {
  color: #187dfd;
  border: none;
  padding: 8px 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  height: 44px;
  text-transform: uppercase;
  background: var(--Medium-grey, #e7e9f1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ticket-list.content {
  display: none;
}

.ticket-list.content.active {
  display: block;
}

.title-row {
  margin-bottom: 12px;
}

.seating-placeholder {
  border: 2px dashed #cbd5f5;
  border-radius: 8px;
  min-height: 736px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: #f8fafc;
  font-weight: 600;
}

.ticket-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tickets-card {
  background: var(--white);
  border-radius: 8px;
  /* padding: 22px; */
}

.tickets-card .ticket-types {
  margin-top: 16px;
}

.tickets-card .ticket-type {
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.tickets-card .ticket-type:last-of-type {
  border-bottom: none;
}

.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ticket-type-name {
  font-size: 18px;
  font-weight: 700;
}

.ticket-subtitle,
.ticket-description {
  color: var(--grey-text);
  font-size: 14px;
}

.ticket-price {
  display: flex;
  gap: 6px;
  align-items: center;
}

.base-price {
  font-weight: 600;
}

.booking-fee {
  color: var(--grey-text);
}

.ticket-actions .quantity-control {
  display: flex;
  align-items: center;
  height: 40px;
}

.quantity-control .quantity-btn {
  width: 40px;
  height: 100%;
  border: none;
  background-color: #f8f9fa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
}

.quantity-control .quantity-btn.minus {
  background-color: #e7e9f1;
  color: #fff;
  border-radius: 6px 0 0 6px;
  border-right: none;
  pointer-events: none;
}

.quantity-control .quantity-btn.minus.has-quantity {
  background: var(--blue);
  color: #fff;
  pointer-events: all;
}

.quantity-control .quantity-btn.plus {
  background: var(--blue);
  color: #fff;
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.quantity-control .quantity {
  width: 60px;
  height: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  background-color: #fff;
  text-align: center;
  font-size: 20px;
  color: #7f86a4;
  font-weight: 700;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  padding: 0;
}

.quantity-control .quantity.has-quantity {
  color: #111;
}

.quantity-control .quantity::-webkit-inner-spin-button,
.quantity-control .quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-control .quantity:focus {
  outline: none;
}

.ticket-group {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.ticket-group .group-header {
  width: 100%;
}

.ticket-group .group-header .heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.ticket-group-name {
  font-size: 18px;
  font-weight: 700;
}

.ticket-group-description {
  color: var(--grey-text);
  font-size: 14px;
}

.toggle-options-btn {
  width: 100%;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--medium-grey);
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
}

.ticket-group .ticket-list {
  display: none;
}

.ticket-group .ticket-list.active {
  display: block;
}

.facebook-icon {
  background: url("https://showshappening.blob.core.windows.net/content/assets/v4/icons/facebook-icon-40px.svg") no-repeat center;
  margin: 0 !important;
}

.instagram-icon {
  background: url("https://showshappening.blob.core.windows.net/content/assets/v4/icons/instagram-icon-40px.svg") no-repeat center;
  margin: 0 !important;
}


/* ===== 13. Booking UI (.events_page scoped) ===== */
.events_page .calendar-section-heading {
  text-align: center;

  color: var(--Black, #000);
  text-align: center;

  /* Medium Header */
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 35.2px */
  letter-spacing: -0.64px;
}

.events_page .calendar-month-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}

.events_page .calendar-month-tab {
  border: none;
  background: transparent;
  padding: 4px 0;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--booking-tab-muted);
  cursor: pointer;
  border-radius: 0;
  margin-bottom: 0;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.3;
  transition: color 0.15s ease;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  flex: 0 0 auto;
}

.events_page .calendar-section .calendar-month-tab:hover:not(.active) {
  color: #5c637d;
  background: transparent;
}

.events_page .calendar-section .calendar-month-tab.active {
  font-weight: 700;
  color: #000;
  background: transparent;
}

.events_page .calendar-section .calendar-month-tab:focus {
  outline: none;
}

.events_page .calendar-section .calendar-month-tab:focus-visible {
  outline: 2px solid var(--booking-blue);
  outline-offset: 2px;
}

.events_page .calendar-section .current-month {
  display: none !important;
}

.events_page .timeslot-wrapper {
  display: none;
  flex-direction: column;
}

.events_page .view-tickets-heading {
  display: none;
}

.events_page .event-booking-main {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(27, 30, 33, 0.08);
  padding: 0;
  margin: 8px auto 0;
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0;
}

.events_page .booking-shell-live {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 16px;
}

@media (max-width: 480px) {
  .events_page .booking-shell-live {
    padding: 0;
  }
}

.events_page .booking-shell-live>.calendar-section,
.events_page .booking-shell-live>.booking-slot-summary,
.events_page .booking-shell-live>.booking-seating-slot,
.events_page .booking-shell-live>.booking-seated-panel {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.events_page .booking-slot-summary {
  /* padding: 20px 20px 0; */
  padding: 0;
  background: #fff;
}

@media (max-width: 480px) {
  .events_page .booking-slot-summary {
    padding: 0;
    margin-bottom: 0;
  }
}

.events_page .booking-slot-summary[hidden] {
  display: none !important;
}

.events_page .booking-slot-summary__date {
  margin: 0 0 8px;
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.events_page .booking-slot-summary__location {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--booking-blue, #187dfd);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

.events_page .booking-slot-summary__location:hover {
  text-decoration: underline;
}

.events_page .booking-slot-summary__location[hidden] {
  display: none !important;
}

.events_page .booking-slot-summary__notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--Grey-text, #7f86a4);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.events_page .booking-slot-summary__notice[hidden] {
  display: none !important;
}

.events_page .booking-slot-summary:not([hidden])~.booking-seated-panel .tickets-card .ticket-card-header .event-details {
  display: none !important;
}

.events_page .booking-slot-summary:not([hidden])~.booking-seated-panel .tickets-card .ticket-card-header:not(:has(.event-image img)) {
  display: none;
}

.events_page .booking-slot-summary:not([hidden])~.booking-seated-panel .tickets-card .ticket-types {
  margin-top: 0;
}

.events_page .event-booking-main--seated .calendar-section-inner,
.events_page .event-booking-main--seated .seat-selection-svg-container {
  max-width: 100%;
  width: 100%;
}

.events_page .event-booking-main--seated .buyseatedticketscontainer {
  display: flex;
  justify-content: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* padding-top: 12px; */
  padding: 0;
}

@media screen and (min-width: 768px) {
  .events_page .event-booking-main--seated .booking-seating-slot:not([hidden]) {
    width: 100%;
  }

  .events_page .event-booking-main--seated .booking-seating-slot .seating-plan-loading {
    margin-top: 0;
  }
}

.events_page .event-booking-main #ticketSection {
  /* padding: 0 20px; */
  padding: 0;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .events_page #seat-selection-section {
    padding: 0;
    margin: 0;
    background: transparent;
    gap: 0;
  }

  .events_page .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .events_page .events-purchase-section-wrapper {
    padding: 16px 16px 0;
    max-width: none;
    background: var(--Light-grey, #eff0f5);
    box-sizing: border-box;
  }

  .events_page .event-booking-main {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .events_page .event-booking-main--seated .booking-shell {
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
  }

  .events_page .event-booking-main--seated .calendar-section {
    padding: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .events_page .booking-shell-skeleton {
    padding-left: 16px;
    padding-right: 16px;
  }

  .events_page .event_page_main_wrapper .main-container .events-purchase-section {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    background: var(--Light-grey, #eff0f5);
    box-sizing: border-box;
  }

  .events_page .event-booking-main--seated .booking-seated-panel--active {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-top: 0;
  }

  .events_page .booking-seated-panel--active .buyseatedticketscontainer {
    padding: 12px 0 0;
    padding-top: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  .events_page .booking-seated-panel--active .booking-seating-slot:has(.buyseatedticketscontainer)+.ticket-section-stack,
  .events_page .booking-seated-panel--active .buyseatedticketscontainer+.ticket-section-stack {
    border-top: 1px solid #e0e0e0;
  }

  .events_page .booking-seated-panel--active .ticket-section-stack {
    margin-top: 0;
  }

  .events_page .booking-seated-panel--active #ticketSection {
    margin-top: 16px;
    gap: 0;
    padding: 0;
  }

  .events_page .booking-seated-panel--active #ticketSection>.divider-wrapper {
    display: none;
  }

  .events_page .booking-seated-panel--active .ui.promocode-card {
    padding: 16px 16px 0;
    margin: 0;
  }

  .events_page .booking-seated-panel--active .footer-card.footer-card--dual-cta {
    padding: 0;
    background: #fff;
  }
}

.events_page .event-booking-main--seated #ticketSection>.tickets-card {
  display: none;
}

.events_page .tickets-card .ticket-card-header {
  display: none;
}

.events_page .tickets-card .ticket-types {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.events_page .ticket-type-col--pricing .ticket-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.events_page .ticket-type-col--pricing .booking-fee-inline {
  font-size: 15px;
  font-weight: 400;
  color: #9ca3af;
}

.events_page #ticketSection .quantity-control,
#eventPageStickyCartPanel .quantity-control {
  display: flex;
  align-items: center;
  height: 40px;
}

.events_page #ticketSection .quantity-btn,
#eventPageStickyCartPanel .quantity-btn {
  width: 40px;
  height: 100%;
  border: none;
  background-color: #f8f9fa;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.events_page #ticketSection .quantity-btn.plus,
#eventPageStickyCartPanel .quantity-btn.plus {
  color: #fff;
  background: var(--booking-blue, #187dfd);
  color: #fff;
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.events_page #ticketSection .quantity-btn .icon,
#eventPageStickyCartPanel .quantity-btn .icon {
  margin: 0 !important;
}

.events_page #ticketSection .quantity-btn.minus,
#eventPageStickyCartPanel .quantity-btn.minus {
  background-color: #e7e9f1;
  color: #fff;
  border-radius: 8px 0 0 8px;
  border-right: none;
  pointer-events: none;
}

.events_page #ticketSection .quantity-btn.minus.has-quantity,
#eventPageStickyCartPanel .quantity-btn.minus.has-quantity {
  background: var(--booking-blue, #187dfd);
  color: #fff;
  pointer-events: all;
}

.events_page #ticketSection .quantity-btn.plus .icon,
#eventPageStickyCartPanel .quantity-btn.plus .icon {
  color: #fff !important;
  opacity: 1;
  font-size: 16px;
}

.events_page #ticketSection .quantity-btn.minus.has-quantity .icon,
#eventPageStickyCartPanel .quantity-btn.minus.has-quantity .icon {
  margin: 0 !important;
  color: #fff !important;
  opacity: 1;
  font-size: 16px;
}

.events_page #ticketSection .quantity-btn.minus.has-quantity:hover:not(:disabled),
#eventPageStickyCartPanel .quantity-btn.minus.has-quantity:hover:not(:disabled) {
  background: #1a6fd9;
}

.events_page #ticketSection .quantity-btn:disabled,
#eventPageStickyCartPanel .quantity-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.events_page .ticket-type.max-quantity-reached .quantity-btn.plus {
  background-color: #e7e9f1;
  pointer-events: none;
}

.events_page #ticketSection .quantity-btn.minus:not(.has-quantity),
#eventPageStickyCartPanel .quantity-btn.minus:not(.has-quantity) {
  background: #e8eaf6;
  cursor: default;
  opacity: 1;
}

.events_page #ticketSection .quantity-btn.minus:not(.has-quantity) .icon,
#eventPageStickyCartPanel .quantity-btn.minus:not(.has-quantity) .icon {
  margin: 0 !important;
  color: #7b8ca8 !important;
  opacity: 1;
  font-size: 16px;
}

.events_page #ticketSection .quantity-btn.minus:not(.has-quantity) .icon,
#eventPageStickyCartPanel .quantity-btn.minus:not(.has-quantity) .icon {
  color: #94a3b8 !important;
  opacity: 1;
}

.events_page #ticketSection .quantity-btn .icon,
#eventPageStickyCartPanel .quantity-btn .icon {
  margin: 0 !important;
  color: var(--booking-blue) !important;
  opacity: 1;
}

.events_page #ticketSection .quantity-control .quantity,
#eventPageStickyCartPanel .quantity-control .quantity {
  height: 100%;
  width: 60px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  background-color: white;
  text-align: center;
  color: #111;
  background: #fff;
  font-weight: 700;
}

.events_page #ticketSection .quantity-control .quantity::-webkit-inner-spin-button,
.events_page #ticketSection .quantity-control .quantity::-webkit-outer-spin-button,
#eventPageStickyCartPanel .quantity-control .quantity::-webkit-inner-spin-button,
#eventPageStickyCartPanel .quantity-control .quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.events_page #ticketSection .quantity-control .quantity:focus,
#eventPageStickyCartPanel .quantity-control .quantity:focus {
  outline: none;
}

#eventPageStickyCartPanel .quantity-control {
  width: 100%;
  max-width: none;
}

#eventPageStickyCartPanel .quantity-control .quantity-btn {
  flex-shrink: 0;
}

#eventPageStickyCartPanel .quantity-control .quantity {
  flex: 1 1 auto;
  width: auto;
  min-width: 60px;
}

.events_page .footer-card.footer-card--dual-cta .footer-card-price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
  box-sizing: border-box;
  width: 100%;
}

.events_page .footer-card.footer-card--dual-cta .footer-section--grand-total {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.events_page .footer-card.footer-card--dual-cta .booking-fee-section--hidden {
  display: none !important;
}

.events_page .footer-card.footer-card--dual-cta.footer-card--empty-cart .footer-card-price-breakdown {
  display: none;
}

.events_page .sidebar-video-card {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.events_page .sidebar-video-card .hero_section {
  margin: 0;
}

.events_page .sidebar-video-card .video-player-container {
  border-radius: 8px;
  box-shadow: none;
  background: #000;
  min-height: 160px;
}

.events_page .sidebar-video-card .video-wrapper {
  min-height: 160px;
}

/* Match mockup: strong vignette + centered ring play button */
.events_page .sidebar-video-card .video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle at center,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 38%,
      rgba(0, 0, 0, 0.65) 100%);
}

.events_page .sidebar-video-card .play-overlay {
  background: transparent;
  backdrop-filter: none;
}

.events_page .sidebar-video-card .play-button {
  width: 67.122px;
  height: 67.122px;
  border: 6px solid rgba(255, 255, 255, 0.98);
  border-radius: 999px;
  background: transparent;
  transform: none;
}

.events_page .sidebar-video-card .play-button:hover {
  transform: none;
  border-color: #fff;
}

.events_page .sidebar-video-card .play-button:active {
  transform: scale(0.98);
}

.events_page .sidebar-video-card .play-icon {
  width: 62px;
  height: 62px;
  filter: none;
}

/* Hide the SVG circle so the ring is purely CSS (like the mock) */
.events_page .sidebar-video-card .play-icon circle {
  display: none;
}

.events_page .sidebar-video-card .play-icon path {
  fill: #fff;
}

/* Mock has no visible control chrome */
.events_page .sidebar-video-card .video-controls {
  display: none !important;
}

.events_page .address-section-heading {
  font-size: 14px;
  font-weight: 700;
  margin-top: 0;
}

.events_page .address-section .location-icon path {
  fill: #1a1a1a;
}

.events_page .event-about-mockup {
  margin-bottom: 20px;
}

.events_page .event-about-mockup.is-loading .event-about-content {
  display: none;
}

.events_page .event_page_main_wrapper:has(.event-about-mockup.is-loading) .event-about-kiosk-btn {
  display: none !important;
}

.events_page .event-about-kiosk-block .event-about-skeleton__kiosk {
  display: none;
}

.events_page .event_page_main_wrapper:has(.event-about-mockup.is-loading) .event-about-kiosk-block .event-about-skeleton__kiosk {
  display: block;
}

.events_page .event-about-mockup:not(.is-loading) .event-about-skeleton {
  display: none;
}

.events_page .event-about-skeleton__title {
  margin-bottom: 12px;
}

.events_page .event-about-skeleton__kiosk {
  width: 178px;
  max-width: 100%;
  height: 50px;
  margin: 0 0 12px;
  border-radius: 25px;
}

.events_page .event-about-skeleton__inner {
  margin-bottom: 16px;
}

.events_page .event-about-skeleton__lines {
  max-height: 5.2em;
  overflow: hidden;
}

.events_page .event-about-skeleton__lines .skeleton-line {
  margin: 6px 0;
}

.events_page .event-about-skeleton__readmore {
  margin-top: 8px;
}

.events_page .event-about-skeleton__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 8px;
}

@media screen and (max-width: 600px) {
  .events_page .event-about-skeleton__grid {
    grid-template-columns: 1fr;
  }
}

.events_page .event-about-skeleton__label {
  margin-bottom: 4px;
}

.events_page .event-about-skeleton__cell .skeleton-line+.skeleton-line {
  margin-top: 6px;
}

.events_page .event-about-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a1a;
}

.events_page .event-about-kiosk-btn {
  appearance: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 50px;
  padding: 8px 24px;
  margin: 0 0 40px;
  border: none;
  border-radius: 25px;
  background: #187dfd;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.32px;
  cursor: pointer;
  text-decoration: none;
}

/* Prefer attribute visibility; avoids fighting jQuery .show()/.hide() inline styles */
.events_page .event-about-kiosk-btn[hidden] {
  display: none !important;
}

.events_page .event-about-kiosk-btn:not([hidden]) {
  display: inline-flex !important;
}

.events_page .event-about-kiosk-btn:hover:not(:disabled) {
  background: #1757c5;
}

.events_page .event-about-kiosk-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.events_page .event-about-inner {
  position: relative;
  margin-bottom: 16px;
}

.events_page .event-about-inner .event-description {
  color: var(--Black, #000);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%;
}

.events_page .event-about-inner .event-description p {
  margin: 0;
}

.events_page .event-about-inner:not(.is-expanded) .event-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.events_page .event-about-inner.is-expanded .event-description {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.events_page .event-about-inner:not(.is-expanded) .event-description> :first-child {
  margin-top: 0;
}

.events_page .event-about-inner:not(.is-expanded) .event-description> :last-child {
  margin-bottom: 0;
}

.events_page .event-about-read-more {
  display: none;
  margin-top: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--booking-blue);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.events_page .event-about-read-more.is-visible {
  display: inline-block;
}

.events_page .event-quick-info-grid {
  /* display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px; */
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.events_page .event-quick-info-grid--when-hidden {
  grid-template-columns: 1fr;
}

@media screen and (max-width: 600px) {
  .events_page .event-quick-info-grid {
    grid-template-columns: 1fr;
  }
}

.events_page .event-quick-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.events_page .event-quick-when {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.4;
}

.events_page .event-quick-when__skeleton {
  margin: 0;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
}

.events_page .event-quick-where {
  font-size: 15px;
  font-weight: 600;
  color: var(--booking-blue);
  text-decoration: none;
}

.events_page .event-quick-where:hover {
  text-decoration: underline;
}

.events_page .event-organizer-social-links {
  margin: 0;
  font-size: 15px;
}

.events_page .event-organizer-social-links a {
  color: var(--booking-blue);
  font-weight: 600;
  text-decoration: none;
}

.events_page .event-organizer-social-links a:hover {
  text-decoration: underline;
}

.events_page .event-refundable-banner-mockup {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  background: #e8eaf6;
  margin-bottom: 24px;
}

.events_page .event-refundable-icon {
  flex-shrink: 0;
  color: #1a1a1a;
}

.events_page .event-refundable-copy strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.events_page .event-refundable-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}

.events_page .tickets-card .ticket-types .ticket-type {
  display: grid;
  /* grid-template-columns: minmax(0, 1fr) 180px 140px; */
  gap: 8px 20px;
  align-items: center;
  padding: 16px 18px;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: none;

  grid-template-columns: minmax(0, 1fr) 1fr auto;
  padding: 11px;
  column-gap: 6px;
}

.events_page #ticketSection .sold-out-label {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-type--group-child {
  /* padding: 20px; */
  padding: 14px;
  box-sizing: border-box;
}

.events_page .tickets-card .ticket-types .ticket-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .events_page .tickets-card .ticket-types .ticket-group {
    padding: 12px;
    overflow: visible;
  }
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-type--group-child {
  /* border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
  margin-bottom: 0;
  background: transparent; */
  /* padding: 20px 0; */
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-name {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  line-height: 1.3;
  margin: 0;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-description {
  font-size: 15px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--pricing .ticket-booking-fee-link {
  margin-top: 6px;
}

@media screen and (min-width: 769px) {
  .events_page .tickets-card .ticket-types .ticket-group .group-header.ticket-group-header {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 0;
    align-items: center;
    /* padding: 20px 24px; */
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-header.ticket-group-header:has(.ticket-list.content.active) {
    row-gap: 8px;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-row {
    display: contents;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual {
    grid-column: 1;
    grid-row: 1;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--pricing {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: auto;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .events_page .tickets-card .ticket-types .ticket-group:has(.ticket-list.content.active) .group-summary-col--actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-list.content {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-list.content.active {
    margin-top: 0;
    padding: 16px 24px 16px;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle {
    justify-content: flex-end;
    width: auto;
  }

  .events_page .tickets-card .ticket-types .ticket-group .toggle-options-btn {
    width: auto;
    min-width: 148px;
    max-width: 100%;
    height: 40px;
    background: #e7e9f1;
    color: var(--booking-blue, #2483ff);
    text-transform: uppercase;
  }
}

/* .group-summary-row: mobile uses flex column (max-width:767 block above).
   Desktop uses display:contents inside min-width:769 — do not set grid here or it
   overrides both and crushes the layout on narrow viewports. */

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual .group-image {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual .group-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.events_page .tickets-card .ticket-types .ticket-group .group-info {
  min-width: 0;
  flex: 1;
}

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--pricing {
  align-self: center;
}

.events_page .tickets-card .ticket-types .ticket-group .group-summary-col--actions .title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 0;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle.active .view-text {
  display: none;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle.active .hide-text {
  display: inline;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle .hide-text {
  display: none;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle .view-text {
  display: inline;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle.active .toggle-options-chevron {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

.events_page .tickets-card .ticket-types .ticket-group .toggle-options-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0 !important;
  font-size: 1em;
  line-height: 1;
  transition: transform 0.15s ease;
  transform-origin: 50% 50%;
}

.events_page .tickets-card .ticket-types .ticket-group .toggle-options-chevron::before {
  line-height: 1;
  vertical-align: middle;
}

.events_page .tickets-card .ticket-types .ticket-group .toggle-options-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 8px 14px;
  box-sizing: border-box;
  gap: 4px;
  border-top: 1px solid #f3f4f6;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-list.content:not(.active) {
  display: none !important;
  margin: 0;
  padding: 0;
  border: none;
}

.events_page .ticket-type-col--pricing {
  text-align: left;
  align-self: center;
}

.events_page .tickets-card .ticket-types .ticket-group .ticket-list.content.active {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  border-top: 1px solid #f3f4f6;
  padding: 8px 6px;
}

.events_page .ticket-type-col--info {
  align-self: center;
}

.events_page .tickets-card .ticket-types .ticket-type .ticket-actions {
  align-self: center;
  justify-self: end;
  width: 140px;
}

.events_page .ticket-booking-fee-link {
  display: inline-block;
  margin-top: 4px;
  border: none;
  background: none;
  padding: 0;
  color: var(--booking-blue);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.events_page .footer-card.footer-card--dual-cta .refundable-notice-events {
  display: none;
}

/* pt: inline checkout in booking card (mockup); sticky cart bar remains for order summary */
.events_page .footer-card.footer-card--dual-cta {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* padding: 0 20px 20px; */
  margin-top: 0;
  gap: 0;
  background: #fff;
  box-sizing: border-box;
  padding: 0;
}

.events_page .footer-card.footer-card--dual-cta .footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 28px;
}

.events_page .footer-card.footer-card--dual-cta .footer-section .amount {
  text-align: right;
}

.events_page .footer-card.footer-card--dual-cta .total-section .label,
.events_page .footer-card.footer-card--dual-cta .total-label-mockup {
  color: var(--Black, #000);

  /* Caption */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 18.2px */
}

.events_page .footer-card.footer-card--dual-cta .total-section .amount {
  color: var(--Black, #000);
  text-align: right;

  /* Text Header */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 19.8px */
  letter-spacing: -0.36px;
}

.events_page .footer-card .checkout-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  justify-content: stretch;
  margin-top: 0;
  width: 100%;
}

.events_page .footer-card .checkout-actions-row .add-to-basket-btn,
.events_page .footer-card .checkout-actions-row .buy-tickets-now-btn {
  flex: 1;
  min-width: 200px;
  padding: 16px 20px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
}

.events_page .footer-card .add-to-basket-btn {
  background: var(--booking-teal);
  color: #fff;
}

.events_page .footer-card .buy-tickets-now-btn {
  background: var(--booking-blue);
  color: #fff;
}

.events_page .footer-card .add-to-basket-btn:disabled,
.events_page .footer-card .buy-tickets-now-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.events_page .footer-card .buy-tickets-now-btn.proceed-to-checkout-btn--loading,
.events_page .event-page-mobile-buy-bar__btn.proceed-to-checkout-btn--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 1;
  cursor: wait;
}

.proceed-to-checkout-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.proceed-to-checkout-loading__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
  flex-shrink: 0;
}

.proceed-to-checkout-loading__text {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.events_page .footer-card.footer-card--dual-cta .next-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.events_page .booking-fee-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--booking-blue);
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  color: var(--booking-blue);
  cursor: pointer;
  vertical-align: middle;
  font-family: Georgia, serif;
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
}

.events_page .footer-card.footer-card--dual-cta .booking-fee-section .label {
  display: flex;
  align-items: center;
  gap: 0;
}

.events_page .calendar-section {
  box-sizing: border-box;
  background: #eff0f5;
  border-radius: 12px;
  /* padding: 24px; */
  padding: 0;
}

.events_page .event-booking-main--seated .booking-shell-live {
  gap: 16px;
  padding: 22px;
}

@media (max-width: 480px) {
  .events_page .event-booking-main--seated .booking-shell-live {
    padding: 0;
  }
}

.events_page .event-booking-main .calendar-section {
  margin: 16px 16px 0;
  width: auto;
}

.events_page .event-booking-main--seated .calendar-section {
  display: flex;
  justify-content: center;
  margin: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-radius: 12px 12px 0 0;
}

.events_page .booking-seated-panel {
  background: #fff;
}

.events_page .footer-card.footer-card--dual-cta .reservation-time {
  margin-top: 12px;
  text-align: center;
  color: var(--Grey-text, #7f86a4);
  font-size: 14px;
  line-height: 1.35;
}

.events_page .footer-card.footer-card--dual-cta .reservation-time:empty {
  display: none;
}



.events_page .event-booking-main:not(.event-booking-main--seated) .booking-shell {
  background: transparent;
}

@media screen and (min-width: 768px) {
  .events_page .event-booking-main--seated .booking-shell {
    background: transparent;
  }
}

.events_page .calendar-duration-banner-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.events_page .calendar-duration-banner-wrapper.hidden {
  display: none !important;
}

.events_page .calendar-duration-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff7d9;
  color: var(--Deep-Grey, #1b1e21);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  border: 1px solid rgba(234, 179, 8, 0.25);
  box-sizing: border-box;
}

.events_page .calendar-duration-banner__clock {
  flex-shrink: 0;
  color: #1b1e21;
}

.events_page .calendar-duration-banner__text {
  margin: 0;
  white-space: normal;
  text-align: left;
}

.events_page .calendar-booking-calendar-cta {
  display: flex;
  justify-content: center;
  margin: 4px 0 0;
}

.events_page .calendar-booking-calendar-cta[hidden] {
  display: none !important;
}

.events_page .calendar-booking-calendar-cta--loading {
  min-height: 26px;
}

.events_page .calendar-booking-calendar-cta__skeleton {
  display: inline-block;
  width: min(240px, 70vw);
  height: 26px;
  border-radius: 6px;
  margin: 0 auto;
}

.events_page .event-booking-main[hidden] {
  display: none !important;
}

.events_page .event-booking-main--seated .calendar-section--single-fixed-slot {
  padding-bottom: 0;
}

.events_page .calendar-section--single-fixed-slot .calendar-section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.events_page .calendar-section--single-fixed-slot .calendar-section-meta,
.events_page .calendar-section--single-fixed-slot .month-scroll,
.events_page .calendar-section--single-fixed-slot .current-month,
.events_page .calendar-section--single-fixed-slot .dates-scroll-wrapper,
.events_page .calendar-section--single-fixed-slot .timeslot-wrapper,
.events_page .calendar-section--single-fixed-slot .calendar-availability-legend {
  display: none !important;
}

.events_page .calendar-section--single-fixed-slot .calendar-booking-calendar-cta {
  margin-top: 16px;
}

.events_page .calendar-booking-calendar-cta--has-legend {
  margin-bottom: 16px;
}

.events_page .calendar-booking-calendar-cta .calendar_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  cursor: pointer;

  width: auto;
  padding: 3px 8px;
  border-radius: 6px;
  border: none;
  background: var(--Soft-blue, #cde3ff);

  color: var(--Blue, #187dfd);
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.2px;
  text-transform: uppercase;
}

.events_page .calendar-booking-calendar-cta .calendar_btn svg {
  flex-shrink: 0;
  color: inherit;
}

.events_page .calendar-booking-calendar-cta .calendar_btn .event_page_add_to_calendar_menu {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 220px;
}

.events_page .calendar-availability-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin: 0 0 8px;
  padding: 8px 0 4px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--Deep-Grey, #1b1e21);
  margin: 0;
}

.events_page .calendar-availability-legend[hidden] {
  display: none !important;
}

.events_page .calendar-availability-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.events_page .calendar-availability-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.events_page .calendar-availability-legend__dot--few {
  background: var(--booking-few-bg);
}

.events_page .calendar-availability-legend__dot--soldout {
  background: var(--booking-sold-ui);
}

.events_page .calendar-availability-legend__dot--disabled {
  background: #d4d9ec;
}

.events_page .calendar-section .calendar {
  display: inline-flex;
  flex-wrap: nowrap;
  flex: none;
  width: max-content;
  max-width: none;
  gap: 12px;
  justify-content: flex-start;
  padding: 2px 0;
  grid-template-columns: none;
  text-align: left;
}

.events_page .calendar-section .date-cell {
  border: 1px solid #cccccc;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  padding: 0;
  font-family: inherit;
  overflow: hidden;

  box-shadow: none;

  min-width: 72px;
  min-height: 96px;

  width: auto;
  height: auto;
  aspect-ratio: auto;
}

.events_page .calendar-section .date-cell[role="button"]:focus-visible {
  outline: 2px solid var(--booking-blue, #2563eb);
  outline-offset: 2px;
}

.events_page .calendar-section .date-cell .date-cell-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 14px 10px 10px; */

  padding: 8px 0px;
  gap: 6px;
}

.events_page .calendar-section .date-cell .date-cell-month {
  color: var(--Black, #000);
  text-align: center;
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0;
}

.events_page .calendar-section .date-cell .date-cell-date {
  color: var(--Black, #000);
  text-align: center;
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.48px;
  margin: 0;
}

.events_page .calendar-section .date-cell .date-cell-day {
  text-transform: capitalize;

  margin: 0;
  color: var(--Black, #000);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.events_page .calendar-section .date-cell .date-cell-label {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  text-transform: lowercase;
}

.events_page .calendar-section .date-cell .date-cell-slot-time {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
}

.events_page .calendar-section .date-cell .date-cell-footer,
.events_page .calendar-section .date-cell .date-cell-time {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  text-transform: none;
  letter-spacing: normal;
  background: var(--booking-footer-muted);
  color: #111827;
  border-radius: 0 0 7px 7px;
  min-height: 11px;
  max-height: 32px;
  overflow: hidden;
  /* padding: 6px; */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.events_page .calendar-section .date-cell .date-cell-time {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}

.events_page .calendar-section .date-cell.selectable:not(.active):not(.soldout):hover {
  border-color: var(--booking-blue);
}

.events_page .calendar-section .date-cell.selectable:not(.active):not(.soldout):hover .date-cell-footer,
.events_page .calendar-section .date-cell.selectable:not(.active):not(.soldout):hover .date-cell-time {
  background: #dce4f7;
}

.events_page .calendar-section .date-cell.selectable.active {
  border: 2px solid var(--booking-blue-fill);
  background: var(--booking-blue-fill);
}

.events_page .calendar-section .date-cell.selectable.active .date-cell-month,
.events_page .calendar-section .date-cell.selectable.active .date-cell-date,
.events_page .calendar-section .date-cell.selectable.active .date-cell-day,
.events_page .calendar-section .date-cell.selectable.active .date-cell-label,
.events_page .calendar-section .date-cell.selectable.active .date-cell-slot-time {
  color: #fff;
}

.events_page .calendar-section .date-cell.selectable.active .date-cell-footer,
.events_page .calendar-section .date-cell.selectable.active .date-cell-time {
  background: var(--booking-calendar-active-strip);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.events_page .calendar-section .date-cell.past {
  opacity: 0.5;
  cursor: not-allowed;
}

.events_page .calendar-section .date-cell.past:not(.soldout):not(.active) .date-cell-footer {
  background: #e7e9f3;
  color: #9ca3af;
}

.events_page .calendar-section .date-cell.soldout {
  cursor: not-allowed;
  background: #fff;
  border: 2px solid var(--booking-sold-ui);
}

.events_page .calendar-section .date-cell.soldout.date-cell--manager-selectable {
  cursor: pointer;
}

.events_page .calendar-section .date-cell.soldout.date-cell--manager-selectable.selectable:hover {
  border-color: var(--booking-blue-fill, #187dfd);
}

.events_page .calendar-section .date-cell.selectable.date-cell--manager-view-only {
  cursor: pointer;
  pointer-events: auto;
}

.events_page .calendar-section .date-cell.past.selectable.date-cell--manager-view-only {
  cursor: pointer;
  pointer-events: auto;
}

.events_page .calendar-section .date-cell.soldout:disabled,
.events_page .calendar-section .date-cell.soldout[aria-disabled="true"] {
  pointer-events: none;
}

.events_page .calendar-section .date-cell.soldout .date-cell-month,
.events_page .calendar-section .date-cell.soldout .date-cell-date,
.events_page .calendar-section .date-cell.soldout .date-cell-day,
.events_page .calendar-section .date-cell.soldout .date-cell-slot-time,
.events_page .calendar-section .date-cell.soldout .date-cell-label {
  color: var(--booking-sold-ui);
}

.events_page .calendar-section .date-cell.soldout.few-left {
  opacity: 1;
}

.events_page .calendar-section .date-cell.soldout .date-cell-footer,
.events_page .calendar-section .date-cell.soldout .date-cell-time {
  background: var(--booking-sold-ui);
  color: #fff;
  font-weight: 800;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.events_page .calendar-section .date-cell.few-left:not(.soldout):not(.active) {
  border: 2px solid var(--booking-few-border);
}

.events_page .calendar-section .date-cell.few-left:not(.soldout):not(.active) .date-cell-footer,
.events_page .calendar-section .date-cell.few-left:not(.soldout):not(.active) .date-cell-time {
  background: var(--booking-few-bg);
  color: #111827;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.events_page .calendar-section .dates-scroll-inner.dates-scroll-inner--overflow {
  text-align: left;
}

/* Desktop date strip: show horizontal scrollbar when month has many dates */
.events_page .calendar-section:not(.calendar-section--dates-grid-mobile) .dates-scroll-inner.dates-scroll-inner--overflow {
  scrollbar-width: thin;
  scrollbar-color: #c5cad6 var(--Light-grey, #eff0f5);
  padding-bottom: 8px;
}

.events_page .calendar-section:not(.calendar-section--dates-grid-mobile) .dates-scroll-inner.dates-scroll-inner--overflow::-webkit-scrollbar {
  display: block;
  height: 8px;
}

.events_page .calendar-section:not(.calendar-section--dates-grid-mobile) .dates-scroll-inner.dates-scroll-inner--overflow::-webkit-scrollbar-track {
  background: var(--Light-grey, #eff0f5);
  border-radius: 4px;
}

.events_page .calendar-section:not(.calendar-section--dates-grid-mobile) .dates-scroll-inner.dates-scroll-inner--overflow::-webkit-scrollbar-thumb {
  background: #c5cad6;
  border-radius: 4px;
}

.events_page .calendar-section:not(.calendar-section--dates-grid-mobile) .dates-scroll-inner.dates-scroll-inner--overflow::-webkit-scrollbar-thumb:hover {
  background: #a8b0c0;
}

.events_page .calendar-section .dates-scroll-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.events_page .calendar-section .dates-scroll-inner {
  overflow-y: hidden;
  padding-top: 14px;
  margin-top: -8px;
  display: block;
  text-align: center;
  touch-action: pan-x;
  width: 100%;
}

.events_page .calendar-section .dates-scroll-btn {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.events_page .calendar-section .select-time-header,
.events_page .timeslot-wrapper .select-time-header {
  color: var(--Black, #000);
  text-align: center;

  /* Rubricator */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  /* 15.4px */
  letter-spacing: 0.84px;
  text-transform: uppercase;
}

.events_page .calendar-section .time-slots,
.events_page .timeslot-wrapper .time-slots {
  gap: 10px;
  justify-content: center;
}

.events_page .calendar-section .time-slot,
.events_page .timeslot-wrapper .time-slot {
  min-height: 44px;
  padding: 8px 20px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  background: #fff;
}

.events_page .time-slot-status-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  pointer-events: none;
}

.events_page .time-slot-status-dot--few {
  background: var(--booking-few-bg);
}

.events_page .time-slot-status-dot--sold {
  background: #ef4444;
}

.events_page .time-slot-status-dot--disabled {
  background: #94b9f7;
}

.events_page .calendar-section .time-slot.time-slot--sold-out:not(.active),
.events_page .timeslot-wrapper .time-slot.time-slot--sold-out:not(.active) {
  border-color: #fecaca;
  color: var(--booking-sold-ui);
}

.events_page .calendar-section .time-slot.time-slot--sold-out:not(.active) .time-slot-label,
.events_page .timeslot-wrapper .time-slot.time-slot--sold-out:not(.active) .time-slot-label {
  color: var(--booking-sold-ui);
}

.events_page .calendar-section .time-slot .time-slot-label-block,
.events_page .timeslot-wrapper .time-slot .time-slot-label-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.events_page .calendar-section .time-slot.time-slot--sold-out .time-slot-label-block,
.events_page .timeslot-wrapper .time-slot.time-slot--sold-out .time-slot-label-block {
  padding: 0 8px;
}

.events_page .calendar-section .time-slot.time-slot--sold-out .sold-out-text,
.events_page .timeslot-wrapper .time-slot.time-slot--sold-out .sold-out-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--booking-sold-text);
  background: rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
}

.events_page .calendar-section .time-slot.active,
.events_page .timeslot-wrapper .time-slot.active {
  background: var(--booking-blue);
  color: #fff;
  border-color: var(--booking-blue);
}

.events_page .calendar-section .time-slot.unavailable,
.events_page .timeslot-wrapper .time-slot.unavailable {
  color: #d1d5db;
  border-color: #e5e7eb;
  background: #fff;
}

.events_page .calendar-section .time-slot.few-left:not(.active) .few-left-text,
.events_page .timeslot-wrapper .time-slot.few-left:not(.active) .few-left-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--booking-sold-text);
}

.events_page .calendar-section .time-slot.active .few-left-text,
.events_page .timeslot-wrapper .time-slot.active .few-left-text {
  color: #fecaca;
}

.events_page .ticket-type-name {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.events_page .ticket-type-col--info .ticket-public-availability-message {
  margin: 4px 0 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b7280;
}

.events_page .ticket-type-col--info .ticket-manager-availability-label {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #6b7280;
}

.events_page .ticket-type-col--info .ticket-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.4;
}

.events_page .ticket-type-col--pricing .base-price {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.events_page .footer-card.footer-card--dual-cta .subtotal-section .label,
.events_page .footer-card.footer-card--dual-cta .booking-fee-section .label {
  font-size: 16px;
  font-weight: 400;
  color: #374151;
}

.events_page .footer-card.footer-card--dual-cta .subtotal-section .amount,
.events_page .footer-card.footer-card--dual-cta .booking-fee-section .amount {
  font-size: 16px;
  font-weight: 400;
  color: #111827;
}

.events_page .calendar-section .dates-scroll-btn {
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.events_page .calendar-section .dates-scroll-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
}

@media screen and (max-width: 640px) {

  /* Compact booking calendar: 5-col wrapping grid, 56×63 cells (border-box) — reference layout */
  .events_page .calendar-section {
    padding: 18px 10px 20px;
  }

  .events_page .calendar-duration-banner-wrapper {
    margin-bottom: 10px;
  }

  .events_page .calendar-duration-banner {
    padding: 9px 14px;
    font-size: 13px;
  }

  .events_page .calendar-section-heading {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .calendar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    padding: 2px 0 4px;
    box-sizing: border-box;
    overflow: visible;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .calendar .date-cell {
    box-sizing: border-box;
    width: 56px;
    min-width: 0;
    max-width: 56px;
    height: 63px;
    min-height: 63px;
    max-height: 63px;
    padding: 8px 0 0;
    border-radius: 8px;
    border-width: 1px;
  }

  /* Match reference: emphasize day number + weekday; omit month abbreviation in-cell */
  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-month {
    display: none;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-top {
    flex: 1 1 auto;
    justify-content: center;
    gap: 2px;
    padding: 0 2px 2px;
    min-height: 0;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-date {
    font-size: 17px;
    line-height: 1;
    letter-spacing: -0.36px;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-day {
    font-size: 9px;
    line-height: 1;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-footer,
  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell .date-cell-time {
    min-height: 16px;
    max-height: none;
    padding: 2px 1px;
    font-size: 7px !important;
    letter-spacing: 0.03em;
    line-height: 1.15;
    border-radius: 0 0 6px 6px;
  }

  /* Keep footprint: avoid 2px borders on mobile */
  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell.selectable.active {
    border-width: 1px;
    border-color: var(--booking-blue-fill, #187dfd);
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell.soldout {
    border-width: 1px;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .date-cell.few-left:not(.soldout):not(.active) {
    border-width: 1px;
  }

  /* Grid wraps rows; no horizontal strip scroll. Long months scroll vertically inside inner. */
  .events_page .calendar-section.calendar-section--dates-grid-mobile .dates-scroll-inner {
    overflow-x: visible !important;
    overflow-y: auto !important;
    padding-top: 6px;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .dates-scroll-inner::-webkit-scrollbar {
    display: block;
    width: 4px;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .dates-scroll-wrapper {
    gap: 0;
    align-items: stretch;
    margin-bottom: 12px;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .dates-scroll-btn {
    display: none !important;
  }

  .events_page .calendar-section.calendar-section--dates-grid-mobile .month-scroll {
    padding: 0 36px;
  }
}

/* ===== 14. Booking wizard (iframe-style checkout) ===== */
.events_page .events-booking-wizard {
  position: relative;
}

.events_page .events-booking-wizard .wizard-container {
  position: relative;
}

.events_page .events-booking-wizard .wizard-step-header {
  margin-bottom: 16px;
}

.events_page .events-booking-wizard .wizard-step-header .event-name {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}

.events_page .events-booking-wizard .step-indicator {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}

.events_page .events-booking-wizard .go-back {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #2483ff;
  cursor: pointer;
  text-decoration: none;
}

.events_page .events-booking-wizard .go-back:hover {
  text-decoration: underline;
}

.events_page .instagram-gallery-section {
  margin-top: 32px;
  padding: 0 24px 24px;
}

.events_page .instagram-gallery-placeholder {
  font-size: 15px;
  color: #4b5563;
}

.events_page .instagram-gallery-placeholder a {
  color: #2483ff;
  font-weight: 600;
}

/* Instagram gallery (main column, above description) */
.events_page .event-instagram-gallery {
  width: 100%;
  max-width: 100%;
  margin: 0 0 32px;
  box-sizing: border-box;
}

.events_page .event-instagram-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.events_page .event-instagram-gallery__cell {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  outline: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.events_page .event-instagram-gallery__cell:focus-visible {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--booking-blue, #2483ff);
}

.events_page .event-instagram-gallery__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

.events_page .event-instagram-gallery__cell--more .event-instagram-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.52);
  color: #fff;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  pointer-events: none;
}

@media (max-width: 480px) {
  .event_page_main_wrapper .main-container .events-purchase-section {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    padding: 0;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .events_page .event_page_main_wrapper .main-container .events-purchase-section-wrapper {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    max-width: none;
    /* padding-left: 0;
    padding-right: 0;
    padding-top: 0; */
    padding: 16px;
  }

  .event_page_main_wrapper .main-content {
    width: 100%;
    min-width: 0;
  }

  .container {
    padding: 0 12px;
  }

  .hero-image {
    height: 250px;
  }

  .play-button svg {
    width: 48px;
    height: 48px;
  }

  .review-card {
    padding: 1rem;
  }

  .reviews-carousel {
    flex-direction: column;
    gap: 1rem;
  }

  .carousel-nav {
    order: 2;
  }

  .description-content {
    font-size: 0.9rem;
  }

  .terms-list li,
  .terms-body ul li {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 767px) {
  .events_page .event_page_main_wrapper .main-content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 16px;
  }

  .events_page .event-booking-main--seated .calendar-section {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .events_page .event-booking-main--seated .calendar-section-inner,
  .events_page .event-booking-main--seated .seat-selection-svg-container {
    width: 100%;
  }

  .events_page .calendar-section-heading {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .events_page .calendar-month-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px 20px;
    padding-bottom: 4px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .events_page .calendar-month-tabs::-webkit-scrollbar {
    display: none;
  }

  .events_page .calendar-section .dates-scroll-wrapper {
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .events_page .calendar-section .dates-scroll-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
  }

  .events_page .calendar-section .calendar {
    gap: 10px;
    padding: 4px 2px 8px;
  }

  .events_page .calendar-section .calendar .date-cell {
    min-width: 112px;
    max-width: 128px;
  }

  .events_page .calendar-section .date-cell .date-cell-top {
    padding: 12px 8px 8px;
  }

  .events_page .timeslot-wrapper .select-time-header,
  .events_page .calendar-section .select-time-header {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .events_page .calendar-section .time-slots,
  .events_page .timeslot-wrapper .time-slots {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .events_page .calendar-section .time-slots::-webkit-scrollbar,
  .events_page .timeslot-wrapper .time-slots::-webkit-scrollbar {
    display: none;
  }

  .events_page .event-booking-main {
    /* padding-left: 0;
    padding-right: 0; */
    margin-top: 0;
    scroll-margin-top: 80px;
    padding: 16px;
  }

  .events_page .calendar-section {
    scroll-margin-top: 80px;
  }

  .events_page .tickets-card .ticket-types .ticket-type {
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "pricing"
      "actions";
    padding: 16px;
    gap: 12px;
    align-items: stretch;
    border-radius: 10px;
  }

  .events_page .tickets-card .ticket-types .ticket-type>.ticket-type-col--info {
    grid-area: info;
    align-self: start;
  }

  .events_page .tickets-card .ticket-types .ticket-type>.ticket-type-col--pricing {
    grid-area: pricing;
    align-self: start;
  }

  .events_page .tickets-card .ticket-types .ticket-type>.ticket-actions {
    grid-area: actions;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .events_page .tickets-card .ticket-types .ticket-type .ticket-actions {
    align-self: stretch;
  }

  .events_page .ticket-type-col--pricing {
    align-self: start;
  }

  .events_page #ticketSection .quantity-control,
  #eventPageStickyCartPanel .quantity-control {
    width: 100%;
    max-width: none;
    height: 48px;
  }

  .events_page #ticketSection .quantity-btn,
  #eventPageStickyCartPanel .quantity-btn {
    width: 48px;
    flex-shrink: 0;
  }

  .events_page #ticketSection .quantity-control .quantity,
  #eventPageStickyCartPanel .quantity-control .quantity {
    flex: 1;
    /* width: auto; */
    min-width: 0;
  }

  .events_page .footer-card .checkout-actions-row {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .events_page .footer-card .checkout-actions-row .add-to-basket-btn {
    order: 1;
  }

  .events_page .footer-card .checkout-actions-row .buy-tickets-now-btn,
  .events_page .footer-card .checkout-actions-row .add-to-basket-btn {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .events_page .tickets-card .ticket-types .ticket-group {
    border-radius: 10px;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    padding: 0;
    order: 1;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual {
    width: 100%;
    align-items: center;
    gap: 12px;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--visual .group-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    margin: 4px 4px 4px 2px;
    flex-shrink: 0;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-header-ticket-price {
    flex-wrap: nowrap;
    gap: 6px 8px;
    max-width: 100%;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--pricing .ticket-booking-fee-link {
    text-align: left;
    white-space: normal;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-list.content.active .ticket-list.content {
    margin-top: 16px;
    padding: 16px 0 0;
    border-top: 1px solid #f3f4f6;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--actions {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    order: 3;
    box-sizing: border-box;
  }

  .events_page .tickets-card .ticket-types .ticket-group:has(.ticket-list.content.active) .group-summary-col--actions {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-group-toggle {
    display: flex;
    justify-content: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .events_page .tickets-card .ticket-types .ticket-group .group-summary-col--actions .title {
    justify-content: stretch;
    width: 100%;
  }

  .events_page .tickets-card .ticket-types .ticket-group .toggle-options-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    border-radius: 8px;
    background: #e7e9f1;
    color: var(--booking-blue, #2483ff);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .events_page .tickets-card .ticket-types .ticket-group .toggle-options-chevron {
    color: var(--booking-blue, #2483ff) !important;
  }

  .events_page .tickets-card .ticket-types .ticket-group .toggle-options-btn {
    border-top: none;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-list.content {
    margin-top: 0;
    order: 2;
  }

  .events_page .tickets-card .ticket-types .ticket-group .ticket-list.content.active {
    padding: 12px 0 0;
    margin-top: 0;
  }

  .events_page .tickets-card .ticket-types .ticket-group--has-image .ticket-type--group-child .ticket-type-col--info {
    padding-right: 0;
  }

  .events_page .tickets-card .ticket-types .ticket-group:not(.ticket-group--has-image) .ticket-type--group-child {
    padding-left: 0;
  }
}

@media screen and (max-width: 768px) {

  .reviews-section .title,
  .terms-section .title {
    font-size: 17px;
    line-height: normal;
    letter-spacing: normal;
  }

  .description-content p {
    font-size: 16px;
  }

  .container {
    padding: 0 16px;
  }

  h2 {
    font-size: 1.5rem;
  }

  .hero_section {
    padding: 1.5rem 0;
  }

  .hero-image {
    height: 300px;
  }

  .description-section,
  .reviews-section,
  .terms-section {
    padding: 0;
  }

  .reviews-carousel {
    gap: 1rem;
  }

  .carousel-nav {
    width: 40px;
    height: 40px;
  }

  .review-card {
    padding: 1.5rem;
  }

  .section-title {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .events_page .event-instagram-gallery {
    margin-bottom: 24px;
  }

  .events_page .event-instagram-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .events_page .event-instagram-gallery__cell {
    border-radius: 8px;
  }

  .event_page_main_wrapper .main-container {
    gap: 20px;
  }
}

@media screen and (max-width: 970px) {
  .event_page_main_wrapper .footer-card {
    padding: 0;
  }
}

.ui.dimmer.modals.page.transition.visible.active {
  z-index: 10000001;
}

.ui.modal .close.icon {
  font-size: 24px;
}

.events-purchase-section-wrapper .md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 10000000;
  background-color: #000;
  opacity: 0;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}

.events-purchase-section-wrapper .md-overlay.open {
  visibility: visible;
  opacity: 0.7;
}

body.no-scroll {
  overflow: hidden;
}

.events-purchase-section-wrapper .md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 466px;
  max-width: calc(100vw - 48px);
  min-width: 0;
  height: fit-content;
  max-height: calc(100vh - 48px);
  z-index: 10000001;
  margin: 0;
  padding: 32px;
  box-sizing: border-box;
  border-radius: 16px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate(-50%, -50%) scale(0.7);
  transition: all 0.3s;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.events-purchase-section-wrapper .md-modal.hide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.events-purchase-section-wrapper .md-modal.md-show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.events-purchase-section-wrapper .md-modal .modal-info-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.events-purchase-section-wrapper .md-modal .page-title {
  color: var(--Black, #000);
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.72px;
  margin: 0;
  text-align: center;
}

.events-purchase-section-wrapper .md-modal .modal-paragraph,
.events-purchase-section-wrapper .md-modal .warningtickettypelabel {
  color: var(--Black, #000);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-align: center;
  margin: 0;
  width: 100%;
}

.events-purchase-section-wrapper .md-modal .warningtickettypelabel ul,
.events-purchase-section-wrapper .md-modal .warningtickettypelabel ol {
  margin: 0.5em 0;
  padding-left: 1.25em;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal .warningtickettypelabel a {
  color: inherit;
  text-decoration: underline;
}

.events-purchase-section-wrapper .md-modal .warning-empty-seats-modal__image-wrap {
  margin: 0;
  width: 100%;
}

.events-purchase-section-wrapper .md-modal .warning-empty-seats-modal__image {
  display: block;
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group .btn {
  width: 100%;
  min-width: 0;
  height: 50px;
  border-radius: 6px;
  margin: 0;
  text-transform: uppercase;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05143rem;
  cursor: pointer;
  border: none;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group .primary-btn {
  background: var(--Blue, #187dfd);
  color: #fff;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group .primary-btn:hover {
  background: #1568d4;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group .secondary-btn {
  background: #fff;
  color: var(--Black, #000);
  border: 1px solid #d1d5db;
}

.events-purchase-section-wrapper .md-modal .panel-buttons-group .secondary-btn:hover {
  background: #f9fafb;
}

.events-purchase-section-wrapper .md-modal.warning-tickettype-modal,
.events-purchase-section-wrapper .md-modal.warningemptyseatsmodal {
  min-height: 254px;
  justify-content: center;
}

.events-purchase-section-wrapper .md-modal.booking-fee-modal {
  width: min(720px, calc(100vw - 48px));
  min-height: 0;
  align-items: stretch;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.booking-fee-modal .modal-info-header {
  align-items: flex-start;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.booking-fee-modal .page-title {
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.72px;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.booking-fee-modal .modal-paragraph {
  font-size: 20px;
  line-height: 32px;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.booking-fee-modal .email {
  color: var(--Blue, #187dfd);
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: -0.4px;
}

/* Admin default seat click action (manager seated events) */
.event-page-admin-seat-action.admin-tools.form-group.split-width {
  max-width: 320px;
  /* margin: 0 0 16px; */
  position: relative;
}

.event-page-admin-seat-action .tooltip-trigger label {
  color: var(--grey-dark-2, #6b7280);
  display: block;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 8px;
}

.event-page-admin-seat-action select.regular {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  color: #111827;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  padding: 10px 36px 10px 12px;
  width: 100%;
}

.event-page-admin-seat-action .info-tooltip.bottom-arrow.wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  color: #374151;
  display: none;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  max-width: 280px;
  padding: 12px;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
}

.event-page-admin-seat-action .tooltip-trigger:hover+.info-tooltip {
  display: block;
}

.events-purchase-section-wrapper .md-modal.seat-purchase-history-modal {
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  text-align: left;
  width: min(960px, calc(100vw - 48px));
}

.events-purchase-section-wrapper .md-modal.seat-purchase-history-modal .modal-info-header {
  align-items: flex-start;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.seat-purchase-history-modal .page-title {
  font-size: 28px;
  line-height: 32px;
  text-align: left;
}

.seat-purchase-history-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.seat-purchase-history-modal__message {
  color: #6b7280;
  font-family: Inter, sans-serif;
  font-size: 14px;
  margin: 0;
}

.seat-purchase-history-modal__message[hidden] {
  display: none !important;
}

.seat-purchase-history-modal__lock-info {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 16px;
  width: 100%;
}

.seat-purchase-history-modal__lock-info[hidden] {
  display: none !important;
}

.seat-purchase-history-modal__lock-title {
  color: #111827;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  margin: 0 0 8px;
}

.seat-purchase-history-modal__lock-line1,
.seat-purchase-history-modal__lock-line2 {
  color: #374151;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 8px;
}

.seat-purchase-history-modal__lock-line2 {
  margin-bottom: 12px;
}

.seat-purchase-history-modal__lock-actions {
  gap: 8px;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.seat-purchase-history-modal--loading .seat-purchase-history-modal__lock-info {
  opacity: 0.5;
  pointer-events: none;
}

.seat-purchase-history-modal__table-wrap {
  max-height: min(50vh, 420px);
  overflow: auto;
  width: 100%;
}

.seat-purchase-history-modal__table {
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 13px;
  min-width: 100%;
  width: max-content;
}

.seat-purchase-history-modal__table thead th {
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  white-space: nowrap;
  z-index: 1;
}

.seat-purchase-history-modal__table tbody td {
  border-top: 1px solid #e5e7eb;
  color: #111827;
  padding: 10px 12px;
  vertical-align: top;
  white-space: nowrap;
}

.seat-purchase-history-modal__table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.seat-purchase-history-modal__table tbody tr.seat-purchase-history-modal__row--lock td {
  background: #fffbeb;
}

.seat-purchase-history-modal--loading .seat-purchase-history-modal__table-wrap {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== Seating plan embed ===== */
.seatingplancontainer {
  background: #222326;
  padding: 16px 8px;
  overflow: hidden;
  touch-action: none;
}

.seatingplancontainer object {
  display: block;
  width: 100%;
  overflow: hidden;
}

.seatingplancontainer .seatingcontainer,
.seatingplancontainer #seatingsvgpanzoomobject {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: pointer !important;
}

.seatingplancontainer .seating-plan-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.seating-zone-popup-mount {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.seating-zone-popup-mount .seating-zone-popup {
  pointer-events: auto;
}

.seatingplancontainer .btn-back-plan {
  max-width: unset;
  margin: 8px;
  /* box-sizing: border-box; */
  /* min-width: unset; */
  border: none;
  /* font-family: Roboto; */
  border-radius: 6px;
  /* outline: none !important; */
  min-height: 56px;
  /* line-height: 1; */
  /* font-size: 16px; */
  text-align: center;
  /* font-weight: 700; */
  text-transform: initial !important;
  outline: none !important;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
  box-sizing: border-box;
  color: #000;

  width: 100%;
  min-width: auto;
  margin: 0;
}

/* Zoom SVG containers */

.events-page .zoomsvgcontainers .control-buttons {
  background-color: #222326;
  padding: 16px;
}

.events-page .zoomsvgcontainers .control-buttons .row {
  margin-bottom: 24px;
}

.events-page .zoomsvgcontainers .control-buttons .btn-group-justified {
  display: flex;
  justify-content: space-between;
  grid-auto-flow: column;
  width: 100%;
}

.events-page .zoomsvgcontainers .control-buttons .btn-group-justified .btn-group {
  width: 14.2857142857%;
}

.events-page .zoomsvgcontainers .control-buttons .btn-group-justified .btn-group:first-of-type>.btn {
  border-radius: 4px 0 0 4px;
}

.events-page .zoomsvgcontainers .control-buttons .btn-group-justified .btn-group .btn {
  background: #ffffff;
  border: 1px solid var(--grey-light-1, #d9e3ea);
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
  min-width: unset;
  padding: 8px 16px;
  width: 100%;
  border-radius: 0;
  min-height: unset;
  line-height: 24px;
  height: 40px;
}

.events-page .zoomsvgcontainers .control-buttons .btn-group-justified .btn-group .btn .icon {
  color: #000;
}

.events-page .zoomsvgcontainers .control-buttons .btn:disabled {
  border: 1px solid var(--grey-light-3, #f5f8fa) !important;
  background-color: var(--grey-light-3, #f5f8fa) !important;
  color: var(--grey, #b1c2cf) !important;
  pointer-events: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.events-page .zoomsvgcontainers .control-buttons .btn:disabled .icon {
  color: var(--grey, #b1c2cf) !important;
}

.events-page .zoomsvgcontainers .control-buttons .row:last-of-type {
  margin-bottom: 0;
}

[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  margin: 16px 0;
  width: 100%;
  padding: 0;
  height: 32px;
}

input[type="range" i] {
  appearance: auto;
  cursor: default;
  color: light-dark(rgb(16, 16, 16), rgb(255, 255, 255));
  padding: initial;
  border: initial;
  margin: 2px;
}

.events-page .zoomsvgcontainers .control-buttons .row input[type="range"] {
  margin: 0;
}

/* Zoom range slider */
.events-page .zoomsvgcontainers .control-buttons .row input.zoom-range,
input.zoom-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  outline: none;
}

input.zoom-range[type="range" i] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}

input.zoom-range::-moz-focus-outer {
  border: 0;
}

input.zoom-range:focus {
  outline: none;
}

input.zoom-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.35);
}

input.zoom-range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 255, 255, 0.35);
}

input.zoom-range::-webkit-slider-runnable-track {
  height: 3px;
  width: 100%;
  background: #090a0b;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

input.zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 20px;
  margin-top: -8.5px;
  background: #ffffff;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

input.zoom-range::-moz-range-track {
  height: 3px;
  width: 100%;
  background: #090a0b;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

input.zoom-range::-moz-range-thumb {
  width: 8px;
  height: 20px;
  background: #ffffff;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

input.zoom-range::-ms-track {
  width: 100%;
  height: 3px;
  background: transparent;
  border-color: transparent;
  color: transparent;
  cursor: pointer;
}

input.zoom-range::-ms-fill-lower,
input.zoom-range::-ms-fill-upper {
  background: #090a0b;
  border-radius: 999px;
}

input.zoom-range::-ms-thumb {
  width: 8px;
  height: 20px;
  background: #ffffff;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.events-page .buyseatedticketscontainer {
  /* padding: 24px; */
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;

  padding: 0;
}

/* ===== 15. Seating zone quantity popup ===== */

.seatingplan-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.seating-zone-popup {
  position: absolute;
  z-index: 25;
  width: min(280px, calc(100% - 16px));
  pointer-events: auto;
}

.seating-zone-popup[hidden] {
  display: none !important;
}

.seating-zone-popup__content {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); */
  padding: 16px;
}

.seating-zone-popup__caret {
  position: absolute;
  top: -8px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.seating-zone-popup--caret-bottom .seating-zone-popup__caret {
  top: auto;
  bottom: -8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
}

.seating-zone-popup__title {
  margin: 0 0 4px;
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.seating-zone-popup__content .ticket-public-availability-message {
  margin: 4px 0 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #6b7280;
}

.seating-zone-popup__content .ticket-public-availability-message[hidden] {
  display: none !important;
}

.seating-zone-popup__content .ticket-manager-availability-label {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #6b7280;
}

.seating-zone-popup__description {
  margin: 0 0 8px;
  font-family: Inter, sans-serif;


  color: var(--Grey-text, #7f86a4);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  display: block;
}

.seating-zone-popup__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.seating-zone-popup__base-price {
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.seating-zone-popup__booking-fee {
  color: #767676;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.seating-zone-popup__max-notice {
  margin: 0 0 8px;
  color: #d93025;
  font-size: 13px;
  line-height: 1.3;
}

.seating-zone-popup__max-notice[hidden] {
  display: none !important;
}

.seating-zone-popup__sold-out-label {
  display: block;
  margin-bottom: 12px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-align: center;
}

.seating-zone-popup__sold-out-label[hidden] {
  display: none !important;
}

.seating-zone-popup.seating-zone-popup--manager-purchasable.sold-out
  .seating-zone-popup__title,
.seating-zone-popup.seating-zone-popup--manager-purchasable.disabled
  .seating-zone-popup__title,
.seating-zone-popup.seating-zone-popup--manager-purchasable.sold-out
  .seating-zone-popup__base-price,
.seating-zone-popup.seating-zone-popup--manager-purchasable.disabled
  .seating-zone-popup__base-price {
  opacity: 1;
}

.seating-zone-popup.max-quantity-reached .quantity-control .quantity {
  color: #d93025;
}

.seating-zone-popup .quantity-control {
  display: flex;
  align-items: stretch;
  height: 40px;
  width: 100%;
}

.seating-zone-popup .quantity-control .quantity-btn {
  width: 40px;
  height: 100%;
  border: none;
  background-color: #e7e9f1;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4285f4;
  flex-shrink: 0;
}

.seating-zone-popup .quantity-control .quantity-btn.minus {
  background-color: #e7e9f1;
  color: #fff;
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}

.seating-zone-popup .quantity-control .quantity-btn.minus.has-quantity {
  background: var(--Blue, #187dfd);
  color: #fff;
  pointer-events: all;
}

.seating-zone-popup .quantity-control .quantity-btn.plus {
  background: var(--Blue, #187dfd);
  color: #fff;
  border-radius: 0 6px 6px 0;
}

.seating-zone-popup.max-quantity-reached .quantity-control .quantity-btn.plus {
  opacity: 0.45;
  pointer-events: none;
}

.seating-zone-popup .quantity-control .quantity-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.seating-zone-popup .quantity-control .quantity {
  flex: 1;
  min-width: 0;
  border: 1px solid #e7e9f1;
  border-left: none;
  border-right: none;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  background: #fff;
}

.seating-zone-popup .quantity-control .quantity.has-quantity {
  color: #000;
}

.seating-zone-popup .quantity-control .quantity::-webkit-inner-spin-button,
.seating-zone-popup .quantity-control .quantity::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.events-purchase-section-wrapper .md-modal.seating-sub-price-modal .modal-info-header {
  align-items: stretch;
  text-align: left;
}

.events-purchase-section-wrapper .md-modal.seating-sub-price-modal .page-title {
  text-align: left;
}

.seating-sub-price-modal .seating-sub-price-popup__field-label {
  display: block;
  margin: 0 0 6px;
  color: #7f86a4;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.seating-sub-price-modal .seating-sub-price-popup__select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #e7e9f1;
  border-radius: 12px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237F86A4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.seating-sub-price-modal .seating-sub-price-popup__select:disabled {
  opacity: 0.6;
}

.seating-sub-price-modal .seating-sub-price-popup__message {
  margin: 8px 0 0;
  color: #d93025;
  font-size: 13px;
  line-height: 1.3;
}

.seating-sub-price-modal .seating-sub-price-popup__message[hidden] {
  display: none !important;
}

/* Ticket cart (production buy-tickets-btn markup) */
.event_page_header .btn.primary-btn,
.events_page .btn.primary-btn,
.event-details-header .btn.primary-btn {
  background-color: #187dfd;
  color: #fff;
  border-color: #187dfd;
  padding: 16px;
}

.event_page_header .btn.primary-btn:not(.no-shadow):not(:disabled):not(.clickable-disabled),
.events_page .btn.primary-btn:not(.no-shadow):not(:disabled):not(.clickable-disabled),
.event-details-header .btn.primary-btn:not(.no-shadow):not(:disabled):not(.clickable-disabled) {
  box-shadow: 0 1px 2px rgba(177, 194, 207, 0.5);
}

.event_page_header .btn.primary-btn:hover,
.events_page .btn.primary-btn:hover,
.event-details-header .btn.primary-btn:hover {
  background-color: #1757c5;
  border-color: #1757c5;
}

.event_page_header .btn.btn-x-small,
.events_page .btn.btn-x-small,
.event-details-header .btn.btn-x-small {
  width: fit-content;
  min-width: fit-content;
  min-height: 48px;
  font-size: 14px;
  line-height: 16px;
  padding: 16px 24px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.event_page_header .btn.total-ticket-qty,
.events_page .btn.total-ticket-qty,
.event-details-header .btn.total-ticket-qty {
  min-width: unset;
}

.event_page_header .btn.total-ticket-qty>*,
.events_page .btn.total-ticket-qty>*,
.event-details-header .btn.total-ticket-qty>* {
  vertical-align: top;
  display: inline-block;
}

.event_page_header .btn.total-ticket-qty .icon,
.events_page .btn.total-ticket-qty .icon,
.event-details-header .btn.total-ticket-qty .icon {
  margin-right: 8px;
}

/* Semantic UI sets i.icon:before { background: none !important }, which hides mask icons. */
.event-page-ticket-cart-btn.total-ticket-qty .icon-tickets:before,
.event-page-ticket-cart-btn.total-ticket-qty .icon.icon-tickets:before {
  background-color: currentColor !important;
}

.event_page_header_contacts_aside {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  flex-shrink: 0;
}

.event_page_header_ticket_cart {
  display: flex;
  justify-content: flex-end;
  width: auto;
  order: 1;
}

.event_page_header_ticket_cart.temporarily-hidden {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .event_page_header_contacts_aside {
    width: 100%;
    margin-left: 0;
    align-items: stretch;
    gap: 24px;
  }

  /* Mobile cart lives in #eventPageStickyInfoBar only (after scroll). */
  .event_page_header_ticket_cart {
    display: none !important;
  }
}

.event-details-header {
  top: -112px;
  position: fixed;
  background-color: #fff;
  transition: top 0.4s ease-in-out;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding: 16px;
  line-height: 1;
  z-index: 9999;
  left: 0;
  box-shadow: 0px 1px 2px rgba(9, 10, 11, 0.1)
}

.event-details-header .container {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  grid-gap: 24px;
  grid-template-columns: calc(100% - 98px) 72px;
}

.event-details-header .container .right-group,
.event-details-header .container .left-group {
  width: fit-content;
}

.event-details-header .container .right-group {
  justify-self: flex-end;
}

.event-details-header .container .left-group {
  width: 100%;
}

.event-details-header .container .left-group .image-container {
  height: 48px;
  width: 48px;
  background-color: #eff0f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  margin-right: 8px;
}

.event-details-header .container .left-group .event-details-container {
  max-width: calc(100% - 72px);
}

.event-details-header .container .left-group .event-details-container h2 {
  color: #424242;
  font-weight: 900;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 20px;
  line-height: 20px;
  margin: 0;
}

.event-details-header .container .left-group .image-container,
.event-details-header .container .left-group .event-details-container {
  display: inline-block;
  vertical-align: middle;
}

.event-details-header.is-visible {
  top: 0;
}

@media screen and (max-width: 768px) {
  .event-details-header {
    height: 64px;
    padding: 8px;
  }

  .event-details-header .container .right-group .buy-tickets-btn {
    font-size: 12px;
    min-width: 48px;
    padding: 0 16px;
  }
}

@media screen and (min-width: 992px) {
  .event-details-header .container {
    max-width: 1360px;
    margin: 0 auto;
    grid-template-columns: calc(100% - 172px) 148px;
  }
}

/* Sticky footer ticket cart */
.events_page.events-page-sticky-cart-visible {
  padding-bottom: calc(var(--event-page-sticky-cart-bar-height, 72px) + env(safe-area-inset-bottom, 0px));
}

.event-page-sticky-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.event-page-sticky-cart-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.event-page-sticky-cart-overlay[hidden] {
  display: none !important;
}

.event-page-sticky-cart-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--event-page-sticky-cart-panel-offset, calc(var(--event-page-sticky-cart-bar-height, 72px) + 12px));
  z-index: 10070;
  display: flex;
  flex-direction: column;
  max-height: min(70vh,
      calc(100vh - var(--event-page-sticky-cart-panel-offset, 84px) - 16px));
  background: #fff;
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s ease-out,
    opacity 0.2s ease-out;
  overflow: hidden;

  border-radius: 6px;
  border: 1px solid var(--Medium-grey, #D4D9EC);
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.16);
}

.event-page-sticky-cart-panel[hidden] {
  display: none !important;
}

.event-page-sticky-cart-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.event-page-sticky-cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e7e9f1;
  flex-shrink: 0;
}

.event-page-sticky-cart-panel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

.event-page-sticky-cart-panel__clear {
  border: none;
  background: none;
  padding: 0;
  color: var(--booking-blue, #187dfd);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-transform: lowercase;
}

.event-page-sticky-cart-panel__clear:hover {
  text-decoration: underline;
}

.event-page-sticky-cart-panel__items {
  overflow-y: auto;
  padding: 0 0 8px;
}

.event-page-sticky-cart-order-item {
  padding: 16px 20px;
  border-bottom: 1px solid #e7e9f1;
}

.event-page-sticky-cart-order-item:last-child {
  border-bottom: none;
}

.event-page-sticky-cart-order-item__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.event-page-sticky-cart-order-item__title-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.event-page-sticky-cart-order-item__title-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.event-page-sticky-cart-order-item__qty {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #7f86a4;
  white-space: nowrap;
}

.event-page-sticky-cart-order-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #7f86a4;
  cursor: pointer;
}

.event-page-sticky-cart-order-item__remove:hover {
  background: #eff0f5;
  color: #000;
}

.event-page-sticky-cart-order-item__remove .icon {
  margin: 0;
  font-size: 16px;
}

.event-page-sticky-cart-order-item__seat {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.35;
  color: #424242;
}

.event-page-sticky-cart-order-item__sub-price-label {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.35;
  color: #424242;
}

.event-page-sticky-cart-order-item__sub-price-label-text {
  font-weight: 600;
  color: #7f86a4;
  display: block;
  margin-bottom: 6px;
}

.event-page-sticky-cart-sub-price-select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e7e9f1;
  border-radius: 12px;
  background: #fff;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237F86A4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.event-page-sticky-cart-sub-price-select:disabled {
  opacity: 0.6;
}

.event-page-sticky-cart-order-item__description {
  margin-top: 4px;
}

.event-page-sticky-cart-order-item__description .ticket-group-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
}

.event-page-sticky-cart-order-item__description.is-expanded .ticket-group-description {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

.event-page-sticky-cart-order-item__description .ticket-desc-read-more {
  display: block;
  margin-left: auto;
  text-align: right;
}

#eventPageStickyCartPanel .quantity-control {
  display: none;
}

.event-page-sticky-cart-order-item__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--booking-blue, #187dfd);
}

.event-page-sticky-cart-order-item__name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
}

.event-page-sticky-cart-order-item__subtitle {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.35;
  color: #424242;
}

.event-page-sticky-cart-order-item__price {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.3;
  color: #000;
}

.event-page-sticky-cart-order-item__base-price {
  font-weight: 600;
}

.event-page-sticky-cart-order-item__price .booking-fee {
  color: #6b7280;
  font-weight: 400;
}

.event-page-sticky-cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10060;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #1B1E21;
  color: #fff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
  will-change: transform;
}

.event-page-sticky-cart-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.event-page-sticky-cart-bar[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .event-page-sticky-cart-bar {
    transition: none;
  }
}

.event-page-sticky-cart-bar__order-toggle {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--booking-blue, #187dfd);
  border-radius: 8px;
  background: #1b1e21;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  flex-shrink: 0;
  overflow: hidden;
}

.event-page-sticky-cart-bar__order-toggle:hover:not(:disabled) {
  border-color: #3d94ff;
}

.event-page-sticky-cart-bar__order-toggle:hover:not(:disabled) .event-page-sticky-cart-bar__order-toggle-leading {
  background: #3d94ff;
}

.event-page-sticky-cart-bar__order-toggle:disabled,
.event-page-sticky-cart-bar__order-toggle.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.event-page-sticky-cart-bar__order-toggle-leading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--booking-blue, #187dfd);
  color: #fff;
}

.event-page-sticky-cart-bar__ticket-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.event-page-sticky-cart-bar__order-divider {
  display: none;
}

.event-page-sticky-cart-bar__count {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.event-page-sticky-cart-bar__order-label {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: #1b1e21;
  color: #fff;
  white-space: nowrap;
}

.event-page-sticky-cart-bar__center {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.event-page-sticky-cart-bar__timer {
  flex: 1 1 120px;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-page-sticky-cart-bar__timer:empty,
.event-page-sticky-cart-bar__timer .reservation-time:empty {
  display: none;
}

.event-page-sticky-cart-bar__timer-mobile {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  line-height: 1.2;
}

.event-page-sticky-cart-bar__timer-mobile:empty {
  display: none;
}

.event-page-sticky-cart-bar[data-timer-urgency="normal"] .reservation-time,
.event-page-sticky-cart-bar[data-timer-urgency="normal"] .reservation-time-mobile {
  color: #fff;
}

.event-page-sticky-cart-bar[data-timer-urgency="warning"] .reservation-time,
.event-page-sticky-cart-bar[data-timer-urgency="warning"] .reservation-time-mobile {
  color: #ffc107;
}

.event-page-sticky-cart-bar[data-timer-urgency="critical"] .reservation-time,
.event-page-sticky-cart-bar[data-timer-urgency="critical"] .reservation-time-mobile {
  color: #ff5252;
}

.event-page-sticky-cart-bar__spacer {
  display: none;
}

.event-page-sticky-cart-bar__total {
  flex-shrink: 0;
  text-align: right;
}

.event-page-sticky-cart-bar__total-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.event-page-sticky-cart-bar__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: auto;
}

.event-page-sticky-cart-bar__actions .add-to-basket-btn,
.event-page-sticky-cart-bar__actions .buy-tickets-now-btn {
  width: auto;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.event-page-sticky-cart-bar__actions .add-to-basket-btn {
  background: var(--booking-teal, #00bfa5);
  color: #fff;
}

.event-page-sticky-cart-bar__actions .buy-tickets-now-btn {
  background: var(--booking-blue, #187dfd);
  color: #fff;
}

.event-page-sticky-cart-bar__actions .add-to-basket-btn:disabled,
.event-page-sticky-cart-bar__actions .buy-tickets-now-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.event-page-sticky-cart-bar__actions .buy-tickets-now-btn.proceed-to-checkout-btn--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 1;
  cursor: wait;
}

@media screen and (max-width: 767px) {
  .event-page-sticky-cart-bar {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .event-page-sticky-cart-bar__order-toggle {
    order: 0;
    flex: 0 0 auto;
    width: auto;
  }

  .event-page-sticky-cart-bar__timer {
    display: none;
  }

  .event-page-sticky-cart-bar__center {
    order: 1;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
  }

  .event-page-sticky-cart-bar__timer-mobile {
    display: block;
  }

  .event-page-sticky-cart-bar__total {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .event-page-sticky-cart-bar__actions {
    order: 2;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .event-page-sticky-cart-bar__actions .add-to-basket-btn,
  .event-page-sticky-cart-bar__actions .buy-tickets-now-btn {
    width: auto;
    min-width: 120px;
    white-space: nowrap;
    padding: 14px 20px;
  }
}

@media screen and (max-width: 480px) {
  .event-page-sticky-cart-bar {
    gap: 8px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .event-page-sticky-cart-bar__order-toggle-leading {
    padding: 10px;
    gap: 6px;
  }

  .event-page-sticky-cart-bar__order-toggle {
    position: relative;
  }

  .event-page-sticky-cart-bar__order-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .event-page-sticky-cart-bar__center {
    min-width: 0;
  }

  .event-page-sticky-cart-bar__total-value {
    font-size: 16px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .event-page-sticky-cart-bar__actions {
    min-width: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .event-page-sticky-cart-bar__actions .add-to-basket-btn,
  .event-page-sticky-cart-bar__actions .buy-tickets-now-btn {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 132px;
    padding: 12px 12px;
    font-size: 10px;
  }
}

@media screen and (min-width: 768px) {
  .event-page-sticky-cart-bar {
    flex-wrap: nowrap;
    align-items: center;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .event-page-sticky-cart-bar__center {
    flex-shrink: 0;
  }

  .event-page-sticky-cart-bar__timer-mobile {
    display: none !important;
  }

  .event-page-sticky-cart-bar__total {
    text-align: right;
  }

  .event-page-sticky-cart-panel {
    left: 16px;
    right: auto;
    width: min(420px, calc(100vw - 32px));
    border-radius: 6px;
    bottom: var(--event-page-sticky-cart-panel-offset, calc(var(--event-page-sticky-cart-bar-height, 72px) + 12px));
    max-height: min(520px,
        calc(100vh - var(--event-page-sticky-cart-panel-offset, 84px) - 24px));
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.25s ease-out,
      opacity 0.2s ease-out;
  }

  .event-page-sticky-cart-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}


.hide {
  display: none !important;
  visibility: hidden !important;
}

.show {
  display: block !important;
  visibility: visible !important;
}

/* Spacing utilities */
.mb-0 {
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mt-2 {
  margin-top: 2rem !important;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mt-3 {
  margin-top: 3rem !important;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.mt-4 {
  margin-top: 4rem !important;
}