/* cdevents player — layout and dialogs. Loaded by testplayer.html (Phase A) and later by
   player.html. Vendored Video.js 8 + forest theme are loaded before this file. */

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

/* One layout rule for every orientation and for the iframe embed: a 16:9 box that fits the
   viewport, centred both ways. Controls sit directly under the picture and dialogs stay
   inside the box. dvh tracks the visible height on phones; vh is the fallback. */
.player-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.player-box {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
}
@supports (height: 100dvh) {
  .player-box {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
  }
}

/* vjs-fill makes the player 100% of the box; the media and poster scale down to fit. */
.player-box .video-js {
  width: 100%;
  height: 100%;
  background: #000;
}
.video-js .vjs-tech {
  object-fit: contain;
  background: #000;
}
.video-js .vjs-poster,
.video-js .vjs-poster img {
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  object-fit: contain;
}

/* The forest theme draws the control bar with no background; add a scrim so the white icons
   stay legible over bright pictures, and drop the theme's bottom margin so the bar meets the
   edge of the box. */
.vjs-theme-forest .vjs-control-bar {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) !important;
  margin-bottom: 0;
  padding-bottom: 0.4em;
  height: 3.6em;
  font-size: clamp(11px, 2.6vw, 14px);
}
/* Touch targets: at least 44px tall on phones. */
@media (pointer: coarse) {
  .vjs-theme-forest .vjs-control-bar { height: 4em; }
}

/* Dialogs (password prompt, playback interrupted / error). Sized to content and to the box;
   never larger than the player, so nothing is clipped on phones. */
.protected-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 15px;
  z-index: 103;
  box-sizing: border-box;
}
.protected-content h3 {
  margin: 6px 0 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
}
.protected-content p {
  margin: 6px 0;
  font-size: 15px;
}
.password-prompt {
  display: inline-block;
  width: min(430px, 92%);
  max-height: 100%;
  overflow: auto;
  padding: 8px 12px;
  box-sizing: border-box;
  color: #666;
  background-color: rgba(242, 241, 240, 0.94);
  border-radius: 8px;
}
.password-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.6em 0.8em;
  margin: 0 0 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px #ddd;
  font-size: 16px; /* 16px stops iOS zooming into the field */
  line-height: normal;
}
.password-button {
  display: inline-block;
  border: 0;
  border-radius: 9px;
  padding: 8px 16px;
  margin: 6px 10px;
  font-family: inherit;
  font-size: 17px;
  color: #fff;
  background: #152d3d;
  text-decoration: none;
  cursor: pointer;
}
.password-button:hover { background: #73818a; }
.password-error { color: #b42318; font-size: 14px; margin: 4px 0 0; }

/* Phase B additions: non-blocking banner, waiting spinner, AirPlay / Cast buttons. */
.player-banner {
  position: absolute;
  top: 0.6em;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  z-index: 102;
  pointer-events: none;
  white-space: nowrap;
}
.player-spinner {
  width: 28px;
  height: 28px;
  margin: 4px auto 2px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: #152d3d;
  border-radius: 50%;
  animation: player-spin 0.9s linear infinite;
}
@keyframes player-spin { to { transform: rotate(360deg); } }
.player-message small.muted { color: #888; font-size: 12px; }
.protected-content button.password-button { margin-top: 4px; }

.vjs-airplay-button .vjs-icon-placeholder:before,
.vjs-cast-button .vjs-icon-placeholder:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4em;
}
.vjs-airplay-button .vjs-icon-placeholder:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M6 22h12l-6-6z'/><path d='M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/></svg>");
}
.vjs-cast-button .vjs-icon-placeholder:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm0-4v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/></svg>");
}
.vjs-cast-button.vjs-cast-connected .vjs-icon-placeholder:before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236fb04e'><path d='M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/></svg>");
}

/* The forest theme's big play button is a white outline; give it a translucent dark fill so it
   stays visible on light posters. */
.vjs-theme-forest .vjs-big-play-button {
  background-color: rgba(0, 0, 0, 0.45) !important;
  border-radius: 50%;
}