/* Checkout e pedido — mesmo tema "Mesa grafite" da landing (tokens, fontes, header e .btn vêm de landing.css).
   O conteúdo vira uma carta clara sobre a mesa escura, com cantos vivos, borda grafite e sombra em degrau. */

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header .wordmark{text-decoration:none}
.site-header .back-link{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:.5rem .8rem;border-radius:10px}
@media(hover:hover) and (pointer:fine){.site-header .back-link:hover{background:var(--face2)}}

.form-page,.order-page{padding-block:2.4rem 4rem}
.form-page>.container,.order-page>.container{position:relative;width:calc(100% - 2rem);max-width:40rem;background:var(--face);color:var(--dark);border:3px solid var(--dark);border-radius:26px;padding:1.6rem 1.3rem 1.8rem;box-shadow:12px 12px 0 -2px var(--mid),24px 24px 0 -5px var(--slate),0 40px 40px -20px #000}
@media(min-width:640px){.form-page>.container,.order-page>.container{padding:2.4rem 2.6rem 2.6rem}}
.form-page .section-heading,.order-page .section-heading{font-size:clamp(1.9rem,8vw,2.6rem);line-height:.98;letter-spacing:-.02em;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:2px dashed var(--mid)}

.summary-row{display:flex;justify-content:space-between;gap:1rem;padding-block:.65rem;border-top:2px dashed var(--face2);font-family:var(--mono);font-weight:700;font-size:.85rem}
.summary-row:first-child{border-top:none}
.summary-row span:last-child{text-align:right}
#checkout-total-price{font-family:var(--display);font-size:1.15rem;line-height:1;background:var(--dark);color:var(--face);border-radius:8px;padding:.25em .55em}
#checkout-total-price.placeholder{font-family:var(--mono);font-size:.8rem;background:var(--face2);color:#55595f}

.field{margin-bottom:1.4rem}
.field label{display:block;margin-bottom:.45rem;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.phone-field{display:flex;align-items:stretch;background:#fff;border:3px solid var(--dark);border-radius:14px;overflow:hidden;box-shadow:0 4px 0 var(--slate)}
.phone-field:focus-within{outline:3px solid var(--dark);outline-offset:3px}
.phone-field .phone-prefix{display:flex;align-items:center;padding-inline:1rem;background:var(--dark);color:var(--face);font-family:var(--mono);font-weight:700}
.phone-field input{flex:1;min-width:0;border:none;background:#fff;color:var(--dark);font:700 1.05rem var(--mono);padding:.9rem 1rem}
.phone-field input::placeholder{color:#8b909a}
.phone-field input:focus,.phone-field input:focus-visible{outline:none}
.field-hint{margin:.6rem 0 0;font-family:var(--mono);font-weight:700;font-size:.75rem;line-height:1.5;color:#55595f}
.field-error{margin:.6rem 0 0;font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--dark);background:var(--face2);border-left:6px solid var(--dark);border-radius:6px;padding:.5rem .7rem}
.field-error[hidden]{display:none}
.field-error::before{content:"⚠ "}

.form-page .btn,.order-page .btn{background:var(--dark);color:var(--face);box-shadow:0 6px 0 var(--mid)}
.form-page .btn[type="submit"]{width:100%;min-height:3.4rem;font-size:1.05rem}
.form-page .btn:disabled{opacity:.6;cursor:progress;transform:none}
.form-page .btn:active,.order-page .btn:active{box-shadow:0 1px 0 var(--mid)}
@media(hover:hover) and (pointer:fine){.form-page .btn:hover,.order-page .btn:hover{box-shadow:0 10px 0 var(--mid)}}
.order-page .btn-secondary{background:var(--face);color:var(--dark);box-shadow:0 6px 0 var(--slate);min-height:2.75rem;padding:.4rem 1rem;font-size:.8rem}
.form-page #form-status{min-height:1.2em;margin-top:1rem}

.status-block{border-top:2px dashed var(--mid);padding-top:1.4rem;margin-top:1.4rem}
.status-title{margin:0 0 .5rem;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1;text-transform:uppercase}
.status-text{margin:0 0 1rem;font-family:var(--mono);font-weight:700;font-size:.85rem;line-height:1.55}
.sim-banner{background:var(--dark);color:var(--face);font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-align:center;padding:.55rem .8rem;border-radius:10px;margin-bottom:1rem}
.pix-code{display:block;width:100%;font-family:var(--mono);font-weight:500;font-size:.62rem;line-height:1.45;color:#5a5f68;background:#fff;border:2px solid var(--dark);border-radius:10px;padding:.55rem .7rem;overflow-wrap:anywhere;word-break:break-all;white-space:pre-wrap;max-height:4.6rem;overflow-y:auto}
.qr-wrapper{width:13rem;max-width:100%;aspect-ratio:1/1;margin:0 auto 1.2rem;background:#fff;border:3px solid var(--dark);border-radius:16px;padding:.6rem;box-shadow:0 6px 0 var(--slate)}
.qr-wrapper svg,.qr-wrapper img{width:100%;height:100%}
.secret-field{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.secret-value{flex:1 1 14rem;min-width:0;max-width:100%;font-family:var(--mono);font-weight:700;background:#fff;border:3px solid var(--dark);border-radius:12px;padding:.6rem .8rem;overflow-wrap:anywhere;word-break:break-all}
.copy-feedback{margin:.5rem 0 0;font-family:var(--mono);font-weight:700;font-size:.75rem;color:#55595f;min-height:1.2em}
.spinner{display:inline-block;width:1rem;height:1rem;border:3px solid var(--face2);border-top-color:var(--dark);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{border-top-color:var(--face2)}}
/* Minha conta (/conta/) */
.field-label{display:block;margin-bottom:.45rem;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.google-btn{gap:.6rem;margin-top:.4rem}
.google-g{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;color:var(--dark);font-family:var(--sans);font-weight:800;font-size:.85rem;border:2px solid var(--dark)}
.account-profile{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:2px dashed var(--mid)}
.account-profile strong{font-family:var(--mono);font-size:1rem;overflow-wrap:anywhere}
.account-profile .field-hint{margin-top:.2rem;overflow-wrap:anywhere}
.account-orders{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1rem}
.account-order{background:#fff;border:2px solid var(--dark);border-radius:14px;padding:1rem 1.1rem}
.account-order-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.account-order-head strong{font-family:var(--mono);font-size:.9rem}
.account-badge{font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;background:var(--face2);color:var(--dark)}
.account-badge[data-status="DELIVERED"]{background:var(--lime);border:1.5px solid var(--dark)}
.account-order-body{margin-top:.9rem}
.account-order-body .field{margin-bottom:.9rem}
.account-hint{margin-top:1rem;text-align:center}
.account-hint a{color:var(--dark);text-decoration:underline;text-underline-offset:2px}
#account > .status-block:first-child{border-top:0;padding-top:0;margin-top:0}
.text-input{display:block;width:100%;background:#fff;color:var(--dark);border:3px solid var(--dark);border-radius:14px;box-shadow:0 4px 0 var(--slate);font:700 1rem var(--mono);padding:.85rem 1rem}
.text-input:focus-visible{outline:3px solid var(--dark);outline-offset:3px}
.field-optional{font-weight:400;text-transform:none;letter-spacing:0;color:#55595f}
.account-order-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.account-badge[data-status="EXPIRED"]{background:transparent;border:1.5px dashed var(--mid);color:#55595f}
.account-badge[data-status="PENDING"]{background:var(--face);border:1.5px solid var(--dark)}
.account-credentials{margin-bottom:.4rem}
.terms{line-height:1.6}
.terms h2{margin:2rem 0 .6rem;font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.15;text-transform:uppercase}
.terms p,.terms ul{margin:0 0 .9rem}
.terms ul{padding-left:1.2rem}
.terms-consent{margin-top:1rem;text-align:center}
.terms-consent a{color:inherit;text-decoration:underline}
.form-page .btn-simulate{width:100%;margin-top:.8rem;min-height:3rem;background:#f5d90a;color:var(--dark);border:2px dashed var(--dark);box-shadow:none}
.form-page .btn-simulate[hidden]{display:none}

/* Checkout compacto: resumo, formulário e botão de pagar mais próximos, sem
   encolher os inputs (alvos de toque continuam com ~3rem). */
.form-page .section-heading{margin-bottom:.9rem;padding-bottom:.8rem}
.form-page .order-summary{margin-bottom:1.3rem}
.form-page .summary-row{padding-block:.45rem}
.form-page .field{margin-bottom:1rem}
.form-page .field label{margin-bottom:.35rem}
.form-page .field-hint,.form-page .field-error{margin-top:.4rem}
.form-page .terms-consent{margin-top:.8rem}
.form-page #form-status{margin-top:.6rem}
/* Botão de pagar no verde-limão da landing (mesmo par de cores do CTA). */
.form-page .btn-pay{margin-top:.3rem;background:var(--lime);color:var(--dark);border-color:var(--dark);box-shadow:0 6px 0 var(--lime-deep)}
.form-page .btn-pay:active{box-shadow:0 1px 0 var(--lime-deep)}
.form-page .btn-pay:focus-visible{outline:3px solid var(--dark);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.form-page .btn-pay:hover{background:var(--lime-hi);box-shadow:0 10px 0 var(--lime-deep)}}
/* Convite para entrar com Google na página do pedido (depois da entrega). */
.order-page .account-invite{margin-top:1.2rem;padding-top:1.2rem;border-top:2px dashed var(--mid)}
.order-page .account-invite[hidden]{display:none}
.order-page .account-invite a{color:var(--dark);text-decoration:underline;text-underline-offset:2px}