/* Custom Search Styles to fix suggestion positioning */

/* ONLY ESSENTIAL STYLING FOR SUGGESTIONS */
.search-form {
    position: relative;
}

/* We don't need to modify these unless necessary for suggestions */
/*
.search-form .search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.search-form .search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.search-form .search-field-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-field {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
*/

/* This is the key part for fixing suggestions - keep this */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    margin-top: -1px;
    direction: rtl !important; /* Always use RTL for suggestions */
    text-align: right !important;
}

/* EXTREME RTL ENFORCEMENT */
/* This targets ALL elements inside suggestion container */
.search-suggestions *,
.suggestion-section,
.suggestion-section *,
.suggestion-item,
.suggestion-item *,
.suggestion-title,
.suggestion-term,
.rtl-active {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: bidi-override !important;
}

/* Fix item layout with !important */
.suggestion-item {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    color: inherit !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

.suggestion-item:hover {
    background-color: #f5f5f5 !important;
}

/* Text content styling - with !important */
.suggestion-title,
.suggestion-term {
    flex: 1 !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
    text-align: right !important;
    direction: rtl !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
}

.suggestion-section h4 {
    margin: 0 0 8px !important;
    text-align: right !important;
    direction: rtl !important;
    padding: 0 8px !important;
    font-size: 0.9em !important;
    color: #666 !important;
}

.suggestion-count {
    font-size: 0.8em !important;
    color: #666 !important;
    padding: 2px 6px !important;
    background: #eee !important;
    border-radius: 3px !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
}

/* Super strong selectors for Arabic text */
[lang="ar"],
.arabic-text,
.suggestion-title,
.suggestion-term,
.suggestion-section h4 {
    direction: rtl !important;
    text-align: right !important;
    unicode-bidi: bidi-override !important;
}

/* Don't override voice button styling if it's working */
/*
.voice-search-button {
    position: absolute;
    right: 10px;
}
*/

/* RTL Support - Using !important to override any other styles */
html[dir="rtl"] .search-suggestions {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .suggestion-section {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .suggestion-section h4 {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .suggestion-item {
    text-align: right !important;
    direction: rtl !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] .suggestion-title,
html[dir="rtl"] .suggestion-term {
    margin-right: 0 !important;
    margin-left: 10px !important;
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .suggestion-count {
    margin-right: 10px !important;
    margin-left: 0 !important;
}

/* Force RTL for Arabic text */
[lang="ar"], 
.arabic-text,
.suggestion-title,
.suggestion-term,
.suggestion-section h4 {
    unicode-bidi: embed;
}

html[dir="rtl"] [lang="ar"],
html[dir="rtl"] .arabic-text,
html[dir="rtl"] .suggestion-title,
html[dir="rtl"] .suggestion-term,
html[dir="rtl"] .suggestion-section h4 {
    unicode-bidi: bidi-override;
    direction: rtl !important;
}