/* ===== МИНИ ПЛЕЕР - ГОРИЗОНТАЛЬНАЯ ОРИЕНТАЦИЯ (ЛАНДШАФТ) ===== */
/* Применяется к телефонам в горизонтальной ориентации */

@media (max-width: 896px) and (orientation: landscape) {
  
  /* Контейнер плеера - позволяем выход элементов за границы */
  .cpplayer-container {
    position: relative;
    overflow: visible !important;
  }
  
  .cpplayer-video-wrapper {
    position: relative;
    overflow: visible !important;
    border-radius: 12px 12px 0 0 !important; /* Скругление только сверху */
  }
  
  .cpplayer-video {
    border-radius: 12px 12px 0 0 !important; /* Скругление только сверху */
    clip-path: none !important; /* Разрешаем прогресс бару выходить за пределы */
    object-fit: contain !important; /* Всегда сохраняем пропорции видео */
  }
  
  /* ===== ПРОГРЕСС БАР В САМОМ НИЗУ (YouTube Style) ===== */
  
  /* Контейнер контролов - растягиваем на всю высоту видео для правильного позиционирования кнопок */
  .cpplayer-controls {
    position: absolute;
    top: 0 !important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 !important;
    background: transparent;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 0;
    align-items: end;
    overflow: visible !important;
    pointer-events: none; /* Пропускаем клики через контейнер */
  }
  
  /* Включаем pointer-events только для интерактивных элементов */
  .cpplayer-controls > * {
    pointer-events: auto;
  }
  
  /* Центральная кнопка play - должна быть кликабельной */
  .cpplayer-center-btn {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Кнопка всегда активна на мобильных */
  .cpplayer-container.cpplayer-active .cpplayer-center-btn,
  .cpplayer-container:not(.cpplayer-active) .cpplayer-center-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Во время воспроизведения кнопка тоже видна на мобильных */
  .cpplayer-container.cpplayer-playing .cpplayer-center-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Прогресс бар - абсолютно в самом низу */
  .cpplayer-progress {
    position: absolute !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 5px !important; /* Немного выше для ландшафта */
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    border-radius: 0 !important;
    overflow: visible !important;
    z-index: 20;
    grid-column: unset !important;
    grid-row: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Активный прогресс */
  .cpplayer-progress-played {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF6E41 0%, #FF8E65 100%);
    transition: width 0.1s linear;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(255, 110, 65, 0.5);
    overflow: visible !important;
  }
  
  /* Кружочек - ВЫХОДИТ ЗА ПРЕДЕЛЫ ПЛЕЕРА */
  .cpplayer-progress-played::after {
    content: '';
    position: absolute;
    right: -6px; /* Немного меньше */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #FF6E41;
    border: none;
    border-radius: 50%;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 110, 65, 0.3);
    z-index: 25;
    transition: transform 0.15s ease, width 0.15s ease, height 0.15s ease;
  }
  
  /* Увеличиваем кружочек при активном перемещении */
  .cpplayer-container.is-mobile-scrubbing .cpplayer-progress-played::after {
    width: 16px;
    height: 16px;
    right: -8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(255, 110, 65, 0.4);
  }
  
  /* Буфер */
  .cpplayer-progress-buffer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.2s ease;
  }
  
  /* ===== ПЛАШКА ВРЕМЕНИ НАД ПРОГРЕСС БАРОМ СЛЕВА ===== */
  
  .cpplayer-mobile-time-badge {
    position: absolute !important;
    bottom: 24px !important; /* Немного выше для ландшафта */
    left: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 6px;
    padding: 6px 12px; /* Немного шире */
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* Показываем мобильную плашку только когда контролы активны */
  .cpplayer-container.cpplayer-active .cpplayer-mobile-time-badge {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* ===== КНОПКА ПОЛНОЭКРАНА НА ОДНОМ УРОВНЕ С ПЛАШКОЙ ВРЕМЕНИ ===== */
  
  .cpplayer-controls .cpplayer-fullscreen {
    position: absolute !important;
    bottom: 24px !important; /* Немного выше, на уровне с плашкой времени */
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-radius: 50%;
    z-index: 30;
    grid-column: unset !important;
    grid-row: unset !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  }
  
  .cpplayer-fullscreen img,
  .cpplayer-fullscreen svg {
    width: 21px;
    height: 21px;
    fill: white;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); /* Белая иконка с тенью */
  }
  
  .cpplayer-fullscreen:active {
    transform: scale(0.9);
  }
  
  /* ===== НАСТРОЙКИ - ОТДЕЛЬНЫЙ КОМПОНЕНТ ВВЕРХУ СПРАВА ===== */
  
  .cpplayer-controls .cpplayer-settings-btn {
    position: absolute !important;
    top: 14px !important; /* Теперь controls растянут на всю высоту */
    bottom: auto !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-radius: 50%;
    z-index: 40 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  }
  
  .cpplayer-settings-btn img,
  .cpplayer-settings-btn svg {
    width: 21px;
    height: 21px;
    fill: white;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); /* Тень для видимости */
  }
  
  .cpplayer-settings-btn:active {
    transform: scale(0.9);
  }
  
  /* ===== СКРЫВАЕМ НЕНУЖНЫЕ ЭЛЕМЕНТЫ НА МОБИЛЬНЫХ ===== */
  
  .cpplayer-play,
  .cpplayer-volume-container,
  .cpplayer-time {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* ===== ВИНЬЕТКИ ===== */
  
  .cpplayer-video-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px; /* Немного меньше для ландшафта */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
    border-radius: 0; /* Без скругления снизу */
  }
  
  .cpplayer-video-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px; /* Немного меньше для ландшафта */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
    border-radius: 12px 12px 0 0;
  }
  
  /* ===== СКРЫВАЕМ ЗАГОЛОВОК НА МОБИЛЬНЫХ (ПОКАЗЫВАЕМ ТОЛЬКО В ПОЛНОЭКРАНЕ) ===== */
  
  .cpplayer-title {
    display: none !important;
  }
  
  /* ===== АКТИВНОЕ СОСТОЯНИЕ - ПОКАЗЫВАЕМ КОНТРОЛЫ ===== */
  
  /* Показываем контролы при активном состоянии */
  .cpplayer-active .cpplayer-fullscreen,
  .cpplayer-active .cpplayer-settings-btn,
  .cpplayer-active .cpplayer-mobile-time-badge {
    opacity: 1;
    visibility: visible;
  }
  
  /* Скрываем при неактивности ТОЛЬКО вне полноэкранного режима */
  .cpplayer-container:not(.cpplayer-active):not(.cpplayer-fullscreen) .cpplayer-fullscreen,
  .cpplayer-container:not(.cpplayer-active):not(.cpplayer-fullscreen) .cpplayer-settings-btn,
  .cpplayer-container:not(.cpplayer-active):not(.cpplayer-fullscreen) .cpplayer-mobile-time-badge {
    opacity: 0;
    visibility: hidden;
  }
  
  /* Убираем дублирующийся элемент времени при перемотке */
  .cpplayer-mobile-scrub-time {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* ===== УЛУЧШЕННАЯ ВИДИМОСТЬ ПРОГРЕСС БАРА ===== */
  
  /* При нажатии на прогресс бар делаем его чуть выше для лучшего контроля */
  .cpplayer-progress:active {
    height: 7px !important;
  }
  
  .cpplayer-progress:active .cpplayer-progress-played::after {
    width: 22px;
    height: 22px;
    right: -11px;
  }
}

/* ===== ПЛАВНЫЕ АНИМАЦИИ ===== */

.cpplayer-mobile-time-badge,
.cpplayer-fullscreen,
.cpplayer-settings-btn {
  will-change: opacity, visibility;
}

.cpplayer-progress-played::after {
  transition: width 0.1s ease, height 0.1s ease;
}

/* ===== БАННЕР РЕКЛАМЫ В МИНИ-ПЛЕЕРЕ (ПЕЙЗАЖ) ===== */

/* Баннер "Реклама" в верхнем левом углу */
.ad-label {
  top: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  z-index: 25 !important;
}

/* Кнопка "Пропустить рекламу" в верхнем правом углу */
.ad-skip-container {
  top: 8px !important;
  bottom: auto !important;
  right: 8px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  z-index: 25 !important;
}