.scx-fieldset, .scx-field { margin: 14px 0; }
.scx-row { display: flex; flex-wrap: wrap; gap: 16px; }
.scx-col { flex: 1 1 220px; }
.scx-error { color: #b00020; font-size: 12px; margin-top: 6px; }
.scx-block-placeholder { padding: 12px; border: 1px dashed #ccc; background: #fafafa; }

/* radios alinhados */
.scx-radio-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.scx-person-type input[type="radio"] { vertical-align: middle; margin-top: 0; }

/* ========================================================================
   SCX – Modal de Termos (robusto)
   - cobre 100% da tela
   - fica acima de QUALQUER elemento do tema/checkout
   - ignora inline style display:none via [aria-hidden="false"]
   - bloqueia scroll do fundo e centraliza a janela
   ======================================================================== */

/* Estado VISÍVEL: se JS trocar aria-hidden para false, mostramos a modal
   (isso sobrepõe o inline style "display:none"). */
.scx-terms-modal[aria-hidden="false"] {
  display: block !important;
}

/* Contêiner da modal (overlay) — ocupa a viewport inteira e cria novo contexto. */
.scx-terms-modal {
  position: fixed !important;
  inset: 0 !important;               /* top/right/bottom/left: 0 */
  width: 100vw !important;
  height: 100dvh !important;         /* usa dvh p/ mobile */
  z-index: 2147483646 !important;    /* muito acima do tema/Stripe/etc */
  pointer-events: none;              /* só ativa quando aberta (dialog/backdrop) */
  isolation: isolate;                /* evita interferência de z-index externos */
}

/* Backdrop escuro — sempre por baixo do diálogo, mas acima do site inteiro. */
.scx-terms-modal .scx-terms-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(0,0,0,.64) !important; /* escurecimento agradável */
  z-index: 2147483646 !important;
  pointer-events: auto;              /* recebe clique para fechar por fora */
  -webkit-backdrop-filter: blur(0px); /* compat: não borrar, só garante camada */
  backdrop-filter: blur(0px);
}

/* Janela (conteúdo) — centralizada, responsiva e sempre acima do backdrop. */
.scx-terms-modal .scx-terms-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(840px, 92vw) !important;
  max-height: min(80vh, calc(100dvh - 64px)) !important;
  overflow: auto !important;
  background: #fff !important;
  color: #111 !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
  z-index: 2147483647 !important;    /* acima de tudo, inclusive header sticky */
  padding: 22px 22px 18px !important;
  pointer-events: auto;              /* ativa interação */
  scrollbar-gutter: stable both-edges;
}

/* Conteúdo interno (opcional: só refinamento). */
.scx-terms-modal .scx-terms-content {
  line-height: 1.55;
  font-size: 15px;
}

/* Botão fechar (seu markup já tem .scx-terms-close). */
.scx-terms-modal .scx-terms-close {
  position: sticky;                  /* gruda no topo enquanto rola */
  bottom: 0;                         /* fallback em alguns navegadores */
  display: inline-block;
  margin-top: 18px;
  margin-left: auto;
  padding: 10px 16px;
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

/* Acessibilidade de foco: destaque claro ao tabular. */
.scx-terms-modal .scx-terms-dialog :where(a, button, [role="button"], [tabindex]) {
  outline-offset: 2px;
}
.scx-terms-modal .scx-terms-dialog :where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #1e40af;
}

/* Evita que elementos “sticky” do tema passem por cima quando a modal abrir.
   Usa :has() (suportado nos principais navegadores modernos).
   Se a sua JS adiciona body.style.overflow='hidden', também cobre esse caso. */
body:has(.scx-terms-modal[aria-hidden="false"]) header,
body[style*="overflow: hidden"] header,
body:has(.scx-terms-modal[aria-hidden="false"]) .site-header,
body[style*="overflow: hidden"] .site-header,
body:has(.scx-terms-modal[aria-hidden="false"]) .sticky,
body[style*="overflow: hidden"] .sticky {
  z-index: 1 !important;
}

/* Em dispositivos muito baixos, ajusta o topo para não colar na barra do SO. */
@media (max-height: 540px) {
  .scx-terms-modal .scx-terms-dialog {
    top: 52% !important;
  }
}

/* Oculta a modal na impressão. */
@media print {
  .scx-terms-modal { display: none !important; }
}