/* Search Suggestions Fix untuk masalah terpotong */

/* Pastikan semua container parent tidak memotong suggestions */
.top-header,
.container-fluid,
.row,
.col-md-6,
.search-form {
    overflow: visible !important;
    position: relative;
}

/* Enhanced search suggestions untuk desktop */
@media (min-width: 769px) {
    .search-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 9999 !important; /* Very high z-index */
        max-height: 400px;
        overflow-y: auto;
        display: none;
        width: 100%;
        min-width: 450px; /* Ensure minimum width */
        margin-top: 0;
        /* Ensure suggestions are not clipped */
        transform: translateZ(0); /* Force hardware acceleration */
    }
    
    .search-suggestions.show {
        display: block;
        animation: slideDown 0.2s ease-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Ensure search form container doesn't clip */
    .top-header .col-md-6:has(.search-form) {
        overflow: visible !important;
        z-index: 1050;
    }
    
    /* Make sure suggestions appear above everything */
    .search-form:focus-within {
        z-index: 1051;
    }
    
    .search-form:focus-within .search-suggestions {
        z-index: 1052;
    }
}

/* Enhanced mobile search suggestions */
@media (max-width: 768px) {
    .mobile-search {
        overflow: visible !important;
        z-index: 1050;
    }
    
    .mobile-search .search-form {
        overflow: visible !important;
        z-index: 1051;
    }
    
    .mobile-search .search-suggestions {
        position: absolute;
        top: 100%;
        left: -10px; /* Extend beyond container */
        right: -10px; /* Extend beyond container */
        background: #1a1a1a;
        border: 1px solid rgba(212, 175, 55, 0.3);
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 1052 !important;
        max-height: 60vh;
        overflow-y: auto;
        display: none;
        width: calc(100% + 20px); /* Wider than container */
        margin-top: 0;
        transform: translateZ(0); /* Force hardware acceleration */
    }
    
    .mobile-search .search-suggestions.show {
        display: block;
        animation: slideDown 0.2s ease-out;
    }
    
    .mobile-search .suggestion-item {
        padding: 15px 20px; /* Extra padding due to wider container */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: var(--light-text);
        min-height: 52px;
        display: flex;
        align-items: center;
    }
    
    .mobile-search .suggestion-item:hover {
        background-color: rgba(212, 175, 55, 0.1);
        color: var(--accent-color);
    }
}

/* Dark mode suggestions */
.dark-mode .search-suggestions {
    background: #2c2c2c !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .suggestion-item {
    border-bottom-color: #444 !important;
    color: #e0e0e0 !important;
}

.dark-mode .suggestion-item:hover {
    background-color: #3a3a3a !important;
    color: var(--accent-color) !important;
}

.dark-mode .suggestion-text {
    color: #e0e0e0 !important;
}

.dark-mode .suggestion-subtitle {
    color: #bbb !important;
}

/* Fallback untuk browser yang tidak support :has() */
.top-header .row,
.top-header .container-fluid {
    position: static;
}

/* Force proper stacking context */
header {
    position: sticky;
    z-index: 1000;
    isolation: isolate; /* Create stacking context */
}

.top-header {
    position: relative;
    z-index: 1001;
    isolation: isolate;
}

.search-form {
    position: relative;
    z-index: 1002;
    isolation: isolate;
}

/* Debug untuk testing - hapus setelah fix */
/* .search-suggestions {
    border: 2px solid red !important;
} */

/* Additional fixes untuk container constraints */
body {
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto; /* Allow vertical scroll */
}

.container-fluid {
    overflow: visible !important;
    max-width: none !important;
}

/* Responsive container fixes */
@media (max-width: 1200px) {
    .search-suggestions {
        min-width: 350px;
    }
}

@media (max-width: 992px) {
    .search-suggestions {
        min-width: 300px;
    }
}

/* Accessibility improvements */
.suggestion-item:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
    background-color: rgba(212, 175, 55, 0.1);
}

/* Smooth scrolling for suggestion list */
.search-suggestions {
    scroll-behavior: smooth;
}

/* Better touch targets for mobile */
@media (pointer: coarse) {
    .suggestion-item {
        min-height: 48px;
        padding: 12px 16px;
    }
}