* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { padding: 0; margin: 0; min-width: 320px; color: var(--text-primary); background: #eff0f3; font-family: var(--font-ui); }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--active); outline-offset: 3px; }
button:disabled { cursor: default; }
body.has-modal { overflow: hidden; }
#app { width: 100%; min-height: 100dvh; }
.checkout-wrap { display: flex; justify-content: center; min-height: 100dvh; }
.checkout-page { background: white; width: min(100%, 440px); min-height: 100dvh; box-shadow: 0 0 40px rgba(0,0,0,.035); }
.checkout-header { display: flex; position: relative; align-items: center; justify-content: center; height: 52px; padding: 0 16px; color:#000; }
.checkout-header h1 { margin: 0; font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -.25px; }
.checkout-header-close { position: absolute; top: 12px; right: 14px; color: black; border: 0; background: none; padding: 2px; width: 24px; height: 24px; display: grid; place-items:center; }
.checkout-back { display: none; }
.checkout-main { padding: 0 16px 44px; }
.checkout-intro { margin: 12px 0 36px; color:#080808; font-size: 16px; line-height:20px; white-space: nowrap; letter-spacing:-.19px; }
.payment-options { display: flex; flex-direction: column; }
.payment-option { display: flex; align-items: center; text-align:left; width:100%; height:66px; gap:16px; padding: 0; background:white; border:0; color:#151515; transition: background-color 160ms ease; position:relative; }
.payment-option:not(.gift-option):after { content:''; position:absolute; left:48px; right:0; bottom:0; height:1px; background:#d9d9d9; }
.payment-option:hover:not(.gift-option) { background: #fbfbfb; }
.payment-option:active:not(.gift-option) { background: #f5f5f5; }
.option-icon { flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:#161616; }
.option-copy { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.option-title { font-size:16px; font-weight:400; line-height:20px; }
.option-detail { font-size:12px; font-weight:300; line-height:16px; color:#3c3c3c; }
.gift-option { align-items:flex-start; height:auto; min-height:110px; padding-top:16px; padding-bottom:20px; }
.gift-option .option-icon { margin-top:0; }
.gift-option .gift-detail { max-width:260px; color:#a3a3a3; font-size:14px; line-height:16px; }
.gift-switch { position:relative; display:inline-flex; align-items:center; margin-top:22px; flex:0 0 50px; width:50px; height:28px; border-radius:20px; background:#d6d6d6; cursor:pointer; padding:3px; transition:background .18s; }
.gift-switch input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; }
.gift-switch:has(input:checked) { background:#26a660; }
.gift-switch span { display:block; width:22px; height:22px; background:white; box-shadow:0 1px 3px #0003; border-radius:50%; transition:transform .18s; }
.gift-switch:has(input:checked) span { transform:translateX(22px); }
.checkout-footer { background:#fafafa; padding:16px; color:#b29b64; font-size:11px; line-height:16px; }
.checkout-footer p { margin: 12px 0; }
.checkout-footer hr { border:0; border-top:1px solid #ddd; margin:30px 0 22px; }
.footer-anniversary { display:flex; gap:2px; align-items:center; color:#82191d; font-family:Georgia,serif; font-size:15px; height:34px; }
.footer-anniversary em { font-size:29px; font-style:italic; }
.footer-anniversary span small { display:block; margin-left:3px; font-size:9px; font-style:italic; }
.footer-bonus { margin-top:12px; font-size:13px; font-weight:800; color:#0081c9; }
.footer-bonus b { padding:2px 5px; color:white; background:#e83939; }
.copyright { display:flex;justify-content:space-between; color:#151515; }
.copyright span { color:#b6a06f; }
.mts-pay-logo { display: inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:4px; height:24px; padding:0 8px; border-radius:12px; background:var(--pay-logo-bg); color:#fff; font-family:var(--font-wide); font-weight:900; font-size:10px; letter-spacing:.3px; line-height:1; font-style:normal; }
.mts-pay-symbol { flex:0 0 12px; width:12px; height:12px; display:inline-block; background:#ff0032; }
.option-mts .mts-pay-logo { transform: scale(.68); transform-origin:center; }
.brand-sbp { display:inline-flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:50%; background:#211336; position:relative; }
.brand-sbp-shape { width:20px;height:21px; clip-path:polygon(6% 0,95% 50%,6% 100%,34% 50%); background:conic-gradient(from 230deg,#834acf,#00b6da,#28b45d,#ffcf3a,#e4338b,#834acf); }
.brand-yasplit { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#4bea84,#008b54); }
.brand-yasplit span { width:21px;height:28px;border-radius:3px 16px 3px 17px; background:linear-gradient(148deg,transparent 40%,white 41% 53%,#e93245 54%);transform:rotate(-15deg); }
.brand-dolyami { width:32px;height:32px;background:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:3px; }
.brand-dolyami b { width:2.5px;height:15px;border-radius:1px;background:white; }
.brand-podeli,.brand-yapay { display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#ff312d;color:white;font-weight:800;font-size:26px; }
.brand-yapay { border-radius:50%; background:#ff4124;font-family:Georgia,serif; }
/* Bottom-sheet and animated backdrop */
.modal-root { position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; z-index:100; isolation:isolate; }
.modal-backdrop { position:absolute;inset:0; background:rgba(0,0,0,.46);backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px); animation:backdrop-in 370ms cubic-bezier(.2,.9,.2,1) both; }
.payment-sheet { z-index:2; width:min(100%,430px); height:min(calc(548px + env(safe-area-inset-bottom,0px)),calc(100dvh - 14px)); max-height:100dvh; position:relative; display:flex; flex-direction:column; background:var(--surface);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; overflow:hidden; color:var(--text-primary); box-shadow:0 -5px 24px rgba(0,0,0,.065); transform-origin:50% 100%; animation:sheet-in 480ms cubic-bezier(.17,.85,.21,1) both; outline: none; }
.sheet-scroll { position:relative;flex:1;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none; }
.sheet-scroll::-webkit-scrollbar,.methods-scroll::-webkit-scrollbar { display:none; }
.sheet-header { position:absolute;z-index:4;left:0;right:0;top:0;height:64px;display:flex;align-items:flex-start; justify-content:space-between;padding:20px 20px 8px;pointer-events:none;background:linear-gradient(to bottom,#fff 60%,rgba(255,255,255,.87) 79%,rgba(255,255,255,0)); }
.sheet-header > * { pointer-events:auto; }
.sheet-header .mts-pay-logo { margin-top:4px; }
.sheet-close { width:32px;height:32px; border:0;border-radius:12px;display:grid;place-items:center;background:#f2f3f7;color:#1d2023;padding:0; }
.sheet-close:hover { background:#e8eaee; }
.sheet-avatar { width:32px;height:32px; flex:0 0 32px; border-radius:10px; background:radial-gradient(circle at 66% 30%,#e4e0da 0,#cabfbd 46%,#988a8b 100%);position:relative;overflow:hidden; }
.sheet-avatar .avatar-hair { position:absolute;top:4px;left:8px;width:19px;height:30px;background:#6b443c;border-radius:11px 12px 3px 5px; }
.sheet-avatar .avatar-face { position:absolute;top:8px;left:12px;width:12px;height:16px;border-radius:45% 45% 50% 50%;background:#edbfa5;box-shadow:0 11px 0 6px #8c6874; }
.merchant-block { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:310px; padding-top:88px;padding-bottom:16px; }
.merchant-picture { width:100px;height:100px;border-radius:32px;flex:0 0 100px;background:#000;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#fff; }
.merchant-picture span { font-family:Georgia,'Times New Roman',serif;font-size:11px;letter-spacing:-.4px;font-weight:400;transform:scaleX(.91); white-space:nowrap; }
.merchant-name { display:flex;align-items:center;justify-content:center;height:24px;line-height:24px;margin:0;color:#031918;font-size:16px;font-weight:700; }
.merchant-amount { display:flex;align-items:center;justify-content:center;height:46px;line-height:40px;margin:0;padding:2px 8px 4px;font-family:var(--font-merchant);font-size:32px;font-weight:950;letter-spacing:-1.7px;transform:scaleX(1.18);color:#031918;white-space:nowrap; }
.merchant-caption { display:flex;align-items:center;justify-content:center;height:20px;line-height:20px;margin:0;font-size:14px;font-weight:400; }
.methods-scroll { display:flex;gap:12px;padding:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:20px;overscroll-behavior-x:contain;touch-action:pan-x; }
.choice-card { flex:0 0 136px; width:136px;height:94px;display:flex;align-items:center;justify-content:center;border:2px solid var(--stroke);border-radius:22px;background:transparent;padding:0;overflow:hidden;transition:border-color 150ms ease,box-shadow 150ms ease;scroll-snap-align:start; }
.choice-card.is-selected { border-color:var(--active); }
.choice-card:hover { box-shadow:0 0 0 1px rgba(0,112,229,.12); }
.card-face { width:132px;height:90px;border-radius:20px;background:#f2f3f7;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:12px;position:relative; }
.card-face--mts { background:linear-gradient(99deg,rgba(209,222,248,.4) 0%,transparent 39%,#fff7 53%,transparent 72%), linear-gradient(90deg,#dce9ff,#f2f5ff 45%,#e6e9f2); }
.card-face--alfa,.card-face--sbp { background:#f2f3f7; }
.card-top { display:flex;align-items:flex-start;justify-content:space-between;height:21px;position:relative;z-index:1; }
.card-bank-mark { display:inline-grid;place-items:center; width:20px;height:20px;border-radius:7px;font-size:12px;font-weight:800;color:white; }
.card-mts {background:#ff0032;font-family:Georgia,serif;border-radius:6px;}
.card-tbank {background:#ffdd2d;color:white;border-radius:50%;font-size:18px;text-shadow:0 1px 0 #fff;}
.card-alfa {background:#ed2626;border-radius:6px;}
.card-sber {background:linear-gradient(45deg,#098e4a,#43d688);border-radius:50%;}
.mir-mark {font-size:11px;color:#000;font-weight:950;letter-spacing:-.6px; }
.sbp-mark {font-size:9px;color:#6d7683;font-weight:700; }
.mastercard {display:flex;position:relative;width:26px;height:16px;margin-top:1px;}
.mastercard span {width:14px;height:14px;position:absolute;top:1px;border-radius:50%;background:#000;}
.mastercard span+span {left:10px;opacity:.9;}
.card-bottom { display:flex;flex-direction:column;gap:1px;text-align:left;line-height:17px;z-index:1; }
.card-bottom strong {font-size:14px;font-weight:650;white-space:nowrap; }
.card-bottom > span {font-size:12px;line-height:16px;white-space:nowrap;letter-spacing:-.1px; }
.sheet-footer { position:relative;flex:0 0 auto; height:calc(104px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px; padding:8px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:linear-gradient(to bottom,rgba(255,255,255,.91),#fff 28%,#fff);z-index:3; }
.pay-button {height:56px;flex:0 0 56px;width:100%;border:0;border-radius:20px;color:white;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 24px;text-transform:uppercase;font-family:var(--font-wide);font-size:12px;font-weight:900;letter-spacing:-.2px;background:linear-gradient(0deg,#031918 0%,#031918 78%,#06618b 140%); transition:transform 130ms ease,filter 130ms ease; }
.pay-button:active { transform:scale(.985); filter:brightness(.92); }
.pay-button:focus-visible {outline-offset:-4px;outline-color:#fff;}
.offer-caption {flex:0 0 16px; margin:0;font-size:12px;line-height:16px;color:#626c77;white-space:nowrap;text-align:center; }
.offer-caption button {border:0;background:transparent;color:inherit;text-decoration:underline;padding:0;font-size:inherit;cursor:pointer;}
.is-closing .modal-backdrop {animation:backdrop-out 260ms ease-in both;}
.is-closing .payment-sheet {animation:sheet-out 270ms cubic-bezier(.55,0,1,.5) both;}
@keyframes backdrop-in {from{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}}
@keyframes backdrop-out {from{opacity:1}to{opacity:0}}
@keyframes sheet-in {0%{opacity:.4;transform:translateY(85px) scale(.975);filter:blur(5px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes sheet-out {from{opacity:1;transform:translateY(0) scale(1)}to{opacity:.5;transform:translateY(78px) scale(.985)}}
.toast { position:fixed;z-index:200;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:min(90vw,460px);border-radius:15px;background:rgba(22,24,29,.96);color:white;box-shadow:0 10px 35px #0003;padding:13px 17px;font-size:13px;text-align:center;animation:toast-in .2s ease both; }
@keyframes toast-in {from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:380px) { .checkout-intro {font-size:15px;white-space:normal;} .option-detail {font-size:11px;} .gift-option .gift-detail {font-size:13px;} }
@media (max-height:620px) { .payment-sheet {height:calc(100dvh - 8px);} .merchant-block {height:270px;padding-top:64px;} .merchant-picture {height:84px;width:84px;flex-basis:84px;border-radius:28px;} }
@media (min-width:600px) { .checkout-page{max-width:440px;} .payment-sheet {border-radius:32px 32px 0 0;} }
@media (prefers-reduced-motion:reduce) { .modal-backdrop,.payment-sheet,.toast,.is-closing .modal-backdrop,.is-closing .payment-sheet {animation-duration:.01ms!important;transition:none!important;} }