/* Custom HLS player + Quality menu (homepage video tour) */
[data-video-player] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.mrvp-quality {
  position: absolute;
  top: 16px;
  left: 16px; /* top-left, clear of the close (x) button at top-right */
  z-index: 3;
  font-family: var(--brand-body-font, system-ui, sans-serif);
  transition: opacity 200ms ease-out;
}
.mrvp-quality[hidden] { display: none; }

/* Auto-hide, like native video controls. site.js adds .is-idle while the video
   is PLAYING and the pointer has been idle; it is removed on any interaction and
   whenever the video is paused, so the control is always reachable when stopped.
   (Under prefers-reduced-motion the global `* { transition: none }` makes this a
   snap rather than a fade.) */
.mrvp-quality.is-idle {
  opacity: 0;
  pointer-events: none;
}

.mrvp-quality__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(15, 25, 35, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 150ms ease-out;
}
.mrvp-quality__btn:hover { background: rgba(15, 25, 35, 0.9); }
.mrvp-quality__btn:focus-visible {
  outline: 2px solid var(--brand-primary, #00ACEC);
  outline-offset: 2px;
}

.mrvp-quality__menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  left: 0;
  min-width: 120px;
  background: rgba(15, 25, 35, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.mrvp-quality__menu[hidden] { display: none; }

.mrvp-quality__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  cursor: pointer;
}
.mrvp-quality__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.mrvp-quality__item[aria-checked="true"] { color: #fff; }
.mrvp-quality__item[aria-checked="true"]::after {
  content: "\2713";
  color: var(--brand-primary, #00ACEC);
  font-weight: 700;
}
.mrvp-quality__item:focus-visible {
  outline: 2px solid var(--brand-primary, #00ACEC);
  outline-offset: -2px;
}