/* Радиоплеер «Выше FM» для WordPress.
   Все цвета — через CSS-переменные: тема сайта может переопределить их
   на своём селекторе .vfmr-player {} без правки плагина. */

.vfmr-player {
  --vfmr-accent: #33619E;      /* синий логотипа Protestant.ru */
  --vfmr-accent-fg: #ffffff;   /* текст/иконки на акцентном фоне */
  --vfmr-bg: #ffffff;
  --vfmr-fg: #1c2733;
  --vfmr-muted: #64748b;
  --vfmr-border: #e2e8f0;
  --vfmr-live: #e11d48;

  box-sizing: border-box;
  display: none; /* до инициализации JS каркас не мигает */
  max-width: 480px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--vfmr-border);
  border-radius: 14px;
  background: var(--vfmr-bg);
  color: var(--vfmr-fg);
  font: 14px/1.45 inherit;
}
.vfmr-player * { box-sizing: border-box; }
.vfmr-player.vfmr-ready { display: grid; grid-template-columns: auto auto 1fr; }

@media (prefers-color-scheme: dark) {
  .vfmr-player {
    --vfmr-bg: #0f1720;
    --vfmr-fg: #e6edf3;
    --vfmr-muted: #8aa0b4;
    --vfmr-border: #253241;
  }
}

/* Обложка */
.vfmr-cover { display: none; width: 56px; height: 56px; border-radius: 10px;
  overflow: hidden; background: var(--vfmr-border); }
.vfmr-player.has-cover .vfmr-cover { display: block; }
.vfmr-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Кнопка play/stop */
.vfmr-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vfmr-accent); color: var(--vfmr-accent-fg);
  transition: transform .12s ease, filter .12s ease;
  padding: 0; margin: 0; line-height: 0;
}
.vfmr-btn:hover { filter: brightness(1.06); }
.vfmr-btn:active { transform: scale(.94); }
.vfmr-btn svg { width: 24px; height: 24px; }
.vfmr-player.is-playing .vfmr-btn { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vfmr-accent) 25%, transparent); }

/* Метаданные */
.vfmr-meta { min-width: 0; }
.vfmr-toprow { display: flex; align-items: center; gap: 8px; }
.vfmr-station { font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vfmr-muted); }
.vfmr-live {
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--vfmr-live); border-radius: 999px; padding: 2px 8px;
  animation: vfmr-pulse 1.6s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes vfmr-pulse { 50% { opacity: .65; } }
.vfmr-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.vfmr-artist { color: var(--vfmr-muted); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Управление: качества + громкость (третья колонка, прижата вправо) */
.vfmr-controls { display: flex; flex-direction: column; align-items: flex-end;
  gap: 8px; justify-self: end; }
.vfmr-quality { display: inline-flex; }
/* Выпадающий список качества: компактнее ряда «пилюль», особенно в шапке.
   appearance:none + своя стрелка (data-URI, без внешних запросов). */
.vfmr-q-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--vfmr-border); border-radius: 999px;
  background-color: color-mix(in srgb, var(--vfmr-border) 35%, transparent);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23808c9a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  color: var(--vfmr-fg); font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 26px 5px 12px; margin: 0; line-height: 1.2;
  cursor: pointer; max-width: 150px;
}
.vfmr-q-select:hover { border-color: var(--vfmr-accent); }
.vfmr-q-select:focus-visible { outline: 2px solid var(--vfmr-accent); outline-offset: 1px; }
.vfmr-q-select option { color: #1c2733; background: #fff; }  /* список рисует ОС */
.vfmr-vol { display: inline-flex; align-items: center; gap: 6px; color: var(--vfmr-muted); }
.vfmr-vol svg { width: 18px; height: 18px; flex: none; }
.vfmr-vol-range { width: 90px; accent-color: var(--vfmr-accent); }

/* ── Компактный режим (строка) ── */
.vfmr-player.vfmr-compact { max-width: none; padding: 8px 12px; border-radius: 10px; }
.vfmr-player.vfmr-compact .vfmr-cover { width: 40px; height: 40px; }
.vfmr-player.vfmr-compact .vfmr-btn { width: 40px; height: 40px; }
.vfmr-player.vfmr-compact .vfmr-artist { display: none; }
.vfmr-player.vfmr-compact .vfmr-controls { flex-direction: row; align-items: center; }

/* ── Закреплённая панель внизу сайта ── */
.vfmr-player.vfmr-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}
body:has(.vfmr-player.vfmr-sticky.vfmr-ready) { padding-bottom: 64px; }

/* ─── Виджет в колонке сайта ───────────────────────────────────────────
   Колонка узкая (обычно 300–360 px), поэтому раскладка не в строку, а в
   две области: «обложка + название», ниже «кнопка + регуляторы», внизу
   полоса прогресса. Ширину не ограничиваем — карточка занимает колонку. */
.vfmr-player.vfmr-widget {
  max-width: none;
  width: 100%;
  gap: 12px;
  container-type: inline-size;   /* чтобы работали запросы к ширине колонки ниже */
}
.vfmr-player.vfmr-widget.vfmr-ready {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "cover meta"
    "btn   controls"
    "prog  prog";
  align-items: center;
}
.vfmr-player.vfmr-widget .vfmr-cover {
  grid-area: cover; width: 64px; height: 64px; border-radius: 12px;
}
.vfmr-player.vfmr-widget .vfmr-meta     { grid-area: meta; }
.vfmr-player.vfmr-widget .vfmr-btn      { grid-area: btn; width: 48px; height: 48px; }
.vfmr-player.vfmr-widget .vfmr-controls {
  grid-area: controls;
  flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px;
}
.vfmr-player.vfmr-widget .vfmr-prog     { grid-area: prog; margin-top: 0; }
.vfmr-player.vfmr-widget .vfmr-title    { white-space: normal; }
.vfmr-player.vfmr-widget .vfmr-station  { white-space: nowrap; }
.vfmr-player.vfmr-widget .vfmr-vol-range { width: 100%; max-width: 110px; }
/* Пока обложки нет (эфир без картинки трека) — кнопка встаёт на её место. */
.vfmr-player.vfmr-widget:not(.has-cover).vfmr-ready {
  grid-template-areas:
    "btn      meta"
    "controls controls"
    "prog     prog";
}
.vfmr-player.vfmr-widget:not(.has-cover) .vfmr-controls { justify-content: space-between; }
/* «Одной строкой»: всё в один ряд, как в шапке. */
.vfmr-player.vfmr-widget.vfmr-compact.vfmr-ready {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "cover btn  meta controls"
    "prog  prog prog prog";
  gap: 8px 10px; padding: 10px 12px;
}
.vfmr-player.vfmr-widget.vfmr-compact .vfmr-title { white-space: nowrap; }
.vfmr-player.vfmr-widget.vfmr-compact .vfmr-cover { width: 40px; height: 40px; }
.vfmr-player.vfmr-widget.vfmr-compact .vfmr-btn   { width: 40px; height: 40px; }
/* В узком ряду остаётся только выбор качества — ползунку громкости места нет. */
.vfmr-player.vfmr-widget.vfmr-compact .vfmr-vol { display: none; }
/* Очень узкая колонка — обложка меньше, регуляторы под кнопкой. */
@container (max-width: 260px) {
  .vfmr-player.vfmr-widget .vfmr-cover { width: 48px; height: 48px; }
  .vfmr-player.vfmr-widget .vfmr-vol { display: none; }
}

/* ── Тёмный режим темы Foxiz ──
   Foxiz переключает тему атрибутом на <body data-theme="...">, включая живой
   тумблер в шапке. Явный выбор темы сайта важнее prefers-color-scheme:
   специфичность этих правил перекрывает медиа-запрос выше. */
body[data-theme="dark"] .vfmr-player {
  --vfmr-bg: #0f1720;
  --vfmr-fg: #e6edf3;
  --vfmr-muted: #8aa0b4;
  --vfmr-border: #253241;
}
body[data-theme]:not([data-theme="dark"]) .vfmr-player {
  --vfmr-bg: #ffffff;
  --vfmr-fg: #1c2733;
  --vfmr-muted: #64748b;
  --vfmr-border: #e2e8f0;
}
/* Выпадающий список рисует ОС — color-scheme говорит ей, в какой теме */
body[data-theme="dark"] .vfmr-q-select { color-scheme: dark; }
body[data-theme="dark"] .vfmr-q-select option { color: #e6edf3; background: #0f1720; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) .vfmr-q-select { color-scheme: dark; }
  body:not([data-theme]) .vfmr-q-select option { color: #e6edf3; background: #0f1720; }
}

/* ── Режим «в шапке» (монтируется в .logo-sec Foxiz, возле лого) ──
   Плеер разнесён на две части. Возле логотипа остаётся только управление:
   [кнопка][переключатель потока] — это и есть .vfmr-player.vfmr-header.
   Обложка, название и полоса прогресса уезжают строкой НИЖЕ, под логотип
   (.vfmr-hdr-row, скрипт вставляет её сразу после .logo-sec): в одну строку
   с логотипом это не влезало и наезжало на иконки. */
.vfmr-player.vfmr-header {
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 360px;
  min-width: 0;
  flex: 0 1 auto;
  gap: 10px;
}
.vfmr-player.vfmr-header.vfmr-ready {
  grid-template-columns: auto auto;                  /* кнопка · переключатель */
}
.vfmr-player.vfmr-header .vfmr-btn { width: 40px; height: 40px; }
.vfmr-player.vfmr-header .vfmr-btn svg { width: 20px; height: 20px; }
.vfmr-player.vfmr-header .vfmr-station { display: none; }
.vfmr-player.vfmr-header .vfmr-artist { display: none; }
.vfmr-player.vfmr-header .vfmr-title { font-size: 13px; max-width: 100%; }
.vfmr-player.vfmr-header .vfmr-live { font-size: 10px; padding: 2px 7px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vfmr-player.vfmr-header .vfmr-toprow { min-width: 0; }
.vfmr-player.vfmr-header .vfmr-vol { display: none; }        /* громкость — системная */
.vfmr-player.vfmr-header .vfmr-controls { flex-direction: row; align-items: center; }
.vfmr-player.vfmr-header .vfmr-q-select {
  font-size: 11px; padding: 4px 22px 4px 9px; background-position: right 7px center;
}
.vfmr-player.vfmr-header .vfmr-meta { overflow: hidden; }  /* страховка от наезда */
/* Ступени тесноты — навешивает JS (fitHeaderPlayer) по фактическому месту:
   tight и mini убирают переключатель потока, оставляя кнопку. */
.vfmr-player.vfmr-header.vfmr-tight .vfmr-quality,
.vfmr-player.vfmr-header.vfmr-mini .vfmr-quality { display: none; }

/* ── Вторая строка шапки: обложка · название · прогресс ──
   Живёт ВНЕ .vfmr-player (её вставляет скрипт под строку логотипа), поэтому
   у неё свои правила и свой переключатель обложки .has-cover. */
/* box-sizing обязателен: скрипт задаёт строке боковые отступы под колонку
   сайта, а при content-box они прибавлялись бы к width:100% — и строка
   вылезала бы за правый край окна. */
.vfmr-hdr-row { width: 100%; box-sizing: border-box; }
.vfmr-hdr-row * { box-sizing: border-box; }
/* Блок встаёт ПОД ЛОГОТИПОМ: скрипт двигает его так, чтобы центр совпал с
   центром логотипа (margin-left задаётся из JS). Пока скрипт не померил —
   центрируем по колонке: у большинства шапок логотип и так посередине. */
.vfmr-hdr-info {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; margin: 0 auto;
  min-width: 0; padding: 2px 0 10px;
  color: var(--vfmr-fg, #1c2733);
  font: 14px/1.45 inherit;
}
.vfmr-hdr-info .vfmr-cover {
  display: none; flex: none; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; background: #e2e8f0;
}
.vfmr-hdr-info.has-cover .vfmr-cover { display: block; }
.vfmr-hdr-text { min-width: 0; flex: 1 1 auto; }
.vfmr-hdr-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vfmr-hdr-titleline .vfmr-title {
  font-size: 14px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Полоса прогресса. Скрыта, пока не пришли elapsed/duration, и во время
   живого голосового эфира — у него длительности нет. */
.vfmr-prog { display: none; align-items: center; gap: 8px; margin-top: 5px; }
.vfmr-prog.is-on { display: flex; }
.vfmr-prog-bar {
  flex: 1 1 auto; min-width: 0; height: 4px; border-radius: 2px;
  background: var(--vfmr-border, #e2e8f0); overflow: hidden;
}
.vfmr-prog-fill {
  height: 100%; width: 0; border-radius: 2px;
  background: var(--vfmr-accent, #33619E);
  transition: width .9s linear;            /* ровный ход между тиками */
}
.vfmr-prog-time {
  flex: none; font-size: 11px; color: var(--vfmr-muted, #64748b);
  font-variant-numeric: tabular-nums;      /* цифры не «прыгают» по ширине */
}
@media (max-width: 1023px) {
  .vfmr-hdr-row { display: none; }         /* мобильная шапка Foxiz — своя */
}
.vfmr-player.vfmr-header.vfmr-off { display: none !important; }
/* На мобильных Foxiz скрывает logo-sec (мобильная шапка своя) — плеер в шапке
   там не живёт; для телефонов включайте закреплённую панель (sticky). */
@media (max-width: 1023px) {
  .vfmr-player.vfmr-header { display: none !important; }
}
/* Плеер прижимается к логотипу, а не к краю шапки: свободное место ячейки
   уходит на противоположную сторону (иконки остаются у края). Точный зазор
   до логотипа доводит скрипт — границы ячеек с логотипом не совпадают. */
.logo-sec-left .vfmr-player.vfmr-header { margin-inline-start: auto; }
.logo-sec-right .vfmr-player.vfmr-header { margin-inline-end: auto; }

/* Узкие экраны (.vfmr-ready в селекторе — иначе проигрывает по специфичности
   базовому правилу .vfmr-player.vfmr-ready и сетка не перестраивается) */
@media (max-width: 560px) {
  .vfmr-player.vfmr-ready { grid-template-columns: auto 1fr; }
  .vfmr-cover { display: none !important; }
  .vfmr-controls { grid-column: 1 / -1; flex-direction: row;
    justify-content: space-between; justify-self: stretch; width: 100%; }
  .vfmr-vol-range { width: 70px; }
}