/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Two-handle range slider (the seats filter). Two <input type=range> are
   stacked over one track; only their thumbs take pointer events so either
   handle is grabbable, and the coloured fill shows the selected span. */
.range-slider__input {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  margin: 0;
  transform: translateY(-50%);
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.range-slider__input::-moz-range-thumb {
  pointer-events: auto;
  height: 1rem;
  width: 1rem;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}
.range-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid #2563eb; outline-offset: 2px; }
.range-slider__input:focus-visible::-moz-range-thumb { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Footer content pages (about, contact, terms, privacy) — light prose styling
   so the templates stay plain HTML without per-element utility classes. */
.prose-page h2 { margin-top: 2rem; font-size: 1rem; font-weight: 600; color: #111827; }
.prose-page a { color: #2563eb; }
.prose-page a:hover { text-decoration: underline; }
.prose-page ul { list-style: disc; padding-left: 1.25rem; }
.prose-page ul li { margin-top: 0.25rem; }
.prose-page strong { color: #374151; font-weight: 600; }

/* Lite YouTube facade: a 16:9 poster with a play button; the real iframe
   replaces it only on click (see lite_youtube_controller.js). */
.lite-youtube {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background-size: cover; background-position: center; border-radius: 0.75rem;
  overflow: hidden; cursor: pointer; border: 0; padding: 0;
}
.lite-youtube::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.45));
}
.lite-youtube__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4rem; height: 2.8rem; border-radius: 0.7rem;
  background: rgb(0 0 0 / 0.7); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.lite-youtube:hover .lite-youtube__play { background: #ef0000; }
.lite-youtube__play::after {
  content: ""; border-style: solid; border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent #fff; margin-left: 0.2rem;
}
.lite-youtube--loaded { cursor: default; }
.lite-youtube--loaded::before, .lite-youtube--loaded .lite-youtube__play { display: none; }
.lite-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }