:root{--event-primary:#15803d;--event-secondary:#0b2b1d;--event-accent:#facc15;--event-accent-text:#15120a;--ink:#f4f8f5;--muted:#91a198;--line:#405249;--hero-image-desktop:linear-gradient(145deg,#0b2b1d,#071a12);--hero-image-mobile:var(--hero-image-desktop);--discount:#34d399;--discount-bg:#12362a}
*{box-sizing:border-box}
html{width:100%;min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:0;min-height:100vh;color:var(--ink);background:linear-gradient(145deg,color-mix(in srgb,var(--event-secondary) 72%,#050807),#050807 72%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
input,select,button{font:inherit}
.icon-lock{display:inline-flex;flex:0 0 auto;width:13px;height:13px}
.icon-lock svg{width:100%;height:100%;fill:currentColor}
.icon-info{display:inline-flex;flex:0 0 auto;width:15px;height:15px;margin-top:1px;color:var(--event-accent)}
.icon-info svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* ================================================================
   PÁGINA — hero em tela cheia (imagem de fundo sangrando até a borda)
   com o card de compra flutuando na coluna direita. Nada de moldura
   arredondada/margem envolvendo a composição inteira. */
.page{position:relative;width:100%;min-height:100vh;display:grid;grid-template-columns:1fr;background-image:var(--hero-image-desktop);background-size:cover;background-position:center}
.page[hidden]{display:none!important}
.hero,.form-area{position:relative;z-index:1}
.hero{min-height:0;isolation:isolate}
.hero-content{position:relative;height:100%;padding:clamp(28px,4vw,60px);color:#fff}

/* -- Marca SH-Ticket, discreta e independente da arte configurada. -- */
.platform-brand{position:absolute;top:clamp(24px,3.6vw,48px);left:clamp(28px,4vw,60px);display:flex;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.32)}
.platform-brand-copy{display:flex;flex-direction:column}
.platform-brand-copy strong{font-size:clamp(21px,2vw,27px);font-weight:750;line-height:1;letter-spacing:-.04em}
.platform-brand-copy strong span{color:var(--event-accent)}
.platform-brand-copy small{margin-top:6px;color:rgba(255,255,255,.66);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* ================================================================
   FORM-AREA / CARD DE COMPRA — coluna direita, largura confortável,
   nem estreita nem exagerada. */
.form-area{display:flex;align-items:center;justify-content:center;padding:22px}
.ticket-form{position:relative;width:100%;max-width:500px;padding:20px 23px 18px;border:1px solid color-mix(in srgb,var(--event-primary) 30%,#2a3a32);border-radius:20px;background:linear-gradient(155deg,color-mix(in srgb,var(--event-secondary) 58%,#0d1c15),color-mix(in srgb,var(--event-secondary) 36%,#081009));box-shadow:0 24px 60px rgba(0,0,0,.4);transition:max-width .2s ease}
.ticket-form.no-pix:not(.is-step-2){max-width:460px}
.ticket-form.is-step-2{max-width:660px}

/* -- Indicador de etapas -- */
.step-indicator{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px}
.step-pill{display:inline-flex;align-items:center;gap:7px;color:#7c8d84;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;transition:color .15s}
.step-pill-num{position:relative;display:inline-grid;width:22px;height:22px;place-items:center;border:1.5px solid #4a5f54;border-radius:50%;color:#9eaea5;font-size:10px;transition:border-color .15s,color .15s,background .15s}
.step-pill.is-active{color:#fff}
.step-pill.is-active .step-pill-num{border-color:var(--event-accent);color:var(--event-accent-text);background:var(--event-accent)}
.step-pill-checkicon{display:none;width:11px;height:11px;color:var(--discount)}
.step-pill-checkicon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.step-pill.is-done .step-pill-num{border-color:#4a5f54;color:#9eaea5;background:transparent}
.step-pill.is-done .step-pill-digit{display:inline}
.step-arrow{flex:1 1 auto;height:1px;min-width:24px;background:#3a4a41;margin:0 2px}
.wizard-step[hidden]{display:none}

/* -- Etapa 1: um único fluxo vertical (sem segunda coluna). -- */
.checkout-single{display:flex;flex-direction:column}
.checkout-block{padding:11px 0}
.checkout-block+.checkout-block{border-top:1px solid rgba(145,161,152,.14)}
.checkout-block:first-child{padding-top:0}
.checkout-block[hidden]{display:none}
.checkout-block-title{margin:0 0 9px;color:#9fb0a6;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.checkout-block-note{display:block;margin-top:8px;color:#8b9c92;font-size:9.5px}

/* -- Bloco 1: Ingresso -- */
#quantidade{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ticket-line{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ticket-line-info{flex:1 1 auto;min-width:0}
.ticket-line-info strong{display:block;overflow:hidden;color:#f2f7f4;font-size:15px;font-weight:750;white-space:nowrap;text-overflow:ellipsis}
.ticket-line-info small{display:block;margin-top:4px;color:var(--event-accent);font-size:12.5px;font-weight:700}
.quantity-stepper{flex:0 0 auto;width:100px;height:34px;display:grid;grid-template-columns:31px 38px 31px;align-items:center;overflow:hidden;border:1px solid #405249;border-radius:9px;background:rgba(5,14,10,.28)}
.quantity-stepper button{height:100%;padding:0;border:0;color:#dce8e0;background:transparent;font-size:17px;line-height:1;cursor:pointer}
.quantity-stepper button:hover:not(:disabled){background:color-mix(in srgb,var(--event-primary) 25%,transparent)}
.quantity-stepper button:disabled{opacity:.28;cursor:not-allowed}
.quantity-stepper output{display:grid;height:100%;place-items:center;border-right:1px solid #33483e;border-left:1px solid #33483e;color:#fff;font-size:13px;font-weight:750}
.ticket-line-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:10px}
.ticket-line-subtotal{flex:0 0 auto;display:flex;align-items:baseline;gap:8px}
.ticket-line-subtotal>span{color:#8fa198;font-size:11px;font-weight:650}
.ticket-line-subtotal>strong{color:#fff;font-size:14px;font-weight:800}

/* -- Bloco 2: Cupom -- */
.coupon-box{min-width:0}
.coupon-fields{display:flex;gap:8px}
.coupon-fields[hidden]{display:none}
.coupon-fields input{min-width:0;flex:1;height:38px;padding:0 11px;border:1px solid #31433a;border-radius:9px;color:#fff;background:#16251f;font-size:12px;text-transform:uppercase}
.coupon-fields input::placeholder{color:#788b81;text-transform:none}
.coupon-fields button{flex:0 0 auto;height:38px;padding:0 18px;border:0;border-radius:9px;color:var(--event-accent-text);background:var(--event-accent);font-size:10.5px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.coupon-fields button:disabled{opacity:.6;cursor:not-allowed}
.coupon-applied{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:42px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--discount) 45%,#31433a);border-radius:9px;background:var(--discount-bg)}
.coupon-applied[hidden]{display:none}
.coupon-applied-icon{display:inline-flex;flex:0 0 auto;width:13px;height:13px;color:var(--discount)}
.coupon-applied-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.coupon-applied-code{color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em}
.coupon-applied-label{color:#9fe6c3;font-size:10.5px}
.coupon-applied-value{margin-left:auto;color:var(--discount);font-size:12.5px;font-weight:800}
.coupon-applied-remove{padding:0;border:0;color:#7fa392;background:transparent;font-size:10px;text-decoration:underline;cursor:pointer}
.coupon-box>.coupon-message{display:block;min-height:12px;margin-top:6px;color:#9eaea5;font-size:10px}
.coupon-message.ok{color:var(--discount)}
.coupon-message.erro{color:#ff8585}

/* -- Bloco 3: Forma de pagamento — só existe quando o evento tem
   desconto Pix ativo; sempre no formato compacto (linha grande do Pix
   em destaque + linha pequena do cartão), em qualquer largura de tela. -- */
.payment-radio-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.payment-choice[hidden]{display:none}
.payment-compact{display:flex;flex-direction:column;gap:10px}
.payment-compact-main,.payment-compact-alt{display:flex;cursor:pointer}
.payment-compact-main{align-items:center;gap:10px}
.payment-compact-main strong{color:#fff;font-size:21px;font-weight:850}
.payment-compact-main>span:last-child{color:#cdd8d1;font-size:12.5px;font-weight:650}
.payment-compact-badge{padding:3px 9px;border-radius:20px;background:var(--discount);color:#fff;font-size:9.5px;font-weight:850;letter-spacing:.01em}
.payment-compact-alt{align-items:flex-start;gap:10px}
.payment-compact-alt-body{display:flex;flex-direction:column;gap:3px}
.payment-compact-alt-line{color:#9eaea5;font-size:12.5px}
.payment-compact-alt-line strong{color:#c3d0c8;font-weight:750}
.payment-compact-alt:hover .payment-compact-alt-line strong{text-decoration:underline}
.payment-compact-alt small{color:#728177;font-size:9.5px;line-height:1.4}
.payment-compact-dot{flex:0 0 auto;display:inline-block;border-radius:50%;border:2px solid #4a5f54;background:transparent;transition:border-color .15s,background .15s}
.payment-compact-main .payment-compact-dot{width:17px;height:17px}
.payment-compact-alt .payment-compact-dot{width:12px;height:12px;margin-top:2px}
.payment-choice:has(#radioFormaPix:checked) .payment-compact-main .payment-compact-dot{border-color:var(--event-accent);background:var(--event-accent)}
.payment-choice:has(#radioFormaOutras:checked) .payment-compact-alt .payment-compact-dot{border-color:var(--event-accent);background:var(--event-accent)}

.payment-fixed{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--event-accent) 40%,#31433a);border-radius:12px;background:color-mix(in srgb,var(--event-accent) 12%,#16251f)}
.payment-fixed[hidden]{display:none}
.payment-pill-icon{display:inline-flex;width:18px;height:18px;color:var(--event-accent)}
.payment-pill-icon svg{width:100%;height:100%}
.payment-pill-text{color:#dce6df;font-size:12px;font-weight:700}
.payment-fixed-row{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:9px;min-width:0}
.payment-fixed-row strong{color:var(--event-accent);font-size:14px;font-weight:850}
.payment-pill-hint{display:block;margin-top:5px;color:#91a198;font-size:9px}
.payment-fixed .payment-pill-hint{flex-basis:100%;margin-top:0}

.payment-info-box{display:flex;align-items:flex-start;gap:7px;margin-top:10px;color:#8b9c92;font-size:10px;line-height:1.4}
.payment-info-box[hidden]{display:none}
.payment-info-box strong{color:#b7c4bd;font-weight:750}
.payment-info-box .icon-info{opacity:.8}
.payment-info-text{flex:1 1 auto;min-width:0}

/* -- Bloco 4: Resumo do pedido — caixa com borda sutil ao redor das
   linhas + total (o único "card dentro do card" da Etapa 1). -- */
.resumo-box{padding:11px 14px;border:1px solid rgba(145,161,152,.22);border-radius:12px;background:rgba(255,255,255,.02)}
.summary-lines{display:flex;flex-direction:column;gap:10px}
.summary-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#9eaea5;font-size:12.5px}
.summary-line[hidden]{display:none}
.summary-line strong{color:#dfe9e3;font-weight:750}
.summary-line.is-discount strong{color:var(--discount)}
.summary-line-tag{color:#7c8d84;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.summary-total{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(145,161,152,.24)}
.summary-total>span:first-child{display:block;color:#8fa198;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.summary-total strong{display:block;margin-top:4px;color:var(--event-accent);font-size:25px;font-weight:850;line-height:1.05}
.summary-total .summary-total-badge{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 9px;border-radius:20px;background:var(--discount);color:#fff;font-size:10px;font-weight:850}
.summary-total .summary-total-badge span{color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none}
.summary-total-badge[hidden]{display:none}
.summary-total .summary-total-note{display:inline-block;margin-top:8px;margin-left:6px;color:#cdd8d1;font-size:12px;font-weight:650}
.summary-total-note[hidden]{display:none}

/* -- Botão principal + nota de segurança (fora da caixa do resumo, mas
   ainda dentro do fluxo único da Etapa 1). -- */
.main-button{width:100%;min-height:46px;margin-top:15px;padding:0 15px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:10px;color:var(--event-accent-text);background:var(--event-accent);cursor:pointer;font-size:13px;font-weight:850;letter-spacing:.01em}
.main-button:hover{background:color-mix(in srgb,var(--event-accent) 88%,#fff)}
.main-button:disabled{opacity:.65;cursor:not-allowed}
.main-button .icon-lock{width:14px;height:14px}
.button-main-text{white-space:nowrap}
.secure-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;color:#8b9c92;font-size:10px;text-align:center}
.secure-note .icon-lock{color:var(--event-accent)}
.message{min-height:17px;margin-top:8px;color:#94a49b;font-size:11px;font-weight:700;text-align:center}
.message.ok{color:#54df6a}
.message.erro{color:#ff8585}

/* ================================================================
   ETAPA 2 — 2 colunas (resumo | dados), mesma identidade visual da
   Etapa 1. Sem linha de destaque separando as colunas: só espaço. */
.checkout-grid-step2{display:flex;flex-direction:column;gap:22px}
.checkout-recap-col{display:flex;flex-direction:column}
.checkout-summary-label{display:block;color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.checkout-summary-label-row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:15px}
.cart-recap-edit{flex:0 0 auto;padding:0;border:0;color:var(--event-accent);background:transparent;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.checkout-recap-col .summary-total{margin-top:auto;padding-top:16px}

.checkout-fields-col{min-width:0}
.checkout-fields-col>.checkout-summary-label{display:block;margin-bottom:5px}
.checkout-fields-sub{margin:0 0 14px;color:#8fa198;font-size:11.5px}.fields-grid{display:flex;flex-direction:column;gap:10px}
.field{min-width:0}
.field label{display:block;margin:0 0 6px;color:#dce6df;font-size:11px;font-weight:800}
.field input,.field select{width:100%;height:38px;padding:0 12px;border:1px solid #31433a;border-radius:9px;outline:none;color:#f5f8f6;background:#16251f;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:#788b81}
.field input:focus,.field select:focus{border-color:var(--event-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--event-primary) 22%,transparent)}
.input-check-wrap{position:relative}
.input-check-wrap input{padding-right:36px}
.email-check{display:none;position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--event-accent);font-weight:900}
.email-field.email-ok .email-check{display:block}
.email-field.email-erro input{border-color:#c94d4d}
.email-delivery-note{display:block;margin-top:5px;color:#83958b;font-size:9px;line-height:1.2}

.accept-row{display:flex;align-items:flex-start;gap:8px;margin-top:14px;color:#aab8b0;font-size:10.5px;line-height:1.35;cursor:pointer}
.accept-row input{width:16px;height:16px;margin:0;margin-top:1px;accent-color:var(--event-primary);flex:0 0 auto}
.terms-link{padding:0;border:0;background:transparent;color:var(--event-accent);font-weight:750;font-size:inherit;font-family:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.checkout-fields-col .main-button{margin-top:15px}
.checkout-fields-col .secure-note{margin-top:12px}
.payment-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin-top:8px;color:#728177;font-size:9.5px;text-align:center}
.payment-note .mp-brand{display:inline-flex;align-items:center;justify-content:center;color:inherit}
.mp-brand img{display:block;max-width:88px;max-height:20px;object-fit:contain}
.mp-text-fallback{font-size:9.5px;font-weight:800;color:#8b9c92}
.mp-brand img[hidden],.mp-text-fallback[hidden]{display:none}

/* -- Modal de termos -- */
.terms-modal{padding:0;border:0;border-radius:16px;width:min(560px,92vw);max-height:min(640px,84vh);margin:auto;background:linear-gradient(150deg,color-mix(in srgb,var(--event-secondary) 60%,#102019),color-mix(in srgb,var(--event-secondary) 40%,#09130f));color:#f2f7f4;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.terms-modal::backdrop{background:rgba(3,8,6,.72);backdrop-filter:blur(3px)}
.terms-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid rgba(145,161,152,.18)}
.terms-modal-head h3{margin:0;color:#fff;font-size:16px;font-weight:850}
.terms-modal-close{flex:0 0 auto;padding:0;border:0;width:28px;height:28px;border-radius:50%;color:#c9d6ce;background:rgba(255,255,255,.07);font-size:13px;cursor:pointer}
.terms-modal-close:hover{background:rgba(255,255,255,.14)}
.terms-modal-body{padding:18px 20px;overflow-y:auto;max-height:min(420px,52vh);color:#c9d6ce;font-size:12.5px;line-height:1.7;white-space:pre-wrap}
.terms-modal-foot{padding:14px 20px 20px}
.terms-modal-foot .main-button{width:100%;margin-top:0}
@media(max-width:560px){.terms-modal{width:94vw}}

/* ================================================================
   EVENTO INVÁLIDO / CARREGANDO */
.evento-erro{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;color:#fff;background:linear-gradient(145deg,var(--event-secondary),#050807)}
.evento-erro[hidden]{display:none}
.evento-erro-card{width:min(420px,92vw);padding:30px 26px;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.06);box-shadow:0 22px 70px rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.evento-erro-card h1{margin:0;font-size:20px;line-height:1.3;font-weight:750}
.evento-erro-card p{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.78);line-height:1.45}

body.config-loading .page{opacity:0;visibility:hidden;pointer-events:none}
.config-loader{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center;padding:24px;color:#fff;background:linear-gradient(145deg,var(--event-secondary),#050807)}
.config-loading .config-loader{display:flex}
.config-loader-card{text-align:center}
.config-loader-card strong,.config-loader-card span{display:block}
.config-loader-card strong{margin-top:14px;font-size:24px;font-weight:650}
.config-loader-card span{margin-top:6px;color:rgba(255,255,255,.7);font-size:13px}
.config-loader-spinner{width:32px;height:32px;margin:auto;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================================================================
   FAIXA MOBILE (SH-Ticket + selo) — só existe <=900px; escondida em
   desktop (a marca já aparece dentro do hero em telas largas). */
.mobile-topbar{display:none}

/* ================================================================
   DESKTOP >=901px */
@media(min-width:901px){
  html,body{height:100%;overflow:hidden}
  .page{height:100vh;grid-template-columns:minmax(0,1fr) minmax(520px,700px)}
  .form-area{padding:20px 28px 20px 20px}
  .ticket-form{overflow:visible}
  .checkout-grid-step2{flex-direction:row;gap:26px}
  .checkout-recap-col{flex:0 0 auto;width:40%}
  .checkout-fields-col{flex:1 1 auto;min-width:0}
}
@media(min-width:901px) and (max-height:800px){
  .ticket-form{padding:17px 21px 15px}
  .step-indicator{margin-bottom:11px}
  .checkout-block{padding:9px 0}
  .checkout-block-title{margin-bottom:7px}
  .coupon-box>.coupon-message{min-height:9px;margin-top:3px}
  .main-button{min-height:44px;margin-top:12px}
  .secure-note{margin-top:8px}
}

/* ================================================================
   MOBILE <=900px — checkout imediatamente abaixo da marca. A arte
   permanece como background da pagina, sem reservar um hero vazio. */
@media(max-width:900px){
  body{background:#050807}
  .page{grid-template-columns:1fr;align-content:start;background-image:var(--hero-image-mobile)}
  .hero{display:none}
  .platform-brand{display:none}

  .mobile-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:9px 16px;background:#040a07;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-topbar-brand{display:flex;align-items:baseline;gap:7px;color:#fff;min-width:0}
  .mobile-topbar-brand strong{font-size:16px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
  .mobile-topbar-brand strong span{color:var(--event-accent)}
  .mobile-topbar-brand small{color:rgba(255,255,255,.62);font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
  .form-area{align-items:flex-start;padding:14px 16px 30px}
  .ticket-form,.ticket-form.no-pix:not(.is-step-2),.ticket-form.is-step-2{max-width:560px;padding:19px 17px 17px;border-radius:17px;scroll-margin-top:53px}
  .checkout-block-title{font-size:11px}
  .payment-compact-main strong{font-size:20px}
  .summary-total strong{font-size:26px}
}
@media(max-width:420px){
  .ticket-form,.ticket-form.no-pix:not(.is-step-2),.ticket-form.is-step-2{padding:18px 14px 16px}
  .form-area{padding-inline:13px}
  .coupon-fields button{padding-inline:14px}
}