/* Accent color (change once if needed) */
:root {
    --msc-accent: #ff4d4d; /* replace with your exact brand color */
}

/* Wrapper to lock center position */
.msc-filter-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Filter container (pill background) */
.msc-tag-filter {
    display: inline-flex;
    align-items: center;
    background: #f2f4f7;
    border-radius: 999px;
    padding: 6px;
    gap: 6px;
}

/* RESET Elementor button styles */
.msc-tag-filter .msc-filter-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
}

/* Button base */
.msc-tag-filter .msc-filter-btn {
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    transition: all 0.25s ease;
    white-space: nowrap;
}

/* Hover state */
.msc-tag-filter .msc-filter-btn:hover {
    background: var(--msc-accent);
    color: #ffffff;
}

/* Active pill */
.msc-tag-filter .msc-filter-btn.active {
    background: var(--msc-accent);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Results grid (stable height prevents layout shift) */
.msc-results {
    margin-top: 40px;
    min-height: 420px; /* adjust to your card height */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Tablet */
@media (max-width: 1024px) {
    .msc-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .msc-tag-filter {
        overflow-x: auto;
        max-width: 100%;
    }

    .msc-results {
        grid-template-columns: 1fr;
    }
}