/**
 * StreamBox Premium Mobile & Tablet Design
 * Modern, Premium responsive experience
 * NOTE: Does NOT affect single detail pages (single-movie, single-tv-show, single-anime)
 * @package StreamBox
 */

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Reduces GPU-heavy effects for smooth scrolling
   ============================================ */

@media (max-width: 991.98px) {
    /* Force GPU acceleration on key elements */
    .site-header,
    .hero-cinematic,
    .hero-slide,
    .carousel-track,
    .content-row {
        transform: translateZ(0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Disable expensive backdrop-filter on mobile */
    .site-header,
    .main-navigation,
    .hero-cinematic__content,
    .content-card,
    .poster-card,
    .modal,
    .dropdown-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Replace blur with solid backgrounds */
    .site-header {
        background: rgba(11, 11, 30, 0.95) !important;
    }
    
    /* Reduce box-shadow complexity */
    .content-card:hover,
    .poster-card:hover,
    .carousel-item:hover {
        box-shadow: none !important;
        transform: none !important;
    }
    
    /* Disable all hover animations on touch devices */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Optimize carousel scrolling */
    .carousel-track {
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Reduce paint complexity on scroll */
    .content-rows-wrapper {
        background: #0B0B1E !important;
    }
    
    /* Disable transitions during scroll */
    .is-scrolling * {
        transition: none !important;
        animation: none !important;
    }
    
    /* Disable hero animations on mobile for performance */
    .hero-cinematic__content,
    .hero-cinematic__genres,
    .hero-cinematic__title,
    .hero-cinematic__description,
    .hero-cinematic__meta,
    .hero-cinematic__actions {
        animation: none !important;
    }
    
    /* Simplify hero background gradients */
    .hero-cinematic::before,
    .hero-cinematic::after,
    .hero-slide::before,
    .hero-slide::after {
        display: none !important;
    }
    
    /* Use simpler gradient overlay */
    .hero-cinematic__overlay,
    .hero-slide .hero-overlay {
        background: linear-gradient(to top, #0B0B1E 0%, transparent 60%) !important;
    }
}

/* ============================================
   PREMIUM MOBILE DESIGN SYSTEM
   ============================================ */

/* CSS Custom Properties for Mobile/Tablet */
@media (max-width: 991.98px) {
    :root {
        --mobile-card-radius: 12px;
        --mobile-section-radius: 16px;
        --mobile-glow-primary: rgba(233, 30, 255, 0.3);
        --mobile-glow-secondary: rgba(0, 224, 255, 0.3);
        --mobile-glass-bg: rgba(255, 255, 255, 0.05);
        --mobile-glass-border: rgba(255, 255, 255, 0.1);
        --mobile-gradient-start: #0B0B1E;
        --mobile-gradient-end: #1B003D;
    }
}

/* ============================================
   CONTAINER & LAYOUT - MOBILE/TABLET
   ============================================ */

/* UNIFIED: Same layout for all mobile/tablet (≤991px) */
@media (max-width: 991.98px) {
    .container {
        width: 100%;
        padding: 0 16px;
    }
}

/* ============================================
   PREMIUM HEADER - MOBILE/TABLET (Desktop Style)
   ============================================ */

@media (max-width: 991.98px) {
    .site-header {
        padding: 0;
        background: linear-gradient(180deg, 
            rgba(0, 0, 0, 0.6) 0%, 
            rgba(0, 0, 0, 0.3) 50%,
            transparent 100%) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    
    .header-wrapper {
        padding: 10px 0;
    }
    
    .site-header.scrolled .header-wrapper {
        padding: 8px 0;
    }
    
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
    }
    
    .site-branding {
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
    }
    
    .site-title {
        font-size: 1.2rem;
        font-weight: 800;
    }
    
    .site-title a {
        background: linear-gradient(135deg, #E91EFF 0%, #00E0FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Hide mobile menu toggle - show desktop nav */
    .mobile-menu-toggle,
    .menu-toggle,
    .hamburger-menu {
        display: none !important;
    }
    
    /* Desktop-style Navigation - Scrollable carousel */
    .main-navigation {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        flex: 1 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        transform: none !important;
        right: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .main-navigation::-webkit-scrollbar {
        display: none !important;
    }
    
    .nav-menu,
    #primary-menu {
        display: flex !important;
        flex-direction: row !important;
        gap: 4px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 8px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    .nav-menu li,
    #primary-menu li {
        margin: 0 !important;
        position: relative !important;
    }
    
    .nav-menu a,
    #primary-menu a {
        display: block !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        border-radius: 6px !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        transform: none !important;
    }
    
    .nav-menu a:hover,
    #primary-menu a:hover,
    .nav-menu li.current-menu-item a,
    #primary-menu li.current-menu-item a {
        background: rgba(99, 102, 241, 0.15) !important;
        color: #fff !important;
        transform: none !important;
    }
    
    /* Header actions - compact */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .header-search-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 6px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .header-search-toggle svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* User menu - compact icon only on mobile */
    .streambox-user-menu .user-menu-trigger {
        padding: 4px !important;
        gap: 0 !important;
    }
    
    .streambox-user-menu .user-avatar {
        width: 28px !important;
        height: 28px !important;
    }
    
    .streambox-user-menu .user-avatar img {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Hide username and arrow on mobile - icon only */
    .streambox-user-menu .user-info-trigger,
    .streambox-user-menu .user-name,
    .streambox-user-menu .membership-level,
    .streambox-user-menu .user-menu-trigger .dashicons-arrow-down-alt2 {
        display: none !important;
    }
    
    /* Guest login button - compact */
    .streambox-user-menu.guest .login-btn,
    .streambox-user-menu.guest .register-btn {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }
    
    /* Hide register button on mobile, show only login */
    .streambox-user-menu.guest .register-btn {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .site-title {
        font-size: 1rem !important;
    }
    
    /* Scrollable nav carousel on mobile */
    .main-navigation {
        flex: 1 !important;
        max-width: calc(100% - 100px) !important;
        margin: 0 6px !important;
    }
    
    .nav-menu,
    #primary-menu {
        padding: 0 4px !important;
        gap: 2px !important;
    }
    
    .nav-menu a,
    #primary-menu a {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
    
    /* Header actions - even more compact on mobile */
    .header-actions {
        gap: 4px !important;
    }
    
    .header-search-toggle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 5px !important;
        border-radius: 6px !important;
    }
    
    .header-search-toggle svg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .streambox-user-menu .user-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    
    .streambox-user-menu .user-avatar img {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ============================================
   PREMIUM HERO SECTION - HOME PAGE ONLY
   (Does NOT affect single pages)
   Supports both Portrait and Landscape images
   ============================================ */

@media (max-width: 991.98px) {
    /* Only target homepage/archive hero, NOT single pages */
    .home .hero,
    .home .hero-section,
    .home .hero-cinematic,
    .front-page .hero,
    .front-page .hero-section,
    .front-page .hero-cinematic,
    .archive .hero,
    .archive .hero-section,
    .archive .hero-cinematic,
    .tax-genre .hero,
    .tax-genre .hero-cinematic,
    .tax-year .hero,
    .tax-year .hero-cinematic,
    .hero-cinematic {
        height: auto !important;
        min-height: 70vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background-size: cover !important;
        background-position: top center !important;
        padding: 0 !important;
        padding-top: 70px !important;
        padding-bottom: 20px !important;
        position: relative !important;
        display: flex !important;
        align-items: flex-end !important;
        top: 0 !important;
        
        /* High quality image rendering */
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: high-quality !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        transform: translateZ(0) !important;
    }
    
    /* Portrait images on mobile/tablet - focus on upper portion */
    .hero-cinematic.hero-portrait {
        background-position: center 10% !important;
    }
    
    /* Landscape images on mobile/tablet - center focus */
    .hero-cinematic.hero-landscape {
        background-position: center center !important;
    }
    
    /* Hero carousel wrapper - auto height */
    .home .hero-cinematic-carousel,
    .front-page .hero-cinematic-carousel,
    .archive .hero-cinematic-carousel,
    .hero-cinematic-carousel {
        position: relative !important;
        height: auto !important;
        min-height: unset !important;
    }
    
    /* Hero slide - auto height */
    .home .hero-slide,
    .front-page .hero-slide,
    .archive .hero-slide,
    .hero-slide {
        position: relative !important;
        min-height: 65vh !important;
        height: auto !important;
        padding: 0 !important;
        padding-top: 70px !important;
        padding-bottom: 20px !important;
        display: flex !important;
        align-items: flex-end !important;
    }
    
    /* Portrait slides on mobile */
    .hero-slide.hero-portrait {
        background-position: center 10% !important;
    }
    
    /* Landscape slides on mobile */
    .hero-slide.hero-landscape {
        background-position: center center !important;
    }
    
    /* Non-active slides should be hidden but not affect layout */
    .home .hero-slide:not(.active),
    .front-page .hero-slide:not(.active),
    .archive .hero-slide:not(.active),
    .hero-slide:not(.active) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .home .hero-content,
    .front-page .hero-content,
    .archive .hero-content,
    .hero-cinematic__content,
    .hero-cinematic__container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        padding: 0 20px !important;
        padding-bottom: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        justify-content: flex-end !important;
        height: auto !important;
        max-width: 75% !important;
        background: transparent !important;
        z-index: 2 !important;
    }
    
    /* Remove ALL dark overlays from hero */
    .home .hero::after,
    .front-page .hero::after,
    .archive .hero::after,
    .hero-cinematic::after,
    .hero-cinematic::before,
    .hero::before,
    .hero::after,
    .hero-cinematic__overlay,
    .hero-overlay,
    .hero-gradient-overlay,
    .hero-texture-overlay,
    .hero__overlay,
    .hero-minimal__overlay {
        display: none !important;
        opacity: 0 !important;
        background: transparent !important;
        visibility: hidden !important;
    }
    
    .home .hero-title,
    .front-page .hero-title,
    .archive .hero-title,
    .hero-cinematic__title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        margin-top: 0 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .home .hero-description,
    .front-page .hero-description,
    .archive .hero-description,
    .hero-cinematic__description {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        opacity: 0.95 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        max-width: 85% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
    }
    
    .home .hero-meta,
    .front-page .hero-meta,
    .archive .hero-meta,
    .hero-cinematic__meta {
        display: flex !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    
    .home .hero-meta span,
    .front-page .hero-meta span,
    .archive .hero-meta span,
    .hero-cinematic__meta span,
    .hero-cinematic__meta-item {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 4px !important;
        backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
    }
    
    .home .hero-actions,
    .home .hero-buttons,
    .front-page .hero-actions,
    .front-page .hero-buttons,
    .archive .hero-actions,
    .archive .hero-buttons,
    .hero-cinematic__actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }
    
    .home .hero-actions .btn,
    .home .hero-buttons .btn,
    .front-page .hero-actions .btn,
    .front-page .hero-buttons .btn,
    .archive .hero-actions .btn,
    .archive .hero-buttons .btn,
    .hero-cinematic__actions .btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        justify-content: center !important;
        min-height: 40px !important;
    }
    
    /* Hide scroll indicator on auto-height hero */
    .home .hero-cinematic__scroll-indicator,
    .front-page .hero-cinematic__scroll-indicator,
    .archive .hero-cinematic__scroll-indicator,
    .hero-cinematic__scroll-indicator {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .home .hero,
    .home .hero-section,
    .home .hero-cinematic,
    .front-page .hero,
    .front-page .hero-section,
    .front-page .hero-cinematic,
    .hero-cinematic {
        height: auto !important;
        min-height: 60vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        background-size: cover !important;
        background-position: top center !important;
        padding: 0 !important;
        padding-top: 60px !important;
        padding-bottom: 20px !important;
    }
    
    /* Hero slide - mobile same height as other pages */
    .home .hero-slide,
    .front-page .hero-slide,
    .archive .hero-slide,
    .hero-slide {
        min-height: 65vh !important;
        padding: 0 !important;
        padding-top: 60px !important;
        padding-bottom: 20px !important;
    }
    
    .home .hero-content,
    .front-page .hero-content,
    .hero-cinematic__content,
    .hero-cinematic__container {
        padding: 0 16px !important;
        padding-bottom: 25px !important;
        max-width: 90% !important;
    }
    
    .home .hero-title,
    .front-page .hero-title,
    .hero-cinematic__title {
        font-size: 1.25rem !important;
        margin-bottom: 5px !important;
        color: #ffffff !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .home .hero-description,
    .front-page .hero-description,
    .hero-cinematic__description {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
        max-width: 95% !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    }
    
    .home .hero-meta,
    .front-page .hero-meta,
    .hero-cinematic__meta {
        gap: 5px !important;
        margin-bottom: 10px !important;
    }
    
    .home .hero-meta span,
    .front-page .hero-meta span,
    .hero-cinematic__meta span,
    .hero-cinematic__meta-item {
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
        color: #ffffff !important;
    }
    
    .home .hero-actions,
    .home .hero-buttons,
    .front-page .hero-actions,
    .front-page .hero-buttons,
    .hero-cinematic__actions {
        gap: 8px !important;
    }
    
    .home .hero-actions .btn,
    .home .hero-buttons .btn,
    .front-page .hero-actions .btn,
    .front-page .hero-buttons .btn,
    .hero-cinematic__actions .btn {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
        border-radius: 6px !important;
    }
}

/* ============================================
   PREMIUM CONTENT SECTIONS - MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    /* Content wrapper - edge to edge */
    .content-rows-wrapper {
        padding: 0 !important;
        margin-top: 8px !important;
        padding-top: 12px !important;
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
    }
    
    /* Content Row - Edge to edge */
    .content-row {
        margin-bottom: 16px !important;
        padding: 12px 0 !important;
        background: transparent !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Premium Section Headers - Full edge to edge, single row */
    .content-row__header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px !important;
        margin-bottom: 10px !important;
        height: auto !important;
        min-height: 32px !important;
        width: 100% !important;
    }
    
    .content-row__title-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }
    
    /* Hide Icon on mobile/tablet */
    .content-type-icon {
        display: none !important;
    }
    
    /* Title - Bright white, left edge */
    .content-row__title {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    .content-row__title::after {
        display: none !important;
    }
    
    /* Trending badge - Compact */
    .trending-badge {
        font-size: 0.55rem !important;
        padding: 3px 8px !important;
        border-radius: 20px !important;
        gap: 3px !important;
        background: rgba(233, 30, 255, 0.4) !important;
        border: 1px solid rgba(233, 30, 255, 0.6) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }
    
    .trending-badge svg {
        width: 10px !important;
        height: 10px !important;
        color: #fff !important;
    }
    
    .content-row__count {
        display: none !important;
    }
    
    /* See All / Explore All Button - Right edge, no icon, same line */
    .content-row__see-all,
    .content-row__explore-all,
    .see-all-btn,
    .explore-all {
        padding: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.7) !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide arrow icon in See All */
    .content-row__see-all svg,
    .content-row__explore-all svg,
    .see-all-btn svg,
    .explore-all svg {
        display: none !important;
    }
    
    .content-row__see-all:hover,
    .content-row__explore-all:hover {
        background: transparent !important;
        color: #fff !important;
    }
    
    /* Premium Carousel - Edge to edge */
    .carousel-container,
    .content-carousel {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    .carousel-track {
        display: flex !important;
        gap: 10px !important;
        padding: 4px 12px 8px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    
    .carousel-track::-webkit-scrollbar {
        display: none;
    }
    
    .carousel-item {
        flex: 0 0 auto !important;
        width: 105px !important;
        scroll-snap-align: start !important;
    }
    
    .carousel-nav {
        display: none !important;
    }
    
    /* Trending Rank - Brighter */
    .trending-rank {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        top: -6px !important;
        left: -6px !important;
        border-radius: 6px !important;
        background: linear-gradient(135deg, #E91EFF 0%, #FF4E4E 100%) !important;
        color: #fff !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 2px 8px rgba(233, 30, 255, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Container edge to edge on mobile */
    .home .container,
    .front-page .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Trending Row Special Style */
    .trending-row {
        background: linear-gradient(180deg, 
            rgba(233, 30, 255, 0.08) 0%,
            rgba(255, 78, 78, 0.05) 50%,
            transparent 100%) !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    /* Movies Row Style */
    .movies-row {
        background: linear-gradient(180deg, 
            rgba(0, 150, 255, 0.06) 0%,
            transparent 100%) !important;
    }
    
    .movies-row .content-type-icon {
        background: linear-gradient(135deg, 
            rgba(0, 150, 255, 0.3) 0%, 
            rgba(0, 224, 255, 0.3) 100%) !important;
        border-color: rgba(0, 150, 255, 0.5) !important;
        box-shadow: 0 0 10px rgba(0, 150, 255, 0.25) !important;
    }
    
    /* TV Shows Row Style */
    .tvshows-row {
        background: linear-gradient(180deg, 
            rgba(255, 165, 0, 0.06) 0%,
            transparent 100%) !important;
    }
    
    .tvshows-row .content-type-icon {
        background: linear-gradient(135deg, 
            rgba(255, 165, 0, 0.3) 0%, 
            rgba(255, 200, 0, 0.3) 100%) !important;
        border-color: rgba(255, 165, 0, 0.5) !important;
        box-shadow: 0 0 10px rgba(255, 165, 0, 0.25) !important;
    }
    
    /* Anime Row Style */
    .anime-row {
        background: linear-gradient(180deg, 
            rgba(233, 30, 255, 0.06) 0%,
            transparent 100%) !important;
    }
    
    .anime-row .content-type-icon {
        background: linear-gradient(135deg, 
            rgba(233, 30, 255, 0.3) 0%, 
            rgba(157, 78, 255, 0.3) 100%) !important;
        border-color: rgba(233, 30, 255, 0.5) !important;
        box-shadow: 0 0 10px rgba(233, 30, 255, 0.25) !important;
    }
}

@media (max-width: 991.98px) {
    .content-row {
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    
    .content-row__header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px !important;
        margin-bottom: 6px !important;
        min-height: 28px !important;
        height: auto !important;
        width: 100% !important;
    }
    
    .content-row__title-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 0 0 auto !important;
    }
    
    /* Hide icon on mobile */
    .content-type-icon {
        display: none !important;
    }
    
    .content-row__title {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    
    /* See All text - right aligned, same line */
    .content-row__see-all,
    .content-row__explore-all {
        font-size: 0.7rem !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Hide arrow icon */
    .content-row__see-all svg,
    .content-row__explore-all svg {
        display: none !important;
    }
    
    .carousel-item {
        width: 85px !important;
    }
    
    .carousel-track {
        gap: 6px !important;
        padding: 0 8px 4px !important;
    }
    
    /* Full edge to edge container */
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .home .container,
    .front-page .container {
        padding: 0 !important;
    }
}

/* ============================================
   BROWSE BY GENRE SECTION - COMPACT MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    .genres-section,
    .archive-section.genres-section {
        padding: 6px 10px !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    .genres-section .container {
        padding: 0 !important;
    }
    
    .genres-section .section-title {
        font-size: 0.75rem !important;
        margin-bottom: 5px !important;
    }
    
    .genres-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    .genre-badge {
        padding: 2px 8px !important;
        font-size: 0.6rem !important;
        border-radius: 10px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 991.98px) {
    .genres-section,
    .archive-section.genres-section {
        padding: 5px 8px !important;
    }
    
    .genres-section .section-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }
    
    .genres-list {
        gap: 3px !important;
    }
    
    .genre-badge {
        padding: 2px 6px !important;
        font-size: 0.55rem !important;
        border-radius: 8px !important;
    }
}

/* ============================================
   ARCHIVE FILTER BAR - HORIZONTAL LINE MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    .archive-cinematic {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }
    
    .archive-cinematic__filter-bar {
        padding: 8px 0 !important;
        margin-bottom: 10px !important;
    }
    
    .archive-cinematic__filter-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 0 10px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .archive-cinematic__filter-container::-webkit-scrollbar {
        display: none;
    }
    
    .archive-cinematic__filter {
        flex: 0 0 auto !important;
        min-width: auto !important;
        width: auto !important;
    }
    
    .archive-cinematic__select {
        padding: 6px 24px 6px 10px !important;
        font-size: 0.7rem !important;
        min-width: 80px !important;
        border-radius: 16px !important;
        background-size: 10px !important;
        background-position: right 8px center !important;
        white-space: nowrap !important;
    }
    
    .archive-cinematic__search {
        flex: 0 0 auto !important;
        min-width: 120px !important;
        max-width: 150px !important;
    }
    
    .archive-cinematic__search-input {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 16px !important;
    }
    
    /* Results count compact */
    .archive-cinematic__results {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }
}

@media (max-width: 991.98px) {
    .archive-cinematic__filter-container {
        gap: 5px !important;
        padding: 0 8px !important;
    }
    
    .archive-cinematic__select {
        padding: 5px 22px 5px 8px !important;
        font-size: 0.65rem !important;
        min-width: 70px !important;
        border-radius: 14px !important;
    }
    
    .archive-cinematic__search {
        min-width: 100px !important;
        max-width: 130px !important;
    }
    
    .archive-cinematic__search-input {
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
        border-radius: 14px !important;
    }
}

/* ============================================
   ADS SECTION - COMPACT HEIGHT MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    .streambox-ad-zone {
        margin: 8px auto !important;
        padding: 0 !important;
    }
    
    .streambox-ad-zone .ad-content {
        min-height: 50px !important;
        padding: 6px !important;
        border-radius: 6px !important;
    }
    
    .streambox-ad-zone .ad-label {
        font-size: 0.6rem !important;
        margin-bottom: 4px !important;
    }
    
    .ad-zone-header_banner,
    .ad-header-banner {
        margin: 6px auto !important;
        padding: 6px 0 !important;
        max-width: 100% !important;
    }
    
    .ad-zone-header_banner .ad-content,
    .ad-header-banner .ad-content {
        min-height: 50px !important;
    }
    
    .ad-zone-content_top,
    .ad-zone-content_bottom,
    .ad-content-top,
    .ad-content-bottom {
        margin: 10px auto !important;
        padding: 8px 0 !important;
    }
    
    .ad-zone-content_top .ad-content,
    .ad-zone-content_bottom .ad-content {
        min-height: 50px !important;
    }
    
    .ad-zone-content_middle {
        margin: 8px auto !important;
    }
    
    .ad-zone-content_middle .ad-content {
        min-height: 100px !important;
    }
    
    .ad-zone-footer_banner,
    .ad-footer-banner {
        margin: 10px auto !important;
        padding: 8px 0 !important;
    }
    
    .ad-zone-footer_banner .ad-content,
    .ad-footer-banner .ad-content {
        min-height: 50px !important;
    }
    
    .ad-between-posts {
        margin: 6px auto !important;
    }
    
    .ad-between-posts .ad-content {
        min-height: 80px !important;
    }
    
    .widget-ad {
        padding: 6px !important;
        margin: 6px 0 !important;
    }
}

@media (max-width: 991.98px) {
    .streambox-ad-zone {
        margin: 6px auto !important;
    }
    
    .streambox-ad-zone .ad-content {
        min-height: 40px !important;
        padding: 4px !important;
    }
    
    .ad-zone-content_middle .ad-content {
        min-height: 80px !important;
    }
}

/* ============================================
   VIDEO BANNER - COMPACT LANDSCAPE MODE
   ============================================ */

/* Video Banner - Video Only, No Content Details on Mobile/Tablet */
@media (max-width: 991.98px) {
    /* FORCE VIDEO BANNER TO SHOW - override any hiding */
    .video-banner-carousel,
    .video-banner-section,
    #videoBannerSection {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Video Banner Container - Clean fit, minimal margins */
    .video-banner-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 16px 0 8px 0 !important;
        padding: 0 12px !important;
        max-width: 100% !important;
        width: 100% !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    
    .video-banner-container::before,
    .video-banner-container::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .video-banner-carousel,
    .video-banner-section {
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        min-height: auto !important;
        height: auto !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
        overflow: hidden !important;
    }
    
    .video-banner-carousel::before,
    .video-banner-carousel::after {
        display: none !important;
        content: none !important;
    }
    
    /* Video Slides - video-banner-content and video-slide are same element */
    /* Non-active slides: completely collapse */
    .video-slide,
    .video-banner-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        grid-template-columns: 1fr !important;
        background: transparent !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        z-index: 0 !important;
    }
    
    /* Active slide - show and position relative to allow height calculation */
    .video-slide.active,
    .video-banner-content.active {
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        z-index: 1 !important;
    }
    
    /* Video Player - Well Fitted with nice rounded corners */
    .video-player-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .video-player-frame {
        padding-bottom: 56.25% !important; /* 16:9 aspect ratio - perfect fit */
        border-radius: 12px !important;
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
        margin: 0 !important;
    }
    
    .video-player-frame iframe,
    .video-player-frame video,
    .video-player-frame .plyr,
    .video-player-iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 12px !important;
        object-fit: cover !important;
    }
    
    /* HIDE ALL Content Details - Video Only - Completely collapse */
    .video-banner-info,
    .video-banner-info-inner,
    .video-banner-title,
    .video-banner-excerpt,
    .video-banner-meta,
    .video-banner-actions,
    .video-type-badge,
    .video-banner-overlay,
    .video-banner-genres,
    .video-banner-rating,
    .video-banner-description,
    .video-category,
    .video-placeholder {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    
    /* Video banner skeleton - collapse when not needed */
    .video-banner-skeleton {
        display: none !important;
    }
}

/* Video Banner - Size adjustments for smaller phones */
@media (max-width: 480px) {
    .video-banner-container {
        margin: 12px 0 6px 0 !important;
        padding: 0 10px !important;
    }
    
    .video-banner-carousel,
    .video-banner-section {
        border-radius: 10px !important;
    }
    
    .video-player-wrapper {
        border-radius: 10px !important;
    }
    
    .video-player-frame,
    .video-player-frame iframe,
    .video-player-frame video {
        border-radius: 10px !important;
    }
}

/* Video Banner - Size adjustments for tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .video-banner-container {
        margin: 20px auto 10px auto !important;
        padding: 0 20px !important;
        max-width: 90% !important;
    }
    
    .video-banner-carousel,
    .video-banner-section {
        border-radius: 14px !important;
    }
    
    .video-player-wrapper {
        border-radius: 14px !important;
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5) !important;
    }
    
    .video-player-frame,
    .video-player-frame iframe,
    .video-player-frame video {
        border-radius: 14px !important;
    }
}

/* ============================================
   PREMIUM MEDIA CARDS - MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    .media-card,
    .poster-card,
    .movie-card,
    .show-card {
        border-radius: var(--mobile-card-radius);
        overflow: hidden;
        background: transparent;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .media-card:active,
    .poster-card:active {
        transform: scale(0.97);
    }
    
    .media-poster-container {
        border-radius: var(--mobile-card-radius);
        overflow: hidden;
        position: relative;
    }
    
    .media-poster-container::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
        pointer-events: none;
    }
    
    .media-poster {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }
    
    /* Premium Quality Badge */
    .quality-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 3px 8px;
        font-size: 0.6rem;
        font-weight: 700;
        background: linear-gradient(135deg, #E91EFF 0%, #9D4EFF 100%);
        border-radius: 6px;
        z-index: 5;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Premium Type Badge */
    .type-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        font-size: 0.6rem;
        font-weight: 700;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 6px;
        z-index: 5;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Card Info Overlay */
    .media-card-info,
    .card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 8px 8px;
        z-index: 5;
    }
    
    .media-card-title,
    .card-title {
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.2;
        margin: 0;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
    
    .media-card-meta,
    .card-meta {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 4px;
    }
}

@media (max-width: 991.98px) {
    .quality-badge,
    .type-badge {
        padding: 2px 6px;
        font-size: 0.55rem;
    }
    
    .media-card-title,
    .card-title {
        font-size: 0.7rem;
    }
    
    .media-card-meta,
    .card-meta {
        font-size: 0.6rem;
    }
}

/* ============================================
   PREMIUM CONTENT GRIDS - ARCHIVE PAGES
   ============================================ */

@media (max-width: 991.98px) {
    .content-grid,
    .movies-grid,
    .shows-grid,
    .anime-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        padding: 0 16px;
    }
    
    /* Sports Grid - Compact */
    .sports-grid {
        padding: 12px 0 !important;
    }
    
    .sports-grid__container {
        padding: 0 10px !important;
    }
    
    .sports-grid__items {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* Sports Card - Compact */
    .sports-card {
        border-radius: 8px !important;
    }
    
    .sports-card__image {
        aspect-ratio: 16 / 10 !important;
    }
    
    .sports-card__content {
        padding: 8px !important;
    }
    
    .sports-card__title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .sports-card__league-badge {
        top: 6px !important;
        left: 6px !important;
        padding: 2px 6px !important;
        font-size: 0.5rem !important;
    }
    
    .sports-card__score {
        margin-bottom: 4px !important;
    }
    
    .score-display {
        padding: 3px 6px !important;
        font-size: 0.6rem !important;
        border-radius: 4px !important;
    }
    
    .sports-card__excerpt {
        display: none !important;
    }
    
    .sports-card__meta {
        font-size: 0.55rem !important;
        gap: 6px !important;
    }
    
    .sports-card__duration {
        gap: 2px !important;
    }
    
    .sports-card__play-overlay svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Leagues Section Compact */
    .leagues-section {
        padding: 8px 10px !important;
    }
    
    .sports-hero__filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    
    .sports-hero__filters::-webkit-scrollbar {
        display: none;
    }
    
    .filter-tab {
        padding: 5px 12px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        border-radius: 14px !important;
        flex-shrink: 0 !important;
    }
}

/* UNIFIED: Same grid for all mobile/tablet */
@media (max-width: 991.98px) {
    .content-grid,
    .movies-grid,
    .shows-grid,
    .anime-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .sports-grid__items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .sports-card__title {
        font-size: 0.65rem !important;
    }
}

@media (max-width: 479.98px) {
    .content-grid,
    .movies-grid,
    .shows-grid,
    .anime-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 0 12px;
    }
    
    .sports-grid__items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    .sports-card__content {
        padding: 6px !important;
    }
    
    .sports-card__title {
        font-size: 0.6rem !important;
    }
    
    .sports-card__meta {
        font-size: 0.5rem !important;
    }
    
    .filter-tab {
        padding: 4px 10px !important;
        font-size: 0.6rem !important;
    }
}

/* ============================================
   PREMIUM SEARCH OVERLAY - MOBILE
   ============================================ */

@media (max-width: 991.98px) {
    .search-overlay {
        background: linear-gradient(180deg, 
            rgba(11, 11, 30, 0.98) 0%, 
            rgba(27, 0, 61, 0.98) 100%);
        backdrop-filter: blur(30px);
    }
    
    .search-overlay-content {
        padding: 100px 20px 20px;
    }
    
    .search-overlay-input {
        font-size: 1.25rem;
        padding: 16px 20px;
        background: var(--mobile-glass-bg);
        border: 2px solid var(--mobile-glass-border);
        border-radius: 16px;
        transition: all 0.3s ease;
    }
    
    .search-overlay-input:focus {
        border-color: rgba(233, 30, 255, 0.5);
        box-shadow: 0 0 30px rgba(233, 30, 255, 0.2);
    }
    
    .search-results-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 24px;
    }
}

/* ============================================
   PREMIUM FOOTER - MOBILE/TABLET (CENTERED)
   ============================================ */

@media (max-width: 991.98px) {
    .site-footer {
        padding: 30px 0 20px !important;
        margin-top: 20px !important;
        background: linear-gradient(180deg, 
            #2a2a2a 0%, 
            #1a1a1a 100%) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .footer-container {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    
    .footer-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        text-align: center !important;
    }
    
    /* All Footer Columns Centered */
    .footer-column,
    .footer-about,
    .footer-column.footer-about,
    .footer-newsletter,
    .footer-column.footer-newsletter {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Footer About Section */
    .footer-about,
    .footer-column.footer-about {
        order: 1 !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .footer-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    
    .footer-logo img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    .footer-logo svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    .footer-site-name {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        background: linear-gradient(135deg, #E91EFF 0%, #00E0FF 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .footer-description,
    .footer-about p {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        max-width: 320px !important;
        margin: 0 auto 16px !important;
        text-align: center !important;
    }
    
    /* Footer Social Links - Centered Row */
    .footer-social {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 12px !important;
        flex-wrap: wrap !important;
    }
    
    .footer-social a,
    .social-link {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: rgba(255, 255, 255, 0.8) !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-social a:hover,
    .social-link:hover {
        background: linear-gradient(135deg, #E91EFF 0%, #00E0FF 100%) !important;
        border-color: transparent !important;
        color: #fff !important;
        transform: scale(1.1) !important;
    }
    
    .footer-social svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Footer Link Columns */
    .footer-column:not(.footer-about):not(.footer-newsletter) {
        order: 2 !important;
        padding: 16px 0 !important;
    }
    
    .footer-title,
    .footer-column h4,
    .footer-column h3 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        margin-bottom: 14px !important;
        color: #fff !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        text-align: center !important;
    }
    
    /* Footer Menu Links - Stacked & Centered */
    .footer-menu,
    .footer-column ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .footer-menu li {
        margin: 0 !important;
        text-align: center !important;
    }
    
    .footer-menu a,
    .footer-column ul a {
        display: inline-block !important;
        padding: 6px 0 !important;
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        text-align: center !important;
    }
    
    .footer-menu a:hover,
    .footer-column ul a:hover {
        color: #E91EFF !important;
    }
    
    /* Footer Newsletter */
    .footer-newsletter,
    .footer-column.footer-newsletter {
        order: 3 !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
    }
    
    .newsletter-text,
    .footer-newsletter p {
        font-size: 0.8rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }
    
    .newsletter-form,
    .footer-newsletter form {
        max-width: 300px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .newsletter-input-wrapper {
        display: flex !important;
        gap: 0 !important;
        border-radius: 25px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
    
    .newsletter-input,
    .footer-newsletter input[type="email"] {
        flex: 1 !important;
        padding: 12px 16px !important;
        font-size: 0.8rem !important;
        background: transparent !important;
        border: none !important;
        color: #fff !important;
        outline: none !important;
        text-align: center !important;
    }
    
    .newsletter-input::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
        text-align: center !important;
    }
    
    .newsletter-submit,
    .footer-newsletter button {
        padding: 12px 20px !important;
        background: linear-gradient(135deg, #E91EFF 0%, #9D4EFF 100%) !important;
        border: none !important;
        color: #fff !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border-radius: 0 25px 25px 0 !important;
    }
    
    /* App Download Badges - Centered */
    .app-downloads {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 18px !important;
        flex-wrap: wrap !important;
    }
    
    .app-badge {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        color: #fff !important;
        transition: all 0.3s ease !important;
    }
    
    .app-badge:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(233, 30, 255, 0.4) !important;
        transform: translateY(-2px) !important;
    }
    
    .app-badge svg {
        width: 22px !important;
        height: 22px !important;
    }
    
    .app-badge-text {
        font-size: 0.6rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        display: block !important;
        line-height: 1 !important;
        text-align: left !important;
    }
    
    .app-badge-name {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        display: block !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }
    
    /* Footer Bottom - Centered */
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 18px 0 0 !important;
        margin-top: 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        text-align: center !important;
    }
    
    .footer-copyright,
    .footer-bottom p {
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .footer-legal {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
    }
    
    .footer-legal a {
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-decoration: none !important;
    }
    
    .footer-legal a:hover {
        color: #E91EFF !important;
    }
    
    /* Footer Widgets - Centered */
    .footer-widgets {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
        text-align: center !important;
    }
    
    .footer-widget {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-widget-title {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        margin-bottom: 14px !important;
        color: #fff !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }
    
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .footer-links a {
        padding: 4px 0 !important;
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-links a:hover {
        color: #E91EFF !important;
    }
}

@media (max-width: 991.98px) {
    .site-footer {
        padding: 24px 0 16px !important;
        margin-top: 16px !important;
    }
    
    .footer-container {
        padding: 0 16px !important;
    }
    
    .footer-top {
        gap: 20px !important;
    }
    
    .footer-logo img {
        max-height: 35px !important;
    }
    
    .footer-logo svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .footer-site-name {
        font-size: 1.1rem !important;
    }
    
    .footer-description,
    .footer-about p {
        font-size: 0.75rem !important;
        max-width: 280px !important;
    }
    
    .footer-social a,
    .social-link {
        width: 36px !important;
        height: 36px !important;
    }
    
    .footer-social svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .footer-title,
    .footer-column h4,
    .footer-column h3 {
        font-size: 0.85rem !important;
    }
    
    .footer-menu a,
    .footer-column ul a {
        font-size: 0.8rem !important;
    }
    
    .newsletter-input,
    .footer-newsletter input[type="email"] {
        padding: 10px 14px !important;
        font-size: 0.75rem !important;
    }
    
    .newsletter-submit,
    .footer-newsletter button {
        padding: 10px 16px !important;
        font-size: 0.75rem !important;
    }
    
    .app-badge {
        padding: 8px 12px !important;
    }
    
    .app-badge svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .app-badge-text {
        font-size: 0.55rem !important;
    }
    
    .app-badge-name {
        font-size: 0.75rem !important;
    }
    
    .footer-copyright,
    .footer-bottom p {
        font-size: 0.7rem !important;
    }
    
    .footer-legal a {
        font-size: 0.65rem !important;
    }
}

/* ============================================
   PREMIUM PAGINATION - MOBILE
   ============================================ */

@media (max-width: 991.98px) {
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 20px 16px;
        flex-wrap: wrap;
    }
    
    .page-numbers {
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        background: var(--mobile-glass-bg);
        border: 1px solid var(--mobile-glass-border);
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .page-numbers.current,
    .page-numbers:hover {
        background: linear-gradient(135deg, #E91EFF 0%, #9D4EFF 100%);
        border-color: transparent;
        color: #fff;
    }
    
    .page-numbers.prev,
    .page-numbers.next {
        padding: 0 16px;
    }
    
    .page-numbers.dots {
        background: transparent;
        border: none;
        min-width: auto;
        padding: 0 4px;
    }
}

@media (max-width: 991.98px) {
    .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
    
    .page-numbers.dots {
        display: none;
    }
}

/* ============================================
   PREMIUM SIDEBAR - MOBILE/TABLET
   ============================================ */

@media (max-width: 991.98px) {
    .sidebar {
        margin-top: 40px;
        padding: 0 16px;
    }
    
    .sidebar-widget {
        background: var(--mobile-glass-bg);
        border: 1px solid var(--mobile-glass-border);
        border-radius: var(--mobile-section-radius);
        padding: 20px;
        margin-bottom: 20px;
        backdrop-filter: blur(10px);
    }
    
    .widget-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* ============================================
   PREMIUM BUTTONS - MOBILE
   ============================================ */

@media (max-width: 991.98px) {
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .btn-primary,
    .btn-play {
        background: linear-gradient(135deg, #E91EFF 0%, #9D4EFF 100%);
        border: none;
        color: #fff;
        box-shadow: 0 4px 20px rgba(233, 30, 255, 0.3);
    }
    
    .btn-primary:active,
    .btn-play:active {
        transform: scale(0.97);
        box-shadow: 0 2px 10px rgba(233, 30, 255, 0.4);
    }
    
    .btn-secondary,
    .btn-watchlist {
        background: var(--mobile-glass-bg);
        border: 1px solid var(--mobile-glass-border);
        color: #fff;
        backdrop-filter: blur(10px);
    }
    
    .btn-secondary:active,
    .btn-watchlist:active {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .btn-lg {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 8px 14px;
        font-size: 0.8rem;
        min-height: 36px;
    }
    
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
    }
}

/* ============================================
   PREMIUM FORMS - MOBILE
   ============================================ */

@media (max-width: 991.98px) {
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        font-size: 0.85rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.9);
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px; /* Prevent iOS zoom */
        background: var(--mobile-glass-bg);
        border: 1px solid var(--mobile-glass-border);
        border-radius: 12px;
        color: #fff;
        transition: all 0.3s ease;
        -webkit-appearance: none;
    }
    
    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: rgba(233, 30, 255, 0.5);
        box-shadow: 0 0 20px rgba(233, 30, 255, 0.15);
    }
    
    ::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
}

/* ============================================
   PREMIUM MODALS - MOBILE
   ============================================ */

@media (max-width: 991.98px) {
    .modal-dialog {
        margin: 16px;
        max-width: calc(100% - 32px);
    }
    
    .modal-content {
        background: linear-gradient(180deg, 
            rgba(11, 11, 30, 0.98) 0%, 
            rgba(27, 0, 61, 0.98) 100%);
        backdrop-filter: blur(30px);
        border: 1px solid var(--mobile-glass-border);
        border-radius: var(--mobile-section-radius);
    }
    
    .modal-header {
        padding: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .modal-title {
        font-size: 1.125rem;
        font-weight: 700;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 16px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        gap: 10px;
    }
    
    .modal-close {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--mobile-glass-bg);
        border: 1px solid var(--mobile-glass-border);
    }
}

@media (max-width: 991.98px) {
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
    
    .modal-fullscreen-sm {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */

@media (max-width: 991.98px) {
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Touch-friendly tap targets */
    a, button, .btn, .nav-link, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Prevent text selection on interactive elements */
    button, .btn, .nav-link {
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling for carousels */
    .carousel-track,
    .horizontal-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Active states for touch */
    .media-card:active,
    .btn:active,
    .nav-link:active {
        opacity: 0.9;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .home .hero,
    .home .hero-section {
        min-height: 100vh;
        max-height: none;
    }
    
    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .main-navigation {
        padding-top: 60px;
    }
}

/* ============================================
   DESKTOP RESET (992px and up)
   ============================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================
   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;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .media-card,
    .sidebar-widget,
    .btn {
        border-width: 0.5px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .navigation,
    .btn,
    .social-links,
    .player-wrapper,
    .carousel-container,
    .modal,
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .content-main {
        width: 100% !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
}

/* ==========================================
   INFINITE SCROLL STYLES - Mobile/Tablet
   ========================================== */

/* Hide regular pagination on mobile/tablet when infinite scroll is active */
@media (max-width: 991.98px) {
    .archive-cinematic__pagination,
    .pagination,
    .page-numbers {
        display: none !important;
    }
    
    /* Infinite scroll loading indicator */
    .infinite-scroll-loading {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 20px;
        width: 100%;
    }
    
    .infinite-scroll-loading .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: #e50914;
        border-radius: 50%;
        animation: infiniteScrollSpin 0.8s linear infinite;
    }
    
    @keyframes infiniteScrollSpin {
        to {
            transform: rotate(360deg);
        }
    }
    
    /* End message */
    .infinite-scroll-end {
        text-align: center;
        padding: 25px 15px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.85rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 20px;
    }
    
    /* New items animation */
    .archive-cinematic__grid .archive-cinematic__poster-card {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    .archive-cinematic__grid .archive-cinematic__poster-card.infinite-scroll-new {
        animation: infiniteScrollFadeIn 0.5s ease forwards;
    }
    
    @keyframes infiniteScrollFadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Grid loading state */
    .archive-cinematic__grid.is-loading::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.3));
        pointer-events: none;
    }
}

/* Mobile specific adjustments */
@media (max-width: 991.98px) {
    .infinite-scroll-loading {
        padding: 20px 15px;
    }
    
    .infinite-scroll-loading .loading-spinner {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }
    
    .infinite-scroll-end {
        padding: 20px 10px;
        font-size: 0.8rem;
    }
}

/* ============================================
   LIVE WORDPRESS SITE OVERRIDES
   Ensures mobile/tablet styles override all desktop styles
   ============================================ */

@media (max-width: 991.98px) {
    /* Force body and html to be responsive */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100% !important;
    }
    
    /* Main content wrapper overrides */
    .site,
    .site-content,
    #page,
    #content,
    #primary,
    #main,
    .main-content,
    .content-area,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Container overrides for all pages */
    .container,
    .container-fluid,
    .container-lg,
    .container-xl,
    .container-xxl,
    .wrapper,
    .page-wrapper,
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Row and column overrides */
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    .row > * {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Elementor overrides */
    .elementor-section,
    .elementor-container,
    .elementor-row,
    .elementor-column,
    .elementor-widget-wrap,
    .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .elementor-section.elementor-section-full_width {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* WPBakery overrides */
    .vc_row,
    .vc_column_container,
    .wpb_wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Page templates overrides */
    .page-template,
    .page-template-default,
    .archive,
    .single,
    .home,
    .blog,
    .search,
    .error404 {
        overflow-x: hidden !important;
    }
    
    /* Archive page layout */
    .archive-content,
    .archive-main,
    .posts-list,
    .post-list,
    .blog-posts,
    .entries {
        width: 100% !important;
        padding: 0 16px !important;
    }
    
    /* Single page layout */
    .single-content,
    .single-main,
    .entry-content,
    .post-content,
    .article-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 16px !important;
    }
    
    /* Sidebar - hide or stack below */
    .sidebar,
    .widget-area,
    #secondary,
    aside.sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
        padding: 0 16px !important;
    }
    
    /* Two column layouts - stack vertically */
    .content-sidebar,
    .sidebar-content,
    .two-column,
    .has-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .content-sidebar .content-area,
    .content-sidebar .site-main,
    .sidebar-content .content-area,
    .sidebar-content .site-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* Footer overrides */
    .site-footer,
    #footer,
    footer,
    .footer-widgets,
    .footer-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Image responsiveness */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Table responsiveness */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Iframe responsiveness */
    iframe {
        max-width: 100% !important;
    }
    
    /* Video responsiveness */
    video,
    embed,
    object {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix any fixed width elements */
    [style*="width: 1200px"],
    [style*="width: 1140px"],
    [style*="width: 1170px"],
    [style*="width:1200px"],
    [style*="width:1140px"],
    [style*="width:1170px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Typography adjustments */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9rem !important; }
    
    /* Button touch-friendly sizing */
    button,
    .btn,
    .button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
    
    /* Form inputs touch-friendly */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 10px 12px !important;
    }
    
    /* Flexbox gap fallback */
    .gap-fix > * {
        margin: 8px !important;
    }
    
    /* Grid layouts - single column on mobile */
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .col-2,
    .col-3,
    .col-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Extra small devices */
@media (max-width: 991.98px) {
    /* Tighter spacing on phones */
    .container,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .row {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
    
    .row > * {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    
    /* Smaller headings on phones */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }
    
    /* Full width buttons on phones */
    .btn-full-mobile,
    .button-full-mobile {
        width: 100% !important;
        display: block !important;
    }
}