/* =============================================================================
   ВИДЕОВИЗИТКА ВРАЧА (partials/NdDoctorVideo, страница /doctor/:id)

   Страница врача живёт на старой rem-базе (html{font-size} плавает от ширины
   окна), поэтому здесь только px/vh/vw. Токены и сброс — из nd-shell.css (.nd).

   Положение привязано к старой кнопке «наверх» (.btnup в styledent.css):
     десктоп  — top: 93%, left: 179.3rem, размер 5rem → правый край 184.3rem ≈ 95.99vw;
     ≤992px   — top: 88%, left: 85%, размер 10rem (1rem = 100vw/768*10) → правый край 85% + 13.02vw.
   Видео стоит над ней и выровнено по её правому краю в тех же единицах
   (vw считает и полосу прокрутки, поэтому right: … дал бы сдвиг).
   ========================================================================== */

/* ---------- превью в углу ---------- */
.nd-dvideo {
  position: fixed;
  z-index: 1030; /* над шапкой (1000) и «наверх» (15), под модалками (1050+) и cookie-баннером */
  left: calc(95.99vw - 128px);
  bottom: calc(7% + 14px);
  width: 128px;
  height: 223px; /* внутренняя область 122×217 — ровно 9:16 */
  padding: 3px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--nd-cyan), var(--nd-violet));
  box-shadow: 0 14px 34px rgba(28, 52, 72, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  animation: nd-dvideo-in 0.4s ease both;
}
.nd-dvideo[hidden] {
  display: none !important;
}
.nd-dvideo:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px rgba(28, 52, 72, 0.34);
}
/* пока открыта модалка — превью не показываем (его плеер выгружен) */
.nd-dvideo.is-playing {
  opacity: 0;
  visibility: hidden;
}

@keyframes nd-dvideo-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nd-dvideo__frame {
  position: absolute;
  inset: 3px;
  border-radius: 19px;
  overflow: hidden;
  background: #1c3448;
}
.nd-dvideo__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none; /* клики забирает кнопка-оверлей */
}

.nd-dvideo .nd-dvideo__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  cursor: pointer;
}
.nd-dvideo .nd-dvideo__open:focus-visible {
  outline: 3px solid var(--nd-cyan-700);
  outline-offset: 3px;
}

/* значок сверху: внизу роликов обычно плашка с именем врача */
.nd-dvideo__sound {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(28, 52, 72, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.nd-dvideo:hover .nd-dvideo__sound {
  background: var(--nd-cyan-600);
}

.nd-dvideo .nd-dvideo__close {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(28, 52, 72, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.nd-dvideo .nd-dvideo__close:hover {
  background: var(--nd-soft-cyan);
}

@media (max-width: 992px) {
  .nd-dvideo {
    left: calc(85% + 13.02vw - 92px);
    bottom: calc(12% + 12px);
    width: 92px;
    height: 159px; /* внутренняя область 86×153 — 9:16 */
    border-radius: 18px;
  }
  .nd-dvideo__frame {
    border-radius: 15px;
  }
  .nd-dvideo .nd-dvideo__open {
    border-radius: 18px;
  }
  .nd-dvideo__sound {
    left: 7px;
    top: 7px;
    width: 26px;
    height: 26px;
  }
  /* видео стоит в ~7px от края экрана — крестик внутрь, иначе обрежется */
  .nd-dvideo .nd-dvideo__close {
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    background: rgba(28, 52, 72, 0.6);
    box-shadow: none;
  }
  .nd-dvideo .nd-dvideo__close:hover {
    background: rgba(28, 52, 72, 0.85);
  }
  .nd-dvideo .nd-dvideo__close path {
    stroke: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nd-dvideo {
    animation: none;
    transition: none;
  }
  .nd-dvideo:hover {
    transform: none;
  }
}

/* ---------- модалка: видео по центру ----------
   Размер 9:16: не выше 86% экрана, не выше 760px и не шире 92vw. */
.nd-dvmodal {
  --nd-dv-h: min(86vh, 760px, calc(92vw * 16 / 9));
  --bs-modal-margin: 16px;
}
@supports (height: 1svh) {
  .nd-dvmodal {
    --nd-dv-h: min(86svh, 760px, calc(92vw * 16 / 9));
  }
}

.nd-dvmodal .modal-dialog {
  width: auto;
  max-width: none;
  justify-content: center;
}

.nd-dvmodal .nd-dvmodal__content {
  position: relative;
  width: calc(var(--nd-dv-h) * 9 / 16);
  height: var(--nd-dv-h);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nd-dvmodal__frame {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #0f1d29;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.nd-dvmodal__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.nd-dvmodal .nd-dvmodal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 29, 41, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.nd-dvmodal .nd-dvmodal__close:hover {
  background: rgba(15, 29, 41, 0.85);
}

/* на широких экранах крестик выносим за видео, чтобы не перекрывал плеер */
@media (min-width: 600px) {
  .nd-dvmodal .nd-dvmodal__close {
    top: 0;
    right: -54px;
    background: #fff;
  }
  .nd-dvmodal .nd-dvmodal__close:hover {
    background: var(--nd-soft-cyan);
  }
  .nd-dvmodal .nd-dvmodal__close path {
    stroke: var(--nd-ink);
  }
}