/* === Filter indicator === */
.filter-indicator {
    background-color: var(--accent);
    color: var(--text); 
    border-radius: 50%; 
    width: 1.8em;
    height: 1.8em; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 0.775em; 
    font-weight: bold; 
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    
    position: absolute;
    right: 15%;
}

/* === Clear filter button === */
.clear-filter,
.clear-all-filters {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 5px;
}

.clear-filter:hover,
.clear-all-filters:hover {
    color: var(--danger);
}

.clear-all-filters {
    margin-left: auto;
    color: var(--primary);
}

.clear-all-filters:disabled {
    color: var(--border);
    cursor: not-allowed;
}

/* === Apply button === */
.apply-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    overflow: hidden;
}
.apply-button {
    width: 100%;
    background-color: var(--primary);
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.apply-button:disabled {
    background-color: var(--border);
    cursor: not-allowed;
}
.apply-button:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2));
}
.apply-button:active {
    transform: scale(0.98);
}