.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-loading-spinner {
  display: none !important;
}
.video-js-player-container {
  background: black !important;
}
/* .video-js-player-container{
  animation: fadeInOut 1s ease-in-out;
} */

.videojs-player-class {
  background: black !important;
}
.video-buffer-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  zoom: 1.5;
  font-size: 20px;
  color: var(--gold);
  z-index: 1250;
}
.video-buffer-loader > * + * {
  margin-top: 16px; /* era gap: 16px (Chromium 84); qui webOS 5 */
}
.video-buffer-loader.hidden {
  display: none;
}
.video-buffer-loader .spinner {
  width: 50px;
  height: 50px;
  border-top: 2px solid var(--gold, #f5c518);
  border-right: 2px solid var(--gold, #f5c518);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------------- */
/* Live Badge                       */
/* -------------------------------- */
.video-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: red;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 12;
}
.video-live-badge.hidden {
  display: none;
}

.custom-video-controls {
  position: absolute;
  /* Una striscia SUA, fuori dal velo dell'OSD (che finisce sopra di lei,
     vedi .osd-vod .osd-basso), con sfondo proprio: chiara e leggibile. */
  z-index: 1300;
  background: rgba(0, 0, 0, 0.82);
  padding: 10px 40px 12px 40px;
  box-sizing: border-box;
  height: 110px; /* il velo dell'OSD (.osd-vod .osd-basso) poggia qui: stesso numero */
  justify-content: center;
  bottom: 0;
  width: 100%;
  left: 50%;
  zoom: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 20; /* Ensure controls are above video but below overlays */
}
.custom-video-controls > * + * {
  margin-top: 12px; /* era gap: 12px (Chromium 84); qui webOS 5 */
}

.video-action-overlay {
  z-index: 25; /* Ensure overlays are above controls */
}

.video-buffer-loader {
  z-index: 1250; /* sopra l'OSD (1200): la rotella non finisce sotto il Play/Stop */
}
.custom-video-controls.hidden {
  display: none !important;
}
#aspectRatioButton i {
  margin-right: 5px;
}

#aspectRatioButton {
  padding: 2px;
  border: 2px solid white;
  color: white;
  font-size: 14px;
  display: flex;
  background: black;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.aspectRationButtonFocused {
  padding: 2px;
  border: 2px solid white;
  color: white;
  font-size: 16px;
  display: flex;
  background: black;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#aspectRatioButton:hover {
  padding: 2px;
  border: 2px solid transparent;
  color: white;
  font-size: 16px;
  display: flex;
  background: var(--gold);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* -------------------------------- */
/* Seek Bar                         */
/* -------------------------------- */
.custom-video-controls input[type="range"] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--gold) 0%,
    var(--gold) 0%,
    #888 0%,
    #888 100%
  );
  outline: none;
  transition: background 0.2s linear;
}
.custom-video-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.custom-video-controls input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

/* Seek bar focus styles */
.custom-video-controls input[type="range"].focused::-webkit-slider-thumb {
  border: 2px solid white !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important;
}

.custom-video-controls input[type="range"].focused::-moz-range-thumb {
  border: 2px solid white !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5) !important;
}

.custom-video-controls input[type="range"].focused {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3) !important;
}

/* -------------------------------- */
/* Video Background                 */
/* -------------------------------- */
/* Adatta, il modo di partenza: TUTTO il video nel riquadro, con le barre (contain). Fino all'11 ottobre 2026 qui c'era fill !important:
   con la specificita' di ".video-js video" vinceva sulle classi dei modi, e Adatta stirava, Riempi e Zoom erano uguali, 4:3 e 21:9
   ingrandivano l'immagine stirata (misurato in Chrome e Safari, banco W175-W178: su iPad un canale 16:9 a schermo intero usciva
   schiacciato a 4:3). */
.video-js video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Le Proporzioni (giro 2, 11 ottobre 2026; utils/aspectRatioUtils.js): Adatta = nessuna classe (contain); Riempi copre senza stirare,
   tagliando i bordi (cover); Allunga stira (fill); 4:3 e 16:9 stirano il video a quel rapporto e lo mettono intero nel riquadro, con le
   barre: fill e le due scale calcolate dal rapporto del riquadro (--prop-x, --prop-y, mai sopra 1: niente esce dal riquadro, anche sui
   TV dove il contenitore non taglia). Con ".video-js video" davanti: la stessa specificita' della regola di Adatta, e vengono dopo. */
.video-js video.video-aspect-riempi {
  object-fit: cover !important;
}
.video-js video.video-aspect-allunga {
  object-fit: fill !important;
}
.video-js video.video-aspect-43,
.video-js video.video-aspect-169 {
  object-fit: fill !important;
  transform: scale(var(--prop-x, 1), var(--prop-y, 1));
  transform-origin: 50% 50%;
}
/* Il telefono in verticale (html.web-verticale, config/piattaforma.js): la pagina com'e' ("Da decidere 23"), Adatta qualunque sia la
   scelta del dispositivo, che resta per l'orizzontale; il pulsante Proporzioni sparisce (web.css). */
html.web-verticale .video-js video {
  object-fit: contain !important;
  transform: none !important;
}

.video-js .vjs-tech {
  background: rgb(0, 0, 0) !important;
  height: calc(100 * var(--vh, 1vh)) !important;
}

/* -------------------------------- */
/* Hide YT Controls (for embeds)    */
/* -------------------------------- */
.ytp-chrome-top {
  display: none !important;
}

/* -------------------------------- */
/* Error Dialog                     */
/* -------------------------------- */
.video-error-dialog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  zoom: 2;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
}
.video-error-dialog.hidden {
  display: none;
}
.video-error-dialog .error-box {
  background: #222;
  padding: 24px 32px;
  border-radius: 10px;
  border: 2px solid var(--gold);

  text-align: center;
  color: white;
  font-size: 18px;
}
.video-error-dialog .error-box p {
  margin-bottom: 16px;
}
.video-error-dialog button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  background: var(--gold);
  color: black;
  cursor: pointer;
}
.video-error-dialog button:hover {
  background: white;
  color: black;
}

/* -------------------------------- */
/* Action Overlays (Play/Pause/Seek)*/
/* -------------------------------- */
.video-action-overlay {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}

/* 🔴 ADD: Ensure pause overlay doesn't get hidden by loading state */
.video-buffer-loader ~ .video-action-overlay.center {
  z-index: 1250; /* Lower than loader but still above video */
}

.video-action-overlay.hidden {
  display: none;
}
.video-action-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* perfect circle */
  display: flex;
  zoom: 1.4;

  justify-content: center;
  align-items: center;
  background: rgba(10, 10, 10, 0.6);
  color: var(--gold);
  font-size: 50px;
}
.video-action-icon i {
  margin: 0;
  padding: 0; /* remove extra padding */
}

/* Overlay Positions */
.video-action-overlay.center {
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-action-overlay.left {
  left: 30%;
  transform: translate(-50%, -50%);
}
.video-action-overlay.right {
  left: 70%;
  transform: translate(-50%, -50%);
}

.vjs-error-display {
  display: none !important;
}

/* -------------------------------- */
/* Video Title Bar                  */
/* -------------------------------- */
.video-title-bar {
  position: absolute;
  top: 10px;
  left: 15px;
  zoom: 2.5;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: calc(100% - 30px);
}
.video-title-text {
  font-size: 16px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

#errorBackBtn {
  zoom: 0.8;
  color: white !important;
}

/* Focus styles for video player */
/* Il pulsante e' rotondo (border-radius: 50% sull'elemento): l'anello
   lo legge da li'. Dal TV: un fuoco quadrato attorno a un tasto rotondo,
   perche' questa regola dichiarava un raggio suo, 8px. */
.video-action-overlay.center.focused {
  box-shadow: inset 0 0 0 2px white, 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

#customSeek.focused {
  box-shadow: 0 0 0 2px white !important;
}

.custom-video-controls.hidden {
  display: none !important;
}

/* 🔴 NEW: Seek bar container with time displays */
.seek-bar-container {
  display: flex;
  align-items: center;
  width: 100%;
}
/* 🔴 NEW: Seek bar container with time displays */ .seek-bar-container > * + * {
  margin-left: 12px; /* era gap: 12px (Chromium 84); qui webOS 5 */
}

/* Lettera N: la pista della barra, e la targhetta dello scarto ("+2:30")
   SOPRA IL CURSORE, che si muove con lui. Fuori dal flusso: niente si
   sposta tranne cursore e targhetta. --pos e' la frazione della barra,
   scritta da Salto.js. Vuota quando non si sta saltando. */
.seek-pista {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.seek-pista input[type="range"] {
  width: 100%;
}
.salto-delta {
  position: absolute;
  bottom: 100%;
  left: calc(var(--pos, 0) * 100%);
  transform: translateX(-50%);
  margin-bottom: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--gold);
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.salto-delta:empty {
  display: none;
}

/* 🔴 NEW: Time display styles */
.time-display {
  color: white;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  min-width: 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
}

/* -------------------------------- */
/* Seek Bar                         */
/* -------------------------------- */
.custom-video-controls input[type="range"] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--gold) 0%,
    var(--gold) 0%,
    #888 0%,
    #888 100%
  );
  outline: none;
  transition: background 0.2s linear;
}

.custom-video-controls input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid white;
}

.custom-video-controls input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid white;
}

/* Seek bar focus styles */
.custom-video-controls input[type="range"].focused {
  box-shadow: 0 0 0 2px var(--gold) !important;
}

.custom-video-controls input[type="range"].focused::-webkit-slider-thumb {
  border: 2px solid white !important;
  box-shadow: 0 0 0 2px var(--gold) !important;
  transform: scale(1.2);
}

.custom-video-controls input[type="range"].focused::-moz-range-thumb {
  border: 2px solid white !important;
  box-shadow: 0 0 0 2px var(--gold) !important;
  transform: scale(1.2);
}

.aspect-ratio-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  zoom: 2.5;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 9999;
}

.aspect-ratio-overlay.show {
  opacity: 1;
}

.aspect-ratio-button.focused {
  box-shadow: inset 0 0 0 2px var(--gold);
  background: var(--gold) !important;
}

/* Messaggio del riaggancio: "riconnessione in corso" mentre si ritenta,
   "canale non disponibile" dopo il ventesimo tentativo. Sta sopra al
   video, in basso, dove non copre l'immagine se torna. */
.live-riaggancio {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  /* Sopra OGNI strato del player: loader (30), sovrapposizioni (40, 41)
     e il pannello a 9999. Stava a 26 e finiva sotto il velo del
     caricamento - lo stesso difetto di impilamento del "PIN errato",
     che stava sotto il velo del dialogo. Resta sotto ai messaggi del
     toaster, che per definizione sono l'ultimo strato. */
  z-index: 200000;
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.78);
  border: 2px solid var(--gold, #e7a101);
  color: #fff;
  font-size: 22px;
  white-space: nowrap;
  pointer-events: none;
}
.live-riaggancio.hidden {
  display: none;
}

/* "Connessione assente, riprovo…" nel player dei film e degli episodi (Samsung #7, 13 ottobre 2026; staging 15 ottobre): come il
   messaggio del riaggancio della diretta, al centro in basso sopra ogni strato del player. */
.video-rete {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 200000;
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.78);
  border: 2px solid var(--gold, #e7a101);
  color: #fff;
  font-size: 22px;
  white-space: nowrap;
  pointer-events: none;
}
.video-rete.hidden {
  display: none;
}

/* Lettera O: "Prossimo episodio tra N s", con Annulla a fuoco. Sopra ogni
   strato del player, sotto il toaster. */
.prossimo-episodio {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* era inset: 0 (Chromium 87); qui webOS 5 */
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 60px;
  pointer-events: none;
}
.prossimo-scatola {
  pointer-events: auto;
  background: rgba(10, 14, 20, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 26px 34px;
  text-align: center;
}
.prossimo-testo {
  margin: 0 0 18px;
  font-size: 30px;
  color: white;
}
.prossimo-scatola button {
  font-size: 26px;
  padding: 10px 30px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  outline: 4px solid transparent;
  outline-offset: -2px;
}
.prossimo-scatola button.prossimo-fuoco {
  outline-color: var(--gold);
}