/*
 * PSM Ratecards – Frontend
 * Die .ratecard-Karte selbst wird vom Theme-CSS gestylt (.block19).
 * Hier nur Wrapper, Filter-Buttons und Pagination im Marken-Look.
 */
.psm-rc-wrap {
    --psm-green1: var(--green1, #22DABA);
    --psm-green2: var(--green2, #BFD640);
    --psm-dark:   var(--psm_darkgray, #23272B);
}

/* Filter-Buttons */
.psm-rc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.psm-rc-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    border-radius: 37px;
    background: #f2f2f2;
    color: var(--psm-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: background .15s, color .15s;
}
.psm-rc-filter-btn:hover { background: var(--psm-green2); color: #fff; }
.psm-rc-filter-btn.is-active { background: var(--psm-green1); color: #fff; }

/* Fallback-Grid, falls Bootstrap fehlt */
.psm-rc-grid.row { display: flex; flex-wrap: wrap; }

/* Empty */
.psm-rc-empty { padding: 2rem; text-align: center; color: #9ca3af; }

/* Pagination */
.psm-rc-pagination {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.psm-rc-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 37px;
    background: #f2f2f2;
    color: var(--psm-dark);
    text-decoration: none;
    font-weight: 700;
    transition: background .15s, color .15s;
}
.psm-rc-page:hover { background: var(--psm-green2); color: #fff; }
.psm-rc-page.is-active { background: var(--psm-green1); color: #fff; }

/* Icons (Fallback, falls Theme keine .icon-facebook/.icon-instagram hat) */
.psm-rc-wrap i.icon-facebook,
.psm-rc-wrap i.icon-instagram {
    display: inline-block;
    width: 18px; height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
}
.psm-rc-wrap i.icon-facebook  { background-image: url('../img/icon-facebook.svg'); }
.psm-rc-wrap i.icon-instagram { background-image: url('../img/icon-instagram.svg'); }

/* AJAX-Ladezustand */
.psm-rc-content { transition: opacity .2s; }
.psm-rc-content.psm-rc-loading { opacity: .45; pointer-events: none; }