/* utils/plyr/assets/plyr.css */
.logo-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; opacity: 1; transition: opacity 0.3s ease-in-out; z-index: 2; padding-top: 5vh; }
.logo-overlay.hidden { opacity: 0; }
.logo-container {display: flex; flex-direction: column; align-items: center; text-align: center;}
.logo-overlay img { max-width: 20%; max-height: 20%; object-fit: contain; filter: drop-shadow(2px 2px 12px black);}
.episode-info {color: white;font-size: 22px;margin-top: 15px;font-weight: 500;text-shadow: 1px 1px 3px rgba(0,0,0,0.7);}
/* .plyr { height: 100vh; width: 100%; --plyr-color-main: #0098d6; } */
.plyr audio, .plyr iframe, .plyr video {
    display: block;
    height: 100vh;
    width: 100%;}
.plyr button { font: -webkit-control; }
.plyr__controls { position: relative; padding-top: 25px; }
.plyr__progress { order: -1; position: absolute; top: 8%; left: 1%; width: calc(97% - 50px); padding: 0; border-radius: 4px; z-index: 1; filter: drop-shadow(0 -1px 5px black); }
.plyr--fullscreen .plyr__progress { left: 1%; width: calc(98% - 70px); top: 0; }
.plyr__progress input[type=range], .plyr__progress__buffer { margin-left: -1px; width: 100%;}
.plyr__controls .plyr__time--current { position: absolute; right: 1%; top: 5px; z-index: 2; }
.plyr__menu { z-index: 5 !important; }
.plyr__menu__container { background: var(--plyr-menu-background, rgba(20, 20, 20, 0.95)); color: #e0e0e0; border: 1px solid #444; border-radius: 10px; right: -35px; margin-bottom: 22%;}
.plyr__menu__container:after{display: none;}
.plyr__menu__container .plyr__control{color: #e0e0e0; font-size: 15px;}
.plyr--video .plyr__controls { background: linear-gradient(#00000000, #000000);}
.plyr__poster { background-color: rgba(0, 0, 0, 0.5) !important;  background-blend-mode: darken; transition: opacity 0.3s ease; opacity: 1;} 
.plyr--playing .plyr__poster { opacity: 0 !important; visibility: hidden !important;}
.episodes-button { display: flex; align-items: center; gap: 8px; }
.episodes-button svg { width: 24px; height: 24px; fill: white; }
.episodes-modal { position: fixed; z-index: 1000; width: 220px; max-height: 50vh; background-color: rgba(20, 20, 20, 0.95); border: 1px solid #444; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 5px 25px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.episodes-modal.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(10px, -20px); }
.episodes-modal-header { padding: 10px 15px; font-size: 18px; font-weight: bold; color: white; border-bottom: 1px solid #444; display: flex; justify-content: space-between; align-items: center; }
.modal-header-nav-button { background: none; border: 1px solid #555; border-radius: 5px; color: #e0e0e0; cursor: pointer; padding: 4px 8px; font-size: 14px; font-weight: normal; }
.modal-header-nav-button:hover { background-color: #333; }
@media only screen and (max-width : 576px) { 
.episodes-modal{ width: 220px; right: 10px;}
.episodes-modal.visible { transform: translate(5px, -10px); }
.plyr__controls .plyr__time--current{ top: 2px;} 
.plyr__progress input[type=range]{ width: calc(100% - 5px); }
.plyr__menu__container{ right: -30px; margin-bottom: 15%;}}            
.modal-list { list-style: none; padding: 10px; margin: 0; overflow-y: auto; flex-grow: 1; }
.modal-list::-webkit-scrollbar { width: 6px; }
.modal-list::-webkit-scrollbar-track { background: #333; }
.modal-list::-webkit-scrollbar-thumb { background: #666; border-radius: 3px; }
.modal-list li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: #e0e0e0; text-decoration: none; border-radius: 5px; transition: background-color 0.2s, color 0.2s; }
.modal-list li a.active { background-color: #0098d6; color: white; font-weight: bold; cursor: default; }
.modal-list li a:hover:not(.active) { background-color: #0098d6; }
.modal-list-item-episodes-count { font-size: 14px; color: #aaa; }
.modal-list a.active .modal-list-item-episodes-count { color: #e0e0e0; }
.seek-overlay {
  position: absolute;
  top: 50%;
  font-size: 3rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
  opacity: 0;
  transform: translateY(-50%) scale(0.8);
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.seek-overlay.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.seek-left {
  left: 20%;
}

.seek-right {
  right: 20%;
}

@media (orientation: portrait) { .logo-overlay { padding-top: 15vh; } .logo-overlay img { max-width: 65%; max-height: 25%; } }
@media screen and (max-width: 950px) and (orientation: landscape) { .episode-info { font-size: 18px; margin-top: 0px;} }