:root { --order-ink:#172033; --order-muted:#667085; --order-line:#dfe3ea; --order-blue:#2457d6; --order-green:#087f5b; }
* { box-sizing:border-box; }
.order-page { margin:0; background:#f5f7fb; color:var(--order-ink); font-family:"Plus Jakarta Sans",sans-serif; }
.order-nav { background:#fff; border-bottom:1px solid var(--order-line); }
.order-nav-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.order-brand { display:flex; align-items:center; gap:11px; color:var(--order-ink); text-decoration:none; font-weight:800; }
.order-brand img { border-radius:8px; }
.order-brand strong,.order-back { color:var(--order-blue); }
.order-back { font-weight:700; text-decoration:none; }
.order-main { padding:52px 0 80px; }
.order-heading { max-width:720px; margin:0 auto 34px; text-align:center; }
.order-kicker { color:var(--order-blue); font-size:.78rem; font-weight:800; text-transform:uppercase; }
.order-heading h1 { margin:9px 0 10px; font-size:clamp(2rem,5vw,3rem); line-height:1.08; letter-spacing:0; }
.order-heading p { color:var(--order-muted); line-height:1.7; margin:0; }
.order-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:24px; align-items:start; max-width:1120px; margin:0 auto; }
.order-form-panel,.order-summary-panel { background:#fff; border:1px solid var(--order-line); border-radius:8px; box-shadow:0 14px 45px rgba(21,32,58,.07); }
.order-form-panel { padding:32px; }
.order-summary-panel { padding:28px; position:sticky; top:20px; }
.region-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; margin-bottom:26px; border:1px solid #cfd8eb; border-radius:7px; background:#f7f9fd; }
.region-choice-top { width:100%; max-width:1120px; margin-left:auto; margin-right:auto; }
.region-choice>span { font-size:.84rem; font-weight:800; }
.region-toggle { display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; background:#e9edf5; border-radius:6px; }
.region-toggle label { position:relative; }
.region-toggle input { position:absolute; opacity:0; }
.region-toggle span { min-height:36px; display:grid; place-items:center; padding:6px 14px; border-radius:4px; font-size:.78rem; font-weight:800; cursor:pointer; white-space:nowrap; }
.region-toggle input:checked+span { background:#fff; color:var(--order-blue); box-shadow:0 1px 4px rgba(23,32,51,.14); }
.order-step { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.order-step>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--order-blue); color:#fff; font-weight:800; flex:none; }
.order-step div { display:flex; flex-direction:column; gap:2px; }
.order-step small { color:var(--order-muted); }
.order-fields { display:grid; gap:16px; }
.order-fields.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }
.order-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.order-field>span { font-size:.82rem; font-weight:800; }
.order-field input,.order-field select { width:100%; min-height:48px; border:1px solid #cfd5df; border-radius:6px; padding:0 13px; background:#fff; color:var(--order-ink); font:inherit; font-size:.92rem; }
.order-field input:focus,.order-field select:focus { outline:3px solid rgba(36,87,214,.13); border-color:var(--order-blue); }
.order-divider { height:1px; background:var(--order-line); margin:28px 0; }
.payment-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.payment-option { position:relative; }
.payment-option input { position:absolute; opacity:0; }
.payment-option span { min-height:54px; display:grid; place-items:center; padding:10px; border:1px solid #cfd5df; border-radius:6px; font-size:.84rem; font-weight:800; cursor:pointer; text-align:center; }
.payment-option input:checked+span { color:var(--order-blue); border-color:var(--order-blue); background:#eef3ff; box-shadow:inset 0 0 0 1px var(--order-blue); }
.proof-drop { min-height:178px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:1.5px dashed #aeb8c8; border-radius:8px; background:#fafbfc; cursor:pointer; padding:20px; text-align:center; overflow:hidden; }
.proof-drop input { display:none; }
.proof-drop small { color:var(--order-muted); }
.proof-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#eaf0ff; color:var(--order-blue); font-size:1.5rem; }
#proof-preview { display:none; max-width:100%; max-height:210px; object-fit:contain; border-radius:6px; margin-top:8px; }
.proof-drop.has-file #proof-preview { display:block; }
.proof-drop.has-file .proof-icon,.proof-drop.has-file #proof-help { display:none; }
.order-consents { display:flex; flex-direction:column; gap:12px; margin:22px 0 18px; padding:14px 16px; background:#f8faff; border:1.5px solid #dce4f2; border-radius:8px; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.order-consents.has-error { border-color:#fa5252; background:#fff5f5; box-shadow:0 0 0 3px rgba(250,82,82,.14); animation:order-shake .35s ease-in-out; }
@keyframes order-shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.order-consent { display:flex; gap:11px; align-items:flex-start; color:#3b465c; font-size:.83rem; line-height:1.55; cursor:pointer; user-select:none; }
.order-consent input[type="checkbox"] { margin-top:2px; width:18px; height:18px; accent-color:var(--order-blue); cursor:pointer; flex-shrink:0; }
.order-submit { width:100%; min-height:52px; border:0; border-radius:6px; background:var(--order-blue); color:#fff; font:inherit; font-weight:800; cursor:pointer; transition:all .2s ease; box-shadow:0 2px 8px rgba(36,87,214,.25); }
.order-submit.is-disabled { opacity:.68; background:#5379ce; box-shadow:none; }
.order-submit:disabled { opacity:.65; cursor:wait; }
.order-error { display:none; margin:0 0 14px; padding:11px 13px; border:1px solid #ffc9c9; background:#fff5f5; color:#c92a2a; border-radius:6px; font-size:.83rem; }
.summary-product-label { color:var(--order-muted); font-size:.75rem; font-weight:800; text-transform:uppercase; }
.order-summary-panel h2 { margin:8px 0 18px; font-size:1.45rem; letter-spacing:0; }
.order-price-line { display:flex; flex-direction:column; gap:6px; }
.order-price-line strong { font-size:1.4rem; color:var(--order-blue); }
.order-price-line span { color:#98a2b3; text-decoration:line-through; font-size:.86rem; }
.order-saving { display:inline-block; margin-top:12px; color:var(--order-green); background:#eaf8f2; border-radius:4px; padding:6px 9px; font-size:.78rem; font-weight:800; }
.summary-separator { height:1px; background:var(--order-line); margin:25px 0; }
.order-summary-panel h3 { margin:0 0 13px; font-size:1rem; }
.payment-detail { border:1px solid var(--order-line); border-radius:6px; padding:14px; margin-bottom:10px; }
.payment-detail small { display:block; color:var(--order-muted); margin:0 0 5px; }
.payment-detail strong { display:block; overflow-wrap:anywhere; font-size:.92rem; margin-bottom:9px; }
.payment-detail strong:last-child { margin-bottom:0; }
.payment-note { color:var(--order-muted); font-size:.78rem; line-height:1.55; }
.support-box { margin-top:22px; padding:16px; background:#f4f8ff; border-left:3px solid var(--order-blue); }
.support-box p { color:var(--order-muted); font-size:.78rem; line-height:1.5; }
.support-box a,.order-whatsapp { color:var(--order-blue); font-weight:800; text-decoration:none; font-size:.82rem; cursor:pointer; }
.order-success { display:none; padding:46px 20px; text-align:center; }
.order-success.show { display:block; }
.success-check { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:#e8f8f1; color:var(--order-green); font-size:1.7rem; font-weight:800; }
.order-success h2 { margin:0 0 10px; }
.order-success p { max-width:520px; margin:0 auto; color:var(--order-muted); line-height:1.7; }
.success-reference { margin:20px auto; padding:12px; max-width:430px; background:#f5f7fb; border-radius:6px; }
@media(max-width:820px){.order-main{padding-top:34px}.order-grid{grid-template-columns:1fr}.order-summary-panel{position:static;grid-row:1}.order-fields.two-col{grid-template-columns:1fr}}
@media(max-width:520px){.order-nav-inner{min-height:64px}.order-brand span{font-size:.84rem}.order-back{font-size:.78rem}.order-form-panel,.order-summary-panel{padding:20px}.payment-methods{grid-template-columns:1fr}.region-choice{align-items:stretch;flex-direction:column}.region-toggle{width:100%}}