/* Font Definitions */
@font-face {
 font-family: 'poppins';
 src: url('../webfonts/poppins-regular.woff2') format('woff2'),
  url('../webfonts/poppins-regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

/* Root Variables */
:root {
 --plyr-color-main: #e50914;
}

/* Base Styles */
body {
 font-family: 'poppins', sans-serif !important;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}

::-webkit-scrollbar-track {
 background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
 background: #e53935;
 border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
 background: #c62828;
}

/* Focus Styles */
button:focus,
input:focus {
 outline: 2px solid #e53935;
 outline-offset: 2px;
}

/* Transition Classes */
.transition-all {
 transition-property: all;
 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 transition-duration: 200ms;
}

/* Badge Styles */
.badge {
 @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.badge-red {
 @apply bg-red-900/50 text-red-300;
}

.badge-blue {
 @apply bg-blue-900/50 text-blue-300;
}

.badge-green {
 @apply bg-green-900/50 text-green-300;
}

.badge-yellow {
 @apply bg-yellow-900/50 text-yellow-300;
}

.badge-purple {
 @apply bg-purple-900/50 text-purple-300;
}

.badge-pink {
 @apply bg-pink-900/50 text-pink-300;
}

.badge-gray {
 @apply bg-gray-700 text-gray-300;
}

/* Text Colors */
.text-gray-300 {
 color: #d1d5db;
}

.text-gray-400 {
 color: #9ca3af;
}

/* Animation Keyframes */
@keyframes shimmer {
 0% {
  background-position: -1000px 0;
 }
 
 100% {
  background-position: 1000px 0;
 }
}

@keyframes bounce {
 
 0%,
 20%,
 50%,
 80%,
 100% {
  transform: translateY(0);
 }
 
 40% {
  transform: translateY(-10px);
 }
 
 60% {
  transform: translateY(-5px);
 }
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

/* Component Styles */
.shimmer {
 animation: shimmer 2s infinite linear;
 background: linear-gradient(to right, #1a1a1a 8%, #2a2a2a 18%, #1a1a1a 33%);
 background-size: 1000px 100%;
}

.empty-state {
 background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
 border: 1px dashed #333;
}

.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
 opacity: 0;
 transform: translateY(-10px);
}

.share-option {
 transition: transform 0.2s, background-color 0.2s;
}

.share-option:hover {
 transform: translateY(-2px);
}

.copy-input {
 -webkit-user-select: all;
 -moz-user-select: all;
 -ms-user-select: all;
 user-select: all;
}

.back-to-top {
 animation: bounce 2s infinite;
}

.spinner {
 width: 50px;
 height: 50px;
 border: 5px solid rgba(229, 57, 53, 0.2);
 border-radius: 50%;
 border-top-color: #e53935;
 animation: spin 1s ease-in-out infinite;
 margin: 0 auto;
}

.content-card {
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.ad-container {
 background: linear-gradient(135deg, #0a0a0a 0%, #111 100%);
}

/* Responsive Styles */
@media (max-width: 640px) {
 .hero-section {
  height: auto;
  min-height: 60vh;
 }
 
 .content-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 
 .text-xl {
  font-size: 1.25rem;
 }
 
 .video-info-grid {
  grid-template-columns: 1fr;
 }
 
 .video-actions {
  flex-direction: column;
  gap: 0.5rem;
 }
 
 .video-actions button {
  width: 100%;
 }
}

@media (max-width: 768px) {
 .main-content {
  padding: 1rem;
 }
 
 .header-buttons {
  gap: 0.25rem;
 }
 
 .header-buttons button {
  padding: 0.5rem;
 }
}

@media (min-width: 1024px) {
 .content-grid {
  grid-template-columns: repeat(5, 1fr);
 }
}

/* error page */
.error-illustration {
 filter: drop-shadow(0 0 15px rgba(229, 57, 53, 0.5));
}