/* ==========================================================================
   catalog-horizontal-filters.css
   Horizontal Filter Bar — 1-Column Catalog Layout
   SimplexTheme / nopCommerce 4.80

   Breakpoint strategy:
     Desktop  ≥1200px  : horizontal toolbar; filter (left) + selectors (right)
                          price = always-open single-line row
                          spec  = pill → absolute dropdown
     Tablet   768–1199px: stacked; filter 2-col pills → absolute dropdown
     Mobile   ≤767px   : stacked; filter 1-col pills → static accordion
     XS       ≤480px   : tighter spacing
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. UNIFIED TOOLBAR — base
   -------------------------------------------------------------------------- */

.catalog-unified-toolbar {
    margin-bottom: 20px;
}

/* hide filter bar when Razor partial renders nothing */
.catalog-filter-bar-h:empty,
.catalog-filter-bar-h:not(:has(> .block)) {
    display: none;
    padding: 0;
    margin: 0;
    border: none;
}


/* --------------------------------------------------------------------------
   2. FILTER BAR CONTAINER
   -------------------------------------------------------------------------- */

.catalog-filter-bar-h {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    position: relative;
}


/* --------------------------------------------------------------------------
   3. FILTER BLOCK — base
   -------------------------------------------------------------------------- */

.catalog-filter-bar-h .block {
    position: relative;
    margin: 0;
}

/* neutralise SimplexTheme box-shadow-wrapper */
.catalog-filter-bar-h .block.box-shadow-wrapper {
    width: auto !important;
    margin-right: 0 !important;
}


/* --------------------------------------------------------------------------
   4. FILTER TITLE — pill button (ALL screen sizes)
   -------------------------------------------------------------------------- */

.catalog-filter-bar-h .block .title,
.catalog-filter-bar-h .block .main-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 14px;
    background: #f9fafb !important;
    background-image: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151 !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.catalog-filter-bar-h .block .title strong,
.catalog-filter-bar-h .block .main-title strong {
    font-weight: 500;
    color: inherit !important;
}

/* Chevron */
.catalog-filter-bar-h .block .title::after,
.catalog-filter-bar-h .block .main-title::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6b7280;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Open state */
.catalog-filter-bar-h .block.filter-open .title,
.catalog-filter-bar-h .block.filter-open .main-title {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    border-radius: 6px 6px 0 0 !important;
}

.catalog-filter-bar-h .block.filter-open .title::after,
.catalog-filter-bar-h .block.filter-open .main-title::after {
    transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   5. FILTER CONTENT — hidden by default, absolute dropdown
   -------------------------------------------------------------------------- */

.catalog-filter-bar-h .block .filter-content,
.catalog-filter-bar-h .block .listbox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    z-index: 200;
    padding: 12px 14px;
}

.catalog-filter-bar-h .block.filter-open .filter-content,
.catalog-filter-bar-h .block.filter-open .listbox {
    display: block;
}

/* List styles */
.catalog-filter-bar-h .block .filter-content ul,
.catalog-filter-bar-h .block .listbox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-filter-bar-h .block .filter-content ul li,
.catalog-filter-bar-h .block .listbox ul li {
    padding: 4px 0;
    font-size: 13px;
}

.catalog-filter-bar-h .block .filter-content label,
.catalog-filter-bar-h .block .listbox label {
    margin-bottom: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Price range: slider room + range display (shared — dropdown/accordion) */
.catalog-filter-bar-h .price-range-filter .filter-content #price-range-slider,
.catalog-filter-bar-h .price-range-filter .listbox #price-range-slider {
    margin: 8px 4px 4px;
}

.catalog-filter-bar-h .price-range-filter .selected-price-range {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.catalog-filter-bar-h .price-range-filter .selected-price-range .from::after {
    content: "\00a0\2013\00a0";
    color: #9ca3af;
}


/* ==========================================================================
   DESKTOP  ≥1200px
   Horizontal toolbar; price = always-open single-line row
   ========================================================================== */

@media (min-width: 1200px) {

    /* Toolbar: horizontal flex */
    .catalog-unified-toolbar {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .catalog-unified-toolbar > .catalog-filter-bar-h {
        flex: 1 1 auto;
        min-width: 0;
        border-bottom: none;
        padding: 0;
        margin-bottom: 0;
    }

    .catalog-unified-toolbar > .product-selectors {
        flex: 0 0 auto;
        padding-top: 4px;
    }

    /* Override Bootstrap 3 float-grid for selectors */
    .catalog-unified-toolbar .product-selectors {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px 8px;
    }

    .catalog-unified-toolbar .product-selectors > [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 4px;
        padding-right: 4px;
    }

    .catalog-unified-toolbar .product-selectors .row {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        gap: 6px;
    }

    .catalog-unified-toolbar .product-selectors .row > [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 0;
        padding-right: 0;
    }

    .catalog-unified-toolbar .product-selectors label {
        white-space: nowrap;
        margin-bottom: 0;
        font-size: 13px;
    }

    .catalog-unified-toolbar .product-selectors select.form-control,
    .catalog-unified-toolbar .product-selectors .dropdown-filter {
        width: auto;
        min-width: 100px;
        max-width: 180px;
    }

    .catalog-unified-toolbar .product-selectors .grid-list-icon {
        display: flex !important;
        width: auto !important;
        align-items: center;
        padding: 0;
    }

    /* Filter blocks: auto-size */
    .catalog-filter-bar-h .block {
        flex: 0 0 auto;
        min-width: 140px;
    }

    /* Price range: always-open single-line row [label | slider | from–to] */
    .catalog-filter-bar-h .price-range-filter {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 0 1 420px;
        min-width: 320px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #f9fafb;
        padding: 7px 14px;
    }

    /* Title = static label only */
    .catalog-filter-bar-h .price-range-filter .title,
    .catalog-filter-bar-h .price-range-filter .main-title,
    .catalog-filter-bar-h .block.box-shadow-wrapper.price-range-filter .title.main-title {   /* beats the 768–1200 guard + sidebar accordion at exactly 1200px */
        flex: 0 0 auto;
        cursor: default !important;
        pointer-events: none;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        color: #374151 !important;
        font-size: 13px !important;
        padding: 0 !important;
        width: auto;
        white-space: nowrap;
    }

    /* No chevron */
    .catalog-filter-bar-h .price-range-filter .title::after,
    .catalog-filter-bar-h .price-range-filter .main-title::after {
        display: none;
    }

    /* Content: flex row (slider + range) — always visible */
    .catalog-filter-bar-h .price-range-filter .filter-content,
    .catalog-filter-bar-h .price-range-filter .listbox {
        flex: 1 1 auto;
        display: flex !important;
        align-items: center;
        gap: 12px;
        position: static;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
        min-width: 0;
        max-height: none;
        overflow: visible;
    }

    /* Slider fills width; order:-1 puts it before from–to */
    .catalog-filter-bar-h .price-range-filter #price-range-slider {
        flex: 1 1 auto;
        min-width: 100px;
        margin: 0 !important;
        order: -1;
    }

    /* Selected range on the right */
    .catalog-filter-bar-h .price-range-filter .selected-price-range {
        flex: 0 0 auto;
        font-size: 12px;
        color: #6b7280;
        white-space: nowrap;
        margin-bottom: 0;
    }
}


/* ==========================================================================
   TABLET  768px – 1199px
   Stacked toolbar; filter 2-col grid; all pills = regular dropdown
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199.98px) {

    /* Toolbar: stack vertically */
    .catalog-unified-toolbar {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .catalog-unified-toolbar > .catalog-filter-bar-h,
    .catalog-unified-toolbar > .product-selectors {
        width: 100%;
    }

    /* Filter blocks: 2-col grid */
    .catalog-filter-bar-h .block {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
    }

    /* In-flow accordion: content flows inside the block (avoids absolute clipping issues) */
    .catalog-filter-bar-h .block .filter-content,
    .catalog-filter-bar-h .block .listbox {
        position: static !important;
        border-radius: 0 0 6px 6px !important;
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Price range extra padding for slider */
    .catalog-filter-bar-h .price-range-filter .filter-content,
    .catalog-filter-bar-h .price-range-filter .listbox {
        padding: 12px 16px 16px;
    }

    /* Explicitly re-enable clicks on price filter title (overrides desktop pointer-events:none) */
    .catalog-filter-bar-h .price-range-filter .title,
    .catalog-filter-bar-h .price-range-filter .main-title {
        pointer-events: auto !important;
        cursor: pointer !important;
    }


    /* Product selectors: flex layout at tablet (mirrors desktop) */
    .catalog-unified-toolbar .product-selectors {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .catalog-unified-toolbar .product-selectors > [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 4px;
        padding-right: 4px;
    }

    .catalog-unified-toolbar .product-selectors .row {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 0;
        margin-right: 0;
        gap: 6px;
    }

    .catalog-unified-toolbar .product-selectors .row > [class*="col-"] {
        width: auto !important;
        float: none !important;
        padding-left: 0;
        padding-right: 0;
    }

    .catalog-unified-toolbar .product-selectors label {
        white-space: nowrap;
        margin-bottom: 0;
        font-size: 13px;
    }

    .catalog-unified-toolbar .product-selectors select.form-control,
    .catalog-unified-toolbar .product-selectors .dropdown-filter {
        width: auto;
        min-width: 100px;
        max-width: 180px;
    }

    .catalog-unified-toolbar .product-selectors .grid-list-icon {
        display: flex !important;
        width: auto !important;
        align-items: center;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   Sidebar accordion guard (768–1200px)
   mobile-categories-responsive.css turns every `.block.box-shadow-wrapper .title.main-title` into the sidebar's
   dark accordion bar (padding 15/60px, 16px, png arrow, shadow - all !important, specificity 0,4,0). The bar's
   blocks carry .box-shadow-wrapper too, so on tablets and up to 1200px the pills became that bar. One more class
   here restores the pill; its open state is the base light one. 1200px itself is in that file's range but is the
   desktop row here - see the price title rule in the desktop block.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1200px) {
    .catalog-filter-bar-h .block.box-shadow-wrapper .title.main-title {
        display: flex !important;
        padding: 7px 14px !important;
        background: #f9fafb !important;
        border: 1px solid #d1d5db !important;
        box-shadow: none !important;
        color: #374151 !important;
        font-size: 13px !important;
    }

    .catalog-filter-bar-h .block.box-shadow-wrapper.filter-open .title.main-title {
        background: #f3f4f6 !important;
        border-color: #9ca3af !important;
    }
}


/* ==========================================================================
   MOBILE  ≤767px
   Stacked toolbar; filter 2-col (50%) pills → absolute dropdown
   Selectors: Bootstrap col-xs-6 handles layout normally
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Toolbar: stack vertically */
    .catalog-unified-toolbar {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .catalog-unified-toolbar > .catalog-filter-bar-h {
        width: 100%;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    .catalog-unified-toolbar > .product-selectors {
        width: 100%;
    }

    /* Filter blocks: 2-col grid (50%) — same as Sort by's col-xs-6 */
    .catalog-filter-bar-h .block {
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
    }

    /* In-flow accordion: content flows inside the block */
    .catalog-filter-bar-h .block .filter-content,
    .catalog-filter-bar-h .block .listbox {
        position: static !important;
        border-radius: 0 0 6px 6px !important;
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Price range extra padding for slider */
    .catalog-filter-bar-h .price-range-filter .filter-content,
    .catalog-filter-bar-h .price-range-filter .listbox {
        padding: 12px 16px 16px;
    }
}


/* ==========================================================================
   EXTRA SMALL  ≤480px
   ========================================================================== */

@media (max-width: 480.98px) {

    .catalog-filter-bar-h .block .title,
    .catalog-filter-bar-h .block .main-title {
        font-size: 13px;
        padding: 9px 12px;
    }

    .catalog-filter-bar-h .block .filter-content,
    .catalog-filter-bar-h .block .listbox {
        padding: 8px 12px 12px;
    }
}