/* ========== CUSTOM FONTS ========== */
@font-face {
    font-family: 'Year of Handicrafts';
    src: url('../fonts/TheYearofHandicrafts-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Year of Handicrafts';
    src: url('../fonts/TheYearofHandicrafts-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shekari';
    src: url('../fonts/Shekari-Font.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========== ROOT VARIABLES ========== */
:root {
    /* Core Colors */
    --primary-color: #e50914;
    --secondary-color: #221f1f;
    --accent-color: #ffd700;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --background-primary: #141414;
    --background-secondary: #221f1f;
    --background-card: #2d2d2d;
    --border-color: #333333;
    --hover-color: #b81d24;
    --success-color: #46d369;
    --error-color: #e87c03;
    
    /* Font Families */
    --font-arabic: 'Cairo', 'Tajawal', sans-serif;
    --font-english: 'Roboto', 'Poppins', sans-serif;
    --font-spanish: 'Poppins', 'Roboto', sans-serif;
    --font-logo: 'Unbounded', sans-serif;
    --font-arabic-banner: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Light Theme */
[data-theme="light"] {
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --background-primary: #f8f9fa;
    --background-secondary: #ffffff;
    --background-card: #ffffff;
    --border-color: #e0e0e0;
    --hover-color: #dc3545;
}

/* Banner text stays white in both themes */
[data-theme="light"] .text-line-1,
[data-theme="light"] .text-line-2,
[data-theme="dark"] .text-line-1,
[data-theme="dark"] .text-line-2 {
    color: #ffffff !important;
}

[data-theme="light"] .banner-text,
[data-theme="dark"] .banner-text {
    color: #ffffff !important;
}

/* ========== GLOBAL STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Year of Handicrafts', var(--font-arabic);
    font-weight: 400;
    background-color: var(--background-primary);
    color: var(--text-primary);
    line-height: 1.6;
    transition: all var(--transition-normal);
    overflow-x: hidden;
}

/* ========== LOGICAL REASONING BOX - التصميم القديم المستعاد ========== */
.logical-reasoning-box {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 10px 0;
    backdrop-filter: blur(5px);
}

.reasoning-title {
    color: #ffffff;
    font-weight: 400;
    margin-bottom: 6px;
    font-size: 0.8rem;
    opacity: 0.8;
}

.reasoning-text {
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

/* Language-specific Typography */
[data-lang="ar"] {
    font-family: var(--font-arabic);
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-lang="en"] {
    font-family: var(--font-english);
}

[data-lang="es"] {
    font-family: var(--font-spanish);
}

/* ========== HEADER STYLES ========== */
.main-header {
    background: transparent;
    padding: var(--spacing-lg) 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo {
    font-family: var(--font-logo);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.05em;
}

.logo-text {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
}

.logo-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

.pages-dropdown,
.language-dropdown {
    position: relative;
}

.dropdown-toggle {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    backdrop-filter: blur(10px);
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

.dropdown-menu {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
}

.dropdown-item {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: none;
    width: 100%;
    text-align: start;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-color);
    color: white;
}

.nav-link.active {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.theme-toggle {
    background: var(--background-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* ========== HERO SECTION ========== */
.hero-section {
    height: 50vh; /* Smaller rectangular format */
    background: linear-gradient(135deg, var(--background-secondary), var(--background-primary));
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Maintain aspect ratio for better image quality */
    aspect-ratio: 16/9;
    max-height: 50vh;
    min-height: 400px;
}

.hero-section.movie-background {
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    height: 50vh !important;
    width: 100% !important;
    /* Remove transition for instant change */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: cover !important;
    overflow: hidden;
}

.hero-section.movie-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
}

.hero-content {
    text-align: center !important;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-banner {
    animation: fadeInUp 1s ease-out;
    text-align: center !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-text {
    font-family: var(--font-arabic-banner) !important;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    display: block;
    width: 100%;
    text-align: center !important;
    color: #ffffff !important;
}

.text-line-1, .text-line-2 {
    margin-bottom: 0.1rem;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.2rem;
    text-align: center !important;
    width: 100% !important;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.1 !important;
    font-size: 1.8rem;
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.05em;
    transition: all 0.8s ease;
}

/* Arabic Banner Text */
[data-lang="ar"] .text-line-1,
[data-lang="ar"] .text-line-2 {
    font-family: var(--font-arabic-banner) !important;
    font-weight: 600 !important;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "curs" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
}

[data-lang="ar"] .text-line-2 {
    font-weight: 600 !important;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "curs" 1;
}

/* Arabic Dynamic Text */
[data-lang="ar"] .dynamic-text {
    font-family: var(--font-arabic-banner) !important;
    font-weight: 800 !important;
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "curs" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
}

/* English Banner Text - Smaller Font */
[data-lang="en"] .text-line-1,
[data-lang="en"] .text-line-2 {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.5rem !important;
}

[data-lang="en"] .text-line-2 {
    font-weight: 700;
    font-size: 1.5rem !important;
}

/* Spanish Banner Text - Smaller Font */
[data-lang="es"] .text-line-1,
[data-lang="es"] .text-line-2 {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.5rem !important;
}

[data-lang="es"] .text-line-2 {
    font-weight: 700;
    font-size: 1.5rem !important;
}

.text-line-2 {
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.1 !important;
    font-size: 1.8rem;
}

.dynamic-text {
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
    font-weight: 700;
    transition: all 0.8s ease-in-out;
}

/* English Dynamic Text - Smaller Font */
[data-lang="en"] .dynamic-text {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.5rem !important;
}

/* Spanish Dynamic Text - Smaller Font */
[data-lang="es"] .dynamic-text {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.5rem !important;
}

.banner-subtitle {
    font-size: 0.9rem; /* Much smaller subtitle for compact design */
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
}

/* ========== MAIN CONTENT ========== */
.container-fluid {
    padding-top: 0;
    margin: 0 auto;
    max-width: 1200px; /* Center the content */
}

.container {
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 1200px !important;
    padding: 0 15px !important;
}

.filter-section {
    margin: var(--spacing-xxl) 0;
}

.filter-card {
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.filter-card:hover {
    transform: translateY(-2px);
}

.filter-title {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    color: var(--text-primary);
}

.filter-select {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-weight: 400;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.filter-select option {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-weight: 400;
    padding: var(--spacing-sm);
    font-size: 0.95rem;
}


.filter-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1);
    outline: none;
}

.form-label {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.btn {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
    text-align: center;
    min-width: 160px;
}

.btn-primary {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    background: linear-gradient(135deg, #e50914, #c41e3a, #8b0000);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: var(--spacing-md) var(--spacing-xl);
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    animation: redGlow 3s ease-in-out infinite;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ff0000, #e50914, #c41e3a);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.9), 0 6px 20px rgba(0, 0, 0, 0.4);
    animation: redGlow 1s ease-in-out infinite;
}

.btn-outline-secondary {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 700;
}

.btn-outline-secondary:hover {
    background: var(--background-card);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-danger {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--hover-color);
    transform: translateY(-1px);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

.btn-outline-secondary:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-xxl);
    font-size: 1.125rem;
}

/* ========== MOVIE RESULTS ========== */
.movie-result {
    background: var(--background-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    margin: var(--spacing-xxl) 0;
    opacity: 0;
    transform: translateY(20px);
    animation: slideInUp 0.6s ease-out forwards;
    position: relative;
}

/* ========== QUALITY BADGES ========== */
.quality-badges {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quality-badge {
    background: linear-gradient(135deg, var(--accent-color), #ffed4e);
    color: #000;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite;
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
}

.quality-badge.top-rated {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.quality-badge.highly-recommended {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}

.quality-badge.excellent {
    background: linear-gradient(135deg, #a8e6cf, #7fcdcd);
    color: #2d5a57;
    box-shadow: 0 4px 12px rgba(168, 230, 207, 0.4);
}

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

/* Quality sidebar indicator */
.quality-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    z-index: 5;
}

.quality-sidebar.masterpiece {
    background: linear-gradient(180deg, #ffd700, #ffed4e, #ffd700);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: shimmer 3s infinite;
}

.quality-sidebar.excellent-quality {
    background: linear-gradient(180deg, #ff6b6b, #ee5a52);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.quality-sidebar.highly-rated {
    background: linear-gradient(180deg, #4ecdc4, #44a08d);
    box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}

@keyframes shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* سبب الاقتراح والجودة */
/* سبب الاقتراح - التصميم القديم البسيط */
.recommendation-reason {
    background: rgba(20, 20, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: right;
    opacity: 0.85;
}

.recommendation-reason strong {
    color: #ffffff;
    font-weight: 400;
}

/* تم حذف قالب الجودة حسب الطلب - نكتفي بالشارات العلوية والألوان الجانبية */

.quality-text {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 5px;
}

.quality-text.masterpiece-quality {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.quality-text.excellent-quality {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}

.quality-text.highly-recommended-quality {
    color: #4ecdc4;
    text-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}

.quality-text.very-good-quality {
    color: #a8e6cf;
    text-shadow: 0 0 6px rgba(168, 230, 207, 0.3);
}

.quality-text.good-quality {
    color: #95e1d3;
}

.quality-text.standard-quality {
    color: #ccc;
}

/* Enhanced movie poster with quality overlay */
.movie-poster-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.quality-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.8));
    padding: 15px;
    color: white;
    display: none;
}

.movie-result.high-quality .quality-overlay {
    display: block;
}

.quality-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

.quality-stars {
    color: var(--accent-color);
}

/* Enhanced movie meta for quality indicators */
.movie-meta .quality-indicator {
    background: var(--accent-color);
    color: #000;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 8px;
    animation: glow 2s infinite alternate;
}

@keyframes glow {
    from { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    to { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
}

/* Responsive adjustments for quality elements */
@media (max-width: 768px) {
    .quality-badges {
        top: 10px;
        right: 10px;
        gap: 6px;
    }
    
    .quality-badge {
        padding: 4px 8px;
        font-size: 0.65rem;
        min-width: 60px;
    }
    
    .quality-sidebar {
        width: 4px;
    }
    
    .movie-meta .quality-indicator {
        padding: 2px 6px;
        font-size: 0.6rem;
        margin-left: 4px;
    }
}

.movie-poster {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.movie-info {
    padding: var(--spacing-xl);
}

.movie-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.movie-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.movie-rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.rating-star {
    color: var(--accent-color);
}

.tmdb-logo {
    height: 18px;
    width: auto;
    vertical-align: middle;
    opacity: 0.9;
    flex-shrink: 0;
}

.movie-details {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--background-secondary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary-color);
}

.movie-details p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.movie-details strong {
    color: var(--accent-color);
    font-weight: 600;
}

.movie-genres, .movie-runtime, .movie-director {
    margin-bottom: var(--spacing-sm);
}

.movie-genres {
    color: var(--text-secondary);
}

.movie-runtime {
    color: var(--text-primary);
}

.movie-director {
    color: var(--text-primary);
}

.movie-overview {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.movie-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ========== LOADING & ERROR STATES ========== */
/* Loading spinner removed to fix double loading icons issue */

.alert {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
}

.alert-danger {
    background: rgba(232, 124, 3, 0.1);
    border: 1px solid var(--error-color);
    color: var(--error-color);
}

/* ========== PAGES ========== */
.page-content {
    margin-top: 20px;
    padding: var(--spacing-lg) 0;
}

.page-title {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-xxl);
    color: var(--text-primary);
}

.about-content,
.contact-content {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    max-width: 800px;
    margin: 0 auto;
}

.about-section,
.contact-section {
    margin-bottom: var(--spacing-xxl);
}

.section-title {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.emoji {
    font-size: 1.5em;
}

.section-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* About Page Specific Styles */

/* RTL/LTR Support for About Content */
[data-lang="ar"] .about-content {
    direction: rtl;
    text-align: right;
}

[data-lang="ar"] .section-text {
    text-align: justify;
    direction: rtl;
}

[data-lang="en"] .about-content,
[data-lang="es"] .about-content {
    direction: ltr;
    text-align: left;
}

[data-lang="en"] .section-text,
[data-lang="es"] .section-text {
    text-align: justify;
    direction: ltr;
}

/* Enhanced paragraph spacing for multi-paragraph sections */
.section-text p {
    margin-bottom: var(--spacing-md);
}

.section-text p:last-child {
    margin-bottom: 0;
}

/* ========== FAQ ACCORDION STYLES ========== */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-header {
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: none;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    color: #ffffff;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    position: relative;
}

.faq-header:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3);
}

.faq-header[aria-expanded="true"] {
    background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
}

.faq-star {
    color: #aaa;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-header[aria-expanded="true"] .faq-star {
    transform: rotate(180deg);
    color: #ffffff;
}

.faq-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #1a1a1a;
}

.faq-header[aria-expanded="true"] + .faq-body {
    max-height: 2000px;
}

.faq-content {
    padding: 24px;
    background: transparent;
}

.faq-content .section-text {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    font-size: 1.05rem;
    line-height: 1.9;
    color: #ffffff;
    white-space: pre-line;
    margin-bottom: 0;
    background: transparent;
}

/* RTL (Arabic): Text right, star left */
[dir="rtl"] .faq-header {
    text-align: right;
    justify-content: space-between;
}

[dir="rtl"] .faq-title {
    flex-direction: row-reverse;
    justify-content: flex-end;
    width: 100%;
}

/* LTR (English/Spanish): Text left, star right */
[dir="ltr"] .faq-header {
    text-align: left;
    justify-content: space-between;
}

[dir="ltr"] .faq-title {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
}

/* Light Mode Support */
body[data-theme="light"] .faq-card .faq-header {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    color: #1a1a1a;
}

body[data-theme="light"] .faq-card .faq-header:hover {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

body[data-theme="light"] .faq-card .faq-header[aria-expanded="true"] {
    background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
    color: #ffffff;
}

body[data-theme="light"] .faq-card .faq-body {
    background: #ffffff;
}

body[data-theme="light"] .faq-card .faq-content .section-text {
    color: #1a1a1a;
}

body[data-theme="light"] .faq-card .faq-body .section-text {
    color: #1a1a1a;
}

body[data-theme="light"] .faq-card .faq-header[aria-expanded="true"] + .faq-body .section-text {
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .faq-header {
        padding: 16px 18px;
        font-size: 1.1rem;
    }
    
    .faq-content {
        padding: 18px;
    }
    
    .faq-content .section-text {
        font-size: 1rem;
    }
}

/* ========== FINANCIAL SUPPORT BUTTON (CLEAN DESIGN) ========== */
.financial-support-section {
    text-align: center;
    margin-top: 50px;
}

.support-button-clean {
    display: block;
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
    background: url('/static/images/donate-bg.gif') center/cover no-repeat;
    color: #ffffff;
    padding: 12px 40px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 2.3rem;
    font-weight: 400;
    font-family: 'Shekari', 'Cairo', sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    letter-spacing: normal;
    word-spacing: normal;
    position: relative;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* English/Spanish: Use Caveat font */
html[lang="en"] .support-button-clean,
html[lang="es"] .support-button-clean {
    font-family: 'Caveat', cursive;
    font-size: 1.9rem;
    font-weight: 700;
}

.support-button-clean span {
    display: inline-block;
}

.support-button-clean:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.support-button-clean:active {
    transform: translateY(-1px) scale(1);
}

.support-button-clean:visited {
    color: #ffffff;
}

/* Responsive Support Button */
@media (max-width: 768px) {
    .support-button-clean {
        width: 95%;
        padding: 10px 30px;
        font-size: 1.9rem;
    }
    
    html[lang="en"] .support-button-clean,
    html[lang="es"] .support-button-clean {
        font-size: 1.6rem;
    }
}

/* ========== COMMENTED OUT: VERTICAL SUPPORT BUTTON (SAVED FOR FUTURE USE) ========== */
/*
.vertical-support-button {
    position: fixed;
    left: 13px;
    top: 50%;
    transform: rotate(90deg) translateX(-50%);
    transform-origin: left center;
    z-index: 9999;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.vertical-support-button:hover {
    transform: rotate(90deg) translateX(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
    color: white;
    text-decoration: none;
}
*/

.contact-info {
    background: var(--background-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
}

.contact-email {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.contact-description,
.contact-note {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* ========== BACKGROUND TRANSITIONS ========== */
.hero-section.mood-happy {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/kOVEVeg59E0wsnXmF9nrh6OmWII.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.mood-sad {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/suaEOtk1N1sgg2MTM7oZd2cfVp3.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.mood-excited {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.mood-relaxed {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/mMtUybQ6hL24FXo0F3Z4j2KG7kZ.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.mood-thoughtful {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.mood-nostalgic {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/8UlWHLMpgZm9bx6QYh0NFoq67TZ.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-action {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/4XM8DUTQb3lhLemJC51Jx4a2EuA.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-comedy {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-drama {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-horror {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/ugS5FVfCI3RV0ZwZtBV3HAV75OX.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-romance {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/kCGlIMHnOm8JPXq3rXM6c5wMxcT.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-thriller {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/bvYjhsbxOBwpm8xLE5BhdA3a8CZ.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-sci-fi {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/5myQbDzw3l8K9yofUXRJ4UTVgam.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.genre-fantasy {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/6oom5QYQ2yQTMJIbnvbkBL9cHo6.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.weather-rainy {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/yDHYTfA3R0jFYba16jBB1ef8oIt.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.weather-sunny {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/5myQbDzw3l8K9yofUXRJ4UTVgam.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.weather-cold {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/q6y0Go1tsGEsmtFryDOJo3dEmqu.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.weather-hot {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/kOVEVeg59E0wsnXmF9nrh6OmWII.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

.hero-section.weather-cloudy {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('https://image.tmdb.org/t/p/original/mMtUybQ6hL24FXo0F3Z4j2KG7kZ.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ========== LANGUAGE DROPDOWN FIX ========== */
.dropdown-item.lang-option {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 16px !important;
}

.dropdown-item.lang-option[data-lang="ar"] {
    direction: rtl !important;
}

.dropdown-item.lang-option[data-lang="en"],
.dropdown-item.lang-option[data-lang="es"] {
    direction: ltr !important;
}

.dropdown-header {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
    .main-header {
        padding: var(--spacing-md) 0;
    }
    
    .header-controls {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .main-nav {
        order: 2;
    }
    
    .language-selector {
        order: 1;
    }
    
    .theme-toggle {
        order: 3;
    }
    
    .hero-section {
        height: 40vh; /* Smaller rectangular format for mobile */
        margin-top: 0;
        min-height: 300px;
    }
    
    .hero-section.movie-background {
        height: 40vh !important;
        min-height: 300px !important;
    }
    
    .banner-text {
        font-size: 1.5rem; /* Smaller for mobile */
    }
    
    .banner-subtitle {
        font-size: 0.8rem; /* Smaller for mobile */
    }
    
    .logo {
        font-size: 2rem;
    }
    
    .movie-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .btn {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .filter-card {
        margin: var(--spacing-md);
    }
    
    .filter-card .card-body {
        padding: var(--spacing-md);
    }
    
    .btn-primary {
        font-size: 1rem;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    
    .centered-logo {
        top: 10vh;
    }
    
    .centered-logo .logo {
        font-size: 1.8rem; /* Bigger on mobile */
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: var(--spacing-lg);
    }
    
    .banner-text {
        font-size: 1.5rem;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
}

/* ========== CORNER ICONS ========== */
.corner-icons {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
}

.corner-icon {
    position: absolute;
    pointer-events: auto;
}

.corner-icon.top-left {
    top: var(--spacing-lg);
    left: var(--spacing-lg);
}

.corner-icon.top-right {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
}

.corner-icon.bottom-left {
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
}

.corner-icon.bottom-right {
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
}

/* Hide/Show Animation for Bottom Corner Icons */
.corner-icon.bottom-left,
.corner-icon.bottom-right {
    transition: all 0.4s ease;
}

.corner-icon.bottom-left.hidden,
.corner-icon.bottom-right.hidden {
    transform: translateY(100px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.corner-icon.bottom-left.visible,
.corner-icon.bottom-right.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* Initial state - bottom icons start hidden until scroll logic kicks in */
.corner-icon.bottom-left,
.corner-icon.bottom-right {
    opacity: 0;
    transform: translateY(100px);
    visibility: hidden;
}

.icon-btn {
    background: rgba(20, 20, 20, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--spacing-md);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.icon-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.ai-btn {
    background: linear-gradient(135deg, #e50914, #c41e3a, #8b0000) !important;
    color: white;
    border: none;
    animation: redGlow 3s ease-in-out infinite !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    overflow: visible;
}

.ai-btn img {
    pointer-events: none;
    user-select: none;
    width: 100px;
    height: 100px;
}

.ai-btn:hover {
    transform: scale(1.1);
    animation: redGlow 1s ease-in-out infinite !important;
    background: linear-gradient(135deg, #ff0000, #e50914, #c41e3a) !important;
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.9), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

@keyframes aiPulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.3);
    }
    50% { 
        box-shadow: 0 0 30px rgba(229, 9, 20, 0.6);
    }
}

@keyframes redGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    50% { 
        box-shadow: 0 0 35px rgba(255, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.3);
    }
}

/* ========== COMMENTED OUT: VERTICAL SIDEBAR SUPPORT BUTTON (SAVED FOR FUTURE USE) ========== */
/*
.support-sidebar {
    position: fixed;
    left: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
    pointer-events: auto;
}

.support-sidebar.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

.support-sidebar.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-50%) translateX(-100px) !important;
}

.support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    color: #ffffff;
    box-shadow: 2px 2px 15px rgba(16, 185, 129, 0.4);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: var(--font-primary);
    white-space: nowrap;
    min-width: 130px;
    min-height: 26px;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left center;
    position: absolute;
    left: 13px;
    top: 50%;
}

.support-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 3px 3px 20px rgba(16, 185, 129, 0.6);
    color: #ffffff;
    transform: translateY(-50%) rotate(90deg) translateX(3px);
    border-color: rgba(255, 255, 255, 0.4);
}

[dir="rtl"] .support-sidebar {
    left: 0 !important;
    right: auto !important;
}

@media (max-width: 768px) {
    .support-sidebar {
        left: 0 !important;
        top: auto;
        bottom: 200px;
        transform: none;
    }
    
    .support-sidebar.visible {
        transform: translateX(0) !important;
    }
    
    .support-sidebar.hidden {
        transform: translateX(-100px) !important;
    }
    
    .support-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.85rem;
        min-width: 110px;
        min-height: 24px;
    }
}
*/

/* Custom Red Glowing Button for Suggest Movie */
#getRecommendationBtn {
    background: linear-gradient(135deg, #e50914, #c41e3a, #8b0000) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    animation: redGlow 3s ease-in-out infinite !important;
    min-width: 160px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Modern Spinner */
.modern-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid white;
    animation: modern-spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes modern-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#getRecommendationBtn:hover {
    background: linear-gradient(135deg, #ff0000, #e50914, #c41e3a) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.9), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    animation: redGlow 1s ease-in-out infinite !important;
}

/* Custom styling for send message button */
.send-btn {
    background: linear-gradient(135deg, #e50914, #c41e3a, #8b0000) !important;
    color: white !important;
    border: none !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    font-size: 1rem !important;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5) !important;
    animation: redGlow 3s ease-in-out infinite !important;
}

.send-btn:hover {
    background: linear-gradient(135deg, #ff0000, #e50914, #c41e3a) !important;
    box-shadow: 0 0 25px rgba(229, 9, 20, 0.8) !important;
    transform: scale(1.05) !important;
    animation: redGlow 1s ease-in-out infinite !important;
}

.send-btn:disabled {
    background: var(--text-secondary) !important;
    cursor: not-allowed !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Custom Green Button for More Info */
.more-info-btn, .btn-success {
    background: linear-gradient(135deg, #28a745, #20c997, #17a2b8) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-lg) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 140px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    line-height: 1 !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3) !important;
    transition: all 0.3s ease !important;
}

.more-info-btn:hover, .btn-success:hover {
    background: linear-gradient(135deg, #34ce57, #28a745, #20c997) !important;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

/* Custom Blue Button for Next Movie */
.next-movie-btn, .btn-info {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background: linear-gradient(135deg, #007bff, #0056b3, #004085) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-lg) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 140px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    line-height: 1 !important;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.next-movie-btn:hover, .btn-info:hover {
    background: linear-gradient(135deg, #0099ff, #007bff, #0056b3) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

/* Custom Pink/Red Button for Favorites */
.favorite-btn, .btn-outline-danger {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background: linear-gradient(135deg, #dc3545, #c82333, #bd2130) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-lg) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 140px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    line-height: 1 !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3) !important;
    transition: all 0.3s ease !important;
}

.favorite-btn:hover, .btn-outline-danger:hover {
    background: linear-gradient(135deg, #e74c3c, #dc3545, #c82333) !important;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.5) !important;
    transform: translateY(-2px) !important;
    color: white !important;
}

.favorite-btn:active, .btn-outline-danger:active {
    background: linear-gradient(135deg, #ff1744, #dc3545, #c82333) !important;
    box-shadow: 0 0 30px rgba(255, 23, 68, 0.9) !important;
    transform: translateY(-1px) !important;
}

/* User Avatar in Chat Input */
.user-avatar-chat {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 18px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.user-avatar-chat:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.user-avatar-chat img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.user-initial {
    font-weight: 600;
    font-size: 18px;
    color: white;
}

/* User Avatar in Chat Messages */
.user-avatar-message {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #007bff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 16px;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.user-initial-message {
    font-weight: 600;
    font-size: 16px;
    color: white;
}

/* ========== CENTERED LOGO ========== */
.centered-logo {
    position: fixed !important;
    top: var(--spacing-lg);
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999;
    text-align: center !important;
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin: 0 auto !important;
}

.centered-logo .logo {
    font-family: 'Unbounded', cursive;
    font-size: 2.2rem; /* Slightly bigger logo */
    font-weight: 900;
    margin: 0;
    color: #a0262b;
    transition: all 0.6s ease;
}

.centered-logo {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.centered-logo.hidden {
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
}

.centered-logo .logo-text {
    background: linear-gradient(45deg, var(--primary-color), #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.centered-logo .logo-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* ========== AI CHAT BOX ========== */
.ai-chat-box {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 380px;
    height: 75vh;
    max-height: 650px;
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.ai-chat-box.active {
    display: flex;
}

.ai-chat-header {
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ai-avatar {
    width: 70px;
    height: 70px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.ai-details h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.ai-status {
    font-size: 0.8rem;
    opacity: 0.9;
}

.close-chat-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.close-chat-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: var(--background-primary);
}

.ai-message,
.user-message {
    display: flex;
    margin-bottom: var(--spacing-md);
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.user-message {
    justify-content: flex-end;
}

.ai-avatar-small {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    flex-shrink: 0;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.message-content {
    background: var(--background-card);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    max-width: 80%;
    border: 1px solid var(--border-color);
}

.user-message .message-content {
    background: var(--primary-color);
    color: white;
}

.message-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.ai-chat-input {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ai-chat-input input {
    flex: 1;
    padding: 12px var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--background-primary);
    color: var(--text-primary);
    font-size: 16px;
    height: 44px;
}

.ai-chat-input input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.send-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1rem;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-btn:hover {
    background: var(--accent-color);
    transform: scale(1.05);
}

.send-btn:disabled {
    background: var(--text-secondary);
    cursor: not-allowed;
}

/* Critical Fix: Force perfect center alignment for all text elements */
.hero-content * {
    text-align: center !important;
    justify-content: center !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.text-line-1 *, .text-line-2 * {
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.banner-text, .hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Mobile Fix: Perfect centering for mobile devices */
@media (max-width: 768px) {
    .hero-section {
        min-height: 40vh !important;
        height: 40vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Fix container alignment for mobile */
    .container {
        margin: 0 auto !important;
        text-align: center !important;
        padding: 0 15px !important;
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .filter-section {
        text-align: center !important;
        margin: var(--spacing-lg) auto !important;
    }
    
    .filter-card {
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* AI Chat Box - Mobile Responsive */
    .ai-chat-box {
        position: fixed !important;
        bottom: 70px !important;
        right: 10px !important;
        left: 10px !important;
        top: 10px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
    }
    
    .ai-chat-messages {
        height: auto !important;
        max-height: none !important;
        flex: 1 1 auto !important;
    }
    
    .ai-chat-input {
        flex-shrink: 0 !important;
    }
    
    .ai-chat-input input {
        font-size: 16px !important;
        height: 48px !important;
    }
    }
    
    .hero-content {
        width: 100% !important;
        max-width: none !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: var(--spacing-sm) !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .hero-banner {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .banner-text {
        font-size: 1.4rem !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .text-line-1, .text-line-2 {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    
    .dynamic-text {
        text-align: center !important;
    }
    
    .centered-logo {
        font-size: 1.6rem !important;
    }
}

/* Desktop Fix: Perfect centering for larger screens */
@media (min-width: 769px) {
    .hero-section {
        height: 50vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .hero-content {
        width: 100vw !important;
        max-width: none !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .hero-banner {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .text-line-1, .text-line-2 {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
    }
    
    .banner-text {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Fix container alignment for desktop */
    .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
    }
    
    .filter-section {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Desktop: Fix filters grid layout - 3 columns */
    .main-filters,
    .additional-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .main-filters .col-md-4,
    .additional-filters .col-md-4 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        min-width: 280px !important;
    }
    
    /* Desktop: Larger icons and fonts */
    .filter-select {
        font-size: 1.15rem !important;
        padding: 14px 18px !important;
    }
    
    .filter-select option {
        font-size: 1.1rem !important;
        padding: 10px !important;
    }
    
    .form-label {
        font-size: 1.1rem !important;
        font-weight: 500 !important;
    }
    
    .filter-title {
        font-size: 2.2rem !important;
    }
    
    .btn {
        font-size: 1.15rem !important;
        padding: 14px 28px !important;
    }
    
    /* Desktop: Larger emoji icons in select options */
    .filter-card {
        padding: 30px !important;
    }
}

/* Footer Styles */
.syai-footer {
    background: rgba(0, 0, 0, 0.9);
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 50px;
}

.footer-text {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

.footer-text span {
    display: inline-block;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-link {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #e50914;
    text-decoration: none;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* Button Alignment Improvements */
.d-flex.justify-content-center {
    align-items: center;
}

.gap-3 {
    gap: 1rem !important;
}

/* Ensure buttons are properly aligned */
.btn-primary.btn-lg {
    min-width: 160px;
    padding: 12px 24px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.btn-outline-secondary {
    min-width: 140px;
    padding: 12px 24px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

/* زر الفيلم السابق - لون أسود أنيق */
.btn-secondary {
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif;
    background: linear-gradient(135deg, #343a40, #212529);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 15px rgba(52, 58, 64, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    min-width: 140px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    line-height: 1;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #212529, #000000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    color: white;
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(52, 58, 64, 0.3);
}

/* ========== LANGUAGE-SPECIFIC TEXT ALIGNMENT ========== */
/* Arabic RTL layout */
[data-lang="ar"] .dropdown-menu {
    text-align: right;
    direction: rtl;
}

[data-lang="ar"] .dropdown-header {
    text-align: right;
    padding-right: 1rem;
}

[data-lang="ar"] .dropdown-item {
    text-align: right;
    direction: rtl;
}

[data-lang="ar"] .dropdown-item i {
    margin-left: 8px;
    margin-right: 0;
}

/* English LTR layout */
[data-lang="en"] .dropdown-menu {
    text-align: left;
    direction: ltr;
}

[data-lang="en"] .dropdown-header {
    text-align: left;
    padding-left: 1rem;
}

[data-lang="en"] .dropdown-item {
    text-align: left;
    direction: ltr;
}

[data-lang="en"] .dropdown-item i {
    margin-right: 8px;
    margin-left: 0;
}

/* Spanish LTR layout */
[data-lang="es"] .dropdown-menu {
    text-align: left;
    direction: ltr;
}

[data-lang="es"] .dropdown-header {
    text-align: left;
    padding-left: 1rem;
}

[data-lang="es"] .dropdown-item {
    text-align: left;
    direction: ltr;
}

[data-lang="es"] .dropdown-item i {
    margin-right: 8px;
    margin-left: 0;
}

/* Ensure proper icon spacing for all languages */
.dropdown-item i {
    min-width: 16px;
    text-align: center;
}

/* ULTIMATE SUBMIT BUTTON RED FORCE */
input#submitBtn,
input#submitBtn:disabled,
input#submitBtn:enabled {
    background: #e50914 !important;
    background-color: #e50914 !important;
    background-image: none !important;
    border: 2px solid #e50914 !important;
    border-color: #e50914 !important;
    color: white !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: all 0.2s ease !important;
}

input#submitBtn:hover,
input#submitBtn:focus {
    background: #e50914 !important;
    background-color: #e50914 !important;
    border-color: #e50914 !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5) !important;
}

input#submitBtn:active {
    background: #e50914 !important;
    background-color: #e50914 !important;
    border-color: #e50914 !important;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.8) !important;
    transform: scale(0.98) !important;
}



.movie-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: var(--spacing-md) !important;
    justify-content: center !important;
}

.movie-actions .btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
    max-width: 200px !important;
    text-align: center !important;
}

/* Arabic League Flag Style */
.flag-emoji {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    border-radius: 2px !important;
}

/* Custom Arabic flag for production origin filter */
select#originFilter option[value="arabic"] {
    background-image: url('/static/images/arab_league_flag.png') !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    padding-left: 30px !important;
}

/* Arabic League Flag Icon */
.arab-flag-icon {
    display: inline-block;
    width: 16px;
    height: 12px;
    background-image: url('/static/images/arab_league_flag.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 5px;
    margin-left: 2px;
    vertical-align: middle;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* RTL (Arabic) support for filter options - EXCLUDING origin filter */
[dir="rtl"] .filter-select:not(.origin-filter-special),
[dir="rtl"] .form-select:not(.origin-filter-special) {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .filter-select:not(.origin-filter-special) option,
[dir="rtl"] .form-select:not(.origin-filter-special) option {
    direction: rtl;
    text-align: right;
    unicode-bidi: bidi-override;
}

/* ORIGIN FILTER SPECIAL HANDLING - Clean implementation */
.origin-filter-special {
    font-family: inherit !important;
    font-weight: inherit !important;
}

/* Options with flags - LTR for proper flag display */
.origin-filter-special option {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: isolate !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
}

/* Remove special duration filter handling to use normal emoji positioning */

/* Fix number reversal in Arabic interface */
body.ar select option {
    unicode-bidi: embed !important;
}

/* FINAL SOLUTION: Year Filter Fix for Arabic Text Reversal */

/* Default RTL for all selects in Arabic */
body.ar select,
body.ar .form-select {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: normal !important;
}

/* Special LTR override for year filter ONLY */
body.ar select.ltr-in-ar,
body.ar select.ltr-in-ar option {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    font-family: inherit !important;
}

/* Ensure year filter overrides ALL other rules */
body.ar #yearFilter.ltr-in-ar {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

body.ar #yearFilter.ltr-in-ar option {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* Origin filter special handling for flags */
body.ar #originFilter,
body.ar #originFilter option {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: normal !important;
    font-family: inherit !important;
}

/* LTR Language Support - Fix text position for English and Spanish */
body[data-lang="en"] select,
body[data-lang="en"] .form-select,
body[data-lang="es"] select,
body[data-lang="es"] .form-select {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: normal !important;
}

body[data-lang="en"] select option,
body[data-lang="en"] .form-select option,
body[data-lang="es"] select option,
body[data-lang="es"] .form-select option {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: normal !important;
}

/* Fix question marks and text order in LTR languages */
body[data-lang="en"] .form-label,
body[data-lang="es"] .form-label {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: normal !important;
}

/* Fix all form elements positioning in LTR languages */
body[data-lang="en"] .form-control,
body[data-lang="en"] .btn,
body[data-lang="es"] .form-control,
body[data-lang="es"] .btn {
    direction: ltr !important;
    text-align: left !important;
}

/* Fix year filter - ensure numbers display correctly in all languages */
#yearFilter,
#yearFilter option {
    unicode-bidi: isolate !important;
}

/* Make sure numbers in year filter are readable in Arabic */
body[data-lang="ar"] #yearFilter,
body[data-lang="ar"] #yearFilter option {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: isolate !important;
}



/* Enhanced RTL support for all filter emojis */

/* RTL DROPDOWN SOLUTION: HTML-BASED FIXES WITH CSS SUPPORT */

/* Additional RTL support for select elements */
[data-lang="ar"] .filter-select,
[data-lang="ar"] .form-select {
    text-align: right !important;
}

/* CRITICAL FIX: Flag emoji display in RTL context */
#originFilter option,
#originFilter {
    unicode-bidi: isolate-override !important;
    direction: ltr !important;
    text-align: right !important;
}

/* Force proper flag emoji rendering */
#originFilter option:contains("🇺🇸"),
#originFilter option:contains("🇮🇳"),
#originFilter option:contains("🇸🇦"),
#originFilter option:contains("🇪🇺"),
#originFilter option:contains("🇲🇽") {
    unicode-bidi: isolate !important;
    direction: ltr !important;
}

/* Duration and origin filters now inherit from .filter-select */

/* Note: RTL text direction and emoji positioning now handled 
   through HTML attributes (dir="rtl") and Unicode markers (‎) 
   instead of CSS to ensure browser compatibility */

@media (max-width: 768px) {
    .movie-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .movie-actions .btn {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* ========== USER PROFILE INTERFACE ========== */
.user-profile-btn {
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.user-avatar-fallback {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.user-profile-btn:hover .user-avatar {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.user-dropdown {
    min-width: 280px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.user-info {
    padding: 0;
    margin: 0;
}

.user-details {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: rgba(229, 9, 20, 0.1);
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(229, 9, 20, 0.3);
    flex-shrink: 0;
}

.user-dropdown-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    flex-shrink: 0;
}

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

.user-name {
    color: white;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-method {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-method i {
    color: var(--primary-color);
}

/* User dropdown item hover effects */
.user-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 12px 16px;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 4px 8px;
}

.user-dropdown .dropdown-item:hover {
    background: rgba(229, 9, 20, 0.1);
    color: white;
    transform: translateX(4px);
}

.user-dropdown .dropdown-item i {
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.user-dropdown .dropdown-item:hover i {
    transform: scale(1.1);
}

.user-dropdown .dropdown-header {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px 4px;
}

.user-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 8px 16px;
}

/* Language options in user dropdown */
.user-dropdown .lang-option {
    font-size: 0.9rem;
    padding: 8px 24px;
}

.user-dropdown .lang-option:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-dropdown {
        min-width: 260px;
        left: auto !important;
        right: 0 !important;
    }
    
    .user-details {
        padding: 12px;
    }
    
    .user-dropdown-avatar {
        width: 40px;
        height: 40px;
    }
    
    .user-dropdown-avatar-fallback {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .user-name {
        font-size: 0.95rem;
    }
    
    .user-method {
        font-size: 0.8rem;
    }
}



/* ========== ORIGIN FILTER ENHANCED STYLING ========== */
/* Enhanced native select for origin filter */
body[data-lang="ar"] #originFilter {
    font-size: 1rem !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    font-weight: 400 !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    direction: rtl !important;
    text-align: right !important;
}

body[data-lang="en"] #originFilter,
body[data-lang="es"] #originFilter {
    font-size: 1rem !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    font-weight: 400 !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    direction: ltr !important;
    text-align: left !important;
}

#originFilter:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1) !important;
    outline: none !important;
}

body[data-lang="ar"] #originFilter option {
    font-size: 0.95rem !important;
    padding: var(--spacing-sm) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    unicode-bidi: isolate !important;
    direction: rtl !important;
    text-align: right !important;
}

body[data-lang="en"] #originFilter option,
body[data-lang="es"] #originFilter option {
    font-size: 0.95rem !important;
    padding: var(--spacing-sm) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    unicode-bidi: isolate !important;
    direction: ltr !important;
    text-align: left !important;
}

/* Duration filter options styling */
body[data-lang="ar"] #durationFilter option {
    font-size: 0.95rem !important;
    padding: var(--spacing-sm) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    unicode-bidi: isolate !important;
    direction: rtl !important;
    text-align: right !important;
}

body[data-lang="en"] #durationFilter option,
body[data-lang="es"] #durationFilter option {
    font-size: 0.95rem !important;
    padding: var(--spacing-sm) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    unicode-bidi: isolate !important;
    direction: ltr !important;
    text-align: left !important;
}

/* Removed individual option hover as it's handled by browser */

/* ========== DURATION FILTER RTL FIX ========== */
body[data-lang="ar"] #durationFilter {
    font-size: 1rem !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    font-weight: 400 !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    direction: rtl !important;
    text-align: right !important;
}

body[data-lang="en"] #durationFilter,
body[data-lang="es"] #durationFilter {
    font-size: 1rem !important;
    padding: var(--spacing-md) !important;
    border-radius: var(--radius-md) !important;
    font-family: 'Year of Handicrafts', 'Cairo', sans-serif !important;
    font-weight: 400 !important;
    background-color: var(--background-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    direction: ltr !important;
    text-align: left !important;
}

#durationFilter:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1) !important;
    outline: none !important;
}

/* ========== CUSTOM SELECT STYLING FOR YEAR AND ORIGIN FILTERS ========== */
.custom-select-wrapper {
    position: relative;
    display: block;
}

.custom-select {
    position: relative;
    background-color: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'IBM Plex Sans Arabic', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    font-size: 1rem;
    transition: all var(--transition-fast);
    min-height: 48px;
}

.custom-select:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1);
}

.custom-select-trigger {
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    text-align: right;
    direction: rtl;
    unicode-bidi: isolate;
    font-size: 1.1rem;
    font-weight: 400;
    min-height: 18px;
}

.custom-select-trigger span {
    flex: 1;
    text-align: right;
    unicode-bidi: isolate;
    font-family: 'IBM Plex Sans Arabic', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

.custom-select-trigger .arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.custom-select-trigger .arrow::after {
    content: '▼';
    font-size: 0.8em;
    color: var(--text-secondary);
}

.custom-select-trigger .arrow {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-select.open .custom-select-trigger .arrow {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
    display: block;
    text-align: right;
    direction: rtl;
    unicode-bidi: isolate;
    font-family: 'IBM Plex Sans Arabic', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    color: var(--text-primary);
    font-size: 1rem;
}

.custom-option:hover {
    background-color: rgba(229, 9, 20, 0.1);
    color: var(--primary-color);
}

.custom-option:last-child {
    border-bottom: none;
}


/* ========== MOVIE METADATA STYLES ========== */
.movie-metadata {
    margin: 15px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.metadata-item {
    display: inline-block;
    margin: 5px 15px 5px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.metadata-item i {
    color: var(--primary-color);
    margin-left: 6px;
    width: 16px;
    text-align: center;
}

/* RTL Support for Arabic */
[dir="rtl"] .metadata-item {
    margin: 5px 0 5px 15px;
}

[dir="rtl"] .metadata-item i {
    margin-right: 6px;
    margin-left: 0;
}

/* Light theme adjustments */
[data-theme="light"] .movie-metadata {
    background: rgba(0, 0, 0, 0.05);
    border-left-color: var(--primary-color);
}


/* ========== BIRD SEND BUTTON ANIMATION ========== */
.button-bird {
    width: 100%;
    height: 88px;
    background: linear-gradient(135deg, #e50914, #c41e3a, #8b0000);
    border-radius: 12px;
    border: none;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: redGlow 3s ease-in-out infinite;
    z-index: 1;
}

.button-bird:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #ff0000, #e50914, #c41e3a);
    box-shadow: 0 0 30px rgba(229, 9, 20, 0.9), 0 6px 20px rgba(0, 0, 0, 0.4);
    animation: redGlow 1s ease-in-out infinite;
}

.button-bird__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    z-index: 2;
    transition: all 0.3s ease;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
}

.feather {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 59px;
    height: 25px;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feather path {
    fill: #ffffff;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}

.bird {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 33px;
    background-image: url("http://cfriedri.ch/codepen/04/birds.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Multiple birds for animation effect */
.bird--1, .bird--2, .bird--3, .bird--4, .bird--5, .bird--6, .bird--7, .bird--8, .bird--9, .bird--10,
.bird--11, .bird--12, .bird--13, .bird--14, .bird--15, .bird--16, .bird--17, .bird--18, .bird--19, .bird--20,
.bird--21, .bird--22, .bird--23, .bird--24, .bird--25, .bird--26, .bird--27, .bird--28, .bird--29, .bird--30 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 33px;
    background-image: url("http://cfriedri.ch/codepen/04/birds.svg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 10;
}

/* Active state */
.button-bird.active .button-bird__text {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.button-bird.active .feather {
    opacity: 1;
    animation: feather-fly 2.5s ease-out forwards;
}

.button-bird.active .bird {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: bird-fly 2.5s ease-in-out forwards;
}

.button-bird.active .bird--1 {
    opacity: 1;
    animation: bird-fly-1 3s ease-out forwards;
}

.button-bird.active .bird--2 {
    opacity: 1;
    animation: bird-fly-2 3.5s ease-out forwards;
}

.button-bird.active .bird--3 {
    opacity: 1;
    animation: bird-fly-3 2.8s ease-out forwards;
}

.button-bird.active .bird--4 {
    opacity: 1;
    animation: bird-fly-4 3.2s ease-out forwards;
}

.button-bird.active .bird--5 {
    opacity: 1;
    animation: bird-fly-5 3.8s ease-out forwards;
}

.button-bird.active .bird--6 {
    opacity: 1;
    animation: bird-fly-6 3.3s ease-out forwards;
}

.button-bird.active .bird--7 {
    opacity: 1;
    animation: bird-fly-7 2.9s ease-out forwards;
}

.button-bird.active .bird--8 {
    opacity: 1;
    animation: bird-fly-8 3.6s ease-out forwards;
}

.button-bird.active .bird--9 {
    opacity: 1;
    animation: bird-fly-9 3.1s ease-out forwards;
}

.button-bird.active .bird--10 {
    opacity: 1;
    animation: bird-fly-10 3.4s ease-out forwards;
}

.button-bird.active .bird--11 {
    opacity: 1;
    animation: bird-fly-11 2.7s ease-out forwards;
}

.button-bird.active .bird--12 {
    opacity: 1;
    animation: bird-fly-12 3.7s ease-out forwards;
}

.button-bird.active .bird--13 {
    opacity: 1;
    animation: bird-fly-13 3.0s ease-out forwards;
}

.button-bird.active .bird--14 {
    opacity: 1;
    animation: bird-fly-14 3.5s ease-out forwards;
}

.button-bird.active .bird--15 {
    opacity: 1;
    animation: bird-fly-15 2.6s ease-out forwards;
}

.button-bird.active .bird--16 {
    opacity: 1;
    animation: bird-fly-16 3.9s ease-out forwards;
}

.button-bird.active .bird--17 {
    opacity: 1;
    animation: bird-fly-17 2.8s ease-out forwards;
}

.button-bird.active .bird--18 {
    opacity: 1;
    animation: bird-fly-18 3.2s ease-out forwards;
}

.button-bird.active .bird--19 {
    opacity: 1;
    animation: bird-fly-19 3.1s ease-out forwards;
}

.button-bird.active .bird--20 {
    opacity: 1;
    animation: bird-fly-20 3.4s ease-out forwards;
}

.button-bird.active .bird--21 {
    opacity: 1;
    animation: bird-fly-21 2.9s ease-out forwards;
}

.button-bird.active .bird--22 {
    opacity: 1;
    animation: bird-fly-22 3.6s ease-out forwards;
}

.button-bird.active .bird--23 {
    opacity: 1;
    animation: bird-fly-23 3.0s ease-out forwards;
}

.button-bird.active .bird--24 {
    opacity: 1;
    animation: bird-fly-24 3.3s ease-out forwards;
}

.button-bird.active .bird--25 {
    opacity: 1;
    animation: bird-fly-25 2.7s ease-out forwards;
}

.button-bird.active .bird--26 {
    opacity: 1;
    animation: bird-fly-26 3.8s ease-out forwards;
}

.button-bird.active .bird--27 {
    opacity: 1;
    animation: bird-fly-27 3.1s ease-out forwards;
}

.button-bird.active .bird--28 {
    opacity: 1;
    animation: bird-fly-28 3.5s ease-out forwards;
}

.button-bird.active .bird--29 {
    opacity: 1;
    animation: bird-fly-29 2.8s ease-out forwards;
}

.button-bird.active .bird--30 {
    opacity: 1;
    animation: bird-fly-30 3.7s ease-out forwards;
}

/* Animations */
@keyframes feather-fly {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(200%, -200%) rotate(45deg);
        opacity: 0;
    }
}

@keyframes bird-fly {
    0% {
        transform: translate(-50%, -50%) scale(1);
        left: 50%;
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.5);
        left: 120%;
        opacity: 0;
    }
}

@keyframes bird-fly-1 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        left: 50%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        left: 130%;
        top: 40%;
        opacity: 0;
    }
}

@keyframes bird-fly-2 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        left: 50%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        left: 140%;
        top: 60%;
        opacity: 0;
    }
}

@keyframes bird-fly-3 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        left: 50%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        left: 125%;
        top: 35%;
        opacity: 0;
    }
}

@keyframes bird-fly-4 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        left: 50%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        left: 135%;
        top: 55%;
        opacity: 0;
    }
}

@keyframes bird-fly-5 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        left: 50%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.3);
        left: 145%;
        top: 45%;
        opacity: 0;
    }
}

@keyframes bird-fly-6 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 128%; top: 42%; opacity: 0; }
}

@keyframes bird-fly-7 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 138%; top: 58%; opacity: 0; }
}

@keyframes bird-fly-8 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 132%; top: 38%; opacity: 0; }
}

@keyframes bird-fly-9 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 142%; top: 52%; opacity: 0; }
}

@keyframes bird-fly-10 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 126%; top: 48%; opacity: 0; }
}

@keyframes bird-fly-11 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 136%; top: 36%; opacity: 0; }
}

@keyframes bird-fly-12 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 148%; top: 56%; opacity: 0; }
}

@keyframes bird-fly-13 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 134%; top: 44%; opacity: 0; }
}

@keyframes bird-fly-14 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 144%; top: 50%; opacity: 0; }
}

@keyframes bird-fly-15 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 122%; top: 32%; opacity: 0; }
}

@keyframes bird-fly-16 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 150%; top: 62%; opacity: 0; }
}

@keyframes bird-fly-17 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 129%; top: 39%; opacity: 0; }
}

@keyframes bird-fly-18 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 139%; top: 53%; opacity: 0; }
}

@keyframes bird-fly-19 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 133%; top: 47%; opacity: 0; }
}

@keyframes bird-fly-20 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 143%; top: 41%; opacity: 0; }
}

@keyframes bird-fly-21 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 127%; top: 57%; opacity: 0; }
}

@keyframes bird-fly-22 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 137%; top: 43%; opacity: 0; }
}

@keyframes bird-fly-23 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 147%; top: 49%; opacity: 0; }
}

@keyframes bird-fly-24 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 131%; top: 37%; opacity: 0; }
}

@keyframes bird-fly-25 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 141%; top: 59%; opacity: 0; }
}

@keyframes bird-fly-26 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 135%; top: 51%; opacity: 0; }
}

@keyframes bird-fly-27 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 149%; top: 33%; opacity: 0; }
}

@keyframes bird-fly-28 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 124%; top: 46%; opacity: 0; }
}

@keyframes bird-fly-29 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 146%; top: 54%; opacity: 0; }
}

@keyframes bird-fly-30 {
    0% { transform: translate(-50%, -50%) scale(0); left: 50%; opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.3); left: 140%; top: 34%; opacity: 0; }
}

/* AI Robot Styles */
.ai-robot-chatbot {
    position: relative;
    width: 70px;
    height: 70px;
    display: inline-block;
}

.robot-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .button-bird {
        height: 70px;
    }
    
    .button-bird__text {
        font-size: 20px;
    }
}

/* ========== WHERE TO WATCH PROVIDERS STYLING ========== */
.watch-providers-section {
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.05), rgba(0, 0, 0, 0.05));
    border: 1px solid rgba(229, 9, 20, 0.2);
    border-radius: 10px;
    padding: 0.8rem;
    margin: 1rem 2.5rem;
}

[data-lang="ar"] .watch-providers-section {
    direction: rtl;
    text-align: right;
}

[data-lang="en"] .watch-providers-section,
[data-lang="es"] .watch-providers-section {
    direction: ltr;
    text-align: left;
}

.watch-providers-title {
    font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.watch-providers-title i {
    color: #e50914;
    font-size: 1.1rem;
}

.providers-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
    min-height: 50px;
}

.provider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: 75px;
}

.provider-logo {
    width: 55px;
    height: 55px;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
}

.provider-logo:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(229, 9, 20, 0.4);
}

.provider-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.availability-label {
    font-size: 0.6rem;
    color: #999;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    opacity: 0.9;
    min-height: 14px;
}

.no-providers {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
    padding: 0.5rem 0;
}

.providers-loading {
    color: var(--primary-red);
    font-size: 1.2rem;
    padding: 0.5rem 0;
}

.providers-note {
    margin: 0;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.providers-note small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.country-selector {
    margin: 0.7rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.country-label {
    font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.country-label i {
    color: #e50914;
    font-size: 1rem;
}

.country-dropdown {
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(229, 9, 20, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.country-dropdown:hover {
    border-color: rgba(229, 9, 20, 0.5);
    background: rgba(0, 0, 0, 0.4);
}

.country-dropdown:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.2);
}

.country-dropdown option {
    background: #1a1a2e;
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .watch-providers-section {
        padding: 0.7rem;
        margin: 1rem 1rem;
    }
    
    .provider-logo {
        width: 50px;
        height: 50px;
    }
    
    .providers-container {
        gap: 0.6rem;
        min-height: 50px;
    }
    
    .country-dropdown {
        font-size: 0.85rem;
        padding: 0.45rem 0.7rem;
    }
}

/* ========== DESKTOP RESPONSIVE OVERRIDES - FINAL ========== */
/* Ultra-high specificity rules for desktop screens (992px+) */
/* Must override [data-lang] and RTL rules that use !important */
@media screen and (min-width: 992px) {
    /* Force grid layout for MAIN filters only - 3 columns centered */
    .row.main-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Additional filters - respect JS toggle, don't force display */
    .row.additional-filters {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* When shown by JS */
    .row.additional-filters.show,
    .row.additional-filters[style*="block"],
    .row.additional-filters[style*="flex"] {
        display: flex !important;
    }
    
    /* Column sizing for 3-column layout */
    .main-filters > .col-md-4,
    .additional-filters > .col-md-4 {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        min-width: 280px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Desktop: Larger filter titles */
    html body .filter-title,
    html body h3.filter-title,
    html[dir="rtl"] body .filter-title,
    html[dir="ltr"] body .filter-title {
        font-size: 2.4rem !important;
    }
    
    /* Desktop: Larger labels - override all language rules */
    html body .filter-card .form-label,
    html body .filter-section .form-label,
    html body[data-lang="ar"] .form-label,
    html body[data-lang="en"] .form-label,
    html body[data-lang="es"] .form-label,
    html[dir="rtl"] body .form-label,
    html[dir="ltr"] body .form-label {
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
    }
    
    /* Desktop: Larger filter dropdowns - MAXIMUM SPECIFICITY with html prefix */
    html body select#moodFilter,
    html body select#foodFilter,
    html body select#genreFilter,
    html body select#weatherFilter,
    html body select#timeFilter,
    html body select#durationFilter,
    html body select#musicFilter,
    html body select#locationFilter,
    html body select#occasionFilter,
    html body select#yearFilter,
    html body select#originFilter,
    html body select#productionTypeFilter,
    html body select#ageRatingFilter,
    html body .filter-select,
    html body .form-select.filter-select,
    html body[data-lang="ar"] .filter-select,
    html body[data-lang="en"] .filter-select,
    html body[data-lang="es"] .filter-select,
    html[dir="rtl"] body .filter-select,
    html[dir="ltr"] body .filter-select {
        font-size: 1.2rem !important;
        padding: 16px 20px !important;
        min-height: 56px !important;
        line-height: 1.4 !important;
    }
    
    /* Desktop: Larger dropdown options */
    html body select#moodFilter option,
    html body select#foodFilter option,
    html body select#genreFilter option,
    html body select#weatherFilter option,
    html body select#timeFilter option,
    html body select#durationFilter option,
    html body select#musicFilter option,
    html body select#locationFilter option,
    html body select#occasionFilter option,
    html body select#yearFilter option,
    html body select#originFilter option,
    html body select#productionTypeFilter option,
    html body select#ageRatingFilter option,
    html body .filter-select option,
    html body[data-lang="ar"] .filter-select option,
    html body[data-lang="en"] .filter-select option,
    html body[data-lang="es"] .filter-select option {
        font-size: 1.15rem !important;
        padding: 12px !important;
        line-height: 1.5 !important;
    }
    
    /* Desktop: Larger buttons */
    html body button#moreFiltersBtn,
    html body button#recommendBtn,
    html body .filter-card .btn,
    html body .filter-section .btn,
    html body[data-lang="ar"] .filter-section .btn,
    html body[data-lang="en"] .filter-section .btn {
        font-size: 1.25rem !important;
        padding: 16px 36px !important;
        min-height: 56px !important;
    }
    
    /* Desktop: Larger filter cards */
    html body .filter-card,
    html body .card.filter-card {
        padding: 35px !important;
    }
    
    html body .filter-card .card-body {
        padding: 30px !important;
    }
    
    /* Desktop: Larger spacing between filter groups */
    html body .filter-card .mb-3,
    html body .filter-section .mb-3 {
        margin-bottom: 24px !important;
    }
}