/*
 * Overrides for the locarl search bar inside the quick filter plugin.
 * locarlV3 mounts the widget into a shadow root, so regular page CSS does not reach it.
 * This file is loaded with the data-locarl-asset attribute (see QuickFilter.html),
 * which makes locarl copy it into the shadow root.
 *
 * Every selector starts with :is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar
 * - #locarlV3[data-locarl-view] -> inside the shadow root (hydrated widget)
 * - .locarl-searchbar-row        -> server-rendered markup before hydration (light DOM)
 * :is() takes the specificity of its id argument, so these rules (1,3,0) beat locarl's
 * own :is(#locarlV3, ...) .locarl-searchbar ... rules (1,2,0) without !important.
 */

/* card */
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-card {
    border: none;
    padding: 0;
    box-shadow: none;
    background: transparent;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-copy {
    margin-bottom: 12px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-heading {
    font-size: 18px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-description {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

/* filter fields */
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-grid {
    gap: 8px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-trigger {
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-count {
    min-width: 19px;
    height: 19px;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 11px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-chevron {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
    margin-left: 6px;
}

/* dropdown */
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-menu {
    top: calc(100% + 4px);
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-search {
    min-height: 38px;
    padding: 0 10px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-search input {
    height: 36px;
    font-size: 13px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-option {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 13px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-group {
    padding: 8px 8px 4px;
    font-size: 11px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-picker-empty {
    padding: 12px 10px;
    font-size: 12px;
}

/* footer */
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-footer {
    margin-top: 10px;
    gap: 10px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-detail-link {
    font-size: 13px;
}
:is(#locarlV3[data-locarl-view], .locarl-searchbar-row) .locarl-searchbar .locarl-searchbar-submit {
    height: 38px;
    line-height: 38px;
    padding: 0 24px;
    font-size: 13px;
}