*{box-sizing:border-box}body{color:#0f172a;background:#eef2f7;margin:0;font-family:Arial,sans-serif}a{color:inherit}.demo-home,.demo-page{place-items:center;min-height:100vh;padding:32px 16px;display:grid}.demo-card{background:#fff;border:1px solid #dbe3ed;border-radius:8px;width:min(100%,520px);padding:32px;box-shadow:0 18px 48px #0f172a1f}.demo-home-card{width:min(100%,820px)}.demo-card h1{margin:0 0 12px;font-size:32px;line-height:1.1}.demo-logo{width:150px;height:auto;margin:0 0 24px;display:block}.demo-eyebrow{color:#526173;letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-size:13px;font-weight:700}.demo-intro{color:#526173;max-width:620px;margin:0 0 26px;font-size:16px;line-height:1.5}.demo-group{border-top:1px solid #e6edf5;gap:14px;padding-top:22px;display:grid}.demo-group+.demo-group{margin-top:26px}.demo-group-header{gap:5px;display:grid}.demo-group-header h2{color:#172033;margin:0;font-size:18px;line-height:1.25}.demo-group-header p{color:#526173;max-width:620px;margin:0;font-size:14px;line-height:1.45}.demo-link-grid{gap:14px;display:grid}.demo-link-card{color:#172033;background:#f8fafc;border:1px solid #dbe3ed;border-radius:8px;justify-content:space-between;align-items:center;min-height:72px;padding:18px 20px;font-size:18px;font-weight:700;text-decoration:none;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex}.demo-link-card span{gap:5px;display:grid}.demo-link-card strong{color:#172033;font-size:18px;line-height:1.2}.demo-link-card small{color:#526173;font-size:14px;font-weight:400;line-height:1.35}.demo-link-card:after{content:">";color:#46617f;font-size:20px}.demo-link-card:hover,.demo-link-card:focus-visible{border-color:#8aa4c1;transform:translateY(-1px);box-shadow:0 10px 24px #0f172a1a}.demo-link-card[aria-disabled=true]{cursor:not-allowed;opacity:.55}.demo-link-card-pending{border-style:dashed}.demo-link-card[aria-disabled=true]:hover,.demo-link-card[aria-disabled=true]:focus-visible{box-shadow:none;border-color:#dbe3ed;transform:none}.config-warning{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin:0 0 18px;padding:12px 14px;font-size:14px;line-height:1.4}.payment-demo-card{gap:18px;display:grid}.payment-demo-card h1{margin-bottom:4px}.back-link{color:#526173;width:fit-content;font-size:14px;font-weight:700;text-decoration:none}.back-link:hover,.back-link:focus-visible{color:#172033;text-decoration:underline}.apple-pay-container,.card-form-container,.google-pay-container{background:#f8fafc;border:1px solid #dbe3ed;border-radius:8px;width:100%}.apple-pay-container,.google-pay-container{min-height:100px;padding:16px}.card-form-container{padding:18px}.payment-result{color:#526173;min-height:24px;margin:0}.context-status{color:#526173;min-height:20px;margin:-8px 0 0;font-size:14px;line-height:1.4}.secondary-btn{color:#334155;cursor:pointer;font:inherit;background:#fff;border:1px solid #cbd5e1;border-radius:8px;justify-self:start;padding:9px 12px;font-size:14px;font-weight:700}.secondary-btn:hover,.secondary-btn:focus-visible{background:#f8fafc;border-color:#8aa4c1}.page{max-width:1200px;margin:0 auto;padding:32px}.layout{grid-template-columns:1fr 320px;gap:24px;display:grid}.main,.summary-card,.section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.section+.section{margin-top:20px}.payment-methods{flex-wrap:wrap;gap:12px;display:flex}.payment-choice{align-items:center;gap:8px;display:flex}.field-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.field-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px}.field-host{min-width:150px;min-height:24px}label{color:#64748b;margin-bottom:8px;font-size:14px;display:block}.confirm-btn{cursor:pointer;color:#fff;background:#0f172a;border:0;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;padding:14px 16px;font-size:16px;font-weight:700;display:inline-flex}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.btn-spinner{border:2px solid #ffffff61;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:none}.confirm-btn[aria-busy=true] .btn-spinner{display:inline-block}.payment-result-card{border-radius:8px;align-items:flex-start;gap:12px;min-height:0;padding:14px 16px;line-height:1.4;display:flex}.payment-result-success{color:#14532d;background:#ecfdf5;border:1px solid #bbf7d0}.payment-result-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.payment-result-icon{background:#16a34a;border-radius:50%;flex:none;width:24px;height:24px;position:relative}.payment-result-icon:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:6px;height:11px;position:absolute;top:5px;left:8px;transform:rotate(45deg)}.payment-result-content{gap:2px;display:grid}.payment-result-content strong{color:inherit}.payment-result{color:#526173;overflow-wrap:anywhere;word-break:break-word;width:100%;max-width:100%;min-height:24px;margin:0}.payment-result-content{overflow-wrap:anywhere;gap:2px;min-width:0;max-width:100%;display:grid}.toast-container{z-index:10;gap:10px;width:min(320px,100vw - 32px);display:grid;position:fixed;bottom:16px;right:16px}.toast{color:#fff;background:#172033;border-radius:8px;padding:12px 14px;font-size:14px;font-weight:700;box-shadow:0 16px 34px #0f172a38}.toast-success{background:#14532d}@keyframes spin{to{transform:rotate(360deg)}}.success,.error{border-radius:10px;margin-top:16px;padding:14px 16px}.success{color:#166534;background:#ecfdf5;border:1px solid #bbf7d0}.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.hidden{display:none!important}@media (width<=520px){.demo-card{padding:24px}.demo-card h1{font-size:28px}}
