/* RDP Cloud Video Player — custom chrome, dark/light themes */

.rdp-video-container {
  --rdp-bg:        #121216;
  --rdp-fg:        #f2f2f5;
  --rdp-dim:       #9a9aa5;
  --rdp-accent:    #4f8cff;
  --rdp-track:     #2c2c34;
  --rdp-btn-hover: #26262e;

  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rdp-bg);
  color: var(--rdp-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.rdp-theme-light {
  --rdp-bg:        #f7f7f9;
  --rdp-fg:        #17171c;
  --rdp-dim:       #5c5c66;
  --rdp-accent:    #2f6fe4;
  --rdp-track:     #d8d8e0;
  --rdp-btn-hover: #e6e6ec;
}

/* ── Video stage ─────────────────────────────────────────────────────── */

.rdp-video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.rdp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  visibility: hidden; /* standby element stays hidden while preloading */
}

.rdp-video.rdp-active { visibility: visible; }

/* "Tap for sound" overlay while muted autoplay runs */
.rdp-sound-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 12px;
  pointer-events: none; /* the container's own gesture listener does the work */
}

.rdp-muted .rdp-sound-hint { display: flex; }
.rdp-video-container:not(.rdp-muted) .rdp-sound-hint { display: none; }

/* Terminal error state — hidden by the [hidden] attribute until triggered;
   base rule must stay display:none or its background would permanently dim
   the video (author display:flex beats the UA's [hidden] rule). */
.rdp-offline {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  color: #ff9c9c;
  font-size: 15px;
}

.rdp-offline:not([hidden]) { display: flex; }

/* ── Info bar ────────────────────────────────────────────────────────── */

.rdp-info-bar {
  padding: 10px 14px 4px;
  min-width: 0;
}

.rdp-channel-name {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rdp-dim);
}

.rdp-track-title {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress ────────────────────────────────────────────────────────── */

.rdp-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}

.rdp-time {
  font-size: 12px;
  color: var(--rdp-dim);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
}
.rdp-time-duration { text-align: right; }

.rdp-progress-wrap {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--rdp-track);
  cursor: pointer;
  overflow: hidden;
  touch-action: none; /* captured pointer seeks, not page scroll */
}

.rdp-progress-wrap:focus-visible {
  outline: 2px solid var(--rdp-accent);
  outline-offset: 2px;
}

.rdp-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--rdp-accent);
}

/* ── Controls ────────────────────────────────────────────────────────── */

.rdp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 12px;
}

.rdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rdp-fg);
  cursor: pointer;
}

.rdp-btn:hover:not(:disabled)  { background: var(--rdp-btn-hover); }
.rdp-btn:disabled              { opacity: 0.35; cursor: default; }

.rdp-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* play/pause icon swap driven by .rdp-playing on the container */
.rdp-icon-pause,
.rdp-playing .rdp-icon-play { display: none; }
.rdp-playing .rdp-icon-pause { display: inline; }

/* mute/volume icon swap driven by .rdp-muted on the container */
.rdp-icon-muted,
.rdp-muted .rdp-icon-vol { display: none; }
.rdp-muted .rdp-icon-muted { display: inline; }

.rdp-volume-wrap {
  display: flex;
  align-items: center;
  flex: 0 1 110px;
}

.rdp-volume {
  width: 100%;
  accent-color: var(--rdp-accent);
  cursor: pointer;
}

.rdp-btn-full { margin-left: auto; }

/* ── Status line ─────────────────────────────────────────────────────── */

.rdp-status {
  min-height: 18px;
  padding: 0 14px 10px;
  font-size: 12px;
  color: var(--rdp-dim);
}

.rdp-error .rdp-track-title { color: #ff9c9c; }

@media (max-width: 480px) {
  .rdp-volume-wrap { display: none; } /* phones have hardware volume */
  .rdp-video-container { border-radius: 0; max-width: none; }
}

/* ── Embedded in a host page (?embed=1) ──────────────────────────────────
   Loaded inside an <iframe>: the player fills the iframe and takes no page
   chrome of its own — the host controls size and background. */

body.rdp-embed {
  margin: 0;
  background: transparent;
  overflow: hidden;
}

body.rdp-embed .rdp-video-container {
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}