/* 1) Make the action menu container stable + predictable */
.container_action_menu {
    margin: 0 auto;
    display: flex;
    justify-content: center; /* centers the inner content block */
    align-items: center;
    box-sizing: border-box;
    z-index: 999;
    flex: 0 0 100%;
    min-width: 0; /* critical in flex layouts to prevent overflow/jumps */
    width: 100%;

}

    /* ✅ 1b) Center the filters block with a max-width (THIS is what creates visual centering) */
    .container_action_menu #sfsFilters {
        width: 100%;
        max-width: 900px; /* adjust to taste (900 / 1100 / 1280 etc.) */
        margin: 0 auto;
        box-sizing: border-box;
    }

        /* 2) Ensure the filter root + panel always use full available width (of the max-width block) */
        .container_action_menu #sfsFilters,
        .container_action_menu #sfsFilters .sfs-filter-root,
        .container_action_menu #sfsFilters .sfs-filter-panel {
            width: 100%;
            box-sizing: border-box;
        }

            /* 3) Prevent tabs changing the parent width based on line wrapping */
            .container_action_menu #sfsFilters .sfs-filter-bar {
                width: 100%;
               
            }

/* Filter bar layout (center rows when wrapped) */
.sfs-filter-root .sfs-filter-bar {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center; /* ✅ CENTER THE FILTER BUTTONS */
    gap: 8px;
    align-items: center;
    white-space: normal !important;
    overflow: visible !important;
    /*background: linear-gradient(90deg, var(--sfs-black), #151515);*/
  padding:10px;
}

/* Buttons should size to content and be allowed to wrap */
.sfs-filter-root .sfs-filter-tab {
    flex: 0 1 auto !important; /* allow wrapping */
    max-width: 100%;
    white-space: normal !important; /* allow text to wrap inside button if needed */
}

/* Optional: keep "▾" with the last word */
.sfs-filter-root .sfs-filter-chev {
    white-space: nowrap;
}

.sfs-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    padding: 10px 12px;
    border-right: 1px solid black;
   
    cursor: pointer;
    font-weight: 900;
    font-size: 13px;
    user-select: none;
    color: black;

}

    .sfs-filter-tab.is-active {
        border-color: rgba(255,255,255,0.45);
    }

    /* only indicator: selected */
    .sfs-filter-tab.is-selected {
       /* background: #313547;*/
        border-color: rgba(255,255,255,0.65);
    }

.sfs-filter-chev {
    /*opacity: 0.75;*/
}

.sfs-filter-panel {
   
    padding: 4px;
    width: 100%;
    /*box-sizing: border-box;*/
    /*transition: opacity 160ms ease, max-height 160ms ease;*/
    /* ✅ if you want panel content centered inside */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* optional: keep the panel inner content from going ultra-wide */
.sfs-filter-pane {
    width: 100%;
    max-width: 900px; /* adjust to taste */
    display: none;
}

.sfs-filter-panel--hidden {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border-width: 0;
    margin-top: 0;
}

/* when shown, restore spacing */
.sfs-filter-panel:not(.sfs-filter-panel--hidden) {
    visibility: visible;
    opacity: 1;
    max-height: 1000px; /* big enough for your content */
    padding: 12px;
    border-width: 1px;
    margin-top: 10px;
   
}

.sfs-filter-pane.is-open {
    display: block;
}

.sfs-filter-pane-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sfs-filter-pane-title {
    font-size: 14px;
    font-weight: 900;
}

.sfs-filter-subtitle {
    font-size: 12px;
    font-weight: 900;
    opacity: 0.9;
    margin-top: 6px;
}

.sfs-filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.sfs-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.sfs-filter-preset {
    appearance: none;
    -webkit-appearance: none;
}

    .sfs-filter-preset.is-selected {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset;
    }

.sfs-filter-more {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.35);
}

.sfs-filter-more-wrap {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.15);
}

.sfs-filter-btn {
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
}

/* =====================================================
    RESPONSIVE BEHAVIOR
   ===================================================== */

/* Larger screens (tablet/desktop) – still mobile-width centered,
   just adjust spacing slightly */
@media (min-width: 768px) {
    .sub-menu {
        gap: 20px;
        padding: 12px 20px;
    }

    /* Optional: bump max width on larger screens */
    .container_action_menu #sfsFilters {
        max-width: 1200px;
    }
}