:root { color-scheme: dark; --bg:#0d0f12; --card:#15181d; --surface:#1b1f25; --line:rgba(255,255,255,.09); --text:#f7f7f8; --muted:#929aa7; --blue:#2563eb; --pix:#32bcad; --green:#4ade80; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,a { font:inherit; }
a { color:inherit; text-decoration:none; }
.checkout-header { height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:960px; margin:auto; padding:0 20px; border-bottom:1px solid var(--line); }
.checkout-brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.checkout-brand img { border-radius:10px; object-fit:cover; }
.secure-label { color:var(--muted); font-size:.8rem; }
.secure-label i { color:var(--green); }
.checkout-progress { max-width:580px; margin:26px auto 0; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); }
.checkout-progress-step { position:relative; display:grid; justify-items:center; gap:6px; color:#68717e; font-size:.75rem; }
.checkout-progress-step:not(:last-child)::after { content:""; position:absolute; top:15px; left:calc(50% + 20px); width:calc(100% - 40px); height:1px; background:var(--line); }
.checkout-progress-step > span { width:30px; height:30px; display:grid; place-items:center; position:relative; z-index:1; border:1px solid var(--line); border-radius:50%; background:var(--bg); font-weight:750; }
.checkout-progress-step.is-active { color:#bfdbfe; }
.checkout-progress-step.is-active > span { border-color:var(--blue); background:var(--blue); color:#fff; }
.checkout-progress-step.is-complete { color:#a7f3d0; }
.checkout-progress-step.is-complete > span { border-color:rgba(74,222,128,.35); background:rgba(22,163,74,.16); color:var(--green); }
.checkout-progress-step.is-complete::after { background:rgba(74,222,128,.3); }
.checkout-page { width:min(680px,calc(100% - 28px)); margin:24px auto 48px; }
.checkout-card { padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 20px 55px rgba(0,0,0,.24); }
.checkout-card-heading { margin-bottom:22px; }
.checkout-card-heading > span { color:#60a5fa; font-size:.72rem; font-weight:750; }
.checkout-card-heading h1 { margin:5px 0 6px; font-size:clamp(1.45rem,4vw,2rem); letter-spacing:-.035em; }
.checkout-card-heading p { margin:0; color:var(--muted); font-size:.9rem; }
.quantity-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.quantity-presets button { padding:13px 8px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--text); font-weight:800; cursor:pointer; }
.quantity-presets button > span { display:block; font-size:1rem; }
.quantity-presets button small { display:block; margin-top:2px; color:var(--muted); font-size:.68rem; font-weight:600; }
.quantity-presets button.is-active { border-color:rgba(96,165,250,.55); background:rgba(37,99,235,.14); color:#bfdbfe; }
.quantity-control { margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.quantity-control > span { color:var(--muted); font-size:.82rem; }
.quantity-control > div { display:grid; grid-template-columns:42px 78px 42px; }
.quantity-control button,.quantity-control input { height:42px; border:1px solid var(--line); background:var(--surface); color:#fff; text-align:center; }
.quantity-control button { cursor:pointer; font-size:1.2rem; }
.quantity-control button:first-child { border-radius:10px 0 0 10px; }
.quantity-control button:last-child { border-radius:0 10px 10px 0; }
.quantity-control input { width:100%; border-right:0; border-left:0; outline:none; appearance:textfield; }
.live-summary,.final-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:20px; }
.live-summary > div,.final-summary > div { padding:13px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.live-summary small,.live-summary strong,.final-summary small,.final-summary strong { display:block; }
.live-summary small,.final-summary small { margin-bottom:4px; color:var(--muted); font-size:.7rem; }
.live-summary strong,.final-summary strong { font-size:.95rem; }
.live-total strong { color:#93c5fd; }
.promo-live-summary,.authenticated-box { display:flex; align-items:center; gap:11px; margin-top:12px; padding:12px 14px; border:1px solid rgba(74,222,128,.24); border-radius:11px; background:rgba(22,163,74,.1); }
.promo-live-summary > i,.authenticated-box > i { color:var(--green); font-size:1.2rem; }
.promo-live-summary small,.promo-live-summary strong,.authenticated-box small,.authenticated-box strong { display:block; }
.promo-live-summary small,.authenticated-box small { color:#a7f3d0; font-size:.7rem; }
.promo-live-summary strong { font-size:.85rem; }
.checkout-button { min-height:50px; margin-top:20px; padding:12px 18px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; background:var(--blue); color:#fff; font-weight:800; cursor:pointer; }
.checkout-button:hover { background:#1d4ed8; }
.checkout-button:disabled { opacity:.6; cursor:wait; }
.quantity-final-control { display:grid; grid-template-columns:50px 1fr 50px; gap:0; margin-top:18px; }
.quantity-final-control > button,.quantity-final-control > input { min-height:50px; border:1px solid var(--line); background:var(--surface); color:#fff; text-align:center; }
.quantity-final-control > button { font-size:1.35rem; font-weight:700; cursor:pointer; }
.quantity-final-control > button:first-child { border-radius:10px 0 0 10px; }
.quantity-final-control > button:last-child { border-radius:0 10px 10px 0; }
.quantity-final-control > input { width:100%; border-right:0; border-left:0; outline:none; font-size:1.05rem; font-weight:800; appearance:textfield; }
.quantity-final-control > button:hover { border-color:rgba(96,165,250,.45); color:#bfdbfe; }
.checkout-card[data-checkout-page="quantity"] { padding-bottom:150px; }
.quantity-sticky-action { position:fixed; z-index:20; right:0; bottom:0; left:0; width:min(680px,100%); margin:auto; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(13,15,18,.96); box-shadow:0 -12px 32px rgba(0,0,0,.3); backdrop-filter:blur(14px); }
.quantity-sticky-action .quantity-final-control { margin-top:0; }
.quantity-sticky-action .checkout-button { margin-top:9px; }
.form-error { margin:12px 0 0; color:#fca5a5; font-size:.8rem; }
.is-hidden { display:none !important; }
.pix-option { width:100%; min-height:90px; padding:16px 18px; display:flex; align-items:center; gap:14px; border:1px solid rgba(50,188,173,.42); border-radius:14px; background:rgba(50,188,173,.08); color:#fff; text-align:left; }
.pix-option > .bi-pix { color:var(--pix); font-size:2.2rem; }
.pix-option span { display:grid; gap:3px; }
.pix-option span small { color:var(--muted); }
.pix-option > .bi-check-circle-fill { margin-left:auto; color:var(--pix); }
.order-inline-summary { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.order-inline-summary span { padding:13px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.order-inline-summary small,.order-inline-summary strong { display:block; }
.order-inline-summary small { color:var(--muted); font-size:.72rem; }
.promo-inline { border-color:rgba(74,222,128,.22) !important; }
.promo-inline strong { color:#86efac; }
.checkout-actions { display:flex; align-items:center; gap:16px; margin-top:20px; }
.checkout-actions .checkout-button { flex:1; margin-top:0; }
.checkout-back { color:var(--muted); font-size:.84rem; }
.checkout-back.standalone { display:inline-flex; margin-top:18px; }
.final-summary { grid-template-columns:1fr 1fr; margin-top:0; }
.final-summary .final-promo { grid-column:1/-1; border-color:rgba(74,222,128,.22); background:rgba(22,163,74,.08); }
.final-promo strong { color:#86efac; }
.identity-box { margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.identity-heading strong,.identity-heading small { display:block; }
.identity-heading small { color:var(--muted); font-size:.74rem; }
.identity-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:10px; margin-top:12px; }
.identity-grid label,.pix-result label { color:var(--muted); font-size:.72rem; }
.identity-grid input,.pix-result input { width:100%; height:44px; margin-top:5px; padding:0 12px; border:1px solid var(--line); border-radius:9px; outline:none; background:var(--surface); color:#fff; font-size:1rem; }
.identity-grid input:focus { border-color:#3b82f6; }
.pix-result { margin-top:18px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#101216; text-align:center; }
.pix-result > img { width:min(250px,80%); aspect-ratio:1; object-fit:contain; border-radius:10px; background:#fff; }
.pix-result > div { margin:12px 0; }
.pix-result > div small,.pix-result > div strong { display:block; }
.pix-result > div small { color:var(--muted); }
.pix-result label { display:block; text-align:left; }
.copy-pix-button { width:100%; min-height:44px; margin-top:10px; border:1px solid rgba(96,165,250,.3); border-radius:9px; background:rgba(37,99,235,.12); color:#bfdbfe; font-weight:750; cursor:pointer; }
.pix-result > p { margin:12px 0 0; color:#facc15; font-size:.8rem; }
.checkout-toast { position:fixed; right:16px; bottom:16px; max-width:min(360px,calc(100% - 32px)); padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:#1b1f25; color:#fff; opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s; }
.checkout-toast.is-visible { opacity:1; transform:none; }
@media(max-width:575.98px){.secure-label{font-size:0}.secure-label i{font-size:1rem}.checkout-page{width:100%;margin:18px 0 0}.checkout-card{min-height:calc(100vh - 152px);padding:20px 16px;border-right:0;border-left:0;border-radius:0}.quantity-presets{grid-template-columns:repeat(2,1fr)}.quantity-control{align-items:flex-start;flex-direction:column}.quantity-control>div{width:100%;grid-template-columns:44px 1fr 44px}.live-summary{grid-template-columns:1fr 1fr}.live-summary>div:last-child{grid-column:1/-1}.identity-grid{grid-template-columns:1fr}.checkout-actions{align-items:stretch;flex-direction:column-reverse}.checkout-actions .checkout-button{width:100%}.checkout-back{text-align:center}}