/*
 * Shared styling for the search-widget.js autocomplete rows. Loaded
 * globally (not just on pages that @include partials/search-widget.blade.php)
 * because some pages (e.g. the homepage) wire up window.initSearchWidget()
 * directly against their own pre-existing markup/box CSS instead of using
 * the partial's generated markup, and still need these row styles.
 *
 * Deliberately does NOT touch box/li positioning (position, max-height,
 * padding, display) — pages that already style their own suggestion box
 * (the site-wide .suggestion-box in style.css, or header-map-listing.blade.php's
 * own .navbar-suggest-box inline <style>) keep doing so; this file only
 * fills in the row-content layout those box styles don't cover.
 */

.suggestion-item {
    gap: 10px;
}

.suggestion-item > i {
    flex-shrink: 0;
}

.suggestion-item .sugg-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 auto;
}

.suggestion-item .sugg-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-item .sugg-sub {
    font-size: 12px;
    color: #9aa0a6;
}

.suggestion-item .sugg-count {
    font-size: 12px;
    color: #9aa0a6;
    flex-shrink: 0;
    margin-left: 8px;
}

html[lang="ar"] .suggestion-item .sugg-count {
    margin-left: 0;
    margin-right: 8px;
}

.suggestion-item.is-highlighted {
    background-color: #f7f7f7;
}

.suggestion-item.did-you-mean-item .sugg-title {
    font-style: italic;
}

.recent-remove {
    border: none;
    background: transparent;
    color: #9aa0a6;
    margin-left: auto;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.recent-remove:hover {
    color: #555;
}

.no-suggestions {
    padding: 10px 16px;
    color: #9aa0a6;
    font-size: 13px;
    margin: 0;
}

.recent-searches-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa0a6;
    font-weight: 700;
    margin: 12px 16px 6px;
}

/* front-end/home/search-bar.blade.php's clear icon (#main-search /
   #clearIcon, absolutely positioned inside the input) is hardcoded to the
   right edge, which is correct for LTR but sits on the "wrong" side for
   Arabic — RTL input text starts from the right, so the clear affordance
   belongs at the left (the trailing edge in reading direction), matching
   where header-map-listing.blade.php's own clear button already ends up
   via its order:1/2 flex flip. */
html[lang="ar"] #clearIcon {
    /* !important needed: the element's own inline style="...right:10px..."
       (in search-bar.blade.php) otherwise always wins over any external
       stylesheet rule regardless of selector specificity. */
    right: auto !important;
    left: 10px !important;
}


html[lang="en"] #main-search {
    padding-right: 30px;
}

html[lang="ar"] #main-search {
    padding-right: 12px;
    padding-left: 30px;
}

.recent-remove{
    cursor: pointer;
}