.demo-ribbon{display:flex;gap:15px;align-items:center;background:#f0e8da;border:1px solid #d4c4a8;padding:16px 20px;border-radius:5px;margin-bottom:30px}.demo-ribbon>span{font-size:10px;letter-spacing:.12em;font-weight:700;background:var(--plum);color:white;padding:6px 9px;border-radius:3px}.demo-ribbon p{font-size:12px;line-height:1.6;color:var(--ink);margin:0}.payment-steps{display:flex;gap:35px;list-style:none;padding:0;margin:0 0 32px;font-size:12px;color:var(--muted)}.payment-steps li{display:flex;align-items:center;gap:9px}.payment-steps span{font-size:10px;border:1px solid var(--line);border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.payment-steps .current{color:var(--plum);font-weight:600}.payment-steps .current span{background:var(--plum);color:white}.payment-demo h1{font-size:clamp(30px,3.2vw,46px)}.payment-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;margin-top:30px}.payment-selection{border:1px solid var(--line);border-radius:6px;padding:28px;min-width:0}.payment-ticket{display:flex;gap:15px;align-items:center}.payment-ticket>.icon{width:33px;height:33px;color:var(--wine)}.payment-ticket strong{display:block;font-size:17px}.payment-ticket span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.payment-summary{margin:26px 0}.payment-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.payment-summary dt{color:var(--muted)}.payment-summary dd{margin:0;font-weight:600;text-align:right}.payment-selection select{width:100%;padding:15px;background:var(--paper);border:1px solid #8d8086;border-radius:4px;font:inherit;font-size:14px;color:var(--ink);min-height:50px}.payment-selection .form-field small{display:block;font-size:11px;line-height:1.6;margin:9px 0;color:var(--muted)}.payment-presets{display:flex;gap:8px;margin:16px 0 26px}.payment-presets button{background:transparent;border:1px solid var(--line);border-radius:30px;padding:9px 15px;font:inherit;font-size:11px;cursor:pointer;min-height:40px}.payment-presets button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:white}.payment-total{background:#eee7de;border-radius:6px;padding:28px;align-self:start;min-width:0}.kaspi-wordmark{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d9d0c4;padding-bottom:23px;margin-bottom:24px}.kaspi-wordmark strong{font-size:28px;color:#d62e29;letter-spacing:-.04em}.kaspi-wordmark span{font-size:10px;letter-spacing:.1em;color:#764d39;border:1px solid #cdb8a5;padding:5px 9px;border-radius:3px}.payment-total>p{font-size:12px}.payment-amount{font-size:clamp(28px,3.3vw,43px);letter-spacing:-.04em;display:block;margin-top:12px;font-weight:500;white-space:nowrap}.payment-total .payment-summary>div{border-color:#d9d0c4}.payment-total .payment-footnote{font-size:11px;line-height:1.85;margin-bottom:0}.kaspi-demo-button{background:#d62e29;color:white;font-size:12px}.kaspi-demo-button:hover{background:#b82622}.payment-selection .btn{width:100%;font-size:12px;gap:12px;padding-left:15px;padding-right:15px;white-space:normal}.payment-complete{max-width:660px}.payment-check{display:grid;place-items:center;width:65px;height:65px;background:#e1e9dd;color:#345240;border-radius:50%;font-size:31px;margin-bottom:25px}.payment-complete>p{font-size:15px;line-height:1.9;margin:23px 0}.payment-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:28px}.payment-demo-link{margin-top:22px}.payment-demo-link p{font-size:12px;line-height:1.8;margin-top:10px;max-width:600px}
@media(max-width:1100px){.payment-layout{grid-template-columns:1fr}.payment-total{max-width:none}}@media(max-width:600px){.payment-selection,.payment-total{padding:22px}.demo-ribbon{align-items:flex-start;padding:15px;gap:10px}.demo-ribbon p{font-size:11px}.payment-steps{gap:18px;font-size:11px;justify-content:space-between}.payment-steps li{gap:6px}.payment-steps span{width:25px;height:25px}.payment-amount{font-size:37px}.payment-summary>div{font-size:11px}.payment-demo h1{font-size:32px}.payment-actions{gap:20px}}