/* Apply box-sizing globally for consistent layout calculations */
html,
body,
* {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: white;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  /* Prevent scrolling on the overlay page */
  height: 100vh;
  /* Ensure the body takes full height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Align content to the top */
}

/* Override the body.wait-times-active rule from styles.css
   as this page is only about the wait times bar, so it should
   always be at the bottom without affecting a main container height. */
body.wait-times-active .container {
  height: 100vh;
  /* Restore original height if this class is accidentally applied */
}

/* Styles for Scrolling Wait Times Display */
.scrolling-wait-times {
  position: fixed;
  /* Keep it fixed */
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  /* Default transparency, will be overridden by JavaScript */
  color: #fff;
  display: flex !important;
  /* Force display for this specific page */
  align-items: center;
  /* Vertically align content in the middle */
  overflow: hidden;
  /* Hide content outside the container */
  white-space: nowrap;
  /* Keep content on a single line */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
  /* Subtle shadow at the top */
  z-index: 102;
  /* Ensure it's on top */
  transition: opacity 0.5s ease;
}

.wait-times-content {
  display: inline-block;
  /* Essential for marquee effect */
  animation: marquee 200s linear infinite;
  /* Fallback duration, will be adjusted by JS */
  transition: opacity 0.3s ease-in-out;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.vertical-scrolling-rides,
.paging-rides,
.paging-square > div {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.wait-times-item {
  padding: 0 15px;
  /* Spacing between each ride's info */
  display: inline-block;
  /* Keeps items in a line */
}

/* These colors will be overridden if 'overrideColor' parameter is set */
.wait-times-item.low-wait, .square-ride-time.low-wait {
  color: #8bc34a;
}

/* Green */
.wait-times-item.medium-wait, .square-ride-time.medium-wait {
  color: #ffeb3b;
}

/* Yellow */
.wait-times-item.high-wait, .square-ride-time.high-wait {
  color: #f44336;
}

/* Red */
.wait-times-item.closed, .square-ride-time.closed,
.wait-times-item.down, .square-ride-time.down,
.wait-times-item.refurbishment, .square-ride-time.refurbishment {
  color: #9e9e9e;
}

/* Gray */
.wait-times-item.no-wait-info, .square-ride-time.no-wait-info,
.wait-times-item.unknown-status, .square-ride-time.unknown-status {
  color: #ff9800;
}

/* Orange for N/A or no info */


@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }

  /* Scrolls the entire content width */
}

@keyframes marquee-vertical {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -100%, 0);
  }
}

/* Pause animation on hover */
.scrolling-wait-times:hover .wait-times-content {
  animation-play-state: paused;
}

/* Trending Arrows */
.trend-arrow {
  margin-left: 5px;
  font-weight: bold;
  display: inline-block;
}

.trend-up {
  color: #f44336 !important;
  /* Red for up (increasing wait) */
}

.trend-down {
  color: #8bc34a !important;
  /* Green for down (decreasing wait) */
}

/* Layout and Position overrides */
body.pos-left .scrolling-wait-times,
body.pos-right .scrolling-wait-times {
  height: 100vh;
  flex-direction: column;
  top: 0 !important;
  bottom: 0 !important;
  white-space: normal;
  padding-top: 20px;
}

body.pos-left .scrolling-wait-times {
  left: 0;
  right: auto;
}

body.pos-right .scrolling-wait-times {
  right: 0;
  left: auto;
}

body.pos-left .wait-times-content,
body.pos-right .wait-times-content {
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
}

/* Ensure items display properly in vertical or block layouts */
[class*="-block"] .wait-times-content,
[class*="-vertical"] .wait-times-content {
  padding-left: 0;
}

[class*="-block"] .wait-times-item {
  margin-right: 20px;
}

/* Force one ride per line in vertical mode */
[class*="layout-vertical"] .wait-times-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1.4;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[class*="layout-vertical"] .wait-times-spacer,
[class*="layout-vertical"] .wait-times-logo-spacer {
  display: none !important;
}