/* Digitalmart Hub Checkout — CSS EXCLUSIVO das páginas de checkout.
 *
 * O que renderiza DENTRO do drawer (mini-cart, totais, shipping bar, etc)
 * mora em cart.css. Aqui só vive o que NUNCA aparece fora de cart/
 * checkout/order-pay/thank-you:
 *
 *   - Layout 3-step (form-checkout, review-order)
 *   - Form fields (input, label floating, select)
 *   - Gateways (Pix QR, cartão, boleto displays)
 *   - Reviews ("Quem comprou recomenda")
 *   - Thank-you / order-received
 *   - Trust block, pending payment polling UI
 *   - Cart page (não-drawer)
 *
 * Loading: apenas em is_cart() || is_checkout() || is_order_received_page()
 * || is_checkout_pay_page() — gated em Assets.php.
 */

/* Anti-FOIT defensivo: se o tema declarou @font-face Inter SEM
   `font-display:swap`, FOIT bloqueia render do checkout até a fonte
   carregar (até 3s em 3G). Override re-declarando Inter com swap
   — browser usa a primeira @font-face matched + nossa flag substitui.
   Sem isso, LCP regride drasticamente em rede ruim BR. Se Inter não
   existe no tema, declaração é no-op (sem src local = ignorado).
   (Audit round 3 — 4/5 consenso E3-H5 + 2.5.) */

@font-face {
	font-family: 'Inter';
	font-display: swap;
	font-weight: 100 900;
	font-style: normal;
	src: local('Inter'), local('Inter-Regular');
}

.dmhub-checkout * { box-sizing: border-box; }

.dmhub-checkout {
	font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
	line-height: 1.6;
}

/* min-height: 100dvh fallback 100vh — em iOS Safari, 100vh nao desconta a
   barra superior URL (footer fica empurrado pra fora do viewport). dvh
   (dynamic viewport units) recalcula quando UI do browser muda. iOS 15.4+
   e Chrome Android 108+ — ~96% cobertura BR. Fallback garante render OK
   em browsers antigos (footer overflow visual aceitavel vs broken layout). */

.dmhub-page__shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: -webkit-fill-available; /* Safari iOS 15.0-15.3: dvh ainda nao disponivel; este desconta a barra de URL. */
	min-height: 100dvh;
}

/* Tap-highlight transparente em TODOS os elementos interativos. iOS
   Safari E Chrome Mobile/Android por default mostram flash azul no
   tap em buttons/links/summary/labels — visual feio e "amador".
   Aplicado uma vez globalmente em vez de por componente.
   (Safari audit H1 + Chrome mobile feedback do merchant.) */

.dmhub-checkout a,
.dmhub-checkout button,
.dmhub-checkout summary,
.dmhub-checkout label,
.dmhub-checkout [role="button"],
.dmhub-mobile-cta button,
.dmhub-mobile-cta a {
	-webkit-tap-highlight-color: transparent;
}

/* flex: 0 0 auto (nao stretch): main so' ocupa a altura do conteudo.
   Antes (flex: 1 0 auto) o main esticava pra encher o viewport — sticky
   footer pattern, footer empurrado pra baixo. Em mobile no step 1
   (steps 2/3 lockados em summary), o conteudo era curto e aparecia
   gap visivel entre o ultimo card e o footer. Agora o footer gruda
   no fim do conteudo. */
.dmhub-page__main  { flex: 0 0 auto; }

.dmhub-page__header {
	background: var(--color-header-bg, #ffffff);
	border-bottom: 1px solid var(--color-card-border, #e8eaed);
	color: var(--color-header-text, #303030);
}

.dmhub-page__header a {
	color: var(--color-header-text, #303030);
}

.dmhub-page__header-inner {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.dmhub-page__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.dmhub-page__logo img {
	/* `width` explícita (não `auto`) cobre SVGs sem `viewBox` ou
	   `width`/`height` no root — sem isso o browser resolve em 0×0
	   e o logo fica invisível. `max-width: 100%` protege em viewports
	   menores que --logo-max-width. PNG/JPG escalam proporcional via
	   `height: auto` + `object-fit: contain` (não esticam vertical). */
	width: var(--logo-max-width, 150px);
	max-width: 100%;
	max-height: 80px;
	height: auto;
	display: block;
	object-fit: contain;
}

.dmhub-page__logo-text {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.dmhub-page__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	/* Herda --color-header-text que é AUTO-CONTRAST do header bg
	   (Template::contrast_text_for): branco em fundos escuros, cinza
	   em fundos claros. Opacity 0.8 dá sutilezas vs links principais. */
	color: var(--color-header-text, #5b6370);
	opacity: 0.85;
}

.dmhub-page__secure svg,
.dmhub-page__secure svg * {
	/* Ícone do cadeado herda EXATAMENTE a cor do texto do header
	   (--color-header-text que merchant escolhe em Aparência → Cores
	   → Texto do header). O <svg> usa `stroke="currentColor"` no
	   markup — currentColor resolve pro `color` do parent. Forçamos
	   também stroke explícito via CSS pra cobrir override de tema. */
	color: var(--color-header-text, currentColor);
	stroke: var(--color-header-text, currentColor);
}

/* ── Support help (dentro do footer, no topo) ─────────────────────────
   "Duvidas? Fale com nossa equipe:" + botoes WhatsApp/email. Render
   so' se admin configurou em Settings → Atendimento. Vive integrada
   ao footer (topo), separada por divider sutil — zona de fim de
   pagina coesa em vez de bloco isolado. */
.dmhub-page__support {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 1px solid #e8eaed;
	width: 100%;
}
.dmhub-page__support-msg {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #475063;
	font-size: 13px;
	line-height: 1.4;
}
.dmhub-page__support-msg svg { flex-shrink: 0; color: #64748b; }
.dmhub-page__support-actions {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
}
.dmhub-page__support-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, background .2s ease;
}
.dmhub-page__support-btn:hover { transform: translateY(-1px); }
.dmhub-page__support-btn--whatsapp {
	background: #25D366;
	color: #fff;
}
.dmhub-page__support-btn--whatsapp:hover { background: #1ebe5d; color: #fff; }
.dmhub-page__support-btn--email {
	background: #fff;
	color: #1f2937;
	border: 1px solid #d1d5db;
}
.dmhub-page__support-btn--email:hover { background: #f3f4f6; color: #1f2937; }
@media (max-width: 600px) {
	.dmhub-page__support { flex-direction: column; text-align: center; }
	.dmhub-page__support-msg { justify-content: center; }
}

.dmhub-page__footer {
	background: #ffffff;
	border-top: 1px solid #e8eaed;
	margin-top: 16px;
}

.dmhub-page__footer-inner {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.dmhub-page__secure--footer {
	font-size: 13px;
	color: #475063;
}

.dmhub-page__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
}

.dmhub-page__pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.dmhub-page__pay--custom img {
	display: block;
	height: 24px;
	width: auto;
	max-width: 60px;
	border-radius: 3px;
	object-fit: contain;
}

.dmhub-page__pay svg {
	display: block;
	height: 24px;
	width: auto;
	border-radius: 3px;
}

.dmhub-page__small {
	font-size: 11px;
	color: #8a93a3;
	margin: 0;
}

.dmhub-page__small a {
	color: #475063;
	text-decoration: none;
	border-bottom: 1px dotted #c2c8d3;
}

.dmhub-page__small a:hover { color: #1f2329; }

@media (max-width: 640px) {
	.dmhub-page__header-inner { padding: 12px 16px; }
	.dmhub-page__footer-inner { padding: 20px 16px; }
	.dmhub-page__logo img {
		/* Mobile: 80% da largura escolhida pelo merchant + cap em 200px
		   pra logos não dominarem o header em telas estreitas.
		   `width` explícita pelo mesmo motivo do desktop (SVG sem dim). */
		width: min(calc(var(--logo-max-width, 150px) * 0.8), 200px);
		max-width: 100%;
		max-height: 60px;
	}
}

/* Esconde plumagem padrão do WooCommerce que duplica controles nossos.
   Escoponado em .dmhub-checkout--fields-active: quando merchant desliga o
   toggle Fields (pra deixar WC nativo respirar), essas plumagens VOLTAM
   a aparecer e o user pode operar o checkout nativo sem CSS fantasma. */

.dmhub-checkout--fields-active .woocommerce-form-coupon-toggle,
.dmhub-checkout--fields-active .woocommerce-form-login-toggle,
.dmhub-checkout--fields-active .woocommerce-form-login,
.dmhub-checkout--fields-active .create-account,
.dmhub-checkout--fields-active #ship-to-different-address,
.dmhub-checkout--fields-active .woocommerce-billing-fields > h3,
.dmhub-checkout--fields-active .woocommerce-shipping-fields > h3,
.dmhub-checkout--fields-active .woocommerce-additional-fields > h3 {
	display: none !important;
}

/* IE: visível apenas quando o cliente digita CNPJ (>=12 dígitos). JS faz
   slideDown/slideUp; CSS esconde no estado inicial pra evitar flash. */

.dmhub-checkout--fields-active .dmhub-ie-conditional { display: none; }

/* Checkbox "Isento" no campo IE (Inscrição Estadual). Injetado via JS,
   posicionado à direita do input. Marcado = auto-preenche "Isento" +
   readonly. (Feature request merchant.) */

.dmhub-checkout .dmhub-has-isento-toggle {
	position: relative;
}

.dmhub-checkout .dmhub-ie-isento-toggle {
	position: absolute;
	right: 10px;
	/* Centraliza no INPUT, não no .form-row (que contém label EM CIMA +
	   input embaixo, então top:50% do form-row fica entre os dois).
	   Input tem padding 12px + font 16px + border 1px ≈ 42px de altura,
	   começando no bottom do form-row. Centro vertical do input = 21px
	   do bottom. translateY(50%) move o checkbox pra baixo metade da
	   altura própria, alinhando o centro do checkbox com centro do input. */
	bottom: 21px;
	transform: translateY(50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #475063;
	cursor: pointer;
	user-select: none;
	background: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	z-index: 2;
}

.dmhub-checkout .dmhub-ie-isento-toggle input[type="checkbox"] {
	margin: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.dmhub-checkout .dmhub-ie-isento-toggle span {
	font-weight: 500;
}

/* Padding-right extra no input pra que o texto digitado não passe por
   baixo do checkbox absoluto. */

.dmhub-checkout .dmhub-has-isento-toggle input[name="billing_ie"] {
	padding-right: 90px;
}

/* Visual de "readonly Isento" — input com valor "Isento" + checkbox
   marcado fica esmaecido. */

.dmhub-checkout .dmhub-has-isento-toggle input[name="billing_ie"][readonly] {
	background: #f4f6f8;
	color: #6b7280;
	cursor: not-allowed;
}

/* Sempre escondidos — duplicam o nosso billing_cpf único.
   Cobre BM (persontype/cnpj/cellphone) + Pagar.me v4 (document) + variantes
   genéricas (taxvat / tax_id / doc / documento) que outros gateways BR
   eventualmente registram. Os seletores por atributo capturam variantes
   de ID ([id^=billing_document]) caso o gateway use sufixo diferente.
   Escoponado em --fields-active: Fields off -> esses campos voltam ao
   default WC/BM (sem nosso billing_cpf unificado), entao precisamos
   exibi-los. */

.dmhub-checkout--fields-active #billing_persontype_field,
.dmhub-checkout--fields-active #billing_cnpj_field,
.dmhub-checkout--fields-active #billing_cellphone_field,
.dmhub-checkout--fields-active [id^="billing_document"],
.dmhub-checkout--fields-active [id^="billing_documento"],
.dmhub-checkout--fields-active [id^="billing_doc_"],
.dmhub-checkout--fields-active #billing_doc_field,
.dmhub-checkout--fields-active [id^="billing_taxvat"],
.dmhub-checkout--fields-active [id^="billing_tax_id"] {
	display: none !important;
}

/* Country selector: BR é fixo, não mostramos label nem wrapper.
   Múltiplos selectors cobrem: container <p>, label[for], select órfão,
   variações que BM ou gateways possam injetar.
   Failsafe via :has() pega caso ID não bata o pattern (ex: type=hidden
   override revertido por filter externo, ou wrapper sem _field suffix).
   Escoponado em --fields-active: Fields off -> nao forcamos BR fixo,
   WC nativo gerencia country. */

.dmhub-checkout--fields-active #billing_country_field,
.dmhub-checkout--fields-active #shipping_country_field,
.dmhub-checkout--fields-active p.form-row[id$="country_field"],
.dmhub-checkout--fields-active .form-row[id$="country_field"],
.dmhub-checkout--fields-active label[for="billing_country"],
.dmhub-checkout--fields-active label[for="shipping_country"],
#dmhub-billing-fields #billing_country_field,
#dmhub-billing-fields [id$="country_field"],
.dmhub-checkout--fields-active p.form-row:has(select[name$="_country"]),
.dmhub-checkout--fields-active p.form-row:has(label[for$="_country"]),
.dmhub-billing-mirror:has(select[name$="_country"]),
.dmhub-billing-mirror:has(label[for$="_country"]),
/* Fallback catch-all: hide direto o select/input pra qualquer
   render path (independente do wrapper). Cobre browsers sem :has()
   support (iOS < 15.4) e renderizacoes em wrappers nao-padrao
   (gateways/plugins que injetam fora do .form-row). Input fica no
   DOM e continua submetendo o value 'BR' pro gateway. */
.dmhub-checkout--fields-active select[name="billing_country"],
.dmhub-checkout--fields-active select[name="shipping_country"],
.dmhub-checkout--fields-active input[name="billing_country"],
.dmhub-checkout--fields-active input[name="shipping_country"] {
	display: none !important;
}

/* País fantasma: WC renderiza `<label>País</label>` dentro do
   `p#billing_country_field` mesmo quando o input é hidden. Esconder
   SÓ o `<label>` é cirúrgico — o `<p>` continua no DOM (necessário
   pra o `<input type="hidden" value="BR">` submeter), mas a label
   órfã não polui visualmente. Versão simples sugerida pelo merchant
   substituindo regras agressivas que escondiam o form-row inteiro
   e podiam interferir em outros render paths. */

p#billing_country_field label,
p#shipping_country_field label {
	display: none;
}

/* "Nome completo" / "Destinatário" num campo só — last_name fica hidden
   (input tipo hidden, populado por JS a partir do split do primeiro espaço).
   Escoponado em --fields-active: quando merchant desliga Fields, WC
   nativo volta a renderizar billing_last_name como campo visivel. */

.dmhub-checkout--fields-active #billing_last_name_field,
.dmhub-checkout--fields-active #shipping_last_name_field,
.dmhub-checkout--fields-active .dmhub-hidden-fullname,
.dmhub-checkout--fields-active p[id$="_last_name_field"] {
	display: none !important;
}

/* Step 2: progressive disclosure. Só mostra o CEP até a
   API responder; quando ela traz dados (ou retorna 404), os outros campos
   aparecem — preenchidos pela resposta ou em branco pra preencher manual.
   A classe `is-cep-revealed` é adicionada pelo JS ao container.
   Country fica fora dessa lógica — sempre escondido (regra mais abaixo). */

.dmhub-step[data-step="shipping"] .dmhub-step__body .form-row:not(#shipping_postcode_field) {
	display: none !important;
}

/* Override do WC core JS que esconde `<div class="shipping_address">`
   via inline `style="display:none"` quando o checkbox
   #ship-to-different-address não está checked. Nosso checkout
   custom NÃO usa esse checkbox — shipping_address é o container
   PRINCIPAL dos campos de entrega (CEP, Rua, Cidade, etc) e DEVE
   estar sempre visível. Sem `!important` o inline style do WC vence.
   Bug recorrente — também aparece em logged users com endereço salvo
   (WC força .hide() no init). */

.dmhub-checkout div.shipping_address {
	display: block !important;
}

.dmhub-step[data-step="shipping"].is-cep-revealed .dmhub-step__body .form-row:not(#shipping_postcode_field):not(#shipping_country_field) {
	display: block !important;
}

#dmhub-billing-fields .form-row:not(#billing_postcode_field) {
	display: none !important;
}

#dmhub-billing-fields.is-cep-revealed .form-row:not(#billing_postcode_field):not(#billing_country_field) {
	display: block !important;
}

/* Quando o summary "Enviando para" está exibido, escondemos os campos
   de Rua/Bairro/Cidade/Estado — só Número e Complemento ficam editáveis.
   Se o cliente clicar em "alterar", removemos has-cep-summary e os
   campos voltam a aparecer. */

.dmhub-step[data-step="shipping"].has-cep-summary #shipping_address_1_field,
.dmhub-step[data-step="shipping"].has-cep-summary #shipping_neighborhood_field,
.dmhub-step[data-step="shipping"].has-cep-summary #shipping_city_field,
.dmhub-step[data-step="shipping"].has-cep-summary #shipping_state_field,
#dmhub-billing-fields.has-cep-summary #billing_address_1_field,
#dmhub-billing-fields.has-cep-summary #billing_neighborhood_field,
#dmhub-billing-fields.has-cep-summary #billing_city_field,
#dmhub-billing-fields.has-cep-summary #billing_state_field {
	display: none !important;
}

/* Estilo do summary "Enviando para" */

.dmhub-cep-summary {
	margin: 8px 0 16px;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #475063;
}

.dmhub-cep-summary[hidden] { display: none; }

.dmhub-cep-summary strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #1f2329;
	margin-bottom: 2px;
}

.dmhub-cep-summary__address {
	display: block;
	color: #5b6370;
}

.dmhub-cep-summary__hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #8a93a3;
	font-style: italic;
}

/* Shipping: campos pessoais que NÃO usamos (CPF, empresa, documentos
   de gateways BR). shipping_first_name FICA visível como "Destinatário"
   (campo único; shipping_last_name é hidden, populado pelo split JS).
   Mirror server-side preenche o que ficar vazio no posted_data.
   Escoponado em --fields-active: sem Fields, esses campos voltam a
   aparecer e o cliente pode preencher endereco de entrega normalmente. */

.dmhub-checkout--fields-active #shipping_company_field,
.dmhub-checkout--fields-active #shipping_persontype_field,
.dmhub-checkout--fields-active #shipping_cnpj_field,
.dmhub-checkout--fields-active #shipping_cpf_field,
.dmhub-checkout--fields-active [id^="shipping_document"],
.dmhub-checkout--fields-active [id^="shipping_documento"],
.dmhub-checkout--fields-active [id^="shipping_doc_"],
.dmhub-checkout--fields-active [id^="shipping_taxvat"],
.dmhub-checkout--fields-active [id^="shipping_tax_id"],
.dmhub-checkout--fields-active #shipping_cellphone_field,
.dmhub-checkout--fields-active #shipping_phone_field,
.dmhub-checkout--fields-active #shipping_email_field {
	display: none !important;
}

/* Opcionais: escondidos só quando o merchant não habilitou no admin.
   As classes dmhub-no-* sao aplicadas no body por Template::body_class
   apenas quando Fields esta ativo. Sem essa guarda, Fields=off + BM
   ativo mostrariam RG/IE/Birthdate sempre que merchant nao tivesse
   habilitado, mesmo BM querendo exibir. */

.dmhub-checkout--fields-active.dmhub-no-rg        #billing_rg_field,
.dmhub-checkout--fields-active.dmhub-no-ie        #billing_ie_field,
.dmhub-checkout--fields-active.dmhub-no-birthdate #billing_birthdate_field,
.dmhub-checkout--fields-active.dmhub-no-gender    #billing_gender_field,
.dmhub-checkout--fields-active.dmhub-no-gender    #billing_sex_field,
.dmhub-checkout--fields-active.dmhub-no-company   #billing_company_field {
	display: none !important;
}

/* =====================================================================
   Layout — 3 colunas no desktop (Perfil • Endereço+Pagamento • Revisão)
   ===================================================================== */

.dmhub-form {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	/* Top: 20px (era 32px = chunky vs padrão Shopify/Stripe ~16-24px).
	   Bottom: 24px — colado no footer. A compensação do sticky CTA
	   mobile vive em .dmhub-page__shell (padding DEPOIS do footer),
	   não aqui. Antes era 96px dentro do form, o que criava gap
	   visível entre o último card e o footer. */
	padding: 20px var(--container-pad, 24px) var(--spacing-md, 24px);
}

/* Mobile: padding lateral do container reduzido de 24px → 12px.
   Padrão da indústria checkout (Shopify ~16, Stripe/Mercado Pago/
   iFood 8-12) — cards aproveitam melhor a largura do viewport
   estreito. 12px mantém respiro visual sem desperdiçar pixels.
   Top reduzido pra 16px pra header não ficar muito longe do
   conteúdo (32px desktop ficava chunky no mobile). */

@media (max-width: 559px) {
	.dmhub-form {
		padding-top: var(--spacing-md, 16px);
		padding-left: 12px;
		padding-right: 12px;
	}
}

.dmhub-grid {
	display: grid;
	gap: var(--spacing-md, 16px);
	grid-template-columns: minmax(0, 1fr);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.dmhub-grid {
		gap: var(--spacing-md, 16px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
	}

	/* Layout 2 colunas: formulário todo à esquerda (col 1 maior, 58%),
	   resumo do pedido sticky à direita (col 2, 42%). Padrão da indústria
	   — Shopify/Stripe/MercadoLivre.

	   .dmhub-col-main (wrapper de profile+steps) vira flex column em 2-col
	   e ocupa col 1. Sem isso, profile e steps eram grid items em rows
	   separados — review spanava 2 rows e distribuía altura entre eles,
	   esticando o row do Perfil quando steps-expanded estava OFF (perfil
	   colapsado pequeno + endereço/pagamento locked pequenos = sobra
	   espaço esticado pelo span do review). Com wrapper flex, profile e
	   steps stackam pela altura natural do conteúdo. */
	.dmhub-layout-two .dmhub-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		grid-template-areas: "main review";
	}
	.dmhub-layout-two .dmhub-col-main {
		grid-area: main;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-md, 16px);
	}
	.dmhub-layout-two .dmhub-col--review  {
		grid-area: review;
		position: sticky;
		top: calc(var(--header-height, 64px) + var(--spacing-md, 16px));
		align-self: start;
		/* Sem max-height/overflow: deixa o sticky comportar-se naturalmente.
		   Trust badges movidas pra cá ficam logo abaixo do resumo do pedido
		   e ainda fluem no sticky junto. Em telas muito baixas, o sticky
		   "unstick" naturalmente quando passar do viewport. */
	}
}

/* .dmhub-col-main em 3-col / mobile: display:contents faz o wrapper sumir
   da layout — profile e steps viram filhos DIRETOS de .dmhub-grid (3-col
   auto-place: profile→col 1, steps→col 2, review→col 3 / mobile stackam).
   O override em layout-two acima troca pra flex pra ganhar o grid-area. */

.dmhub-col-main {
	display: contents;
}

/* Telas grandes (≥1280px): layout 2-col com proporção ajustada pra
   formulário não ficar absurdamente largo. */

@media (min-width: 1280px) {
	.dmhub-layout-two .dmhub-grid {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}

/* Em layout 2 colunas, os 3 steps ficam empilhados verticalmente na
   coluna esquerda (Perfil em cima, Endereço/Pagamento abaixo). O
   destaque `is-active` (borda + shadow accent) faz sentido em 3
   colunas onde cada coluna é um "track" visual, mas em 2 col fica
   estranho — parece que o Perfil está "selecionado" como um botão.
   Mantém borda neutra igual aos outros steps. (UX feedback merchant.) */

.dmhub-layout-two .dmhub-step.is-active {
	border-color: var(--color-card-border, var(--color-border, #e8e8e8));
	box-shadow: none;
}

/* Perfil em 2 colunas no layout-two (desktop ≥992px). Pares naturais:
   Nome | E-mail / Celular | CPF / Razão Social | Inscrição Estadual.
   Grid auto-flow cuida do pareamento — qualquer form-row hidden
   (billing_last_name etc) tem display:none e fica fora do grid flow.
   Cashback wrap e advance button ficam FORA do #customer_details, então
   não interferem no grid. Em <992px volta pra coluna única (mobile UX). */

@media (min-width: 992px) {
	.dmhub-layout-two .dmhub-col--profile .woocommerce-billing-fields__field-wrapper,
	.dmhub-layout-two #dmhub-billing-fields {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 12px;
		row-gap: 0;
	}
	/* Reset width/float dos form-row .form-row-wide pra que ocupem 1
	   cell do grid (não 100% do container). */
	.dmhub-layout-two .dmhub-col--profile .woocommerce-billing-fields__field-wrapper > .form-row,
	.dmhub-layout-two #dmhub-billing-fields > .form-row {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	/* Hint, CEP summary e o CEP postcode ocupam linha inteira no toggle
	   "Usar endereço de cobrança diferente" — pareamento começa a partir
	   do Endereço/Número. Sem isso, CEP pareava com Endereço (esquisito
	   antes do reveal). */
	.dmhub-layout-two #dmhub-billing-fields > .dmhub-billing-block__hint,
	.dmhub-layout-two #dmhub-billing-fields > .dmhub-cep-summary,
	.dmhub-layout-two #dmhub-billing-fields > #billing_postcode_field {
		grid-column: 1 / -1;
	}

	/* Toggle "CPF no Pagamento" ON: billing_first_name recebe a class
	   .dmhub-profile-fullrow (vide Fields.php reshape_fields) — Nome
	   completo precisa span 2 cols pra layout "Nome 100% / Email |
	   Celular 50/50" (feedback merchant). Sem essa regra, form-row-wide
	   sozinho ocupa apenas 1 cell do grid (50%) e Celular fica orfao
	   numa linha sozinho. */
	.dmhub-layout-two .dmhub-col--profile .woocommerce-billing-fields__field-wrapper > .form-row.dmhub-profile-fullrow {
		grid-column: 1 / -1;
	}

	/* Asaas Cartão de Crédito em 2 colunas no layout-two. Pares naturais:
	   Nome no cartão | Número do cartão / Data de expiração | CVV. O plugin
	   Asaas envolve os fields em `.asaas-cc-form-wrapper` — flex nele cuida
	   do pareamento. Form-rows hidden (mês/ano originais, label standalone)
	   têm display:none e ficam fora do flex flow. */
	.dmhub-layout-two .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper {
		display: flex;
		flex-wrap: wrap;
		column-gap: 12px;
		row-gap: 0;
		/* flex-start (NÃO o stretch default): sem isto, os 2 form-rows da linha
		   esticam pra altura da linha, mas o input fica no topo — então o label
		   flutuante (top:50% da form-row esticada) cai abaixo do centro do input.
		   Era o "Código de Segurança" descendo no 2-col. flex-start deixa cada
		   form-row na altura natural do input (50px) → labels alinhados. */
		align-items: flex-start;
	}
	.dmhub-layout-two .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row {
		flex: 0 0 calc(50% - 6px);
		width: calc(50% - 6px);
		max-width: calc(50% - 6px);
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	/* Parcelas (cc_options) — se presente, ocupa linha inteira. */
	.dmhub-layout-two .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper > [id$="cc_options_field"] {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
}

/* Countdown urgency widget — opt-in via admin (Conversao e UX →
   "Mostrar countdown de urgência no topo"). Barra horizontal compacta
   logo apos o link "Voltar" e antes do grid de steps. Cores neutras
   (amber suave) pra integrar com qualquer tema sem conflitar com a
   --color-primary do checkout. Tabular-nums no MM:SS evita "saltinho"
   visual quando os digitos mudam (1 vs 10). .is-expired adiciona via
   JS quando deadline zera — fade out 400ms. */
.dmhub-countdown {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 12px 16px;
	/* Cores via CSS vars emitidas pelo Template::inline_appearance_vars()
	   a partir das 4 settings em Aparencia → "Barra de urgência". Fallback
	   pros valores amber neutros caso o style inline nao tenha rodado
	   (preview no admin, contexto fora do checkout page, etc). */
	background: var(--dmhub-countdown-bg, #fff7e6);
	color: var(--dmhub-countdown-text, #663c00);
	border: 1px solid var(--dmhub-countdown-border, #f4d59c);
	border-radius: var(--radius-md, 12px);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: opacity 400ms ease;
}
.dmhub-countdown__icon { flex: 0 0 auto; }
.dmhub-countdown__text { flex: 1 1 auto; min-width: 0; }
.dmhub-countdown__time {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	padding: 2px 10px;
	background: var(--dmhub-countdown-time-bg, #ffffff);
	border-radius: 999px;
}
.dmhub-countdown.is-expired {
	opacity: 0;
	pointer-events: none;
}

/* Posicao "Fixo no topo" — gruda no topo do viewport quando o cliente
   rola. position: sticky em vez de fixed: continua no fluxo natural
   (nao cria deslocamento), mobile-friendly, sem precisar calcular
   padding-top no body. z-index alto pra ficar acima dos steps mas
   abaixo de eventuais modais/drawers. Shadow leve quando "grudada"
   reforca a percepcao de fixed. */
.dmhub-countdown.is-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	margin: 0 0 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Posicao "Acima do Revise pedido" — barra renderiza DENTRO da
   .dmhub-col--review, antes do <details> de revisao. Spacing
   ajustado pro contexto do aside (que tem gap proprio entre filhos). */
.dmhub-countdown.is-aside {
	margin: 0;
}
@media (max-width: 560px) {
	.dmhub-countdown {
		font-size: 13px;
		padding: 10px 12px;
		gap: 8px;
	}
	.dmhub-countdown__time {
		font-size: 15px;
		padding: 2px 8px;
	}
}

/* Bloco "Dados para nota fiscal" — opt-in via admin
   (dmhub_checkout_invoice_block_enabled). Renderiza dentro do
   <div class="form-row place-order"> via hook
   woocommerce_review_order_before_submit (priority 5, antes do
   checkbox 'terms'). Wrapper visual com separator/heading pra deixar
   claro que e' uma secao distinta dos metodos de pagamento.
   Titulo herda exatamente o styling do .dmhub-step__head h2
   (18px / weight 500 / font-heading) — feedback merchant: precisa
   ter o mesmo tamanho do titulo "Pagamento" pra parecer secao de
   peso equivalente. */
.dmhub-invoice-block {
	margin: 16px 0 8px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border, #e8e8e8);
}
.dmhub-invoice-block__title {
	margin: 0 0 16px;
	font-family: var(--font-heading, var(--font-primary, inherit));
	font-size: 18px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: -0.01em;
	color: var(--color-dark, #303030);
}
/* Zera margin do ultimo .form-row do bloco — bloco pode ter de 1
   (so' CPF) a 4 campos (CPF + Razao Social + RG + IE) dependendo de
   person_type e enabled_extra_fields. :last-child cobre todos os
   cenarios sem precisar de class explicita por campo. */
.dmhub-invoice-block .form-row:last-child {
	margin-bottom: 0;
}

/* Em layout 2 colunas, JS move .dmhub-trust pra dentro de
   .dmhub-col--review (abaixo do Resumo do pedido). O `.dmhub-col` já
   é flex-column com `gap: 16px`, então NÃO precisa margin-top extra
   — antes adicionávamos 16px que somava ao gap = 32px, fora do
   padrão dos outros cards. (Feedback merchant.) */

@supports (background: color-mix(in srgb, red, white)) {
	.dmhub-layout-two .dmhub-step.is-active {
		border-color: var(--color-card-border, var(--color-border, #e8e8e8));
		box-shadow: none;
	}
}

.dmhub-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
}

/* =====================================================================
   Step (cards) com progressive disclosure
   ===================================================================== */

.dmhub-step {
	background: var(--color-card-bg, var(--color-bg, #fff));
	border: 1px solid var(--color-card-border, var(--color-border, #e8e8e8));
	border-radius: var(--radius-md, 12px);
	color: var(--color-card-text, var(--color-dark, #303030));
	overflow: clip;
	transition: border-color var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.dmhub-step__head h2,
.dmhub-step label {
	color: var(--color-card-text, var(--color-dark, #303030));
}

.dmhub-step.is-active {
	/* Fallback estático pra browsers sem color-mix (Safari <16.2),
	   override moderno logo abaixo usa a cor accent customizada. */
	border-color: rgb(var(--color-accent-rgb, 0 203 2) / 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgb(var(--color-accent-rgb, 0 203 2) / 0.08) inset;
}

@supports (background: color-mix(in srgb, red, white)) {
	.dmhub-step.is-active {
		border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px color-mix(in srgb, var(--color-accent) 8%, transparent) inset;
	}
}

.dmhub-step.is-complete {
	cursor: pointer;                       /* clique no resumo retorna pra editar */
}

.dmhub-step.is-complete:hover {
	border-color: var(--color-dark, #303030);
}

.dmhub-step.is-locked .dmhub-step__head h2 { color: var(--color-gray, #6b7280); }

.dmhub-step__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	padding: var(--spacing-md, 16px) var(--spacing-lg, 32px);
}

.dmhub-step__head h2 {
	margin: 0;
	font-family: var(--font-heading, var(--font-primary, inherit));
	font-size: 18px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: -0.01em;
	color: var(--color-dark, #303030);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Indicador de progresso: badge 1/2/3 antes do título de cada step,
   que vira ✓ ao concluir. Opt-out em Aparência (body.dmhub-steps-numbered,
   via dmhub_checkout_steps_numbers). Escopado a .dmhub-step[data-step]:
   o <summary> do "Revise seu pedido" reusa a class .dmhub-step__head só
   pela tipografia e NÃO pode ganhar número. */
.dmhub-steps-numbered .dmhub-step[data-step] .dmhub-step__head h2::before {
	content: "1";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	background: var(--color-bg-light, #f3f4f6);
	color: var(--color-gray-dark, #555);
	transition: background .2s ease, color .2s ease;
}
.dmhub-steps-numbered .dmhub-step[data-step="shipping"] .dmhub-step__head h2::before { content: "2"; }
.dmhub-steps-numbered .dmhub-step[data-step="payment"] .dmhub-step__head h2::before { content: "3"; }
.dmhub-steps-numbered .dmhub-step[data-step].is-active .dmhub-step__head h2::before {
	background: var(--color-accent-dark, #0f5e2b);
	color: #fff;
}
.dmhub-steps-numbered .dmhub-step[data-step].is-complete .dmhub-step__head h2::before {
	content: "✓";
	background: var(--color-accent-soft, #e6faea);
	color: var(--color-accent-dark, #0f5e2b);
}

/* Só leitores de tela (h1 da página — o layout usa os h2 dos steps). */
.dmhub-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Body / Locked / Summary visibility — controlled by step state */

.dmhub-step__body,
.dmhub-step__summary,
.dmhub-step__locked { display: none; }

.dmhub-step.is-active   .dmhub-step__body    { display: flow-root; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }

/* Layout expandido: todos os steps abertos desde o início (Aparência
   → Layout). Override progressive disclosure — mostra __body de todos
   os steps, esconde __locked e __summary, esconde botões "Avançar"
   (só o "Comprar agora" final). Cliente preenche perfil/endereço/
   pagamento na ordem que quiser. */

.dmhub-steps-expanded .dmhub-step .dmhub-step__body {
	display: flow-root !important;
	padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px) !important;
}

.dmhub-steps-expanded .dmhub-step .dmhub-step__locked,
.dmhub-steps-expanded .dmhub-step .dmhub-step__summary {
	display: none !important;
}

.dmhub-steps-expanded .dmhub-step .dmhub-step__advance-wrap {
	display: none !important;
}

/* Header dos steps em layout expandido: sem dim color (todos ativos). */

.dmhub-steps-expanded .dmhub-step.is-locked .dmhub-step__head h2,
.dmhub-steps-expanded .dmhub-step.is-complete .dmhub-step__head h2 {
	color: var(--color-dark, #303030);
}

/* min-height: 320px só DEPOIS do CEP revelado (= shipping methods +
   address fields prestes a aparecer). Antes era aplicado no
   `.is-active` direto e criava espaço branco gigante embaixo do CEP
   sozinho (UX ruim). (Audit round 3 ajuste pós-feedback merchant.) */

.dmhub-step[data-step="shipping"].is-active.is-cep-revealed .dmhub-step__body {
	min-height: 320px;
}

/* Toggle "Usar endereço de cobrança diferente" só faz sentido depois
   do CEP de entrega preenchido (sem CEP, não há o que cobrar
   diferente). Esconde antes do is-cep-revealed pra evitar UX confusa
   ("clico e não acontece nada"). */

.dmhub-step[data-step="shipping"]:not(.is-cep-revealed) .dmhub-billing-toggle {
	display: none;
}

.dmhub-step.is-locked   .dmhub-step__locked  { display: block; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }

.dmhub-step.is-complete .dmhub-step__summary { display: block; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }

.dmhub-step__locked {
	color: var(--color-gray, #6b7280);
	font-size: 13px;
	line-height: 1.5;
}

/* Mensagem exibida no step "Entrega" quando o cart e' 100% digital (sem
   produtos fisicos). Sem isso, o step abria vazio com so o botao Avancar
   e cliente achava que travou. */

.dmhub-step__digital-notice {
	margin: 0 0 16px;
	padding: 16px;
	background: #f8f9fb;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	color: #555;
	font-size: 14px;
	line-height: 1.55;
}

.dmhub-step__summary {
	color: var(--color-gray-dark, #555);
	font-size: 13px;
	line-height: 1.55;
}

.dmhub-step__summary strong {
	display: block;
	margin-bottom: 2px;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
	font-size: 14px;
}

/* Separador middot entre bairro · cidade/UF · CEP no resumo de envio —
   levemente apagado pra não competir com o texto. */
.dmhub-step__summary-sep {
	opacity: 0.45;
	padding: 0 1px;
}

/* Trust badges entre campos do Perfil e o botao "Avancar". Comunica
   transparencia (porque pedimos dados) + seguranca (criptografia)
   sem ocupar muito espaco. Padrao MagaLu/Mercado Livre.
   Layout: lado a lado centralizado em desktop, stack em mobile
   (textos longos quebrariam se forçados horizontais em telas <560px). */
.dmhub-checkout .dmhub-trust-badges,
.dmhub-trust-badges {
	list-style: none !important;
	margin: var(--spacing-md, 16px) 0 0;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 20px;
}
.dmhub-checkout .dmhub-trust-badge,
.dmhub-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-gray-muted, #6b7280);
	margin: 0;
	/* Defensivo: temas/CSS-purgers que forcam list-item no <li>
	   (display: list-item + ::marker) reintroduzem o bullet. !important
	   no list-style + display inline-flex cobre os 2 vetores. */
	list-style: none !important;
}
.dmhub-trust-badge::marker,
.dmhub-trust-badge::-webkit-details-marker {
	display: none !important;
	content: '' !important;
}
.dmhub-trust-badge svg {
	flex-shrink: 0;
	color: var(--color-primary, #1f7a4d);
}
@media (max-width: 560px) {
	/* Mobile: stack vertical (textos longos quebrariam horizontal).
	   Itens centralizados — badge alinhado à esquerda destoava do
	   restante do card (botão e campos centrados). */
	.dmhub-trust-badges { flex-direction: column; align-items: center; gap: 6px; }
	.dmhub-trust-badge { text-align: center; }
}

/* "Avançar" button — local ao step, não submete o form */

.dmhub-step__advance-wrap {
	margin-top: var(--spacing-md, 16px);
}

.dmhub-step__advance {
	width: 100%;
	padding: 14px 22px;
	border: 1px solid var(--color-accent, #00cb02);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-accent, #00cb02);
	color: var(--color-button-text, #fff);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.dmhub-step__advance:hover {
	background: var(--color-bg, #fff);
	color: var(--color-accent, #00cb02);
}

@media (max-width: 559px) {
	/* Padding mobile: 20px horizontal + 16px head-top (padrão moderno
	   compacto — Shopify/Stripe ~20px sides, 16px head). 24px era
	   muito generoso, dava sensação de chunky no viewport estreito.
	   Inputs têm 14px interno = text a 20+14=34px do card edge. */
	.dmhub-step__head    { padding: 16px 20px; }
	.dmhub-step.is-active   .dmhub-step__body,
	.dmhub-step.is-locked   .dmhub-step__locked,
	.dmhub-step.is-complete .dmhub-step__summary { padding: 0 20px 20px; }
	/* steps-expanded mode usa !important global (linha ~749) que travava
	   o body em 32px no mobile. !important pra vencer. */
	.dmhub-steps-expanded .dmhub-step .dmhub-step__body,
	.dmhub-steps-expanded .dmhub-step .dmhub-step__locked,
	.dmhub-steps-expanded .dmhub-step .dmhub-step__summary {
		padding: 0 20px 20px !important;
	}
}

/* =====================================================================
   Form fields (DESIGN.md §3.8)
   ===================================================================== */

.dmhub-checkout .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--spacing-md, 16px);
	padding: 0;
	/* Folga acima do campo quando scrollIntoView é chamado em erro de
	   validação — evita que admin bar (32px), sticky header da loja ou
	   mobile-cta cubram o campo após o scroll. v2: também declarado
	   scroll-padding em html (cobre todo scrollIntoView, não só form-row). */
	scroll-margin-top: 140px;
	scroll-margin-bottom: 140px;
}

/* Scroll padding global pro <html> body do checkout — scrollIntoView
   pra block:'start' honra esse padding e deixa folga abaixo do header
   sticky + acima do mobile-cta. Cobre TODA navegação por scrollIntoView,
   não só form-rows. Aplicado via body.dmhub-checkout pra não vazar pra
   outras páginas do site. v2 do fix dual-scroll race. */

body.dmhub-checkout {
	scroll-padding-top: 140px;
	scroll-padding-bottom: 96px; /* mobile-cta ~52px + folga 44px */
}

.dmhub-checkout .form-row label {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.04em;
	color: var(--color-gray-dark, #555);
}

.dmhub-checkout .form-row .required { color: var(--color-sale, #c0392b); }

/* "(opcional)" auto-injetado pelo WC nos labels de campos non-required.
   WC core: <span class="optional">(optional)</span> appended dentro do
   <label>. Em PT-BR vira "Complemento (opcional)" no floating label.
   UX cleaner sem isso — fields nao-required ja sao identificados pela
   ausencia do asterisco vermelho. Cobre todos contextos do checkout
   (form-row, billing-fields, shipping-fields). */

.dmhub-checkout .optional {
	display: none !important;
}

.dmhub-checkout .form-row input[type=text],
.dmhub-checkout .form-row input[type=email],
.dmhub-checkout .form-row input[type=tel],
.dmhub-checkout .form-row input[type=number],
.dmhub-checkout .form-row input[type=password],
.dmhub-checkout .form-row input[type=date],
.dmhub-checkout .form-row select,
.dmhub-checkout .form-row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-input, 12px);
	background: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 16px;            /* 16px+ obrigatório: iOS dá zoom em <16 */
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
	transition: border-color var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.dmhub-checkout .form-row input:focus,
.dmhub-checkout .form-row select:focus,
.dmhub-checkout .form-row textarea:focus {
	outline: none;
	border-color: var(--color-dark, #303030);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.dmhub-checkout .form-row.woocommerce-invalid input,
.dmhub-checkout .form-row.woocommerce-invalid select {
	border-color: var(--color-sale, #c0392b);
}

.dmhub-checkout .form-row.woocommerce-invalid input:focus,
.dmhub-checkout .form-row.woocommerce-invalid select:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* Erro como PILL pequeno no canto inferior direito do input.
   Padrão Stripe/Vercel — não desloca layout, não move label, feedback
   discreto. Texto e ícone pequenos pra não competir com o conteúdo do
   input. Cobre nossa .dmhub-field-error + .checkout-inline-error-message
   (WC 9.x) + variantes WC legacy. Catch-all cobre child + sibling. */

.dmhub-checkout .dmhub-field-error,
.dmhub-checkout .form-row .dmhub-field-error,
.dmhub-checkout .form-row > .woocommerce-error,
.dmhub-checkout .form-row > span.woocommerce-error,
.dmhub-checkout .form-row > .woocommerce-error-message,
.dmhub-checkout .form-row > ul.woocommerce-error,
.dmhub-checkout .form-row > ul.woocommerce-error > li,
.dmhub-checkout p.checkout-inline-error-message,
.dmhub-checkout .checkout-inline-error-message {
	display: inline-flex !important;
	align-items: center !important;
	gap: 3px !important;
	position: absolute !important;
	/* bottom: -9px = metade dentro, metade FORA do input (18px de altura
	   da pill / 2 = 9px). Pill sobreposta à borda inferior estilo "tag
	   pendurada", padrão Stripe/Shopify error indicator. */
	bottom: -9px !important;
	right: 6px !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 7px 0 5px !important;
	height: 18px !important;
	background: #fef2f2 !important;
	border: 1px solid #fecaca !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 2px rgba(192, 57, 43, 0.04) !important;
	/* 11px (era 9px): abaixo de 11px a mensagem era ilegível em mobile —
	   e o erro é a informação mais crítica do formulário. */
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--color-sale, #c0392b) !important;
	letter-spacing: 0 !important;
	list-style: none !important;
	z-index: 2 !important;
	pointer-events: none !important;
	max-width: calc(70% - 12px) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* (Mobile mantém a MESMA pill pendurada — a variante "linha própria sob
   o input" testada em v2.x foi rejeitada pelo lojista: a tag metade
   dentro/metade fora é a identidade visual do erro. O ganho de
   legibilidade ficou no 11px acima.) */

/* Ícone "!" antes do texto — círculo vermelho pequeno (~10px). */

.dmhub-checkout .dmhub-field-error::before,
.dmhub-checkout .form-row .dmhub-field-error::before,
.dmhub-checkout .form-row > .woocommerce-error::before,
.dmhub-checkout .form-row > span.woocommerce-error::before,
.dmhub-checkout .form-row > .woocommerce-error-message::before,
.dmhub-checkout .form-row > ul.woocommerce-error > li::before,
.dmhub-checkout p.checkout-inline-error-message::before,
.dmhub-checkout .checkout-inline-error-message::before {
	content: "!" !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	border-radius: 50% !important;
	background: var(--color-sale, #c0392b) !important;
	color: #fff !important;
	font-size: 7px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}

/* Mobile: input é estreito, pill com 70% max-width corta texto longo
   tipo "Campo CEP do endereço de entrega não é um CEP válido". PHP
   shortener já trata patterns comuns ("CEP inválido"), mas defensive:
   permite até 92% de largura no mobile pra acomodar mensagens longas
   ou patterns que não casaram com o filter. */

@media (max-width: 640px) {
	.dmhub-checkout .dmhub-field-error,
	.dmhub-checkout .form-row .dmhub-field-error,
	.dmhub-checkout .form-row > .woocommerce-error,
	.dmhub-checkout .form-row > span.woocommerce-error,
	.dmhub-checkout .form-row > .woocommerce-error-message,
	.dmhub-checkout .form-row > ul.woocommerce-error > li,
	.dmhub-checkout p.checkout-inline-error-message,
	.dmhub-checkout .checkout-inline-error-message {
		max-width: calc(92% - 12px) !important;
	}
}

/* Exceção do CUPOM. A pill "tag pendurada" acima é a identidade do erro de
   CAMPO e fica como está — mas ela vem com !important em tudo e vencia a
   intenção declarada em cart.css (.dmhub-coupon .dmhub-field-error: mensagem
   em bloco sob o input), ellipsizando erros reais de cupom ("O cupom X não
   existe…") numa pill de 18px de altura. Aqui reproduzimos a intenção do
   cart.css com !important + especificidade maior, e DEPOIS do @media acima
   (que empata em especificidade com .dmhub-checkout .form-row
   .dmhub-field-error — desempate é ordem de origem). */

.dmhub-checkout .dmhub-coupon .dmhub-field-error {
	display: block !important;
	position: static !important;
	height: auto !important;
	max-width: none !important;
	margin-top: 4px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-size: 11.5px !important;
	font-weight: 300 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.005em !important;
	color: var(--color-sale, #c0392b) !important;
}

/* Suppression do toast wrapper via body class (JS-toggled em checkout_error).
   CSS reforça o jQuery .hide() — sobrevive a update_checkout re-renders
   onde WC re-cria os wrappers e o .hide() inline é perdido. */

body.dmhub-suppress-error-toast .woocommerce-notices-wrapper,
body.dmhub-suppress-error-toast .woocommerce-NoticeGroup-checkout,
body.dmhub-suppress-error-toast .woocommerce-NoticeGroup {
	display: none !important;
}

.dmhub-checkout .form-row-first,
.dmhub-checkout .form-row-last {
	display: inline-flex;
	width: 49%;
	vertical-align: top;
}

.dmhub-checkout .form-row-first { margin-right: 2%; }

.dmhub-checkout .form-row-wide  { width: 100%; }

/* Layout 3 colunas: a coluna do Perfil mede ~1/3 do container — o par
   E-mail|Celular 50/50 (form-row-first/last que o modo "CPF no
   Pagamento" atribui em Fields.php, desenhado pro layout-two) fica
   apertado demais lá. Empilha em largura total SÓ no Perfil: os pares
   do passo Endereço (Número|Complemento, Bairro|Cidade) são decisão de
   UX deliberada e continuam lado a lado. */
@media (min-width: 1024px) {
	body.dmhub-layout-three .dmhub-col--profile .form-row-first,
	body.dmhub-layout-three .dmhub-col--profile .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

@media (max-width: 560px) {
	.dmhub-checkout .form-row-first,
	.dmhub-checkout .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

/* MOBILE 2-COL CIRURGICO: pares "Numero|Complemento" e "Bairro|Cidade"
   continuam lado-a-lado no mobile pra reduzir altura do passo Endereço
   (UX request). Demais campos seguem 1-col por causa do override acima
   (form-row-first/last virando 100% width em <=560px) — incluindo o
   par Estado|Destinatario, que ficaria visualmente desbalanceado (UF 2
   chars vs nome completo).

   Implementacao: ativa grid 2-col no wrapper em mobile; defaults pra
   filhos = span 2 cols (1-col visual, preserva comportamento atual de
   TODOS os campos). Exceção: os 4 IDs alvo ganham grid-column 1/2 ou
   2/3. Reset de width/margin/float (overrides da regra de cima e do
   default .form-row-first/last) pra que o grid mande sozinho.

   Cobre tanto shipping (sempre visivel) quanto billing-fields (quando
   cliente marca "endereço de cobrança diferente"). O :not([hidden])
   no seletor billing impede que nossa regra display:grid vença o
   display:none do attribute `hidden` (BUG identificado por Analista 2)
   — sem isso, mobile users veriam dois CEPs/endereços lado-a-lado
   sem ter marcado o toggle. */
@media (max-width: 560px) {
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper,
	#dmhub-billing-fields:not([hidden]) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: var(--spacing-md, 16px);
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > *,
	#dmhub-billing-fields > * {
		grid-column: 1 / -1;
		width: auto;
		float: none;
		/* Zera margin do .form-row (linha 995 = 0 0 16px) pra que NAO some
		   com row-gap do grid (16px + 16px = 32px entre linhas — visivel
		   como "Endereço mais espaçado que Perfil"). Mesma estrategia do
		   reset desktop ja' existente (linha 3721). row-gap manda sozinho. */
		margin: 0;
	}
	/* Country field e' um <p class="form-row"> contendo <input type="hidden">.
	   No CSS atual `display: none` so' aplica quando `--fields-active` esta
	   ativo (linhas 401-422) OU quando o reveal CEP nao incluiu (linha 473
	   exclui country do `display: block`). Em merchants com Fields OFF +
	   estado is-cep-revealed, o <p> fica `display: block` e ocuparia uma
	   celula vazia do grid. Forcamos hidden defensivo aqui pra garantir
	   que country nunca cria celula fantasma em mobile. */
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > [id$="country_field"],
	#dmhub-billing-fields > [id$="country_field"] {
		display: none;
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_number_field,
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_neighborhood_field,
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_state_field,
	#dmhub-billing-fields > #billing_number_field,
	#dmhub-billing-fields > #billing_neighborhood_field {
		grid-column: 1 / 2;
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_address_2_field,
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_city_field,
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > #shipping_first_name_field,
	#dmhub-billing-fields > #billing_address_2_field,
	#dmhub-billing-fields > #billing_city_field {
		grid-column: 2 / 3;
	}
	/* Billing State fica EM LINHA INTEIRA (span 2) no mobile: o bloco
	   billing-fields nao tem "Destinatario" (nome vai pelo Perfil, campo
	   billing_first_name esta fora deste container), entao parear Estado
	   sozinho deixava 50% vazio do lado. Mantemos a regra DEFAULT
	   (grid-column: 1 / -1, definida em `> *`) — esta regra explicita
	   serve so' pra reforcar a intencao e nao depender da ordem de
	   cascade caso futuros seletores adicionem state_field a outras
	   exceções. */
	#dmhub-billing-fields > #billing_state_field {
		grid-column: 1 / -1;
	}
}

/* =====================================================================
   Coluna 3 — Revisão do pedido
   ===================================================================== */

.dmhub-review {
	background: var(--color-card-bg, var(--color-bg, #fff));
	border: 1px solid var(--color-card-border, var(--color-border, #e8e8e8));
	border-radius: var(--radius-md, 12px);
	color: var(--color-card-text, var(--color-dark, #303030));
	overflow: clip;
}

.dmhub-review__body {
	padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px);
}

@media (max-width: 559px) {
	/* 0 20px 20px — matcha .dmhub-step__body mobile (compacto). */
	.dmhub-review__body { padding: 0 20px 20px; }
}

/* Reset do marker default do <summary> em todos os browsers */

.dmhub-review summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dmhub-review summary::-webkit-details-marker { display: none; }

.dmhub-review summary::marker { content: ''; }

/* Meta (count + total) e chevron — escondidos no fluxo desktop. Aparecem
   apenas em mobile via override abaixo. */

.dmhub-review__meta {
	display: none;
	margin-left: auto;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	font-size: 14px;
	color: var(--color-gray-dark, #555);
}

.dmhub-review__count { font-weight: var(--font-weight-light, 300); }

.dmhub-review__total {
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
}

.dmhub-review__chevron {
	display: none;
	flex-shrink: 0;
	color: var(--color-gray-dark, #555);
	transition: transform 0.2s ease;
}

/* Mobile/tablet (< 1024px): vira accordion no TOPO da grid via order: -1.
   Mostra chevron + meta no <summary>, abre/fecha pelo click. */

@media (max-width: 1023px) {
	.dmhub-col--review { order: -1; }                            /* Move pro topo */
	.dmhub-review__meta { display: flex; }
	.dmhub-review__chevron { display: inline-block; }

	.dmhub-review summary {
		/* 16px 20px — matcha .dmhub-step__head mobile (compacto). */
		padding: 16px 20px;
	}
	.dmhub-review[open] summary {
		border-bottom: 1px solid var(--color-bg-light, #f8f8f8);
	}

	/* Rotaciona chevron 180deg quando aberto */
	.dmhub-review[open] .dmhub-review__chevron {
		transform: rotate(180deg);
	}

	/* Animacao de altura via ::details-content (CSS moderno).
	   interpolate-size pra suportar transicao de auto. */
	@supports (interpolate-size: allow-keywords) {
		.dmhub-review {
			interpolate-size: allow-keywords;
		}
		.dmhub-review::details-content {
			block-size: 0;
			overflow: clip;
			transition:
				block-size 0.3s ease,
				content-visibility 0.3s allow-discrete;
		}
		.dmhub-review[open]::details-content {
			block-size: auto;
		}
	}

	/* Em mobile, ajustes leves no head pra dar respiro ao meta no canto direito.
	   <h2> nao quebra linha; numero "4" mantido pra consistencia com outros steps. */
	.dmhub-review summary h2 {
		flex: 0 1 auto;
		min-width: 0;
	}
}

/* Desktop (>= 1024px): forca [open] permanente, summary sem cursor pointer
   (nao abre/fecha), esconde chevron+meta. Look exato do layout antigo. */

@media (min-width: 1024px) {
	.dmhub-review summary {
		cursor: default;
		pointer-events: none;
	}
	/* Body sempre visivel no desktop, mesmo se algum atalho de teclado
	   conseguir toggle do <details> (defesa em profundidade). */
	.dmhub-review > .dmhub-review__body {
		display: block !important;
	}
	.dmhub-review::details-content {
		content-visibility: visible !important;
		block-size: auto !important;
	}
}

/* Reserva altura de #order_review pra evitar CLS em cada update_checkout
   AJAX (CEP change, qty change, coupon apply). Cada update substitui o
   fragment inteiro → sem min-height, página faz reflow vertical. Valor
   cobre ~3 line-items + totais. (E6 round 2.) */

#order_review {
	min-height: 280px;
}

/* Step 3 (Pagamento): esconde o table de items/totais/notices que duplicam
   o que já temos no right column. Mantém #payment (radios + place order)
   visível. Picker de frete também escondido (cópia no step 2). */

#order_review table.shop_table,
#order_review .woocommerce-checkout-review-order-table,
#order_review .shipping ul.shipping_methods,
#order_review .woocommerce-shipping-methods,
#order_review .woocommerce-NoticeGroup-checkout {
	display: none !important;
}

/* Notices informacionais ("frete grátis", "cupom aplicado") — não mostra
   no step 3. JS extrai e duplica num bloco no right column ("Revise seu
   pedido"). Mantém .woocommerce-error visível pra erros reais de
   pagamento (cartão recusado etc.). */

.dmhub-step[data-step="payment"] .woocommerce-info,
.dmhub-step[data-step="payment"] .woocommerce-message,
.dmhub-step[data-step="payment"] li.woocommerce-info,
.dmhub-step[data-step="payment"] li.woocommerce-message,
.dmhub-step[data-step="payment"] [class*="NoticeGroup"],
.dmhub-step[data-step="payment"] .woocommerce-notices-wrapper,
.dmhub-step[data-step="payment"] .frete-gratis-mensagem {
	display: none !important;
}

/* Também esconde elementos órfãos de progress de frete grátis injetados
   por theme/functions via woocommerce_review_order_before_cart_contents
   (que renderiza dentro de <tbody> e o browser move pra fora do table) */

.dmhub-checkout > .frete-gratis-mensagem,
form.checkout > .frete-gratis-mensagem {
	display: none !important;
}

/* Quando o JS move pro right column, mostra normalmente */

.dmhub-review__body > .frete-gratis-mensagem {
	display: block !important;
	margin: 0 0 12px;
}

/* WC privacy policy text — fica na posição nativa (acima dos métodos
   de pagamento) por UX/LGPD (user lê ANTES de clicar no CTA).
   Centralizado + muted + breathing top/bottom pra não colar nos
   métodos de pagamento acima nem no botão abaixo. */

.dmhub-checkout .woocommerce-privacy-policy-text {
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-gray-dark, #6b7280);
	margin: var(--spacing-md, 16px) 0;
	text-align: center;
}

.dmhub-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.dmhub-checkout .woocommerce-privacy-policy-text a {
	color: #5b6370;
	text-decoration: underline;
}

/* Payment method selectors — radio cards */

.dmhub-checkout #payment ul.wc_payment_methods,
.dmhub-checkout #payment ul.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dmhub-checkout #payment ul.wc_payment_methods li,
.dmhub-checkout #payment ul.payment_methods li {
	list-style: none !important;
	border: 1px solid var(--color-card-border, #e8eaed);
	border-radius: var(--radius-input, 12px);
	background: var(--color-card-bg, #ffffff);
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: border-color .15s ease, background .15s ease;
}

/* Estado SELECIONADO do método de pagamento — replicar visual do
   .dmhub-shipping-method.is-active (frete grátis/PAC selecionado):
   borda accent-dark + fundo accent-soft. Antes só a bolinha do radio
   ficava destacada — visual menos forte que shipping. (Feedback
   merchant.) :has() suportado Chrome 105+, Safari 15.4+, Firefox 121+. */

.dmhub-checkout #payment ul.wc_payment_methods li:has(input[type="radio"]:checked),
.dmhub-checkout #payment ul.payment_methods li:has(input[type="radio"]:checked) {
	border-color: var(--color-accent-dark, #1f7a4d);
	background: var(--color-accent-soft, #f1f8f3);
}

.dmhub-checkout #payment ul.wc_payment_methods li::before,
.dmhub-checkout #payment ul.payment_methods li::before {
	display: none !important;
}

.dmhub-checkout #payment li > input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

.dmhub-checkout #payment li > label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 500;
	color: #1f2329;
	margin: 0 !important;
}

.dmhub-checkout #payment li > label::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c9d2cc;
	box-sizing: border-box;
	transition: border-color .15s ease;
}

.dmhub-checkout #payment li input[type="radio"]:checked + label::before {
	border-color: var(--color-accent-dark, #1f7a4d);
	background: radial-gradient(var(--color-accent-dark, #1f7a4d) 4px, #ffffff 5px);
}

.dmhub-checkout #payment li > label > img {
	height: 22px;
	width: auto;
	margin-left: auto;
	border-radius: 3px;
}

/* Ícones injetados por Template::gateway_icon() (Pix/boleto/cartão via
   PaymentIcons) quando o gateway não traz <img> próprio — sem eles a
   lista de pagamento era só radio + texto, sem reconhecimento visual. */
.dmhub-checkout #payment li > label .dmhub-pm-ico {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.dmhub-checkout #payment li > label .dmhub-pm-ico svg {
	height: 20px;
	width: auto;
	display: block;
}

/* Chip "+N" das bandeiras extras (elo, hipercard…) — popover no hover,
   padrão de referência aprovada pelo lojista. */
.dmhub-checkout #payment li > label .dmhub-pm-more {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 20px;
	padding: 0 5px;
	border: 1px solid var(--color-border, #e4e6eb);
	border-radius: 4px;
	background: #fff;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-gray-dark, #555);
	cursor: default;
}
.dmhub-checkout #payment li > label .dmhub-pm-more__pop {
	/* Abre pra ESQUERDA do chip, dentro do card — o li tem
	   overflow:hidden (cantos arredondados dos payment_box), então
	   pra cima/baixo o balão era decapitado na borda do card. */
	display: none;
	position: absolute;
	top: 50%;
	right: calc(100% + 8px);
	transform: translateY(-50%);
	gap: 4px;
	padding: 6px;
	background: #111827;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
	z-index: 10;
	white-space: nowrap;
}
.dmhub-checkout #payment li > label .dmhub-pm-more__pop::after {
	content: '';
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #111827;
}
.dmhub-checkout #payment li > label .dmhub-pm-more:hover .dmhub-pm-more__pop {
	display: flex;
}
.dmhub-checkout #payment li > label .dmhub-pm-more__pop svg {
	height: 20px;
	width: auto;
	display: block;
}

/* Badge de desconto do gateway (.dmhub-discount-badge inserida em
   woocommerce_gateway_title) — alinha à direita, depois do nome+ícone.
   Visual sólido (mesmo verde escuro do badge BRINDE) pra destacar
   o desconto Pix dentro do card do gateway. */

.dmhub-checkout #payment li > label .dmhub-discount-badge {
	/* Colado ao nome do método (8px) — com margin-left:auto ele "voava"
	   pro meio quando o ícone do gateway (também auto) entrou na linha. */
	margin-left: 8px;
	padding: 3px 10px;
	background: var(--color-accent, #1f7a4d);
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Quando o gateway tem ícone, o badge fica DEPOIS do ícone (à direita
   absoluta). Garantimos isso forçando ordem e empurrando o ícone */

.dmhub-checkout #payment li > label > img + .dmhub-discount-badge,
.dmhub-checkout #payment li > label .dmhub-discount-badge + img {
	margin-left: 8px;
}

.dmhub-checkout #payment li.has-discount-badge > label::after,
.dmhub-checkout #payment li .gateway-discount-badge {
	margin-left: auto;
	padding: 3px 10px;
	background: var(--color-accent, #1f7a4d);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
}

.dmhub-checkout #payment .payment_box {
	border-top: 1px solid #eef0f3;
	padding: 16px;
	margin: 0;
	background: #fafbfc;
	font-size: 13px;
	color: #475063;
	border-radius: 0 0 10px 10px;
}

/* Esconde campo CPF/CNPJ duplicado do plugin Efi em Pix e Boleto.
   Cliente já forneceu CPF no step "Perfil" → backend (Efi.php
   mirror_billing_to_gn_post) copia pra gn_pix_cpf_cnpj e
   gn_boleto_cpf_cnpj em $_POST ANTES do gateway processar. Field
   visível seria redundante e gera flash visual ao mudar de gateway.
   Manter visível pro CARTÃO (gn_cartao_cpf_cnpj) — pode ser compra
   com cartão de terceiro onde CPF do pagador ≠ CPF do checkout.
   (:has() suportado Chrome 105+, Safari 15.4+, Firefox 121+ = 95%+
   browsers BR em 2026; fallback JS em efi.js cobre o resto + auto-fill
   do valor.) */

.dmhub-checkout #payment .payment_box p.form-row:has(#gn_pix_cpf_cnpj),
.dmhub-checkout #payment .payment_box p.form-row:has(#gn_boleto_cpf_cnpj),
.dmhub-checkout #payment .payment_box .form-row:has(#gn_pix_cpf_cnpj),
.dmhub-checkout #payment .payment_box .form-row:has(#gn_boleto_cpf_cnpj),
.dmhub-checkout #payment .payment_box .dmhub-efi-hide {
	display: none !important;
}

/* Override min-height: Pix/Boleto da Efi não renderizam iframe nem CC
   fields — só descrição curta + (antes) CPF que agora está escondido.
   Sem este override, o min-height: 180px de .payment_box (definido pra
   acomodar iframe do Cartão) vira espaço vazio gigante embaixo da
   descrição. Detecta box por :has() OU class JS-toggled (fallback pra
   Safari 15.0-15.3 sem :has()). Cartão segue com min-height 180px
   (iframe precisa). (Safari audit M1.) */

.dmhub-checkout #payment .payment_box:has(#gn_pix_cpf_cnpj),
.dmhub-checkout #payment .payment_box:has(#gn_boleto_cpf_cnpj),
.dmhub-checkout #payment .payment_box.dmhub-payment-box--no-iframe {
	min-height: 0;
}

/* CC form fields: deixa o gateway controlar a largura/layout interno.
   Forçar 50/50 (versão anterior) quebrava o grid do Pagar.me. Apenas
   garantimos espaçamento vertical consistente entre rows. */

.dmhub-checkout #payment .payment_box .form-row {
	margin-bottom: 12px;
}

.dmhub-checkout #payment .payment_box .form-row:last-child {
	margin-bottom: 0;
}

/* Pagar.me CC form: usa flex no container interno pra que Validade
   (form-row-first) e CVV (form-row-last) fiquem lado a lado de fato.
   HTML do Pagar.me: <div data-pagarme-element="fields-cc-data"> envolve
   os <p class="form-row form-row-first/last"> de expiry/cvv. */

.dmhub-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"],
.dmhub-checkout #payment .payment_box .wc-credit-card-info {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 12px !important;
	align-items: flex-end;
}

.dmhub-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row,
.dmhub-checkout #payment .payment_box .wc-credit-card-info > p.form-row {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.dmhub-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-first,
.dmhub-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-last,
.dmhub-checkout #payment .payment_box .wc-credit-card-info > p.form-row.form-row-first,
.dmhub-checkout #payment .payment_box .wc-credit-card-info > p.form-row.form-row-last {
	flex: 1 1 calc(50% - 6px) !important;
	width: calc(50% - 6px) !important;
	max-width: calc(50% - 6px) !important;
}

.dmhub-checkout #payment .payment_box .form-row input,
.dmhub-checkout #payment .payment_box .form-row select {
	width: 100% !important;
	box-sizing: border-box;
}

/* ═══ Efi (Gerencianet) cartao de credito ═══════════════════════════════════
   O plugin oficial Efi (3.2.0) renderiza cada campo como
   <div class="form-row form-row-wide"><label>...<input> (sem <p> — um
   comentario antigo aqui afirmava o contrario e deixou o floating label
   morto por escopar em p). Aqui aplicamos a mesma
   gramatica visual dos outros gateways (Pagar.me/MP/etc). Selectors usam
   tanto IDs nativos do plugin (gn_cartao_*) quanto class hooks que o
   nosso JS adiciona (vc-efi-input).

   NAO usar display:flex no payment_box — quebra o show/hide nativo do
   WC (jQuery slideUp/Down inline display:none vs nosso !important).
   Spacing via margin no lobotomized owl selector preserva o toggle. */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao > * + * {
	margin-top: 14px !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao p {
	margin: 0 !important;
	padding: 0 !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #475063 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label .required,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label abbr.required {
	color: #ef4444 !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="text"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="tel"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="number"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="password"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input:not([type]),
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select {
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	/* 16px minimo iOS Safari — abaixo disso dispara zoom on-focus que
	   pula viewport ~30%, cliente perde contexto no meio dos 16 digitos
	   do cartao. Mesmo motivo das regras :1051 e :3659. */
	font-size: 16px !important;
	color: #1e293b !important;
	background: #fff !important;
	box-sizing: border-box !important;
	transition: border-color .15s, box-shadow .15s !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input:focus,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select:focus {
	border-color: #6366f1 !important;
	box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
	outline: none !important;
}

/* Linha Validade + CVV lado-a-lado (espelha layout MP/Pagar.me) */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-row-2col {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-row-2col > p {
	margin: 0 !important;
}

/* Parcelas — escondida ate o usuario digitar 13+ digitos do cartao.
   Slide-down suave + fade quando aparece. JS toggle .is-visible. */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-installments {
	max-height: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s, margin .25s !important;
	pointer-events: none !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-installments.is-visible {
	max-height: 200px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Brand badge — logo Visa/Master/Elo/etc dentro do input do numero do cartao */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-card-number-wrap {
	position: relative !important;
}

/* Erros de validacao dos campos do cartao Efi: render BLOCK abaixo do
   campo, NAO como a pill flutuante bottom-right padrao.
   BUG corrigido: a pill (.checkout-inline-error-message) e' position:
   absolute ancorada no bottom-right do wrap. Os wraps de validade/CVV
   (grid 2-col .vc-efi-row-2col > p) NAO tinham position:relative, entao
   a pill escapava pro ancestral posicionado distante (que abrange as 2
   colunas) e caia la' no canto do resumo do pedido. Alem disso as
   mensagens do cartao sao frases longas ("Informe o CVV (3 digitos no
   verso do cartao).") que nao cabem na pill de 9px num campo meia-
   largura. Block estatico abaixo resolve posicao + legibilidade de uma
   vez (e nao depende de position:relative em cada wrap). */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .checkout-inline-error-message {
	position: static !important;
	display: flex !important;
	align-items: flex-start !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 5px 0 0 !important;
	padding: 4px 9px !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	white-space: normal !important;
	line-height: 1.3 !important;
	font-size: 11px !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-card-number-wrap input {
	padding-right: 56px !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 24px !important;
	background: transparent center / contain no-repeat !important;
	transition: opacity .15s !important;
	opacity: 0;
	pointer-events: none;
	margin-top: 13px !important; /* compensa label acima */
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand]:not([data-brand=""]) {
	opacity: 1;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="visa"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%231A1F71'/><path fill='%23fff' d='M19.7 21.4l1.7-10.5h2.7l-1.7 10.5zm10.7-10.3c-.5-.2-1.4-.4-2.5-.4-2.7 0-4.7 1.4-4.7 3.5 0 1.5 1.4 2.4 2.5 2.9 1.1.5 1.5.9 1.5 1.4 0 .7-.9 1.1-1.7 1.1-1.1 0-1.7-.2-2.6-.5l-.4-.2-.4 2.4c.7.3 1.9.6 3.1.6 2.9 0 4.8-1.4 4.8-3.6 0-1.2-.7-2.1-2.4-2.9-1-.5-1.6-.8-1.6-1.4 0-.5.5-1 1.7-1 1 0 1.7.2 2.2.4l.3.1.4-2.4zm6.7-.2h-2.1c-.7 0-1.2.2-1.5.9l-4.1 9.6h2.9l.6-1.6h3.5l.3 1.6h2.6l-2.2-10.5zm-3.4 6.8c.2-.6 1.1-2.9 1.1-2.9l.3-.9.2.8.6 3h-2.2zm-15.6-6.8l-2.7 7.2-.3-1.5c-.5-1.7-2.1-3.6-3.8-4.5l2.5 9.3h2.9l4.4-10.5z'/></svg>") !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="mastercard"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23fff'/><circle cx='19' cy='16' r='8' fill='%23EB001B'/><circle cx='29' cy='16' r='8' fill='%23F79E1B'/><path fill='%23FF5F00' d='M24 10a7.94 7.94 0 0 1 0 12 7.94 7.94 0 0 1 0-12z'/></svg>") !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="elo"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23000'/><circle cx='24' cy='16' r='6' fill='none' stroke='%23FFD700' stroke-width='2'/><circle cx='20' cy='16' r='2.5' fill='%23FF3F3F'/><circle cx='28' cy='16' r='2.5' fill='%2300A4E0'/></svg>") !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="hipercard"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23B82329'/><text x='24' y='20' text-anchor='middle' fill='%23fff' font-size='8' font-family='Arial' font-weight='bold'>HIPER</text></svg>") !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="amex"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23006FCF'/><text x='24' y='20' text-anchor='middle' fill='%23fff' font-size='9' font-family='Arial' font-weight='bold'>AMEX</text></svg>") !important;
}

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="diners"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="discover"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23475569'/><circle cx='24' cy='16' r='6' fill='%23fff'/></svg>") !important;
}

/* Hint helper — Efi mostra texto de ajuda em <small> */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao small {
	display: block !important;
	font-size: 11px !important;
	color: #94a3b8 !important;
	margin-top: 4px !important;
	line-height: 1.4 !important;
}

/* Select de parcelas — chevron customizado (sem appearance native do browser) */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}

/* Container do form - card branco com sombra suave */

.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao {
	background: #fafbfc !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	padding: 18px !important;
}

/* Badge de seguranca — substitui o texto incorreto do plugin Efi
   ('seu pagamento sera confirmado em ate um dia util') por mensagem
   correta + tom de confianca. Aprovado na hora + criptografia + BCB. */

/* Badge de segurança — compartilhado por Efí e Asaas (mesmo visual). */
.dmhub-checkout #payment .payment_box:is(.payment_method_wc_gerencianet_cartao, .payment_method_asaas-credit-card, .payment_method_loja5_woo_cielo_webservice) .vc-efi-security {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	margin: 14px 0 0 !important; /* abaixo dos inputs — espaco superior */
	background: var(--color-accent-soft, #f0fdf4) !important;
	border: 1px solid var(--color-accent-border, #bbf7d0) !important;
	border-radius: 8px !important;
	color: var(--color-accent-dark, #14532d) !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}

.dmhub-checkout #payment .payment_box:is(.payment_method_wc_gerencianet_cartao, .payment_method_asaas-credit-card, .payment_method_loja5_woo_cielo_webservice) .vc-efi-security__icon {
	flex-shrink: 0 !important;
	color: var(--color-accent, #10b981) !important;
	margin-top: 1px !important;
	display: inline-flex !important;
}

.dmhub-checkout #payment .payment_box:is(.payment_method_wc_gerencianet_cartao, .payment_method_asaas-credit-card, .payment_method_loja5_woo_cielo_webservice) .vc-efi-security__text {
	flex: 1 !important;
	min-width: 0 !important;
}

.dmhub-checkout #payment .payment_box:is(.payment_method_wc_gerencianet_cartao, .payment_method_asaas-credit-card, .payment_method_loja5_woo_cielo_webservice) .vc-efi-security__text strong {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--color-accent-dark, #14532d) !important;
	margin: 0 0 2px !important;
	line-height: 1.3 !important;
}

/* ── Loja5 Woo Cielo Webservice — re-estilização do form de cartão ──
   O plugin põe STYLE INLINE em todo campo (fundo #f2f2f2, filete verde
   via box-shadow inset, border:none nos selects, float nas bandeiras) —
   por isso os !important: inline só perde pra !important. Classes
   .campos_cielo_webservice / .meio_cielo_webservice_img são compartilhadas
   pelos painéis de crédito/débito/boleto (containers tela-cielo-webservice*),
   então o escopo por classe cobre todos. Nomes/ids/onclick do plugin são
   contrato do JS dele — CSS only, nada de markup. Padrão visual = blocos
   Asaas/Efi acima. */
/* Intro verboso escondido (padrão Efi: form direto ao ponto — a
   instrução "informe os dados do titular" não ajuda ninguém). */
.dmhub-checkout #payment .payment_box [id^="tela-cielo-webservice"] > p:first-child {
	display: none !important;
}
.dmhub-checkout #payment .payment_box #tela-bandeiras-cielo {
	display: flex !important;
	flex-wrap: wrap;
	/* Centralizadas (pedido do dono) — no mobile a linha quebrava
	   encostada à esquerda e ficava desequilibrada com o link acima. */
	justify-content: center;
	gap: 6px;
	margin: 0 0 14px !important;
}
/* Selects nativos de mês/ano substituídos pelo campo único MM/AA do
   shim: ocultos por CLASSE com !important (o .hide() inline do jQuery
   falhava quando o DOM carrega mais de uma instância do form — id
   duplicado acha só a primeira). NUNCA removidos do DOM: são o que o
   plugin posta. */
.dmhub-checkout #payment .payment_box select.dmhub-cielo-native-exp {
	display: none !important;
}

/* ============================================================
   PARES DE CAMPOS DE PAGAMENTO × LAYOUT (regra universal do dono)
   2 colunas = pares lado a lado · 3 colunas = TUDO empilhado, em
   todos os métodos (a coluna de pagamento do 3-col é estreita).
   SÓ EM ≥1024px: abaixo disso o grid de colunas nem existe (.dmhub-grid
   vira coluna única larga) e o par volta em QUALQUER layout — sem o
   media, o 3-col empilhava Validade|CVV no mobile (bug reportado na
   Cielo). Os seletores específicos de Pagar.me e Cielo são necessários:
   as regras de par deles têm especificidade MAIOR que o seletor
   genérico (.form-row-first sozinho perdia e o 3-col desktop ficava
   pareado nesses dois). !important porque os pares usam width/grid com
   !important próprios.
   ============================================================ */
@media (min-width: 1024px) {
	.dmhub-checkout.dmhub-layout-three #payment .payment_box .form-row-first,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box .form-row-last,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-first,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-last,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box .wc-credit-card-info > p.form-row.form-row-first,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box .wc-credit-card-info > p.form-row.form-row-last,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box p.campos_cielo_webservice.form-row-first,
	.dmhub-checkout.dmhub-layout-three #payment .payment_box p.campos_cielo_webservice.form-row-last {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.dmhub-checkout.dmhub-layout-three #payment .payment_box .vc-efi-row-2col {
		grid-template-columns: 1fr !important;
	}
	/* Asaas: o wrapper flex do par é escopado a .dmhub-layout-two (seção
	   do Asaas) e já não dispara no 3-col desktop — empilha sozinho. */
}

/* Asaas ABAIXO de 1024px (qualquer layout — coluna única larga): o
   pareamento completo do wrapper só existe em desktop layout-two (media
   ≥1024 na seção do Asaas) — aqui o par Validade|CVV entra em todas as
   larguras (mesma decisão da Cielo), com os demais campos em linha
   inteira. As classes dmhub-asaas-* são postas pelo asaas.js no init. */
@media (max-width: 1023px) {
	.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper {
		display: flex;
		flex-wrap: wrap;
		column-gap: 12px;
		row-gap: 0;
		align-items: flex-start;
	}
	.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
	}
	.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row.dmhub-asaas-expiration,
	.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .asaas-cc-form-wrapper > .form-row.dmhub-asaas-ccv {
		flex: 0 0 calc(50% - 6px);
		width: calc(50% - 6px);
		max-width: calc(50% - 6px);
	}
}
/* Bandeiras compactas (a linha é FUNCIONAL: clique seleciona a bandeira
   e o JS do plugin marca a escolhida por opacity — não dá pra remover). */
.dmhub-checkout #payment .payment_box .meio_cielo_webservice_img {
	float: none !important;
	width: 38px !important;
	min-height: 0 !important;
	height: auto;
	padding: 2px;
	background: var(--color-card-bg, #fff);
	border: 1px solid var(--color-border, #d1d5db) !important;
	border-radius: 6px;
	transition: opacity .15s ease, border-color .15s ease;
}
/* Composição no padrão Efi: fieldset vira flex-wrap (mesmo desenho do
   .asaas-cc-form-wrapper) — Validade|CVV dividem a linha 50/50 e o
   resto ocupa linha inteira. Os calc() com !important vencem o 49%
   inline-flex da regra base de .form-row-first/last. */
.dmhub-checkout #payment .payment_box [id^="tela-cielo-webservice"] fieldset.wc-credit-card-form {
	display: flex;
	flex-wrap: wrap;
	column-gap: 12px;
	row-gap: 0;
	align-items: flex-start;
	padding: 0;
	margin: 0;
	border: 0;
}
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice,
.dmhub-checkout #payment .payment_box #tela-bandeiras-cielo {
	flex: 0 0 100%;
	width: 100% !important;
	max-width: 100%;
	float: none !important;
}
/* Par Validade|CVV lado a lado por padrão (todas as larguras e layouts
   — o 3-col desktop empilha via bloco "pares × layout" acima, que tem
   seletor Cielo próprio pra vencer esta regra). O que truncava no
   mobile era o sufixo (MM/AA) do label — encurtado pra "Validade" no
   shim; o formato fica claro pela máscara do próprio campo. */
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-first,
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-last {
	flex: 0 0 calc(50% - 6px);
	width: calc(50% - 6px) !important;
	max-width: calc(50% - 6px);
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice {
	margin: 0 0 14px !important;
}
.dmhub-checkout #payment .payment_box .campos_cielo_webservice label {
	display: block;
	padding: 0 0 6px !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-card-text, #374151);
}
.dmhub-checkout #payment .payment_box .campos_cielo_webservice .input-text,
.dmhub-checkout #payment .payment_box .campos_cielo_webservice select {
	box-sizing: border-box;
	height: 44px !important;
	width: 100% !important;
	padding: 0 14px;
	font-size: 16px; /* 16px+: iOS dá zoom em menos */
	line-height: 1.2 !important;
	color: var(--color-card-text, #111827);
	background-color: var(--color-card-bg, #fff) !important;
	border: 1px solid var(--color-border, #d1d5db) !important;
	border-radius: var(--radius-input, 8px);
	box-shadow: none !important; /* mata o filete verde inset inline */
	transition: border-color .15s ease, box-shadow .15s ease;
}
.dmhub-checkout #payment .payment_box .campos_cielo_webservice .input-text:focus,
.dmhub-checkout #payment .payment_box .campos_cielo_webservice select:focus {
	outline: none;
	border-color: var(--color-accent, #00cb02) !important;
	box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb, 0 203 2) / .18) !important;
}
.dmhub-checkout #payment .payment_box .campos_cielo_webservice select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}
/* Par Validade|CVV: cada P vira flex interno com o label na linha de
   cima e o(s) controle(s) embaixo — mata o display:inline-flex da regra
   base de .form-row-first/last, que poria label e campo lado a lado.
   width 100% (NÃO auto): com auto o input dimensiona pelo atributo
   size (~20ch) e estoura a metade da linha — Validade/CVV "grandes",
   achado do dono no DevTools; 100% !important também vence o
   width:45% inline do plugin. */
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-first,
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-last {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-first label,
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-last label {
	flex: 0 0 100%;
	width: 100% !important;
	padding: 0 !important;
}
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-first select,
.dmhub-checkout #payment .payment_box p.campos_cielo_webservice.form-row-last .input-text {
	flex: 1 1 0;
	width: 100% !important;
	min-width: 0;
}
/* Link "Usar outro CPF" (injetado pelo shim) como PRIMEIRO filho do
   fieldset: sem reivindicar a linha inteira ele dividiria a linha flex
   com o campo seguinte — era o "espremido entre Titular e Número".
   À DIREITA (herda o text-align:right de .dmhub-efi-cpf-switch), igual
   ao da Efi — houve uma versão centralizada, revertida a pedido do
   dono. O respiro de 14px descola das bandeiras logo abaixo (mobile
   ficava espremido). */
.dmhub-checkout #payment .payment_box [id^="tela-cielo-webservice"] fieldset.wc-credit-card-form > .dmhub-cielo-cpf-switch {
	flex: 0 0 100%;
	width: 100%;
	margin: 4px 0 14px;
}

.dmhub-checkout #payment .payment_box:is(.payment_method_wc_gerencianet_cartao, .payment_method_asaas-credit-card, .payment_method_loja5_woo_cielo_webservice) .vc-efi-security__text small {
	display: block !important;
	font-size: 11px !important;
	color: var(--color-accent-dark, #166534) !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	opacity: 0.85;
}

/* Validation inline errors — Efi cartao
 * Aparece embaixo de cada input quando user clica 'Comprar agora' com
 * campo vazio/invalido. Mesma estetica do .dmhub-field-error usado
 * pros campos de Perfil. */

.dmhub-checkout .vc-efi-field-error {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #c0392b;
	font-weight: 500;
	line-height: 1.4;
}

.dmhub-checkout .vc-efi-has-error input,
.dmhub-checkout .vc-efi-has-error select {
	border-color: #f5b8af !important;
	background-color: #fef3f2 !important;
}

.dmhub-checkout .vc-efi-has-error input:focus,
.dmhub-checkout .vc-efi-has-error select:focus {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important;
}

/* Status inline pro Efi cartao — substitui SweetAlerts (loading + erros).
 * Container compartilhado: vira spinner durante tokenizacao OU mensagem de
 * erro. Aparece dentro do payment_box, embaixo dos campos do cartao.
 * Justificativa: SweetAlert full-screen do plugin Efi era hostile mobile
 * (sobre teclado virtual) e inconsistente com o resto do checkout (inline). */

.dmhub-checkout .vc-efi-status {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	display: none;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.4;
}

.dmhub-checkout .vc-efi-status.is-loading,
.dmhub-checkout .vc-efi-status.is-error {
	display: flex;
}

.dmhub-checkout .vc-efi-status.is-loading {
	background: #f0f9ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
}

.dmhub-checkout .vc-efi-status.is-error {
	background: #fef3f2;
	border: 1px solid #f5b8af;
	color: #c0392b;
}

.dmhub-checkout .vc-efi-status__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid #bfdbfe;
	border-top-color: #1e40af;
	border-radius: 50%;
	animation: vc-efi-spin 0.7s linear infinite;
	flex-shrink: 0;
}

.dmhub-checkout .vc-efi-status__icon {
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.dmhub-checkout .vc-efi-status__text {
	flex: 1;
	font-weight: 500;
}

/* Pagar.me e gateways modernos usam markup próprio (às vezes iframe pra
   tokenização PCI). O floating label nosso não funciona bem em iframes
   (não detecta :focus / :placeholder-shown). Aqui voltamos pro layout
   tradicional dentro de .payment_box: label ESTÁTICO acima do input.
   Match com a UX nativa do Pagar.me em outros sites WC. */

.dmhub-checkout #payment .payment_box .form-row {
	position: static !important;
}

.dmhub-checkout #payment .payment_box .form-row > label {
	position: static !important;
	transform: none !important;
	display: block !important;
	background: transparent !important;
	padding: 0 0 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #475063 !important;
	max-width: none !important;
	overflow: visible !important;
	white-space: normal !important;
	pointer-events: auto !important;
	z-index: auto !important;
}

.dmhub-checkout #payment .payment_box .form-row > label .required,
.dmhub-checkout #payment .payment_box .form-row > label abbr {
	color: #c0392b !important;
	margin-left: 2px;
}

.dmhub-checkout #payment .payment_box .form-row input[type="text"],
.dmhub-checkout #payment .payment_box .form-row input[type="tel"],
.dmhub-checkout #payment .payment_box .form-row input[type="number"],
/* password/sem-type: CVV como type=password ou input sem atributo type
   (gateway varia) ficava fora da regra e <16px = zoom do iOS no focus,
   deslocando o viewport no meio do cartao. */
.dmhub-checkout #payment .payment_box .form-row input[type="password"],
.dmhub-checkout #payment .payment_box .form-row input:not([type]),
.dmhub-checkout #payment .payment_box .form-row select {
	min-height: 44px !important;
	padding: 10px 12px !important;
	/* 16px minimo iOS Safari — anti-zoom on focus. Aplica a inputs de
	   cartao Pagar.me/MP/Asaas (regra :1659 cobre Efi com !important). */
	font-size: 16px;
}

/* Reset de fieldset/box do gateway (Pagar.me/MP/etc envolvem o CC form
   num fieldset com border default do browser) */

.dmhub-checkout #payment .payment_box fieldset,
.dmhub-checkout #payment .payment_box .wc-pagarme-cc-form,
.dmhub-checkout #payment .payment_box .pagarme-cc-form,
.dmhub-checkout #payment .payment_box .form-row-group {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

.dmhub-checkout #payment .payment_box fieldset > legend,
.dmhub-checkout #payment .payment_box legend {
	display: none !important;
}

.dmhub-checkout #payment .payment_box::before {
	display: none !important;
}

.dmhub-checkout #payment li input[type="radio"]:checked ~ .payment_box {
	display: block;
}

/* Página de erro do carrinho no checkout (item sem estoque) — transparente,
   lista qual item e por quê, em vez do genérico do WooCommerce. */
.dmhub-cart-errors {
	max-width: 560px;
	margin: 24px auto;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 12px;
}
.dmhub-cart-errors__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #1f2329;
}
.dmhub-cart-errors__intro { margin: 0 0 10px; color: #475063; }
.dmhub-cart-errors__list {
	margin: 0 0 12px;
	padding: 12px 14px;
	list-style: none;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #b91c1c;
}
.dmhub-cart-errors__list li { padding: 3px 0; }
.dmhub-cart-errors__hint { margin: 0 0 16px; color: #667085; font-size: 14px; }
.dmhub-cart-errors__actions { margin: 0; }

/* ─────────────────────────────────────────────────────────────────────
   Asaas Cartão de Crédito — FLOATING LABEL (igual ao resto do checkout).
   O override genérico acima (.payment_box .form-row > label) força label
   ESTÁTICO pra gateways com iframe/markup imprevisível. O Asaas renderiza
   inputs NATIVOS em .form-row com <label> + placeholder=" ", então casa
   perfeitamente o nosso floating — aqui RESTAURAMOS o comportamento só pra
   ele (seletor mais específico + !important pra vencer o estático). Os
   campos mês/ano originais ficam display:none (substituídos pelo nosso
   campo único MM/AA #dmhub-asaas-cc-expiry, que também é .form-row).
   ───────────────────────────────────────────────────────────────────── */
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row {
	position: relative !important;
}
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row > label {
	position: absolute !important;
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	background: #ffffff !important;
	padding: 0 4px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	pointer-events: none !important;
	transition: top .15s ease, font-size .15s ease, color .15s ease !important;
	z-index: 1 !important;
	line-height: 1 !important;
	max-width: calc(100% - 24px) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
}
/* Float up: foco, campo preenchido (placeholder=" "), select, ou .has-value. */
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row:has(input:focus) > label,
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row:has(input:not(:placeholder-shown)) > label,
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row:has(select) > label,
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row:focus-within > label,
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row.has-value > label {
	top: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}
/* Placeholder transparente (o " " do Asaas já é invisível; garante que
   nenhum placeholder herdado apareça atrás do label flutuante). */
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row input::placeholder {
	color: transparent !important;
}
/* Inputs do cartão Asaas no MESMO tamanho dos campos do checkout. O override
   genérico de gateway (acima) os deixava menores (44px / padding 10px); aqui
   alinhamos ao padrão (50px / padding 16px 12px 14px / radius do checkout). */
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row input[type="text"],
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row input[type="tel"],
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row input[type="number"],
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card .form-row select {
	min-height: 50px !important;
	padding: 16px 12px 14px !important;
	border-radius: var(--radius-input, 12px) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}
/* Espaço acima do select de Parcelas. O último campo do cartão (Código) é
   :last-child do .asaas-cc-form-wrapper, então perde a margin-bottom (regra
   .form-row:last-child); o campo de Parcelas fica FORA do wrapper sem
   margin-top → colavam (visível no mobile). */
.dmhub-checkout #payment .payment_box.payment_method_asaas-credit-card #asaas-cc-installments_field {
	margin-top: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   Loja5 Woo Cielo Webservice — FLOATING LABEL (mesmo desenho do bloco
   Asaas acima). Fica DEPOIS do bloco Cielo (:2247) de propósito: nos
   labels de .form-row-first/-last a especificidade EMPATA com as regras
   de label estático de lá e o desempate é ordem de origem.
   Os inputs do plugin têm placeholder REAL ("0000000000000000", "CPF ou
   CNPJ") — daí o placeholder transparente, senão ele aparece atrás do
   label centralizado.
   Escopo só crédito/débito: são os únicos boxes com campos de cartão
   (boleto/tef reusam a classe .campos_cielo_webservice e seguem com o
   label estático).
   ───────────────────────────────────────────────────────────────────── */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice {
	position: relative !important;
}
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice > label {
	position: absolute !important;
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	/* Mesma tinta do fundo do input (bloco Cielo usa --color-card-bg) pro
	   label "cortar" a borda quando flutua. */
	background: var(--color-card-bg, #ffffff) !important;
	padding: 0 4px !important;
	width: auto !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	pointer-events: none !important;
	transition: top .15s ease, font-size .15s ease, color .15s ease !important;
	z-index: 1 !important;
	line-height: 1 !important;
	max-width: calc(100% - 24px) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
}
/* Float up: foco, campo preenchido, select, ou .has-value. A linha da
   Validade (.dmhub-cielo-exp-row) sai do :has(select) — os selects
   mês/ano dela ficam display:none e quem manda no float é o input
   único MM/AA (com placeholder=" "). */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice:has(input:focus) > label,
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice:has(input:not(:placeholder-shown)) > label,
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice:not(.dmhub-cielo-exp-row):has(select) > label,
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice:focus-within > label,
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice.has-value > label {
	top: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice input::placeholder {
	color: transparent !important;
}
/* Campos no MESMO tamanho dos do checkout (50px / padding 16px 12px 14px
   / radius do checkout). O height fixo de 44px do bloco Cielo vira auto
   pro min-height mandar. */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice .input-text,
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice select {
	height: auto !important;
	min-height: 50px !important;
	padding: 16px 12px 14px !important;
	border-radius: var(--radius-input, 12px) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}
/* A seta (background-image do bloco Cielo) fica em right 14px — o
   padding uniforme acima comeria o respiro dela. */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice select {
	padding-right: 38px !important;
}
/* Campo único MM/AA ocupa a linha inteira da Validade (os dois selects
   que a dividiam estão display:none). width 100%, NÃO auto: com auto o
   input dimensiona pelo atributo size (~20ch) e estoura a metade da
   linha do par — era o que deixava Validade/CVV "grandes" (achado do
   dono no DevTools). */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice.dmhub-cielo-exp-row > .input-text {
	flex: 1 1 0;
	width: 100% !important;
	min-width: 0;
}
/* Erro no MM/AA (ano fora da janela de anos do select do plugin). A
   regra compartilhada .vc-efi-has-error input perde do
   `border: ... !important` do bloco Cielo — daí o bridge no escopo. */
.dmhub-checkout #payment .payment_box:is(.payment_method_loja5_woo_cielo_webservice, .payment_method_loja5_woo_cielo_webservice_debito) p.campos_cielo_webservice.vc-efi-has-error .input-text {
	border-color: #f5b8af !important;
	background-color: #fef3f2 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Efi (Gerencianet) Cartão — FLOATING LABEL (mesmo desenho do bloco
   Asaas acima; pedido: "Pagar.me, Asaas e Efi... mostrar o label dentro
   e ao clicar sobe"). O bloco Efi (:1999) desenha label ESTÁTICO acima
   do campo — estas regras vêm DEPOIS e vencem por ordem + especificidade.
   Markup real do 3.2.0: <div class="form-row form-row-wide"> com <label>
   + <input> filhos diretos (NÃO <p> — a 1ª versão deste bloco escopava
   em p e nunca casava). Escopo = .form-row com <label> filho direto +
   input/select nativo (sem checkbox/radio/iframe).
   efi.js injeta placeholder=" " nos inputs pro :placeholder-shown casar
   (número e CVV vêm sem placeholder; CPF/validade têm placeholder real
   do plugin, que fica transparente).
   Âncora em top:25px (metade dos 50px do input) em vez de 50% da linha:
   a mensagem de erro inline (.checkout-inline-error-message, block)
   cresce a linha por baixo e 50% descentralizaria o label.
   ───────────────────────────────────────────────────────────────────── */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) {
	position: relative !important;
}
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label {
	position: absolute !important;
	top: 25px !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	background: #ffffff !important;
	padding: 0 4px !important;
	width: auto !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	pointer-events: none !important;
	transition: top .15s ease, font-size .15s ease, color .15s ease !important;
	z-index: 1 !important;
	line-height: 1 !important;
	max-width: calc(100% - 24px) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
}
/* Float up: foco, campo preenchido (placeholder=" "), select, ou .has-value. */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(input:focus):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(input:not(:placeholder-shown)):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)):focus-within > label,
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row.has-value:has(> label) > label {
	top: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input::placeholder {
	color: transparent !important;
}
/* Campos no MESMO tamanho dos do checkout (o bloco Efi fixa height 44px
   — vira auto pro min-height mandar). Padding SÓ horizontal: o label
   flutuante daqui ancora em top:25px FIXO (metade dos 50px), e o
   padding vertical 16/14 herdado do padrão Asaas crescia o input pra
   ~52px (16px de fonte × 1.4 + 30 de padding) — centro real ~26px,
   label visivelmente fora do lugar e linhas com alturas diferentes
   (achado do dono no DevTools). Sem padding vertical o input fecha nos
   50px do min-height e o texto centraliza nativamente. */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input[type="text"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input[type="tel"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input[type="number"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input[type="password"],
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) input:not([type]),
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) select {
	height: auto !important;
	min-height: 50px !important;
	padding: 0 12px !important;
	border-radius: var(--radius-input, 12px) !important;
	line-height: 1.4 !important;
}
/* O shorthand de padding acima clobba os paddings-right funcionais do
   bloco Efi — badge da bandeira (56px) e chevron do select (36px). */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label).vc-efi-card-number-wrap input {
	padding-right: 56px !important;
}
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .form-row:has(> label) select {
	padding-right: 36px !important;
}
/* A badge de bandeira compensava o label estático acima (margin-top 13px)
   — com o label DENTRO do campo, a compensação descentralizaria a badge. */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-card-number-wrap .vc-efi-brand {
	margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Pagar.me Cartão — FLOATING LABEL (mesmo desenho do bloco Asaas).
   O checkout transparente do plugin oficial (woo-pagarme-payments)
   renderiza inputs NATIVOS em <p class="form-row"> com <label> — a
   tokenização client-side lê os inputs locais, não há iframe. Ainda
   assim o guard :not(:has(iframe)) protege variantes tokenizadas em
   iframe: nelas o label segue estático (comentário do bloco :2535).
   pagarme.js injeta placeholder=" " onde o plugin não põe placeholder.
   ───────────────────────────────────────────────────────────────────── */
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) {
	position: relative !important;
}
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label {
	position: absolute !important;
	top: 25px !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	background: #ffffff !important;
	padding: 0 4px !important;
	width: auto !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #6b7280 !important;
	pointer-events: none !important;
	transition: top .15s ease, font-size .15s ease, color .15s ease !important;
	z-index: 1 !important;
	line-height: 1 !important;
	max-width: calc(100% - 24px) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
}
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(input:focus):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(input:not(:placeholder-shown)):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(select):not(:has(input[type="checkbox"], input[type="radio"], iframe)) > label,
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label):has(input, select):not(:has(input[type="checkbox"], input[type="radio"], iframe)):focus-within > label,
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row.has-value:has(> label) > label {
	top: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input::placeholder {
	color: transparent !important;
}
/* Campos no MESMO tamanho dos do checkout (o override genérico de
   gateway os deixa em 44px / padding 10px). Padding SÓ horizontal —
   mesma geometria do bloco Efi: label ancorado em top:25px fixo, o
   padding vertical crescia o input além dos 50px e descentralizava o
   label (vide comentário do bloco Efi). */
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input[type="text"],
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input[type="tel"],
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input[type="number"],
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input[type="password"],
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) input:not([type]),
.dmhub-checkout #payment .payment_box[class*="payment_method_woo-pagarme-payments"] p.form-row:has(> label) select {
	height: auto !important;
	min-height: 50px !important;
	padding: 0 12px !important;
	border-radius: var(--radius-input, 12px) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}

/* Place order — usa variáveis CSS pra ser customizável via admin
   (Aparência → Cor principal / Cor texto botão / Radius do botão). */

.dmhub-checkout #place_order {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 22px;
	background: var(--color-accent, #00cb02) !important;
	color: var(--color-button-text, #ffffff) !important;
	border: none !important;
	border-radius: var(--radius-pill, 1000px) !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	/* uppercase e :disabled vieram do bloco legado "pill verde igual
	   .btn--cart" (removido) — eram os únicos efeitos dele que ainda
	   chegavam ao render; o resto perdia por especificidade. */
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 16px;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background .15s ease, transform .08s ease, filter .15s ease;
}

.dmhub-checkout #place_order:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.dmhub-checkout #place_order:hover,
.dmhub-checkout #place_order:focus,
.dmhub-checkout #place_order:active {
	/* filter brightness derivado da cor principal funciona pra qualquer
	   tom (verde, azul, vermelho) sem precisar hardcoded #00b302. */
	filter: brightness(0.92);
	color: var(--color-button-text, #ffffff) !important;
}

.dmhub-checkout #place_order:active { transform: translateY(1px); }

.dmhub-place-order__icon { flex: 0 0 auto; color: var(--color-button-text, #ffffff); }

.dmhub-place-order__label { display: inline-block; color: var(--color-button-text, #ffffff); }

.dmhub-checkout #place_order:hover .dmhub-place-order__label,
.dmhub-checkout #place_order:hover .dmhub-place-order__icon { color: var(--color-button-text, #ffffff) !important; }

@media (prefers-reduced-motion: reduce) {
	#place_order,
	#place_order::before,
	#place_order::after {
		animation: none !important;
	}
}

/* Place order — loading state durante tokenizacao Efi e/ou submit AJAX
 * do WC. Bloqueia clique (pointer-events:none) + cursor wait + opacidade
 * leve. Reusa keyframe vc-efi-spin (definido junto do status inline). */

.dmhub-checkout #place_order.vc-loading {
	background: var(--color-accent-dark, #00b302) !important;
	cursor: wait;
	opacity: 0.85;
	pointer-events: none;
}

.dmhub-checkout #place_order.vc-loading:hover {
	box-shadow: none !important;
}

.dmhub-checkout .vc-place-order__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: vc-efi-spin 0.7s linear infinite;
	flex: 0 0 auto;
	vertical-align: middle;
}

.dmhub-checkout .vc-place-order__label {
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
	/* Sem giro — o label "Processando pagamento…" ja comunica o estado. */
	.dmhub-checkout .vc-place-order__spinner,
	.dmhub-mobile-cta__btn .vc-place-order__spinner {
		animation: none;
	}
}

/* Loading state × customizacoes do botao (Settings → Botao de finalizar
 * compra). Icone e animacoes sao aplicados via CSS dinamico do Template
 * (::before = icone com mask-image; ::after + keyframes = reflexo/comet;
 * animation no proprio botao = pulse/glow). Durante o vc-loading:
 *  - ::before some — senao o cadeado/carrinho ficava AO LADO do spinner
 *    (dois indicadores, visual poluido);
 *  - animacoes congelam — pulsante/reflexo/comet sao linguagem de "clique
 *    aqui", contradizendo o "Processando pagamento… aguarde". content:none
 *    mata o sweep/halo do ::after inteiro; animation:none para o scale do
 *    botao (o box-shadow estatico do glow pode ficar — nao anima).
 * O spinner e' um <span> FILHO — animation:none no botao nao o afeta.
 * Especificidade: .vc-loading adiciona uma classe sobre os mesmos
 * seletores do CSS dinamico (que e' impresso depois, mas perde por
 * especificidade). */
.dmhub-checkout #place_order.vc-loading,
.dmhub-mobile-cta__btn.vc-loading {
	animation: none !important;
}
.dmhub-checkout #place_order.vc-loading::before,
.dmhub-mobile-cta__btn.vc-loading::before {
	content: none !important;
}
.dmhub-checkout #place_order.vc-loading::after,
.dmhub-mobile-cta__btn.vc-loading::after {
	content: none !important;
	animation: none !important;
}

/* Picker de frete dentro do passo 2 */

.dmhub-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 4px;
}

.dmhub-shipping-methods:empty { display: none; }

.dmhub-shipping-method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-input, 12px);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.dmhub-shipping-method:hover { border-color: #c9d2cc; }

.dmhub-shipping-method.is-active {
	border-color: var(--color-accent-dark, #1f7a4d);
	background: var(--color-accent-soft, #f1f8f3);
}

.dmhub-shipping-method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.dmhub-shipping-method__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c9d2cc;
	position: relative;
}

.dmhub-shipping-method.is-active .dmhub-shipping-method__radio {
	border-color: var(--color-primary, var(--color-accent-dark, #1f7a4d));
}

.dmhub-shipping-method.is-active .dmhub-shipping-method__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--color-primary, var(--color-accent-dark, #1f7a4d));
	border-radius: 50%;
}

/* Single shipping method (so 1 opcao disponivel — WC renderiza como
 * <input type="hidden">). Renderizamos como card estatico marcado, sem
 * cursor pointer / sem hover (nao da pra desselecionar). */

.dmhub-shipping-method.is-single {
	cursor: default;
	border-color: var(--color-accent-dark, #1f7a4d);
	background: var(--color-accent-soft, #f1f8f3);
}

.dmhub-shipping-method.is-single:hover {
	border-color: var(--color-primary, var(--color-accent-dark, #1f7a4d));
}

.dmhub-shipping-method.is-single .dmhub-shipping-method__radio {
	border-color: var(--color-primary, var(--color-accent-dark, #1f7a4d));
}

.dmhub-shipping-method.is-single .dmhub-shipping-method__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--color-primary, var(--color-accent-dark, #1f7a4d));
	border-radius: 50%;
}

.dmhub-shipping-method__title {
	font-size: 14px;
	color: var(--color-dark, #303030);
}

.dmhub-shipping-method__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dmhub-shipping-method__title {
	font-weight: 500;
	line-height: 1.2;
}

.dmhub-shipping-method__eta {
	font-size: 11px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.2;
}

.dmhub-shipping-method__price {
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-dark, #303030);
}

/* Bloco legado do #place_order ("pill verde igual .btn--cart") removido:
   quase tudo era derrotado pela regra .dmhub-checkout #place_order acima
   (mais específica + !important) — só text-transform e :disabled chegavam
   ao render, e ambos foram incorporados lá. O hover que invertia pra
   fundo branco nunca aparecia. */

/* Wrappers do WC posicionados como TOAST bottom-right (desktop) /
   bottom-stretched (mobile). Nao mais inline no topo — fica menos
   intrusivo e mais legivel no visual moderno (Stripe/Vercel-like). */

.dmhub-checkout .woocommerce-notices-wrapper,
.dmhub-checkout .woocommerce-NoticeGroup,
body.dmhub-checkout .woocommerce-notices-wrapper {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	max-width: 420px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 99999 !important;
	pointer-events: none; /* permite click-through do wrapper, so as notices interagem */
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dmhub-checkout .woocommerce-notices-wrapper:empty,
.dmhub-checkout .woocommerce-NoticeGroup:empty,
body.dmhub-checkout .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Mobile: estica de 16px de cada borda, sem max-width */

@media (max-width: 640px) {
	.dmhub-checkout .woocommerce-notices-wrapper,
	.dmhub-checkout .woocommerce-NoticeGroup,
	body.dmhub-checkout .woocommerce-notices-wrapper {
		bottom: 16px !important;
		right: 16px !important;
		left: 16px !important;
		max-width: none !important;
	}
}

.dmhub-checkout .woocommerce-error,
.dmhub-checkout .woocommerce-message,
.dmhub-checkout .woocommerce-info {
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: 10px;
	list-style: none;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	pointer-events: auto;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
	animation: dmhub-notice-in .28s cubic-bezier(.4,0,.2,1);
}

.dmhub-checkout .woocommerce-info {
	border-color: #cfe5f4;
	background: #f1f8fc;
	color: #1a4566;
}

/* Notices que escaparem sem wrapper (alguns plugins imprimem direto no
   <main>) — re-posiciona como toast bottom-right alinhado com as notices
   no wrapper, mantem visual consistente. */

.dmhub-page__main > .woocommerce-error,
.dmhub-page__main > .woocommerce-message,
.dmhub-page__main > .woocommerce-info,
.dmhub-page__main > ul.woocommerce-error,
.dmhub-page__main > ul.woocommerce-message {
	position: fixed !important;
	bottom: 24px;
	right: 24px;
	left: auto;
	max-width: 420px;
	margin: 0 !important;
	z-index: 99999;
}

@media (max-width: 640px) {
	.dmhub-page__main > .woocommerce-error,
	.dmhub-page__main > .woocommerce-message,
	.dmhub-page__main > .woocommerce-info,
	.dmhub-page__main > ul.woocommerce-error,
	.dmhub-page__main > ul.woocommerce-message {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}
}

/* Erro: background mais opaco + border solida pra garantir legibilidade
 * em mobile (cliente reportou notice 'transparente desbotada') — antes
 * era rgba 6% que sumia em fundo branco. */

.dmhub-checkout .woocommerce-error {
	border-color: #f5b8af;
	background: #fef3f2;
	color: #991b1b;
	font-weight: 500;
	border-left-width: 4px;
}

.dmhub-checkout .woocommerce-message {
	border-color: var(--color-success-bd, #b7e4c7);
	background: var(--color-success-bg, #f0faf4);
	color: var(--color-success-fg, #1a6b3a);
	border-left-width: 4px;
}

.dmhub-checkout .woocommerce-info {
	border-left-width: 4px;
}

.dmhub-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.7) !important; }

/* Gateway discount badge — pill de sucesso do design system */

.dmhub-discount-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border: 1px solid var(--color-success-bd, #b7e4c7);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-success-bg, #f0faf4);
	color: var(--color-success-fg, #1a6b3a);
	font-size: 11px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.04em;
}

/* =====================================================================
   "Usar endereço de cobrança diferente" toggle + collapsed block
   ===================================================================== */

.dmhub-billing-toggle {
	display: flex;
	align-items: center;
	/* Zero margin-top — toggle fica bem proximo do ultimo campo
	   (Destinatario) sem o "salto" de 8px. O padding interno (12px) +
	   border dashed + bg cinza claro ja' dao respiro visual de "card"
	   separado. margin-bottom de 8px preserva folga ate o billing-block
	   quando o toggle esta ativado. */
	margin: 0 0 var(--spacing-sm, 8px);
	padding: 12px 14px;
	border: 1px dashed var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
}

.dmhub-billing-toggle label {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	cursor: pointer;
	font-size: 13px;
	color: var(--color-dark, #303030);
	user-select: none;
}

.dmhub-billing-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-dark, #303030);
}

.dmhub-billing-block {
	margin: 4px 0 var(--spacing-md, 16px);
	padding: var(--spacing-md, 16px);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	background: var(--color-bg, #fff);
}

.dmhub-billing-block[hidden] { display: none; }

/* Mirror billing rows: ficam REGISTRADOS no $fields['billing'] para
   gateways (Pagar.me, Asaas, Cielo, Efi) encontrarem via getElementById,
   escondidos na seção de Perfil. v2.59.11+: JS move uma única vez pra
   #dmhub-billing-fields no document.ready; visibility é 100% CSS
   abaixo, sem detach/append a cada toggle.

   Defesa em profundidade (v1.2.143): alem do seletor por class,
   fallback por ID cobre o caso de Brazilian Market (ou outro plugin BR)
   re-registrar billing fields APOS nosso reshape, perdendo a class
   `dmhub-billing-mirror`. Os IDs sao unicos no DOM. Quando o JS move
   pra #dmhub-billing-fields (toggle "endereco de cobranca diferente"),
   o elemento sai de .woocommerce-billing-fields -> seletor para de bater
   automaticamente -> fields aparecem normais no toggle.

   CRITICO: regra ESCOPONADA em .dmhub-checkout--fields-active (NAO em
   .dmhub-checkout solto). Em order-pay (link de fatura/Pix pendente),
   gateways como Pagar.me/MP/Efi re-renderizam <div class="woocommerce-
   billing-fields"> antes do 3DS redirect — com escopo solto, campos
   sumiriam com !important e cliente travaria sem pagar (Analista 2/3
   pos-#291). checkout.css carrega global (sidecart) entao o escopo
   tambem evita My Account > Editar Endereco. */

.dmhub-checkout--fields-active .woocommerce-billing-fields .dmhub-billing-mirror,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_postcode_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_address_1_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_address_2_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_number_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_neighborhood_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_city_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_state_field,
.dmhub-checkout--fields-active .woocommerce-billing-fields #billing_country_field {
	display: none !important;
}

/* Default: container visivel apenas com class is-billing-active.
   Sem a class, fields ficam em DOM mas invisiveis (parent display:none).
   Plugins externos (Efi gn-fields fallback, Pagar.me, etc) sempre encontram
   billing_neighborhood/billing_number/etc via getElementById. */

#dmhub-billing-fields:not(.is-billing-active) {
	display: none;
}

#dmhub-billing-fields.is-billing-active .dmhub-billing-mirror {
	display: block !important;
}

.dmhub-billing-block__hint {
	margin: 0 0 12px;
	font-size: 11px;
	color: var(--color-gray, #6b7280);
}

/* =====================================================================
   CEP loading spinner
   ===================================================================== */

.dmhub-cep-loading::after {
	content: '';
	display: inline-block;
	width: 14px; height: 14px;
	margin-left: var(--spacing-sm, 8px);
	border: 2px solid var(--color-gray-light, #d5d8dc);
	border-top-color: var(--color-dark, #303030);
	border-radius: 50%;
	vertical-align: middle;
	animation: dmhub-spin 0.7s linear infinite;
}

/* Quando dentro do .dmhub-reviews-box, é um cartão próprio. */

.dmhub-reviews-box {
	/* Background usa var dedicada de Reviews (Aparência → Avaliações →
	   Fundo do box). Fallback pro --color-card-bg geral pra manter
	   compatibilidade quando admin não customizou. */
	background: var(--color-reviews-box-bg, var(--color-card-bg, var(--color-bg, #fff)));
	border: 1px solid var(--color-card-border, var(--color-border, #e8e8e8));
	border-radius: var(--radius-md, 12px);
	color: var(--color-card-text, var(--color-dark, #303030));
	margin-top: var(--spacing-md, 16px);
	/* Padding harmonizado com .dmhub-step__head + .dmhub-step__body
	   (16px top, 32px sides, 32px bottom). Antes era 24px all sides —
	   destoava dos outros boxes adjacentes. */
	padding: var(--spacing-md, 16px) var(--spacing-lg, 32px) var(--spacing-lg, 32px);
}

.dmhub-reviews-box:empty { display: none; }

@media (max-width: 559px) {
	/* Mobile compacto: matcha o padrão dos demais cards (head+body
	   colapsados num único bloco, sem split). */
	.dmhub-reviews-box { padding: 16px 20px 20px; }
}

.dmhub-reviews-box .dmhub-proof {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Carrossel navigation — setas que JS adiciona quando há ≥5 reviews
   no desktop. Posicionadas metade-dentro / metade-fora da CAIXA
   EXTERNA (`.dmhub-reviews-box`). Anchor é o reviews-box (não o
   .dmhub-proof interno) pra que `left: -18px` seja relativo à borda
   visível da caixa branca — metade do botão atravessa pra fora,
   metade fica sobre a borda. */

.dmhub-reviews-box--has-nav {
	position: relative;
	overflow: visible; /* defesa contra reset de overflow herdado */
}

/* Reset: quando reviews-box assume o role de reference frame, o
   .dmhub-proof interno NÃO deve ser relative (senão captura as setas
   absolute e o left:-18px fica relativo a ele = dentro do padding). */

.dmhub-reviews-box--has-nav .dmhub-proof--has-nav {
	position: static;
}

/* Fallback: quando .dmhub-proof renderiza FORA do reviews-box (raro
   no checkout, mais comum em pages standalone), mantém anchor próprio. */

.dmhub-proof--has-nav:not(.dmhub-reviews-box .dmhub-proof--has-nav) {
	position: relative;
}

/* Setas do "Quem comprou recomenda" — alinhadas com .dmhub-orderbumps__nav
   pra harmonia visual. Mesmo tamanho (26x26), mesma border, mesmo hover
   accent. Antes era 36px com background quase-branco + shadow + scale on
   hover — visualmente diferente do order-bump, quebrava consistência. */

.dmhub-proof__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	background: var(--color-card-bg, var(--color-bg, #fff));
	border: 1px solid var(--color-card-border, var(--color-border, #e8e8e8));
	border-radius: 50%;
	color: var(--color-gray-dark, #555);
	cursor: pointer;
	z-index: 5;
	transition: border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.dmhub-proof__nav:hover {
	border-color: var(--color-accent-dark, var(--color-accent, #1f7a4d));
	color: var(--color-accent-dark, var(--color-accent, #1f7a4d));
}

.dmhub-proof__nav:disabled {
	opacity: 0.35;
	cursor: default;
	border-color: var(--color-card-border, var(--color-border, #e8e8e8));
	color: var(--color-gray-dark, #555);
}

/* Posição half-in / half-out (mesmo padrão das setas do order-bump). */

.dmhub-proof__nav--prev { left: -13px; }

.dmhub-proof__nav--next { right: -13px; }

/* Desktop: mostra setas. Mobile: swipe nativo é mais natural. */

@media (min-width: 720px) {
	.dmhub-proof__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Fallback (quando renderizado fora do reviews-box, mantém estilo antigo). */

.dmhub-proof:not(.dmhub-reviews-box .dmhub-proof) {
	margin-top: var(--spacing-md, 16px);
	padding-top: var(--spacing-md, 16px);
	border-top: 1px dashed var(--color-border, #e8e8e8);
}

.dmhub-proof__head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.dmhub-proof__head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-card-text, var(--color-dark, #303030));
}

/* Layout base do list — swipe horizontal em TODAS as larguras.
   Mobile: 1 review por vez (peek de 10% da próxima).
   Desktop ≥720px: 4 reviews visíveis simultaneamente + auto-scroll
   infinito controlado por JS (Frontend\SocialProof + checkout.js).
   (Feature request do merchant.) */

.dmhub-proof__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0 -4px;
	padding: 4px 4px 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	scroll-padding: 4px;
}

.dmhub-proof__list::-webkit-scrollbar {
	display: none; /* Safari / Chrome / Edge */
}

/* Mobile: 1 review por vez com 10% de peek pra incentivar swipe. */

.dmhub-proof__item {
	flex: 0 0 90%;
	min-width: 0;
	scroll-snap-align: start;
}

/* Desktop: 4 colunas visíveis. gap=10px × 3 gaps = 30px → cada item
   ocupa `calc((100% - 30px) / 4)`. JS habilita auto-scroll infinito. */

@media (min-width: 720px) {
	.dmhub-proof__item {
		flex: 0 0 calc((100% - 30px) / 4);
	}
}

/* Mobile: carrossel full-bleed dentro do .dmhub-reviews-box.
   Quebra o padding horizontal do box (20px → margin negativa) e
   compensa com scroll-padding pra o primeiro card aparecer alinhado
   onde estaria. Ao swipar, os cards podem deslizar até a borda do
   box (visualmente até o limite do card "Quem comprou recomenda"). */

@media (max-width: 719px) {
	.dmhub-reviews-box .dmhub-proof__list {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
		scroll-padding-left: 20px;
	}
}

.dmhub-proof__item {
	padding: 10px 12px;
	border-radius: var(--radius-reviews-card, 6px);
	/* Fundo individual de cada card de avaliação — Aparência →
	   Avaliações → Fundo dos cards. */
	background: var(--color-reviews-card-bg, var(--color-bg-light, #f8f8f8));
	/* Layout interno em coluna: stars topo, texto cresce no meio,
	   footer ancorado no bottom. Em mobile (swipe horizontal) todos
	   os items pegam a altura do maior; sem flex interno, items menores
	   ficavam com tudo colado no topo + espaço vazio abaixo. Mesma
	   regra serve pro desktop (grid 2-col com alturas variando). */
	display: flex;
	flex-direction: column;
}

.dmhub-proof__stars {
	display: flex;
	gap: 1px;
	margin-bottom: 4px;
	color: var(--color-stars, #f4b400);
}

.dmhub-proof__stars .dmhub-proof__star { display: block; }

.dmhub-proof__stars .dmhub-proof__star.is-empty { color: #e6e8eb; }

.dmhub-proof__text {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: var(--font-weight-light, 300);
	line-height: 1.45;
	/* Cor do texto da avaliação — Aparência → Avaliações → Cor do texto. */
	color: var(--color-reviews-text, var(--color-dark, #303030));
	/* flex: 1 → ocupa todo espaço disponível dentro do card, empurrando
	   o footer pra borda inferior. Cards com texto curto OU longo ficam
	   visualmente alinhados — stars topo, footer bottom, texto enche. */
	flex: 1 1 auto;
}

.dmhub-proof__item footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	color: var(--color-gray-dark, #555);
	margin-top: auto; /* ancora no bottom mesmo se text não usar flex:1 */
}

.dmhub-proof__product {
	font-style: italic;
	color: var(--color-gray, #6b7280);
}

/* =====================================================================
   Order received (thank-you) — single-column card layout
   ===================================================================== */

.dmhub-thankyou {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
	max-width: 720px;
	margin: 0 auto;
	/* Padding lateral igual ao checkout (.dmhub-form: 24px desktop, 12px
	   mobile) — antes era 0 horizontal e os cards do order-received
	   encostavam mais na borda que os do checkout. */
	padding: var(--spacing-md, 16px) var(--container-pad, 24px) var(--spacing-lg, 32px);
}

.dmhub-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	padding: var(--spacing-lg, 32px);
}

.dmhub-thankyou__hero { text-align: left; }

.dmhub-thankyou__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--spacing-md, 16px);
}

/* Estados com icone (paid + pending + failed): icone fica AO LADO do
   bloco de texto (h1 + p), em vez de empilhado em cima. Garante transicao
   limpa pending → paid/failed (reload troca o icone + texto sem mudar
   layout). */
.dmhub-thankyou__head--paid,
.dmhub-thankyou__head--pending,
.dmhub-thankyou__head--failed {
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-md, 16px);
}

.dmhub-thankyou__head-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.dmhub-thankyou__head h1 {
	margin: 0;
	font-size: 22px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
}

.dmhub-thankyou__head p {
	margin: 0;
	font-size: 13px;
	color: var(--color-gray-dark, #555);
}

.dmhub-thankyou__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
}

.dmhub-thankyou__badge--paid    { background: #1f9c3b; }

.dmhub-thankyou__badge--pending { background: #b07a00; }

.dmhub-thankyou__badge--failed  { background: #c0392b; }

/* Failed: container de 72px (mesma pegada dos Lottie paid/pending) com o
   badge estatico em 44px dentro — mesmo tamanho dos fallbacks estaticos,
   pro icone cair exatamente na mesma posicao nos tres estados. */
.dmhub-thankyou__failedicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
}
.dmhub-thankyou__failedicon .dmhub-thankyou__badge {
	width: 44px;
	height: 44px;
}
.dmhub-thankyou__failedicon .dmhub-thankyou__badge svg {
	width: 22px;
	height: 22px;
}

/* Hero paid/pending usam Lottie em vez do badge estatico. Container
   fixo (72px) reserva espaco antes do JS rodar (sem CLS). O fallback SVG
   fica ESCONDIDO por default — antes era visivel ate o Lottie injetar,
   causando um "flash" do icone estatico no carregamento (success case,
   ~99% dos acessos). Agora o container fica vazio por ~1 frame ate o
   Lottie aparecer, sem troca visual de icone.
   O fallback so' reaparece quando NAO ha animacao:
     - prefers-reduced-motion: via @media abaixo (imediato, sem esperar JS)
     - Lottie indisponivel/falhou: via .is-static (JS adiciona no catch)
   Ambos icones compartilham regras pra transicao pending → paid ser
   visualmente continua (mesmo box, mesma posicao). */
.dmhub-thankyou__success,
.dmhub-thankyou__loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
}

.dmhub-thankyou__success { color: #1f9c3b; }
.dmhub-thankyou__loading { color: #b07a00; }

.dmhub-thankyou__success svg,
.dmhub-thankyou__loading svg {
	width: 100%;
	height: 100%;
}

.dmhub-thankyou__success-fallback,
.dmhub-thankyou__loading-fallback {
	display: none;
	width: 44px;
	height: 44px;
	padding: 8px;
	color: #fff;
	border-radius: 50%;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.dmhub-thankyou__success-fallback { background: #1f9c3b; }
.dmhub-thankyou__loading-fallback { background: #b07a00; }

/* Lottie nao rodou (indisponivel/erro) — JS marca .is-static pra exibir
   o icone estatico no lugar do container vazio. */
.dmhub-thankyou__success.is-static .dmhub-thankyou__success-fallback,
.dmhub-thankyou__loading.is-static .dmhub-thankyou__loading-fallback {
	display: inline-block;
}

/* Usuario com "reduzir movimento": Lottie nem inicializa (JS bail-out),
   entao mostramos o icone estatico imediatamente via CSS — sem esperar o
   JS do footer (evita container vazio pra esse publico). */
@media (prefers-reduced-motion: reduce) {
	.dmhub-thankyou__success-fallback,
	.dmhub-thankyou__loading-fallback {
		display: inline-block;
	}
}

/* CTA de retentar pagamento (estado failed). As classes btn/btn--filled do
   markup nao existem em CSS nenhum (nem tema, nem nosso) — sem as regras
   abaixo a ancora rendia como link azul sublinhado default do browser. */
.dmhub-thankyou__retry-cta {
	display: inline-flex;
	align-items: center;
	/* Vive dentro do head-text (flex-column, stretch default) — sem o
	   align-self o botao estica; flex-start alinha com titulo/descricao
	   no layout de linha (icone a esquerda). */
	align-self: flex-start;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 28px;
	/* Outline em repouso, preenche com o accent no hover (pedido do
	   lojista): acao secundaria de recuperacao, nao CTA principal. */
	background: transparent;
	border: 1.5px solid var(--color-accent, #00cb02);
	color: var(--color-accent, #00cb02);
	border-radius: var(--radius-pill, 999px);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.dmhub-thankyou__retry-cta:hover,
.dmhub-thankyou__retry-cta:focus {
	background: var(--color-accent, #00cb02);
	color: var(--color-button-text, #fff);
	text-decoration: none;
}
.dmhub-thankyou__retry-cta svg { flex-shrink: 0; }

.dmhub-thankyou__overview {
	list-style: none;
	margin: 0;
	padding: var(--spacing-md, 16px) 0 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 24px;
}

/* Desktop: as 4 infos (Pedido, Data, Total, Pagamento) numa unica linha.
   O auto-fit da regra base so' comporta ~3 colunas de 140px na largura do
   card e jogava "Pagamento" pra segunda linha (o 3+1). Fixar 4 colunas no
   breakpoint de desktop resolve; abaixo de 768px o auto-fit segue caindo
   pra 2 por linha (mobile ja' estava ok). */
@media (min-width: 768px) {
	.dmhub-thankyou__overview {
		grid-template-columns: repeat(4, 1fr);
	}
}

.dmhub-thankyou__overview li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dmhub-thankyou__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray, #6b7280);
}

.dmhub-thankyou__overview strong {
	font-size: 14px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
	word-break: break-word;
}

.dmhub-thankyou__payment > * + * { margin-top: var(--spacing-md, 16px); }

.dmhub-thankyou__details h2,
.dmhub-thankyou__addresses h2,
.dmhub-thankyou__addresses h3 {
	margin: 0 0 var(--spacing-md, 16px);
	font-size: 16px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

/* Fallback CSS pra esconder a linha 'Ações: Pagar Cancelar' caso venha de
   uma fonte que escapa do nosso filter PHP. :has() suportado em Chrome
   105+, Safari 15.4+, Firefox 121+. Targeting seguro: row tfoot que
   contem links pra pay_for_order ou cancel_order. */

.dmhub-thankyou__details .shop_table tr:has(td a[href*="pay_for_order"]),
.dmhub-thankyou__details .shop_table tr:has(td a[href*="cancel_order"]),
.dmhub-thankyou__details .shop_table tr:has(td a[href*="order-pay"]) {
	display: none !important;
}

/* Tabela de detalhes (template order/order-details.php) */

.dmhub-thankyou__details .woocommerce-table--order-details,
.dmhub-thankyou__details .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.dmhub-thankyou__details .shop_table th,
.dmhub-thankyou__details .shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border, #e8e8e8);
	text-align: left;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

.dmhub-thankyou__details .shop_table tfoot th,
.dmhub-thankyou__details .shop_table tfoot td {
	font-weight: var(--font-weight-normal, 400);
}

.dmhub-thankyou__details .shop_table tfoot tr:last-child th,
.dmhub-thankyou__details .shop_table tfoot tr:last-child td {
	font-size: 16px;
	border-top: 1px solid var(--color-border, #e8e8e8);
	padding-top: 14px;
}

/* Customer details (enderecos cobranca + entrega). Cobre 2 contextos:
   - guest: dentro de .dmhub-thankyou__addresses (explicit render)
   - logged-in: dentro de .dmhub-thankyou__details (order-details.php
     renderiza customer-details internamente quando user_id matches) */

.dmhub-thankyou__addresses .woocommerce-customer-details,
.dmhub-thankyou__details .woocommerce-customer-details {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border, #e8e8e8);
}

.dmhub-thankyou__addresses .woocommerce-customer-details address,
.dmhub-thankyou__details .woocommerce-customer-details address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-gray-dark, #555);
	margin: 0;
}

/* Phone/Email do customer-details: render inline com label "Celular:"/"E-mail:".
   Antes WC usava <p> default com margem grande -> espacamento exagerado entre
   address, telefone e email. Spans com display:block + margin minima dao
   layout compacto. Phone segue logo apos a ultima linha do address (ex: CPF)
   sem espaco extra — line-height: 1.7 do address ja da respiro suficiente. */

.dmhub-customer-details__phone,
.dmhub-customer-details__email {
	display: block;
	margin-top: 2px;
}

/* Headings dos enderecos — espaco respiravel acima e abaixo */

.dmhub-thankyou__addresses .woocommerce-customer-details h2,
.dmhub-thankyou__addresses .woocommerce-customer-details h3,
.dmhub-thankyou__details .woocommerce-customer-details h2,
.dmhub-thankyou__details .woocommerce-customer-details h3,
.dmhub-thankyou__details .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-dark, #303030);
}

/* Quando WC renderiza ambos enderecos (cobranca != entrega): grid 2-col
   no desktop (≥ 768px), 1 col no mobile. Quando shipping == billing,
   so 1 coluna existe e ocupa toda largura naturalmente. */

.dmhub-thankyou__addresses .woocommerce-columns--addresses,
.dmhub-thankyou__details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 768px) {
	.dmhub-thankyou__addresses .woocommerce-columns--addresses,
	.dmhub-thankyou__details .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* Fallback pra WC que NAO usa wrapper .woocommerce-columns--addresses
   (versoes mais antigas / themes que sobrescrevem o template) — quando
   o customer-details tem 2 <h2> seguidos de <address> em sequencia,
   forca grid via :has(). */

@media (min-width: 768px) {
	.dmhub-thankyou__details .woocommerce-customer-details:has(h2 + address ~ h2 + address) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}
}

/* Phone/email aparecem como <p> filhos diretos de
   .woocommerce-customer-details (WC core / BR Market injetam abaixo dos
   <address>). Mantem font/cor consistentes com o address e usa margem
   apertada pra nao virar bloco solto com gap visivel. */

.dmhub-thankyou__details .woocommerce-customer-details > p,
.dmhub-thankyou__addresses .woocommerce-customer-details > p {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-gray-dark, #555);
	font-style: normal;
}

/* Primeiro <p> apos um <address> cola visualmente como continuacao do
   bloco (sem gap), igual seria se phone/email viessem dentro do address
   separados por <br>. */

.dmhub-thankyou__details .woocommerce-customer-details address + p,
.dmhub-thankyou__addresses .woocommerce-customer-details address + p {
	margin-top: 0;
}

/* =====================================================================
   Pix block (thank-you) — refined card with steps strip
   ===================================================================== */

.dmhub-pix {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
	text-align: center;
}

/* Fallback visual quando o gateway nao conseguiu gerar o QR Code
   (meta __ASAAS_ORDER vazio em pedidos orfaos / metodo trocado em
   order-pay). Render em Integrations/Gateways/Asaas::handle_missing_pix_meta. */
.dmhub-pix--unavailable {
	gap: 12px;
	padding: 20px;
	background: #fff7e6;
	border: 1px solid #f4d59c;
	border-radius: var(--radius-md, 12px);
	color: #663c00;
}
.dmhub-pix--unavailable .dmhub-pix__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}
.dmhub-pix__unavailable-body p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.5;
}
.dmhub-pix__unavailable-body p:last-child {
	margin-bottom: 0;
}

.dmhub-pix__expired-msg {
	margin: 0;
	font-size: 13px;
	color: #c0392b;
	text-align: center;
}

/* Countdown de expiração do Pix — pill colorido abaixo do título do
   bloco. JS atualiza data-countdown a cada 1s. Cinza normal, amarelo
   quando faltam 5min, vermelho quando expira. */

.dmhub-pix__expiry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px auto 0;
	padding: 4px 12px;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--color-gray-dark, #555);
}

.dmhub-pix__expiry-label {
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 10px;
	color: var(--color-gray, #888);
}

.dmhub-pix__expiry-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--color-dark, #303030);
}

.dmhub-pix.is-near-expiry .dmhub-pix__expiry {
	background: rgba(245, 158, 11, 0.12);
	color: #92400e;
}

.dmhub-pix.is-near-expiry .dmhub-pix__expiry-time {
	color: #b45309;
}

.dmhub-pix.is-expired .dmhub-pix__expiry {
	background: rgba(192, 57, 43, 0.12);
	color: #c0392b;
}

.dmhub-pix.is-expired .dmhub-pix__expiry-time {
	color: #c0392b;
}

.dmhub-pix.is-expired .dmhub-pix__qr,
.dmhub-pix.is-expired .dmhub-pix__payload {
	opacity: 0.4;
	filter: grayscale(.5);
}

.dmhub-pix__qr {
	position: relative;
	margin: 0 auto;
	padding: 4px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	background: #fff;
	width: fit-content;
	min-width: 228px;
	min-height: 228px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Overlay paid: criado dinamicamente pelo pending-payment.js quando o
   polling detecta paid. Lottie de confirmacao toca 1x sobre o QR Code,
   depois JS dispara location.reload(). Fade-in suave evita "flash"
   abrupto. Background opaco esconde o QR por baixo (visual cleanup
   antes da animacao tomar conta). */
.dmhub-pix__paid-overlay {
	position: absolute;
	inset: 0;
	background: #fff;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	animation: dmhub-pix-paid-fade 240ms ease-out;
}

.dmhub-pix__paid-overlay svg {
	width: 92%;
	height: 92%;
}

@keyframes dmhub-pix-paid-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.dmhub-pix__qr img {
	display: block;
	width: 220px;
	height: 220px;
	max-width: 100%;
}

/* Fallback estatico — visivel quando img.onerror dispara is-failed */

.dmhub-pix__qr-fallback {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px;
	max-width: 220px;
	color: #64748b;
	text-align: center;
}

.dmhub-pix__qr-fallback p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.dmhub-pix__qr-fallback p strong {
	font-size: 13px;
	color: #1e293b;
	font-weight: 600;
}

.dmhub-pix__qr-fallback svg {
	color: #94a3b8;
}

.dmhub-pix__qr.is-failed img {
	display: none !important;
}

.dmhub-pix__qr.is-failed .dmhub-pix__qr-fallback {
	display: flex;
}

.dmhub-pix__copy {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm, 8px);
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

.dmhub-pix__copy code {
	display: block;
	padding: 10px 12px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 11px;
	word-break: break-all;
	text-align: left;
	color: var(--color-gray-dark, #555);
}

.dmhub-pix__btn {
	padding: 12px 22px;
	border: 1px solid var(--color-dark, #303030);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-dark, #303030);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.dmhub-pix__btn:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

.dmhub-pix__steps {
	list-style: none;
	margin: var(--spacing-sm, 8px) 0 0;
	padding: var(--spacing-md, 16px) 0 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	text-align: left;
	font-size: 12px;
	color: var(--color-gray-dark, #555);
}

.dmhub-pix__steps li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: var(--color-bg-light, #f8f8f8);
	border-radius: var(--radius-input, 12px);
}

.dmhub-pix__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-dark, #303030);
	color: #fff;
	font-size: 12px;
	font-weight: var(--font-weight-bold, 600);
}

@media (max-width: 600px) {
	.dmhub-card { padding: var(--spacing-md, 16px); }
	.dmhub-thankyou { padding-left: 12px; padding-right: 12px; }
	.dmhub-thankyou__head h1 { font-size: 20px; }
	.dmhub-pix__qr { min-width: 188px; min-height: 188px; }
	.dmhub-pix__qr img { width: 180px; height: 180px; }
}

/* =====================================================================
   Boleto block (thank-you) — substitui o iframe nativo do plugin Efi
   ---------------------------------------------------------------------
   Mesma linguagem visual do bloco Pix: header, CTA primario (Baixar
   PDF), bloco de copia da linha digitavel, steps numerados.
   ===================================================================== */

.dmhub-boleto {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
	text-align: center;
}

.dmhub-boleto__head h2 {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: -0.01em;
	color: var(--color-dark, #303030);
}

.dmhub-boleto__head p {
	margin: 0;
	font-size: 13px;
	color: var(--color-gray-dark, #555);
}

.dmhub-boleto__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: center;
	padding: 14px 28px;
	border: none;
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-primary, var(--color-accent-dark, #1f7a4d));
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease);
}

.dmhub-boleto__download:hover {
	background: var(--color-primary-dark, var(--color-accent-dark, #166038));
	color: #fff;
}

.dmhub-boleto__pdf-hint {
	align-self: center;
	margin: 8px 0 0;
	max-width: 360px;
	color: var(--color-text-muted, #6b7280);
	font-size: 12px;
	line-height: 1.4;
	background: #FFEB3B;
	text-align: center;
	padding: 5px 10px;
	border-radius: 6px;
	font-weight: 600;
}

.dmhub-boleto__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: var(--spacing-md, 16px);
	background: var(--color-bg-light, #f8f8f8);
	border-radius: var(--radius-md, 12px);
}

.dmhub-boleto__copy-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray, #6b7280);
}

.dmhub-boleto__copy code {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
	font-size: 13px;
	color: var(--color-dark, #303030);
	word-break: break-all;
	background: transparent;
	padding: 0 4px;
	line-height: 1.5;
}

.dmhub-boleto__btn {
	padding: 10px 20px;
	border: 1px solid var(--color-dark, #303030);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-dark, #303030);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.dmhub-boleto__btn:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

.dmhub-boleto__steps {
	list-style: none;
	margin: var(--spacing-sm, 8px) 0 0;
	padding: var(--spacing-md, 16px) 0 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	text-align: left;
	font-size: 12px;
	color: var(--color-gray-dark, #555);
}

.dmhub-boleto__steps li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: var(--color-bg-light, #f8f8f8);
	border-radius: var(--radius-input, 12px);
}

.dmhub-boleto__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-dark, #303030);
	color: #fff;
	font-size: 12px;
	font-weight: var(--font-weight-bold, 600);
}

/* =====================================================================
   Header: voltar ao carrinho
   ===================================================================== */

.dmhub-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--spacing-md, 16px);
	color: var(--color-gray-dark, #555);
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--transition, 0.25s ease);
}

.dmhub-back:hover { color: var(--color-dark, #303030); }

.dmhub-back svg   { flex-shrink: 0; }

/* =====================================================================
   Trust block — coluna 1, abaixo do step Perfil
   ===================================================================== */

.dmhub-trust {
	/* Sem box (background/border/radius) — fica inline abaixo do
	   #place_order. Antes parecia um card extra confuso visualmente
	   (card-dentro-de-card no step Pagamento). Padding lateral pra
	   alinhar com os campos do step body acima. */
	padding: var(--spacing-md, 16px) 0 0;
	color: var(--color-gray-dark, #5b6370);
}

/* (Regra .woocommerce-privacy-policy-text canonical movida pra
   linha ~1319 — fonte única de verdade.) */

.dmhub-trust__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md, 16px);
	margin-bottom: var(--spacing-sm, 8px);
}

.dmhub-trust__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

.dmhub-trust__pill svg {
	color: var(--color-dark, #303030);
	flex-shrink: 0;
}

.dmhub-trust__note {
	margin: 0;
	padding-top: var(--spacing-sm, 8px);
	border-top: 1px solid var(--color-bg-light, #f8f8f8);
	color: var(--color-gray, #6b7280);
	font-size: 11px;
	line-height: 1.55;
	text-align: center;
}

.dmhub-trust__note a {
	color: var(--color-dark, #1f2329);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.dmhub-trust__note a:hover {
	color: var(--color-primary, var(--color-accent-dark, #1f7a4d));
}

/* =====================================================================
   Focus visible (DESIGN.md §7)
   ===================================================================== */

.dmhub-checkout :focus-visible {
	outline: 2px solid var(--color-primary, #303030);
	outline-offset: 3px;
}

/* Wrapper do form-row vira referência pra posicionar o label */

.dmhub-checkout .form-row {
	position: relative;
	margin-bottom: 16px;
}

/* Label posicionado dentro do input por padrão (centro vertical) */

.dmhub-checkout .form-row > label {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	background: #ffffff;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
	pointer-events: none;
	transition: top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease;
	z-index: 1;
	line-height: 1;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Float up: input com foco OU com conteúdo (precisa placeholder=" " no input).
   Label fica cinza (mesma cor do texto), sem destaque verde.

   Selects: SEMPRE em estado floating. Diferente de input, select nao tem
   placeholder real — o primeiro <option> ('Selecione uma opcao...') sempre
   eh exibido como conteudo. Sem floating sempre, label 'Estado *' ficaria
   no centro sobrepondo o texto da option, gerando 'Estado * uma opcao...'
   visualmente quebrado (reportado em screenshot).

   Fallback Safari ≤15.3 / Firefox ≤120 (sem :has()):
   - `:focus-within` (Safari 10.5+, FF 52+) cobre o caso de foco
   - `.has-value` (JS-toggled em setupFloatingLabels + input listener)
     cobre o caso de campo preenchido pra inputs/textareas/selects.
   Tudo no mesmo seletor evita duplicação de regras. */

.dmhub-checkout .form-row:has(input:focus) > label,
.dmhub-checkout .form-row:has(input:not(:placeholder-shown)) > label,
.dmhub-checkout .form-row:has(textarea:focus) > label,
.dmhub-checkout .form-row:has(textarea:not(:placeholder-shown)) > label,
.dmhub-checkout .form-row:has(select) > label,
.dmhub-checkout .form-row:focus-within > label,
.dmhub-checkout .form-row.has-value > label {
	top: 0;
	font-size: 11px;
	font-weight: 500;
	color: #5b6370;
}

/* =====================================================================
   Shipping step: 2-col grid no desktop (>= 561px)
   ---------------------------------------------------------------------
   Substitui o float-based 49%/49% pelo grid pra eliminar wrap por
   arredondamento de pixel (problema visivel em colunas estreitas:
   49% + 49% + paddings/borders > 100% -> last drops to next line).

   Layout desejado:
     CEP                          (1 col, full)
     Rua / Logradouro             (1 col, full)
     Numero       | Complemento   (2 cols)
     Bairro       | Cidade        (2 cols)
     Estado       | Destinatario  (2 cols)

   Implementacao: o WC renderiza todos os form-rows do shipping dentro
   de `.woocommerce-shipping-fields__field-wrapper` — esse eh o parent
   alvo do grid (e NAO `.dmhub-step__body`, que tem so 1 filho =
   o wrapper, dai grid no body nao afetava nada).

   Default grid-column: 1 / -1 (span both). form-row-first vai pra
   col 1, form-row-last vai pra col 2. Reset width/float pra que os
   items nao tentem ser 49% nem float dentro do grid.
   ===================================================================== */

@media (min-width: 561px) {
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--spacing-md, 16px);
		row-gap: var(--spacing-md, 16px);
		align-content: start;
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > * {
		grid-column: 1 / -1;
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-first {
		grid-column: 1 / 2;
	}
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > .form-row.form-row-last {
		grid-column: 2 / 3;
	}
	/* Reset float-based widths + margin-bottom: grid row-gap ja controla
	   o spacing entre linhas. Sem isso, form-row[margin-bottom: 16px]
	   somava com row-gap: 16px = 32px entre rows. Tambem deixava margin
	   abaixo da ULTIMA row, criando gap excessivo ate o billing-toggle. */
	.dmhub-step[data-step="shipping"] .woocommerce-shipping-fields__field-wrapper > .form-row {
		width: auto;
		float: none;
		margin: 0;
	}
}

/* WC esconde alguns labels com screen-reader-text (ex: shipping_address_2).
   Como nosso layout depende do label visível, sobrescrevemos. */

.dmhub-checkout .form-row > label.screen-reader-text,
.dmhub-checkout .form-row > .screen-reader-text {
	position: absolute !important;
	width: auto !important;
	height: auto !important;
	padding: 0 4px !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: nowrap !important;
}

/* Skip-links de acessibilidade ("Skip to navigation", "Skip to main
   content") vinham escondidos pelo CSS do tema. Como Template.php
   dequeueia o stylesheet do tema, esses elementos ficavam VISIVEIS
   como texto solto no topo da pagina do checkout. Restauramos o
   pattern .screen-reader-text padrao do WP (clip 1px) — invisivel
   visualmente mas acessivel pra tab + screen reader. Aplicado fora
   do .dmhub-checkout porque os skip-links vivem no <header> do tema,
   antes do container. */

.skip-link,
.screen-reader-text:not(legend),
a.skip-link,
.skip-links,
.wd-skip-links,
.wd-skip-link {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link:focus,
a.skip-link:focus {
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	padding: 8px 12px !important;
	background: #fff !important;
	color: #000 !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 100000 !important;
}

/* Required asterisk */

.dmhub-checkout .form-row > label .required,
.dmhub-checkout .form-row > label abbr.required {
	color: #c0392b;
	text-decoration: none;
	border: none;
	font-weight: 600;
	margin-left: 2px;
}

/* Inputs base — padding maior pra acomodar a label dentro */

.dmhub-checkout .form-row input[type="text"],
.dmhub-checkout .form-row input[type="email"],
.dmhub-checkout .form-row input[type="tel"],
.dmhub-checkout .form-row input[type="number"],
.dmhub-checkout .form-row input[type="date"],
.dmhub-checkout .form-row input[type="password"],
.dmhub-checkout .form-row textarea,
.dmhub-checkout .form-row select {
	width: 100%;
	padding: 16px 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: var(--radius-input, 12px);
	background: #ffffff;
	/* 16px minimo iOS Safari — anti-zoom on focus. Regra :1051 ja' diz
	   16px na base, mas este seletor (.dmhub-checkout .form-row input[...])
	   eh mais especifico e sobrescrevia pra 14px, derrubando o esforco. */
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
	color: #1f2329;
	font-family: inherit;
	font-weight: 400;
	margin: 0;
	min-height: 50px;
}

.dmhub-checkout .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.dmhub-checkout .form-row input::placeholder,
.dmhub-checkout .form-row textarea::placeholder {
	color: transparent; /* placeholder real é " " só pra :placeholder-shown */
}

.dmhub-checkout .form-row input:focus,
.dmhub-checkout .form-row textarea:focus,
.dmhub-checkout .form-row select:focus {
	border-color: var(--color-accent-dark, #1f7a4d);
	outline: none;
	/* Halo na cor configurada (accent + alpha via --color-accent-rgb) —
	   era rgba(31,122,77,.12), o VERDE default congelado: em loja com
	   accent laranja o focus brilhava verde. Mesmo padrão do focus do
	   cupom e do CEP (cart.css). */
	box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb, 0 203 2) / 0.12);
}

/* Wrap interno do WC */

.dmhub-checkout .form-row .woocommerce-input-wrapper {
	width: 100%;
	display: block;
}

/* Force native select sobre o select2 (style mais consistente) */

.dmhub-checkout .select2-container { display: none !important; }

.dmhub-checkout .form-row select { display: block !important; }

/* Chevron customizado nos selects do form: native arrow ficava grudado
   na borda direita (ex: campo Estado). Com appearance:none + SVG chevron
   posicionado a 14px da borda + padding-right 36px, fica visualmente
   alinhado com o resto do form. */

.dmhub-checkout .form-row select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

/* Checkboxes/radios mantêm label normal (não flutua) */

.dmhub-checkout .form-row.checkbox > label,
.dmhub-checkout .form-row .checkbox > label,
.dmhub-checkout .dmhub-billing-toggle label {
	position: static;
	transform: none;
	background: transparent;
	padding: 0;
	pointer-events: auto;
	font-size: 14px;
	color: #1f2329;
	font-weight: 400;
	max-width: none;
	overflow: visible;
	white-space: normal;
	line-height: 1.4;
	z-index: auto;
}

.dmhub-checkout .form-row.checkbox > input[type="checkbox"],
.dmhub-checkout .form-row .checkbox > input[type="checkbox"] {
	margin-right: 8px;
	accent-color: var(--color-accent-dark, #1f7a4d);
}

/* Estado de erro (woocommerce-invalid) — label e border vermelhos.
   Se o input está vazio (placeholder mostrando), neutraliza o vermelho:
   plugins BR (gateways, BM) marcam required-vazio como invalid no init,
   poluindo a UI antes do cliente sequer interagir. Vermelho só aparece
   quando o cliente DIGITOU algo inválido. */

.dmhub-checkout .form-row.woocommerce-invalid > label {
	color: #c0392b !important;
}

.dmhub-checkout .form-row.woocommerce-invalid input,
.dmhub-checkout .form-row.woocommerce-invalid select,
.dmhub-checkout .form-row.woocommerce-invalid textarea {
	border-color: #c0392b !important;
}

/* Override pra empty fields */

.dmhub-checkout .form-row.woocommerce-invalid:has(input:placeholder-shown) > label,
.dmhub-checkout .form-row.woocommerce-invalid:has(textarea:placeholder-shown) > label {
	color: #6b7280 !important;
}

.dmhub-checkout .form-row.woocommerce-invalid input:placeholder-shown,
.dmhub-checkout .form-row.woocommerce-invalid textarea:placeholder-shown {
	border-color: #d1d5db !important;
}

/* SOFT-DELETE UNDO TOAST — movido pra cart.css pra ficar disponivel
   tambem no sidecart fora de paginas WC (home/shop/produto). cart.css
   eh dep de checkout.css entao continua carregado aqui. */

/* Por padrão, .woocommerce-additional-fields fica escondido. Aparece
   quando o form ganha .has-additional-info via JS. */

.dmhub-checkout .woocommerce-additional-fields {
	display: none;
}

.dmhub-checkout form.checkout.has-additional-info .woocommerce-additional-fields {
	display: block;
	margin-top: 8px;
}

/* Textarea de observações: altura igual aos outros inputs (~50px) com
   resize vertical pra cliente expandir se quiser */

.dmhub-checkout #order_comments {
	min-height: 50px !important;
	max-height: 200px;
	resize: vertical !important;
	padding: 16px 12px 14px !important;
}

/* Textarea: label sempre no topo flutuado (centro vertical não faz
   sentido em textarea, que começa o texto no topo). Aplica-se ao
   #order_comments e qualquer outro textarea futuro. */

.dmhub-checkout .form-row:has(textarea) > label {
	top: 0 !important;
	transform: translateY(-50%) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}

/* =====================================================================
   Acessibilidade — respeita preferência do sistema por menos animação.
   Cobre todas as transitions/animations do plugin. Mantém o efeito de
   "estado mudando" instantâneo (sem subir transition pra 0.01s, que
   causa cascade rendering); usa `none`/`auto` direto.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dmhub-checkout *,
	.dmhub-checkout *::before,
	.dmhub-checkout *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Cashback card — vive DENTRO do step Perfil, entre os campos e o
   botao Avancar. Reforca beneficio antes da acao. Wrapper sem
   .dmhub-cashback-card dentro (regra nao cobre, modulo off) → some
   via :not(:has). */

.dmhub-cashback-wrap:not(:has(.dmhub-cashback-card)) {
	display: none;
}

.dmhub-cashback-wrap {
	margin: 14px 0 6px;
}

.dmhub-cashback-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 10px;
}

.dmhub-cashback-card__icon {
	flex-shrink: 0;
	color: var(--color-accent, #16a34a);
}

.dmhub-cashback-card__content {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dmhub-cashback-card__title {
	font-size: 13.5px;
	font-weight: 600;
	color: #0d4620; /* contrast 8.4:1 sobre #f0fdf4 — WCAG AAA */
	line-height: 1.3;
}

.dmhub-cashback-card__title strong {
	font-weight: 700;
}

.dmhub-cashback-card__sub {
	font-size: 12px;
	font-weight: 400;
	color: #4d6f5a; /* verde dessaturado, secundario */
	line-height: 1.35;
}

@media (max-width: 559px) {
	.dmhub-cashback-card {
		padding: 10px 14px;
		gap: 10px;
	}
	.dmhub-cashback-card__title {
		font-size: 13px;
	}
	.dmhub-cashback-card__sub {
		font-size: 11.5px;
	}
}

/* =====================================================================
   Atalho flutuante "Revise seu pedido" — tab colado no bottom-center.
   Some via JS quando a coluna #dmhub-review-anchor está visível.
   ===================================================================== */

.dmhub-review-jump {
	position: fixed;
	left: 50%;
	/* Cola logo acima do .dmhub-mobile-cta quando ele esta visivel.
	   --dmhub-mobile-cta-h e' setada via JS em refreshVisibility do
	   sticky CTA mobile (checkout.js). Sem CTA visivel = 0px, atinge
	   bottom natural. Transition junto pra evitar "pulo" quando o
	   CTA aparece/some. */
	bottom: var(--dmhub-mobile-cta-h, 0px);
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* clamp(min, fluid, max) — escala padding/fonte conforme viewport.
	   Telas <360px (iPhone SE 1a/2a geracao, Galaxy Fold fechado) tinham
	   "REVISE SEU PEDIDO" colando nas bordas ou estourando largura. rem
	   respeita zoom/preferencia de fonte do usuario; vw acompanha o
	   viewport sem media query. Valores anteriores: padding 12px 20px 14px,
	   font-size 13px, letter-spacing 0.04em. */
	padding: 12px clamp(14px, 4.5vw, 20px) 14px;
	background: var(--color-bg-light, #f8f8f8);
	color: var(--color-dark, #303030);
	border: 1px solid var(--color-border, #e8e8e8);
	border-bottom: none;
	font-family: inherit;
	font-size: clamp(0.6875rem, 2.6vw, 0.8125rem);
	font-weight: 600;
	letter-spacing: clamp(0.02em, 0.4vw, 0.04em);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: calc(100vw - 16px);
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.10);
	z-index: 10000; /* acima do .dmhub-mobile-cta (9999) — review-jump senta em cima */
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background 0.2s ease, bottom 200ms ease;
	will-change: transform;
}

.dmhub-review-jump[hidden] {
	display: inline-flex;                         /* sobrescreve [hidden] pra animar */
	pointer-events: none;
	opacity: 0;
	/* Slide down: precisa cobrir a propria altura + a altura do mobile-cta
	   que possa estar abaixo, senao a tab fica visivel acima do CTA quando
	   "escondida". */
	transform: translateX(-50%) translateY(calc(120% + var(--dmhub-mobile-cta-h, 0px)));
}

.dmhub-review-jump:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

.dmhub-review-jump:active {
	transform: translateX(-50%) translateY(2px);
}

.dmhub-review-jump__chevron {
	flex-shrink: 0;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.dmhub-review-jump { transition: opacity 0.2s ease; }
	.dmhub-review-jump[hidden] { transform: translateX(-50%); }
}

/* Quando sticky CTA mobile esta visivel, a tab pill flutuante e' redundante
   — o link "Revise seu pedido" agora vive dentro do proprio CTA (abaixo
   do TOTAL). Esconder a pill evita 2 affordances pra mesma acao + libera
   ~44px de altura no viewport mobile.
   Toggle via body class (compat com Safari <15.4 / Firefox <121 sem :has())
   — JS em checkout.js seta dmhub-has-mobile-cta em refreshVisibility. */

body.dmhub-has-mobile-cta .dmhub-review-jump {
	display: none !important;
}

/* Container do <form> do cart — padrão idêntico ao checkout
 * (.dmhub-form). max-width + padding centralizam o conteúdo na
 * mesma largura do checkout. Sem isso o form spanava 100% e o inner
 * div ficava com max-width independente, parecendo full-width quando
 * o tema tinha estilos largos no <form>. */

.dmhub-cart-form,
form.dmhub-cart-form,
.dmhub-page__main .dmhub-cart-form {
	max-width: var(--container-max, 1280px) !important;
	margin: 0 auto !important;
	padding: var(--spacing-lg, 32px) var(--container-pad, 24px) var(--spacing-2xl, 96px) !important;
	box-sizing: border-box !important;
	width: auto !important;
}

.dmhub-cart-form .dmhub-cart {
	width: 100%;
	box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════════
 * Sticky CTA Mobile — barra fixa no bottom com Total + Continuar
 * ════════════════════════════════════════════════════════════════════
 * Aparece em mobile quando user rola pra fora da view do place_order.
 * Smooth scroll ate o botao real (sem click programatico — deixa user
 * ver validacoes inline).
 * Display via JS quando IntersectionObserver detecta #place_order fora
 * do viewport.
 */

.dmhub-mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
	box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
	transform: translateY(100%);
	transition: transform 200ms ease;
}

.dmhub-mobile-cta.is-visible {
	transform: translateY(0);
}

.dmhub-mobile-cta__total {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: #64748b;
	line-height: 1.2;
	min-width: 0;
}

/* Label TOTAL e valor R$ na MESMA linha — antes ficavam empilhados.
   baseline alinha o "TOTAL" (font 11px) com o "R$ 115,80" (font 16px)
   pelo pe' das letras. gap 6px da' respiro sem virar visualmente solto. */

.dmhub-mobile-cta__total-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

/* Link secundario "Revise seu pedido" abaixo do TOTAL — substitui a
   tab pill flutuante. Discreto pra nao competir com o CTA principal,
   mas com hit target adequado (padding + min-height) pra WCAG 2.5.5.
   Hover/focus em verde primary pra sinalizar acao navegacional. */

.dmhub-mobile-cta__review {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	padding: 4px 0;
	color: #64748b;
	/* clamp() escala fluido em viewports muito pequenos (<340px),
	   onde "Revise seu pedido" antes encostava ou empurrava o TOTAL. */
	font-size: clamp(0.625rem, 2.2vw, 0.6875rem);
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.01em;
	min-height: 22px;
	max-width: 100%;
	width: max-content;
	white-space: nowrap;
	border-radius: 4px;
	transition: color .15s ease;
}

.dmhub-mobile-cta__review:hover,
.dmhub-mobile-cta__review:focus-visible {
	color: var(--color-primary, var(--color-accent-dark, #1f7a4d));
	text-decoration: underline;
	outline: none;
}

.dmhub-mobile-cta__review:focus-visible {
	outline: 2px solid var(--color-primary, var(--color-accent-dark, #1f7a4d));
	outline-offset: 2px;
	text-decoration: none;
}

.dmhub-mobile-cta__label {
	font-size: 11px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.dmhub-mobile-cta__value {
	font-size: 16px;
	color: #0f172a;
	font-weight: 700;
}

.dmhub-mobile-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	border: 0;
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-accent, #00cb02);
	color: var(--color-button-text, #ffffff);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	transition: filter .15s ease, transform .08s ease;
}

.dmhub-mobile-cta__btn:hover,
.dmhub-mobile-cta__btn:focus {
	filter: brightness(0.92);
	outline: none;
}

.dmhub-mobile-cta__btn:active {
	transform: scale(.98);
}

/* Disabled state quando nenhum metodo de pagamento esta selecionado.
   Mesmo visual do #place_order.dmhub-pm-required (NoDefaultPaymentMethod):
   verde primario MANTIDO + opacity .5 + grayscale .4 + cursor not-allowed.
   Click ainda passa — o handler de submit em NoDefaultPaymentMethod mostra
   o alert "Selecione uma forma de pagamento" e scrolla pra ul.payment_methods. */

.dmhub-mobile-cta__btn.is-disabled,
.dmhub-mobile-cta__btn.dmhub-pm-required,
.dmhub-mobile-cta__btn[aria-disabled="true"] {
	opacity: .5;
	filter: grayscale(.4);
	cursor: not-allowed;
	transition: opacity .2s ease, filter .2s ease;
}

.dmhub-mobile-cta__btn.is-disabled:hover,
.dmhub-mobile-cta__btn.dmhub-pm-required:hover,
.dmhub-mobile-cta__btn[aria-disabled="true"]:hover,
.dmhub-mobile-cta__btn.is-disabled:focus,
.dmhub-mobile-cta__btn.dmhub-pm-required:focus,
.dmhub-mobile-cta__btn[aria-disabled="true"]:focus {
	background: var(--color-primary, var(--color-accent-dark, #1f7a4d));
	transform: none;
}

.dmhub-mobile-cta__btn.is-disabled:active,
.dmhub-mobile-cta__btn.dmhub-pm-required:active,
.dmhub-mobile-cta__btn[aria-disabled="true"]:active {
	transform: none;
}

/* Sticky CTA mobile em loading state — match com #place_order.vc-loading.
 * Sem cor verde (#00b302) porque sticky usa --color-primary da theme; mantem
 * cor base + opacidade leve. Spinner brand-agnostico (border branco). */

.dmhub-mobile-cta__btn.vc-loading {
	cursor: wait;
	opacity: 0.85;
	pointer-events: none;
	transform: none !important;
}

.dmhub-mobile-cta__btn.vc-loading:hover,
.dmhub-mobile-cta__btn.vc-loading:focus {
	box-shadow: 0 2px 8px rgba(31, 122, 77, .25);
}

@media (min-width: 1024px) {
	/* Desktop: column right column always visible — sticky CTA nao faz sentido */
	.dmhub-mobile-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dmhub-mobile-cta { transition: none; }
}

/* Padding bottom em mobile pra que o sticky CTA "REVISE SEU PEDIDO"
   nao cubra conteudo critico. Aplicado no .dmhub-page__footer (em vez
   do shell) pra que o bg branco do footer ESTENDA pra baixo do CTA —
   antes o shell tinha o padding e o body cinza vazava entre o footer
   branco e o CTA, criando 3 cores na base (branco/cinza/CTA). Agora
   so' 2 (branco/CTA) — visual mais coeso, footer envolve o CTA. */
@media (max-width: 1023px) {
	.dmhub-page__footer {
		padding-bottom: 80px;
	}
}

/* =====================================================================
   Order-pay (link de pagamento) — layout constrained com card style
   ---------------------------------------------------------------------
   WC renderiza form-pay.php nativo com layout fullwidth basico (sem
   container, sem card). Aplicamos os mesmos paddings/cards do checkout
   normal pra match visual:
     - Constrain width (720px max) centrado
     - Card branco com border + radius (igual .dmhub-step / .dmhub-review)
     - Spacing interno consistente
     - Botao "Pagar pedido" mesma altura/cor do "Comprar agora" do checkout
   Nao mexe em form-checkout.php (3-col grid normal); CSS escopa em
   body.dmhub-checkout--order-pay pra so afetar order-pay.
   ===================================================================== */

body.dmhub-checkout--order-pay .dmhub-page__main {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--spacing-md, 16px);
	box-sizing: border-box;
}

body.dmhub-checkout--order-pay form#order_review {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	padding: var(--spacing-lg, 32px);
	box-sizing: border-box;
}

@media (max-width: 559px) {
	body.dmhub-checkout--order-pay form#order_review {
		padding: var(--spacing-md, 16px);
	}
}

/* Show order items table no order-pay (escondido em form-checkout pra
   nao duplicar com o right column "Revise seu pedido"). Aqui nao tem
   right column, entao mostra. Override do display:none global em
   linha 634. */

body.dmhub-checkout--order-pay #order_review table.shop_table,
body.dmhub-checkout--order-pay #order_review .woocommerce-checkout-review-order-table {
	display: table !important;
	width: 100%;
	margin: 0 0 var(--spacing-md, 16px);
	border-collapse: collapse;
	font-size: 14px;
}

body.dmhub-checkout--order-pay #order_review table.shop_table th,
body.dmhub-checkout--order-pay #order_review table.shop_table td {
	padding: var(--spacing-sm, 8px);
	border-bottom: 1px solid var(--color-bg-light, #f8f8f8);
	text-align: left;
}

body.dmhub-checkout--order-pay #order_review table.shop_table tfoot th,
body.dmhub-checkout--order-pay #order_review table.shop_table tfoot td {
	font-weight: 600;
	border-top: 1px solid var(--color-border, #e8e8e8);
}

/* Botao "Pagar pedido" — match com .dmhub-mobile-cta__btn */

body.dmhub-checkout--order-pay #order_review #place_order {
	display: block;
	width: 100%;
	margin-top: var(--spacing-md, 16px);
	padding: 14px 20px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Recomendações agora ficam DENTRO do .dmhub-review (após .dmhub-summary__
   totals). Sem border/bg/padding próprios — apenas separação visual via
   margin-top + divider line. */

.dmhub-recommendations {
	margin-top: var(--spacing-md, 16px);
	padding-top: var(--spacing-md, 16px);
	border-top: 1px solid var(--color-card-border, var(--color-border, #e8e8e8));
}

.dmhub-recommendations__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm, 8px);
	margin-bottom: var(--spacing-md, 16px);
}

.dmhub-recommendations__title {
	margin: 0;
	font-size: 16px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: -0.01em;
	color: var(--color-card-text, var(--color-dark, #303030));
}

.dmhub-recommendations__hint {
	font-size: 11px;
	color: var(--color-gray, #6b7280);
	flex-shrink: 0;
	font-weight: 400;
}

/* Card: layout stacked (body em cima, btn full-width embaixo) — mesmo
   padrão do .dmhub-orderbump compact. Carousel wrapper é .dmhub-orderbumps
   (reaproveita CSS + JS de nav arrows do order-bump). */

.dmhub-recommendation {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	background: var(--color-card-bg, #fff);
	border: 1px solid var(--color-card-border, #e8e8e8);
	border-radius: var(--radius-input, 12px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dmhub-recommendation:hover {
	border-color: var(--color-accent, #1f7a4d);
}

.dmhub-recommendation.is-added {
	opacity: 0.5;
	pointer-events: none;
}

/* Body: image + meta lado a lado (horizontal) */

.dmhub-recommendation__body {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.dmhub-recommendation__image {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	margin: 0;
	border-radius: var(--radius-image, 8px);
	overflow: hidden;
	background: #f3f4f6;
}

.dmhub-recommendation__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dmhub-recommendation__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dmhub-recommendation__title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-card-text, #303030);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dmhub-recommendation__category {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-gray, #6b7280);
}

/* Preço — mesmo padrão visual do .dmhub-orderbump__price (cores via
   --color-primary/--color-accent-dark, badge outline em vez de
   preenchido vermelho). Harmonia com o order-bump. */

.dmhub-recommendation__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 2px;
}

/* "A partir de" (produto variável com faixa de preço): sem esta regra o
   span herdava o tamanho base do card e saía MAIOR que o próprio preço,
   quebrando a linha no card estreito (print do dono). Linha própria
   acima do preço (flex 100% no container flex-wrap) pra não disputar
   largura com os dois valores. */
.dmhub-recommendation__price-prefix {
	flex: 0 0 100%;
	font-size: 10.5px;
	line-height: 1.2;
	color: var(--color-gray, #6b7280);
}

.dmhub-recommendation__price-from {
	font-size: 11.5px;
	color: var(--color-gray, #6b7280);
	text-decoration: line-through;
}

.dmhub-recommendation__price-by {
	font-size: 13px;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
}

.dmhub-recommendation__price.is-discounted .dmhub-recommendation__price-by {
	/* --color-accent direto (não --color-primary): temas definem
	   --color-primary por conta própria e o preço saía num tom fora do
	   accent configurado. Mesmo fix do orderbump--expanded (cart.css). */
	color: var(--color-accent, #1f7a4d);
}

/* (.dmhub-recommendation__discount removido — o badge -%N saiu do card:
   estreito demais, quebrava pra linha órfã. Ver Recommendations.php.) */

/* Botão: full-width abaixo do body, outline com --color-accent — mesmo
   padrão visual do .dmhub-orderbump__btn (sem cor preta hardcoded). */

.dmhub-recommendation__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 12px;
	background: transparent;
	/* Outline com a cor configurada (accent), como o comentário acima diz
	   e como o .dmhub-orderbump__btn (--color-primary = accent). Era
	   --color-accent-dark, destoava dos preços/badge Pix. */
	color: var(--color-accent, #1f7a4d);
	border: 1px solid var(--color-accent, #1f7a4d);
	border-radius: var(--radius-sm, 6px);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.dmhub-recommendation__btn:hover {
	background: var(--color-accent, #1f7a4d);
	color: var(--color-button-text, #fff);
}

.dmhub-recommendation__btn:disabled,
.dmhub-recommendation__btn.is-busy {
	cursor: wait;
	opacity: 0.7;
}

/* =====================================================================
   FAQ — "Dúvidas frequentes" antes do footer no checkout
   ---------------------------------------------------------------------
   Acordeão em 2 colunas (empilha em 1 no mobile). Configurável via aba
   FAQ do admin (CheckoutFaq / FaqAdmin).
   ===================================================================== */

.dmhub-faq {
	/* Sem fundo próprio: herda o cinza do checkout pra fazer parte da
	   página (em vez de um box branco solto com gap cinza pro footer). */
	background: transparent;
	padding: 56px 24px;
}

.dmhub-faq__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.dmhub-faq__head {
	text-align: center;
	margin: 0 auto 40px;
	max-width: 640px;
}

.dmhub-faq__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted, #9a9a9a);
}

.dmhub-faq__title {
	margin: 0 0 14px;
	font-size: 30px;
	font-weight: var(--font-weight-bold, 600);
	line-height: 1.2;
	color: var(--color-dark, #303030);
}

.dmhub-faq__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-muted, #6b6b6b);
}

.dmhub-faq__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 56px;
	align-items: start;
}

.dmhub-faq__column {
	display: flex;
	flex-direction: column;
}

.dmhub-faq__item {
	border-bottom: 1px solid var(--color-border, #ececec);
}

.dmhub-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-dark, #303030);
}

.dmhub-faq__question::-webkit-details-marker { display: none; }

.dmhub-faq__question:hover { color: var(--color-accent-dark, #1f7a3d); }

.dmhub-faq__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--color-border, #e0e0e0);
	color: var(--color-dark, #303030);
	transition: transform 0.25s ease, border-color 0.2s ease, background 0.2s ease;
}

.dmhub-faq__item[open] .dmhub-faq__chevron {
	transform: rotate(180deg);
	border-color: var(--color-accent, #00cb02);
	background: var(--color-accent-soft, #f0faf4);
}

.dmhub-faq__answer {
	padding: 0 2px 22px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--color-muted, #6b6b6b);
}

.dmhub-faq__answer :first-child { margin-top: 0; }
.dmhub-faq__answer :last-child { margin-bottom: 0; }
.dmhub-faq__answer a { color: var(--color-accent-dark, #1f7a3d); text-decoration: underline; }

@media (max-width: 768px) {
	.dmhub-faq { padding: 40px 16px; }
	.dmhub-faq__columns { grid-template-columns: 1fr; gap: 0; }
	.dmhub-faq__title { font-size: 24px; }
}


/* ------------------------------------------------------------------
   Preenchimento expresso pra cliente recorrente (returningPrefill)
   A oferta e a edicao vivem em MODAIS (.dmhub-rp-modal); no step de
   frete fica o recap (.dmhub-rp-recap) com os links de acao abaixo.
   ------------------------------------------------------------------ */
.dmhub-rp__link {
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--color-muted, #6b7280);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.dmhub-rp__link:hover { color: var(--color-text, #1f2937); }

.dmhub-rp__link:disabled {
	cursor: default;
	text-decoration: none;
	opacity: .7;
}

/* Expresso: link "Usar outro CPF" sob o campo do dono do cartao Efi
   (injetado pelo efi.js; acao secundaria alinhada a direita, sem sair
   do card — #payment li tem overflow hidden). */
.dmhub-efi-cpf-switch {
	margin: 4px 0 0;
	text-align: right;
}
/* Respiro do link no box Efi: o reset p{margin:0 !important} do bloco
   Efi (:2014) engole o margin acima e o link colava no campo Número
   (feedback do dono). Especificidade maior + !important pra vencer. */
.dmhub-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao p.dmhub-efi-cpf-switch {
	margin: 2px 0 12px !important;
}

/* Card de oferta de cashback (CashbackOffer) — v3: 1a posicao da area
   de order bump do pagamento (antes do primeiro .dmhub-orderbumps ou,
   sem bump elegivel, antes do #payment — sempre dentro do
   #order_review). Mesma logica dos bumps: o update_checkout troca o
   container e o JS re-insere o card do cache (checkout.js). */
.dmhub-cbo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	/* Anatomia unica pros dois estados (liberado e bloqueado): card claro,
	   borda com tinta accent, icone no circulo — o botao Aplicar e a barra
	   de progresso e' que alternam ("descompassado" — feedback do dono). */
	padding: 12px 14px;
	background: var(--color-surface, #ffffff);
	border: 1px solid rgb(var(--color-accent-rgb, 0 203 2) / 0.28);
	border-radius: 10px;
	font-size: 13px;
	color: var(--color-dark, #303030);
	box-sizing: border-box;
	width: 100%;
}

.dmhub-cbo__text {
	flex: 1;
	line-height: 1.4;
}

.dmhub-cbo__text strong { color: var(--color-accent-dark, #007802); }

.dmhub-cbo__apply {
	border: 1.5px solid var(--color-accent, #00cb02);
	background: transparent;
	color: var(--color-accent-dark, #007802);
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.dmhub-cbo__apply:hover {
	background: var(--color-accent, #00cb02);
	color: var(--color-button-text, #ffffff);
}

.dmhub-cbo__apply:disabled { opacity: .6; cursor: default; }

.dmhub-cbo__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgb(var(--color-accent-rgb, 0 203 2) / 0.10);
	color: var(--color-accent-dark, #007802);
}

.dmhub-cbo__icon svg { display: block; }

.dmhub-cbo__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.dmhub-cbo__bar {
	display: block;
	height: 6px;
	margin-top: 5px;
	border-radius: 999px;
	background: rgb(var(--color-accent-rgb, 0 203 2) / 0.12);
	overflow: hidden;
}

.dmhub-cbo__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-accent-dark, #4caf50) 0%, var(--color-accent, #00cb02) 100%);
	transition: width .5s cubic-bezier(0.4, 0, 0.2, 1);
}


.dmhub-cbo__title {
	font-size: 13.5px;
	/* Peso normal na frase — negrito SO' nos valores (feedback do dono:
	   o titulo inteiro em 600 pesava demais; o padrao da linha do minimo,
	   texto normal + valor em bold, e' o certo). */
	font-weight: 400;
	color: var(--color-dark, #303030);
	line-height: 1.4;
}

.dmhub-cbo__title strong {
	font-weight: 600;
	color: var(--color-accent-dark, #007802);
}

.dmhub-cbo__hint {
	font-size: 12px;
	color: var(--color-gray, #6b7280);
	line-height: 1.5;
}

.dmhub-cbo__hint strong {
	color: var(--color-dark, #303030);
	font-weight: 600;
}

@media (max-width: 480px) {
	.dmhub-cbo { flex-wrap: wrap; }
	.dmhub-cbo__apply { flex: 1; }
}

/* Toast layer — avisos transitórios (cupom aplicado/removido) fora do
   alcance do re-render do update_checkout (ver IIFE no checkout.js). */
#dmhub-toast-layer {
	position: fixed;
	right: 24px;
	bottom: 24px;
	left: auto;
	z-index: 2147483600;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	box-sizing: border-box;
	max-width: 420px;
	pointer-events: none;
}

/* Os filhos sao as PROPRIAS notices do WC movidas pra ca' (classes
   preservadas — o card suave com borda lateral vem das regras de
   .woocommerce-message/.woocommerce-info do checkout). A pill escura
   .dmhub-toast morreu: "gosto daquele padrao que aparece na lateral
   direita inferior" (dono). */
#dmhub-toast-layer > * {
	pointer-events: auto;
	cursor: pointer;
	max-width: 100%;
}

/* Cap de pilha: dedup e' so' por texto identico, entao avisos diferentes
   em sequencia empilhavam ate' cobrir a tela. */
#dmhub-toast-layer > *:nth-child(n+4) {
	display: none;
}

@media (max-width: 640px) {
	#dmhub-toast-layer {
		left: 16px;
		right: 16px;
		/* Sobe acima do CTA sticky mobile — o toast nascia por cima dele e
		   roubava o toque do Finalizar (mesma var do .dmhub-review-jump). */
		bottom: calc(16px + var(--dmhub-mobile-cta-h, 0px));
		max-width: none;
		align-items: stretch;
	}
}

/* ---------------------------------------------------------------------
   Toast de CELEBRACAO — cupom de primeira compra
   ---------------------------------------------------------------------
   Este toast faz o papel do modal de boas-vindas (decisao do dono): ele
   precisa CONVERTER, entao destoa dos avisos comuns — filete e tint no
   acento, presente, pop de entrada e UM brilho que varre o card.

   Duas metades:
   - .dmhub-toast--celebrate  -> classe posta pelo hoist do checkout.js no
     CARD (a propria notice do WC movida pro layer). So' existe no toast.
   - .dmhub-fp-celebrate      -> markup que vem DENTRO da notice, do PHP
     (AutoApply::maybe_customize_message). Vale em qualquer lugar onde a
     notice seja impressa (carrinho, wrapper do topo), nao so' no toast.

   Zero emoji e zero <svg> inline: o WC imprime notices por
   wc_kses_notice() (wp_kses contexto 'post'), que remove <svg> — o
   presente e' mask-image aqui no CSS, colorido por currentColor (branco
   sobre o circulo no acento). Sem o nosso CSS o markup degrada pra frase
   corrida (os <span> viram texto).                                      */

.dmhub-checkout .dmhub-toast--celebrate {
	position: relative;
	/* Recorta o brilho que varre o card. Seguro aqui: toast nao abriga
	   popover/tooltip absoluto (ver armadilha do #payment li). */
	overflow: hidden;
	padding: 16px 18px;
	border-color: var(--color-accent-border, #a7e0b3);
	border-left-width: 4px;
	border-left-color: var(--color-accent, #00cb02);
	background: var(--color-accent-soft, #e6faea);
	color: var(--color-dark, #303030);
	box-shadow: 0 12px 32px rgb(var(--color-accent-rgb, 0 203 2) / 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
	/* SEM fill-mode: o kill() do toast aplica opacity/transform INLINE na
	   saida, e animacao com forwards/both venceria o inline (o card sumiria
	   seco, sem fade). Mesma razao do dmhub-notice-in original. */
	animation: dmhub-celebrate-pop .42s cubic-bezier(.2, .9, .3, 1.2);
}

/* Brilho unico (roda 1x, nunca em loop) — overlay diagonal que passa por
   cima do conteudo e some. `both` aqui e' seguro: o pseudo nao recebe o
   inline do kill(). */
.dmhub-checkout .dmhub-toast--celebrate::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	animation: dmhub-celebrate-shine 1.05s cubic-bezier(.25, .6, .3, 1) .22s both;
}

@keyframes dmhub-celebrate-pop {
	0%   { transform: scale(.94) translateY(14px); opacity: 0; }
	65%  { transform: scale(1.015) translateY(0);  opacity: 1; }
	100% { transform: scale(1) translateY(0);      opacity: 1; }
}

@keyframes dmhub-celebrate-shine {
	0%   { transform: translateX(-170%) skewX(-18deg); opacity: 0; }
	12%  { opacity: 1; }
	100% { transform: translateX(330%) skewX(-18deg);  opacity: 0; }
}

/* Conteudo (vem do PHP) */

.dmhub-fp-celebrate {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-align: left;
}

/* Circulo no acento + glifo branco — mesma linguagem dos icones do
   checkout. O <span> chega VAZIO do PHP; tudo aqui e' pseudo. */
.dmhub-fp-celebrate__icon {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent, #00cb02);
	color: #ffffff;
}

.dmhub-fp-celebrate__icon::before {
	content: '';
	position: absolute;
	inset: 0;
	/* currentColor = branco herdado acima; a mask so' recorta a silhueta do
	   presente (traco de 2px, cantos redondos — estilo dos demais icones). */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5' rx='1'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>") center / 20px 20px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5' rx='1'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>") center / 20px 20px no-repeat;
}

/* Tres faiscas discretas: um ponto real + dois em box-shadow, escalando
   pra fora UMA vez. Ancoradas ACIMA do circulo e com offsets que caem
   nos "ombros" dele — dentro do circulo seriam accent sobre accent
   (invisiveis). Mesmo no pico da escala continuam dentro do padding do
   card (que tem overflow:hidden), entao nao sao decapitadas. */
.dmhub-fp-celebrate__icon::after {
	content: '';
	position: absolute;
	top: -5px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--color-accent, #00cb02);
	box-shadow:
		16px 6px 0 -0.5px var(--color-accent, #00cb02),
		-16px 4px 0 -1px var(--color-accent, #00cb02);
	animation: dmhub-celebrate-sparks .85s ease-out .1s both;
}

@keyframes dmhub-celebrate-sparks {
	0%   { opacity: 0; transform: scale(.2); }
	35%  { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.55) translateY(-5px); }
}

.dmhub-fp-celebrate__body {
	display: block;
	min-width: 0;
}

.dmhub-fp-celebrate__title {
	display: block;
	font-size: 15px;
	/* 600, nao 700: o peso de destaque padrao do checkout e' 600 (feedback
	   do dono: 700 ficava grosso demais perto do resto). */
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-dark, #303030);
}

.dmhub-fp-celebrate__prize {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-accent-dark, #0f5e2b);
}

.dmhub-fp-celebrate__sub {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-gray, #6b7280);
}

@media (prefers-reduced-motion: reduce) {
	/* Card estatico: o destaque de cor + o presente ja comunicam a
	   celebracao sem movimento. content:none mata os pseudos decorativos
	   inteiros (nao deixa brilho/faisca congelados na tela). */
	.dmhub-checkout .dmhub-toast--celebrate {
		animation: none;
	}
	.dmhub-checkout .dmhub-toast--celebrate::before,
	.dmhub-fp-celebrate__icon::after {
		content: none;
	}
}

/* Modo expresso: campos travados/mascarados */
input.dmhub-rp-locked,
select.dmhub-rp-locked {
	background: var(--color-surface-2, #f4f4f5);
	color: var(--color-muted, #6b7280);
	letter-spacing: .4px;
}

select.dmhub-rp-locked { pointer-events: none; }

/* Modal de edicao (mesma linguagem do modal "Entrar sem senha") */
.dmhub-rp-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.dmhub-rp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, .55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.dmhub-rp-modal__card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
	width: 100%;
	max-width: 400px;
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 28px 26px 26px;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.dmhub-rp-modal__x {
	position: absolute;
	top: 12px;
	right: 14px;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: #9ca3af;
	cursor: pointer;
	padding: 4px 8px;
}

.dmhub-rp-modal__x:hover { color: #374151; }

.dmhub-rp-modal__title {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 6px;
	color: #111827;
	padding-right: 24px;
}

.dmhub-rp-modal__hint {
	font-size: 13px;
	color: #6b7280;
	margin: 0 0 18px;
	line-height: 1.5;
}

.dmhub-rp-modal__code {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 14px;
	letter-spacing: 8px;
	font-size: 20px;
	text-align: center;
	font-family: monospace;
	background: #fff;
	color: #111827;
}

.dmhub-rp-modal__code:focus {
	outline: 0;
	border-color: var(--color-accent, #00cb02);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #00cb02) 18%, transparent);
}

.dmhub-rp-modal__btn {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 10px;
	padding: 13px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	background: var(--color-accent, #00cb02);
	color: var(--color-button-text, #fff);
}

.dmhub-rp-modal__btn:hover { filter: brightness(0.92); }
.dmhub-rp-modal__btn:disabled { opacity: .6; cursor: default; }

.dmhub-rp-modal__resend {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	margin-top: 10px;
}

.dmhub-rp-modal__resend:disabled { opacity: .55; cursor: default; }

.dmhub-rp-modal__error {
	font-size: 13px;
	margin: 0 0 12px;
	color: #b91c1c;
	line-height: 1.5;
}

/* Modo expresso — inputs de endereco mascarados somem no step de frete
   (recap no lugar) e o bloco "Dados para nota fiscal" some (CPF ja
   carregado — o input oculto continua postando e o servidor troca pelo
   real). */
form.checkout.dmhub-rp-express .form-row.dmhub-rp-locked-row {
	display: none !important;
}

/* Fallback pelo ATRIBUTO (regra separada de proposito: parser sem :has
   descartaria a lista inteira se fosse junto da regra acima). O atributo
   e' a mesma fonte de verdade das mascaras/readonly — sobrevive a
   qualquer re-render que perca a classe da row. So shipping: billing de
   endereco nunca e' travado (bloco de cobranca diferente precisa dele). */
form.checkout .form-row:has([data-dmhub-masked][id^="shipping_"]) {
	display: none !important;
}

form.checkout.dmhub-rp-express .dmhub-invoice-block {
	display: none;
}

.dmhub-rp-recap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 8px;
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--color-surface-2, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 10px);
	font-size: 13px;
	line-height: 1.5;
}

.dmhub-rp-recap__label {
	color: var(--color-text, #1f2937);
	font-weight: 700;
}

.dmhub-rp-recap__addr {
	color: var(--color-muted, #6b7280);
	letter-spacing: .3px;
	overflow-wrap: anywhere;
}

/* Oferta em modal (o card inline no meio dos campos ficou feio — feedback
   com print) + recap com nota de boas-vindas e acoes */
.dmhub-rp-modal__ghost {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-muted, #6b7280);
	cursor: pointer;
	margin-top: 6px;
	text-decoration: underline;
}

.dmhub-rp-modal__ghost:hover { color: var(--color-text, #1f2937); }

.dmhub-rp-recap__line { margin: 0; }

.dmhub-rp-recap__actions {
	display: flex;
	gap: 14px;
	margin: 6px 0 0;
	flex-basis: 100%;
}

/* Esconderijo do wrapper inteiro de campos de entrega no modo expresso
   (classe aplicada pelo JS junto com estilo inline — dupla garantia). */
.dmhub-rp-hide {
	display: none !important;
}

.dmhub-rp-recap__hint {
	display: block;
	flex-basis: 100%;
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--color-gray, #6b7280);
}