html, body.events-page {
  background-color: #0d0d0d !important;
}
/* Event tabs styling */
.event-tabs-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* -----------------------------
   Hide panels & dividers until a category is active
   ----------------------------- */
/* Keep thumbnails visible; hide the content panels until a category is active */
.event-tab-content,
.package-detail-content,
.event-package-details {
  display: none !important;
}

/* Reveal when a category has been activated via JS (body.has-active-event)
   We use `body.has-active-event` so this behavior applies only on pages
   that load this stylesheet and only after JS toggles the class. */
body.has-active-event .event-tab-content,
body.has-active-event .package-detail-content,
body.has-active-event .event-package-details {
  display: block !important;
}

/* Ensure a comfortable gap between the last BOOK NOW button and the fixed footer */
.event-package-details::after {
  content: "";
  display: block;
  height: 6rem;
}

/* -----------------------------
   Footer: keep fixed at viewport bottom on this page only
   (content will scroll; events.php already includes a spacer div above footer)
   ----------------------------- */
.site-footer {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
/* Center copyright text in events page footer */
.site-footer .footer-copyright {
  text-align: center !important;
  width: 100%;
  margin: 4px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
}

/* Smooth background transitions for events page */
.page-bg {
  transition: background-image 0.6s ease-in-out;
}

.event-tab-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 25px auto;
  flex-wrap: wrap;
}

.event-tab-thumb {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  border-radius: 8px;
 /* overflow: hidden; */ /* REMOVE THIS */
}

.event-tab-thumb img {
  width: 173px; /* increased 15% from 150px */
  height: 173px; /* maintain square thumbnail */
  max-width: 85vw; /* ensure category images can scale relative to viewport */
  object-fit: cover;
  display: block;
}

.event-tab-thumb:hover {
  box-shadow: 0 0 25px #E899F2;
  transform: scale(1.05);
}

.event-tab-thumb:active {
  transform: scale(0.97);
}

.event-tab-thumb.active {
  box-shadow: 0 0 30px #9BE2F2;
}

#eventTabPanel {
  max-width: 860px;
  margin: 30px auto;
  padding: 0 20px;
  position: relative;
  min-height: 300px;
}

.event-tab-content {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.event-tab-content.active {
  position: relative;
  left: 0;
  right: 0;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Tab-style content box (matching loyalty-landing.css aesthetic) */
.event-content-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: rgba(16,16,18,0.6);
  border-radius: 10px;
  border: 1px solid rgba(123,224,255,0.04);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  color: var(--white);
  /* Keep top and bottom content boxes identical in width and centered */
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* .event-content-box h3 {
  color: var(--pink);
  font-size: 2rem;
  margin: 0 0 0.5em 0;
  text-align: center;
} */

.event-content-box p {
  color: var(--white);
  line-height: 1.8;
  text-align: left;
  max-width: none !important;
  width: auto;
  margin: 0 0 1em;
  font-size: var(--fs-base);
}

.event-content-box .book-now-btn {
  align-self: center;
  float: none;
  margin: 1rem auto 0;
}

.book-now-btn {
  padding: 12px 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--cyan), var(--pink));
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 80ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  display: inline-block;
  width: 160px;
  text-align: center;
}

.book-now-btn:hover {
  color: var(--white) !important;
  box-shadow: 0 0 16px var(--pink);
  text-decoration: none !important;
}

.book-now-btn:active {
  color: var(--ink) !important;
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

/* Package Details Section (no background box) */
.event-package-details {
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
}

.package-details-container {
  position: relative;
  min-height: 300px;
}

.package-detail-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.package-detail-content.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.package-detail-content h3 {
  color: var(--cyan);
  font-size: var(--fs-lg);
  margin: 0 0 1em 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.package-detail-content p {
  color: var(--white);
  line-height: 1.8;
  text-align: center;
  max-width: none !important;
  width: auto;
  margin: 0 auto 1.5em;
  font-size: var(--fs-base);
}

/* Package grid for details (two-column, responsive) */
.package-detail-content .package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1.25rem;
  align-items: start;
  margin: 0 auto;
  max-width: 750px;
  text-align: left;
}
.package-detail-content .package-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.package-detail-content .package-item img.package-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  filter: brightness(0) invert(1); /* ensure white icons if SVGs are dark */
}
.package-detail-content .package-item .package-text {
  margin: 0;
  color: var(--white);
  font-size: var(--fs-base);
  line-height: 1.4;
  max-width: none !important;
  width: auto;
  text-align: left;
}

@media (max-width: 720px) {
  .package-detail-content .package-grid { grid-template-columns: 1fr; max-width: 100%; }
  .package-detail-content .package-item img.package-icon { width: 24px; height: 24px; flex: 0 0 24px; }
  .package-detail-content .package-item .package-text { font-size: var(--fs-base); }
}

/* Ensure everything in a package includes block (except titles) uses the same readable size */
.package-detail-content p,
.package-detail-content .package-text,
.package-detail-content ul,
.package-detail-content li {
  font-size: 1.325rem;
  color: var(--white);
  line-height: 1.4;
  max-width: none !important;
}

.package-detail-content .book-now-btn {
  display: block;
  margin: 1.5rem auto 0;
  text-align: center;
}

/* Desktop: keep all category thumbnails on a single row and let them scale
   to fill the available space in the `.event-tab-row`. This prevents
   wrapping and makes thumbnails expand equally. Mobile rules below remain.
*/
@media (min-width: 900px) {
  .event-tab-row {
    flex-wrap: nowrap;
  }

  .event-tab-thumb {
    flex: 1 1 0;
    max-width: none;
  }

  .event-tab-thumb img {
    width: 100%;
    height: auto;
    max-width: 85vw; /* keep viewport cap */
    object-fit: cover;
    display: block;
  }
}

@media (max-width: 768px) {
  .event-tab-row {
    gap: 15px;
  }
  
  .event-tab-thumb img {
    width: 138px; /* increased 15% from 120px */
    height: 138px;
  }
  
  .event-content-box {
    padding: 1.5rem;
  }

  .event-content-box h3 {
    font-size: var(--fs-lg);
  }
  
  .book-now-btn {
    display: block;
    text-align: center;
    margin: 20px auto 0;
    max-width: 200px;
  }

  .package-detail-content h3 {
    font-size: var(--fs-lg);
  }
}

/* === EVENTS PAGE FONT NORMALIZATION === */
.event-content-box p,
.event-content-box span,
.event-content-box li,
.event-content-box .package-text {
  font-size: var(--fs-base) !important;
    line-height: 1.5 !important;
}

/* === Events Page Layout Constraints === */
.package-detail-content .package-grid,
.event-content-box,
#eventTabPanel {
    max-width: 860px !important;
}

/* === Events Page Isolation Fix === */
/* Reset display to block to override global flexbox from style.css */

/* Override html, body flexbox (style.css line 43) */
body.events-page {
    display: block !important;
    height: auto !important;
    overflow-y: auto !important;
}

/* Reset paragraph styles (style.css line 99: p { max-width: 60%; text-align: center; }) */

body.events-page .footer-copyright {
  max-width: 100% !important;
  text-align: center !important;
  margin: 0.5em 0 0.5em 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
body.events-page p {
  max-width: none !important;
  text-align: left !important;
  margin: 0.6em 0 1.2em !important;
}

/* Ensure main container behaves like a block (style.css line 48: main { flex: 1; display: flex; }) */
body.events-page main {
    display: block !important;
    flex: none !important;
}