/* AIRFLIX - Main Stylesheet */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #090909;
    --bg-secondary: #141414;
    --bg-card: #1f1f1f;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --accent-primary: #3b82f6;
    --accent-secondary: #2563eb;
    --accent-hover: #60a5fa;
    --border-color: #2a2a2a;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-success: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    
    /* Font families */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 400;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Buttons */
.btn {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
}

.btn-primary, .btn-play {
    font-weight: 600;
}

/* Navigation */
.navbar {
    background: linear-gradient(180deg, rgba(9,9,9,0.95) 0%, rgba(20,20,20,0.9) 100%);
    backdrop-filter: blur(20px);
    padding: 1rem 0;
    position: relative;
    width: 100%;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.navbar.scrolled {
    background: rgba(9,9,9,0.98);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.navbar-brand {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.navbar-nav .nav-link {
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--text-primary) !important;
    margin: 0 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--accent-primary) !important;
}

/* Combined Search Bar - Tabler Style */
.search-group {
    position: relative;
    min-width: 300px;
}

/* Tabler-style rounded form control */
.search-group .form-control-rounded {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    padding-right: 3rem;
    border-radius: 10rem;
    font-size: 0.875rem;
    height: 2.5rem;
    transition: all 0.3s ease;
}

.search-group .form-control-rounded:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.search-group .form-control-rounded::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.search-group .btn-search {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gradient-primary);
    border: none;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.875rem;
}

.search-group .btn-search:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Auth Buttons */
.auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-buttons .btn {
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-buttons .btn-outline-light {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.auth-buttons .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.auth-buttons .btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    color: #000;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.auth-buttons .btn-warning:hover {
    background: linear-gradient(135deg, #ffca2c 0%, #ffa726 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.5);
    color: #000;
}

/* Mobile responsive auth buttons */
@media (max-width: 768px) {
    .auth-buttons {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .auth-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

.auth-buttons .btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.auth-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* User Dropdown Menu */
#userDropdown {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

#userDropdown:hover {
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-menu-dark {
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 0.5rem;
    min-width: 200px;
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.2);
    color: white;
    padding: 0.6rem 1rem; /* Keep same padding on hover */
}

.dropdown-menu-dark .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 0;
}

/* Old search form styles for backwards compatibility */
.search-form {
    display: none; /* Hide old search form */
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.search-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

/* Hero Carousel */
.hero-section {
    margin-top: 0;
    position: relative;
    max-height: 600px;
    overflow: hidden;
}

.hero-section .carousel-item {
    height: auto;
    min-height: 400px;
}

.carousel {
    height: 100%;
}

.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%;
    position: relative;
}

.carousel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(9,9,9,0.9) 0%, rgba(9,9,9,0.5) 50%, rgba(9,9,9,0.2) 100%);
    z-index: 1;
}

.carousel-item img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
}

.carousel-caption {
    position: absolute;
    left: 5%;
    bottom: 20%;
    text-align: left;
    z-index: 5; /* Higher than hero link but below controls */
    max-width: 600px;
    max-height: 50%; /* Limit height to prevent overflow */
    pointer-events: none; /* Allow clicks to pass through to hero image */
    overflow: hidden; /* Hide overflow text */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.carousel-caption h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    flex-shrink: 0; /* Keep title visible */
}

.carousel-caption h1 a {
    pointer-events: auto; /* Re-enable clicks for title link */
}

.carousel-caption .btn-play {
    pointer-events: auto !important; /* Force button to be clickable */
    position: relative;
    z-index: 100; /* Very high to ensure clickability */
    flex-shrink: 0; /* Keep button visible */
    width: fit-content !important; /* Force content width */
    max-width: fit-content !important; /* Prevent expansion */
    align-self: flex-start; /* Align to start, not stretch */
}

.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    overflow: hidden; /* Hide overflow text */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    line-height: 1.4;
    flex-shrink: 1; /* Allow this to shrink if needed */
}


/* Hero link styles */
.hero-link {
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 1; /* Below carousel controls */
    pointer-events: auto;
}

/* Hero link takes full width */
.carousel-item .hero-link {
    margin: 0; /* Full width, no margins */
    width: 100%;
}

.hero-link:hover img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* Carousel control styles - Force display on all screens first */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next,
.carousel-control-prev,
.carousel-control-next {
    display: flex !important; /* Force display */
    align-items: center;
    z-index: 1000 !important; /* Very high z-index - above everything including images */
    pointer-events: all !important;
    width: 80px; /* Wider for better click area */
    height: 100%; /* Full height */
    border: none;
    opacity: 0.7; /* More visible */
    transition: all 0.3s ease;
    position: absolute;
    top: 0;
}

#heroCarousel .carousel-control-prev,
.carousel-control-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 20px;
    background: linear-gradient(to right, rgba(0,0,0,0.2), transparent);
}

#heroCarousel .carousel-control-next,
.carousel-control-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 20px;
    background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
}

.carousel-control-prev:hover,
.carousel-control-next:hover,
#heroCarousel .carousel-control-prev:hover,
#heroCarousel .carousel-control-next:hover {
    opacity: 1;
    background: linear-gradient(to right, rgba(0,0,0,0.5), transparent);
}

#heroCarousel .carousel-control-next:hover {
    background: linear-gradient(to left, rgba(0,0,0,0.5), transparent);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%;
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 0 5px rgba(0,0,0,1));
}

/* Hide carousel arrows ONLY on mobile (below 768px) */
@media screen and (max-width: 767px) {
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next,
    .carousel-control-prev,
    .carousel-control-next {
        display: none !important; /* Hide on mobile */
    }
}

.carousel-indicators {
    z-index: 10; /* Above hero link */
    pointer-events: auto;
}

.carousel-indicators button {
    pointer-events: auto;
}

.btn-play {
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 1.2rem !important;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: fit-content !important; /* Force content width */
    max-width: none !important; /* Don't stretch */
    min-width: auto !important; /* Allow natural sizing */
    white-space: nowrap; /* Prevent text wrapping */
    flex: 0 0 auto !important; /* Don't grow or shrink */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
    pointer-events: auto !important; /* Force button to be clickable */
    z-index: 6; /* Above caption */
}

.btn-play::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
    pointer-events: none;
    z-index: -1;
}

.btn-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
    color: white;
}

.btn-play:hover::before {
    left: 100%;
}

/* Video Grid */
.video-section {
    padding: 30px 0 0 0;
    overflow: visible !important; /* Ensure carousel buttons aren't clipped */
}

.video-section .container {
    overflow: visible !important; /* Ensure carousel buttons aren't clipped */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ================================================================================
   STANDARDIZED CAROUSEL SYSTEM
   Reusable carousel component for video grids throughout the site
   
   Usage:
   <div class="carousel-section">
       <button class="carousel-btn carousel-btn-prev">‹</button>
       <button class="carousel-btn carousel-btn-next">›</button>
       <div class="carousel-scroll-container">
           <div class="carousel-items d-flex gap-3">
               <!-- Your items here -->
           </div>
       </div>
   </div>
   ================================================================================ */

/* Main carousel container */
.carousel-section {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: visible; /* Allow buttons to extend outside */
}

/* Elastic effect when carousel reaches boundary */
.carousel-elastic .carousel-scroll-container {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.carousel-elastic .carousel-btn {
    animation: pulse 0.5s ease-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* Scrollable container */
.carousel-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Items container - Works with cf_videoThumbnail */
.carousel-items {
    display: flex;
    gap: 15px;
    padding: 10px 0;
}

/* Navigation Buttons - Round Style */
.carousel-btn {
    position: absolute;
    top: 35%; /* Centered on thumbnail image area */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
}

/* Show buttons on hover */
.carousel-section:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn-prev {
    left: 10px; /* Position inside container to overlap thumbnail */
}

.carousel-btn-next {
    right: 10px; /* Position inside container to overlap thumbnail */
}

/* At boundary state (replaces disabled) */
.carousel-btn.at-boundary {
    opacity: 0.3;
}

/* Enhanced elastic feedback animation */
@keyframes elasticBounce {
    0% { transform: translateY(-50%) scale(1); }
    30% { transform: translateY(-50%) scale(1.15); }
    60% { transform: translateY(-50%) scale(0.95); }
    100% { transform: translateY(-50%) scale(1); }
}

/* Optional: Add a subtle glow effect during elastic bounce */
.carousel-btn.elastic-active {
    animation: elasticBounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}

.carousel-btn.at-boundary:hover {
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
}

/* Hide buttons on mobile */
@media (max-width: 768px) {
    .carousel-btn {
        display: none;
    }
}

/* Standardized Page Headlines for Frontend */
.page-headline {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0;
    line-height: 1.2;
}

.page-headline-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    width: 100%;
}

.page-headline-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-headline {
        font-size: 1.5rem;
    }
    
    .page-headline-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* View All Button */
.section-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.section-header .btn-primary {
    background: var(--accent-primary);
    color: white;
    border: 1px solid var(--accent-primary);
}

.section-header .btn-primary:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    transform: translateX(2px);
}

.section-header .btn-sm {
    padding: 5px 10px;
    font-size: 0.8125rem;
}

.section-header .btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Video Card */
.video-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards fill their container height */
}

.video-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
    border-color: rgba(59, 130, 246, 0.3);
}

.video-card a {
    text-decoration: none;
    color: inherit;
}

.thumbnail-wrapper {
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    overflow: hidden;
    aspect-ratio: 16/9;
    width: 100%;
}

.thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Removed image scale transform on hover */

.duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Badge container for multiple badges */
.badge-container {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.video-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Make badges slightly more opaque on hover */
.video-card:hover .video-badge {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.5);
}

.video-card:hover .badge-exclusive {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.95) 0%, rgba(245, 87, 108, 0.95) 100%);
    box-shadow: 0 3px 12px rgba(240, 147, 251, 0.5);
}

.video-card:hover .badge-rare-footage {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.95) 0%, rgba(0, 242, 254, 0.95) 100%);
    box-shadow: 0 3px 12px rgba(79, 172, 254, 0.5);
}

.video-card:hover .badge-historic {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.95) 0%, rgba(56, 249, 215, 0.95) 100%);
    box-shadow: 0 3px 12px rgba(67, 233, 123, 0.5);
}

.video-card:hover .badge-popular {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.95) 0%, rgba(247, 147, 30, 0.95) 100%);
    box-shadow: 0 3px 12px rgba(255, 107, 53, 0.5);
}

.badge-new {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
    backdrop-filter: blur(8px);
}

.badge-exclusive {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.85) 0%, rgba(245, 87, 108, 0.85) 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(240, 147, 251, 0.4);
    backdrop-filter: blur(8px);
}

.badge-rare-footage {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.85) 0%, rgba(0, 242, 254, 0.85) 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(79, 172, 254, 0.4);
    backdrop-filter: blur(8px);
}

.badge-historic {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.85) 0%, rgba(56, 249, 215, 0.85) 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(67, 233, 123, 0.4);
    backdrop-filter: blur(8px);
}

/* Most Popular Ribbon */
.badge-popular {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.85) 0%, rgba(247, 147, 30, 0.85) 100%);
    color: white;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.4);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.badge-popular::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.video-card:hover .badge-popular::before {
    left: 100%;
}

/* Popular Ribbon - positioned in top right corner */
.popular-ribbon {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    padding: 6px 16px 6px 20px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 70%, 85% 100%, 0% 100%, 0% 30%);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
    z-index: 3;
    animation: ribbonShine 3s ease-in-out infinite;
}

@keyframes ribbonShine {
    0%, 100% { box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); }
    50% { box-shadow: 0 4px 16px rgba(255, 107, 53, 0.7); }
}

.video-info {
    padding: 1rem;
    margin-top: auto; /* Push to bottom of flex container */
}

.video-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.video-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.5rem;
}

.video-meta span {
    display: flex;
    align-items: center;
}

/* Video Player Page */
.player-container {
    margin-top: 80px;
    background: #000;
}

.video-js {
    width: 100%;
    height: 70vh;
    max-height: 800px;
}

.video-details {
    padding: 2rem 0;
}

.video-details h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.video-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tag-chip {
    background: rgba(255,255,255,0.1);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.tag-chip:hover {
    background: var(--accent-primary);
    color: white;
}

.video-description {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

/* Browse Page */
.filters-section {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.filter-group {
    margin-bottom: 1rem;
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.filter-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    width: 100%;
}

/* Related Videos Sidebar */
.related-videos {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
}

.related-video-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    transition: opacity 0.3s ease;
}

.related-video-item:hover {
    opacity: 0.8;
}

.related-video-thumb {
    width: 120px;
    height: 68px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-video-info h6 {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.related-video-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Pricing Section */
.pricing-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

.pricing-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
}

.pricing-card.featured,
.pricing-card.recommended {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

.pricing-card.featured:hover,
.pricing-card.recommended:hover {
    transform: scale(1.05) translateY(-10px);
}

.popular-badge,
.recommended-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 1;
}

/* Most Popular Ribbon for Pricing Plans */
.most-popular-ribbon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    padding: 8px 24px 8px 32px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    clip-path: polygon(20% 0%, 100% 0%, 100% 65%, 85% 100%, 0% 100%, 0% 35%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
    z-index: 5;
    animation: popularPulse 2.5s ease-in-out infinite;
    transform: rotate(5deg);
}

@keyframes popularPulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
        transform: rotate(5deg) scale(1);
    }
    50% { 
        box-shadow: 0 6px 20px rgba(255, 107, 53, 0.7);
        transform: rotate(5deg) scale(1.05);
    }
}

.pricing-card.recommended .most-popular-ribbon {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.pricing-card .card-header {
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-name {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.price-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 1rem;
}

.currency {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    margin-right: 5px;
}

.price {
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
}

.period {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-left: 5px;
}

.plan-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
}

.pricing-card .card-body {
    padding: 2rem;
    flex: 1;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.features-list i {
    font-size: 1.1rem;
}

.pricing-card .card-footer {
    padding: 2rem;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trial-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.price .cents {
    font-size: 1.2rem;
    vertical-align: top;
}

.btn-glow {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.btn-glow:hover::before {
    left: 100%;
}

.btn-glow:hover {
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.5);
}

/* Policy Pages */
.page-header {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    padding: 120px 0 80px;
    margin-top: 70px;
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
}

.policy-content {
    background: var(--bg-primary);
}

.policy-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.policy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(59, 130, 246, 0.3);
}

.policy-card .card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.policy-card .card-icon i {
    font-size: 1.5rem;
}

.policy-card h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.policy-card h5, .policy-card h6 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.policy-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.policy-list {
    color: rgba(255, 255, 255, 0.8);
    padding-left: 1.5rem;
}

.policy-list li {
    margin-bottom: 0.5rem;
}

.cookie-type {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-primary);
}

.cookie-examples {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.cookie-examples .badge {
    font-size: 0.75rem;
    font-weight: 500;
}

.third-party-service {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
    transition: all 0.3s ease;
}

.third-party-service:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.third-party-service h6 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.browser-list {
    color: rgba(255, 255, 255, 0.8);
    padding-left: 1.5rem;
}

.browser-list li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.cookie-controls {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cookie-controls h6 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.impact-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
}

.impact-negative {
    border-left: 4px solid #dc3545;
}

.impact-positive {
    border-left: 4px solid #28a745;
}

.impact-card h6 {
    margin-bottom: 1rem;
}

.impact-card ul {
    color: rgba(255, 255, 255, 0.7);
    padding-left: 1.2rem;
    margin: 0;
}

.impact-card li {
    margin-bottom: 0.5rem;
}

.contact-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.contact-method {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.contact-method i {
    margin-right: 0.5rem;
}

.policy-links h6 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Footer */
footer {
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    padding: 2rem 0 1.5rem;
    margin-top: 4rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-link:hover {
    color: var(--accent-primary) !important;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--accent-primary) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
}

/* Trailers Section */
.trailers-section {
    background: linear-gradient(135deg, rgba(23, 23, 23, 0.95) 0%, rgba(12, 12, 12, 0.95) 100%);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.trailer-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.trailer-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.trailer-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #333;
}

.trailer-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.trailer-card:hover .trailer-thumbnail img {
    transform: scale(1.05);
}

.placeholder-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(45deg, #333, #444);
    font-size: 3rem;
    color: var(--text-secondary);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.trailer-card:hover .play-overlay {
    opacity: 1;
}

.play-button {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.1);
}

.trailer-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}

.trailer-info {
    padding: 1rem;
}

.trailer-title {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* Trailer Modal */
.trailer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.trailer-modal.active {
    opacity: 1;
    visibility: visible;
}

.trailer-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.trailer-modal video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: 8px;
}

.trailer-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10000;
}

.trailer-modal-title {
    position: absolute;
    bottom: -40px;
    left: 0;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Pagination */
.pagination {
    justify-content: center;
    margin-top: 3rem;
}

.pagination .page-link {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
}

.pagination .page-link:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.pagination .page-item.active .page-link {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .carousel-caption {
        max-height: 40%; /* Less height on mobile */
        bottom: 10%; /* Move closer to bottom */
    }
    
    .carousel-caption h1 {
        font-size: 2rem;
    }
    
    .carousel-caption p {
        font-size: 1rem;
        -webkit-line-clamp: 2; /* Only 2 lines on mobile */
    }
    
    .hero-section {
        max-height: 400px;
    }
    
    .hero-section .carousel-item {
        min-height: 300px;
    }
    
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .search-form input {
        width: 150px;
    }
    
    .search-form input:focus {
        width: 200px;
    }
    
    .pricing-card .card-header,
    .pricing-card .card-body,
    .pricing-card .card-footer {
        padding: 1.5rem;
    }
    
    .price {
        font-size: 2.5rem !important;
    }
    
    .plan-name {
        font-size: 1.25rem !important;
    }
    
    /* Policy page mobile styles */
    .page-header {
        padding: 100px 0 60px;
    }
    
    .page-header h1 {
        font-size: 2.5rem;
    }
    
    .policy-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .policy-card .card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }
    
    .policy-card .card-icon i {
        font-size: 1.25rem;
    }
    
    .policy-card h3 {
        font-size: 1.25rem;
    }
    
    .cookie-type,
    .cookie-controls,
    .contact-info {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .navbar-brand {
        font-size: 1.4rem;
    }
    
    .video-js {
        height: 40vh;
    }
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: var(--accent-primary);
    animation: spin 1s ease-in-out infinite;
}

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

/* Glow Effects - Smooth blended gradient */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 80px rgba(59, 130, 246, 0.6),
                    0 0 120px rgba(139, 92, 246, 0.4),
                    0 0 160px rgba(34, 211, 238, 0.3),
                    0 0 200px rgba(168, 85, 247, 0.2),
                    inset 0 0 60px rgba(59, 130, 246, 0.1);
        filter: blur(0.5px);
    }
    25% {
        box-shadow: 0 0 90px rgba(139, 92, 246, 0.6),
                    0 0 130px rgba(34, 211, 238, 0.4),
                    0 0 170px rgba(168, 85, 247, 0.3),
                    0 0 210px rgba(59, 130, 246, 0.2),
                    inset 0 0 70px rgba(139, 92, 246, 0.1);
        filter: blur(0.8px);
    }
    50% {
        box-shadow: 0 0 100px rgba(34, 211, 238, 0.6),
                    0 0 140px rgba(168, 85, 247, 0.4),
                    0 0 180px rgba(59, 130, 246, 0.3),
                    0 0 220px rgba(139, 92, 246, 0.2),
                    inset 0 0 80px rgba(34, 211, 238, 0.1);
        filter: blur(1px);
    }
    75% {
        box-shadow: 0 0 90px rgba(168, 85, 247, 0.6),
                    0 0 130px rgba(59, 130, 246, 0.4),
                    0 0 170px rgba(139, 92, 246, 0.3),
                    0 0 210px rgba(34, 211, 238, 0.2),
                    inset 0 0 70px rgba(168, 85, 247, 0.1);
        filter: blur(0.8px);
    }
}

/* Gradient Animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-section {
    background: linear-gradient(-45deg, #090909, #141414, #1f1f1f, #2a2a2a);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Pulse Animation for New Badge */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.badge-new {
    animation: pulse 2s infinite;
}

/* Hover Glow for Featured Items */
.carousel-item:hover img {
    filter: brightness(1.1);
    transition: filter 0.3s ease;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* Video Carousel */
.video-carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.carousel-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Enhanced carousel bounce animation for end-reached indication */
.carousel-bounce {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Subtle red ring effect for navigation buttons when hitting boundary */
.carousel-nav.bounce-pulse {
    animation: subtleRedRing 0.4s ease-out;
}

@keyframes subtleRedRing {
    0% { 
        transform: translateY(-50%);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    }
    50% { 
        transform: translateY(-50%);
        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.6), 0 4px 15px rgba(0, 0, 0, 0.7);
    }
    100% { 
        transform: translateY(-50%);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    }
}

.carousel-items {
    display: flex;
    gap: 1.5rem;
    padding: 0 1rem;
}

.carousel-nav {
    position: absolute;
    top: 90px !important;  /* Center on thumbnail area - roughly middle of 16:9 thumbnail */
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.carousel-nav:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-prev {
    left: 10px;
}

.carousel-nav-next {
    right: 10px;
}

.carousel-nav svg {
    width: 20px;
    height: 20px;
}

/* =================================================================
   Carousel Navigation Button Vertical Positioning
   =================================================================
   The navigation buttons are intentionally positioned to align with 
   the video thumbnail images rather than the entire card height.
   
   Since video thumbnails use a 16:9 aspect ratio:
   - At ~200px card width, thumbnails are ~112px tall
   - Buttons at 90px from top = centered on thumbnail (ignoring text below)
   - This creates better visual balance and draws focus to the video content
   
   Without this adjustment, buttons would center on the full card height,
   appearing too low and overlapping with the video title/metadata area.
   ================================================================= */
.video-carousel-container .carousel-nav,
.video-carousel-container .carousel-nav-prev,
.video-carousel-container .carousel-nav-next {
    top: 90px !important;  /* Center on thumbnail area */
}

/* =================================================================
   PREMIUM CONTENT STYLES
   Added for exclusive/premium content display
   ================================================================= */

/* Badge Container System - Handles multiple badges */
.video-badges-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
    max-width: calc(100% - 20px);
}

/* Alternative: Horizontal badge layout */
.video-badges-container.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Base badge styles */
.video-badge-item {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    line-height: 1.2;
}

/* Premium Badge Specific */
.video-badge-premium {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
}

/* Ensure all badge icons use Bootstrap Icons font */
.video-badge-item i.bi {
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    vertical-align: text-bottom;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix alignment for icon and text in badges */
.video-badge-item span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* Premium badge specific icon */
.video-badge-premium i.bi-crown-fill {
    font-size: 0.9rem;
    font-family: 'bootstrap-icons' !important;
    position: relative;
    top: -2px;
    margin-right: 2px;
}

/* Specific crown icon for premium badge */
.video-badge-premium i.bi-crown-fill::before {
    content: "\F2DC";
    font-family: 'bootstrap-icons' !important;
}

/* Fallback if Bootstrap Icons don't load */
.video-badge-premium i.bi-crown-fill:empty::before {
    content: "♛";
    font-family: Arial, sans-serif;
    font-size: 1rem;
}

/* New Badge */
.video-badge-new {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.video-badge-new i {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Exclusive Badge */
.video-badge-exclusive {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
}

.video-badge-exclusive i {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Popular Badge */
.video-badge-popular {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.video-badge-popular i {
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* HD/4K Quality Badges */
.video-badge-hd {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.7rem;
}

.video-badge-4k {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    font-size: 0.7rem;
}

/* Coming Soon Badge */
.video-badge-coming-soon {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
}

/* Limited Time Badge */
.video-badge-limited {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-badges-container {
        top: 5px;
        left: 5px;
        gap: 4px;
    }

    .video-badge-item {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
}

/* Legacy support - keep old premium-badge class working */
.premium-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 10;
}

/* Premium Lock Overlay for non-subscribers */
.premium-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
    cursor: pointer;
}

.video-card.is-premium:hover .premium-lock-overlay {
    opacity: 1;
}

.premium-lock-icon {
    font-size: 3rem;
    color: #FFD700;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.premium-lock-text {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.unlock-button {
    margin-top: 10px;
    padding: 6px 16px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
}

.unlock-button:hover {
    transform: scale(1.05);
}

/* Premium indicator in video title */
.video-title-premium {
    display: flex;
    align-items: center;
    gap: 6px;
}

.video-title-premium .crown-icon {
    color: #FFD700;
    font-size: 0.9rem;
}