/* Saldo Aanbieders - widget & resultatenpagina.
   Gescoped onder .saldo-app. Deelt de thema-tokens (--sld-*) met fallbacks,
   zodat de plugin ook zonder het Saldo-thema bruikbaar blijft. */

.saldo-app {
	--s-primary:    var(--sld-primary, #5B21B6);
	--s-primary-700:var(--sld-primary-700, #4C1D95);
	--s-primary-050:var(--sld-primary-050, #F4EEFF);
	--s-accent:     var(--sld-accent, #16A34A);
	--s-accent-600: var(--sld-accent-600, #15803D);
	--s-ink:        var(--sld-ink, #1B1233);
	--s-text:       var(--sld-text, #2E2A3A);
	--s-muted:      var(--sld-muted, #6B6580);
	--s-bg:         var(--sld-bg, #FFFFFF);
	--s-surface:    var(--sld-surface, #F7F5FB);
	--s-border:     var(--sld-border, #E7E1F2);
	--s-radius:     var(--sld-radius, 18px);
	--s-radius-sm:  var(--sld-radius-sm, 12px);
	--s-pill:       var(--sld-pill, 999px);
	font-family: var(--sld-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--s-text);
	box-sizing: border-box;
}
.saldo-app *, .saldo-app *::before, .saldo-app *::after { box-sizing: border-box; }

/* Knoppen */
.saldo-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-weight: 800; font-size: 1.02rem; line-height: 1; cursor: pointer;
	padding: 15px 24px; border-radius: var(--s-pill); border: 2px solid transparent;
	text-decoration: none; transition: transform .08s, background .15s, box-shadow .15s;
}
.saldo-btn:hover { transform: translateY(-1px); text-decoration: none; }
.saldo-btn--accent { background: var(--s-accent); color: #fff; box-shadow: 0 8px 20px rgba(22,163,74,.30); }
.saldo-btn--accent:hover { background: var(--s-accent-600); color: #fff; }
.saldo-btn--ghost { background: #fff; color: var(--s-primary); border-color: var(--s-border); }
.saldo-btn--block { width: 100%; }

/* ---------- Widget ---------- */
.saldo-widget { background: #fff; border-radius: var(--s-radius); padding: 22px; display: grid; gap: 16px; }
.saldo-widget__title { font-size: 1.25rem; color: var(--s-ink); font-weight: 900; letter-spacing: -.02em; }

.saldo-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--s-surface); border-radius: var(--s-pill); padding: 4px; }
.saldo-toggle__btn {
	border: 0; background: transparent; border-radius: var(--s-pill); padding: 11px 10px;
	font-weight: 800; color: var(--s-muted); cursor: pointer; font-size: .98rem; transition: .15s;
}
.saldo-toggle__btn[aria-pressed="true"] { background: var(--s-primary); color: #fff; box-shadow: 0 4px 12px rgba(91,33,182,.25); }

.saldo-field { display: grid; gap: 7px; }
.saldo-field > label, .saldo-field__label { font-weight: 700; color: var(--s-ink); font-size: .95rem; }
.saldo-field input[type="number"],
.saldo-field input[type="date"],
.saldo-field select {
	width: 100%; padding: 13px 14px; border: 2px solid var(--s-border); border-radius: var(--s-radius-sm);
	font-size: 1.05rem; font-weight: 600; color: var(--s-ink); background: #fff; font-family: inherit;
}
.saldo-field input:focus, .saldo-field select:focus { outline: none; border-color: var(--s-primary); }

.saldo-input-euro { position: relative; }
.saldo-input-euro > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--s-muted); pointer-events: none; z-index: 1; }
.saldo-input-euro input[type="number"] { padding-left: 38px; }

.saldo-widget__note { margin: 0; font-size: .82rem; color: var(--s-muted); text-align: center; }

/* Range */
.saldo-range { width: 100%; accent-color: var(--s-primary); height: 6px; }
.saldo-range__minmax { display: flex; justify-content: space-between; font-size: .8rem; color: var(--s-muted); }

/* ---------- Resultatenpagina ---------- */
.saldo-results { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.saldo-filters { background: #fff; border: 1px solid var(--s-border); border-radius: var(--s-radius); padding: 22px; display: grid; gap: 20px; position: sticky; top: 92px; }
.saldo-filters__title { margin: 0; font-size: 1.15rem; color: var(--s-ink); }

.saldo-results__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.saldo-results__heading { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); color: var(--s-ink); }
.saldo-results__count { margin: 0; color: var(--s-muted); font-weight: 600; }

.saldo-cards { display: grid; gap: 14px; }
.saldo-card-result {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 18px; align-items: center;
	background: #fff; border: 1px solid var(--s-border); border-radius: var(--s-radius); padding: 20px 22px;
	transition: box-shadow .15s, border-color .15s;
}
.saldo-card-result:hover { box-shadow: 0 10px 30px rgba(27,18,51,.08); }
.saldo-card-result.is-best { border-color: var(--s-accent); box-shadow: 0 0 0 2px rgba(22,163,74,.18); }
.saldo-card-result__brand { display: grid; gap: 6px; }
.saldo-card-result__logo { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; }
.saldo-card-result__name { font-weight: 900; font-size: 1.2rem; color: var(--s-ink); }
.saldo-card-result__range { font-size: .82rem; color: var(--s-muted); }
.saldo-k { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--s-muted); font-weight: 700; }
.saldo-card-result__rente strong { font-size: 1.15rem; color: var(--s-ink); }
.saldo-card-result__pm strong { font-size: 1.35rem; color: var(--s-primary); font-weight: 900; }
.saldo-badge { display: inline-block; background: var(--s-accent); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: var(--s-pill); width: max-content; }

.saldo-empty { background: var(--s-surface); border: 1px dashed var(--s-border); border-radius: var(--s-radius); padding: 28px; text-align: center; color: var(--s-muted); font-weight: 600; }
.saldo-results__disclaimer { margin-top: 18px; font-size: .82rem; color: var(--s-muted); }

@media (max-width: 900px) {
	.saldo-results { grid-template-columns: 1fr; }
	.saldo-filters { position: static; }
	.saldo-card-result { grid-template-columns: 1fr 1fr; }
	.saldo-card-result__cta { grid-column: 1 / -1; }
	.saldo-card-result__cta .saldo-btn { width: 100%; }
}