/* ========================================
   MOBILE SEARCH FIX - STANDALONE
   Add this to header or load separately
   ======================================== */

/* Hide on Desktop */
@media (min-width: 992px) {
    .mobile-search-item {
        display: none !important;
    }
}

/* Show on Mobile - Always visible when menu opens */
@media (max-width: 991px) {
    /* Mobile search item - Show always on mobile */
    ul#main-menu li.mobile-search-item {
        display: block !important;
        width: 100% !important;
        padding: 8px 16px 16px 16px !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
        margin-bottom: 16px !important;
        list-style: none !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
    }
    
    /* Ensure all menu items display properly */
    ul#main-menu.active li {
        display: block !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        clear: both !important;
    }
    
    /* Add space after search form - target first menu item after search */
    ul#main-menu.active li.mobile-search-item + li {
        margin-top: 24px !important;
        clear: both !important;
    }
    
    /* Ensure menu links are visible */
    ul#main-menu.active li a {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Search form */
    ul#main-menu li.mobile-search-item form.mobile-search-form {
        display: flex !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 8px !important;
        gap: 8px !important;
    }

    /* Input field */
    ul#main-menu li.mobile-search-item form.mobile-search-form input[type="text"] {
        flex: 1 !important;
        padding: 12px 16px !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
        color: #0A0A0F !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        outline: none !important;
    }

    /* Search button */
    ul#main-menu li.mobile-search-item form.mobile-search-form button[type="submit"] {
        background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
        color: white !important;
        border: none !important;
        padding: 12px 20px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 60px !important;
    }

    /* Button hover */
    ul#main-menu li.mobile-search-item form.mobile-search-form button[type="submit"]:hover {
        background: linear-gradient(135deg, #7C3AED, #6366F1) !important;
        transform: scale(1.05) !important;
    }
}
  
/* Mobile Header Layout - Hamburger Left, Search Right */  
@media (max-width: 991px) {  
    .movie-menu-top .mobile-buttons {  
        display: flex !important;  
        justify-content: space-between !important;  
        align-items: center !important;  
        width: 100%% !important;  
        gap: 16px !important;  
    }  
    .mobile-search-toggle {  
        display: flex !important;  
        margin-left: auto !important;  
    }  
    /* Hide search in menu, use button instead */  
    .mobile-search-item {  
        display: none !important;  
    }  
} 
  
/* Mobile Search Overlay */  
.mobile-search-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(10, 10, 15, 0.98);  
    backdrop-filter: blur(20px);  
    z-index: 9999;  
    display: none;  
    align-items: flex-start;  
    justify-content: center;  
    padding: 80px 20px;  
}  
  
.mobile-search-overlay.active {  
    display: flex;  
    animation: fadeIn 0.3s ease;  
}  
  
@keyframes fadeIn {  
    from { opacity: 0; }  
    to { opacity: 1; }  
}  
  
.mobile-search-container {  
    width: 100%%;  
    max-width: 600px;  
    position: relative;  
}  
  
.mobile-search-close {  
    position: absolute;  
    top: -60px;  
    right: 0;  
    background: rgba(255, 255, 255, 0.1);  
    border: 2px solid rgba(255, 255, 255, 0.2);  
    color: white;  
    width: 48px;  
    height: 48px;  
    border-radius: 50%%;  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 20px;  
}  
  
.mobile-search-form-overlay {  
    display: flex;  
    flex-direction: column;  
    gap: 16px;  
}  
  
.mobile-search-form-overlay input {  
    width: 100%%;  
    padding: 16px 20px;  
    border: 2px solid rgba(139, 92, 246, 0.3);  
    background: rgba(255, 255, 255, 0.95);  
    color: #0A0A0F;  
    border-radius: 12px;  
    font-size: 16px;  
    outline: none;  
}  
  
.mobile-search-form-overlay button {  
    width: 100%%;  
    padding: 16px;  
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);  
    color: white;  
    border: none;  
    border-radius: 12px;  
    font-size: 16px;  
    font-weight: 700;  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 8px;  
} 
  
/* Hero Announcement Redesign */  
.hero-announcement {  
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.12)) !important;  
    border: 1.5px solid rgba(139, 92, 246, 0.3) !important;  
    border-radius: 20px !important;  
    padding: 20px 32px !important;  
    margin-bottom: 32px !important;  
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2), 0 0 60px rgba(139, 92, 246, 0.1) !important;  
    backdrop-filter: blur(20px) !important;  
    position: relative !important;  
    overflow: hidden !important;  
}  
  
.hero-announcement::before {  
    content: '' !important;  
    position: absolute !important;  
    top: 0 !important;  
    left: 0 !important;  
    right: 0 !important;  
    bottom: 0 !important;  
    background: radial-gradient(circle at 30%% 50%%, rgba(139, 92, 246, 0.1), transparent 70%%) !important;  
    pointer-events: none !important;  
}  
  
.announcement-content {  
    position: relative !important;  
    z-index: 1 !important;  
    text-align: center !important;  
}  
  
.announcement-content p {  
    color: #F8FAFC !important;  
    font-size: 16px !important;  
    font-weight: 600 !important;  
    margin: 0 !important;  
    line-height: 1.6 !important;  
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;  
} 
  
/* Change Font to Bai Jamjuree */