/* ════════════════════════════════════════════════════════════════
   video-widget-contact.css
   Док-обёртка плавающего блока (нижний левый угол) + кнопка
   «Связаться напрямую» + попап связи.
   Подключать ПОСЛЕ inline-стилей .video-widget в index.html и после
   floating-video.css (нужны токены и верный порядок каскада).

   Позиционирование и reveal переехали с .video-widget на .video-dock,
   карточка стала статичной внутри дока → крестик прячет только видео,
   кнопка (сосед в доке) остаётся.
   ════════════════════════════════════════════════════════════════ */

/* ── Док-обёртка (фикс-контейнер в нижнем левом углу) ── */
.video-dock {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
/* Появление дока после прохождения hero (перенесено с .video-widget). */
.video-dock[data-revealed="false"] { opacity: 0; transform: translateY(16px); pointer-events: none; }
.video-dock[data-revealed="true"]  { opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out); }
/* Возле футера прячем весь док (карточка + кнопка). Правило ПОСЛЕ reveal-состояний —
   при равной специфичности перекрывает [data-revealed="true"]. data-near-footer ставит floating-video.js. */
.video-dock[data-near-footer="true"] { opacity: 0; transform: translateY(20px); pointer-events: none; }
/* Если когда-нибудь понадобится скрыть весь док целиком. */
.video-dock[data-open="false"] { display: none; }

/* ── .video-widget теперь статичен ВНУТРИ дока (страховка к inline-стилям) ── */
.video-widget {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: auto;
}
.video-widget[data-open="false"] { display: none; }   /* крестик прячет ТОЛЬКО карточку */

/* ── Кнопка «Связаться напрямую» (ширина = ширине карточки на десктопе) ── */
.video-contact {
  width: 200px;
  min-height: 40px;   /* гарантируем хит-область ≥40px на всех брейкпоинтах */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 14px;
  border: 0; border-radius: var(--radius-md); cursor: pointer;
  background: var(--accent); color: #fff;
  font: 500 14px/1 var(--font-body);
  box-shadow: 0 6px 18px -4px rgba(200, 121, 42, 0.5);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.video-contact:hover { background: var(--accent-dark); transform: translateY(-1px); }
.video-contact svg { width: 16px; height: 16px; }

/* ── Адаптив (повторяет брейкпоинты виджета) ── */
@media (max-width: 1100px) {
  .video-contact { width: 160px; }   /* карточка 160×220 — размер задаётся в index.html */
}
@media (max-width: 720px) {
  .video-dock { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .video-contact { width: auto; padding: 11px 13px; font-size: 12.5px; gap: 7px; border-radius: var(--radius-sm); }
  .video-contact svg { width: 14px; height: 14px; }
}

/* ════════════════ Попап связи (текст задаётся в разметке) ════════════════ */
.rts-overlay[hidden] { display: none; }
.rts-overlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(38, 30, 22, 0.42); backdrop-filter: blur(2px);
  animation: rts-fade 0.18s var(--ease-out) both;
}
@keyframes rts-fade { from { opacity: 0; } to { opacity: 1; } }
.rts-dialog {
  position: relative; width: 100%; max-width: 420px;
  background: var(--surface, #fff); border-radius: 12px;
  box-shadow: 0 24px 64px rgba(38, 30, 22, 0.28);
  padding: 30px 28px 24px; text-align: center;
  animation: rts-pop 0.2s var(--ease-out) both;
}
@keyframes rts-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.rts-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--text-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rts-x svg { width: 16px; height: 16px; }
.rts-x:hover { background: var(--bg-cream); color: var(--text-dark); }
.rts-title { margin: 0 0 8px; font: 500 27px/1.15 var(--font-serif); color: var(--text-dark); letter-spacing: -0.2px; }
.rts-text { margin: 0 0 20px; font: 400 15px/1.55 var(--font-body); color: var(--text-muted); text-wrap: pretty; }

.bk-contact__btns { display: flex; flex-direction: row; gap: 10px; }
.bk-contact__btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 500 15px/1 var(--font-body); text-decoration: none;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.bk-contact__btn--tg { background: var(--accent); color: #fff; }
.bk-contact__btn--tg:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.bk-contact__btn--max { background: #fff; color: var(--text-dark); border-color: var(--border); }
.bk-contact__btn--max:hover { border-color: var(--accent); color: var(--text-dark); transform: translateY(-1px); }
.bk-contact__btn-ic { width: 21px; height: 21px; flex-shrink: 0; display: inline-flex; }
.bk-contact__btn-ic svg { width: 100%; height: 100%; }