/* Общий плеер записей: семинары, марафон, медитации.
 *
 * Классы с префиксом lvp-, чтобы стили лендинга и стили плеера не пересекались:
 * одна и та же страница обычно и продаёт, и показывает запись.
 *
 * Цвета берём из переменных страницы, но с запасным значением - модуль должен
 * работать и на лендинге, где никаких --gold не объявлено. */
.lvp {
  --lvp-accent: var(--gold-warm, #c8a96e);
  --lvp-accent-dim: rgba(200, 169, 110, .35);
  position: relative;
  background: #12121a;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.lvp.is-playable { cursor: pointer; }
.lvp video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  object-fit: contain; background: #000; display: block; }
.lvp-wait { color: #8f8fa3; font-size: .98rem; text-align: center; padding: 0 24px; line-height: 1.5; }

/* :fullscreen и :-webkit-full-screen нельзя перечислять через запятую:
   незнакомый браузеру селектор в списке выбрасывает всё правило целиком. */
.lvp:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; }
.lvp:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; }

.lvp-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; background: rgba(200, 169, 110, .92); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; z-index: 2; }
.lvp-play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.lvp-play-btn svg { width: 28px; height: 28px; color: #0e0a05; margin-left: 4px; }

/* Крутилка на подгрузке: трёхчасовую запись на мобильном интернете приходится ждать,
   и без неё человек решает, что плеер сломался, и уходит. */
.lvp-spinner { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--lvp-accent); border-radius: 50%;
  animation: lvpspin .8s linear infinite; z-index: 2; display: none; }
.lvp.is-buffering .lvp-spinner { display: block; }
@keyframes lvpspin { to { transform: rotate(360deg); } }

.lvp-controls { position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); padding: 24px 14px 10px;
  display: flex; flex-direction: column; gap: 6px; z-index: 3; opacity: 0; transition: opacity .3s;
  /* Невидимая панель не должна ловить касания: иначе нижняя треть кадра на телефоне
     остаётся живой, тап туда не ставит паузу, а попадание в зону шкалы перематывает. */
  pointer-events: none; }
.lvp:hover .lvp-controls,
.lvp.controls-visible .lvp-controls { opacity: 1; pointer-events: auto; }

/* Шкала. Три слоя: подложка (вся запись), «открытая» часть (докуда досмотрел)
   и заполнение (где сейчас). Средний слой и есть подсказка, что дальше хода нет. */
.lvp-timeline { width: 100%; height: 4px; background: rgba(255, 255, 255, .18); border-radius: 2px;
  cursor: pointer; position: relative; touch-action: none; }
/* Полоска в четыре пикселя пальцем не ловится - расширяем область попадания
   невидимым слоем, не трогая ни высоту полоски, ни расчёт позиции по X. */
.lvp-timeline::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.lvp-timeline:hover { height: 6px; }
.lvp-unlocked { position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: var(--lvp-accent-dim); border-radius: 2px; pointer-events: none; }
.lvp-fill { height: 100%; background: var(--lvp-accent); border-radius: 2px; width: 0%; position: relative; }
.lvp-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; background: var(--lvp-accent); border-radius: 50%; opacity: 0; transition: opacity .2s; }
.lvp-timeline:hover .lvp-fill::after,
.lvp.is-scrubbing .lvp-fill::after { opacity: 1; }

/* Подсказка над шкалой: время под курсором и сколько всего просмотрено.
   Она же объясняет, почему вперёд не перематывается - без объяснения
   заблокированный ползунок читается как поломка. */
.lvp-tip { position: absolute; bottom: calc(100% + 10px); transform: translateX(-50%);
  background: rgba(18, 18, 26, .96); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 6;
  font-variant-numeric: tabular-nums; box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.lvp-timeline:hover .lvp-tip,
.lvp.is-scrubbing .lvp-tip { opacity: 1; }
.lvp-tip b { color: var(--lvp-accent); font-weight: 700; }
.lvp-tip i { display: block; font-style: normal; color: rgba(255, 255, 255, .6); font-size: 11px; margin-top: 2px; }

.lvp-row { display: flex; align-items: center; gap: 12px; }
.lvp-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 4px;
  display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .2s; }
.lvp-btn:hover { opacity: 1; }
.lvp-btn svg { width: 20px; height: 20px; }
.lvp-time { font-size: 12px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums;
  white-space: nowrap; user-select: none; }
.lvp-spacer { flex: 1; }
.lvp-speed { background: rgba(255, 255, 255, .15); border: none; color: #fff; font-size: 12px; font-weight: 700;
  font-family: inherit; padding: 3px 8px; border-radius: 4px; cursor: pointer; transition: background .2s; user-select: none; }
.lvp-speed:hover { background: rgba(255, 255, 255, .3); }

/* Выбор качества. Кнопки нет, пока hls.js не разобрал мастер-плейлист: показывать
   пустое меню (или его подобие у нативного HLS в Safari) незачем. */
.lvp-quality { position: relative; display: none; }
.lvp-quality.ready { display: inline-flex; }
.lvp-quality-btn { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
  font-size: 12px; font-weight: 600; font-family: inherit; padding: 4px 8px 4px 10px; border-radius: 4px;
  cursor: pointer; transition: background .2s, border-color .2s; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.lvp-quality-btn:hover { background: rgba(255, 255, 255, .3); border-color: rgba(255, 255, 255, .4); }
.lvp-quality-btn::after { content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s; margin-left: 2px; }
.lvp-quality.open .lvp-quality-btn::after { transform: rotate(-135deg) translate(-1px, -1px); }
.lvp-quality-menu { position: absolute; bottom: calc(100% + 8px); right: 0;
  background: rgba(20, 20, 20, .96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 6px 0; min-width: 140px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease; z-index: 5;
  max-height: min(60vh, 260px); overflow-y: auto; }
.lvp-quality.open .lvp-quality-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lvp-quality-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; font-size: 13px; color: #fff; cursor: pointer; user-select: none;
  background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; }
.lvp-quality-item:hover { background: rgba(255, 255, 255, .08); }
.lvp-quality-item.active { color: var(--lvp-accent); }
.lvp-quality-item.active::after { content: '\2713'; font-weight: 700; }
.lvp-quality-sub { font-size: 10px; color: rgba(255, 255, 255, .55); margin-left: 6px; font-weight: 400; }

/* Всплывающее «дальше пока нельзя» - когда человек всё-таки дёрнул ползунок вперёд. */
.lvp-toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(6px);
  background: rgba(18, 18, 26, .95); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px; padding: 9px 14px; font-size: 13px; z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity .2s, transform .2s; max-width: 82%; text-align: center; line-height: 1.4; }
.lvp.show-toast .lvp-toast { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .lvp-controls { padding: 20px 10px 8px; }
  .lvp-row { gap: 8px; }
  .lvp-time { font-size: 11px; }
  .lvp-play-btn { width: 60px; height: 60px; }
  .lvp-play-btn svg { width: 24px; height: 24px; }
}