/**
 * WWPosts Design System — Phase 1 app shell
 * =========================================
 * Navbar + QuickLinks + dropdown flyouts on Phase 0 tokens.
 * Additive visual chrome only — does not change nav fit/collapse JS.
 *
 * Load after navbar.blade.php inline styles so these rules win the cascade.
 */

/* -------------------------------------------------------------------------- */
/* Surface tokens → navbar stack                                               */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack.cp-navbar-stack {
    --cp-navbar-surface: var(--cp-raised);
    --cp-shell-border: var(--cp-border);
    --cp-shell-border-strong: var(--cp-border-strong);
    --cp-shell-ink: var(--cp-ink);
    --cp-shell-ink-muted: var(--cp-ink-muted);
    --cp-shell-shadow: var(--cp-shadow-md);
    --cp-shell-lip: var(--cp-elev-lip);
}

html[data-cp-theme="light"] #cp-navbar-stack.cp-navbar-stack {
    --cp-navbar-surface: var(--cp-raised);
}

html[data-cp-theme="dark"] #cp-navbar-stack.cp-navbar-stack {
    --cp-navbar-surface: var(--cp-raised);
}

/* -------------------------------------------------------------------------- */
/* Top bar                                                                     */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-navbar {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-navbar-surface) 92%, #ffffff) 0%,
        var(--cp-navbar-surface) 55%,
        color-mix(in srgb, var(--cp-navbar-surface) 88%, #000000) 100%
    ) !important;
    border-bottom: 1px solid var(--cp-shell-border) !important;
    box-shadow:
        var(--cp-shell-lip),
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
    color: var(--cp-shell-ink);
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar {
    box-shadow:
        var(--cp-shell-lip),
        0 8px 22px rgba(15, 42, 68, 0.12) !important;
}

/* Brand */
#cp-navbar-stack .cp-navbar-brand-title__gradient {
    background: linear-gradient(
        100deg,
        var(--cp-accent) 0%,
        color-mix(in srgb, var(--cp-accent) 55%, #ffffff) 45%,
        var(--cp-accent) 100%
    );
    background-size: 180% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#cp-navbar-stack .navbar-brand:hover .cp-navbar-brand-title__gradient {
    filter: brightness(1.08);
}

#cp-navbar-stack .cp-navbar .navbar-brand,
#cp-navbar-stack .cp-navbar .nav-link,
#cp-navbar-stack .cp-navbar .navbar-toggler {
    color: var(--cp-shell-ink) !important;
}

#cp-navbar-stack .cp-navbar .nav-link:hover,
#cp-navbar-stack .cp-navbar .nav-link:focus-visible {
    color: var(--cp-accent) !important;
}

#cp-navbar-stack .cp-navbar-stat,
#cp-navbar-stack .cp-navbar-stat__value {
    color: var(--cp-accent) !important;
}

/* Hamburger toggler — pill control */
#cp-navbar-stack .cp-navbar .navbar-toggler {
    border-radius: var(--cp-radius-sm) !important;
    border: 1px solid var(--cp-shell-border) !important;
    background: color-mix(in srgb, var(--cp-overlay) 70%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition:
        background var(--cp-duration-fast) ease,
        border-color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease;
}

#cp-navbar-stack .cp-navbar .navbar-toggler:hover,
#cp-navbar-stack .cp-navbar .navbar-toggler:focus-visible,
#cp-navbar-stack .cp-navbar .navbar-toggler[aria-expanded="true"] {
    border-color: var(--cp-shell-border-strong) !important;
    background: var(--cp-accent-soft) !important;
    color: var(--cp-accent) !important;
    box-shadow: var(--cp-focus-ring) !important;
}

/* -------------------------------------------------------------------------- */
/* Guest Login / Register — match Phase 0 button language                      */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-nav-btn.btn-primary {
    --_nav-btn-glow: var(--cp-accent-glow);
    border: 1px solid color-mix(in srgb, var(--cp-accent) 45%, #000000) !important;
    background: linear-gradient(
        175deg,
        color-mix(in srgb, var(--cp-accent) 92%, #ffffff) 0%,
        var(--cp-accent) 45%,
        var(--cp-accent-strong) 100%
    ) !important;
    color: var(--cp-accent-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 3px 0 color-mix(in srgb, var(--cp-accent) 40%, #001820),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition:
        transform var(--cp-duration-fast) var(--cp-ease-out),
        box-shadow var(--cp-duration-med) var(--cp-ease-out),
        filter var(--cp-duration-fast) ease !important;
}

#cp-navbar-stack .cp-nav-btn.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: var(--cp-accent-ink) !important;
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--_nav-btn-glow) 35%, transparent),
        0 4px 0 color-mix(in srgb, var(--cp-accent) 40%, #001820),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

#cp-navbar-stack .cp-nav-btn.btn-primary:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.3),
        0 1px 0 color-mix(in srgb, var(--cp-accent) 40%, #001820) !important;
}

/* -------------------------------------------------------------------------- */
/* Dropdown / flyout menus                                                     */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-navbar-nav-dropdown.dropdown-menu,
#cp-navbar-stack .dropdown-menu.cp-navbar-nav-dropdown,
#cp-navbar-stack .cp-navbar-user-menu .dropdown-menu {
    background: var(--cp-overlay) !important;
    color: var(--cp-shell-ink) !important;
    border: 1px solid var(--cp-shell-border-strong) !important;
    border-radius: var(--cp-radius-md) !important;
    box-shadow: var(--cp-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    padding: 0.4rem !important;
    animation: cpNavSheetIn var(--cp-duration-med) var(--cp-ease-out) both;
}

#cp-navbar-stack .dropdown-menu .dropdown-item,
#cp-navbar-stack .dropdown-menu .cp-navbar-dd-item {
    color: var(--cp-shell-ink) !important;
    border-radius: var(--cp-radius-sm);
    font-weight: 600;
}

#cp-navbar-stack .dropdown-menu .dropdown-item:hover,
#cp-navbar-stack .dropdown-menu .dropdown-item:focus,
#cp-navbar-stack .dropdown-menu .cp-navbar-dd-item:hover,
#cp-navbar-stack .dropdown-menu .cp-navbar-dd-item:focus {
    background: var(--cp-accent-soft) !important;
    color: var(--cp-accent) !important;
}

#cp-navbar-stack .dropdown-menu .dropdown-divider {
    border-color: var(--cp-hairline) !important;
    opacity: 1;
}

/* Hamburger collapse panel */
#cp-navbar-stack #cpNavContent.navbar-collapse.show,
#cp-navbar-stack #cpNavContent.navbar-collapse.collapsing {
    background: var(--cp-overlay) !important;
    border: 1px solid var(--cp-shell-border-strong);
    border-radius: 0 0 var(--cp-radius-md) var(--cp-radius-md);
    box-shadow: var(--cp-shadow-lg);
    margin-top: 0.15rem;
}

/* -------------------------------------------------------------------------- */
/* QuickLinks bar                                                              */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-navbar-home-quick-links {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-navbar-surface) 95%, #000000) 0%,
        var(--cp-base) 100%
    ) !important;
    border-top: 1px solid var(--cp-shell-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-navbar-home-quick-links {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 10px 22px rgba(15, 42, 68, 0.1) !important;
}

#cp-navbar-stack .cp-navbar-home-quick-link.btn {
    border-radius: var(--cp-radius-sm) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-shadow: none !important;
    transition:
        transform var(--cp-duration-fast) var(--cp-ease-out),
        box-shadow var(--cp-duration-med) var(--cp-ease-out),
        filter var(--cp-duration-fast) ease,
        border-color var(--cp-duration-fast) ease !important;
}

#cp-navbar-stack .cp-navbar-home-quick-link.btn:hover:not(.is-active):not([aria-current="page"]) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

#cp-navbar-stack .cp-navbar-home-quick-link.btn:active:not(.is-active):not([aria-current="page"]) {
    transform: translateY(1px);
}

/* Active QuickLink — accent rim + glow (category color still from site.css fills) */
#cp-navbar-stack .cp-navbar-home-quick-link.btn.is-active,
#cp-navbar-stack .cp-navbar-home-quick-link.btn[aria-current="page"] {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cp-accent) 35%, transparent),
        0 6px 18px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    filter: brightness(1.05);
}

/* -------------------------------------------------------------------------- */
/* Theme / units / icon controls on the bar                                    */
/* -------------------------------------------------------------------------- */
/* Idle segments only — active state must stay switch-like (see rules below).  */
#cp-navbar-stack .cp-navbar-end .btn:not(.cp-nav-btn):not(.cp-navbar-home-quick-link):not(.cp-units-active):not(.cp-theme-active),
#cp-navbar-stack .cp-units-toggle .btn:not(.cp-units-active),
#cp-navbar-stack .cp-theme-toggle .btn:not(.cp-theme-active) {
    border-color: var(--cp-shell-border) !important;
    background: color-mix(in srgb, var(--cp-overlay) 55%, transparent) !important;
    color: var(--cp-shell-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#cp-navbar-stack .cp-navbar-end .btn:not(.cp-nav-btn):not(.cp-units-active):not(.cp-theme-active):hover,
#cp-navbar-stack .cp-units-toggle .btn:not(.cp-units-active):hover,
#cp-navbar-stack .cp-theme-toggle .btn:not(.cp-theme-active):hover {
    border-color: var(--cp-shell-border-strong) !important;
    background: var(--cp-accent-soft) !important;
    color: var(--cp-accent) !important;
}

/* Selected MI/KM or theme segment — pressed/filled switch thumb */
#cp-navbar-stack .cp-units-toggle .btn.cp-units-active,
#cp-navbar-stack .cp-theme-toggle .btn.cp-theme-active {
    border-color: color-mix(in srgb, var(--cp-accent) 55%, transparent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-accent) 88%, #ffffff) 0%,
        var(--cp-accent) 48%,
        color-mix(in srgb, var(--cp-accent) 78%, #000000) 100%
    ) !important;
    color: #031018 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 8px color-mix(in srgb, var(--cp-accent) 35%, transparent) !important;
}

#cp-navbar-stack .cp-units-toggle .btn.cp-units-active .cp-units-toggle__label,
#cp-navbar-stack .cp-theme-toggle .btn.cp-theme-active i {
    color: inherit !important;
}

#cp-navbar-stack .cp-units-toggle .btn.cp-units-active:hover,
#cp-navbar-stack .cp-theme-toggle .btn.cp-theme-active:hover {
    border-color: color-mix(in srgb, var(--cp-accent) 70%, transparent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-accent) 92%, #ffffff) 0%,
        color-mix(in srgb, var(--cp-accent) 92%, #ffffff) 48%,
        var(--cp-accent) 100%
    ) !important;
    color: #031018 !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile scroll-top chip — shell language                                     */
/* -------------------------------------------------------------------------- */
.cp-mobile-scroll-top-btn {
    border: 1px solid var(--cp-border-strong) !important;
    background: var(--cp-overlay) !important;
    color: var(--cp-ink) !important;
    border-radius: var(--cp-radius-pill) !important;
    box-shadow: var(--cp-shadow-md) !important;
    font-weight: 700;
}

.cp-mobile-scroll-top-btn:hover {
    background: var(--cp-accent-soft) !important;
    color: var(--cp-accent) !important;
    border-color: var(--cp-accent) !important;
}

/* Align shell bands to shared navbar gutter (site.css --cp-navbar-gutter-x). */
#cp-navbar-stack .cp-navbar-home-quick-links {
    padding-inline: var(--cp-navbar-gutter-x, 1rem) !important;
}

/* -------------------------------------------------------------------------- */
/* QuickLinks filter / search band — match Phase 1 shell (not flat light strip) */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-ql-filter-toolbar {
    padding-inline: var(--cp-navbar-gutter-x, 1rem) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.55rem !important;
    align-items: stretch !important;
    border-top: 1px solid var(--cp-shell-border, var(--cp-border)) !important;
    border-bottom: 1px solid var(--cp-shell-border, var(--cp-border)) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-base) 88%, #ffffff) 0%,
        var(--cp-base) 45%,
        color-mix(in srgb, var(--cp-base) 90%, #000000) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar {
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--cp-base) 100%
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(15, 42, 68, 0.1) !important;
}

#cp-navbar-stack .cp-ql-filter-field__label {
    color: var(--cp-shell-ink-muted, var(--cp-ink-muted)) !important;
    letter-spacing: 0.06em;
}

#cp-navbar-stack .cp-ql-filter-control,
#cp-navbar-stack .cp-ql-interests-btn,
#cp-navbar-stack .cp-trail-filter-open {
    border: 1px solid var(--cp-shell-border-strong, var(--cp-border-strong)) !important;
    border-radius: var(--cp-radius-sm, 0.5rem) !important;
    background: var(--cp-raised, #141c2a) !important;
    color: var(--cp-shell-ink, var(--cp-ink)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

#cp-navbar-stack .cp-ql-filter-control:hover,
#cp-navbar-stack .cp-ql-interests-btn:hover,
#cp-navbar-stack .cp-trail-filter-open:hover {
    border-color: color-mix(in srgb, var(--cp-accent) 45%, transparent) !important;
}

#cp-navbar-stack .cp-ql-filter-control:focus,
#cp-navbar-stack .cp-ql-filter-control:focus-visible,
#cp-navbar-stack .cp-search-input:focus,
#cp-navbar-stack .cp-search-input:focus-visible {
    outline: none !important;
    border-color: var(--cp-success, #3ddc84) !important;
    box-shadow: var(--cp-elev-soft-tray-focus) !important;
}

/* Search + inline fields: recessed tray, rounded — matches form controls */
#cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control,
#cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control.cp-search-input,
html[data-cp-theme="dark"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control,
html[data-cp-theme="dark"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control.cp-search-input {
    height: var(--cp-control-height, 42px) !important;
    min-height: var(--cp-control-height, 42px) !important;
    max-height: var(--cp-control-height, 42px) !important;
    border: 1px solid var(--cp-field-border-soft) !important;
    border-radius: var(--cp-radius-md, 0.75rem) !important;
    background: var(--cp-void) !important;
    background-image: none !important;
    color: var(--cp-shell-ink, var(--cp-ink)) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    padding-inline: 0.85rem !important;
    box-shadow: var(--cp-elev-soft-tray) !important;
}

html[data-cp-theme="dark"] #cp-navbar-stack .cp-ql-filter-toolbar {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-base) 88%, #ffffff) 0%,
        var(--cp-base) 45%,
        color-mix(in srgb, var(--cp-base) 90%, #000000) 100%
    ) !important;
    border-top-color: var(--cp-shell-border) !important;
    border-bottom-color: var(--cp-shell-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control.cp-search-input,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-field--inline .cp-ql-filter-control.cp-search-input {
    background: var(--cp-void) !important;
    box-shadow: var(--cp-elev-soft-tray) !important;
}

#cp-navbar-stack .cp-ql-filter-control.cp-search-input::placeholder {
    color: var(--cp-ink-faint) !important;
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Left filter control — deep-well select (ns-field--well · select / dropdown)  */
/* Events: Community · Marketplace: Shipping · Trails: Trail type · Products    */
/* Chevron is the circular .cp-select__chev badge (not a bare SVG arrow).        */
/* -------------------------------------------------------------------------- */
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child select.cp-ql-filter-control,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--inline:first-child select.cp-ql-filter-control.cp-field--well,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-trail-filter-open,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open,
#cp-navbar-stack .cp-trail-filter-open.cp-field--well,
.cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child select.cp-ql-filter-control,
.cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control {
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--cp-ink) !important;
    color-scheme: dark;
    border: 1px solid color-mix(in srgb, var(--cp-cobalt, #3d7cff) 40%, transparent) !important;
    border-radius: var(--cp-radius-md, 0.75rem) !important;
    background-color: #07101c !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04)) !important;
    background-repeat: no-repeat !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        inset 0 1px 0 rgba(154, 215, 255, 0.08),
        0 0 0 1px color-mix(in srgb, var(--cp-cobalt, #3d7cff) 12%, transparent),
        var(--cp-field-glow, 0 0 14px rgba(0, 212, 255, 0.22)) !important;
    padding-right: 2.85rem !important;
    font-weight: 600 !important;
}

#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child select.cp-ql-filter-control:hover,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control:hover,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--inline:first-child select.cp-ql-filter-control.cp-field--well:hover,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-trail-filter-open:hover,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open:hover,
#cp-navbar-stack .cp-trail-filter-open.cp-field--well:hover,
#cp-navbar-stack .cp-trail-filter-open.cp-field--well:focus-visible,
.cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child select.cp-ql-filter-control:hover {
    border-color: color-mix(in srgb, var(--cp-accent) 55%, var(--cp-cobalt, #3d7cff)) !important;
    background-color: #07101c !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.22), rgba(61, 124, 255, 0.06)) !important;
    color: var(--cp-ink) !important;
}

#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child select.cp-ql-filter-control:focus,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child select.cp-ql-filter-control:focus-visible,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control:focus,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control:focus-visible,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--inline:first-child select.cp-ql-filter-control.cp-field--well:focus,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--inline:first-child select.cp-ql-filter-control.cp-field--well:focus-visible,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-trail-filter-open:focus,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-trail-filter-open:focus-visible,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open:focus,
#cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open:focus-visible,
#cp-navbar-stack .cp-trail-filter-open.cp-field--well:focus,
#cp-navbar-stack .cp-trail-filter-open.cp-field--well:focus-visible,
.cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child select.cp-ql-filter-control:focus,
.cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child select.cp-ql-filter-control:focus-visible {
    outline: none !important;
    border-color: var(--cp-accent) !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        inset 0 1px 0 rgba(154, 215, 255, 0.1),
        var(--cp-field-glow-focus, 0 0 0 0.2rem rgba(0, 212, 255, 0.22), 0 0 18px rgba(0, 212, 255, 0.28)) !important;
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child select.cp-ql-filter-control,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-ql-filter-field__control > select.cp-ql-filter-control,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--inline:first-child select.cp-ql-filter-control.cp-field--well,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field:first-child .cp-trail-filter-open,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open,
html[data-cp-theme="light"] #cp-navbar-stack .cp-trail-filter-open.cp-field--well,
html[data-cp-theme="light"] .cp-home-mobile-filter-grid > .cp-ql-filter-field:first-child select.cp-ql-filter-control {
    color-scheme: light;
    color: var(--cp-ink) !important;
    background-color: var(--cp-well-deep, #c8d6ec) !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.14), rgba(61, 124, 255, 0.05)) !important;
    background-repeat: no-repeat !important;
    border-color: color-mix(in srgb, var(--cp-cobalt, #3d7cff) 35%, var(--cp-border-strong)) !important;
    box-shadow:
        inset 0 2px 8px rgba(30, 60, 110, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        var(--cp-field-glow) !important;
}

html[data-cp-theme="light"] #cp-navbar-stack .cp-trail-filter-open.cp-field--well:hover,
html[data-cp-theme="light"] #cp-navbar-stack .cp-trail-filter-open.cp-field--well:focus-visible,
html[data-cp-theme="light"] #cp-navbar-stack .cp-ql-filter-toolbar > .cp-ql-filter-field--col-2 .cp-trail-filter-open:hover {
    background-color: var(--cp-well-deep, #c8d6ec) !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.2), rgba(61, 124, 255, 0.08)) !important;
    color: var(--cp-ink) !important;
}

/* Compact circular chevron on dense QL filter bars */
#cp-navbar-stack .cp-select__chev {
    width: 1.45rem;
    height: 1.45rem;
    margin-top: -0.725rem;
    right: 0.45rem;
    font-size: 0.62rem;
}

#cp-navbar-stack .cp-ql-filter-toolbar:has(> .cp-ql-filter-field--inline:only-child),
#cp-navbar-stack .cp-ql-filter-toolbar:has(> .cp-ql-filter-field--col-2) {
    padding-inline: var(--cp-navbar-gutter-x, 1rem) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    gap: 0.55rem !important;
}

@media (prefers-reduced-motion: reduce) {
    #cp-navbar-stack .cp-navbar-nav-dropdown.dropdown-menu,
    #cp-navbar-stack .dropdown-menu.cp-navbar-nav-dropdown,
    #cp-navbar-stack .cp-navbar-user-menu .dropdown-menu,
    #cp-navbar-stack .cp-nav-btn.btn-primary,
    #cp-navbar-stack .cp-navbar-home-quick-link.btn {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}