/* PV Player styles (green + orange branding) */
:root{
  --pv-green:#27c46b;
  --pv-orange:#ff8a00;
  --pv-bg: rgba(10,10,10,.72);
  --pv-text: #eaeaea;
  --pv-muted: rgba(255,255,255,.7);
}

.pv-wrap{ width:100%; }

.pv-player{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 10px;
}

.pv-player video{
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Poster (shown when there is no video source) */
.pv-poster{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.pv-player.pv-no-video .pv-poster{ display:block; }
.pv-player.pv-no-video video{ display:none; }

/* Logo overlay */
.pv-logo{
  position:absolute;
  top:5px; left:5px;
  width:50px; height:50px;
  z-index: 5;
  display:none;
  opacity: 0;
  transition: opacity .18s ease;
  background: url("../images/player-logo.png") center/contain no-repeat;
  pointer-events:none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.pv-logo.is-on{ display:block; }

/* Logo should hide/show with the same logic as controls */
/* show only when JS says so (or when user tabs into controls) */
.pv-player.pv-controls-on .pv-logo.is-on{ opacity: 1; }
.pv-player:focus-within .pv-logo.is-on{ opacity: 1; }

/* Spinner */
.pv-spinner{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:4;
}
.pv-spinner.is-on{ display:flex; }
.pv-spinner:before{
  content:"";
  width:42px; height:42px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color: var(--pv-green);
  animation: pvspin 1s linear infinite;
}
@keyframes pvspin { to{ transform:rotate(360deg); } }

/* Controls overlay */
.pv-controls{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  z-index:6;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  user-select:none;
}

.pv-player.pv-controls-on .pv-controls{
  opacity:1;
  transform: translateY(0);
}

/* allow keyboard users to reveal controls */
.pv-player:focus-within .pv-controls{
  opacity:1;
  transform: translateY(0);
}

.pv-controls .pv-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.pv-btn{
  appearance:none;
  border:0;
  background: rgba(0,0,0,.55);
  color: var(--pv-text);
  border-radius: 10px;
  padding:8px 10px;
  line-height:1;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
}
.pv-btn:hover{ background: rgba(0,0,0,.72); }
.pv-btn:active{ transform: scale(.98); }
.pv-btn.pv-primary{
  background: linear-gradient(90deg, var(--pv-green), var(--pv-orange));
  color: #101010;
  font-weight: 700;
}
.pv-btn.is-on{ outline: 2px solid rgba(255,138,0,.55); outline-offset: 2px; }

.pv-time{
  color: var(--pv-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* Range styles */
.pv-range{
  width:100%;
  accent-color: var(--pv-green);
}

.pv-seek{
  flex:1;
}

.pv-vol{
  width: 110px;
}

/* Playlist/quality block under video */
.pv-meta{
  margin-top: 10px;
  background: rgba(0,0,0,.25);
  border-radius: 10px;
  padding: 10px;
}

.pv-quality{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.pv-quality.is-hidden{ display:none; }
.pv-quality label{
  color: var(--pv-muted);
  font-size: 13px;
}
.pv-quality select{
  background: rgba(0,0,0,.55);
  color: var(--pv-text);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
}

#pv-playlist.is-hidden{ display:none; }
.pv-pl-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pv-pl-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  cursor:pointer;
  transition: background .15s ease;
}
.pv-pl-item:hover{ background: rgba(0,0,0,.48); }
.pv-pl-item.is-active{
  background: linear-gradient(90deg, rgba(39,196,107,.35), rgba(255,138,0,.28));
  outline: 1px solid rgba(255,255,255,.10);
}
.pv-pl-title{
  color: var(--pv-text);
}

/* Dim mode */
.pv-dim-overlay{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.70);
  z-index: 9990;
}
.pv-wrap.pv-dim-on{ position:relative; z-index:9990; }
.pv-wrap.pv-dim-on .pv-dim-overlay{ display:block; }
.pv-wrap.pv-dim-on .pv-player{
  position: relative;
  z-index: 9991;
  box-shadow: 0 10px 60px rgba(0,0,0,.65);
}

/* Make fullscreen look nice */
.pv-player:fullscreen{
  border-radius: 0;
}
.pv-player:-webkit-full-screen{
  border-radius: 0;
}


/* ===== Enhancements: logo hides with controls + cursor auto-hide ===== */
.pv-logo{ transition: opacity .25s ease; }
.pv-player:not(.pv-controls-on) .pv-logo{ opacity: 0; }
.pv-player.pv-controls-on .pv-logo{ opacity: 1; }
/* Hide cursor when UI hidden and video is playing */
.pv-player.pv-ui-hidden{ cursor: none; }
/* ===== PV UI visibility hard override ===== */

/* по умолчанию контролы скрыты */
#pv-player .pv-controls{
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
  transition: opacity .25s ease, transform .25s ease !important;
}

/* показываем контролы ТОЛЬКО когда JS повесил класс */
#pv-player.pv-controls-on .pv-controls,
#pv-player:focus-within .pv-controls{
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* курсор прячем только когда UI скрыт */
#pv-player.pv-ui-hidden{
  cursor: none !important;
}

/* логотип живёт по тем же правилам, что и контролы */
#pv-player .pv-logo{
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  pointer-events: none !important;
}

#pv-player.pv-controls-on .pv-logo.is-on,
#pv-player:focus-within .pv-logo.is-on{
  opacity: 1 !important;
}