/* modern_skin_v2_player_controls_compact_patch.css
   Fix: уменьшить кнопку Play (SVG), рамку/высоту блока управления плеера.
   Подключать ПОСЛЕ modern_skin_v2_player_history_patch.css
*/

:root{
  --__modern_skin_v2_player_controls_compact_patch__: "2026-01-22";

  /* Размер круглой кнопки Play/Pause */
  --player-play-btn: 56px;

  /* Вертикальные отступы блока управления */
  --player-controls-pad-y: 8px;
  --player-controls-pad-x: 12px;
}

/* Компактнее общие отступы внутри плеера */
#sc-player.player-container{
  padding: var(--player-controls-pad-y) var(--player-controls-pad-x) !important;
}

/* Убираем отрицательный сдвиг, из-за которого блок кажется "большим" */
#sc-player .controls-holder{
  margin-top: 0 !important;
  padding-top: 6px !important;
}

/* Сжимаем padding у контейнера прогресса (в исходном CSS он 3% 5%) */
#sc-player .progress-container{
  padding: 10px 12px !important;
}

/* Контейнер кнопки */
#sc-player #play-button-container{
  height: calc(var(--player-play-btn) + 14px) !important;
}

/* КРУГЛАЯ кнопка Play/Pause (у неё inline-style width/height/top — перебиваем !important) */
#sc-player #play-button-container button{
  width: var(--player-play-btn) !important;
  height: var(--player-play-btn) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* На всякий случай — и для состояния loading/active */
#sc-player #play-button-container button.loading,
#sc-player #play-button-container button.active{
  width: var(--player-play-btn) !important;
  height: var(--player-play-btn) !important;
}

/* SVG внутри кнопки масштабируем под новый размер (если браузер не подхватил автоматически) */
#sc-player #play-button-container button svg{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Loader (если показывается отдельным элементом поверх кнопки) */
#sc-player .loader{
  width: var(--player-play-btn) !important;
  height: var(--player-play-btn) !important;
}

/* Прочие элементы управления (ползунок/каналы) чуть компактнее */
#sc-player .slider{
  height: var(--player-play-btn) !important;
}
#sc-player #chanels-container li{
  margin: 6px !important;
}

/* Мобильный режим */
@media (max-width: 480px){
  :root{ --player-play-btn: 50px; }
  #sc-player .progress-container{ padding: 8px 10px !important; }
}