/**
 * SearchBarWidget Styles
 *
 * Sections:
 * 1. Base widget styles
 * 2. Input and form
 * 3. Tabs
 * 4. Dropdown panel
 * 5. Result groups and items
 * 6. Text highlighting
 * 7. Loading skeleton
 * 8. Empty state (recent + popular)
 * 9. Dropdown footer
 * 10. Clear & back buttons
 * 11. Rotating placeholder animation
 * 12. Mobile overlay
 * 13. Dark theme overrides
 */

/* =============================================================================
   1. BASE WIDGET STYLES
   ============================================================================= */

.search-bar-widget {
    position: relative;
}

.search-bar-hero {
    max-width: 800px;
    margin: 0 auto;
}

/* Hero tabs wrap like every other layout (the base .search-bar-tabs rule in
   section 3). They used to be flex-wrap: nowrap with no overflow handling,
   so 8+ targets inside a Normal (800px) width spilled past the card and
   onto whatever sat behind it - e.g. a hero photo under a floated searcher.
   A single scrolling row is now an explicit choice
   (.search-bar-tabs--overflow-scroll). */
.search-bar-hero .search-bar-tabs {
    max-width: none;
}

.search-bar-wide {
    max-width: none;
}

/* Width preset - independent of layout (Hero/Compact/Inline), set only by
 * SearchSectionWidget (the website-builder Search section). !important
 * because it must win over the layout's own hardcoded width (e.g.
 * .search-bar-hero's 800px cap above) when both classes land on the same
 * element - an explicit user choice always overrides the layout default. */
.search-bar-width-narrow {
    max-width: 640px !important;
    margin: 0 auto !important;
}

.search-bar-width-normal {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.search-bar-width-full {
    max-width: none !important;
    margin: 0 !important;
}

/* Mobile hero keeps its one-row swipe strip - unless the author picked an
   explicit overflow mode in the Search section (search-bar-tabs--overflow-*),
   which then wins on every viewport. */
@media (max-width: 767.98px) {
    .search-bar-hero .search-bar-tabs:not(.search-bar-tabs--overflow-wrap) {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }

    .search-bar-hero .search-bar-tabs::-webkit-scrollbar {
        display: none;
    }

    .search-bar-hero .search-bar-tabs .search-bar-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .search-bar-tab {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    .search-bar-tab i {
        font-size: 0.625rem;
    }
}

.search-bar-compact .search-bar-input-wrapper {
    max-width: none;
}

/* =============================================================================
   2. INPUT AND FORM
   ============================================================================= */

.search-bar-input-wrapper {
    position: relative;
}

/* Always present (see widgets/views/search-bar.php) so the query input's own
   buttons (clear / submit / help) keep positioning against IT rather than
   jumping to the far edge of the wrapper once a location segment is added
   beside it - identical width/position to the wrapper when no location
   segment exists, so this is a no-op for every non-location search bar. */
.search-bar-query-segment {
    position: relative;
}

.search-bar-hero .search-bar-input {
    padding: 1rem 3.5rem 1rem 3rem;
    font-size: 1.125rem;
    border-radius: var(--radius-lg, 0.5rem);
    border: 2px solid var(--border-color, #dee2e6);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar-hero .search-bar-input:focus {
    border-color: var(--color-primary-500, #3aa8e0);
    box-shadow: 0 0 0 0.2rem rgba(58, 168, 224, 0.15);
}

.search-bar-compact .search-bar-input {
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
}

.search-bar-inline .search-bar-input {
    padding: 0.625rem 3rem 0.625rem 2.75rem;
    border-radius: var(--radius-md, 0.375rem);
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
}

.search-bar-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.125rem;
    transition: color 0.2s;
    z-index: 2;
}

.search-bar-btn:hover {
    color: var(--color-primary-500, #3aa8e0);
}

/* =============================================================================
   2b. LOCATION SEGMENT (search-bar-has-location modifier)

   Mirrors the three-segment pill bar already shipped for listing pages
   (web/css/website-explorer.css: .website-listing-search--bar), copying its
   values rather than its class names - that stylesheet isn't loaded here,
   and its hardcoded 720px cap / pill radius would fight this widget's own
   layout (hero/compact/inline) and width (narrow/normal/full) scales.
   ============================================================================= */

.search-bar-has-location .search-bar-input-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-full, 999px);
    box-shadow: var(--shadow-xs);
    padding: 0.25rem;
}

.search-bar-has-location .search-bar-query-segment {
    flex: 1 1 0;
    min-width: 0;
}

.search-bar-has-location .search-bar-location {
    flex: 0.42 1 160px;
    min-width: 160px;
}

.search-bar-has-location .search-bar-input,
.search-bar-has-location .search-bar-location {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: var(--radius-full, 999px);
    width: 100%;
    height: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* The location <input> is a direct flex child of the wrapper (the query input
   sits inside its own segment div). Its `height: 100%` above resolves against
   an auto-height wrapper, which also disables align-items: stretch - so it fell
   back to its content height and sat at the top of the bar, its placeholder
   visibly higher than the query's. `auto` lets it stretch to the row like the
   query segment, and the UA's vertical text centring does the rest. Row
   layout only: in the phone column (max-width: 575.98px below) a stretchable
   input would grow to its 160px flex-basis as a HEIGHT. */
@media (min-width: 576px) {
    .search-bar-has-location .search-bar-location {
        height: auto;
    }
}

.search-bar-has-location .search-bar-query-segment {
    border-right: 1px solid var(--border-color, #dee2e6);
}

.search-bar-has-location .search-bar-input:focus,
.search-bar-has-location .search-bar-location:focus {
    box-shadow: none;
}

/* The location input has no layout-scoped rule of its own (unlike
   .search-bar-input above) - match whichever layout is active so the two
   segments read as one field, not two mismatched font sizes. */
.search-bar-hero.search-bar-has-location .search-bar-location {
    font-size: 1.125rem;
}
.search-bar-compact.search-bar-has-location .search-bar-location {
    font-size: 0.875rem;
}

.search-bar-explore-btn {
    flex: 0 0 auto;
    background: var(--color-primary-500, #3aa8e0);
    color: #fff;
    border: 0;
    border-radius: var(--radius-full, 999px);
    padding: 0 1.5rem;
    font-weight: 600;
    white-space: nowrap;
}

.search-bar-explore-btn:hover {
    background: var(--color-primary-600, #2f8dbd);
}

@media (max-width: 575.98px) {
    .search-bar-has-location .search-bar-input-wrapper {
        flex-direction: column;
        border-radius: var(--radius-xl, 0.75rem);
    }
    .search-bar-has-location .search-bar-query-segment {
        border-right: 0;
        border-bottom: 1px solid var(--border-color, #dee2e6);
    }
    /* Stacked, the row's `flex: 0.42 1 160px` turns into a 160px-tall
       location field (flex-basis is a height in a column). Size it to its
       content instead, padded like the hero query field above it. */
    .search-bar-has-location .search-bar-location {
        flex: 0 0 auto;
        min-width: 0;
    }
    .search-bar-hero.search-bar-has-location .search-bar-location {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .search-bar-explore-btn {
        border-radius: 0 0 var(--radius-xl, 0.75rem) var(--radius-xl, 0.75rem);
        padding: 0.75rem;
    }
}

/* =============================================================================
   2c. SEARCHER BACKGROUND CARD (search-bar-has-card + search-bar-bg-* on the
   widget root, config[barBg] on the website-builder Search section -
   widgets/SearchSectionWidget.php)

   ONE shared card behind the tabs AND the input row - not a per-piece tint.
   A searcher floated onto a hero (.website-section--float-prev) needs a
   single surface to blend into the photo, the way a Booking.com-style search
   widget reads as one card; tinting each pill separately still leaves them
   looking like several small cutouts pasted on the photo.

   No class here = --search-bar-bg/-fg unset and .search-bar-has-card absent,
   so every other caller (platform homepage, header search, listing bars) is
   byte-identical to before this block existed.

   --search-bar-bg-alpha (0-1), --search-bar-card-pad (px) and --search-bar-blur
   (px) are set inline by widgets/views/search-bar.php whenever a token is
   chosen. Each token blends its own base color through color-mix() so
   Opacity behaves the same way across every token, solid or glass alike.
   ============================================================================= */

/* Corners + elevation follow the org's Appearance settings, same fallback
   chain as every other card-like surface on the site (e.g. --acct-radius-panel
   / --acct-shadow in web/css/variables.css) - --website-radius-lg comes from
   the Corner Radius picker, --website-card-shadow/-border from Card Style
   (helpers/OrgWebsiteBrandingHelper.php). Unset on both (no Appearance
   customization) falls through to this card's own tuned defaults, so nothing
   changes visually until an org actually picks a Corner Radius or Card Style. */
.search-bar-has-card {
    background: var(--search-bar-bg, transparent);
    color: var(--search-bar-fg, inherit);
    padding: var(--search-bar-card-pad, 1.25rem);
    border-radius: var(--website-radius-lg, var(--radius-xl, 1rem));
    border: var(--website-card-border, none);
    box-shadow: var(--website-card-shadow, var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.15)));
}

.search-bar-has-card.search-bar-compact {
    padding: var(--search-bar-card-pad, 0.85rem);
    border-radius: var(--website-radius-lg, var(--radius-lg, 0.75rem));
}

/* Section header inside the card (.search-bar-card-header). A website-builder
   Search section floated over the section above renders its eyebrow / title /
   subtitle here instead of above the card (views/website/_section.php swaps
   SearchBarWidget::HEADER_SLOT_MARKER), so the card's top IS the section's top
   and the overlap is exact. Text follows the card foreground; an explicit
   title/eyebrow/subtitle colour is inline and still wins. Spacing is tightened
   to card scale - the section-level defaults (48px under the title) are sized
   for a full band, not a card. */
.search-bar-card-header {
    margin-bottom: var(--space-4, 1rem);
    text-align: var(--website-title-align, center);
}
.search-bar-card-header .website-section-title,
.search-bar-card-header .website-section-subtitle {
    color: inherit;
}
.search-bar-card-header .website-section-title {
    margin-bottom: var(--wb-delim-gap-bottom, var(--space-3, 0.75rem));
}
.search-bar-card-header .website-section-subtitle {
    margin-bottom: 0;
    opacity: 0.85;
}

/* Transparent (config[barBg] = "none"): a card shape with no fill reads as a
   floating shadow with nothing inside it - drop the shadow and outline it
   instead, matching the "just the border" promise in its builder hint text.
   Deliberately its own outline, not --website-card-border - that token is
   meant for a FILLED card's flat-style edge, not this token's "no fill at
   all" look. */
.search-bar-has-card.search-bar-bg-none {
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--search-bar-fg, #ffffff) 35%, transparent);
}

.search-bar-has-card.search-bar-bg-glass,
.search-bar-has-card.search-bar-bg-glass-dark {
    box-shadow: var(--website-card-shadow, var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.12)));
}

/* Tabs and fields become ghost/outlined content ON the card, not separately
   filled pills - one surface, not a row of competing surfaces. Placed BEFORE
   section 3's hover/active tab rule below so that rule's equal specificity
   wins the cascade tie and keeps its own primary fill on hover/active. */
.search-bar-has-card .search-bar-tab {
    background: transparent;
    border-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 25%, transparent);
    color: var(--search-bar-fg, inherit);
}

.search-bar-has-card .search-bar-input {
    background: transparent;
    border-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 22%, transparent);
    color: var(--search-bar-fg, inherit);
}

/* .search-bar-has-card and .search-bar-has-location both land on the widget
   root itself (widgets/views/search-bar.php), not one nested in the other -
   these must be a compound selector (no space), not a descendant combinator,
   or they silently never match and the pill keeps its opaque base fill. */
.search-bar-has-card.search-bar-has-location .search-bar-input-wrapper {
    background: transparent;
    border-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 22%, transparent);
}

.search-bar-has-card.search-bar-has-location .search-bar-query-segment {
    border-right-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 18%, transparent);
}

.search-bar-bg-light {
    --search-bar-bg: color-mix(in srgb, var(--website-bg-light, #ffffff) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--website-fg-light, #18181b);
}

.search-bar-bg-dark {
    --search-bar-bg: color-mix(in srgb, var(--website-bg-dark, #18181b) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--website-fg-dark, #fafafa);
}

.search-bar-bg-surface {
    --search-bar-bg: color-mix(in srgb, var(--website-bg, var(--bg-primary)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--website-fg, var(--text-primary));
}

.search-bar-bg-primary {
    --search-bar-bg: color-mix(in srgb, var(--color-primary-600) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: #ffffff;
}

.search-bar-bg-secondary {
    --search-bar-bg: color-mix(in srgb, var(--color-secondary-600) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: #ffffff;
}

/* Custom brand hex: the raw hex and its YIQ contrast colour arrive inline as
   --search-bar-custom / --search-bar-custom-fg (widgets/views/search-bar.php,
   views/website/_listing-header-content.php) and the fill is derived here, so
   Opacity applies (a literal inline --search-bar-bg used to override this rule
   and silently ignore it). */
.search-bar-bg-custom {
    --search-bar-bg: color-mix(in srgb, var(--search-bar-custom, var(--bg-primary)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--search-bar-custom-fg, inherit);
}

/* Opt-in dark-mode treatment for a fixed searcher card (config barBgDark,
   same Keep / Soften / Use Surface vocabulary as section backgrounds -
   OrgWebsiteSection::getDarkModeTreatments()). Only Light / Primary /
   Secondary / custom hex take it; the class is only emitted for those.
   --search-bar-base is the colour Soften tints with. Opacity still applies. */
.search-bar-bg-light { --search-bar-base: var(--website-bg-light, #ffffff); }
.search-bar-bg-primary { --search-bar-base: var(--color-primary-600); }
.search-bar-bg-secondary { --search-bar-base: var(--color-secondary-600); }
.search-bar-bg-custom { --search-bar-base: var(--search-bar-custom); }

[data-theme="dark"] .search-bar-darkmode-soften {
    --search-bar-bg: color-mix(in srgb, color-mix(in srgb, var(--search-bar-base) 22%, var(--website-bg-dark, #18181b)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--website-fg-dark, #fafafa);
}
[data-theme="dark"] .search-bar-darkmode-surface {
    --search-bar-bg: color-mix(in srgb, var(--website-bg, var(--bg-primary)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
    --search-bar-fg: var(--website-fg, var(--text-primary));
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .search-bar-darkmode-soften {
        --search-bar-bg: color-mix(in srgb, color-mix(in srgb, var(--search-bar-base) 22%, var(--website-bg-dark, #18181b)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
        --search-bar-fg: var(--website-fg-dark, #fafafa);
    }
    html:not([data-theme]) .search-bar-darkmode-surface {
        --search-bar-bg: color-mix(in srgb, var(--website-bg, var(--bg-primary)) calc(var(--search-bar-bg-alpha, 1) * 100%), transparent);
        --search-bar-fg: var(--website-fg, var(--text-primary));
    }
}

.search-bar-bg-none {
    --search-bar-bg: transparent;
}

.search-bar-bg-glass,
.search-bar-bg-glass-dark {
    -webkit-backdrop-filter: blur(var(--search-bar-blur, 12px)) saturate(160%);
    backdrop-filter: blur(var(--search-bar-blur, 12px)) saturate(160%);
}

.search-bar-bg-glass {
    --search-bar-bg: rgba(255, 255, 255, var(--search-bar-bg-alpha, 0.7));
    --search-bar-fg: #18181b;
}

.search-bar-bg-glass-dark {
    --search-bar-bg: rgba(24, 24, 27, var(--search-bar-bg-alpha, 0.55));
    --search-bar-fg: #fafafa;
}

/* The location <input> doesn't inherit `color` (form controls default to the
   UA field text colour, which flips with the page's colour scheme) - so on a
   fixed-light card in dark mode it rendered pale-on-pale. Tie it to the card. */
.search-bar-has-card .search-bar-location {
    color: var(--search-bar-fg, inherit);
}

/* Readable placeholder text on EVERY card fill - the browser default
   placeholder color ignores `color` and follows the page's colour scheme, so
   on a card whose fill doesn't match the page mode (e.g. a Light card on a
   dark-mode page) it washed out. Tied to the card's own foreground instead. */
.search-bar-has-card .search-bar-input::placeholder,
.search-bar-has-card .search-bar-location::placeholder {
    color: var(--search-bar-fg, currentColor);
    opacity: 0.7;
}

/* =============================================================================
   3. TABS
   ============================================================================= */

.search-bar-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.search-bar-tab {
    padding: 0.375rem 1rem;
    border-radius: var(--radius-full, 50rem);
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.search-bar-tab i {
    font-size: 0.75rem;
}

.search-bar-tab:hover,
.search-bar-tab.active {
    background: var(--color-primary-500, #3aa8e0);
    border-color: var(--color-primary-500, #3aa8e0);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   3b. TAB PRESENTATION MODIFIERS (website-builder Search section only -
   SearchSectionWidget tabStyle / tabIcons / tabAlign / tabOverflow; every
   other caller renders none of these classes)
   ----------------------------------------------------------------------------- */

/* Tabs: an underlined tab strip on a hairline baseline */
.search-bar-tabs--tabs {
    gap: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--search-bar-fg, var(--text-secondary, #6c757d)) 22%, transparent);
}

.search-bar-tabs--tabs .search-bar-tab,
.search-bar-tabs--tabs .search-bar-tab:hover,
.search-bar-tabs--tabs .search-bar-tab.active {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 0.5rem 0.75rem;
    color: var(--search-bar-fg, var(--text-secondary, #6c757d));
}

.search-bar-tabs--tabs .search-bar-tab:hover {
    border-bottom-color: color-mix(in srgb, var(--color-primary-500, #3aa8e0) 45%, transparent);
}

.search-bar-tabs--tabs .search-bar-tab.active {
    border-bottom-color: var(--color-primary-500, #3aa8e0);
    color: var(--search-bar-fg, var(--text-primary, #212529));
    font-weight: 600;
}

/* Links: plain text, dot-separated */
.search-bar-tabs--links {
    gap: 0.25rem 0;
}

.search-bar-tabs--links .search-bar-tab,
.search-bar-tabs--links .search-bar-tab:hover,
.search-bar-tabs--links .search-bar-tab.active {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    color: var(--search-bar-fg, var(--text-secondary, #6c757d));
}

.search-bar-tabs--links .search-bar-tab + .search-bar-tab::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.search-bar-tabs--links .search-bar-tab:hover .search-bar-tab-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.search-bar-tabs--links .search-bar-tab.active {
    color: var(--color-primary-500, #3aa8e0);
    font-weight: 600;
}

/* Segmented: one joined button group */
.search-bar-tabs--segmented {
    gap: 0;
}

.search-bar-tabs--segmented .search-bar-tab {
    border-radius: 0;
    margin-left: -1px;
}

.search-bar-tabs--segmented .search-bar-tab:first-child {
    margin-left: 0;
    border-top-left-radius: var(--radius-full, 50rem);
    border-bottom-left-radius: var(--radius-full, 50rem);
}

.search-bar-tabs--segmented .search-bar-tab:last-child {
    border-top-right-radius: var(--radius-full, 50rem);
    border-bottom-right-radius: var(--radius-full, 50rem);
}

/* A wrapped segmented group reads as broken pill halves - keep it square */
.search-bar-tabs--segmented:not(.search-bar-tabs--overflow-scroll) .search-bar-tab {
    margin-bottom: -1px;
}

.search-bar-tabs--segmented .search-bar-tab.active,
.search-bar-tabs--segmented .search-bar-tab:hover {
    position: relative;
    z-index: 1;
}

/* Icons */
.search-bar-tabs--icons-label .search-bar-tab i {
    display: none;
}

.search-bar-tabs--icons-icon .search-bar-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.search-bar-tabs--icons-icon .search-bar-tab {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.search-bar-tabs--icons-icon .search-bar-tab i {
    font-size: 0.9375rem;
}

/* Alignment */
.search-bar-tabs--align-start {
    justify-content: flex-start;
}

.search-bar-tabs--align-center {
    justify-content: center;
}

.search-bar-tabs--align-end {
    justify-content: flex-end;
}

.search-bar-tabs--align-stretch .search-bar-tab {
    flex: 1 1 0;
    justify-content: center;
    white-space: nowrap;
}

/* Overflow: one row that scrolls sideways, fading only the edges that still
   hide tabs (is-scrollable-start/-end, toggled by web/js/search-bar.js). */
.search-bar-tabs--overflow-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    --search-bar-fade-start: 0px;
    --search-bar-fade-end: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--search-bar-fade-start), #000 calc(100% - var(--search-bar-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--search-bar-fade-start), #000 calc(100% - var(--search-bar-fade-end)), transparent 100%);
}

.search-bar-tabs--overflow-scroll::-webkit-scrollbar {
    display: none;
}

.search-bar-tabs--overflow-scroll .search-bar-tab {
    flex-shrink: 0;
    white-space: nowrap;
}

.search-bar-tabs--overflow-scroll.search-bar-tabs--align-stretch .search-bar-tab {
    flex: 1 0 auto;
}

.search-bar-tabs--overflow-scroll.is-scrollable-start {
    --search-bar-fade-start: 2.5rem;
}

.search-bar-tabs--overflow-scroll.is-scrollable-end {
    --search-bar-fade-end: 2.5rem;
}

/* Dropdown style: the type <select> as the bar's first segment. Turns the
   input wrapper into a flex row the same way the location segment does
   (section 2b) - reusing .search-bar-has-location's fused-bar look when
   both are on, and drawing its own bordered bar when only this is on. */
.search-bar-has-type-select .search-bar-input-wrapper {
    display: flex;
    align-items: stretch;
}

.search-bar-has-type-select .search-bar-query-segment {
    flex: 1 1 0;
    min-width: 0;
}

.search-bar-type-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 40%;
    border: 1px solid var(--border-color, #dee2e6);
    border-right: 0;
    border-radius: var(--radius-md, 0.375rem) 0 0 var(--radius-md, 0.375rem);
    background-color: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    font-weight: 500;
    padding-left: 1rem;
    cursor: pointer;
}

.search-bar-type-select:focus {
    box-shadow: none;
    border-color: var(--color-primary-500, #3aa8e0);
}

.search-bar-has-type-select:not(.search-bar-has-location) .search-bar-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.search-bar-hero.search-bar-has-type-select:not(.search-bar-has-location) .search-bar-type-select {
    border-width: 2px;
    border-radius: var(--radius-lg, 0.5rem) 0 0 var(--radius-lg, 0.5rem);
    font-size: 1.125rem;
}

.search-bar-compact .search-bar-type-select {
    font-size: 0.875rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Inside the fused location bar: a borderless segment with a divider */
.search-bar-has-location .search-bar-type-select {
    border: 0;
    border-right: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-full, 999px) 0 0 var(--radius-full, 999px);
    background-color: transparent;
}

.search-bar-hero.search-bar-has-location .search-bar-type-select {
    font-size: 1.125rem;
}

/* Searcher background card: ghost the select like the other fields */
.search-bar-has-card .search-bar-type-select {
    background-color: transparent;
    color: var(--search-bar-fg, inherit);
    border-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 22%, transparent);
}

.search-bar-has-card .search-bar-type-select option {
    color: #212529;
}

@media (max-width: 575.98px) {
    .search-bar-has-type-select:not(.search-bar-has-location) .search-bar-input-wrapper {
        flex-direction: column;
    }
    .search-bar-has-type-select:not(.search-bar-has-location) .search-bar-type-select {
        max-width: none;
        border-right: 1px solid var(--border-color, #dee2e6);
        border-bottom: 0;
        border-radius: var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0 0;
    }
    .search-bar-has-type-select:not(.search-bar-has-location) .search-bar-input {
        border-radius: 0 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem);
    }
    .search-bar-has-location .search-bar-type-select {
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--border-color, #dee2e6);
        border-radius: var(--radius-xl, 0.75rem) var(--radius-xl, 0.75rem) 0 0;
    }
}

/* =============================================================================
   4. DROPDOWN PANEL
   ============================================================================= */

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1));
    z-index: var(--z-dropdown, 10);
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;

    /* Slide-down animation */
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.search-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Dropdown above input (used on listing pages so the dropdown does
   not overflow into the toolbar/grid below the hero). */
.search-bar-dropdown-above .search-dropdown {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.5rem;
    transform: translateY(8px);
}

.search-bar-dropdown-above .search-dropdown.is-open {
    transform: translateY(0);
}

/* Portaled to <body> by search-bar.js (portalDropdown()) when this search
 * bar sits inside a website-builder section - `.website-section { overflow:
 * hidden }` would otherwise clip the dropdown whenever its own section is
 * short (e.g. the last section right before the footer), making it read as
 * stuck behind the footer instead of in front of it. left/width/top/bottom
 * are set inline (positionPortal()) to track the input's on-screen position;
 * this just switches the anchor to the viewport and clears the CSS anchor
 * that no longer applies once the node is no longer a descendant of
 * .search-bar-widget / .search-bar-dropdown-above. */
.search-dropdown-portaled {
    position: fixed;
    right: auto;
    margin: 0;
    z-index: var(--z-overlay, 1040);
}

/* Scrollbar styling */
.search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.search-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-color, #dee2e6);
    border-radius: 3px;
}

/* =============================================================================
   5. RESULT GROUPS AND ITEMS
   ============================================================================= */

.search-result-group {
    padding: 0.5rem 0;
}

.search-result-group + .search-result-group {
    border-top: 1px solid var(--border-muted, #e9ecef);
}

.search-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
}

.search-result-header-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.search-result-header-label i {
    font-size: 0.625rem;
}

.search-see-all {
    font-size: 0.75rem;
    color: var(--color-primary-500, #3aa8e0);
    text-decoration: none;
    font-weight: 500;
}

.search-see-all:hover {
    color: var(--color-primary-700, #1d74a3);
    text-decoration: underline;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-primary, #212529);
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: var(--radius-md, 0.375rem);
    margin: 0 0.5rem;
}

.search-result-item:hover,
.search-result-item.is-highlighted {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    text-decoration: none;
}

.search-result-thumb-wrap {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.search-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.375rem);
    object-fit: cover;
    background: var(--bg-secondary, #f8f9fa);
}

.search-result-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.375rem);
    background: var(--bg-secondary, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #6c757d);
    font-size: 1rem;
}

.search-result-info {
    min-width: 0;
    flex: 1;
}

.search-result-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================================================
   6. TEXT HIGHLIGHTING
   ============================================================================= */

.search-highlight {
    background: var(--color-primary-100, #d5eefb);
    color: var(--color-primary-800, #1c5f86);
    border-radius: 2px;
    padding: 0 1px;
}

/* =============================================================================
   7. LOADING SKELETON
   ============================================================================= */

.search-loading {
    padding: 0.75rem;
}

.search-skeleton-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
}

.search-skeleton-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.375rem);
    background: var(--bg-secondary, #f8f9fa);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.search-skeleton-text {
    flex: 1;
}

.search-skeleton-line {
    border-radius: var(--radius-sm, 0.125rem);
    background: var(--bg-secondary, #f8f9fa);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.search-skeleton-title {
    width: 60%;
    height: 14px;
    margin-bottom: 6px;
}

.search-skeleton-sub {
    width: 40%;
    height: 10px;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* =============================================================================
   8. EMPTY STATE (RECENT SEARCHES + POPULAR)
   ============================================================================= */

.search-empty-state {
    padding: 0.75rem;
}

/* Recent searches */
.search-recent-section {
    margin-bottom: 0.5rem;
}

.search-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.5rem 0.5rem;
}

.search-recent-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.search-recent-label i {
    font-size: 0.625rem;
}

.search-recent-clear {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    text-decoration: none;
}

.search-recent-clear:hover {
    color: var(--color-danger, #dc3545);
}

.search-recent-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--text-primary, #212529);
    cursor: pointer;
    border-radius: var(--radius-md, 0.375rem);
    transition: background-color 0.15s;
    font-size: 0.875rem;
}

.search-recent-item > i {
    color: var(--text-muted, #6c757d);
    font-size: 0.75rem;
    width: 16px;
    text-align: center;
}

.search-recent-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-recent-item:hover,
.search-recent-item.is-highlighted {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    text-decoration: none;
}

.search-recent-remove {
    background: none;
    border: none;
    padding: 0.125rem 0.25rem;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    font-size: 0.625rem;
}

.search-recent-item:hover .search-recent-remove {
    opacity: 1;
}

.search-recent-remove:hover {
    color: var(--color-danger, #dc3545);
}

/* Popular categories */
.search-popular-section {
    padding: 0.25rem 0.5rem;
}

.search-popular-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.search-popular-label i {
    font-size: 0.625rem;
    color: var(--color-warning, #ffc107);
}

.search-popular-tags {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.search-popular-tag {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 50rem);
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.search-popular-tag:hover {
    background: var(--color-primary-50, #eef8fd);
    color: var(--color-primary-600, #2490c8);
    border-color: var(--color-primary-200, #b0dff7);
}

/* No results */
.search-no-results {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-muted, #6c757d);
}

.search-no-results i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.5;
}

.search-no-results p {
    margin: 0;
    font-size: 0.875rem;
}

/* =============================================================================
   9. DROPDOWN FOOTER
   ============================================================================= */

.search-dropdown-footer {
    border-top: 1px solid var(--border-muted, #e9ecef);
    padding: 0.75rem 1rem;
}

.search-footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--color-primary-500, #3aa8e0);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s;
}

.search-footer-link:hover {
    color: var(--color-primary-700, #1d74a3);
}

.search-footer-link i {
    font-size: 0.75rem;
}

/* =============================================================================
   10. CLEAR & BACK BUTTONS
   ============================================================================= */

.search-bar-clear-btn {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-size: 0.875rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, color 0.15s, visibility 0.15s;
    z-index: 2;
}

.search-bar-clear-btn.is-visible {
    opacity: 1;
    visibility: visible;
}

.search-bar-clear-btn:hover {
    color: var(--text-primary, #212529);
}

/* Smart-search syntax help (?) button - always visible, anchored to the
   LEFT of the input so it does not collide with the clear/submit cluster
   on the right. */
.search-bar-help-btn {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.15s;
    z-index: 2;
}

.search-bar-help-btn:hover,
.search-bar-help-btn:focus {
    color: var(--text-primary, #212529);
    outline: none;
}

.search-bar-back-btn {
    display: none;
}

/* =============================================================================
   11. ROTATING PLACEHOLDER ANIMATION
   ============================================================================= */

.search-bar-input.placeholder-fade-out::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-bar-input.placeholder-fade-in::placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.search-bar-input::placeholder {
    transition: opacity 0.3s ease;
}

/* =============================================================================
   12. MOBILE OVERLAY
   ============================================================================= */

@media (max-width: 767.98px) {
    .search-bar-widget.is-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-overlay, 40);
        background: var(--bg-primary, #fff);
        padding: 1rem;
        display: flex;
        flex-direction: column;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-tabs {
        order: -1;
        margin-bottom: 0.75rem !important;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-tabs::-webkit-scrollbar {
        display: none;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-tabs .search-bar-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-input-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-back-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0.5rem;
        color: var(--text-primary, #212529);
        cursor: pointer;
        font-size: 1.125rem;
        z-index: 3;
    }

    .search-bar-widget.is-mobile-overlay .search-bar-input {
        padding-left: 2.75rem;
    }

    .search-bar-widget.is-mobile-overlay .search-dropdown {
        position: relative;
        top: auto;
        margin-top: 0.75rem;
        border: none;
        box-shadow: none;
        border-radius: 0;
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }

    body.search-mobile-active {
        overflow: hidden;
    }
}

/* =============================================================================
   13. DARK THEME OVERRIDES
   ============================================================================= */

[data-theme="dark"] .search-bar-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ...except where the field is meant to be fill-less: inside a searcher card
   (the card is the surface and sets the colours, and may be a fixed Light card
   on a dark page) and the location-split bar (the wrapper is the pill). Both
   base rules share the page-theme rule's specificity and lose to it on source
   order, which painted a dark field inside a light card. */
[data-theme="dark"] .search-bar-has-card .search-bar-input {
    background: transparent;
    border-color: color-mix(in srgb, var(--search-bar-fg, currentColor) 22%, transparent);
    color: var(--search-bar-fg, inherit);
}
[data-theme="dark"] .search-bar-has-location .search-bar-input {
    background: transparent;
    border: 0;
}

[data-theme="dark"] .search-bar-tab {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .search-bar-tab:hover,
[data-theme="dark"] .search-bar-tab.active {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
}

/* Tabs / Links styles stay fill-less in dark mode too (the two rules above
   share their specificity and come later, so restate the ghost look). */
[data-theme="dark"] .search-bar-tabs--tabs .search-bar-tab,
[data-theme="dark"] .search-bar-tabs--tabs .search-bar-tab:hover,
[data-theme="dark"] .search-bar-tabs--links .search-bar-tab,
[data-theme="dark"] .search-bar-tabs--links .search-bar-tab:hover {
    background: transparent;
    color: var(--search-bar-fg, var(--text-secondary));
}
[data-theme="dark"] .search-bar-tabs--tabs .search-bar-tab {
    border-color: transparent;
}
[data-theme="dark"] .search-bar-tabs--tabs .search-bar-tab:hover {
    border-bottom-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent);
}
[data-theme="dark"] .search-bar-tabs--tabs .search-bar-tab.active {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--color-primary-500);
    color: var(--search-bar-fg, var(--text-primary));
}
[data-theme="dark"] .search-bar-tabs--links .search-bar-tab.active {
    background: transparent;
    color: var(--color-primary-400, var(--color-primary-500));
}
[data-theme="dark"] .search-bar-type-select:not(.search-bar-has-card *):not(.search-bar-has-location *) {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .search-dropdown {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.is-highlighted {
    background: var(--bg-secondary);
}

[data-theme="dark"] .search-result-icon {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-muted);
}

[data-theme="dark"] .search-result-thumb {
    background: var(--bg-tertiary, var(--bg-secondary));
}

[data-theme="dark"] .search-result-group + .search-result-group {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .search-highlight {
    background: var(--color-primary-900, #1c4f6f);
    color: var(--color-primary-200, #b0dff7);
}

[data-theme="dark"] .search-skeleton-thumb,
[data-theme="dark"] .search-skeleton-line {
    background: var(--bg-secondary);
}

[data-theme="dark"] .search-recent-item:hover,
[data-theme="dark"] .search-recent-item.is-highlighted {
    background: var(--bg-secondary);
}

[data-theme="dark"] .search-popular-tag {
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-secondary);
}

[data-theme="dark"] .search-popular-tag:hover {
    background: var(--color-primary-950, #0f3249);
    color: var(--color-primary-300, #80cbf1);
    border-color: var(--color-primary-800, #1c5f86);
}

[data-theme="dark"] .search-dropdown-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .search-no-results {
    color: var(--text-muted);
}

[data-theme="dark"] .search-bar-widget.is-mobile-overlay {
    background: var(--bg-primary);
}