/* NGOMA STREAM - Comprehensive Responsive Foundation
 * Netflix-inspired responsive design system
 * Mobile-first approach with extensive breakpoint coverage
 */

/* ============================================
   CORE RESPONSIVE SETTINGS
   ============================================ */

/* Force box-sizing on all elements */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* iPhone Safe Area Support */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Bottom navigation safe area */
    .mobile-bottom-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    
    /* Modal safe area */
    .modal-content-responsive, .ngoma-modal-content, .netflix-modal-content {
        margin-bottom: env(safe-area-inset-bottom);
    }
    
    /* Filter bar safe area on mobile */
    @media (max-width: 767px) {
        .ngoma-filter-bar {
            padding-bottom: calc(var(--spacing-responsive-md) + env(safe-area-inset-bottom));
        }
    }
    
    /* Hero section safe area */
    .hero-responsive {
        padding-top: calc(var(--spacing-responsive-xl) + env(safe-area-inset-top));
    }
    
    /* Page content safe area */
    .ngoma-content-page {
        padding-top: calc(72px + env(safe-area-inset-top));
        padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* Espace pour la navigation mobile et le footer */
    }
    .netflix-main {
        padding-top: 0 !important;
        padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* Espace pour la navigation mobile et le footer */
    }
}

/* Landscape orientation safe area handling */
@media (orientation: landscape) and (max-height: 500px) {
    @supports (padding: env(safe-area-inset-bottom)) {
        .mobile-bottom-nav {
            padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
        }
        
        .mobile-nav-label {
            display: none;
        }
        
        .mobile-nav-icon {
            margin-bottom: 0;
        }
    }
}

/* Notch support for hero sections */
@supports (padding: env(safe-area-inset-top)) {
    .ngoma-navbar, .netflix-navbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    
    .ngoma-nav-container, .netflix-nav-container {
        padding-top: 0;
    }
}

/* Safe area for modals on iPhones */
@supports (padding: env(safe-area-inset-bottom)) {
    .modal-responsive {
        padding: calc(var(--spacing-responsive-md) + env(safe-area-inset-top)) var(--spacing-responsive-md) calc(var(--spacing-responsive-md) + env(safe-area-inset-bottom));
    }
}

/* Prevent content from being hidden behind the notch */
.hero-content-responsive, .ngoma-hero-content {
    padding-top: env(safe-area-inset-top);
}

/* Safe area for video player controls */
@supports (padding: env(safe-area-inset-bottom)) {
    .video-controls-responsive {
        padding-bottom: calc(var(--spacing-responsive-md) + env(safe-area-inset-bottom));
    }
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

:root {
    /* Breakpoint values for reference */
    --breakpoint-mobile-xs: 320px;
    --breakpoint-mobile: 375px;
    --breakpoint-mobile-lg: 414px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 1024px;
    --breakpoint-desktop: 1440px;
    --breakpoint-desktop-lg: 1920px;
    
    /* Responsive spacing */
    --spacing-responsive-xs: clamp(8px, 2vw, 12px);
    --spacing-responsive-sm: clamp(12px, 3vw, 16px);
    --spacing-responsive-md: clamp(16px, 4vw, 24px);
    --spacing-responsive-lg: clamp(24px, 5vw, 32px);
    --spacing-responsive-xl: clamp(32px, 6vw, 48px);
    --spacing-responsive-2xl: clamp(48px, 8vw, 64px);
    
    /* Responsive typography */
    --font-responsive-xs: clamp(0.75rem, 2vw, 0.875rem);
    --font-responsive-sm: clamp(0.875rem, 2.5vw, 1rem);
    --font-responsive-base: clamp(1rem, 3vw, 1.125rem);
    --font-responsive-lg: clamp(1.125rem, 3.5vw, 1.25rem);
    --font-responsive-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-responsive-2xl: clamp(1.5rem, 5vw, 2rem);
    --font-responsive-3xl: clamp(2rem, 6vw, 2.5rem);
    --font-responsive-4xl: clamp(2.5rem, 7vw, 3.5rem);
    --font-responsive-5xl: clamp(3rem, 8vw, 4.5rem);
}

/* ============================================
   MOBILE BOTTOM NAVIGATION
   ============================================ */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 21, 40, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 126, 219, 0.22);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6);
    z-index: 9999;
    padding: env(safe-area-inset-bottom, 8px) 0 calc(8px + env(safe-area-inset-bottom, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

@media (max-width: 768px) {
    body {
        padding-bottom: 0px !important;
    }
    body.has-bottom-nav {
        padding-bottom: 95px !important;
    }
}

.mobile-bottom-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4px 2px;
    width: 100%;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #a89bc2;
    padding: 6px 2px;
    min-width: 0;
    flex: 1 1 0;
    max-width: 68px;
    transition: all 0.25s ease;
    position: relative;
}

.mobile-nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #fe4450, #ff7edb);
    box-shadow: 0 0 10px rgba(255, 126, 219, 0.7);
    transition: width 0.3s ease;
    border-radius: 0 0 4px 4px;
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
    color: #ff7edb;
    text-shadow: 0 0 12px rgba(255, 126, 219, 0.45);
}

.mobile-nav-item.active::after,
.mobile-nav-item:hover::after {
    width: 100%;
}

.mobile-nav-icon {
    font-size: 18px;
    margin-bottom: 3px;
    transition: transform 0.25s ease;
}

.mobile-bottom-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 3px;
    border: 1.5px solid rgba(255, 126, 219, 0.6);
}

.mobile-nav-item:hover .mobile-nav-icon,
.mobile-nav-item.active .mobile-nav-icon {
    transform: scale(1.15);
    color: #ff7edb;
}

.mobile-nav-label {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.1px;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

h1 {
    font-size: var(--font-responsive-5xl);
    line-height: 1.1;
    font-weight: 700;
}

h2 {
    font-size: var(--font-responsive-4xl);
    line-height: 1.2;
    font-weight: 700;
}

h3 {
    font-size: var(--font-responsive-3xl);
    line-height: 1.2;
    font-weight: 700;
}

h4 {
    font-size: var(--font-responsive-2xl);
    line-height: 1.3;
    font-weight: 600;
}

h5 {
    font-size: var(--font-responsive-xl);
    line-height: 1.4;
    font-weight: 600;
}

h6 {
    font-size: var(--font-responsive-lg);
    line-height: 1.4;
    font-weight: 600;
}

p, span, div, li, a, button {
    font-size: var(--font-responsive-base);
}

/* Enhanced responsive typography for specific elements */
.section-title {
    font-size: var(--font-responsive-2xl);
    font-weight: 700;
}

.card-title {
    font-size: var(--font-responsive-base);
    font-weight: 600;
}

.card-meta {
    font-size: var(--font-responsive-sm);
}

.hero-title {
    font-size: var(--font-responsive-5xl);
    font-weight: 800;
    line-height: 1.1;
}

.hero-description {
    font-size: var(--font-responsive-lg);
    line-height: 1.6;
}

/* Mobile-specific typography adjustments */
@media (max-width: 374px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
    
    .hero-title { font-size: 1.5rem; }
    .hero-description { font-size: 0.875rem; }
    .section-title { font-size: 1.25rem; }
}

@media (min-width: 375px) and (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    
    .hero-title { font-size: 2rem; }
    .hero-description { font-size: 1rem; }
    .section-title { font-size: 1.5rem; }
}

/* ============================================
   RESPONSIVE SPACING UTILITIES
   ============================================ */

.container-responsive {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 var(--spacing-responsive-md);
}

@media (min-width: 768px) {
    .container-responsive {
        padding: 0 var(--spacing-responsive-lg);
    }
}

@media (min-width: 1024px) {
    .container-responsive {
        padding: 0 var(--spacing-responsive-xl);
    }
}

/* ============================================
   RESPONSIVE GRID SYSTEM
   ============================================ */

.grid-responsive {
    display: grid;
    gap: var(--spacing-responsive-md);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

@media (min-width: 375px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (min-width: 480px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (min-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--spacing-responsive-lg);
    }
}

@media (min-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 1440px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (min-width: 1920px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* ============================================
   RESPONSIVE CAROUSELS
   ============================================ */

.carousel-responsive {
    display: flex;
    gap: var(--spacing-responsive-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--spacing-responsive-sm) 0;
}

.carousel-responsive::-webkit-scrollbar {
    display: none;
}

.carousel-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Mobile: 2 cards visible */
@media (max-width: 374px) {
    .carousel-card {
        width: calc(50% - var(--spacing-responsive-sm) / 2);
        min-width: 140px;
    }
}

/* Mobile: 2-3 cards visible */
@media (min-width: 375px) and (max-width: 767px) {
    .carousel-card {
        width: calc(45% - var(--spacing-responsive-sm) / 2);
        min-width: 160px;
    }
}

/* Tablet: 3-4 cards visible */
@media (min-width: 768px) and (max-width: 1023px) {
    .carousel-card {
        width: calc(30% - var(--spacing-responsive-sm) * 2 / 3);
        min-width: 200px;
    }
}

/* Laptop: 4-5 cards visible */
@media (min-width: 1024px) and (max-width: 1439px) {
    .carousel-card {
        width: calc(22% - var(--spacing-responsive-sm) * 3 / 4);
        min-width: 240px;
        max-width: 280px;
    }
}

/* Desktop: 5-6 cards visible */
@media (min-width: 1440px) and (max-width: 1919px) {
    .carousel-card {
        width: calc(18% - var(--spacing-responsive-sm) * 4 / 5);
        max-width: 280px;
    }
}

/* Large screen: 6-8 cards visible */
@media (min-width: 1920px) {
    .carousel-card {
        width: calc(15% - var(--spacing-responsive-sm) * 5 / 6);
        max-width: 280px;
    }
}

/* ============================================
   RESPONSIVE HERO SECTION
   ============================================ */

.hero-responsive {
    position: relative;
    min-height: 60vh;
    height: auto;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

@media (min-width: 375px) {
    .hero-responsive {
        min-height: 65vh;
    }
}

@media (min-width: 768px) {
    .hero-responsive {
        min-height: 75vh;
    }
}

@media (min-width: 1024px) {
    .hero-responsive {
        min-height: 85vh;
        max-height: 900px;
    }
}

.hero-content-responsive {
    padding: var(--spacing-responsive-xl);
    max-width: 100%;
}

@media (min-width: 768px) {
    .hero-content-responsive {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .hero-content-responsive {
        max-width: 700px;
    }
}

.hero-title-responsive {
    font-size: var(--font-responsive-3xl);
    margin-bottom: var(--spacing-responsive-sm);
}

@media (min-width: 480px) {
    .hero-title-responsive {
        font-size: var(--font-responsive-4xl);
    }
}

@media (min-width: 768px) {
    .hero-title-responsive {
        font-size: var(--font-responsive-5xl);
        margin-bottom: var(--spacing-responsive-md);
    }
}

.hero-description-responsive {
    font-size: var(--font-responsive-sm);
    line-height: 1.5;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 480px) {
    .hero-description-responsive {
        font-size: var(--font-responsive-base);
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (min-width: 768px) {
    .hero-description-responsive {
        font-size: var(--font-responsive-lg);
        max-width: 600px;
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}

.hero-buttons-responsive {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-responsive-sm);
    width: 100%;
}

@media (min-width: 480px) {
    .hero-buttons-responsive {
        flex-direction: row;
        width: auto;
    }
}

/* ============================================
   RESPONSIVE NAVIGATION
   ============================================ */

/* Hide desktop nav & top navbar login on mobile */
.desktop-nav,
.navbar-login-btn {
    display: none;
}

/* Show desktop nav on larger screens */
@media (min-width: 1024px) {
    .desktop-nav {
        display: flex;
    }
    
    .navbar-login-btn {
        display: inline-flex !important;
    }
    
    .mobile-bottom-nav {
        display: none;
    }
}

/* Show mobile bottom nav on mobile/tablet */
@media (max-width: 1023px) {
    .mobile-bottom-nav {
        display: block;
    }
    
    /* Add padding to main content to account for bottom nav and footer */
    .main-content {
        padding-bottom: 120px; /* Augmenté pour footer + navigation mobile */
    }
    
    .netflix-main {
        padding-bottom: 120px; /* Augmenté pour footer + navigation mobile */
    }
}

/* Mobile menu button */
.mobile-menu-toggle {
    display: block;
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

.card-responsive {
    width: 100%;
    transition: transform 0.3s ease;
}

.card-image-responsive {
    aspect-ratio: 2/3;
    width: 100%;
    object-fit: cover;
}

/* Poster ratio for mobile */
@media (max-width: 767px) {
    .card-image-responsive.poster {
        aspect-ratio: 2/3;
    }
    
    .card-image-responsive.backdrop {
        aspect-ratio: 16/9;
    }
}

/* ============================================
   RESPONSIVE MODALS
   ============================================ */

.modal-responsive {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-responsive-md);
}

.modal-content-responsive {
    background: var(--ngoma-dark-gray);
    border-radius: var(--ngoma-radius-lg);
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    width: calc(100% - 24px);
}

@media (min-width: 768px) {
    .modal-content-responsive {
        max-width: 600px;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .modal-content-responsive {
        max-width: 800px;
    }
}

/* Enhanced existing modal responsiveness */
.ngoma-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 4000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-responsive-md);
}

.ngoma-modal-content {
    background: var(--ngoma-dark-gray);
    border-radius: var(--ngoma-radius-lg);
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--ngoma-shadow-lg);
    animation: modalSlideIn 0.3s ease;
    width: calc(100% - 24px);
}

@media (min-width: 768px) {
    .ngoma-modal-content {
        max-width: 600px;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .ngoma-modal-content {
        max-width: 900px;
    }
}

.netflix-modal {
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: auto;
    padding: var(--spacing-responsive-md);
}

.netflix-modal-content {
    background-color: var(--netflix-dark-gray);
    margin: 5% auto;
    max-width: 100%;
    border-radius: 8px;
    position: relative;
    animation: modalSlideIn 0.3s ease;
    width: calc(100% - 24px);
}

@media (min-width: 768px) {
    .netflix-modal-content {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .netflix-modal-content {
        max-width: 900px;
    }
}

/* Modal close button responsive */
.ngoma-modal-close, .modal-close {
    position: absolute;
    top: var(--spacing-responsive-md);
    right: var(--spacing-responsive-md);
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: var(--ngoma-white);
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: var(--ngoma-radius-full);
    cursor: pointer;
    z-index: 10;
    transition: all var(--ngoma-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

@media (min-width: 768px) {
    .ngoma-modal-close, .modal-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
}

/* Bootstrap modal responsive overrides */
.modal-dialog {
    max-width: calc(100% - 24px);
    margin: var(--spacing-responsive-md) auto;
}

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 500px;
    }
}

@media (min-width: 1024px) {
    .modal-dialog {
        max-width: 600px;
    }
}

.modal-content {
    border-radius: var(--ngoma-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: var(--spacing-responsive-md);
}

@media (min-width: 768px) {
    .modal-body {
        padding: var(--spacing-responsive-lg);
    }
}

/* ============================================
   RESPONSIVE BUTTONS
   ============================================ */

.btn-responsive {
    padding: var(--spacing-responsive-sm) var(--spacing-responsive-md);
    font-size: var(--font-responsive-sm);
    min-height: 44px; /* Touch-friendly minimum */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-responsive-xs);
}

@media (min-width: 480px) {
    .btn-responsive {
        padding: var(--spacing-responsive-md) var(--spacing-responsive-lg);
        font-size: var(--font-responsive-base);
    }
}

.btn-large-responsive {
    padding: var(--spacing-responsive-md) var(--spacing-responsive-xl);
    font-size: var(--font-responsive-base);
    min-height: 48px;
}

@media (min-width: 480px) {
    .btn-large-responsive {
        padding: var(--spacing-responsive-lg) var(--spacing-responsive-2xl);
        font-size: var(--font-responsive-lg);
        min-height: 52px;
    }
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

.form-input-responsive {
    width: 100%;
    padding: var(--spacing-responsive-md);
    font-size: var(--font-responsive-base);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--ngoma-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    min-height: 44px;
}

@media (min-width: 768px) {
    .form-input-responsive {
        padding: var(--spacing-responsive-md) var(--spacing-responsive-lg);
    }
}

/* ============================================
   RESPONSIVE FILTERS
   ============================================ */

.filter-bar-responsive {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-responsive-md);
    border-radius: var(--ngoma-radius-md);
}

@media (min-width: 768px) {
    .filter-bar-responsive {
        padding: var(--spacing-responsive-lg);
    }
}

.filter-tabs-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-responsive-xs);
}

.filter-tab-responsive {
    padding: var(--spacing-responsive-xs) var(--spacing-responsive-sm);
    font-size: var(--font-responsive-xs);
    white-space: nowrap;
}

@media (min-width: 480px) {
    .filter-tab-responsive {
        padding: var(--spacing-responsive-sm) var(--spacing-responsive-md);
        font-size: var(--font-responsive-sm);
    }
}

/* ============================================
   RESPONSIVE SUBSCRIPTION CARDS
   ============================================ */

.plans-grid-responsive {
    display: grid;
    gap: var(--spacing-responsive-md);
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .plans-grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (min-width: 768px) {
    .plans-grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-responsive-lg);
    }
}

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

/* ============================================
   RESPONSIVE PROFILE SELECTION
   ============================================ */

.profile-grid-responsive {
    display: grid;
    gap: var(--spacing-responsive-md);
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

@media (min-width: 375px) {
    .profile-grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (min-width: 768px) {
    .profile-grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-responsive-lg);
    }
}

.profile-avatar-responsive {
    width: 80px;
    height: 80px;
}

@media (min-width: 375px) {
    .profile-avatar-responsive {
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 768px) {
    .profile-avatar-responsive {
        width: 150px;
        height: 150px;
    }
}

/* ============================================
   RESPONSIVE VIDEO PLAYER
   ============================================ */

.video-player-responsive {
    width: 100%;
    aspect-ratio: 16/9;
    background: black;
}

.video-controls-responsive {
    padding: var(--spacing-responsive-sm);
}

@media (min-width: 768px) {
    .video-controls-responsive {
        padding: var(--spacing-responsive-md);
    }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive image containers */
.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image-container.poster {
    aspect-ratio: 2/3;
}

.image-container.backdrop {
    aspect-ratio: 16/9;
}

.image-container.square {
    aspect-ratio: 1/1;
}

/* Lazy loading support for media cards only */
.catalog-poster img[loading="lazy"],
.card-poster-wrapper img[loading="lazy"],
.media-card-poster img[loading="lazy"],
.anime-poster-box img[loading="lazy"] {
    background-color: transparent;
}

/* Navbar Logo & Profile Avatar Strict Geometry Lock (Prevents 200px stretch bug) */
.logo-ns-badge {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 7px !important;
    vertical-align: middle !important;
}

.ns-logo-img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-height: 0 !important;
    background: transparent !important;
    display: block !important;
    object-fit: contain !important;
    margin: auto !important;
}

.nav-profile-thumb-wrapper {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: #1a1d28 !important;
}

.nav-profile-thumb,
.nav-profile-thumb-wrapper img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    min-height: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: transparent !important;
}

/* Responsive image sizes based on breakpoints */
@media (max-width: 374px) {
    .card-image {
        max-width: 140px;
    }
}

@media (min-width: 375px) and (max-width: 767px) {
    .card-image {
        max-width: 160px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .card-image {
        max-width: 200px;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .card-image {
        max-width: 240px;
    }
}

@media (min-width: 1440px) {
    .card-image {
        max-width: 280px;
    }
}

/* Hero image responsive sizing */
.hero-image {
    width: 100%;
    height: auto;
    min-height: 300px;
}

@media (min-width: 768px) {
    .hero-image {
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    .hero-image {
        min-height: 700px;
    }
}

/* Avatar responsive sizing */
.avatar-responsive {
    width: 32px;
    height: 32px;
}

@media (min-width: 480px) {
    .avatar-responsive {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 768px) {
    .avatar-responsive {
        width: 48px;
        height: 48px;
    }
}

.avatar-large {
    width: 80px;
    height: 80px;
}

@media (min-width: 480px) {
    .avatar-large {
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 768px) {
    .avatar-large {
        width: 150px;
        height: 150px;
    }
}

/* ============================================
   TOUCH TARGETS
   ============================================ */

/* Ensure all interactive elements have proper touch targets */
button, a, .clickable {
    min-height: 44px;
    min-width: 44px;
}

/* For elements that can't be sized directly */
.touch-target {
    position: relative;
}

.touch-target::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

/* Enhanced touch targets for specific components */
.ngoma-card-btn, .ngoma-icon-btn, .mobile-nav-item {
    min-width: 44px;
    min-height: 44px;
}

.carousel-card {
    min-height: 44px;
}

/* Touch-friendly hover states */
@media (hover: none) {
    /* Disable hover effects on touch devices */
    .ngoma-card:hover,
    .ngoma-grid-card:hover,
    .profile-card:hover,
    .plan-card:hover {
        transform: none;
    }
    
    /* Add active states for touch feedback */
    .ngoma-card:active,
    .ngoma-grid-card:active,
    .profile-card:active,
    .plan-card:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
    
    /* Button active states */
    .ngoma-btn:active,
    .btn-responsive:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

/* Prevent text selection on interactive elements */
button, a, .ngoma-card, .ngoma-grid-card, .carousel-card {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Touch scrolling optimization */
.carousel-responsive, .ngoma-carousel {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

/* Better touch feedback for buttons */
.ngoma-btn, .btn-responsive, .ngoma-card-btn {
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.ngoma-btn:active, .btn-responsive:active, .ngoma-card-btn:active {
    transform: scale(0.95);
}

/* Touch-friendly spacing for carousels */
@media (max-width: 767px) {
    .carousel-responsive {
        padding: var(--spacing-responsive-md) var(--spacing-responsive-sm);
        gap: var(--spacing-responsive-md);
    }
    
    .carousel-card {
        margin-right: var(--spacing-responsive-sm);
    }
}

/* Improved touch targets for navigation */
.mobile-nav-item {
    padding: var(--spacing-responsive-sm) var(--spacing-responsive-md);
    min-width: 60px;
    min-height: 60px;
}

.mobile-nav-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

/* Touch-friendly filter tabs */
.ngoma-filter-tab, .filter-tab-responsive {
    min-height: 44px;
    padding: var(--spacing-responsive-sm) var(--spacing-responsive-md);
}

/* Touch-friendly pagination */
.ngoma-pagination-btn {
    min-height: 48px;
    min-width: 48px;
}

/* Touch-friendly card actions */
.ngoma-card-actions, .ngoma-grid-card-actions {
    gap: var(--spacing-responsive-sm);
}

.ngoma-card-btn {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

/* Touch-friendly form inputs */
.form-input-responsive, .ngoma-select {
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom */
}

/* Touch-friendly modal close buttons */
.ngoma-modal-close, .modal-close {
    width: 48px;
    height: 48px;
    font-size: 24px;
}

/* Remove tap delay on modern browsers */
button, a, .clickable {
    touch-action: manipulation;
}

/* ============================================
   ORIENTATION HANDLING
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
    .hero-responsive {
        min-height: 100vh;
    }
    
    .mobile-bottom-nav {
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    }
    
    .mobile-nav-label {
        display: none;
    }
    
    .mobile-nav-icon {
        margin-bottom: 0;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --ngoma-light-gray: #e0e0e0;
        --ngoma-gray: #404040;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }
}

.hide-desktop {
    display: block;
}

@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }
}

.text-responsive {
    font-size: var(--font-responsive-base);
}

.padding-responsive {
    padding: var(--spacing-responsive-md);
}

.margin-responsive {
    margin: var(--spacing-responsive-md);
}

/* ============================================
   SPECIFIC BREAKPOINT OVERRIDES
   ============================================ */

/* Very small mobile (320px - 374px) */
@media (max-width: 374px) {
    .container-responsive {
        padding: 0 8px;
    }
    
    .hero-content-responsive {
        padding: 16px;
    }
}

/* Mobile (375px - 767px) */
@media (min-width: 375px) and (max-width: 767px) {
    .container-responsive {
        padding: 0 12px;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container-responsive {
        padding: 0 20px;
    }
}

/* Laptop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .container-responsive {
        padding: 0 24px;
    }
}

/* Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .container-responsive {
        padding: 0 32px;
    }
}

/* Large screens (1920px+) */
@media (min-width: 1920px) {
    .container-responsive {
        padding: 0 48px;
    }
}

/* ============================================
   100% RESPONSIVE & ERGONOMIC TOUCH SYSTEM
   Mobile/Tablet/Desktop dynamic button optimization
   ============================================ */

/* Global Strict Overflow Containment */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    touch-action: pan-y pinch-zoom;
}

/* Touch targets and tap response */
button, 
.btn, 
.netflix-btn, 
.watch-btn, 
.hero-btn, 
.settings-btn, 
.modal-btn, 
.pwa-btn, 
.action-btn, 
a.btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

button:active, 
.btn:active, 
.netflix-btn:active, 
.settings-btn:active, 
.hero-btn:active {
    transform: scale(0.97);
}

/* Base protection for flex containers & media */
.hero-actions,
.banner-actions,
.detail-buttons,
.modal-actions,
.watch-top-bar,
.button-group,
.form-action-row,
.search-controls,
.filter-bar,
.category-filter {
    min-width: 0;
}

/* Responsive Table Wrapper */
.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 126, 219, 0.3) rgba(26, 21, 40, 0.5);
}

/* Responsive Media Containment */
img, video, iframe, embed, object {
    max-width: 100%;
}

/* ============================================
   TABLET ADAPTATIONS (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .settings-container {
        grid-template-columns: 220px 1fr !important;
        gap: 24px !important;
    }
    
    .hero-actions,
    .banner-actions,
    .detail-buttons {
        gap: 12px !important;
    }
}

/* ============================================
   MOBILE ADAPTATIONS (<= 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Layout containment */
    .container,
    .container-fluid,
    .settings-container,
    .watch-container,
    .catalog-container,
    .netflix-main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Mobile Top Navbar - Solid SynthWave Glassmorphism, Gap-free */
    .ngoma-navbar, .netflix-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        padding: 0 16px !important;
        background: rgba(26, 21, 40, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 126, 219, 0.22) !important;
        box-shadow: 0 4px 20px rgba(10, 5, 20, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        z-index: 1000 !important;
        transition: none !important;
    }

    .ngoma-navbar.scrolled, .netflix-navbar.scrolled {
        padding: 0 16px !important;
        background: rgba(26, 21, 40, 0.98) !important;
        box-shadow: 0 4px 20px rgba(10, 5, 20, 0.6) !important;
    }

    .ngoma-nav-container, .netflix-nav-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .ngoma-nav-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }

    .ngoma-nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .ngoma-nav-right .ngoma-icon-btn,
    .ngoma-nav-right .ngoma-mobile-menu-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        color: #FFFFFF !important;
    }

    .ngoma-logo {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        gap: 5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .logo-ns-badge {
        width: 26px !important;
        height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
    }

    /* Supprime le double padding au-dessus du contenu */
    .netflix-main {
        padding-top: 0 !important;
    }

    /* Calibrage harmonieux de l'espacement sous la navbar (60px) pour éliminer tout vide */
    .catalog-page {
        padding-top: 75px !important;
        padding-bottom: 80px !important;
    }

    .home-hero {
        padding-top: 75px !important;
        min-height: 70vh !important;
    }

    .anime-hero {
        padding-top: 75px !important;
        min-height: 65vh !important;
    }

    .search-hero-section {
        padding-top: 75px !important;
        padding-bottom: 24px !important;
    }

    .favorites-page-header {
        padding-top: 75px !important;
    }

    .settings-container,
    .netflix-settings-page {
        padding-top: 75px !important;
    }

    .notifications-container {
        padding-top: 75px !important;
    }

    .history-container {
        padding-top: 75px !important;
    }

    .subscription-container {
        padding-top: 75px !important;
    }

    .details-hero {
        padding-top: 75px !important;
    }

    .auth-page-container {
        padding-top: 75px !important;
    }
    
    /* Settings layout on tablet/mobile */
    .settings-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .settings-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
        gap: 8px !important;
        scrollbar-width: none;
    }
    .settings-nav::-webkit-scrollbar {
        display: none;
    }
    
    .settings-nav-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    /* Settings buttons: ensure they are NEVER oversized */
    .form-action-row {
        display: flex !important;
        justify-content: flex-start !important;
        width: auto !important;
        margin-top: 8px !important;
    }
    
    .settings-btn {
        width: auto !important;
        max-width: max-content !important;
        align-self: flex-start !important;
        padding: 9px 18px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    
    /* Hero Banner Actions: Dynamic wrapping & touch ergonomics */
    .hero-actions,
    .banner-actions,
    .detail-buttons,
    .modal-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .hero-actions .btn,
    .hero-actions .hero-btn,
    .banner-actions .btn,
    .banner-actions .hero-btn,
    .detail-buttons .btn {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    
    /* Video Watch Interface on Mobile */
    .watch-header,
    .watch-top-bar {
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        background: rgba(26, 21, 40, 0.95) !important;
        backdrop-filter: blur(16px) !important;
    }
    
    .watch-title {
        font-size: 15px !important;
        max-width: 55vw !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .btn-watch-action,
    .btn-episodes {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 38px !important;
        border-radius: 20px !important;
    }
    
    /* Episodes Drawer Full Width on Mobile */
    .episodes-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        z-index: -1 !important;
    }

    .episodes-drawer.active {
        z-index: 210 !important;
    }
    
    /* Horizontal Carousels Smooth Native Touch */
    .catalog-row,
    .content-slider,
    .netflix-slider,
    .row-posters,
    .categories-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .catalog-row::-webkit-scrollbar,
    .content-slider::-webkit-scrollbar,
    .netflix-slider::-webkit-scrollbar,
    .row-posters::-webkit-scrollbar,
    .categories-row::-webkit-scrollbar {
        display: none !important;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (<= 480px / 320px)
   ============================================ */
@media (max-width: 480px) {
    /* Ensure action buttons wrap cleanly without overflowing */
    .hero-actions .btn,
    .hero-actions .hero-btn,
    .banner-actions .btn,
    .banner-actions .hero-btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 130px !important;
        text-align: center !important;
    }
    
    .button-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    .button-group .settings-btn {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Keep single form action buttons compact */
    .form-action-row .settings-btn {
        width: auto !important;
        max-width: max-content !important;
    }
    
    /* Modal content on extra small screens */
    .modal-content,
    .netflix-modal-content,
    .ngoma-modal-content {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
        width: calc(100vw - 20px) !important;
        border-radius: 16px !important;
    }
    
    /* Auth card adaptation */
    .auth-card,
    .login-box,
    .register-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
    }
    
    /* Mobile bottom nav spacing */
    .mobile-nav-item {
        padding: 6px 8px !important;
        min-width: 50px !important;
    }
    
    .mobile-nav-label {
        font-size: 10px !important;
    }
}

/* ============================================
   PWA UPDATE NOTIFICATION TOAST (SynthWave '84)
   ============================================ */
.pwa-update-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10001;
    max-width: 420px;
    width: calc(100% - 48px);
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.pwa-update-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pwa-update-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(36, 27, 47, 0.96);
    border: 1px solid rgba(54, 249, 246, 0.45);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(54, 249, 246, 0.25);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
    padding: 14px 18px;
    overflow: hidden;
}

.pwa-update-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 126, 219, 0.22), rgba(54, 249, 246, 0.22));
    border: 1px solid rgba(255, 126, 219, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #36f9f6;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(54, 249, 246, 0.35);
}

.pwa-update-text {
    flex: 1;
    min-width: 0;
}

.pwa-update-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.pwa-update-desc {
    font-size: 12px;
    color: #d1c7e8;
    line-height: 1.35;
}

.pwa-update-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-update-btn-refresh {
    background: linear-gradient(135deg, #fe4450 0%, #ff7edb 100%);
    border: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(254, 68, 80, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pwa-update-btn-refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 126, 219, 0.6);
}

.pwa-update-btn-dismiss {
    background: transparent;
    border: none;
    color: #848bbd;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.pwa-update-btn-dismiss:hover {
    color: #ffffff;
}

/* Mobile positioning above bottom navigation */
@media (max-width: 768px) {
    .pwa-update-toast {
        bottom: 90px;
        right: 14px;
        left: 14px;
        width: auto;
        max-width: calc(100% - 28px);
    }
    
    .pwa-update-card {
        padding: 12px 14px;
    }
}

/* ==========================================================================
   UNIVERSAL RESPONSIVE DESIGN SYSTEM (ALL DEVICES & ORIENTATIONS)
   ========================================================================== */

/* 1. Universal Anti-Overflow & Touch Targets */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 1023px) {
    /* Prevent iOS Safari automatic zoom on inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Standardized Touch Targets (Minimum 44x44px for thumbs/fingers) */
    .btn,
    .settings-btn,
    .ngoma-btn,
    .ngoma-icon-btn,
    .nav-profile-trigger,
    .mobile-nav-item,
    .mobile-menu-link,
    .pwa-btn-install,
    .pwa-btn-dismiss,
    .pwa-update-btn-refresh,
    .watch-btn-pill,
    .dropdown-item,
    .profile-switch-btn,
    .modal-close-btn,
    .toast-dismiss-btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }

    .form-group {
        margin-bottom: 18px;
        width: 100%;
    }

    .form-control,
    .form-input,
    .settings-input {
        min-height: 46px !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        width: 100% !important;
    }

    .checkbox-label,
    .radio-label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        min-height: 44px !important;
        cursor: pointer !important;
    }

    .checkbox-label input[type="checkbox"],
    .radio-label input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
}

/* 2. Universal Responsive Tables */
.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 24px !important;
    border-radius: 14px !important;
    scrollbar-width: thin;
}

.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 126, 219, 0.3);
    border-radius: 3px;
}

@media (max-width: 768px) {
    .table-responsive table,
    .saas-table,
    .admin-table {
        min-width: 580px !important;
        font-size: 13px !important;
    }

    .table-responsive th,
    .table-responsive td,
    .saas-table th,
    .saas-table td {
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }
}

/* 3. Universal Responsive Modals */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 16px auto !important;
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
    }

    .modal-content,
    .netflix-modal-content,
    .ngoma-modal-content {
        border-radius: 18px !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        padding: 20px 16px !important;
    }

    .modal-header {
        padding-bottom: 14px !important;
    }

    .modal-footer,
    .modal-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 10px !important;
        width: 100% !important;
        padding-top: 16px !important;
    }

    .modal-footer .btn,
    .modal-footer button,
    .modal-actions .btn,
    .modal-actions button {
        width: 100% !important;
        min-height: 44px !important;
        justify-content: center !important;
    }
}

/* 4. Universal Video Player Responsive Optimization */
@media (max-width: 768px) {
    .watch-top-bar {
        height: 56px !important;
        padding: 0 12px !important;
    }

    .watch-bar-left,
    .watch-bar-right {
        gap: 6px !important;
    }

    .watch-bar-center {
        max-width: 42% !important;
        font-size: 12px !important;
    }

    .watch-title-text {
        font-size: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 130px !important;
    }

    .watch-btn-pill {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }

    /* Hide text labels in secondary pills to prevent crowding on mobile */
    .watch-bar-right .watch-btn-pill span,
    .watch-bar-left .watch-btn-pill span {
        display: none !important;
    }

    .watch-bar-right .watch-btn-pill i,
    .watch-bar-left .watch-btn-pill i {
        margin: 0 !important;
    }

    .watch-bottom-nav {
        padding: 8px 12px !important;
        gap: 8px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .watch-bottom-nav .watch-btn-pill {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* 5. Mobile Landscape Mode & Safe Area Notch Support */
@media (orientation: landscape) and (max-height: 520px) {
    .ngoma-navbar, .netflix-navbar {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .watch-top-bar {
        height: 46px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .watch-player-frame {
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    .home-hero,
    .anime-hero {
        min-height: 80vh !important;
        padding-top: 60px !important;
        padding-bottom: 35px !important;
    }

    .catalog-page {
        padding-top: 55px !important;
    }

    .mobile-bottom-nav {
        height: 42px !important;
        padding: 2px 0 calc(2px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav-label {
        display: none !important;
    }

    .mobile-nav-icon {
        font-size: 16px !important;
        margin-bottom: 0 !important;
    }
}

/* 6. Multi-Tier Responsive Grid Breakpoints */

/* Tier 1: Extra Small Mobile (<= 375px) */
@media (max-width: 375px) {
    .media-card,
    .netflix-card {
        flex: 0 0 calc(50% - 6px) !important;
        min-width: 120px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .hero-actions .btn,
    .hero-actions .hero-btn,
    .banner-actions .btn,
    .details-actions-bar .btn,
    .details-actions-bar a,
    .details-actions-bar button {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .top10-big-rank {
        font-size: 44px !important;
        min-width: 28px !important;
    }
}

/* Tier 2: Standard Mobile & Phablets (376px to 600px) */
@media (min-width: 376px) and (max-width: 600px) {
    .media-card,
    .netflix-card {
        flex: 0 0 calc(33.333% - 8px) !important;
        min-width: 110px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 10px !important;
    }

    .top10-big-rank {
        font-size: 55px !important;
        min-width: 34px !important;
    }
}

/* Tier 3: Tablet Portrait & Landscape (601px to 1023px) */
@media (min-width: 601px) and (max-width: 1023px) {
    .media-card,
    .netflix-card {
        flex: 0 0 calc(25% - 12px) !important;
        min-width: 140px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 14px !important;
    }

    .form-row,
    .settings-form-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Tier 4: Laptop & Small Desktop (1024px to 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .media-card,
    .netflix-card {
        flex: 0 0 calc(20% - 14px) !important;
        min-width: 170px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 18px !important;
    }
}

/* Tier 5: Desktop Standard (1440px to 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .media-card,
    .netflix-card {
        flex: 0 0 calc(16.666% - 16px) !important;
        min-width: 190px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Tier 6: Ultra-Wide Screens (>= 1920px) */
@media (min-width: 1920px) {
    .container,
    .ngoma-nav-container,
    .home-hero-content,
    .catalog-container,
    .settings-container,
    .details-container,
    .saas-container {
        max-width: 1780px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .media-card,
    .netflix-card {
        flex: 0 0 calc(14.285% - 18px) !important;
        min-width: 210px !important;
    }

    .catalog-grid,
    .movies-grid,
    .series-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 24px !important;
    }
}

/* ============================================
   RESPONSIVE DETAILS PAGES (MOVIES & SERIES)
   ============================================ */
@media (max-width: 600px) {
    .details-hero {
        min-height: 55vh !important;
        padding: 80px 16px 28px !important;
    }

    .details-title {
        font-size: clamp(22px, 7vw, 32px) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .details-badges {
        gap: 6px !important;
        margin-bottom: 16px !important;
    }

    .badge-match-score,
    .badge-tag-pill,
    .badge-quality-4k {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    .details-synopsis {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 20px !important;
    }

    .details-actions-bar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .details-actions-bar .btn-play-cinema,
    .details-actions-bar .btn-list-cinema {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 18px !important;
        font-size: 15px !important;
    }

    .details-body {
        padding: 24px 16px 60px !important;
    }

    .details-metadata-card {
        padding: 18px !important;
        gap: 18px !important;
    }

    .season-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }

    .season-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .season-tab-btn {
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   RESPONSIVE VIDEO PLAYER CINEMA INTERFACE
   ============================================ */
@media (max-width: 768px) {
    .watch-top-bar {
        height: 56px !important;
        padding: 0 12px !important;
    }

    .watch-btn-pill {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
        min-width: 40px !important;
        justify-content: center !important;
    }

    .watch-btn-pill span {
        display: none !important;
    }

    .watch-title-text {
        max-width: 140px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 13px !important;
    }

    .watch-episode-badge {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    .episodes-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        right: -100vw !important;
        z-index: -1 !important;
    }

    .episodes-drawer.active {
        right: 0 !important;
        z-index: 210 !important;
    }

    .autonext-modal-backdrop {
        padding: 0 16px 16px 16px !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .autonext-card {
        max-width: 100% !important;
        padding: 16px 20px !important;
    }
}

/* Landscape Mobile Video Player Mode */
@media (max-height: 520px) and (orientation: landscape) {
    .watch-top-bar {
        height: 44px !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .watch-btn-pill {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
        min-width: 36px !important;
    }

    .watch-btn-pill span {
        display: none !important;
    }

    .watch-title-text {
        max-width: 180px !important;
        font-size: 12px !important;
    }

    .episodes-drawer {
        width: 85vw !important;
        max-width: 450px !important;
    }
}

/* ==========================================================================
   ENHANCED GLOBAL RESPONSIVE SYSTEM (SMARTPHONES, TABLETS, DESKTOPS, WIDE)
   ========================================================================== */

/* Universal Touch & Performance Optimizations */
button, a, input, select, textarea, .card-btn-circle, .page-btn, .filter-pill, .badge-pill {
    touch-action: manipulation;
}

/* Smooth Native-Like Inertial Scrolling */
.media-carousel,
.notifications-dropdown-list,
.mobile-profiles-scroll,
.catalog-filter-bar,
.season-tabs-row,
.search-tabs-row,
.details-badges {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.media-carousel::-webkit-scrollbar,
.catalog-filter-bar::-webkit-scrollbar,
.season-tabs-row::-webkit-scrollbar,
.search-tabs-row::-webkit-scrollbar {
    display: none;
}

/* Auth Prompt Modal (Invitation to Log In for Ma Liste) */
.auth-prompt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 7, 18, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-prompt-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.auth-prompt-card {
    background: linear-gradient(135deg, rgba(26, 21, 40, 0.98) 0%, rgba(18, 14, 28, 0.99) 100%);
    border: 1px solid rgba(255, 126, 219, 0.35);
    border-radius: 20px;
    padding: 36px 28px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(254, 68, 80, 0.25);
    transform: scale(0.92) translateY(10px);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-prompt-backdrop.active .auth-prompt-card {
    transform: scale(1) translateY(0);
}

.auth-prompt-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-prompt-close:hover {
    background: rgba(254, 68, 80, 0.3);
    border-color: #fe4450;
    transform: rotate(90deg);
}

.auth-prompt-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(254, 68, 80, 0.2) 0%, rgba(255, 126, 219, 0.2) 100%);
    border: 2px solid rgba(255, 126, 219, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 26px;
    color: #ff7edb;
    box-shadow: 0 0 25px rgba(255, 126, 219, 0.35);
}

.auth-prompt-title {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: clamp(20px, 4vw, 24px);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}

.auth-prompt-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #cbd5e1;
    margin-bottom: 24px;
}

.auth-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-auth-primary {
    background: linear-gradient(135deg, #fe4450 0%, #ff7edb 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 24px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    box-shadow: 0 6px 20px rgba(254, 68, 80, 0.4);
    transition: all 0.2s ease;
    min-height: 48px;
}

.btn-auth-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(254, 68, 80, 0.6);
}

.btn-auth-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    min-height: 44px;
}

.btn-auth-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Multi-device Grid Rules for Catalogs & Similar */
@media (min-width: 1440px) {
    .media-cards-grid, .anime-cards-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 24px !important;
    }
    .similar-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 22px !important;
    }
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .media-cards-grid, .anime-cards-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 20px !important;
    }
    .similar-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 18px !important;
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .media-cards-grid, .anime-cards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
    .similar-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

@media (min-width: 540px) and (max-width: 767px) {
    .media-cards-grid, .anime-cards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
    .similar-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 539px) {
    .media-cards-grid, .anime-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .similar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .catalog-title, .anime-card-title {
        font-size: 13px !important;
    }
    .catalog-meta, .anime-card-meta {
        font-size: 11px !important;
    }
    .catalog-overlay {
        padding: 10px !important;
    }
    .card-btn-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}

/* Hide desktop carousel navigation arrows on touch-first devices */
@media (hover: none) and (pointer: coarse) {
    .carousel-arrow {
        display: none !important;
    }
}

/* ==========================================================================
   UNIVERSAL MOBILE-FIRST RESPONSIVE PERFECTION (ALL DEVICES & ORIENTATIONS)
   ========================================================================== */

/* 1. Global Zero Horizontal Overflow & Touch Polish */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe {
    max-width: 100%;
}

/* 2. Universal Text Clamping & Typography Protection */
.media-overlay-title, 
.media-card-title, 
.catalog-title, 
.anime-card-title, 
.search-card-title, 
.top10-title,
.hero-title-main,
.details-title {
    word-break: break-word;
}

.media-overlay-title, 
.media-card-title, 
.catalog-title, 
.anime-card-title, 
.search-card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

/* 3. Navigation & Header on Mobile (< 992px) */
@media (max-width: 991.98px) {
    .desktop-nav {
        display: none !important;
    }
    .hide-desktop {
        display: inline-flex !important;
    }
    .ngoma-navbar {
        height: 62px !important;
        padding: 0 !important;
    }
    .ngoma-nav-container {
        padding: 0 16px !important;
        height: 100% !important;
    }
    .ngoma-logo {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        gap: 5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .ngoma-logo .logo-ns-badge {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ngoma-logo .ns-logo-img {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        display: block !important;
        margin: auto !important;
        object-fit: contain !important;
    }
    .ngoma-logo .logo-ngoma {
        display: inline-block !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        font-weight: 900 !important;
        color: #fe4450 !important;
        text-shadow: 0 0 12px rgba(255, 42, 133, 0.7) !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ngoma-logo .logo-stream {
        display: inline-block !important;
        font-size: clamp(14px, 4vw, 17px) !important;
        font-weight: 800 !important;
        color: #36f9f6 !important;
        text-shadow: 0 0 12px rgba(54, 249, 246, 0.6) !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ngoma-nav-right {
        gap: 8px !important;
    }
    .ngoma-icon-btn {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
    .nav-profile-thumb-wrapper {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (max-width: 480px) {
    .ngoma-nav-container {
        padding: 0 10px !important;
    }
    .ngoma-logo {
        gap: 4px !important;
    }
    .ngoma-logo .logo-stream {
        display: inline-block !important;
    }
    .ngoma-logo .logo-ngoma,
    .ngoma-logo .logo-stream {
        font-size: clamp(13px, 3.8vw, 16px) !important;
    }
    .ngoma-icon-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 13.5px !important;
    }
}

/* 4. Mobile Bottom Navigation (< 768px) */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: rgba(20, 16, 32, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 126, 219, 0.2) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    body.has-bottom-nav {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }
    .mobile-bottom-nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 6px 2px 2px !important;
    }
    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 4px 2px !important;
        color: #a89bc2 !important;
        text-decoration: none !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
    }
    .mobile-nav-item.active {
        color: #fe4450 !important;
    }
    .mobile-nav-item i {
        font-size: 17px !important;
        margin-bottom: 3px !important;
    }
}

@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* 5. Carousels & Homepage Grid on Mobile */
@media (max-width: 768px) {
    .media-carousel {
        gap: 12px !important;
        padding: 8px 0 16px 0 !important;
        scroll-padding: 0 16px !important;
    }
    .media-card {
        flex: 0 0 calc(42% - 8px) !important;
        min-width: 125px !important;
        max-width: 160px !important;
    }
    .top10-item .media-card {
        min-width: 115px !important;
        max-width: 140px !important;
    }
    .top10-big-rank {
        font-size: clamp(48px, 12vw, 68px) !important;
        min-width: 32px !important;
        margin-right: -6px !important;
    }
    .home-hero {
        padding: 90px 16px 36px !important;
        min-height: 460px !important;
    }
    .hero-title-main {
        font-size: clamp(24px, 5.5vw, 36px) !important;
    }
}

@media (max-width: 480px) {
    .media-card {
        flex: 0 0 calc(46% - 6px) !important;
        min-width: 120px !important;
        max-width: 150px !important;
    }
    .top10-big-rank {
        font-size: clamp(42px, 14vw, 56px) !important;
        min-width: 26px !important;
        margin-right: -4px !important;
    }
    .top10-item .media-card {
        min-width: 105px !important;
        max-width: 130px !important;
    }
    .hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .btn-play-cinema, .btn-hero-info {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
    }
}

/* 6. Detail Pages (Films, Series, Anime) on Mobile */
@media (max-width: 768px) {
    .details-hero {
        padding: 85px 16px 30px !important;
        min-height: auto !important;
    }
    .details-title {
        font-size: clamp(22px, 6vw, 36px) !important;
    }
    .details-actions-bar {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .btn-play-cinema, .btn-list-cinema {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
    }
    .episode-item-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
        gap: 10px !important;
    }
    .episode-poster-box {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
    }
    .episode-index {
        font-size: 16px !important;
        text-align: left !important;
        color: #fe4450 !important;
        font-weight: 800 !important;
    }
}

/* 7. Subscriptions Page (3 Offers Exact Layout) */
@media (max-width: 768px) {
    .netflix-subscription-page {
        padding: 85px 16px 60px !important;
    }
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .plan-card {
        padding: 20px !important;
    }
    .plan-btn {
        min-height: 48px !important;
        font-size: 1rem !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .plans-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 18px !important;
    }
}

@media (min-width: 1025px) {
    .plans-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
}

/* 8. Auth Forms (Login & Register) */
@media (max-width: 480px) {
    .auth-page-container {
        padding: 85px 14px 40px !important;
    }
    .auth-glass-card {
        padding: 24px 18px 20px !important;
        border-radius: 16px !important;
    }
    .auth-title {
        font-size: 1.6rem !important;
    }
    .auth-submit-btn {
        min-height: 48px !important;
        font-size: 1rem !important;
    }
}

/* 9. Profile Selection */
@media (max-width: 480px) {
    .profile-selection-container {
        padding: 30px 14px !important;
    }
    .profile-selection-title {
        font-size: 1.8rem !important;
        margin-bottom: 24px !important;
    }
    .profile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        max-width: 320px !important;
        margin: 0 auto 24px !important;
    }
    .profile-avatar {
        width: clamp(95px, 28vw, 130px) !important;
        height: clamp(95px, 28vw, 130px) !important;
        font-size: 34px !important;
        border-radius: 14px !important;
    }
    .profile-name {
        font-size: 13.5px !important;
    }
}

/* 10. Search Page */
@media (max-width: 540px) {
    .search-hero-section {
        padding: 90px 14px 24px !important;
    }
    .search-hero-title {
        font-size: 1.6rem !important;
    }
    .search-input-wrapper {
        padding: 4px 6px 4px 14px !important;
    }
    .search-input-field {
        font-size: 0.95rem !important;
    }
    .search-type-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 4px 4px 10px !important;
        gap: 8px !important;
        scrollbar-width: none !important;
    }
    .search-type-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .search-tab-btn {
        padding: 6px 14px !important;
        font-size: 0.82rem !important;
        flex-shrink: 0 !important;
    }
    .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
}

/* 11. Modals & Notifications Dropdown */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
    .modal-content {
        border-radius: 14px !important;
    }
    .notifications-dropdown {
        width: auto !important;
        left: 10px !important;
        right: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   12. GLOBAL UNIFIED PAGINATION COMPONENT (NGOMA STREAM)
   Guarantees 100% visual parity across all pages (Films, Series, Anime, Admin)
   ========================================================================== */
.pagination-bar,
.pagination-container,
.pagination,
.canvas-container .pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
    margin-bottom: 24px !important;
    padding: 0 16px 20px !important;
    flex-wrap: wrap !important;
    list-style: none !important;
}

/* Unified Pagination Buttons (links & buttons) */
.page-btn,
.pagination-btn {
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 8px !important;
    color: #E2E8F0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

/* Numbered pill button */
.page-btn.page-num,
.pagination-btn.page-num,
.pagination-btn:not(.page-btn-nav) {
    min-width: 42px !important;
    padding: 0 12px !important;
}

/* Hover state */
.page-btn:hover:not(.page-btn-disabled):not(:disabled):not(.disabled),
.pagination-btn:hover:not(.page-btn-disabled):not(:disabled):not(.disabled) {
    background: rgba(229, 9, 20, 0.25) !important;
    border-color: var(--brand-red, #E50914) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35) !important;
}

/* Active current page */
.page-btn.active,
.page-btn-active,
.pagination-btn.active {
    background: var(--brand-red, #E50914) !important;
    border-color: var(--brand-red, #E50914) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.45) !important;
    pointer-events: none !important;
}

/* Disabled state */
.page-btn-disabled,
.page-btn.disabled,
.page-btn:disabled,
.pagination-btn.disabled,
.pagination-btn:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #64748B !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ellipsis */
.page-ellipsis,
.pagination-ellipsis {
    color: #64748B !important;
    padding: 0 6px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 42px !important;
    font-size: 14px !important;
}

.page-btn-label {
    display: inline;
}

/* Mobile responsive layout */
@media (max-width: 480px) {
    .pagination-bar,
    .pagination-container,
    .pagination,
    .canvas-container .pagination {
        gap: 6px !important;
        margin-top: 24px !important;
        margin-bottom: 20px !important;
        padding: 0 4px 20px !important;
    }

    .page-btn,
    .pagination-btn {
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    .page-btn.page-num,
    .pagination-btn.page-num,
    .pagination-btn:not(.page-btn-nav) {
        min-width: 38px !important;
        padding: 0 8px !important;
    }

    .page-btn-nav .page-btn-label {
        display: none !important;
    }

    .page-ellipsis,
    .pagination-ellipsis {
        height: 38px !important;
        padding: 0 3px !important;
        font-size: 12px !important;
    }
}

/* ==============================================================
   MOBILE APP BOTTOM NAVIGATION BAR & NATIVE TOUCH EXPERIENCE
   ============================================================== */
.mobile-bottom-app-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Touch optimization */
    html, body {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation;
    }

    .mobile-bottom-app-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(60px + env(safe-area-inset-bottom, 8px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 8px) !important;
        background: rgba(14, 11, 22, 0.88) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7) !important;
        z-index: 1040 !important;
        align-items: center !important;
        justify-content: space-around !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        flex: 1 !important;
        height: 100% !important;
        color: #94a3b8 !important;
        text-decoration: none !important;
        font-family: var(--font-sans, system-ui, -apple-system, sans-serif) !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.2px !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
    }

    .bottom-nav-item .nav-item-icon-wrap {
        font-size: 18px !important;
        line-height: 1 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }

    .bottom-nav-item:active {
        transform: scale(0.90) !important;
    }

    .bottom-nav-item.active {
        color: #fe4450 !important;
    }

    .bottom-nav-item.active .nav-item-icon-wrap {
        transform: translateY(-2px) !important;
        color: #fe4450 !important;
        filter: drop-shadow(0 0 8px rgba(254, 68, 80, 0.6)) !important;
    }

    .bottom-nav-item.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: calc(env(safe-area-inset-bottom, 8px) + 2px) !important;
        width: 4px !important;
        height: 4px !important;
        border-radius: 50% !important;
        background: #fe4450 !important;
        box-shadow: 0 0 6px #fe4450 !important;
    }

    /* Padding bas pour que le contenu ne soit jamais masqué par la bottom bar */
    body:not(.watch-netflix-body) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 8px)) !important;
    }
}