/* карточка‑контейнер плеера */
#player-container{
  position:relative;
  /* 🔹 ВНЕШНИЕ ОТСТУПЫ  — рамка отойдёт от краёв */
  margin: 0 12px;
  outline:8px solid var(--bg-color);   /* одинаковая рамка 8 px со всех сторон */
  outline-offset:0;
  border-radius:8px;
  overflow:hidden;          /* скругление работает и для видео, и для overlay */
  padding:0;                /* ← убрали прежние 12 px */
}

/* видео полностью заполняет карточку */
#player-container .video-js{ width:100%; height:200px !important; } /* или max-height:30vh */
#player-container .vjs-tech{ object-fit:cover; }                    /* без чёрных полос */



  
  #player {
    width: 100%;
    max-width: none;
  }



/* 0) Если хотите прозрачный фон у плеера (иначе используйте цвет из темы) */
.video-js {
  background-color: transparent !important;
  border: none !important; 
   height: 24vh !important;
  
}

/* 1) Скрыть логотип Video.js, если он появляется */
.video-js .vjs-logo {
  display: none !important;
}


 
/* 1) Скрыть большую конпку при старте */
.video-js .vjs-big-play-button {
  display: none !important;
}



/* ДЛЯ ЗАТЕМНЕНИЯ overlay*/
/* Карточка плеера */
.player-card{
  position: relative;          /* ⬅ чтобы overlay спозиционировался внутри */
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;             /* overlay обрежется по скруглению */
}

/* Затемнение */
.video-overlay{
  position:absolute;
  inset:0;                     /* top:0 left:0 right:0 bottom:0 */
 background:rgba(0,0,0,0.25); /* 0.25 – средняя дымка; меняйте α

 /* Можно заменить background на градиент, чтоб низ сильнее, верх слабее:  */
  /* background: linear-gradient(
  to bottom,
  rgba(0,0,0,0.2) 0%,
  rgba(0,0,0,0.3) 100%
); */
  pointer-events:none;         /* клики проходят к видео/контролам */
  z-index:2;                   /* выше .vjs-tech, ниже контролов – см. ниже */
}

/* Контролы поверх overlay */
.video-js .vjs-control-bar{ z-index:3; }
.video-js .vjs-big-play-button{ z-index:3; }
.video-js .vjs-tech{ z-index:1; } /* как у вас раньше */



/* кнопка перемотки на 15 сек */
/* .vjs-forward15-button {
  min-width: 32px;
  background: none;
  border: none;
  color: #8ec5ff;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
  margin-right: 4px;
  transition: color 0.2s;
}
.vjs-forward15-button:hover {
  color: #fff;
}
.vjs-forward15-button span {
  pointer-events: none;
} */