/* ---- Filter Box Wrapper ---- */
.provider-filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ---- Select & Input ---- */
.provider-filter-wrapper .form-control,
.provider-filter-wrapper select {
    min-width: 180px;
    height: 44px;
    border-radius: 8px;
    padding: 6px 10px;
}

.provider-filter-wrapper input[type="text"] {
    min-width: 220px;
}

/* ---- Buttons ---- */
.provider-filter-wrapper .btn {
    height: 44px;
    border-radius: 8px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- Remove Filter Button ---- */
.provider-filter-wrapper .btn-outline-danger {
    border-width: 1.5px;
}

/* ---- Dark Mode ---- */
.dark-mode .provider-filter-wrapper .form-control,
.dark-mode .provider-filter-wrapper select,
.dark-mode .provider-filter-wrapper input[type="text"] {
    background-color: #2e2e2e;
    color: #eaeaea;
    border-color: #444;
}

.dark-mode .provider-filter-wrapper .btn-outline-danger {
    color: #ff8a8a;
    border-color: #ff8a8a;
}

.dark-mode .provider-filter-wrapper .btn-primary {
    background-color: #0a3a72;
    border-color: #0a3a72;
}

/* ---- Mobile Responsive ---- */
@media (max-width: 768px) {
    .provider-filter-wrapper select,
    .provider-filter-wrapper input[type="text"],
    .provider-filter-wrapper .btn {
        width: 100%;
    }
}