.alp-project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;

    /* Fallbacks if variables are not present */
    --alp-filter-bg: #ffffff;              /* base background */
    --alp-filter-border: #000000;          /* active border color */
    --alp-filter-text: #000000;            /* base text color */
    --alp-filter-active-text: #ffffff;     /* active text color */
}

/* Base button */
.alp-project-filters .alp-filter {
    background: var(--alp-filter-bg, #ffffff);
    color: var(--alp-filter-text, #000000); /* base text color */

    border: none; /* no border by default */
    border-radius: 0;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

/* Hover */
.alp-project-filters .alp-filter:hover {
    box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}

/* Active state: border + background */
.alp-project-filters .alp-filter.is-active {
    background: var(--alp-filter-border, #000000);
    border: 1px solid var(--alp-filter-border, #000000);
    color: var(--alp-filter-active-text, #ffffff);
    box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}

/* Editor placeholder */
.alp-project-filters-placeholder {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: #f6f7f9;
    border: 1px dashed #d0d4db;
    font-size: 13px;
}