/* =============================================================================
   KONTOBEREICH — GUTHABENSEITE
   -----------------------------------------------------------------------------
   Lag bis zum 14.08.2026 als eingebetteter Block `<style id="ktm-konto-guthaben">`
   im WPCode-Snippet (KTM 275793, Husky 5331), ausgegeben im Kopf mit Prioritaet
   101. Unveraendert uebernommen.

   Eingereiht auf allen Kontoseiten (SPF_Konto_Guthaben-Einbindung in
   includes/class-spf-konto-guthaben.php), nicht nur auf der Guthabenseite: Die
   Saldo-Kachel taucht auch in der Uebersicht auf.
   ============================================================================= */

/* --- Saldo-Karte --- */
.psk-konto .bso-wallet-balance-card{
	display:flex; flex-direction:column; gap:5px;
	padding:18px 20px; margin:0 0 22px;
	background:var(--hover);
	border:1px solid var(--line-strong);
	border-left:3px solid var(--orange-text, var(--orange));
	border-radius:var(--radius);
}
.psk-konto .bso-wallet-balance-label{
	font-family:var(--cond); font-weight:600;
	text-transform:uppercase; letter-spacing:.04em;
	font-size:12.5px; color:var(--muted);
}
.psk-konto .bso-wallet-balance-amount{
	font-family:var(--cond); font-weight:700;
	font-size:34px; line-height:1.05; color:var(--orange-text, var(--orange));
	font-variant-numeric:tabular-nums;
}
.psk-konto .bso-wallet-balance-hint{ font-size:13px; color:var(--faint); }

/* --- Gutschein einloesen --- */
.psk-konto .bso-wallet-load-form{ margin:0 0 26px; }
.psk-konto .bso-wallet-load-form label{
	display:block; margin:0 0 9px;
	font-family:var(--cond); font-weight:600;
	text-transform:uppercase; letter-spacing:.03em;
	font-size:13.5px; color:var(--ink);
}
.psk-konto .bso-wallet-input{
	display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
}
.psk-konto .bso-wallet-input input[type=text],
.psk-konto .bso-wallet-input input{
	flex:1 1 240px; width:auto; max-width:340px; margin:0;
	font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.psk-konto .bso-wallet-input .button,
.psk-konto .bso-wallet-input button{ flex:none; }
.psk-konto .bso-wallet-load-form small{
	display:block; margin:9px 0 0;
	font-size:12.5px; line-height:1.45; color:var(--muted);
}

/* --- Verlauf --- */
.psk-konto .bso-wallet-account h3{
	margin:0 0 12px; font-size:16px;
	font-family:var(--cond); font-weight:600;
	text-transform:uppercase; letter-spacing:.03em; color:var(--ink);
}
.psk-konto table.bso-wallet-ledger{ margin:0; }
.psk-konto table.bso-wallet-ledger th{ white-space:nowrap; }
.psk-konto table.bso-wallet-ledger td{ font-size:13.5px; }
.psk-konto table.bso-wallet-ledger td:last-child,
.psk-konto table.bso-wallet-ledger th:last-child,
.psk-konto table.bso-wallet-ledger td[align=right],
.psk-konto table.bso-wallet-ledger th[align=right]{
	text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;
}
@media (hover:hover){
.psk-konto table.bso-wallet-ledger tbody tr:hover{ background:var(--hover); }}
.psk-konto table.bso-wallet-ledger tbody tr:last-child td{ border-bottom:0; }

/* --- Darkmode: die Inline-Farben des Plugins (gruen/rot) aufhellen --- */
html.spf-night .psk-konto table.bso-wallet-ledger td[style*="color:"]{
	filter:brightness(1.45) saturate(1.1);
}
html.spf-night .psk-konto .bso-wallet-balance-card{ background:var(--panel,var(--hover)); }

@media (max-width:640px){
	.psk-konto .bso-wallet-balance-amount{ font-size:28px; }
	.psk-konto .bso-wallet-input input[type=text],
	.psk-konto .bso-wallet-input input{ flex:1 1 100%; max-width:none; }
	.psk-konto .bso-wallet-input .button,
	.psk-konto .bso-wallet-input button{ width:100%; }
}