/* Extra services, loyalty and promotions (module 10): bills, cards, getting paid, rewards, bureau, promotions, campaigns. */
.sv-billers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.sv-biller { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: #fff; color: var(--text); min-width: 0; }
.sv-biller:hover, .sv-biller.on { border-color: #0a6fd2; background: #eef6ff; color: var(--text); }
.sv-biller i { font-size: 18px; color: #0a6fd2; line-height: 1; margin-top: 2px; }
.sv-biller b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.sv-biller small { color: var(--muted); font-size: 11.5px; }
.sv-confirm { border: 1px solid #c2d9f5; background: var(--infoBg); border-radius: 4px; padding: 12px; display: grid; gap: 10px; }
.sv-confirm .sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; }
.sv-confirm .sum .tot { font-weight: 700; border-top: 1px solid #c2d9f5; padding-top: 4px; }
.sv-sandbox { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warnFg); background: var(--warnBg); border: 1px solid #f0d58f; border-radius: 3px; padding: 1px 6px; }

.sv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sv-card { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1.586; border-radius: 14px; padding: 16px 18px; color: #fff; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #12407a 0%, #0a2347 55%, #061a36 100%);
    box-shadow: 0 10px 24px rgba(6, 26, 54, .22); }
.sv-card.physical { background: linear-gradient(135deg, #5b6673 0%, #39424d 50%, #22282f 100%); }
.sv-card .top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13px; }
.sv-card .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; opacity: .85; }
.sv-card .num { font-family: 'Courier New', ui-monospace, monospace; font-size: clamp(15px, 5vw, 21px); letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.sv-card .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; font-size: 12px; }
.sv-card .foot small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.sv-card .scheme { font-weight: 900; font-style: italic; font-size: 20px; font-family: Arial Black, Arial, sans-serif; }
.sv-card .veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; text-transform: uppercase;
    background: rgba(60, 10, 20, .5); color: #fff; }
.sv-card .veil.warn { background: rgba(255, 241, 204, .6); color: #5c4106; }
a.sv-cardlink { display: grid; gap: 8px; color: var(--text); }
a.sv-cardlink:hover .sv-card { box-shadow: 0 12px 28px rgba(6, 26, 54, .32); }
.sv-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.sv-rules li { display: flex; gap: 6px; align-items: flex-start; }
.sv-rules .bi-check-circle-fill { color: var(--okFg); }
.sv-rules .bi-x-circle-fill { color: var(--badFg); }
.sv-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.sv-secret { font-family: ui-monospace, 'Courier New', monospace; font-size: 15px; letter-spacing: .06em; background: #0b1f3a; color: #d7e7fb; border-radius: 4px; padding: 8px 10px; overflow-wrap: anywhere; }

.sv-qr { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; display: inline-block; max-width: 100%; }
.sv-qr svg { display: block; width: 220px; max-width: 100%; height: auto; }
.sv-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv-link input { flex: 1 1 220px; min-width: 0; font-family: ui-monospace, monospace; font-size: 12px; }

.sv-points { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.sv-points .big { font-size: 34px; font-weight: 800; color: #0a2347; line-height: 1; }
.sv-tier { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; padding: 3px 10px; border-radius: 12px; font-size: 12px; background: #e6edf3; color: #1d3650; }
.sv-tier.silver { background: linear-gradient(135deg, #eef2f6, #c3ccd6); }
.sv-tier.gold { background: linear-gradient(135deg, #f8e7b0, #d9ae4f); color: #3b2a07; }
.sv-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sv-offer { border: 1px dashed #0a6fd2; border-radius: 6px; padding: 12px; background: #f6faff; display: grid; gap: 4px; }
.sv-offer b { font-size: 15px; color: #0a2347; }
.sv-offer small { color: var(--muted); }
.sv-code { font-family: ui-monospace, monospace; font-weight: 700; font-size: 20px; letter-spacing: .12em; background: #fff; border: 2px dashed #0a6fd2; border-radius: 6px; padding: 8px 14px; display: inline-block; color: #0a2347; }

.sv-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sv-rate { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: #fff; display: grid; gap: 4px; }
.sv-rate h4 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; }
.sv-rate .row { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.sv-rate .row b { font-variant-numeric: tabular-nums; }

.sv-pay { max-width: 560px; margin: 24px auto; padding: 0 16px; display: grid; gap: 14px; }
.sv-pay .amount { font-size: 30px; font-weight: 800; color: #0a2347; }
.sv-preview { white-space: pre-wrap; border: 1px solid var(--line); border-radius: 4px; padding: 12px; background: #fbfcfd; font-size: 13px; }
.sv-diff { font-size: 12px; }
.sv-diff td.chg { background: var(--warnBg); }

@media (max-width: 600px) {
    .sv-points { grid-template-columns: 1fr; }
    .sv-cards { grid-template-columns: 1fr; }
}