/* Nigro — Pagamentos. Tokens --ngr-* vêm do style.css do tema. */
.ngr-pg-info { padding: 12px 14px; background: var(--ngr-bg, #F4F5F7); border-radius: var(--ngr-radius, 6px); font-size: 14px; color: var(--ngr-text, #555); }
.ngr-pg-info p { margin: 0 0 6px; }
.ngr-pg-desconto { color: var(--ngr-success, #128737); }

.ngr-pg-pix, .ngr-pg-boleto, .ngr-pg-cartao-ok { background: var(--ngr-surface, #fff); border: 1px solid var(--ngr-border, #E4E7EB); border-radius: var(--ngr-radius, 6px); padding: 24px; margin: 0 0 32px; }
.ngr-pg-titulo { font-family: var(--wd-title-font, Poppins, sans-serif); font-size: 22px; color: var(--ngr-title, #242424); margin: 0 0 8px; }
.ngr-pg-pix__grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; margin-top: 16px; }
.ngr-pg-pix__qr { width: 220px; height: 220px; border: 1px solid var(--ngr-border, #E4E7EB); border-radius: var(--ngr-radius, 6px); }
.ngr-pg-pix__codigo label { display: block; font-weight: 600; margin-bottom: 6px; }
.ngr-pg-pix__codigo textarea, #ngr-pg-boleto-linha { width: 100%; font-family: monospace; font-size: 12px; word-break: break-all; border: 1px solid var(--ngr-border, #E4E7EB); border-radius: var(--ngr-radius, 6px); padding: 10px; margin-bottom: 10px; }
.ngr-pg-status { margin-top: 16px; padding: 10px 12px; border-radius: var(--ngr-radius, 6px); background: var(--ngr-primary-soft, rgba(31,52,84,.08)); }
.ngr-pg-status.is-ok { background: rgba(18,135,55,.1); color: var(--ngr-success, #128737); font-weight: 600; }
.ngr-pg-status.is-erro { background: rgba(214,54,56,.08); color: var(--ngr-error, #d63638); }
.ngr-pg-contador { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 640px) { .ngr-pg-pix__grid { grid-template-columns: 1fr; } .ngr-pg-pix__qr { margin: 0 auto; } }

/* Etapa Pagamento — cartão. Número em linha cheia com a bandeira dentro do campo,
   validade + CVV lado a lado; os iframes do Secure Fields ocupam o .ngr-pg-iframe. */
.ngr-pg-cartao { display: grid; gap: 16px; }
.ngr-pg-cartao .ngr-pg-campo,
.ngr-pg-cartao .ngr-pg-campo.ngr-field { display: block; margin: 0; }
.ngr-pg-cartao .ngr-pg-campo label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--ngr-title, #242424); }
.ngr-pg-cartao .ngr-pg-iframe { position: relative; height: 46px; padding: 0 14px; border: 1px solid #8F99A6; border-radius: var(--ngr-radius, 6px); background: #fff; transition: border-color .15s ease, background-color .15s ease; }
.ngr-pg-cartao .ngr-pg-iframe iframe { display: block; width: 100%; height: 100%; }
.ngr-pg-cartao .ngr-pg-iframe:hover { border-color: #5F6B7A; }
.ngr-pg-cartao .ngr-pg-iframe.is-focus { border-color: var(--ngr-primary, #1F3454); outline: 2px solid var(--ngr-primary, #1F3454); outline-offset: 1px; }
.ngr-pg-cartao .ngr-pg-iframe.is-invalid { border-color: var(--ngr-error, #d63638); background: #FFF6F6; }
.ngr-pg-cartao .ngr-pg-campo--numero { position: relative; }
.ngr-pg-cartao .ngr-pg-campo--numero .ngr-pg-iframe { padding-right: 60px; }
.ngr-pg-cartao .ngr-pg-bandeira { position: absolute; top: 36px; right: 14px; height: 22px; width: auto; max-width: 40px; object-fit: contain; }
.ngr-pg-cartao .ngr-pg-bandeira[hidden] { display: none; }
.ngr-pg-cartao .ngr-pg-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ngr-pg-cartao .ngr-pg-campo input.input-text,
.ngr-pg-cartao select { width: 100%; height: 46px; min-height: 46px; margin: 0; padding: 0 14px; border: 1px solid #8F99A6; border-radius: var(--ngr-radius, 6px); background-color: #fff; box-shadow: none; font-size: 16px; color: var(--ngr-title, #242424); transition: border-color .15s ease; }
.ngr-pg-cartao select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; text-overflow: ellipsis; }
.ngr-pg-cartao .ngr-pg-campo input.input-text:hover,
.ngr-pg-cartao select:hover { border-color: #5F6B7A; }
.ngr-pg-cartao .ngr-pg-campo input.input-text:focus,
.ngr-pg-cartao select:focus { border-color: var(--ngr-primary, #1F3454); outline: 2px solid var(--ngr-primary, #1F3454); outline-offset: 1px; }
.ngr-pg-cartao .ngr-pg-campo.is-invalid input.input-text { border-color: var(--ngr-error, #d63638); background-color: #FFF6F6; }
.ngr-pg-cartao .ngr-pg-campo.is-invalid::after { content: "Confira este campo."; display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ngr-error, #d63638); }
.ngr-pg-erro { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ngr-error, #d63638); }
.ngr-pg-erro:not([hidden])::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--ngr-error, #d63638); color: #fff; font-size: 11px; vertical-align: -3px; }
.ngr-pg-sdk-erro:not([hidden]) { padding: 10px 12px; border-radius: var(--ngr-radius, 6px); background: #FFF6F6; }
@media (max-width: 380px) { .ngr-pg-cartao .ngr-pg-linha { gap: 12px; } }
.ngr-pg-cancelar-wrap { margin: 12px 0 0; font-size: 14px; color: var(--ngr-muted, #6B7280); }
.ngr-pg-cancelar { background: none; border: 0; padding: 0; color: var(--ngr-error, #d63638); text-decoration: underline; cursor: pointer; font: inherit; }
.ngr-pg-cancelar:disabled { opacity: .6; cursor: wait; }