@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Unbounded:wght@600;700&display=swap";:root{--ink:#020b44;--muted:#637192;--paper:#f8fbff;--cream:#eaf4ff;--mint:#00c6ff;--green:#006dff;--green-dark:#020b44;--amber:#00b7ff;--coral:#ff4e6a;--line:#006dff29;--shadow:0 24px 70px #003daa2e}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 13% 16%,#00c6ff42,#0000 30%),radial-gradient(circle at 88% 10%,#006dff2e,#0000 30%),linear-gradient(135deg,#fff 0%,#eef7ff 48%,#dcecff 100%);margin:0;font-family:Manrope,sans-serif;overflow-x:hidden}body:before{content:"";pointer-events:none;background-image:linear-gradient(#006dff0d 1px,#0000 1px),linear-gradient(90deg,#006dff0d 1px,#0000 1px);background-size:42px 42px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 82%);mask-image:linear-gradient(#000,#0000 82%)}button,input{font:inherit;min-height:44px}.payment-shell{grid-template-columns:minmax(300px,.95fr) minmax(340px,1.05fr);place-content:center;align-items:start;gap:34px;width:min(1120px,100% - 32px);min-height:100vh;margin:0 auto;padding:48px 0;display:grid}.hero-panel,.checkout-panel{animation:.68s both rise;position:relative}.checkout-panel{animation-delay:.12s}.hero-panel{align-self:start;padding-top:10px;position:sticky;top:48px}.top-row{justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px;display:flex}.brand-row{align-items:center;display:inline-flex}.brand-logo{filter:drop-shadow(0 14px 24px #006dff24);width:clamp(210px,22vw,292px);height:auto;display:block}.order-card,.checkout-panel{box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#ffffffc7;border:1px solid #ffffff9e;border-radius:34px}.order-card{padding:clamp(28px,4vw,48px)}.eyebrow{color:var(--green-dark);text-transform:uppercase;letter-spacing:.1em;background:#00c6ff24;border-radius:999px;padding:8px 12px;font-size:.82rem;font-weight:800;display:inline-flex}h1{letter-spacing:0;overflow-wrap:anywhere;max-width:620px;margin:24px 0 16px;font-family:Unbounded,sans-serif;font-size:clamp(1.9rem,4vw,3.35rem);line-height:1.08}.order-card p{max-width:520px;color:var(--muted);overflow-wrap:anywhere;font-size:.98rem;line-height:1.55}.amount-row{border:1px solid var(--line);background:#ffffffb8;border-radius:24px;justify-content:space-between;align-items:end;gap:18px;margin-top:34px;padding:22px;display:flex}.amount-row span,.order-meta span{color:var(--muted)}.amount-row strong{letter-spacing:-.04em;font-family:Unbounded,sans-serif;font-size:clamp(1.7rem,4vw,2.5rem)}.order-alert{color:var(--green-dark);background:#00c6ff1a;border:1px solid #006dff29;border-radius:16px;margin-top:18px;padding:12px 14px;font-size:.9rem;font-weight:800}.order-alert-error{color:#a82238;background:#ff4e6a14;border-color:#ff4e6a3d}.products-list{gap:10px;margin-top:18px;display:grid}.products-list-head,.product-row{border:1px solid var(--line);background:#ffffffa8}.products-list-head{border-radius:16px;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;display:flex}.products-list-head span{color:#fff;background:var(--green);border-radius:999px;place-items:center;min-width:28px;min-height:28px;font-size:.82rem;font-weight:900;display:grid}.product-row{border-radius:18px;grid-template-columns:1fr auto;gap:14px;padding:14px;display:grid}.product-row strong,.product-row small,.product-price span,.product-price b{display:block}.product-row strong{line-height:1.35}.product-row small,.product-price span{color:var(--muted);margin-top:5px;font-size:.82rem}.product-price{text-align:right;min-width:112px}.product-price b{color:var(--green-dark);margin-top:5px;font-size:1rem}.order-meta{grid-template-columns:auto 1fr;gap:12px 18px;margin-top:24px;display:grid}.checkout-panel{padding:clamp(20px,3vw,34px)}.card-preview{color:#fff;background:linear-gradient(135deg,#ffffff38,#0000 30%),radial-gradient(circle at 88% 24%,#00c6ffb8,#0000 30%),linear-gradient(135deg,#020b44,#006dff 62%,#001f91);border-radius:28px;min-height:220px;padding:28px;box-shadow:inset 0 1px #ffffff4d,0 24px 44px #003daa47}.card-preview span{float:right;font-weight:800}.card-preview strong{letter-spacing:.09em;margin-top:54px;font-size:clamp(1.4rem,3vw,2rem);display:block}.card-preview div:last-child{color:#ffffffd1;letter-spacing:.06em;justify-content:space-between;gap:16px;margin-top:28px;font-weight:700;display:flex}.chip{background:linear-gradient(135deg,#dff7ff,#00b7ff);border-radius:12px;width:54px;height:40px;box-shadow:inset 0 0 0 1px #020b4424}.payment-form{gap:18px;margin-top:28px;display:grid}label{gap:8px;display:grid}label span{font-weight:800}input{border:1px solid var(--line);width:100%;color:var(--ink);background:#ffffffd1;border-radius:18px;outline:none;padding:16px 18px;transition:border .18s,box-shadow .18s,transform .18s}input:focus{border-color:#006dff9e;transform:translateY(-1px);box-shadow:0 0 0 5px #00c6ff2e}input[aria-invalid=true]{border-color:var(--coral)}em{color:#b33c2e;font-size:.86rem;font-style:normal;font-weight:700}.form-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}button{color:#fff;background:linear-gradient(135deg, var(--green), var(--green-dark));cursor:pointer;border:0;border-radius:20px;padding:18px 22px;font-weight:900;transition:transform .18s,box-shadow .18s,opacity .18s;box-shadow:0 18px 28px #006dff3d}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 24px 34px #006dff4d}button:disabled{cursor:wait;opacity:.68}.payment-logos{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:4px 0;display:flex}.payment-logo{border:1px solid var(--line);background:#ffffffc7;border-radius:16px;place-items:center;min-width:96px;min-height:52px;padding:10px 16px;display:inline-grid;box-shadow:0 8px 20px #003daa12}.payment-logo img{object-fit:contain;width:auto;max-width:128px;height:34px;display:block}.payment-logo-blik img{max-width:100px;height:27px}.payment-logo-visa img{max-width:124px;height:38px}.payment-logo-mastercard img{max-width:118px;height:36px}.payment-logo-apple-pay img,.payment-logo-google-pay img{max-width:126px;height:35px}.fine-print{color:var(--muted);margin:0;font-size:.9rem;line-height:1.55}.webhook-demo{background:#00c6ff1a;border:1px dashed #006dff52;border-radius:22px;margin-top:18px;padding:18px}.webhook-demo strong{font-size:.95rem;display:block}.webhook-demo p{color:var(--muted);margin:6px 0 14px;font-size:.88rem;line-height:1.45}.webhook-buttons{flex-wrap:wrap;gap:8px;display:flex}.webhook-buttons button{color:var(--green-dark);box-shadow:none;background:#ffffffc7;border-radius:999px;padding:9px 12px;font-size:.78rem}.webhook-buttons button:hover:not(:disabled){box-shadow:0 10px 20px #006dff1f}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020b44ad;place-items:center;padding:18px;animation:.16s both fade-in;display:grid;position:fixed;inset:0}.bank-modal{text-align:center;background:#fffffffa;border:1px solid #006dff29;border-radius:22px;width:min(460px,100%);padding:34px 34px 32px;animation:.22s both modal-rise;position:relative;overflow:hidden;box-shadow:0 28px 70px #020b4447}.bank-modal:before{content:"";background:linear-gradient(90deg,#020b44,#006dff 55%,#00c6ff);height:5px;position:absolute;inset:0 0 auto}.bank-modal-action:before{background:linear-gradient(90deg,#020b44,#006dff,#00c6ff)}.bank-modal-pending:before{background:linear-gradient(90deg,#020b44,#0047e8,#006dff)}.bank-modal-success:before{background:linear-gradient(90deg,#020b44,#006dff,#00c6ff)}.bank-modal-danger:before{background:linear-gradient(90deg,#020b44,#ff4e6a)}.modal-close{width:34px;height:34px;color:var(--ink);box-shadow:none;background:#f8fbff;border:1px solid #006dff24;border-radius:12px;place-items:center;padding:0;font-size:1.25rem;line-height:1;display:grid;position:absolute;top:18px;right:18px}.modal-icon{width:78px;height:78px;box-shadow:none;background:#f8fbff;border:1px solid #006dff29;border-radius:20px;place-items:center;margin:0 auto;display:grid}.modal-icon img{object-fit:contain;width:60px;height:60px;display:block}.bank-modal-action .modal-icon{border-color:#006dff38}.bank-modal-pending .modal-icon{border-color:#006dff38;animation:1.4s ease-in-out infinite breathe}.bank-modal-success .modal-icon{border-color:#00c6ff57}.bank-modal-danger .modal-icon{background:linear-gradient(#fff7f9,#fff0f3);border-color:#ff4e6a47;box-shadow:inset 0 0 0 1px #ff4e6a14}.bank-modal-danger .modal-icon img{filter:drop-shadow(0 14px 20px #c915342e)}.modal-kicker{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-top:22px;font-size:.74rem;font-weight:900;display:block}.bank-modal h2{letter-spacing:-.04em;margin:10px 0 12px;font-family:Manrope,sans-serif;font-size:clamp(1.45rem,5vw,2rem);font-weight:900;line-height:1.14}.bank-modal p{color:var(--muted);margin:0;line-height:1.65}.modal-amount{background:#f8fbff;border:1px solid #006dff29;border-radius:16px;gap:6px;margin-top:18px;padding:14px;display:grid}.modal-amount span,.modal-helper{color:var(--muted);font-size:.82rem}.modal-amount strong{color:var(--green-dark);letter-spacing:-.03em;font-size:1.35rem}.bank-modal-danger .modal-amount{background:linear-gradient(#fff7f9,#fff0f3);border-color:#ff4e6a47}.bank-modal-danger .modal-amount span{color:#9f1830;font-weight:900}.bank-modal-danger .modal-amount strong{color:#c91534}.bank-sdk-field{text-align:left;gap:8px;margin-top:18px;display:grid}.bank-sdk-field label{color:var(--green-dark);font-size:.88rem;font-weight:900}.bank-sdk-mount{min-height:54px;color:var(--muted);text-align:center;background:#f8fbff;border:1px solid #006dff33;border-radius:15px;place-items:center;padding:13px 14px;font-size:.86rem;line-height:1.35;display:grid}.bank-sdk-mount:empty{border-style:solid}.bank-sdk-mount:empty:before{content:"Bank SDK";color:var(--muted);font-weight:800}.modal-helper{margin-top:14px;line-height:1.45;display:block}.modal-footer{color:var(--muted);background:#f8fbff;border-top:1px solid #006dff1f;gap:6px;margin:18px -34px -32px;padding:14px 34px 16px;font-size:.74rem;line-height:1.4;display:grid}.modal-footer span,.modal-footer small{display:block}.modal-footer span{font-weight:800}.modal-footer small{font-size:.72rem}.modal-primary{width:100%;margin-top:22px}@keyframes rise{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-rise{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes breathe{50%{transform:scale(1.04)}}@media (width<=860px){.payment-shell{min-height:auto;padding:24px 0 calc(28px + env(safe-area-inset-bottom));grid-template-columns:1fr;place-content:start;align-items:start;gap:22px}.hero-panel{padding-top:0;position:relative;top:auto}.top-row{margin-bottom:20px}h1{max-width:760px}.checkout-panel{width:100%}.webhook-buttons button{flex:calc(33.333% - 8px)}}@media (width<=520px){body{background:radial-gradient(circle at 8% 5%,#00c6ff3d,#0000 34%),radial-gradient(circle at 92% 0,#006dff2e,#0000 32%),linear-gradient(160deg,#fff 0%,#eef7ff 58%,#dcecff 100%)}.payment-shell{gap:16px;width:min(100% - 18px,1120px);padding-top:14px}.order-card,.checkout-panel{border-radius:24px;padding:18px}.order-card{padding:16px}.brand-logo{width:min(232px,78vw)}.brand-row{gap:10px;font-size:.92rem}.eyebrow{letter-spacing:.08em;padding:6px 10px;font-size:.66rem}h1{margin:14px 0 10px;font-size:clamp(1.35rem,7vw,2rem);line-height:1.12}.order-card p{margin:0;font-size:.82rem;line-height:1.42}.amount-row,.form-grid{grid-template-columns:1fr}.amount-row{border-radius:18px;gap:8px;margin-top:16px;padding:14px;display:grid}.amount-row strong{font-size:clamp(1.35rem,7.5vw,1.9rem)}.order-alert{border-radius:14px;margin-top:12px;padding:10px 12px;font-size:.82rem}.products-list{gap:8px;margin-top:12px}.products-list-head{border-radius:14px;padding:10px 12px;font-size:.88rem}.product-row{border-radius:14px;grid-template-columns:1fr;gap:10px;padding:12px}.product-row strong{font-size:.9rem}.product-price{text-align:left;min-width:0}.order-meta{grid-template-columns:1fr;gap:2px;margin-top:14px;font-size:.86rem}.order-meta b{margin-bottom:6px}.card-preview{border-radius:22px;min-height:178px;padding:20px}.chip{border-radius:10px;width:48px;height:34px}.card-preview strong{letter-spacing:.06em;white-space:nowrap;margin-top:44px;font-size:clamp(1.1rem,6.3vw,1.55rem)}.card-preview div:last-child{letter-spacing:.04em;margin-top:22px;font-size:.78rem}.top-row{flex-direction:column;align-items:flex-start}.payment-form{gap:14px;margin-top:20px}input{border-radius:15px;padding:14px 15px;font-size:16px}button{border-radius:16px;width:100%;padding:15px 18px}.payment-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.payment-logo{border-radius:14px;min-width:0;min-height:48px;padding:8px 10px}.payment-logo img{max-width:112px;height:30px}.payment-logo-blik img{height:25px}.payment-logo-visa img{height:34px}.payment-logo-mastercard img{height:32px}.payment-logo-apple-pay img,.payment-logo-google-pay img{height:31px}.fine-print{font-size:.82rem}.webhook-demo{border-radius:18px;margin-top:14px;padding:14px}.webhook-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.webhook-buttons button{width:100%;min-height:40px;padding:10px 8px;font-size:.72rem}.modal-backdrop{place-items:center;padding:10px}.bank-modal{width:min(420px,100% - 8px);max-height:calc(100vh - 20px);padding:24px 20px calc(22px + env(safe-area-inset-bottom));border-radius:20px;overflow-y:auto}.modal-footer{margin:16px -20px calc(-22px - env(safe-area-inset-bottom));padding:12px 20px calc(14px + env(safe-area-inset-bottom))}.modal-close{top:12px;right:12px}.modal-icon{border-radius:18px;width:70px;height:70px}.modal-icon img{width:54px;height:54px}.modal-kicker{margin-top:18px;font-size:.68rem}.bank-modal h2{font-size:clamp(1.35rem,8vw,1.85rem)}.bank-modal p{line-height:1.55}.modal-amount{border-radius:14px;margin-top:14px;padding:12px}.bank-sdk-field{margin-top:14px}.bank-sdk-mount{border-radius:13px;min-height:50px;padding:12px;font-size:.8rem}}@media (width<=360px){.payment-shell{width:min(100% - 12px,1120px)}.order-card,.checkout-panel{padding:14px}.card-preview strong{font-size:1rem}.payment-logos,.webhook-buttons{grid-template-columns:1fr}}
