/* ==========================================================================
   Widget Video Styles (Theme-aware: Light & Dark)
   ========================================================================== */

.widget-video {
  position: fixed;
  left: 24px;
  bottom: 24px;
  align-items: center;
  justify-content: center;
  z-index: 995;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.widget-video.ready {
  opacity: 1;
}

.widget-video.mini {
  left: 16px;
  bottom: 16px;
}

.widget-video.full-descope {
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  z-index: 2000;
}

.widget-video.full-descope .video {
  width: 420px;
  height: 600px;
  max-width: 90vw;
  max-height: 85vh;
  transition: transform .25s ease, width .3s ease, height .3s ease, border-color .25s ease, box-shadow .25s ease;
}

.widget-video.full-mobile {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.widget-video.full-mobile .video {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  transition: transform .25s ease, width .3s ease, height .3s ease, border-color .25s ease, box-shadow .25s ease;
}

.widget-video .drag-and-drop {
  display: none;
}

/* Video Container Card */
.widget-video .video {
  width: 136px;
  height: 190px;
  overflow: hidden;
  background: var(--bg-card, #1f1f1f);
  border: 2px solid var(--gold-border, rgba(229, 195, 122, 0.35));
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 10px 30px var(--shadow-color, rgba(0, 0, 0, 0.5)), 0 0 15px var(--gold-glow, rgba(229, 195, 122, 0.15));
  transition: transform .25s ease, width .3s ease, height .3s ease, border-color .25s ease, box-shadow .25s ease;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.widget-video .video:hover {
  border-color: var(--border-hover, rgba(229, 195, 122, 0.6));
  box-shadow: 0 12px 35px var(--shadow-color, rgba(0, 0, 0, 0.55)), 0 0 20px var(--gold-glow, rgba(229, 195, 122, 0.25));
}

.widget-video .video.full {
  width: 290px;
  height: 510px;
  border-color: var(--gold-border, rgba(229, 195, 122, 0.45));
}

.widget-video.mini .video {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full, 9999px);
  border-color: var(--gold-border, rgba(229, 195, 122, 0.4));
}

.widget-video.mini .video .close,
.widget-video.mini .video .btn-social {
  display: none !important;
}

.widget-video .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Timeline & Time */
.widget-video .video .timeline {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--gold-text, #E5C37A);
  height: 3px;
  z-index: 10;
  width: 0;
  box-shadow: 0 0 8px var(--gold-text, #E5C37A);
  display: none;
}

.widget-video .video .time {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-heading, sans-serif);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10;
  display: none;
}

/* Control Buttons (Toolbar) */
.widget-video .video .close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.widget-video.full-descope .video .close,
.widget-video.full-mobile .video .close,
.widget-video .video.full .close {
  display: flex;
  align-items: center;
  gap: 6px;
}

.widget-video:hover .video .close,
.widget-video.full-descope .video .close,
.widget-video.full-mobile .video .close {
  opacity: 1;
}

/* Action Button Pills */
.widget-video .video .close .action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg, rgba(26, 26, 26, 0.75));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  color: var(--text-main, #ffffff);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
  user-select: none;
  text-decoration: none;
}

.widget-video .video .close .action-btn:hover {
  background: var(--bg-card-hover, #262626);
  border-color: var(--gold-text, #E5C37A);
  color: var(--gold-text, #E5C37A);
  transform: scale(1.08);
}

.widget-video .video .close .action-btn:active {
  transform: scale(0.95);
}

.widget-video .video .close .action-btn.btn-remove:hover {
  border-color: var(--accent-crimson, #ef4444);
  color: var(--accent-crimson, #ef4444);
}

.widget-video .video .close .action-btn.btn-down:hover {
  border-color: var(--accent-green, #34d399);
  color: var(--accent-green, #34d399);
}

/* Mobile full mode overrides */
.widget-video.full-mobile .video .close {
  top: 16px;
  right: 16px;
  gap: 10px;
}

.widget-video.full-mobile .video .close .action-btn {
  width: 40px;
  height: 40px;
  font-size: 22px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .widget-video {
    left: 12px;
    bottom: 12px;
  }

  .widget-video.mini {
    left: 10px;
    bottom: 10px;
  }

  .widget-video .video {
    width: 90px;
    height: 140px;
  }

  .widget-video .video.full {
    width: 210px;
    height: 370px;
  }

  .widget-video.mini .video {
    width: 54px;
    height: 54px;
  }

  .widget-video .video .close .action-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}