/* Conta Stripe por pedido — prévia interna (2026-10-17). Só carrega para a prévia, com a regra do cartão
   ligada (StripeContaPorPedido::enfileirar). Mockup aprovado: https://claude.ai/artifact/N8933DyorZs8dkix8igU2b */

.boom-express-checkout-doc { margin-top: var(--space-6); }
.boom-field__hint[hidden] { display: none; }

/* "ou continue SEM CPF/CNPJ:", a dica do campo da carteira, logo acima dos botões (opção C do mockup
   3P7xGuEo5D3JAGqWvMG5q5, 19/10): maior, seta para os botões e o "SEM" na cor da marca. Vale por cima do
   .boom-field__hint (2xs, cinza) e fica também com o número inválido: o erro vem logo abaixo do campo, antes dela. */
.boom-express-checkout-semdoc { margin: var(--space-6) 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.35; color: var(--color-text-primary); }
.boom-express-checkout-semdoc b { font-weight: inherit; color: var(--color-text-brand); }
.boom-express-checkout-semdoc i { flex-shrink: 0; font-size: 1.15em; color: var(--color-text-brand); }
.boom-express-checkout-doc .boom-field__hint.boom-express-checkout-semdoc { margin: var(--space-5) 0 var(--space-4); align-items: center; font-size: var(--text-md); line-height: 1.35; color: var(--color-text-primary); }
/* A frase fica colada nos botões (19/10, pedido dele): o plugin escreve style="margin-top: 1em" no contêiner dos botões
   (class-wc-stripe-express-checkout-element.php), e só !important vence estilo escrito no HTML. */
.boom-express-checkout-card #wc-stripe-express-checkout-element { margin-top: 0 !important; }
/* Botões da carteira com a ponta direita cortada no Safari do macOS com barra de rolagem fixa (e no Windows): o Stripe
   desenha o botão e, quando a barra aparece, a página estreita ≈17 px sem ele recalcular (medido 19/10; iPhone e
   Android, de barra flutuante, ficam certos). A página reserva o espaço da barra desde o início: a largura não muda.
   scrollbar-gutter, e não overflow-y: scroll — com overflow no html, o body { overflow: hidden } com que o tema trava a
   rolagem dos popups deixaria de valer para a página. */
html { scrollbar-gutter: stable; }
/* "carregando pagamento rápido" por cima do campo e da frase até os botões da carteira aparecerem (19/10, pedido dele):
   o JS (cobrirCampoAoCarregar) põe o botão de carregando dentro do bloco do campo; aqui ele cobre o bloco inteiro. */
.boom-express-checkout-doc.tem-carregando { position: relative; }
.boom-express-checkout-doc > .boom-express-checkout-loading-button { position: absolute; inset: 0; z-index: 6; margin: 0; height: auto; box-shadow: 0 0 0 var(--space-3) var(--color-bg-surface); }
/* Enquanto a conta é decidida em segundo plano: camada escura só sobre os botões da carteira (filha do contêiner,
   acima do iframe do Stripe). O resto da página segue livre. */
.boom-express-checkout-ocupado { position: absolute; inset: 0; z-index: 6; border-radius: var(--radius-md); background: rgba(15, 11, 26, .55); cursor: progress; }
.boom-express-checkout-ocupado[hidden] { display: none; }

/* Confirmação do "pagar" com CPF/CNPJ inválido (popup). */
.boom-stripe-fundo { z-index: 90; }
.boom-express-checkout-close { position: absolute; top: var(--space-5); right: var(--space-5); width: 32px; height: 32px; border: 0; border-radius: var(--radius-pill); background: var(--color-bg-surface-violet-50); color: var(--color-text-brand); font-size: 20px; line-height: 1; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.boom-express-checkout-confirm { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-bg-warning); border: 1px solid var(--color-border-warning); }
.boom-express-checkout-confirm[hidden] { display: none; }
.boom-express-checkout-confirm__title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-warning); }
.boom-express-checkout-confirm__text { margin: 0; font-size: var(--text-2xs); line-height: 1.45; color: var(--color-text-primary); }
.boom-express-checkout-confirm__actions { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.boom-express-checkout-confirm__actions[hidden] { display: none; }
.boom-express-checkout-confirm[data-estado="ok"] { background: var(--color-bg-success); border-color: var(--color-border-success); }
.boom-express-checkout-confirm[data-estado="ok"] .boom-express-checkout-confirm__title { color: var(--color-text-success, #15803d); }

/* Popup do "pagar" com CPF/CNPJ inválido. */
.boom-checkout-doc-popup { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; padding: var(--space-7); }
.boom-checkout-doc-popup[hidden] { display: none; }
.boom-checkout-doc-popup__card { position: relative; width: min(420px, 100%); max-height: calc(100% - 2 * var(--space-7)); overflow: auto; padding-top: calc(var(--card-padding) + 28px); }
.boom-checkout-doc-popup__close { display: inline-flex; }
.boom-checkout-doc-popup__card > .boom-express-checkout-confirm { margin-top: 0; }
.boom-checkout-doc-popup__acao { margin-top: var(--space-6); }

/* Painel da prévia interna: a conta Stripe deste botão e o "testar como". */
.boom-previa-stripe { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: #1f1630; color: #fff; font-size: var(--text-3xs, 11px); line-height: 1.45; display: grid; gap: var(--space-3); }
.boom-previa-stripe__linha { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.boom-previa-stripe__tag { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: #d8c7ff; }
.boom-previa-stripe__conta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 800; }
.boom-previa-stripe__conta[data-c="empresa"] { background: #86efac; color: #0b2b16; }
.boom-previa-stripe__conta[data-c="pessoa_fisica"] { background: #fcd34d; color: #3a2a00; }
.boom-previa-stripe__motivo { margin: 0; color: #d8c7ff; }
.boom-previa-stripe__testar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.boom-previa-stripe__testar select { font: inherit; font-weight: 600; color: #1f1630; background: #fff; border: 0; border-radius: 6px; padding: 3px 6px; }