/* Keep custom include/exclude filters aligned with standard filter widths (explorer-bar layout). */
.dashboard-filters-explore.filters-bar > .select-wrapper.country-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.website-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracked-brands-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.language-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.apps-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select .cfd-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select .cfd-container {
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.trustpilot-filter-select {
    position: relative;
    overflow: visible;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select > .div-block-71 {
    position: relative;
    width: max-content;
    min-width: 0;
    z-index: 3;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select > .div-block-71 {
    position: relative;
    width: max-content;
    min-width: 0;
    z-index: 3;
}

/* Ad rank summary trigger: fills capsule like other filters */
.dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter .div-block-71 {
    width: 100%;
    min-width: 0;
}
.dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter #adranksummary {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: var(--wh-ctl-font, 12px) !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset, 28px)
        calc(3px - var(--es-filter-capsule-nudge))
        var(--es-filter-padding-left) !important;
    min-height: var(--wh-ctl-h, 34px) !important;
}

/* ── Dashboard Meta ads filters: match Store Explorer filter bar ───────── */
.dashboard-filters-explore.filters-bar {
    --es-space-1: 8px;
    --es-space-2: 12px;
    --es-space-3: 16px;
    /* Geometry from the shared ramp in wh-ui-scale.css. */
    --es-radius-control: var(--wh-r-sm, 8px);
    --es-border: #e2e8f0;
    --es-border-hover: #cbd5e1;
    --es-border-focus: var(--wh-ring-color, #225aea);
    --es-filter-pill-border: #d1d5db;
    --es-control-shadow: var(--wh-e-1, 0 1px 2px 0 rgba(15,23,42,0.04));
    /* Match global .select2-selection depth so hover feels consistent (e.g. media type vs ad rank). */
    --es-control-shadow-hover: var(--wh-e-2, 0 1px 2px 0 rgba(15,23,42,0.04), 0 4px 12px -4px rgba(15,23,42,0.12));
    --es-control-focus-ring: var(--wh-ring, 0 0 0 3px rgba(34,90,234,0.14));
    --es-filter-text: #111827;
    --es-filter-text-placeholder: #111827;
    --es-filter-font-weight: 500;
    --es-filter-surface: var(--wh-filter-surface, #f8fafc);
    --es-filter-surface-hover: var(--wh-filter-surface-hover, #f1f5f9);
    --es-filter-surface-focus: var(--wh-filter-surface-focus, #eff6ff);
    /* Space for explorer-style glyph (::before on .select-wrapper) */
    --es-filter-padding-left: 26px;
    /* Nudge caption/value text downward inside pills (keep symmetric capsules balanced). */
    --es-filter-capsule-nudge: 1px;

    /* Capsules hug their label/value; longer text gets a wider pill. */
    --es-filter-col-min: 0px;
    --es-filter-col-max: max-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-space-1);
    /* Card shell, matching the Meta Ads bar and the Explore Shops toolbar. A bare
       bottom rule left the bar floating on the canvas with nothing to group the
       capsules — and #e2e8f0 against the #f1f5f9 canvas is a 1.05:1 line.
       Pages that also load explore-shops-filters-bar.css already carry an
       !important card here, so this only fills the gap on the rest. */
    padding: var(--es-space-2) 14px;
    background: var(--wh-filter-bar-bg, #f8fafc);
    border: 1px solid var(--wh-filter-bar-border, #e5e7eb);
    border-radius: var(--wh-r-lg, 12px);
    margin-bottom: var(--es-space-3);
    /* Baseline layer for filter capsules; opened panels are lifted below. */
    position: relative;
    isolation: isolate;
    z-index: 15;
    font-weight: var(--es-filter-font-weight);
}

/* Lift the capsules to white against the tinted bar. Capsules use --wh-filter-capsule
   so dark mode remaps them at :root (not a hardcoded #fff).
   `dashboard-meta-filters-panel` = the original Meta Ads Library carrier; `wh-filters-chrome`
   is the cosmetic-only class shared with the other Ads pages (TikTok/Pinterest/Facebook Post).
   wh-filters-chrome MUST stay purely visual — never attach FOUC/tab-boot logic to it. */
.dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar,
.wh-filters-chrome.dashboard-filters-explore.filters-bar {
    --es-filter-surface: var(--wh-filter-capsule, #ffffff);
    --es-filter-surface-hover: var(--wh-filter-capsule-hover, #f8fafc);
    --es-filter-surface-focus: var(--wh-filter-surface-focus, #eff6ff);
}

@media (min-width: 992px) {
    form.dashboard_form.shadow-container:has(.dashboard-meta-filters-panel) {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

#search-container {
    position: absolute;
    z-index: 2 !important;
}

#search-container:focus-within,
#search-container:has(#suggested-searches:not(.hidden)) {
    z-index: 120 !important;
}

/* Dashboard keyword search — panel unfolds downward; rows stagger in */
#suggested-searches:not(.hidden) {
    overflow: hidden;
    transform-origin: top center;
    will-change: clip-path, opacity;
}

#suggested-searches.is-visible {
    animation: dashboard-suggested-searches-open 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#suggested-searches.is-visible.is-items-refresh {
    animation: none;
    opacity: 1;
    clip-path: inset(0 0 0 0 round 6px);
}

@keyframes dashboard-suggested-searches-open {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 6px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 6px);
    }
}

#suggested-searches .dashboard-suggestion-row {
    opacity: 0;
    transform: translateY(-6px);
    animation: dashboard-suggestion-row-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dashboard-suggestion-row-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #suggested-searches.is-visible {
        animation: none;
        opacity: 1;
        clip-path: none;
    }
    #suggested-searches .dashboard-suggestion-row {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.dashboard-filters-explore.filters-bar:has(.cfd-container.open),
.dashboard-filters-explore.filters-bar:has(.select2-container--open),
.dashboard-filters-explore.filters-bar:has(.n3-root.n3-open),
.dashboard-filters-explore.filters-bar:has(.es-filter-dropdown-wrapper.open),
.dashboard-filters-explore.filters-bar:has(div[id^="tooltip"]:not(.hidden)),
.dashboard-filters-explore.filters-bar:has(> .select-wrapper.has-popup > .custom-popup:not(.hidden)),
.dashboard-filters-explore.filters-bar:has(.lightpick:not(.is-hidden)),
.dashboard-filters-explore.filters-bar:focus-within {
    z-index: 50;
}

/* Hide legacy spacer rows (sort direction UI, hide-inactive checkbox, etc.) */
.dashboard-filters-explore.filters-bar > div:not(.select-wrapper):not(.date-filters-row):not(.wh-filter-tabs) {
    display: none !important;
}

/* ── Category tab strip + active summary (progressive disclosure) ─────── */
.dashboard-filters-explore.filters-bar > .wh-filter-tabs {
    flex: 1 0 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 8px;
    --wh-filter-tab-text: #334155;
    --wh-filter-tab-text-hover: #0f172a;
    --wh-filter-tab-text-active: #225aea;
    --wh-filter-tab-strip-border: #cbd5e1;
}

.wh-filter-tabs-head {
    display: flex;
    align-items: center;
    gap: var(--es-space-1);
    flex-wrap: wrap;
    width: 100%;
}

.wh-filter-tabs-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wh-filter-tabs-prefix {
    font-size: 12px;
    font-weight: 600;
    color: var(--wh-filter-tab-text, #334155);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 0 10px;
    margin-bottom: -1px;
}

.dashboard-filters-explore.filters-bar .wh-filter-tabs-divider {
    width: 100%;
    height: 0;
    border: none;
    margin: 10px 0 0;
    display: block;
    flex-shrink: 0;
}

.wh-tab-strip {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    position: relative;
    border-bottom: 1px solid var(--wh-filter-tab-strip-border, var(--es-filter-bar-border, var(--es-border, #cbd5e1)));
}

.wh-tab-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--wh-filter-tab-text-active, #225aea);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
    z-index: 1;
    transition:
        left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: left, width;
}

@media (prefers-reduced-motion: reduce) {
    .wh-tab-underline {
        transition: none;
    }
}

.dashboard-filters-explore.filters-bar .wh-tab {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    box-shadow: none;
    color: var(--wh-filter-tab-text, #334155);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px 10px;
    margin-bottom: -1px;
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.wh-tab-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0.88;
}

.dashboard-filters-explore.filters-bar .wh-tab.active .wh-tab-icon {
    opacity: 1;
    color: var(--wh-filter-tab-text-active, #225aea);
}

.dashboard-filters-explore.filters-bar .wh-tab:hover:not(.active) {
    color: var(--wh-filter-tab-text-hover, #0f172a);
}

.dashboard-filters-explore.filters-bar .wh-tab:hover:not(.active) .wh-tab-icon {
    opacity: 1;
}

.dashboard-filters-explore.filters-bar .wh-tab.active {
    background: transparent;
    border-bottom-color: transparent;
    color: var(--wh-filter-tab-text-active, #225aea);
}

.wh-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--wh-filter-tab-strip-border, #e2e8f0);
    color: var(--wh-filter-tab-text, #64748b);
}

.dashboard-filters-explore.filters-bar .wh-tab.active .wh-tab-count {
    background: var(--es-filter-surface-hover, #f8fafc);
    border-color: var(--wh-filter-tab-strip-border, #cbd5e1);
    color: var(--wh-filter-tab-text, #475569);
}

.wh-filter-summary {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wh-active-label {
    font-size: 11px;
    font-weight: var(--es-filter-font-weight);
    color: var(--es-filter-text, #000000);
    white-space: nowrap;
}

.wh-active-label strong {
    color: var(--es-filter-text);
    font-weight: var(--es-filter-font-weight);
}

.dashboard-filters-explore.filters-bar .wh-clear-all {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--es-border);
    background: var(--es-filter-surface, #fff);
    box-shadow: none;
    color: var(--wh-filter-tab-text, #475569);
    font-size: 11px;
    font-weight: var(--es-filter-font-weight);
    padding: 4px 10px;
    border-radius: var(--es-radius-control);
    cursor: pointer;
}

.dashboard-filters-explore.filters-bar .wh-clear-all:hover {
    border-color: var(--es-border-hover);
    background: var(--es-filter-surface-hover);
    color: var(--wh-filter-tab-text-hover, #334155);
}

/* Hidden by tab selection */
.dashboard-filters-explore.filters-bar > .select-wrapper.wh-hide,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.wh-hide {
    display: none !important;
}

/*
 * FOUC guard: before tabs JS boots, only show the default Ad-tab filters.
 * Matches setupDashboardFilterTabs DEFS g:'ad'. Once .wh-filters-boot /
 * .wh-filters-ready is set, .wh-hide is the source of truth.
 * Scoped to .dashboard-meta-filters-panel (/dashboard) so other pages sharing
 * .dashboard-filters-explore (Magic AI, brand ads, etc.) are not affected.
 */
.dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar:not(.wh-filters-boot):not(.wh-filters-ready) > .select-wrapper:not(:has(#ad-status-filter)):not(:has(#field)):not(:has(#language)):not(:has(#niches)):not(:has(#Order-2)):not(:has(#adscore)):not(:has(#scaling)):not(:has(#rankgrowth)):not(:has(#lowimpressions)):not(:has(#adranksummary)):not(:has(#copylengthsummary)):not(:has(#videolengthsummary)):not(:has(#daysrunningSummary)):not(:has(#datepicker)):not(:has(#datepickerlastseen)),
.dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar:not(.wh-filters-boot):not(.wh-filters-ready) > .date-filters-row > .select-wrapper:not(:has(#datepicker)):not(:has(#datepickerlastseen)),
.dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar:not(.wh-filters-boot):not(.wh-filters-ready) > .date-filters-row.eu-spend-filters-row {
    display: none !important;
}

@media (max-width: 991px) {
    .dashboard-filters-explore.filters-bar > .wh-filter-tabs {
        grid-column: 1 / -1 !important;
    }
    .wh-filter-tabs-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wh-filter-tabs-row {
        min-width: 0;
    }
    .wh-tab-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wh-tab-strip::-webkit-scrollbar {
        display: none;
    }
    .wh-filter-summary {
        margin-left: 0;
    }
}

.dashboard-filters-explore.filters-bar > .select-wrapper {
    flex: 0 0 auto;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Prefer wrapping + clipping over painting into the next pill */
    overflow: visible;
}

/*
 * Later sibling wrappers paint above earlier ones (auto stacking + same z-index).
 * Strong lift so calendars, range panels and anchors clear neighbours (e.g. Sort By after creation dates).
 */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(.cfd-container.open),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(.select2-container--open),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(.n3-root.n3-open),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(div[id^="tooltip"]:not(.hidden)),
.dashboard-filters-explore.filters-bar > .select-wrapper.has-popup:has(> .custom-popup:not(.hidden)),
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select:has(.dashboard-store-vc-panel.open),
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select:has(.dashboard-store-vc-panel.open),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.cfd-container.open),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.select2-container--open),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.n3-root.n3-open),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(div[id^="tooltip"]:not(.hidden)),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.has-popup:has(> .custom-popup:not(.hidden)),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.lightpick:not(.is-hidden)),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:focus-within,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation):has(.lightpick:not(.is-hidden)),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation):focus-within,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created):has(.lightpick:not(.is-hidden)),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen):has(.lightpick:not(.is-hidden)),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created):focus-within,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen):focus-within {
    z-index: 400;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"]:not(.hidden) {
    overflow: visible !important;
    z-index: 10060 !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .dashboard-ion-range-wrap {
    display: block;
    margin: 4px 0 6px;
    padding: 0 2px;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .ad-rank-input-grid .dashboard-ion-range-wrap {
    grid-column: 1 / -1;
    margin: 0 0 4px;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .adspendcpm-ion-range-wrap {
    margin: 0 0 10px;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .adspendcpm-range-slider > .price-input.price {
    margin-top: 0;
}

/* Compact override of the ion.rangeSlider "round" skin (default is 50px tall with 24px handles). */
.dashboard-ion-range-wrap .irs--round {
    height: 34px;
}

.dashboard-ion-range-wrap .irs--round .irs-line,
.dashboard-ion-range-wrap .irs--round .irs-bar {
    top: 24px;
    height: 3px;
}

.dashboard-ion-range-wrap .irs--round .irs-bar {
    background-color: #225aea;
}

.dashboard-ion-range-wrap .irs--round .irs-handle {
    top: 19px;
    width: 13px;
    height: 13px;
    border: 2px solid #225aea;
    border-radius: 13px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    cursor: grab;
}

.dashboard-ion-range-wrap .irs--round .irs-min,
.dashboard-ion-range-wrap .irs--round .irs-max {
    font-size: 9px;
    padding: 2px 4px;
}

.dashboard-ion-range-wrap .irs--round .irs-from,
.dashboard-ion-range-wrap .irs--round .irs-to,
.dashboard-ion-range-wrap .irs--round .irs-single {
    font-size: 10px;
    padding: 2px 4px;
    background-color: #225aea;
}

.dashboard-ion-range-wrap .irs--round .irs-from:before,
.dashboard-ion-range-wrap .irs--round .irs-to:before,
.dashboard-ion-range-wrap .irs--round .irs-single:before {
    border-top-color: #225aea;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .dashboard-ion-range-wrap .irs {
    width: 100%;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .range-slider:has(.dashboard-ion-range-wrap) > .slider.slide,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .range-slider:has(.dashboard-ion-range-wrap) > .range-input.range {
    display: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .range-slider,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .irs,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .irs-grid,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .irs-line,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .irs-bar,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .irs-handle,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"] .slider {
    overflow: visible !important;
}

/* Open Select2 anchor above sibling capsules; dropdown is on body — z-index rule below */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(.select2-container--open) > span.select2.select2-container,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.select2-container--open) > span.select2.select2-container {
    z-index: 450 !important;
}

/*
 * Wrapper ::before filter glyphs use z-index 4 by default; the open Select2 span is 450, so the capsule
 * covered the leading icon after click. Keep the glyph above the pill (::before stays pointer-events: none).
 */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(.select2-container--open)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(.select2-container--open)::before {
    z-index: 460;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.country-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.website-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.language-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.ad-status-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.apps-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.themes-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select {
    max-width: none;
    min-width: 0;
}

/* Readonly min–max summary fields (often long numbers, units, EU adspend/reach timeframe suffix).
   Facebook Post Ads engagement tooltips: likessummary, commentssummary, sharessummary, viewssummary, specificlikes. */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(
        #adsetsumary,
        #adspendsummary,
        #adspendcpmsummary,
        #copylengthsummary,
        #videolengthsummary,
        #ad-rank-copylengthsummary,
        #ad-rank-videolengthsummary,
        #ad-rank-scalingsummary,
        #ad-rank-mediatypesummary,
        #ad-rank-adscoresummary,
        #ad-rank-impressionssummary,
        #ad-rank-daysrunningsummary,
        #adranksummary,
        #reachsummary,
        #audiencesummary,
        #daysrunningSummary,
        #productsonstoreSummary,
        #priceSummary,
        #trafficSummary,
        #growthSummary,
        #storerevenueSummary,
        #trustpilotSummary,
        #activeadssummary,
        #activeadsgrowthSummary,
        #reachgrowthSummary,
        #pagelikessummary,
        #igfollowerssummary,
        #likessummary,
        #commentssummary,
        #sharessummary,
        #viewssummary,
        #specificlikessummary
    ) {
    max-width: 100%;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(
        #adspendsummary,
        #adspendcpmsummary
    ) {
    max-width: 100%;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar > .date-filters-row {
    /* Dissolve the wrapper so date pickers + Sort By become items of the bar's grid,
       sharing the exact same equal columns as every other filter. */
    display: contents;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper {
    flex: 0 0 auto;
    width: max-content;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
}

/*
 * Date-range pickers shrink-wrap to the placeholder label or selected range text
 * instead of stretching to a full grid column.
 */
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(
        #datepicker,
        #datepickerlastseen,
        #datepickerproductcreation,
        #datepickerpagecreation
    ),
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) {
    width: auto;
    min-width: 0;
    max-width: none;
    justify-self: start;
    align-items: stretch;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(
        #datepicker,
        #datepickerlastseen,
        #datepickerproductcreation,
        #datepickerpagecreation
    )
    > .w-embed,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) > .w-embed {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Product/Collection Creation Date has a long label that clips in a single grid slot.
 * Widen just this filter to span ~2 columns so the full name fits.
 */
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepickerproductcreation) {
    min-width: 0;
    max-width: none;
}

/*
 * Product price: keep the default grid slot when empty; widen up to ~2 columns when
 * a range summary is shown so longer values (e.g. "1.1k - 50000") aren't clipped.
 */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#priceSummary:not(:placeholder-shown)) {
    width: max-content;
    min-width: 0;
    max-width: 100%;
    justify-self: start;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#priceSummary:not(:placeholder-shown)) > .div-block-71,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#priceSummary:not(:placeholder-shown)) > .div-block-71 > input.select2-container {
    width: 100% !important;
    max-width: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#priceSummary:not(:placeholder-shown)) .div-block-71 input.form-input[type="text"] {
    overflow-x: visible;
    text-overflow: clip;
}

/*
 * Default label row styling (explorer-style: names live inside controls; JS adds
 * .dashboard-filter-label-sr to move names to placeholders / sr-only captions).
 */
.dashboard-filters-explore.filters-bar > .select-wrapper > .select-label,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .select-label {
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    font-size: 10px !important;
    font-weight: var(--es-filter-font-weight);
    letter-spacing: 0.01em;
    color: var(--es-filter-text) !important;
    text-transform: none;
}

/*
 * Visually hide inline filter names — they live in placeholders / CFD search.
 * Always hide (not only .dashboard-filter-label-sr / :has(popup)): Status and other
 * no-popup labels were double-rendering above the Select2 / CFD capsule.
 */
.dashboard-filters-explore.filters-bar > .select-wrapper > .select-label,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .select-label,
.dashboard-filters-explore.filters-bar > .select-wrapper > .select-label.dashboard-filter-label-sr,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .select-label.dashboard-filter-label-sr,
.dashboard-filters-explore.filters-bar > .select-wrapper > .select-label:has(> .custom-popup),
.dashboard-filters-explore.filters-bar
    > .date-filters-row
    > .select-wrapper
    > .select-label:has(> .custom-popup) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block !important;
}

/* Tooltips hoist to wrapper; sit above capsules */
.dashboard-filters-explore.filters-bar > .select-wrapper.has-popup > .custom-popup:first-child,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.has-popup > .custom-popup:first-child {
    z-index: 10050 !important;
}

/*
 * setupDashboardExploreInlineFilters() hoists .custom-popup to .select-wrapper's firstChild (not under .select-label).
 * Match that DOM; neutralize globals (.custom-popup { right: -240% }) so the bubble sits over the column center.
 */
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.has-popup > .custom-popup:first-child {
    left: 50% !important;
    right: auto !important;
    margin-left: -100px !important;
}

/* Hoisted bubbles under narrow pills: center like the others (the legacy
   right-shift offset was a workaround for the old right: inline positioning). */
.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select.has-popup > .custom-popup:first-child,
.dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter.has-popup > .custom-popup:first-child {
    margin-left: -100px !important;
}

/* Tall Adscore explainer — sit higher than legacy bottom:-315px */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#adscore).has-popup > .custom-popup:first-child {
    bottom: -200px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -100px !important;
}

/* Locked filters dim controls but keep explanation popups readable */
.dashboard-filters-explore.filters-bar > .select-wrapper.filter-locked > .custom-popup {
    opacity: 1 !important;
}

/* ── Filter-bar help tooltip — matches the shared .tooltip-popup look
   (brands-page.css:2517): slate-800, no border, quiet shadow, left-aligned.
   Scoped to hoisted filter-bar popups only; the global .custom-popup
   (styles.css:25526) stays untouched for ad cards / modals.

   Positioning uses left + margin-left (NOT transform) because notification.js
   writes inline transform: scale(1/0.8) on open/hide; a fixed width keeps
   margin-centering exact and avoids fighting the JS. */
.dashboard-filters-explore.filters-bar > .select-wrapper.has-popup > .custom-popup:first-child {
    width: 200px !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -100px !important;
    padding: 8px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2) !important;
    /* Smooth but quick — the JS toggles inline transform: scale(0.8→1) on
       open/hide (notification.js:26-36); transition that scale so it eases in
       instead of snapping. Capped to transform only (not the global 0.5s `all`). */
    transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1) !important;
}



/* Icons before filter name are optional; avoid squishing */
.dashboard-filters-explore.filters-bar > .select-wrapper > .select-label.inline-flex {
    flex-wrap: nowrap;
}

/*
 * Store Explorer–style leading icons (same pattern as Exploreshops .filters-group::before).
 * Only top-level bar wrappers — not nested .select-wrapper inside range tooltips.
 */
.dashboard-filters-explore.filters-bar > .select-wrapper::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 9px;
    top: 50%;
    width: 13px;
    height: 13px;
    transform: translateY(-50%);
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    opacity: 1;
    filter: brightness(0);
    z-index: 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 4.5H13.5M4 8H12M6 11.5H10' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/*
 * Wrapper ::before glyphs are absolutely positioned on the outer shell.
 * External .select-label rows are visually hidden (names live in the control), so
 * center the glyph on the capsule — not on a label+pill stack.
 */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(> .select-label)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(> .select-label)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(> .select-label.dashboard-filter-label-sr)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(> .select-label.dashboard-filter-label-sr)::before {
    top: 50%;
    transform: translateY(-50%);
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(> .select-label) > .select-label,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(> .select-label) > .select-label {
    padding-left: 0;
    box-sizing: border-box;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.country-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#field)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%2394a3b8' stroke-width='1.6'/%3E%3Cpath d='M2.8 8H13.2M8 2.5C9.2 3.9 9.9 5.9 9.9 8C9.9 10.1 9.2 12.1 8 13.5M8 2.5C6.8 3.9 6.1 5.9 6.1 8C6.1 10.1 6.8 12.1 8 13.5' stroke='%2394a3b8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.language-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#language)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#ad-rank-language)::before {
    background-image: url("/images/filter-language.svg");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.website-select::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.5 12L2.5 9l3-3M10.5 12l3-3-3-3M9 14L7 2' stroke='%2394a3b8' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='2.25' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Cpath d='M8 2.2v1.6M8 12.2v1.6M2.2 8h1.6M12.2 8h1.6M4.1 4.1l1.1 1.1M10.8 10.8l1.1 1.1M4.1 11.9l1.1-1.1M10.8 5.2l1.1-1.1' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracked-brands-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#trackedBrands)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 3.5h9v9H3.5z' stroke='%2394a3b8' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M6.2 3.5V2.8c0-.55.45-1 1-1h1.6c.55 0 1 .45 1 1v.7M8 6.8l1.35 1.35L6.2 11.3' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#eutransparency)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.8l5.2 2.1v4.2c0 3.1-2.2 5.35-5.2 6.4-3-1.05-5.2-3.3-5.2-6.4V3.9L8 1.8z' stroke='%2394a3b8' stroke-width='1.25' stroke-linejoin='round'/%3E%3Cpath d='M6 8.1l1.2 1.2 2.8-2.9' stroke='%2394a3b8' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.ad-status-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#ad-status-filter)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-statussummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%2394a3b8'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 4.5H7M9 4.5H13.5M2.5 8H5.5M7.5 8H13.5M2.5 11.5H6.5M8.5 11.5H13.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.apps-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#apps)::before {
    background-image: url("/images/shopify-bag.svg");
    filter: none;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.themes-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#themes)::before {
    background-image: url("/images/shopify-bag.svg");
    filter: none;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#scaling)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#ad-rank-scaling)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5L6.3 7.7L8.9 10.3L13.5 5.7M10.7 5.7H13.5V8.5' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Brand Details Ad Rank — Select2 capsules match .div-block-71 range-summary inputs */
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar > .select-wrapper.ad-rank-select2-filter {
    flex: 1 1 148px;
    min-width: 0;
    max-width: 220px;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    > .div-block-71 {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    > .select2-container {
    width: 100% !important;
    min-height: 29px !important;
    flex: 1 1 auto !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container--default
    .select2-selection--single,
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container--default
    .select2-selection--multiple {
    min-height: 29px !important;
    height: 29px !important;
    margin-bottom: 0 !important;
    padding: calc(3px + var(--es-filter-capsule-nudge, 1px)) 26px
        calc(3px - var(--es-filter-capsule-nudge, 1px)) var(--es-filter-padding-left, 26px) !important;
    border: 1px solid var(--es-border, #e2e8f0) !important;
    border-radius: var(--es-radius-control, 8px) !important;
    box-shadow: var(--es-control-shadow, 0 1px 2px rgba(15, 23, 42, 0.04)) !important;
    background: var(--es-filter-surface, #f8fafc) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    font-size: 11px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text, #111827) !important;
    -webkit-text-fill-color: var(--es-filter-text, #111827) !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container:not(.select2-container--open)
    .select2-selection--single:hover,
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container:not(.select2-container--open)
    .select2-selection--multiple:hover {
    border-color: var(--es-border-hover, #cbd5e1) !important;
    background: var(--es-filter-surface-hover, #f1f5f9) !important;
    box-shadow: var(--es-control-shadow-hover, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)) !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__rendered {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__rendered.dashboard-select2-summary-active {
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__rendered.dashboard-select2-summary-active::before {
    content: attr(data-summary) !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text, #111827) !important;
    -webkit-text-fill-color: var(--es-filter-text, #111827) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-selection__choice,
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__rendered.dashboard-select2-summary-active
    > .select2-search--inline,
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection--single
    .select2-selection__rendered.dashboard-select2-summary-active
    > * {
    display: none !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container--open
    .select2-selection__rendered.dashboard-select2-summary-active {
    font-size: 11px !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container--open
    .select2-selection__rendered.dashboard-select2-summary-active::before {
    display: none !important;
    content: none !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    > .select2-search--inline {
    display: inline-block !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__placeholder {
    font-size: 11px !important;
    color: var(--es-filter-text-placeholder, #111827) !important;
    -webkit-text-fill-color: var(--es-filter-text-placeholder, #111827) !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection__clear {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #5b6b82 !important;
}

#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection--single,
#ad-rank-filters-bar.dashboard-filters-explore.filters-bar
    > .select-wrapper.ad-rank-select2-filter
    .div-block-71
    .select2-selection--multiple {
    position: relative !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#Order-2)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#ad-rank-media-type)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#magic-media-type)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Ccircle cx='5.7' cy='6.5' r='1' stroke='%2394a3b8' stroke-width='1.1'/%3E%3Cpath d='M2 12l3-3.5 2 2L14 7' stroke='%2394a3b8' stroke-width='1.25' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#pagetype)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 13V7l5-4.5L13 7v6H10V10H6v3H3z' stroke='%2394a3b8' stroke-width='1.35' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#adscore)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#ad-rank-adscore)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2l1.42 4h4.05l-3.26 2.5 1.42 4.05L8 10.62 4.37 12.55l1.42-4.05L2.53 6h4.05L8 2z' stroke='%2394a3b8' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#adranksummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.25 3.25h5.5v3c0 2.15-1.23 3.9-2.75 4.35-1.52-.45-2.75-2.2-2.75-4.35v-3z' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.25 4.25H4.25c-.55 0-.95.45-.95 1 .15 1.15.85 1.95 2 2.35' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.75 4.25h1c.55 0 .95.45.95 1-.15 1.15-.85 1.95-2 2.35' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10.6V12.25' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M5.5 12.75h5' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#rankgrowth)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5L6.3 7.7L8.9 10.3L13.5 5.7M10.7 5.7H13.5V8.5' stroke='%2394a3b8' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#lowimpressions)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.9 8s2.5-4 6.1-4 6.2 4 6.2 4-2.5 4-6.1 4-6.2-4-6.2-4z' stroke='%2394a3b8' stroke-width='1.35'/%3E%3Ccircle cx='8' cy='8' r='1.85' stroke='%2394a3b8' stroke-width='1.3'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#adspendsummary)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#adspendsummary)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#priceSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.5v11M10.65 5.2C10.05 4.55 9.15 4.15 8 4.15c-1.55 0-2.55.75-2.55 1.85 0 1.05.85 1.55 2.55 2 1.8.38 2.45.88 2.45 2.05 0 1.2-1.1 2-2.5 2-1.1 0-2.08-.43-2.73-1.05' stroke='%2394a3b8' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.eu-cpm-filter:has(#adspendcpmsummary)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.eu-cpm-filter:has(#adspendcpmsummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 13.1a5.1 5.1 0 1 0 0-10.2 5.1 5.1 0 0 0 0 10.2z' stroke='%23225aea' stroke-width='1.35'/%3E%3Cpath d='M8 8V4.35' stroke='%23225aea' stroke-width='1.45' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='8' r='0.95' fill='%23225aea'/%3E%3Cpath d='M4.65 11.05l.75-.75M11.35 11.05l-.75-.75' stroke='%23225aea' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M2.8 12.2h10.4' stroke='%2394a3b8' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
    filter: none;
    opacity: 1;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.eu-cpm-filter:has(#adspendcpmsummary) > .div-block-71 > #adspendcpmsummary:not(:placeholder-shown),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper.eu-cpm-filter:has(#adspendcpmsummary) > .div-block-71 > #adspendcpmsummary:not(:placeholder-shown) {
    color: #225aea;
    font-weight: 600;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#copylengthsummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 4.5H13.5M4 8H12M6 11.5H10' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#videolengthsummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2' y='3' width='12' height='10' rx='1.5' stroke='%2394a3b8' stroke-width='1.3'/%3E%3Cpath d='M7 6v4l3.5-2L7 6z' fill='%2394a3b8'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#reachsummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 12.4h0M4.35 9.25a5.4 5.4 0 017.3 0M2.4 6.7a8.4 8.4 0 0111.2 0M.45 4.15a11.35 11.35 0 0115.1 0' stroke='%2394a3b8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#audiencesummary)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper#fw-demo-wrapper::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='5.75' cy='5.25' r='1.65' stroke='%2394a3b8' stroke-width='1.25'/%3E%3Cpath d='M2.5 12.75v-.4c0-1.55 1.46-2.85 3.25-2.85s3.25 1.3 3.25 2.85' stroke='%2394a3b8' stroke-width='1.25' stroke-linecap='round'/%3E%3Ccircle cx='10.75' cy='5.75' r='1.35' stroke='%2394a3b8' stroke-width='1.2'/%3E%3Cpath d='M8.75 12.75v-.25c0-1.2 1-2.15 2.25-2.4' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#daysrunningSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.25' stroke='%2394a3b8' stroke-width='1.45'/%3E%3Cpath d='M8 5.2v2.95l2.1 1.25' stroke='%2394a3b8' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepicker)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepickerlastseen)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepickerproductcreation)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepickerpagecreation)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#ad-rank-datepicker-creation)::before,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#ad-rank-datepicker-lastseen)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#productsonstoreSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.5' y='3' width='11' height='10' rx='1.8' stroke='%2394a3b8' stroke-width='1.55'/%3E%3Cpath d='M2.5 6H13.5M6 3V13' stroke='%2394a3b8' stroke-width='1.35'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#trafficSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 12.5H13.5M4 10V7.5M7 10V5.5M10 10V8.2M13 10V4.5' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#growthSummary)::before,
.dashboard-filters-explore.filters-bar > #monthly-visit-growth-filter::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5L6.3 7.7L8.9 10.3L13.5 5.7M10.7 5.7H13.5V8.5' stroke='%2394a3b8' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#storerevenueSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2.5V13.5M10.7 5.2C10.1 4.5 9.2 4.1 8 4.1C6.5 4.1 5.5 4.9 5.5 6C5.5 7.1 6.3 7.6 8 8C9.8 8.4 10.5 8.9 10.5 10.1C10.5 11.3 9.4 12 8 12C6.9 12 5.9 11.6 5.2 10.9' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#storeBasedInField)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.6c-2.2 0-4 1.7-4 3.8 0 2.8 4 8.6 4 8.6s4-5.8 4-8.6c0-2.1-1.8-3.8-4-3.8z' stroke='%2394a3b8' stroke-width='1.45' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='5.4' r='1.35' stroke='%2394a3b8' stroke-width='1.25'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#dashboardStoreVisitorCountryTrigger)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='5.5' stroke='%2394a3b8' stroke-width='1.6'/%3E%3Cpath d='M2.8 8H13.2M8 2.5C9.2 3.9 9.9 5.9 9.9 8C9.9 10.1 9.2 12.1 8 13.5M8 2.5C6.8 3.9 6.1 5.9 6.1 8C6.1 10.1 6.8 12.1 8 13.5' stroke='%2394a3b8' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper.trustpilot-filter-select::before,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#trustpilotSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 37 37' fill='none'%3E%3Cpath d='M18.2629 0.595703L22.1545 12.5726H34.7477L24.5596 19.9747L28.4511 31.9516L18.2629 24.5495L8.07478 31.9516L11.9663 19.9747L1.77815 12.5726H14.3714L18.2629 0.595703Z' fill='%2300B57A'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#activeadssummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='2.5' y='3' width='8' height='5' rx='1' stroke='%2394a3b8' stroke-width='1.25'/%3E%3Crect x='4.5' y='8.5' width='8' height='5' rx='1' stroke='%2394a3b8' stroke-width='1.25'/%3E%3C/svg%3E");
}

/* Active ads growth — stacked page ads + rising bar chart (distinct from Page Active Ads & visit/reach growth) */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#activeadsgrowthSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1.4' y='3.4' width='5.2' height='3.6' rx='0.75' stroke='%2394a3b8' stroke-width='1.15'/%3E%3Crect x='2.9' y='8.4' width='5.2' height='3.6' rx='0.75' stroke='%2394a3b8' stroke-width='1.15'/%3E%3Cpath d='M9.4 12V9.6M11.65 12V7.1M13.9 12V4.6' stroke='%2394a3b8' stroke-width='1.55' stroke-linecap='round'/%3E%3Cpath d='M13.9 4.6V3.15M13.9 4.6l-.7-.55M13.9 4.6l.7-.55' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* EU reach % growth — reach signal + upward trend */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#reachgrowthSummary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.8 9.1a4.6 4.6 0 016.4 0M2.2 6.9a7.2 7.2 0 019.6 0' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M9.5 10.8L11.4 8.6L13.8 5.8' stroke='%2394a3b8' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#pagelikessummary)::before {
    background-image: url("/images/facebook.c7130ef8.svg");
    filter: none;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#igfollowerssummary)::before {
    background-image: url("/images/instagram-brand.svg");
    filter: none;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > #sortbyselectionbox::before,
.dashboard-filters-explore.filters-bar > .select-wrapper#sortbyselectionbox::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5 12.5v-9M5 3.5L2.5 6M5 3.5L7.5 6M11 3.5v9m0 0l2.5-2.5M11 12.5 8.5 10' stroke='%2394a3b8' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#adsetsumary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.529 15.222c.297.155.644.155.941 0 1.57-.819 6.529-3.787 6.529-8.613.008-2.12-1.704-3.846-3.826-3.859-1.277.016-2.464.66-3.173 1.72-.71-1.06-1.897-1.704-3.173-1.72-2.123.013-3.834 1.739-3.826 3.859 0 4.826 4.959 7.794 6.529 8.613Z' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    top: calc(50% + var(--es-filter-capsule-nudge, 1px));
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#commentsumary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.75C5 1.75 2.75 4 2.75 7c0 1 .27 1.9.73 2.7-.32.6-.04 2.03.73 2.72 1 .05 2.32-.4 2.91-.73.39.23 1 .53 1.71.68.35.07.7.1 1.08.1 3 0 5.25-2.25 5.25-5.25S11 1.75 8 1.75Z' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(#sharesumary)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.7 5.8V3.2s5.8 5.1 5.8 5.1l-5.8 5.2V10.5C4 10.5 1.5 13.5 1.5 13.5S1.5 7.5 8.7 5.8Z' stroke='%2394a3b8' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Undo global styles.css hacks that hide filter text ───────────────
   .select2-selection { line-height: 0 } collapses captions; dashboard
   reuse those classes on <input> range triggers — text becomes invisible. */

.dashboard-filters-explore.filters-bar .select2-selection.select2-selection--single {
    display: flex !important;
    align-items: center !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

.dashboard-filters-explore.filters-bar input.select2-selection,
.dashboard-filters-explore.filters-bar input.select2-selection--multiple {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/*
 * Range/summary triggers reuse select2-container on <input> for styling. Global
 * styles.css sets .select2-container { min-width: 270px } — span Select2 pills are
 * reset above; these inputs must match the compact grid column width too.
 */
.dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 > input.select2-container,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 > input.select2-container,
.dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71 > input.select2-container {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.dashboard-filters-explore.filters-bar .select2-search__field {
    min-height: 22px !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

.dashboard-filters-explore.filters-bar .select2-container .select2-selection__placeholder {
    color: var(--es-filter-text-placeholder) !important;
    -webkit-text-fill-color: var(--es-filter-text-placeholder) !important;
}

/* Same as above but wins over text fill inherited from .select2-selection--single (below). */
.dashboard-filters-explore.filters-bar > .select-wrapper .select2-container--default .select2-selection__placeholder,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .select2-container--default .select2-selection__placeholder {
    color: var(--es-filter-text-placeholder) !important;
    -webkit-text-fill-color: var(--es-filter-text-placeholder) !important;
}

/* Themes: compact summary on the inline search placeholder (same UX as Apps IncExcFilter). */
.dashboard-filters-explore.filters-bar #themes+.select2-container .select2-selection__rendered.themes-summary-active {
    flex-wrap: nowrap !important;
    overflow: hidden;
}

.dashboard-filters-explore.filters-bar #themes+.select2-container .select2-selection__rendered.themes-summary-active .select2-selection__choice {
    display: none !important;
}

.dashboard-filters-explore.filters-bar #themes+.select2-container .select2-selection__rendered.themes-summary-active .select2-search--inline {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    float: none;
}

.dashboard-filters-explore.filters-bar #themes+.select2-container .select2-selection__rendered.themes-summary-active .select2-search__field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

.dashboard-filters-explore.filters-bar #themes+.select2-container .select2-selection__rendered.themes-summary-active .select2-search__field::placeholder {
    color: var(--es-filter-text) !important;
    opacity: 1;
}

/*
 * Global styles.css pads .select2-selection__rendered 5/20px, 13px type, and forces 23px chip rows —
 * clashes with explorer bar padding-left on the shell and 34px capsule height.
 */
.dashboard-filters-explore.filters-bar
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0 !important;
    padding: 0 22px 0 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    display: flex !important;
    align-items: center !important;
}

/* templateSelection HTML (e.g. ad score dot + label) — force primary text; do not inherit global #555 / #959595 */
.dashboard-filters-explore.filters-bar
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered
    span:not(.select2-selection__placeholder) {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered {
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
    width: 100% !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 2px;
}

.dashboard-filters-explore.filters-bar .select2-selection__choice {
    margin-top: 0 !important;
    height: auto !important;
    min-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.dashboard-filters-explore.filters-bar .select2-search--inline {
    margin-top: 0 !important;
    align-self: center;
}

.dashboard-filters-explore.filters-bar .select2-container .select2-selection__clear {
    margin: 0 !important;
}

.dashboard-filters-explore.filters-bar
    > .select-wrapper
    .select2-container--default
    .select2-selection--multiple {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.dashboard-filters-explore.filters-bar
    > .select-wrapper
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar
    > .select-wrapper
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__clear {
    position: absolute !important;
    right: calc(var(--es-filter-chevron-inset, 28px) - 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 14px !important;
    color: #5b6b82 !important;
    z-index: 2;
}

/* Select2 may inject the clear control inside .select2-selection__rendered — pull it out of the flex chip row. */
.dashboard-filters-explore.filters-bar
    #Order-2 + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    > .select2-selection__clear,
.dashboard-filters-explore.filters-bar
    #pagetype + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    > .select2-selection__clear,
.dashboard-filters-explore.filters-bar
    #scaling + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    > .select2-selection__clear,
.dashboard-filters-explore.filters-bar
    #rankgrowth + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    > .select2-selection__clear,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    > .select2-selection__clear,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    > .select2-selection__clear {
    position: absolute !important;
    right: calc(var(--es-filter-chevron-inset, 28px) - 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 14px !important;
    color: #5b6b82 !important;
    z-index: 2;
}

/* Media type / page type / scaling: collapsed summary must hide chip rows and stay on one line. */
.dashboard-filters-explore.filters-bar
    #Order-2 + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__choice,
.dashboard-filters-explore.filters-bar
    #pagetype + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__choice,
.dashboard-filters-explore.filters-bar
    #scaling + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__choice,
.dashboard-filters-explore.filters-bar
    #rankgrowth + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__choice,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-selection__choice,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-selection__choice {
    display: none !important;
}

.dashboard-filters-explore.filters-bar
    #Order-2 + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered,
.dashboard-filters-explore.filters-bar
    #pagetype + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered,
.dashboard-filters-explore.filters-bar
    #scaling + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered,
.dashboard-filters-explore.filters-bar
    #rankgrowth + .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered[data-summary]:not([data-summary='']) {
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.dashboard-filters-explore.filters-bar
    #Order-2 + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-search--inline,
.dashboard-filters-explore.filters-bar
    #pagetype + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-search--inline,
.dashboard-filters-explore.filters-bar
    #scaling + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-search--inline,
.dashboard-filters-explore.filters-bar
    #rankgrowth + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-search--inline,
.dashboard-filters-explore.filters-bar
    .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-search--inline,
.dashboard-filters-explore.filters-bar
    .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered[data-summary]:not([data-summary=''])
    .select2-search--inline {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

.dashboard-filters-explore.filters-bar
    #Order-2 + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])::before,
.dashboard-filters-explore.filters-bar
    #gads-platform + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])::before,
.dashboard-filters-explore.filters-bar
    #pagetype + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])::before,
.dashboard-filters-explore.filters-bar
    #scaling + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])::before,
.dashboard-filters-explore.filters-bar
    #rankgrowth + .select2-container:not(.select2-container--open)
    .select2-selection__rendered[data-summary]:not([data-summary=''])::before {
    content: attr(data-summary) !important;
    display: inline !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    font-size: 12px !important;
}

/* Dedicated text label span for caption-only Select2 filters */
.dashboard-filters-explore.filters-bar
    .select2-container
    .select2-selection__rendered
    .select2-caption-label {
    display: block;
    color: var(--es-filter-text);
    font-size: 12px;
    font-weight: var(--es-filter-font-weight);
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 0 auto;
}

/*
 * Caption-only filters render "<name><value>" in one flex row (e.g. Sort By + Last Seen).
 * Add a colon + gap so the label and the selected value don't collide ("Sort By: Last Seen").
 */
.dashboard-filters-explore.filters-bar
    .select2-container
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-caption-label::after {
    content: ":";
    margin-right: 5px;
    color: var(--es-filter-text-placeholder);
    font-weight: var(--es-filter-font-weight);
}

.dashboard-filters-explore.filters-bar
    .select2-container
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-caption-label {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/* Multi-select chips hidden: one summary line (themes + scaling + rank growth, etc.). */
.dashboard-filters-explore.filters-bar .select2-container .select2-selection__rendered.dashboard-select2-summary-active {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-filters-explore.filters-bar
    .select2-container
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-selection__choice {
    display: none !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container
    .select2-selection__rendered.dashboard-select2-summary-active::before {
    content: attr(data-summary);
    display: block;
    color: var(--es-filter-text);
    font-size: 12px;
    padding: 0;
    min-height: 0;
    overflow: visible;
}

/*
 * Multi-select summaries (#rankgrowth, #scaling): block ::before + flex-wrap stacked
 * the value (e.g. Rising) on a second line under the inline search. Keep one row.
 */
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active {
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: hidden;
}

.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active::before {
    display: inline !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard-filters-explore.filters-bar
    .select2-container:not(.select2-container--open)
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-search--inline {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

/*
 * Caption-only capsules: page type, media type, sort, ad impressions. These now use a dedicated
 * .select2-caption-label span instead of ::before. Hide the native Select2 text.
 */
.dashboard-filters-explore.filters-bar .select-wrapper:has(#Order-2) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-rank-media-type) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-rank-adscore) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#Order) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#lowimpressions) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-status-filter) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/* Prevent duplicate text like "newestnewest": show native Select2 label only. */
.dashboard-filters-explore.filters-bar .select-wrapper:has(#Order-2) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-rank-media-type) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-rank-adscore) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#Order) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#lowimpressions) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-status-filter) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before {
    content: none !important;
    display: none !important;
}

/*
 * Multi/summary via ::before: scaling, search keyword.
 * Keep the ::before color override for these.
 */
.dashboard-filters-explore.filters-bar .select-wrapper:has(#scaling) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#ad-rank-scaling) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before,
.dashboard-filters-explore.filters-bar .select-wrapper:has(#searchkeyword) .select2-selection--single .select2-selection__rendered.dashboard-select2-summary-active::before {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/*
 * With the dropdown open, hide the capsule summary — matches native Select2 (focus moves to results),
 * and avoids showing the collapsed label stacked over the inline search row for multi summaries.
 */
.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection__rendered.dashboard-select2-summary-active::before {
    content: none !important;
    display: none !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-caption-label {
    display: none !important;
}

/* Single-selection pills with summary-active: native Select2 text is hidden; ::before shows data-summary.
   (#scaling, #lowimpressions — duplicate value+summary; #searchkeyword — caption-only bind was missing here.) */
.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--single
    .select2-selection__rendered.dashboard-select2-summary-active,
.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--single
    .select2-selection__rendered.dashboard-select2-summary-active * {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/*
 * Multi summary (#rankgrowth): templateSelection hides <li>s but stray text/icons can linger when open.
 * Kill residual capsule content; keep inline search legible (#rankgrowth only has one search field).
 */
.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active {
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active::after {
    content: none !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active > li:not(.select2-search) {
    display: none !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-search--inline {
    font-size: 12px !important;
}

.dashboard-filters-explore.filters-bar
    .select2-container--open
    .select2-selection--multiple
    .select2-selection__rendered.dashboard-select2-summary-active
    .select2-search__field {
    font-size: 12px !important;
    letter-spacing: normal !important;
}

/*
 * Empty multi-selects: Select2's search adapter sets an inline `width: 0px` on the
 * inline search input, which clips placeholders ("Coun…", "Webs…"). Size the field
 * to the placeholder/value instead of stretching (or collapsing) the capsule.
 */
.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-search--inline {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    float: none;
}

.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-search--inline
    .select2-search__field {
    width: auto !important;
    max-width: none !important;
    /* Keep "Countries" / "Language" readable even when field-sizing is weak. */
    min-width: 7.5em !important;
    field-sizing: content;
    box-sizing: border-box;
    margin: 0 !important;
}

.dashboard-filters-explore.filters-bar
    .select2-selection--multiple
    .select2-search--inline
    .select2-search__field::placeholder {
    color: var(--es-filter-text-placeholder) !important;
    opacity: 1;
}

/*
 * Select2 dropdown is mounted on document.body (styles.css fallDown keyframes).
 * Disable the slide-open animation on Dashboard Meta ads only.
 * Neighbor capsules use z-index stacking; keep the list above the bar without beating modals (~9999).
 */
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown {
    z-index: 9200 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--wh-r-lg, 12px) !important;
    box-shadow: var(--wh-e-3, 0 4px 8px -2px rgba(15,23,42,0.08), 0 12px 28px -8px rgba(15,23,42,0.16)) !important;
    background: #fff !important;
}

/* Animate the Select2 filter dropdowns (Page type, Ad score, Scaling, Rank growth, …)
 * open. Uses opacity / blur + the independent `translate` & `scale` properties — never
 * `transform` — so it can't fight Select2's absolute positioning. !important + this
 * rule's high `body:has()` specificity are required to win over Select2's own styles. */
@keyframes whSelect2DropdownDown {
    from { opacity: 0; translate: 0 -6px; scale: 0.94; filter: blur(1px); }
    to   { opacity: 1; translate: 0 0;    scale: 1;    filter: blur(0); }
}
@keyframes whSelect2DropdownUp {
    from { opacity: 0; translate: 0 6px;  scale: 0.94; filter: blur(1px); }
    to   { opacity: 1; translate: 0 0;    scale: 1;    filter: blur(0); }
}
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown.select2-dropdown--below {
    animation: whSelect2DropdownDown 0.1s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform: none !important;
    transform-origin: top center;
    will-change: opacity, translate, scale, filter;
}
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown.select2-dropdown--above {
    animation: whSelect2DropdownUp 0.1s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    transform: none !important;
    transform-origin: bottom center;
    will-change: opacity, translate, scale, filter;
}
@media (prefers-reduced-motion: reduce) {
    body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown.select2-dropdown--below,
    body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown.select2-dropdown--above {
        animation: none !important;
    }
}

/* Apply the same open animation to the other filter panels in the bar (Magic AI etc.):
 * range/summary tooltips (EU adspend, days running, ad spend, reach, …) and the lightpick
 * date-range calendars (ad-creation / last-seen). `.wh-filter-panel-animate-in` is toggled in
 * lightpick.js / dropdown.js when the panel actually opens so the animation is not consumed
 * during Lightpick's hidden measurement pass in updatePosition().
 */
@keyframes whFilterPanelDown {
    from {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 12px);
        translate: 0 -4px;
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 12px);
        translate: 0 0;
    }
}
@keyframes whFilterPanelUp {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0 round 12px);
        translate: 0 4px;
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 12px);
        translate: 0 0;
    }
}
@keyframes whFilterPanelContentIn {
    from { opacity: 0; translate: 0 6px; }
    to   { opacity: 1; translate: 0 0; }
}
body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden),
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden),
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden) {
    animation: whFilterPanelDown 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top center;
    will-change: clip-path, opacity, translate;
}
body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden)[data-popper-placement^="top"],
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden)[data-popper-placement^="top"],
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden)[data-popper-placement^="top"] {
    animation-name: whFilterPanelUp;
    transform-origin: bottom center;
}
body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden) .lightpick__presets,
body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden) .lightpick__months,
.dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden) > * {
    animation: whFilterPanelContentIn 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden),
    .dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden),
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden),
    body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden) .lightpick__presets,
    body:has(.dashboard-filters-explore.filters-bar) .lightpick.wh-filter-panel-animate-in:not(.is-hidden) .lightpick__months,
    .dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"].wh-filter-panel-animate-in:not(.hidden) > * {
        animation: none;
        opacity: 1;
        clip-path: none;
        translate: none;
        transform: none;
    }
}

/* Dropdown rows had no bar-scoped text color; grey inherited next to allowHtml template rows (ad score, rank growth). */
body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option:not(.select2-results__message) {
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option--highlighted[aria-selected],
body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option:hover,
body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option:focus {
    background-color: #f1f5f9 !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option[aria-selected='true']:not(.select2-results__option--highlighted) {
    background-color: #fff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Multi-select dropdown checkboxes (Scaling, Themes, …) — SVG checkmark; avoids broken Glyphicons on some pages */
body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option:not(.select2-results__message):before {
    content: '' !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    position: relative !important;
    height: 16px !important;
    width: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    border: 1.5px solid #c0c0c0 !important;
    box-sizing: border-box !important;
    -webkit-text-fill-color: initial !important;
    color: inherit !important;
    font-family: inherit !important;
}

body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option[aria-selected='true']:before,
body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option--highlighted[aria-selected='true']:before {
    content: '' !important;
    border: 0 !important;
    background-color: #111827 !important;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 10px 8px !important;
    -webkit-text-fill-color: initial !important;
}

body:has(.dashboard-filters-explore.filters-bar)
    .select2-container--default
    .select2-results__option--highlighted[aria-selected='false']:before {
    border: 1.5px solid #c0c0c0 !important;
    background-color: #fff !important;
    background-image: none !important;
}

/*
 * The Select2 dropdown search box used the global heavy #c6c6c6 border plus the browser's
 * default focus outline, so it read as a stray dark "bordered box" inside the otherwise
 * subtle filter dropdowns (most visible on small lists like Sort By). Match it to the
 * filter theme and swap the outline for a soft focus ring.
 */
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid #dde3ec !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: #225aea !important;
    box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.12) !important;
    -webkit-box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.12) !important;
}

/*
 * Kill the default (often black) UA focus outline on the Select2 combobox capsules — the open
 * dropdown is the affordance. Covers bar filters and the relocated Sort By alike.
 */
body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-selection--single:focus,
body:has(.dashboard-filters-explore.filters-bar) .select2-container--default .select2-selection--multiple:focus,
body:has(.dashboard-filters-explore.filters-bar) .select2-container--default.select2-container--focus .select2-selection--single,
body:has(.dashboard-filters-explore.filters-bar) .select2-container--default.select2-container--focus .select2-selection--multiple {
    outline: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .div-block-71,
.dashboard-filters-explore.filters-bar > .select-wrapper > select.form-input.w-select:not(.hidden):not(.select2-hidden-accessible),
.dashboard-filters-explore.filters-bar > .select-wrapper > span.select2.select2-container {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(
        #adsetsumary,
        #adspendsummary,
        #adspendcpmsummary,
        #copylengthsummary,
        #videolengthsummary,
        #ad-rank-copylengthsummary,
        #ad-rank-videolengthsummary,
        #ad-rank-scalingsummary,
        #ad-rank-mediatypesummary,
        #ad-rank-adscoresummary,
        #ad-rank-impressionssummary,
        #ad-rank-daysrunningsummary,
        #adranksummary,
        #reachsummary,
        #audiencesummary,
        #daysrunningSummary,
        #productsonstoreSummary,
        #priceSummary,
        #trafficSummary,
        #growthSummary,
        #storerevenueSummary,
        #trustpilotSummary,
        #activeadssummary,
        #activeadsgrowthSummary,
        #reachgrowthSummary,
        #pagelikessummary,
        #igfollowerssummary,
        #likessummary,
        #commentssummary,
        #sharessummary,
        #viewssummary,
        #specificlikessummary
    )
    > .div-block-71 {
    overflow: visible;
    max-width: 100%;
    width: 100%;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(
        #adspendsummary,
        #adspendcpmsummary
    )
    > .div-block-71 {
    overflow: visible;
    max-width: 100%;
    width: 100%;
}

/* Hide placeholder skeleton once IncExc CFD trigger is mounted (sync init or lazy bootstrap). */
.dashboard-filters-explore.filters-bar > .select-wrapper:has(> .cfd-container .cfd-trigger) > .select-2-skeleton-deferred-inc-exc {
    display: none !important;
}

/* IncExc filters: hide live Select2 UI if it was initialized on the hidden sync <select>. */
.dashboard-filters-explore.filters-bar > .select-wrapper.country-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.website-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.language-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.apps-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.niche-select:has(> .cfd-container .n3-trigger) > .select2-container,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton),
.dashboard-filters-explore.filters-bar > .select-wrapper.tracked-brands-select:has(> .cfd-container .cfd-trigger) > .select2-container:not(.select-2-skeleton) {
    display: none !important;
}

/* Keep overflow visible so open CFD panels aren't clipped */
.dashboard-filters-explore.filters-bar > .select-wrapper > .cfd-container {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.dashboard-filters-explore.filters-bar > .select-wrapper .n3-root {
    position: relative;
    z-index: 3;
}

/*
 * Dropdown chevron on every filter control (same affordance as visitor country).
 * Uses a small border-arrow; open states rotate it upward.
 */
.dashboard-filters-explore.filters-bar {
    --es-filter-chevron-inset: 28px;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > span.select2.select2-container:not(.select-2-skeleton)::after,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > span.select2.select2-container:not(.select-2-skeleton)::after,
.dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71::after,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .div-block-71::after {
    content: '';
    position: absolute;
    right: 11px;
    top: 50%;
    margin-top: -5px;
    width: 6px;
    height: 6px;
    border: solid #94a3b8;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 5;
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(> .select2-container--open) > span.select2.select2-container::after,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(> .select2-container--open) > span.select2.select2-container::after,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(> div[id^="tooltip"]:not(.hidden)) > .div-block-71::after,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(> div[id^="tooltip"]:not(.hidden)) > .div-block-71::after,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select:has(.dashboard-store-vc-panel.open) > .div-block-71::after {
    transform: rotate(225deg);
    margin-top: -3px;
}

/* Leading capsule glyph is anchored to wrapper bottom; hide it while table panel is open */
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select:has(.dashboard-store-vc-panel.open)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select:has(.dashboard-store-vc-panel.open)::before,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select:has(.dashboard-tracking-pixels-panel.open)::before {
    display: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select:has(.dashboard-store-vc-panel.open) > .div-block-71::after {
    transform: rotate(225deg);
    margin-top: -3px;
}

/* Niche cascade uses .n3-trigger::before (same as .cfd-trigger); hide legacy SVG chevron if present */
.dashboard-filters-explore.filters-bar .n3-chevron,
.dashboard-filters-explore.filters-bar .n3-trigger-icon {
    display: none !important;
}

.dashboard-filters-explore.filters-bar .n3-root.n3-open .n3-trigger::before {
    transform: rotate(225deg);
    margin-top: -3px;
}

/* Global styles attach ::before chevrons / junk ::after to .select2-selection */
.dashboard-filters-explore.filters-bar span.select2-selection::before,
.dashboard-filters-explore.filters-bar .select2-selection--multiple::before,
.dashboard-filters-explore.filters-bar span.select2-selection::after,
.dashboard-filters-explore.filters-bar .select2-selection--multiple::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Range / summary text triggers + ordinary selects */
.dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 input.form-input[type="text"],
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 input.form-input[type="text"] {
    width: 100% !important;
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset)
        calc(3px - var(--es-filter-capsule-nudge)) var(--es-filter-padding-left) !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    background: var(--es-filter-surface) !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    box-shadow: var(--es-control-shadow) !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Date range inputs rendered directly in wrapper embeds (e.g. Magic AI date + last seen). */
.dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[type="text"] {
    width: 100% !important;
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) 10px calc(3px - var(--es-filter-capsule-nudge))
        var(--es-filter-padding-left) !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    background: var(--es-filter-surface) !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    box-shadow: var(--es-control-shadow) !important;
    box-sizing: border-box !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[type="text"]:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
    box-shadow: var(--es-control-shadow-hover) !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[type="text"]:focus {
    border-color: var(--es-border-focus) !important;
    background: var(--es-filter-surface-focus) !important;
    outline: none !important;
    box-shadow: var(--es-control-focus-ring) !important;
}

.dashboard-filters-explore.filters-bar
    > .select-wrapper:has(
        #adsetsumary,
        #adspendsummary,
        #adspendcpmsummary,
        #copylengthsummary,
        #videolengthsummary,
        #adranksummary,
        #reachsummary,
        #audiencesummary,
        #daysrunningSummary,
        #productsonstoreSummary,
        #priceSummary,
        #trafficSummary,
        #growthSummary,
        #storerevenueSummary,
        #trustpilotSummary,
        #activeadssummary,
        #activeadsgrowthSummary,
        #reachgrowthSummary,
        #pagelikessummary,
        #igfollowerssummary,
        #likessummary,
        #commentssummary,
        #sharessummary,
        #viewssummary,
        #specificlikessummary
    )
    .div-block-71
    input.form-input[type="text"],
.dashboard-filters-explore.filters-bar
    > .date-filters-row
    > .select-wrapper:has(
        #adsetsumary,
        #adspendsummary,
        #adspendcpmsummary,
        #copylengthsummary,
        #videolengthsummary,
        #adranksummary,
        #reachsummary,
        #audiencesummary,
        #daysrunningSummary,
        #productsonstoreSummary,
        #priceSummary,
        #trafficSummary,
        #growthSummary,
        #storerevenueSummary,
        #trustpilotSummary,
        #activeadssummary,
        #activeadsgrowthSummary,
        #reachgrowthSummary,
        #pagelikessummary,
        #igfollowerssummary,
        #likessummary,
        #commentssummary,
        #sharessummary,
        #viewssummary,
        #specificlikessummary
    )
    .div-block-71
    input.form-input[type="text"] {
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 input.form-input[type="text"]:hover,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 input.form-input[type="text"]:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
    box-shadow: var(--es-control-shadow-hover) !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 input.form-input[type="text"]:focus,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 input.form-input[type="text"]:focus {
    border-color: var(--es-border-focus) !important;
    background: var(--es-filter-surface-focus) !important;
    outline: none !important;
    box-shadow: var(--es-control-focus-ring) !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 input.form-input[type="text"]::placeholder,
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 input.form-input[type="text"]::placeholder {
    color: var(--es-filter-text-placeholder) !important;
    opacity: 1;
}

.dashboard-filters-explore.filters-bar
    > .select-wrapper:not(.themes-select):not(.niche-select)
    > select.form-input.w-select:not(.hidden):not(.select2-hidden-accessible) {
    width: 100% !important;
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) 10px calc(3px - var(--es-filter-capsule-nudge))
        var(--es-filter-padding-left) !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    background: var(--es-filter-surface) !important;
    color: var(--es-filter-text) !important;
    box-shadow: var(--es-control-shadow) !important;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/* Select2 replaces the visible pill — keep the sync <select> off-screen (explorer bar overrides were exposing it). */
.dashboard-filters-explore.filters-bar > .select-wrapper > select.form-input.w-select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Include/exclude capsules — align with explorer custom dropdowns */
.dashboard-filters-explore.filters-bar .cfd-trigger {
    min-height: 34px !important;
    max-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset)
        calc(3px - var(--es-filter-capsule-nudge)) var(--es-filter-padding-left) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text) !important;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.dashboard-filters-explore.filters-bar .cfd-trigger:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
}

.dashboard-filters-explore.filters-bar .cfd-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    font-size: 12px !important;
    font-weight: var(--es-filter-font-weight) !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    /* Stay transparent inside the capsule — dark-mode.css paints all text inputs. */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color-scheme: inherit;
}

.dashboard-filters-explore.filters-bar .cfd-compact-preview {
    display: none !important;
}

.dashboard-filters-explore.filters-bar .cfd-search-input::placeholder {
    color: var(--es-filter-text-placeholder) !important;
    opacity: 1;
}

.dashboard-filters-explore.filters-bar .cfd-panel .cfd-item-name {
    color: var(--es-filter-text);
}

.dashboard-filters-explore.filters-bar .cfd-panel .cfd-item-flag,
.dashboard-filters-explore.filters-bar .cfd-compact-icon.cfd-item-flag {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dashboard-filters-explore.filters-bar .cfd-panel .cfd-item-app-icon,
.dashboard-filters-explore.filters-bar .cfd-compact-icon.cfd-item-app-icon {
    border-radius: 3px;
}

.dashboard-filters-explore.filters-bar .dashboard-active-filter-chip-icon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}

.dashboard-filters-explore.filters-bar .dashboard-active-filter-chip-icon--app {
    border-radius: 3px;
}

.dashboard-filters-explore.filters-bar .dashboard-active-filter-chip-icon--star {
    width: auto;
    height: auto;
    font-size: 12px;
}

.dashboard-filters-explore.filters-bar .n3-trigger {
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset)
        calc(3px - var(--es-filter-capsule-nudge)) var(--es-filter-padding-left) !important;
    border-radius: var(--es-radius-control) !important;
    border: 1px solid var(--es-border) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    font-size: 12px !important;
    color: var(--es-filter-text) !important;
}

.dashboard-filters-explore.filters-bar .n3-trigger-label {
    color: var(--es-filter-text) !important;
}

/* Select2 capsules (Themes, Sort, Scaling, Media type, Page type, …) */
.dashboard-filters-explore.filters-bar > .select-wrapper .select2-container--default .select2-selection--multiple {
    margin-bottom: 0 !important;
    min-height: 34px !important;
    padding: calc(2px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset)
        max(0px, calc(2px - var(--es-filter-capsule-nudge))) var(--es-filter-padding-left) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper .select2-container--default .select2-selection--single {
    margin-bottom: 0 !important;
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) var(--es-filter-chevron-inset)
        calc(3px - var(--es-filter-capsule-nudge)) var(--es-filter-padding-left) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

/* Hover elevation: real Select2 capsules (media type, sort, etc.) — same treatment as summary inputs. */
.dashboard-filters-explore.filters-bar .select2-container:not(.select2-container--open) .select2-selection--single:hover,
.dashboard-filters-explore.filters-bar .select2-container:not(.select2-container--open) .select2-selection--multiple:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
    box-shadow: var(--es-control-shadow-hover) !important;
}

.dashboard-filters-explore.filters-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper span.select2.select2-container {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    /* Let the capsule's drop shadow paint instead of being clipped by the container.
       Text is still ellipsised on .select2-selection__rendered, so nothing bleeds. */
    overflow: visible !important;
}

/*
 * Date row wrappers (#sortbyselectionbox, date pickers) are not direct children of .filters-bar.
 * Without these, global styles.css leaves Select2 pills with ~5px left inset while the wrapper
 * still paints a leading ::before glyph — "Sort By" / summary text collides with the icon.
 */
.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > span.select2.select2-container {
    position: relative;
    z-index: 3;
    min-width: 0;
    max-width: 100%;
    /* Show the capsule shadow (clipped text is handled on .select2-selection__rendered). */
    overflow: visible;
    width: 100% !important;
    min-height: 34px !important;
    /* Row siblings stretch to the tallest date field; grow so the pill matches column height (Sort By). */
    flex: 1 1 auto;
    align-self: stretch;
}

.dashboard-filters-explore.filters-bar
    > .date-filters-row
    > #sortbyselectionbox
    .select2-container--default
    .select2-selection--single {
    height: 100% !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .select2-container--default .select2-selection--multiple {
    margin-bottom: 0 !important;
    min-height: 34px !important;
    padding: calc(2px + var(--es-filter-capsule-nudge)) 8px
        max(0px, calc(2px - var(--es-filter-capsule-nudge))) var(--es-filter-padding-left) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .select2-container--default .select2-selection--single {
    margin-bottom: 0 !important;
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) 10px calc(3px - var(--es-filter-capsule-nudge))
        var(--es-filter-padding-left) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
}

.dashboard-filters-explore.filters-bar
    > .date-filters-row
    .select2-container:not(.select2-container--open)
    .select2-selection--single:hover,
.dashboard-filters-explore.filters-bar
    > .date-filters-row
    .select2-container:not(.select2-container--open)
    .select2-selection--multiple:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
    box-shadow: var(--es-control-shadow-hover) !important;
}

/* Rank growth: template icons + Tailwind gap/text read larger than other bar controls */
.dashboard-filters-explore.filters-bar .select-wrapper:has(#rankgrowth) svg.rankgrowth-select-icon,
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .rankgrowth-select-icon {
    width: 12px !important;
    height: 12px !important;
}

.dashboard-filters-explore.filters-bar .select-wrapper:has(#rankgrowth) .inline-flex.items-center.gap-2,
body:has(.dashboard-filters-explore.filters-bar) .select2-dropdown .inline-flex.items-center.gap-2 {
    gap: 4px !important;
    font-size: 12px !important;
}

.dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .w-embed,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created) > .w-embed,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen) > .w-embed {
    min-width: 0;
    max-width: 100%;
    /* Lightpick appends .lightpick to field.parentNode — must not clip the calendar */
    overflow: visible;
    position: relative;
}

.dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed {
    position: relative;
}

.dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) input.form-input.ad,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created) input.form-input.ad,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen) input.form-input.ad {
    min-height: 34px !important;
    padding: calc(3px + var(--es-filter-capsule-nudge)) 10px calc(3px - var(--es-filter-capsule-nudge))
        var(--es-filter-padding-left) !important;
    font-size: 12px !important;
    color: var(--es-filter-text) !important;
    -webkit-text-fill-color: var(--es-filter-text) !important;
    border: 1px solid var(--es-border) !important;
    border-radius: var(--es-radius-control) !important;
    box-shadow: var(--es-control-shadow) !important;
    background: var(--es-filter-surface) !important;
    box-sizing: border-box !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    field-sizing: fixed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad:hover,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) input.form-input.ad:hover,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created) input.form-input.ad:hover,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen) input.form-input.ad:hover {
    border-color: var(--es-border-hover) !important;
    background: var(--es-filter-surface-hover) !important;
    box-shadow: var(--es-control-shadow-hover) !important;
}

.dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad:focus,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) input.form-input.ad:focus,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created) input.form-input.ad:focus,
.dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen) input.form-input.ad:focus {
    border-color: var(--es-border-focus) !important;
    background: var(--es-filter-surface-focus) !important;
    outline: none !important;
    box-shadow: var(--es-control-focus-ring) !important;
}

/* =================================================================
   DASHBOARD FILTERS — PRESET ROW (desktop)
   Single-line scroll + edge fade; ~11 pills never fit one row at any width.
   ================================================================= */
@media (min-width: 992px) {
    .ads-page-wrapper {
        --preset-scroll-fade-bg: var(--es2-surface-alt, #f8fafc);
    }

    .ads-page-wrapper .preset-filters-scroll-wrap {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .ads-page-wrapper .preset-filters-scroll-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 52px;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(to right, transparent, var(--preset-scroll-fade-bg));
    }

    .ads-page-wrapper .preset-filters-scroll-wrap .preset-filters {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
        padding-right: 4px;
    }

    .ads-page-wrapper .preset-filters-scroll-wrap .preset-filters::-webkit-scrollbar {
        display: none;
    }

    .ads-page-wrapper .preset-filters .dashboard-quick-filter-pill {
        flex: 0 0 auto;
    }
}

/* =================================================================
   DASHBOARD FILTERS — LAPTOP / MACBOOK (992px–1599px)
   Tighter filter columns on ad library pages.
   ================================================================= */
@media (min-width: 992px) and (max-width: 1599px) {
    .ads-page-wrapper .dashboard-filters-explore.filters-bar {
        --es-filter-col-min: 118px;
        --es-filter-col-max: 130px;
    }

    .ads-page-wrapper .preset-filters .dashboard-quick-filter-pill {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .ads-page-wrapper .dashboard-filters-explore.filters-bar {
        --es-filter-col-min: 112px;
        --es-filter-col-max: 124px;
    }
}

/* Desktop: each capsule is only as wide as its icon + label/value + chevron. */
@media (min-width: 992px) {
    /*
     * Kill legacy equal-flex date columns (inline flex:1 1 0 on Pinterest / TikTok /
     * Facebook Post). With display:contents those wrappers join the bar flex and
     * used to shrink + overlap neighbouring pills.
     */
    .dashboard-filters-explore.filters-bar > .select-wrapper,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper > span.select2.select2-container,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > span.select2.select2-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .div-block-71,
    .dashboard-filters-explore.filters-bar > .select-wrapper > .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.country-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.website-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.tracked-brands-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.language-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.apps-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.niche-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper > .n3-root,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .w-embed,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepicker) > .w-embed,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerlastseen) > .w-embed,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerproductcreation) > .w-embed,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) > .w-embed {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper .div-block-71 > input.select2-container,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper .div-block-71 > input.select2-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71 > input.select2-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter #adranksummary,
    .dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad,
    .dashboard-filters-explore.filters-bar > .date-filters-row .form-input[id^="datepicker"],
    .dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[id^="datepicker"],
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) input.form-input.ad,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-created) input.form-input.ad,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#brand-ads-datepicker-lastseen) input.form-input.ad,
    .dashboard-filters-explore.filters-bar .cfd-search-input,
    .dashboard-filters-explore.filters-bar .n3-trigger {
        width: auto !important;
        min-width: 7.5em !important;
        max-width: none !important;
        field-sizing: content !important;
        flex: 0 0 auto !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row .form-input[id^="datepicker"],
    .dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[id^="datepicker"] {
        min-width: 10.5em !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper:has(#datepickerproductcreation) input,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerproductcreation) > .w-embed > input {
        min-width: 15.5em !important;
    }

    .dashboard-filters-explore.filters-bar .cfd-search-input {
        min-width: 6.5em !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71 > input,
    .dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad,
    .dashboard-filters-explore.filters-bar > .date-filters-row .form-input[id^="datepicker"],
    .dashboard-filters-explore.filters-bar > .select-wrapper > .w-embed > input.form-input[id^="datepicker"] {
        padding-right: var(--es-filter-chevron-inset) !important;
    }

    .dashboard-filters-explore.filters-bar
        .select2-container--default
        .select2-selection--single
        .select2-selection__rendered,
    .dashboard-filters-explore.filters-bar
        .select2-selection--multiple
        .select2-selection__rendered {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .dashboard-filters-explore.filters-bar #sortbyselectionbox > span.select2.select2-container {
        flex: 0 0 auto !important;
        align-self: auto;
        width: max-content !important;
    }

    .dashboard-filters-explore.filters-bar .cfd-trigger,
    .dashboard-filters-explore.filters-bar .n3-trigger {
        width: max-content !important;
        max-width: none !important;
        overflow: visible !important;
    }
}

/* =================================================================
   DASHBOARD FILTERS — MOBILE / TABLET (aligned with /explore-shops)
   ================================================================= */
@media (max-width: 991px) {
    .dashboard-filters-explore.filters-bar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
        padding: 8px 0 !important;
    }

    .dashboard-meta-filters-panel.dashboard-filters-explore.filters-bar {
        padding: 10px 12px !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        justify-self: stretch !important;
        align-items: stretch !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .w-embed,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) > .w-embed {
        width: 100% !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad,
    .dashboard-filters-explore.filters-bar > .select-wrapper:has(#datepickerstorecreation) input.form-input.ad {
        width: 100% !important;
        field-sizing: fixed;
    }

    /* Wider desktop pills — fill grid cells on mobile */
    .dashboard-filters-explore.filters-bar > .select-wrapper.country-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.website-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.language-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.niche-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.apps-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.themes-select,
    .dashboard-filters-explore.filters-bar > .select-wrapper.rankgrowth-filter {
        flex: none !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper:has(
            #adsetsumary,
            #adspendsummary,
            #copylengthsummary,
            #videolengthsummary,
            #adranksummary,
            #reachsummary,
            #audiencesummary,
            #daysrunningSummary,
            #productsonstoreSummary,
            #priceSummary,
            #trafficSummary,
            #activeadssummary,
            #activeadsgrowthSummary,
            #reachgrowthSummary,
            #pagelikessummary,
            #igfollowerssummary,
            #likessummary,
            #commentssummary,
            #sharessummary,
            #viewssummary,
            #specificlikessummary
        ) {
        flex: none !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper.country-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.website-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.language-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.apps-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.niche-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.store-based-in-select .cfd-container,
    .dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select > .div-block-71,
    .dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select #dashboardStoreVisitorCountryTrigger,
    .dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select > .div-block-71,
    .dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select #dashboardTrackingPixelsTrigger,
    .dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter .div-block-71,
    .dashboard-filters-explore.filters-bar > .select-wrapper.adrank-filter #adranksummary,
    .dashboard-filters-explore.filters-bar > .select-wrapper.rankgrowth-filter .select2-container {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper > span.select2.select2-container,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > span.select2.select2-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71,
    .dashboard-filters-explore.filters-bar > .select-wrapper > .div-block-71 .form-input,
    .dashboard-filters-explore.filters-bar > .date-filters-row > .select-wrapper > .w-embed,
    .dashboard-filters-explore.filters-bar > .date-filters-row input.form-input.ad {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Range / tooltip panels — stay inside viewport */
    .dashboard-filters-explore.filters-bar > .select-wrapper > div[id^="tooltip"]:not(.hidden) {
        max-width: min(328px, calc(100vw - 24px)) !important;
        width: min(328px, calc(100vw - 24px)) !important;
        box-sizing: border-box !important;
    }

    .dashboard-filters-explore.filters-bar .lightpick {
        max-width: calc(100vw - 16px) !important;
    }

    .dashboard-filters-explore.filters-bar > .select-wrapper > .cfd-container.open,
    .dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select .dashboard-store-vc-panel.open,
    .dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select .dashboard-store-vc-panel.open {
        max-width: min(328px, calc(100vw - 24px)) !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .dashboard-filters-explore.filters-bar {
        grid-template-columns: 1fr !important;
    }

    .dashboard-filters-explore.filters-bar > .date-filters-row {
        grid-template-columns: 1fr !important;
    }
}

/* Pinterest / Meta-style pages: Sort By sits in the filter bar */
.dashboard-filters-explore.filters-bar #sortbyselectionbox > span.select2.select2-container {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 34px !important;
}

.dashboard-filters-explore.filters-bar #sortbyselectionbox .select2-container--default .select2-selection--single {
    min-height: 34px !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.dashboard-filters-explore.filters-bar #sortbyselectionbox .select2-selection__rendered {
    min-width: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Match Dashboard Meta: keep promo badges out of compact bar labels */
.dashboard-filters-explore.filters-bar .select-label > .filter-label-badge {
    display: none !important;
}

/* Hide circle-i helpers next to labels — filter names live inside pills / placeholders */
.dashboard-filters-explore.filters-bar .select-label > .inline-block.pointer-events-none {
    display: none !important;
}

.dashboard-filters-explore.filters-bar img.adcostinfo,
.dashboard-filters-explore.filters-bar img[src*="question-circle"] {
    display: none !important;
}

/* ── "Sort By" control relocated to the results-count row ─────────────── */
#ad-results-sort-slot {
    position: relative;
    /* Stay below the filter bar (z-index 15 / 50 when a popover is open). A matching
       z-index of 50 let this row paint over tall range panels (e.g. Monthly Visit Growth). */
    z-index: 1;
}

.select-wrapper.sortby-in-results {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    position: relative;
}

.select-wrapper.sortby-in-results .select-label {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #374151;
    cursor: default;
}

.select-wrapper.sortby-in-results .select-label > .inline-block.pointer-events-none {
    display: none !important;
}

.select-wrapper.sortby-in-results .select2 {
    width: 170px !important;
    min-width: 150px;
    max-width: 220px;
}

/*
 * Relocated out of .filters-bar, so the bar-scoped caption styles no longer reach this
 * control. Without them the pill rendered the redundant standalone label PLUS a jammed
 * "Sort ByLast Seen". Re-create the bar treatment here: drop the external label and show
 * a single, separated "Sort By: Last Seen" caption inside the pill.
 */
.select-wrapper.sortby-in-results > .select-label {
    display: none !important;
}

.select-wrapper.sortby-in-results .select2-selection__rendered.dashboard-select2-summary-active {
    display: flex !important;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-wrapper.sortby-in-results .select2-caption-label {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
    font-weight: 600;
}

.select-wrapper.sortby-in-results .select2-caption-label::after {
    content: ":";
    margin-right: 5px;
    color: #5b6b82;
    font-weight: 400;
}

/* Match the pill to the rest of the filter controls (surface + border) instead of the
   global plain-white Select2 box, and neutralize the purple clear "×".
   NOTE: literal colors — this control is relocated OUTSIDE .dashboard-filters-explore,
   so the --es-* custom properties are out of scope and would resolve to nothing. */
.select-wrapper.sortby-in-results .select2-container--default .select2-selection--single {
    background-color: #f8fafc !important;
    border: 1px solid #dde3ec !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04) !important;
}

.select-wrapper.sortby-in-results .select2-container--default .select2-selection--single:hover {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

.select-wrapper.sortby-in-results .select2-selection__clear {
    display: none !important;
}

/*
 * Sort By is moved to #ad-results-sort-slot (z-index 1), directly under the filter
 * bar (z-index 15). A tooltip that opens upward overlaps the bar but cannot paint
 * over it — only flip vertical placement; keep global .custom-popup styling.
 */
.select-wrapper.sortby-in-results.has-popup > .custom-popup:first-child {
    bottom: auto !important;
    top: calc(100% + 8px) !important;
    transform-origin: top center;
}

/*
 * Filter dropdown panels (range/preset tooltips): the muted gray-600/500 helper text
 * reads as washed-out and jarring on large screens. Pull it close to the label black so
 * descriptions and sub-labels (Mode / Presets) stay legible and consistent with the bar.
 */
.dashboard-filters-explore.filters-bar [id^="tooltip"] .text-gray-600,
.dashboard-filters-explore.filters-bar [id^="tooltip"] .text-gray-500 {
    color: #1f2937 !important;
}

/* Store visitor country + tracking pixels — table panels (Explore Shops semantics) */
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select #dashboardStoreVisitorCountryTrigger,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select #dashboardTrackingPixelsTrigger {
    cursor: pointer;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select > .div-block-71,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select > .div-block-71 {
    position: relative;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select .dashboard-tracking-pixels-panel,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select .dashboard-store-vc-panel,
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select .dashboard-store-vc-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    width: min(360px, calc(100vw - 24px));
    min-width: min(360px, calc(100vw - 24px));
    max-width: min(360px, calc(100vw - 24px));
    box-sizing: border-box;
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--es-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select .dashboard-store-vc-panel:not(.open),
.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select .dashboard-store-vc-panel[hidden] {
    display: none !important;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select .dashboard-store-vc-panel.open,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select .dashboard-store-vc-panel.open,
.dashboard-filters-explore.filters-bar > .select-wrapper.tracking-select .dashboard-tracking-pixels-panel.open {
    display: flex !important;
    flex-direction: column;
}

.dashboard-filters-explore.filters-bar > .select-wrapper.store-visitor-country-select:has(.dashboard-store-vc-panel.open) #dashboardStoreVisitorCountryTrigger {
    border-color: var(--es-border-focus) !important;
    box-shadow: var(--es-control-focus-ring) !important;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid #eaeaea;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table-wrap {
    max-height: min(320px, 50vh);
    overflow: auto;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table col.dashboard-store-vc-col-mode {
    width: 52px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table col.dashboard-store-vc-col-country,
.dashboard-filters-explore.filters-bar .dashboard-store-vc-table col:first-child {
    width: auto;
    min-width: 148px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table thead th.dashboard-store-vc-col-country {
    min-width: 148px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #000000;
    font-size: 9px;
    font-weight: var(--es-filter-font-weight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 6px;
    border-bottom: 1px solid #eaeaea;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table thead th.dashboard-store-vc-col-mode {
    text-align: center;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table tbody td {
    padding: 5px 6px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-table tbody td.dashboard-store-vc-cell-mode {
    text-align: center;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-country-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #0f172a;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel-summary {
    padding: 6px 10px;
    font-size: 11px;
    color: #0f172a;
    background: #f8fafc;
    border-top: 1px solid #eaeaea;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-footer {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
    border-top: 1px solid #eaeaea;
    background: #fafafa;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-footer-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

/* Global input[type=checkbox]::before clashes with custom panel checkboxes (double box). */
.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel input[type='checkbox']::before,
.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel input[type='checkbox']:checked::before {
    content: none !important;
    display: none !important;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    cursor: pointer;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    display: inline-block;
    position: relative;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel input[type='checkbox']:checked {
    background: #225aea;
    border-color: #225aea;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-panel input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dashboard-filters-explore.filters-bar > .select-wrapper:has(.dashboard-store-vc-panel.open) {
    z-index: 500;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-th-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    width: 100%;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-th-label .custom-popup {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 260px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--es-filter-font-weight);
    font-size: 11px;
    z-index: 1300;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-help-svg {
    flex-shrink: 0;
    color: #5b6b82;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-name-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-row-count {
    flex-shrink: 0;
    color: #5b6b82;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-footer-btn--primary {
    background: #225aea !important;
    border-color: #225aea !important;
    color: #fff !important;
}

.dashboard-filters-explore.filters-bar .dashboard-store-vc-footer-btn--primary:hover {
    background: #1a4fd4 !important;
    border-color: #1a4fd4 !important;
}

.dashboard-filters-explore.filters-bar .filter-locked.store-visitor-country-select .dashboard-store-vc-panel {
    pointer-events: none;
}

.dashboard-filters-explore.filters-bar .dashboard-tracking-px-bulk-actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid #eaeaea;
}

.dashboard-filters-explore.filters-bar .dashboard-tracking-px-bulk-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: var(--es-filter-font-weight);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #000000;
    cursor: pointer;
}

.dashboard-filters-explore.filters-bar .dashboard-tracking-px-bulk-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.dashboard-filters-explore.filters-bar .dashboard-tracking-px-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
}

/* Async result-count placeholder (exact total loads after ads feed). */
#ad-results-count.ad-results-count--loading {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
}

.ad-results-count-skeleton {
    display: inline-block;
    width: 7.5rem;
    height: 0.875rem;
    border-radius: 4px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e8edf3 45%, #f8fafc 55%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: ad-results-count-shimmer 1.35s ease-in-out infinite;
}

@keyframes ad-results-count-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ── Light mode: filter popover pills + segmented switchers ─────────────── */

/*
 * Framed gradient popover shell — was only inlined on /ads (Dashboard.php).
 * Beats inline `background-color:white; border:none; border-radius:0.5em`.
 */
.filters.dashboard-filters-explore [id^="tooltip"],
.dashboard-filters-explore.filters-bar [id^="tooltip"] {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* Quick pill rows under range filter popups */
.active-ads-preset-pills,
.ad-rank-preset-pills,
.copy-length-preset-pills,
.days-running-preset-pills,
.growth-period-pills,
.monthly-visits-preset-pills,
.page-likes-preset-pills,
.ig-followers-preset-pills,
.price-preset-pills,
.reach-preset-pills,
.products-on-store-preset-pills,
.video-length-preset-pills,
.fw-demo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.fw-demo-pills {
    margin-top: 6px;
}

.timeframe-pill,
.ad-rank-mode-pill,
.metric-mode-pill,
.range-popover-clear,
.dashboard-store-vc-footer-btn,
.fw-demo-pills .timeframe-pill {
    box-shadow: none !important;
}

.timeframe-pill {
    appearance: none;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: var(--wh-filter-tab-text, #475569);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.timeframe-pill:hover {
    background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
    border-color: #cbd5e1;
    color: var(--wh-filter-tab-text-hover, #334155);
}

.timeframe-pill[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.timeframe-pill.active {
    background: linear-gradient(180deg, #2f66f0 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #fff;
}

/* Min/Max inputs inside range popovers — match Meta capsule uniformity */
.filters.dashboard-filters-explore [id^="tooltip"] .price-input .form-input,
.dashboard-filters-explore.filters-bar [id^="tooltip"] .price-input .form-input {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
}

.ad-rank-mode-pills,
.metric-mode-pills {
    display: inline-flex;
    width: 100%;
    padding: 4px;
    gap: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f3f4f6;
}

.ad-rank-mode-pills .ad-rank-mode-pill,
.metric-mode-pills .metric-mode-pill {
    flex: 1 1 0;
    border-radius: 8px;
    border-color: transparent;
    background: transparent;
    color: #4b5563;
    font-weight: 600;
    text-align: center;
    padding: 7px 10px;
}

.ad-rank-mode-pills .ad-rank-mode-pill:hover,
.metric-mode-pills .metric-mode-pill:hover {
    background: #e5e7eb;
    border-color: transparent;
    color: #334155;
}

.ad-rank-mode-pills .ad-rank-mode-pill.active,
.metric-mode-pills .metric-mode-pill.active {
    background: #225aea;
    color: #fff;
    border-color: #225aea;
}

.ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill {
    border-radius: 8px;
    font-weight: 600;
    padding: 7px 10px;
}

.ad-rank-filter-panel .ad-rank-preset-pills .timeframe-pill.active {
    background: #225aea;
    border-color: #225aea;
    color: #fff;
}

.range-popover-clear-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.range-popover-clear {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.15s ease;
}

.range-popover-clear:hover {
    color: #b91c1c;
}

.range-popover-clear[hidden] {
    display: none;
}

/* Active filter pills — grey chip (ad library, ad rank, explore) */
#active-filters-list > div,
.ad-rank-filter-chip {
    border: 1px solid #e5e7eb !important;
    background: #f3f4f6 !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#active-filters-list > div:hover,
.ad-rank-filter-chip:hover {
    border-color: #d1d5db !important;
    background: #e5e7eb !important;
}

/* ── Dashboard Sort By (results row) — matches explore-shops / landers tts-cp-btn ── */
#ad-results-sort-slot .tts-cp-btn.explore-landers-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    max-width: min(260px, 48vw);
}
#ad-results-sort-slot .tts-cp-btn.explore-landers-sort-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
}
#ad-results-sort-slot .tts-cp-btn.explore-landers-sort-btn svg {
    flex-shrink: 0;
}
#ad-results-sort-slot .explore-landers-sort-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
#ad-results-sort-slot .explore-landers-sort-btn__dir {
    flex-shrink: 0;
    opacity: 0.65;
}
#ad-results-sort-slot .explore-landers-sort-btn__chev {
    flex-shrink: 0;
    opacity: 0.55;
    margin-left: -1px;
    transition: transform 0.15s ease;
}
#ad-results-sort-slot .explore-landers-sort-btn.is-open .explore-landers-sort-btn__chev {
    transform: rotate(180deg);
}

.dashboard-sort-dropdown.explore-landers-sort-dropdown {
    min-width: 240px;
    max-width: 300px;
    overflow: hidden;
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
    font-size: 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.dashboard-sort-dropdown .explore-landers-sort-dropdown__list {
    padding: 4px 0;
}
.dashboard-sort-dropdown .explore-landers-sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}
.dashboard-sort-dropdown .explore-landers-sort-option__label {
    flex: 1;
    min-width: 0;
}
.dashboard-sort-dropdown .explore-landers-sort-option__check {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #225aea;
    opacity: 0;
}
.dashboard-sort-dropdown .explore-landers-sort-option:hover {
    background: #f3f4f6;
    color: #111827;
}
.dashboard-sort-dropdown .explore-landers-sort-option.is-active {
    color: #111827;
}
.dashboard-sort-dropdown .explore-landers-sort-option.is-active .explore-landers-sort-option__check {
    opacity: 1;
}
.dashboard-sort-dropdown .explore-landers-sort-dropdown__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px 10px;
    border-top: 1px solid #f3f4f6;
}
.dashboard-sort-dropdown .explore-landers-sort-dropdown__dir-label {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
    flex-shrink: 0;
}
.dashboard-sort-dropdown .explore-landers-sort-dir-toggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 2px;
    background: #eef2f7;
    border: 1px solid #e4e4e7;
    border-radius: 7px;
    box-sizing: border-box;
    flex-shrink: 0;
}
.dashboard-sort-dropdown .explore-landers-sort-dir-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.dashboard-sort-dropdown .explore-landers-sort-dir-btn:hover:not(.is-active) {
    color: #111827;
    background: rgba(255, 255, 255, 0.5);
}
.dashboard-sort-dropdown .explore-landers-sort-dir-btn.is-active {
    background: #fff;
    color: #374151;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.dashboard-sort-dropdown .explore-landers-sort-dir-btn svg {
    display: block;
}

/* ── Dashboard quick-filter pills (preset chips + Save / saved presets) ── */

.dashboard-preset-filters-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-preset-filters-scroll {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-preset-filters-actions,
.dashboard-preset-filters-row > .div-block-57 {
    flex: 0 0 auto;
    margin-left: auto;
}

.preset-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.preset-filters::-webkit-scrollbar {
    display: none;
}

.preset-filters > .dashboard-quick-filter-pill {
    flex-shrink: 0;
}

/* Right-edge fade over scrolling pills — hints more presets toward Save filters */
.dashboard-preset-filters-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        var(--wh-filter-bar-bg, #fff) 72%
    );
    z-index: 2;
}

.dashboard-preset-filters-scroll.is-scrollable-end .dashboard-preset-filters-fade {
    opacity: 1;
}

.preset-filters-scroll-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-quick-filter-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px 0 8px;
    margin: 0;
    border: 1px solid var(--es-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    position: relative;
    transition:
        background-color 0.15s ease,
        border-color 0.18s ease,
        color 0.15s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.dashboard-quick-filter-pill:hover {
    background: #fff;
    border-color: #cbd5e1;
    color: #111827;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.dashboard-quick-filter-pill:active {
    transform: scale(0.98);
}

.dashboard-quick-filter-pill:focus-visible {
    outline: none;
    border-color: var(--es-border-focus, #225aea);
    box-shadow: 0 0 0 3px rgba(34, 90, 234, 0.12);
}

.dashboard-quick-filter-pill.disabled,
.dashboard-quick-filter-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Active preset — quiet but clear: white chip, blue border, status dot */
.preset-filters .dashboard-quick-filter-pill.active-pill,
.preset-filters .dashboard-quick-filter-pill[data-active="true"] {
    background: #fff;
    border-width: 1px;
    border-color: #225aea;
    color: #111827;
    font-weight: 600;
    box-shadow: none;
}

.preset-filters .dashboard-quick-filter-pill.active-pill:hover,
.preset-filters .dashboard-quick-filter-pill[data-active="true"]:hover {
    background: #fff;
    border-color: #1d4ed8;
    color: #111827;
}

.preset-filters .dashboard-quick-filter-pill.active-pill .qf-active-dot,
.preset-filters .dashboard-quick-filter-pill[data-active="true"] .qf-active-dot {
    opacity: 1;
    transform: scale(1);
}

/* Dual preview thumbs */
.qf-thumbs {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 22px;
}

.qf-thumbs.is-empty {
    display: none;
}

.dashboard-quick-filter-pill.has-qf-thumbs .qf-fallback-icon,
.filter-preset-card.has-qf-thumbs .qf-fallback-icon,
.filter-preset-card.has-qf-thumbs .filter-preset-icon::before {
    display: none !important;
}

.qf-thumbs__img {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    background: #e2e8f0;
    border: 1.5px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease;
}

.qf-thumbs__img.is-broken {
    display: none !important;
}

.qf-thumbs__img--1 {
    left: 0;
    z-index: 1;
    transform: rotate(-4deg);
}

.qf-thumbs__img--2 {
    left: 8px;
    z-index: 2;
    transform: rotate(3deg);
}

.dashboard-quick-filter-pill:hover .qf-thumbs__img--1,
.filter-preset-card:hover .qf-thumbs__img--1 {
    transform: rotate(-8deg) translate(-1px, -1px);
}

.dashboard-quick-filter-pill:hover .qf-thumbs__img--2,
.filter-preset-card:hover .qf-thumbs__img--2 {
    transform: rotate(7deg) translate(2px, -1px);
}

.qf-label {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qf-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Quick-filter tooltip styles live in quick-filter-previews.css */

.dashboard-quick-filter-pill__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}

.dashboard-quick-filter-pill__icon--emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.dashboard-quick-filter-pill__icon--muted,
.dashboard-quick-filter-pill--save .dashboard-quick-filter-pill__icon {
    opacity: 0.72;
    color: currentColor;
}

.dashboard-quick-filter-pill svg.dashboard-quick-filter-pill__icon {
    stroke: currentColor;
}

/* Dashed “Save filters” sibling */
.dashboard-quick-filter-pill--save {
    border-style: dashed;
    border-color: #cbd5e1;
    background: transparent;
    color: #64748b;
}

.dashboard-quick-filter-pill--save:hover {
    background: var(--es-filter-surface-hover, #f8fafc);
    border-color: #94a3b8;
    color: #334155;
}

/* User-saved preset pills (row under the quick filters) */
#dashboard-saved-preset-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.dashboard-user-preset-pill {
    padding-right: 4px;
    color: var(--wh-filter-tab-text, #475569);
}

.dashboard-user-preset-pill__label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-user-preset-pill .dashboard-quick-filter-pill__icon {
    color: #5b6b82;
}

.dashboard-user-preset-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #5b6b82;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-user-preset-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.div-block-57:has(.dashboard-quick-filter-pill--save) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}