/* ============================================
   BITRATE STUDIO VIDEO PLAYER & CAROUSEL
   ============================================ */

/* === ОДИНОЧНЫЙ ВИДЕО ПЛЕЕР === */
.br-video-player {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.br-video-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}

.br-video-player__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  transition: opacity .25s ease;
}

.br-video-player__poster.hidden {
  opacity: 0;
  pointer-events: none;
}

.br-video-player__loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.br-video-player__loader.active {
  opacity: 1;
}

.br-video-player__spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: br-spin .8s linear infinite;
}

@keyframes br-spin {
  to { transform: rotate(360deg); }
}

.br-video-player__play-btn {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(0,0,0,.06);
  transition: opacity .2s ease;
}

.br-video-player__play-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

.br-video-player__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(125, 125, 125, 0.18);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
  color: #fff;
}

.br-video-player__play-btn:hover .br-video-player__icon {
  transform: scale(1.06);
}

.br-video-player__icon svg,
.br-video-player__btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

.br-video-player__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.br-video-player:hover .br-video-player__controls,
.br-video-player__controls.visible {
  opacity: 1;
  pointer-events: auto;
}

.br-video-player__controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.br-video-player__btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.br-video-player__btn:hover {
  background: rgba(255,255,255,.3);
}

.br-timeline {
  flex: 1 1 auto;
  min-width: 48px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  overflow: visible;
  position: relative;
}

.br-timeline__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: #cf2435;
}

.br-video-player__time {
  flex-shrink: 0;
  min-width: 46px;
  text-align: right;
  font: 600 13px/1.2 monospace;
  color: #fff;
  white-space: nowrap;
}

/* === КАРУСЕЛЬ С ВИДЕО (COVERFLOW) === */
.br-custom-coverflow {
  --br-center-w: clamp(500px, 46vw, 760px);
  --br-side-scale: .64;
  --br-side-shift: 70%;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  padding: 18px 0 42px;
}

.br-custom-viewport {
  position: relative;
  width: 100%;
  overflow: visible;
}

.br-custom-stage {
  position: relative;
  width: var(--br-center-w);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
}

.br-custom-card.br-slide {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  filter: grayscale(100%) brightness(.58);
  transform: translate3d(0,0,0) scale(.58);
  transition: transform 720ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease, filter 420ms ease;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.br-custom-coverflow.br-no-anim .br-custom-card.br-slide {
  transition: none;
}

.br-custom-card[data-pos="-3"],
.br-custom-card[data-pos="3"] {
  opacity: 0;
  pointer-events: none;
}

.br-custom-card[data-pos="-2"] {
  transform: translate3d(calc(-1 * var(--br-side-shift) * 2),0,0) scale(var(--br-side-scale));
  opacity: 0;
  z-index: 1;
}

.br-custom-card[data-pos="-1"] {
  transform: translate3d(calc(-1 * var(--br-side-shift)),0,0) scale(var(--br-side-scale));
  opacity: .96;
  pointer-events: auto;
  z-index: 2;
}

.br-custom-card[data-pos="0"] {
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
  pointer-events: auto;
  cursor: default;
  z-index: 5;
}

.br-custom-card[data-pos="1"] {
  transform: translate3d(var(--br-side-shift),0,0) scale(var(--br-side-scale));
  opacity: .96;
  pointer-events: auto;
  z-index: 2;
}

.br-custom-card[data-pos="2"] {
  transform: translate3d(calc(var(--br-side-shift) * 2),0,0) scale(var(--br-side-scale));
  opacity: 0;
  z-index: 1;
}

.br-custom-coverflow .br-poster-el,
.br-custom-coverflow video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

.br-custom-coverflow .br-poster-el {
  z-index: 2;
  background-color: #111;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.br-custom-coverflow .br-poster-el.br-hidden {
  opacity: 0;
  pointer-events: none;
}

.br-custom-coverflow video {
  z-index: 3;
  display: block;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}

.br-custom-coverflow video:not([src]) {
  visibility: hidden;
  pointer-events: none;
}

.br-custom-coverflow .br-play-ov,
.br-custom-coverflow .br-loader-el,
.br-custom-coverflow .br-ctrl-panel {
  z-index: 6;
}

.br-custom-coverflow .br-loader-el {
  z-index: 5;
}

.br-custom-card[data-pos]:not([data-pos="0"]) .br-play-ov,
.br-custom-card[data-pos]:not([data-pos="0"]) .br-ctrl-panel {
  opacity: 0;
  pointer-events: none;
}

.br-custom-card[data-pos="0"] .br-play-ov {
  opacity: 1;
  pointer-events: auto;
}

.br-custom-card[data-pos="0"] .br-play-ov.br-hidden {
  opacity: 0;
  pointer-events: none;
}

.br-custom-coverflow .br-play-ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
}

.br-custom-coverflow .br-play-circ {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(125, 125, 125, 0.18);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
  color: #fff;
}

.br-custom-coverflow .br-play-ov:hover .br-play-circ {
  transform: scale(1.06);
}

.br-custom-coverflow .br-play-circ svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}

.br-custom-coverflow .br-ctrl-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.br-custom-card[data-pos="0"] .br-ctrl-panel {
  opacity: 1;
  pointer-events: auto;
}

.br-custom-coverflow .br-timeline {
  flex: 1 1 auto;
}

.br-custom-coverflow .br-ctrl-left,
.br-custom-coverflow .br-time {
  flex-shrink: 0;
}

.br-custom-coverflow .br-nav-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  position: relative;
  z-index: 20;
}

.br-custom-coverflow .br-nav-btn {
  width: 50px;
  height: 50px;
  background-color: #cf2435;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
  pointer-events: auto;
}

.br-custom-coverflow .br-nav-btn:hover {
  background-color: #999999;
}

.br-custom-coverflow .br-nav-btn:disabled {
  opacity: .55;
  pointer-events: none;
}

.br-custom-coverflow .br-nav-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.br-custom-coverflow .br-loader-el {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.br-custom-coverflow .br-loader-el.active {
  opacity: 1;
}

.br-custom-coverflow .br-spinner-el {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: br-spin .8s linear infinite;
}

.br-custom-coverflow .br-btn-ctrl {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.br-custom-coverflow .br-btn-ctrl:hover {
  background: rgba(255,255,255,.3);
}

.br-custom-coverflow .br-btn-ctrl svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* === АДАПТИВНОСТЬ === */
@media (max-width: 1200px) {
  .br-custom-coverflow {
    --br-center-w: clamp(440px, 48vw, 680px);
    --br-side-scale: .64;
    --br-side-shift: 70%;
  }
}

@media (max-width: 767px) {
  .br-video-player {
    aspect-ratio: 9 / 16;
    max-width: 320px;
  }
  
  .br-video-player__controls {
    gap: 8px;
    padding: 12px 10px;
  }
  
  .br-video-player__btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  
  .br-video-player__time {
    min-width: 42px;
    font-size: 12px;
  }
  
  .br-custom-coverflow {
    --br-center-w: min(76vw, 330px);
    --br-side-scale: .68;
    --br-side-shift: 72%;
    padding-top: 10px;
    padding-bottom: 36px;
  }
  
  .br-custom-stage {
    aspect-ratio: 9 / 16;
  }
  
  .br-custom-card.br-slide {
    border-radius: 12px;
  }
  
  .br-custom-coverflow .br-ctrl-panel {
    gap: 8px;
    padding: 12px 10px;
  }
  
  .br-custom-coverflow .br-play-circ {
    width: 56px;
    height: 56px;
  }
  
  .br-custom-coverflow .br-play-circ svg {
    width: 20px;
    height: 20px;
  }
}
/* === ИСПРАВЛЕНИЕ ВЫРАВНИВАНИЯ КОНТРОЛОВ В КАРУСЕЛИ === */
.br-custom-coverflow .br-ctrl-panel {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  flex-wrap: nowrap !important;
}

.br-custom-coverflow .br-ctrl-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.br-custom-coverflow .br-timeline {
  flex: 1 1 auto !important;
  min-width: 48px !important;
  height: 6px !important;
  align-self: center !important;
}

.br-custom-coverflow .br-time {
  flex-shrink: 0 !important;
  min-width: 46px !important;
  text-align: right !important;
  font: 600 13px/1.2 'Courier New', monospace !important;
  color: #fff !important;
  white-space: nowrap !important;
  align-self: center !important;
}

/* === ПРОЗРАЧНОСТЬ КНОПКИ PLAY В КАРУСЕЛИ === */
.br-custom-coverflow .br-play-circ {
  background: rgba(125, 125, 125, 0.18) !important; /* Было 0.8, стало 0.5 */
  border: 2px solid rgba(255,255,255,0.7) !important;
}

/* === ИСПРАВЛЕНИЕ ИКОНКИ ЗВУКА ПО УМОЛЧАНИЮ === */
.br-custom-coverflow .br-btn-mute svg {
  /* Иконка включенного звука по умолчанию */
}

/* === ПРИНУДИТЕЛЬНОЕ СКРЫТИЕ ПРЕЛОАДЕРА === */
.preloader_box, 
.preloader_box *,
[data-w-id*="preloader"],
.w-preloader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* На всякий случай снимаем блокировку скролла, если прелоадер её накладывал */
body, html {
  overflow: auto !important;
}
/* === УБИРАЕМ ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ === */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.br-custom-coverflow {
  max-width: 100% !important;
  overflow: visible !important;
}