/* Personalizzazione avanzata Plyr */
:root {
  /* Colori principali */
  --plyr-color-main:#a87ab6;; /* Viola principale del tuo tema */
  --plyr-video-background: #1a1a2e; /* Sfondo scuro */
  
  /* Controlli video */
  --plyr-video-controls-background: linear-gradient(transparent, rgba(0,0,0,0.75));
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-control-background-hover: var(--plyr-color-main);
  
  /* Barra di progresso */
  --plyr-range-track-height: 6px;
  --plyr-range-thumb-height: 14px;
  --plyr-range-thumb-background: #ffffff;
  --plyr-range-fill-background: var(--plyr-color-main);
  
  /* Menu e tooltip */
  --plyr-menu-background: rgba(31, 40, 71, 0.95); /* Sfondo menu */
  --menu-color: #f0f0f0;
  --plyr-tooltip-background: rgba(31, 40, 71, 0.9);
  --plyr-tooltip-color: #ffffff;
  
  /* Testi e font */
  --plyr-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --plyr-font-size-base: 15px;
  --plyr-font-size-time: 14px;
  
  /* Bordi */
  --plyr-control-radius: 8px;
  --plyr-menu-radius: 8px;
  
  /* Personalizzazioni aggiuntive */
  --plyr-control-icon-size: 22px;
  --plyr-control-spacing: 12px;
}

/* Stili aggiuntivi per il tema scuro */
.plyr--video {
  --plyr-captions-background: rgba(0,0,0,0.7);
  --plyr-badge-background: var(--plyr-color-main);
}

/* Pulsante play grande */
.plyr__control--overlaid {
  background: rgba(168, 122, 182, 0.8);
  backdrop-filter: blur(5px);
}

/* Hover sui controlli */
.plyr__control:hover {
  background: var(--plyr-color-main) !important;
}

/* Barra di progresso caricamento */
.plyr--loading .plyr__progress__buffer {
  background-image: linear-gradient(
    -45deg,
    rgba(168, 122, 182, 0.6) 25%,
    transparent 25%,
    transparent 50%,
    rgba(168, 122, 182, 0.6) 50%,
    rgba(168, 122, 182, 0.6) 75%,
    transparent 75%,
    transparent
  );
}

/* Adattamento per mobile */
@media (max-width: 768px) {
  :root {
    --plyr-control-icon-size: 18px;
    --plyr-font-size-base: 13px;
  }
}

/* Angoli arrotondati per il container principale */
.plyr {
  border-radius: 12px !important; /* Puoi regolare questo valore */
  overflow: hidden;
}

/* Angoli arrotondati per il poster */
.plyr__poster {
  border-radius: 12px !important;
}

/* Angoli arrotondati per i controlli */
.plyr__controls {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Angoli arrotondati per il menu a tendina */
.plyr__menu__container {
  border-radius: 8px !important;
}

/* Angoli arrotondati per i tooltip */
.plyr__tooltip {
  border-radius: 6px !important;
}

/* Angoli arrotondati per il pulsante play grande */
.plyr__control--overlaid {
  border-radius: 50% !important;
}

.plyr-menu-border-color{
    color: aqua;
}
.plyr-color-main {
    color: #54bfc1;
}

.plyr-video-control-color	{
    color: aqua;
}

/* Aggiungi questo al tuo CSS */
.plyr-download-btn {
    transition: all 0.3s ease;
    opacity: 0.8;
}

.plyr-download-btn:hover {
    opacity: 1;
    background: var(--plyr-color-main) !important;
    transform: scale(1.1);
}

/* Nascondi il pulsante quando i controlli sono nascosti */
.plyr--hide-controls .plyr-download-btn {
    opacity: 0;
    pointer-events: none;
}

.custom-controls {
    padding: 10px;
    background: #222;
    text-align: center;
    margin-top: 5px;
    border-radius: 4px;
}

.custom-download-btn {
    padding: 8px 15px;
    background: #00a8ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#playerToggleBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    padding: 8px 15px;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.html5-video-player {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #000;
}