/**
 * filter-filter.css  –  Plugin: Rechtsanwälte Filter
 * Version: 1.4
 */

:root {
    --filter-gap: 24px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.filter-wrap {
    width: 100%;
}

/* ── Filterleiste ────────────────────────────────────────────────────────── */
.filter-controls {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   24px 120px;
    margin-bottom:         24px;
    align-items:           end;
}

@media (max-width: 768px) {
    .filter-controls {
		grid-template-columns: 1fr;
        gap: 20px;
	}
}

/* ── Aktionen (Reset / Apply) ────────────────────────────────────────────── */
.filter-actions {
    display:         flex;
    justify-content: flex-end;
    gap:             16px;
    margin-bottom:   32px;
}

#filter-apply {
    background:    var(--filter-apply-bg) !important;
    color:         var(--filter-apply-color) !important;
    border:        none;
    padding:       11px 20px;
    border-radius: 50px;
    font-size:     1rem;
    font-weight:   600 !important;
}

#filter-apply:hover {
    background: var(--filter-apply-bg-hover) !important;
    color:      var(--filter-apply-color-hover) !important;
}

.filter-btn-reset {
    background:    var(--filter-reset-bg) !important;
    color:         var(--filter-reset-color) !important;
    border:        1px solid var(--filter-reset-color) !important;
    padding:       11px 20px;
    border-radius: 50px;
    font-size:     1rem;
    font-weight:   600 !important;
}

.filter-btn-reset:hover {
    background:   var(--filter-reset-bg-hover) !important;
    color:        var(--filter-reset-color-hover) !important;
    border-color: var(--filter-reset-bg-hover) !important;
}

.filter-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.filter-field label {
    font-size:   1.2rem;
    font-weight: 600;
    color:       var(--filter-primary);
    margin:      0;
}

.filter-field input:not([type="radio"]):not([type="checkbox"]),
.filter-field select {
    width:         100%;
    padding:       10px 14px;
    border:        2px solid var(--filter-input-border);
    border-radius: 3px;
    font-size:     1rem;
    background:    var(--filter-input-bg);
    color:         inherit;
    transition:    border-color .2s;
    box-sizing:    border-box;
    appearance:    auto;
}

.filter-field input::placeholder {
    color:   var(--filter-primary);
    opacity: 1;
}

.filter-field input:not([type="radio"]):not([type="checkbox"]):focus,
.filter-field select:focus {
    outline:      none;
    border-color: var(--filter-input-border);
    box-shadow:   0 0 0 3px rgba(26, 58, 92, .12);
}

/* ── Checkbox-Filter (Taxonomie/Feld) ────────────────────────────────────── */
.filter-field-checkboxes {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.filter-field .filter-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   1.2rem;
    font-weight: 400;
    text-align:  left;
    cursor:      pointer;
    margin:      0;
}

.filter-checkbox-label input[type="checkbox"],
.filter-checkbox-label input[type="radio"] {
    width:        auto;
    flex-shrink:  0;
    margin:       0;
    accent-color: var(--filter-control-accent);
}

/* ── Ergebnis-Zähler ─────────────────────────────────────────────────────── */
.filter-results-count {
    font-size:     1rem;
    color:         var(--filter-text-muted);
    margin-bottom: 16px;
    min-height:    1.4em;
}

/* ── Karten-Grid ─────────────────────────────────────────────────────────── */
.filter-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--filter-gap);
    position:              relative;
    min-height:            200px;
}

@media (max-width: 889px)  { .filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px)  { .filter-grid { grid-template-columns: 1fr; } }

.filter-grid.filter-loading {
    opacity:        .45;
    transition:     opacity .2s;
    pointer-events: none;
}

.filter-grid.filter-loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: transparent;
}

/* ── Einzelne Karte ──────────────────────────────────────────────────────── */
.filter-card {
    background:     var(--filter-placeholder-bg);
    display:        flex;
    flex-direction: column;
    padding:        30px;
    transition:     box-shadow .2s;
}

.filter-card:hover {
    background:  var(--filter-card-bg-hover);
    box-shadow:  0 4px 20px rgba(0, 0, 0, .12);
}

/* Logo-Bereich */
.filter-card__logo-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      180px;
}

.filter-card__logo-wrap img {
    max-width:  100%;
    max-height: 120px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
}

/* Body */
.filter-card__body {
    padding:  16px 30px;
    flex-grow: 1;
}

.filter-card__name {
    font-size:   1.15rem;
    font-weight: 700;
    color:       var(--filter-primary);
    margin:      0 0 12px;
    line-height: 1.35;
    text-align:  center;
}

.filter-card__meta {
    font-size:  .9rem;
    color:      var(--filter-text-muted);
    margin:     0 0 4px;
    text-align: center;
}

/* Footer mit Button */
.filter-card__footer {
    padding:    0;
    text-align: center;
}

.filter-card__website-btn {
    display:         inline;
    padding:         15px 20px;
    background:      var(--filter-btn-bg);
    color:           var(--filter-btn-color) !important;
    text-decoration: none;
    border-radius:   50px;
    font-size:       1rem;
    font-weight:     500;
    transition:      background .2s, color .2s;
}

.filter-card__website-btn:hover {
    background: var(--filter-btn-bg-hover);
    color:      var(--filter-btn-color-hover) !important;
}

/* ── Versteckte Karten (Load More) ──────────────────────────────────────── */
.filter-card--hidden {
    display: none;
}

/* ── Mehr anzeigen Button ────────────────────────────────────────────────── */
#filter-load-more-wrap {
    position:        relative;
    margin-top:      32px;
    display:         flex;
    justify-content: flex-end;
}

#filter-load-more {
    background: var(--filter-load-more-bg) !important;
    color:      var(--filter-load-more-color) !important;
    border:     none !important;
    padding:         11px 20px;
    text-decoration: none;
    border-radius:   50px;
    font-size:       1rem;
    font-weight:     600 !important;
    transition:      background .2s, color .2s;
}

#filter-load-more:hover {
    background: var(--filter-load-more-bg-hover) !important;
    color:      var(--filter-load-more-color-hover) !important;
}

/* ── Keine Ergebnisse ────────────────────────────────────────────────────── */
#filter-no-results {
    text-align: center;
    padding:    48px 24px;
    color:      var(--filter-text-muted);
    font-size:  1rem;
}