/* ══════════════════════════════════════════════════════════════════════════
   VIDEO PREVIEW (Faza 4) — popover hover + buton (i) + foaie.
   Tokeni identici cu cardul de notite din video-modal.css.
══════════════════════════════════════════════════════════════════════════ */
.video-preview-host { position: relative; }

.video-preview-info-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(42, 48, 80, 0.75); color: #34D399;
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(8px);
}
.video-preview-info-btn:hover { background: rgba(52, 211, 153, 0.25); }

.video-preview-popover {
  position: fixed; z-index: 900;
  width: min(380px, calc(100vw - 16px));
  max-height: min(60vh, 420px); overflow-y: auto;
  padding: 14px 16px;
  /* Opac: popover-ul sta peste alte carduri, textul lor s-ar citi prin el */
  background: rgba(34, 39, 66, 0.96);
  border: 1px solid rgba(52, 211, 153, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.video-preview-popover[hidden],
.video-preview-sheet-wrap[hidden] { display: none; }

.video-preview-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.video-preview-pills:last-child { margin-bottom: 0; margin-top: 10px; }
.video-preview-pill-sub {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(52, 211, 153, 0.15); color: #34D399;
}
.video-preview-pill-tag {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6);
}
.video-preview-summary {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.85);
}
.video-preview-summary-full { font-size: 13.5px; }

.video-preview-sheet-wrap {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.video-preview-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.video-preview-sheet {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; max-height: 80dvh; overflow-y: auto;
  padding: 18px 18px 16px;
  background: rgba(42, 48, 80, 0.6);
  border: 1px solid rgba(52, 211, 153, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.video-preview-sheet-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer;
}
.video-preview-sheet-close:hover { background: rgba(255, 255, 255, 0.18); }
.video-preview-sheet-body { padding-right: 32px; }

/* Buton text "Detalii" pe orice dispozitiv (pe desktop, (i) nu spunea nimic). */
.video-preview-info-btn--text {
  width: auto; height: auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
}

/* Mobil (fara hover): popup transparent. */
@media (hover: none) {
  .video-preview-sheet-backdrop { background: rgba(0, 0, 0, 0.3); }
  .video-preview-sheet {
    background: rgba(42, 48, 80, 0.45);
    border-color: rgba(52, 211, 153, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}