/*!
 * © 2025 diaspora.ro — Toate drepturile rezervate.
 * PROTECTIE COPYRIGHT — COD PROPRIETAR CONFIDENTIAL
 * Utilizarea, copierea sau distributia fara acord scris este INTERZISA.
 * NO-AI-TRAINING: Not licensed for AI training datasets.
 * NO-AI-SCRAPING: Automated collection strictly prohibited.
 */
/* ── Video Player Overlay — diaspora.ro ────────────────────────────────────── */

#vp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

/* ── Video element ── */
#vp-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;
}

/* ── Tap/click play indicator (flash) ── */
#vp-play-ind {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 72px;
  height: 72px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .1s ease, opacity .3s ease;
  opacity: 0;
}
#vp-play-ind svg { width: 32px; height: 32px; fill: #fff; }
#vp-play-ind.flash {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ── Close button (always visible) ── */
#vp-close {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}
#vp-close:hover { background: rgba(0,0,0,.75); }

/* ── Top info bar ── */
#vp-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  padding: 54px 14px 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, transparent 100%);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* visible on desktop hover */
#vp-overlay:hover #vp-top-bar { opacity: 1; pointer-events: auto; }
/* visible when touched (JS adds .vp-ui-visible) */
#vp-overlay.vp-ui-visible #vp-top-bar { opacity: 1; pointer-events: auto; }

#vp-top-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px system-ui;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.3);
}
#vp-top-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.vp-top-info { flex: 1; min-width: 0; }
#vp-top-name {
  font: 700 14px system-ui;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vp-top-body-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#vp-top-body-text {
  font: 400 13px system-ui;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#vp-read-more {
  font: 600 12px system-ui;
  color: rgba(255,255,255,.8);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  flex-shrink: 0;
}

/* ── Controls bar (bottom, above actions) ── */
#vp-controls {
  position: absolute;
  bottom: 64px;
  left: 0;
  right: 0;
  z-index: 9;
  padding: 30px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#vp-overlay:hover #vp-controls { opacity: 1; pointer-events: auto; }
#vp-overlay.vp-ui-visible #vp-controls { opacity: 1; pointer-events: auto; }

/* Progress bar */
.vp-progress-wrap {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 6px;
  touch-action: none;
}
#vp-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  overflow: visible;
  position: relative;
}
#vp-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  width: 0%;
  position: relative;
  pointer-events: none;
}
#vp-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -4px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-radius: 50%;
}
.vp-progress-wrap:hover #vp-progress-track { height: 5px; }

/* Controls row */
.vp-ctrl-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vp-ctrl-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vp-ctrl-btn:hover { background: rgba(255,255,255,.15); }
.vp-ctrl-btn svg { width: 20px; height: 20px; }
#vp-time {
  font: 400 12px system-ui;
  color: rgba(255,255,255,.85);
  margin-left: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
#vp-speed {
  font: 700 12px system-ui;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* ── Actions bar (always visible — bottom) ── */
#vp-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  padding: 10px 16px 14px;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  gap: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.vp-act-btn {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 10px;
  font: 600 14px system-ui;
  transition: background .15s;
}
.vp-act-btn:hover { background: rgba(255,255,255,.1); }
.vp-act-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.vp-act-btn.vp-liked svg path { fill: #f87171; stroke: #f87171; }
#vp-act-share .vp-act-icon { font-size: 20px; }

/* ── Navigation arrows (prev/next video) ── */
.vp-nav-btn {
  position: absolute;
  right: 10px;
  z-index: 9;
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#vp-nav-prev { top: 50%; transform: translateY(calc(-50% - 28px)); }
#vp-nav-next { top: 50%; transform: translateY(calc(-50% + 28px)); }
#vp-overlay:hover .vp-nav-btn { opacity: 1; pointer-events: auto; }
#vp-overlay.vp-ui-visible .vp-nav-btn { opacity: 1; pointer-events: auto; }
.vp-nav-btn:hover { background: rgba(255,255,255,.25); }
.vp-nav-btn:disabled { opacity: .2 !important; pointer-events: none; }

/* ── Speed picker popup ── */
#vp-speed-menu {
  position: absolute;
  bottom: 120px;
  right: 12px;
  background: rgba(20,20,20,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 6px 0;
  z-index: 12;
  display: none;
  min-width: 90px;
  backdrop-filter: blur(8px);
}
#vp-speed-menu.open { display: block; }
.vp-speed-opt {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  padding: 8px 16px;
  cursor: pointer;
  font: 500 13px system-ui;
}
.vp-speed-opt:hover { background: rgba(255,255,255,.1); color: #fff; }
.vp-speed-opt.active { color: #60a5fa; font-weight: 700; }

/* ── Full-body text modal (Citeste tot) ── */
#vp-body-modal {
  position: absolute;
  inset: 0;
  z-index: 11;
  background: rgba(0,0,0,.88);
  display: none;
  flex-direction: column;
  padding: 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#vp-body-modal.open { display: flex; }
#vp-body-modal-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  margin-bottom: 10px;
}
#vp-body-modal-text {
  font: 400 15px/1.65 system-ui;
  color: rgba(255,255,255,.92);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Swipe hint (next/prev) ── */
.vp-swipe-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  font: 500 12px system-ui;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
#vp-hint-up { top: 20%; left: 50%; transform: translateX(-50%); }
#vp-hint-down { top: 80%; left: 50%; transform: translateX(-50%); }
.vp-swipe-hint.show { opacity: 1; }

/* ── Autoplay in feed: video starts muted when entering viewport ── */
.fb-feed-video[data-vp-playing] { cursor: pointer; }

/* ── Feed video wrap — tap anywhere to open fullscreen ── */
.media-video-wrap { position: relative; cursor: pointer; }

/* ── Responsive ── */
@media (max-width: 600px) {
  #vp-top-body-text { max-width: 160px; }
  .vp-act-btn { font-size: 13px; gap: 5px; }
}