/* ===== GBPStream v4.0 - Estilos Cinematográficos ===== */

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d4af37; }

/* Video Card Hover Effects */
.video-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
}
.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}
.video-card:hover .play-overlay {
  opacity: 1;
  transform: scale(1);
}

/* Video Thumbnail */
.video-thumbnail {
  position: relative;
  overflow: hidden;
}
.video-thumbnail img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
}
.play-overlay i {
  font-size: 3rem;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Category Badge */
.category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.category-badge.free { background: rgba(34, 197, 94, 0.9); color: #000; }
.category-badge.silver { background: rgba(192, 192, 192, 0.9); color: #000; }
.category-badge.golden { background: linear-gradient(135deg, #d4af37, #b89628); color: #000; }
.category-badge.platinum { 
  background: linear-gradient(135deg, #e5e4e2, #fff); 
  color: #000;
  border: 1px solid rgba(255,255,255,0.3);
}

/* Progress Bar for Watched Videos */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #d4af37;
  border-radius: 0 0 0 2px;
  transition: width 0.3s ease;
}

/* Player Custom Controls */
.custom-player {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}
.custom-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.player-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.custom-player:hover .player-controls,
.custom-player.paused .player-controls {
  opacity: 1;
}
.progress-slider {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
}
.progress-filled {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #d4af37;
  border-radius: 2px;
  pointer-events: none;
}
.progress-slider:hover .progress-filled {
  background: #b89628;
}

/* Cinema Mode */
body.cinema-mode {
  overflow: hidden;
}
body.cinema-mode .header,
body.cinema-mode footer,
body.cinema-mode .custom-player .player-controls {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.cinema-mode .custom-player:hover .player-controls {
  opacity: 1;
  pointer-events: auto;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Notification Styles */
.notification {
  min-width: 300px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #1a1a1a;
  border-left: 4px solid #d4af37;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.notification.success { border-left-color: #22c55e; }
.notification.error { border-left-color: #ef4444; }
.notification.warning { border-left-color: #f59e0b; }
.notification.info { border-left-color: #3b82f6; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Focus States for Accessibility */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

/* Reduce Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-smooth { scroll-behavior: auto; }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .video-card-title {
    -webkit-line-clamp: 2;
  }
  .player-controls {
    padding: 12px;
  }
  .play-overlay i {
    font-size: 2.5rem;
  }
}

/* Print Styles */
@media print {
  .header, footer, .player-controls, .notification-container {
    display: none !important;
  }
}