/* ==========================================================================
   C24H - Rodape de funil (carrinho e finalizacao)
   Bloco unico, identico nas duas paginas: linha de tranquilidade, formas de
   pagamento, ajuda no WhatsApp e links legais. Sem menu de categorias,
   newsletter ou redes sociais, que sao portas de saida no meio da compra.
   ========================================================================== */

.c24h-funnel-footer {
  --c24h-green: #008744;
  --c24h-green-deep: #04272e;
  --c24h-text: #1b1b1e;
  --c24h-muted: #5e6866;
  --c24h-border: #e8f0ee;
  --c24h-soft: #f7f8fa;
  --c24h-white: #fff;
  box-sizing: border-box;
  width: 100%;
  margin: 36px 0 0;
  padding: 36px 0 30px;
  background: var(--c24h-soft);
  border-top: 1px solid var(--c24h-border);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--c24h-text);
  text-align: left;
}

.c24h-funnel-footer *,
.c24h-funnel-footer *::before,
.c24h-funnel-footer *::after {
  box-sizing: border-box;
}

.c24h-ff-inner {
  /* Repete o container do Woodmart: site_custom_width = 1300px, com o conteudo
     em calc(1300px - 40px). O recuo lateral fica aqui dentro, e nao no <footer>,
     para o texto alinhar exatamente com o conteudo da pagina acima. */
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Linha de tranquilidade ---------------------------------------------- */

.c24h-ff-trust {
  /* Quatro colunas iguais preenchem os 1300px de forma uniforme. Com flex e
     space-between os itens colavam nas pontas e sobrava buraco no meio. */
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.c24h-ff-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c24h-text);
  list-style: none;
}

.c24h-ff-trust li::before,
.c24h-ff-trust li::marker {
  content: none;
}

.c24h-ff-trust svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--c24h-green);
}

/* --- Cartoes de pagamento e ajuda ---------------------------------------- */

.c24h-ff-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.c24h-ff-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--c24h-white);
  border: 1px solid var(--c24h-border);
  border-radius: 12px;
}

.c24h-ff-title {
  margin: 0;
  padding: 0;
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c24h-green);
}

/* Linha interna do cartao: preenche a largura em vez de deixar vazio a direita. */
.c24h-ff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

/* As bandeiras ocupam a largura inteira do cartao, em colunas iguais. */
.c24h-ff-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
  width: 100%;
}

.c24h-ff-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  background: var(--c24h-white);
  border: 1px solid var(--c24h-border);
  border-radius: 8px;
}

.c24h-ff-badge svg,
.c24h-ff-badge img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26px;
}

.c24h-ff-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c24h-muted);
}

.c24h-ff-note strong {
  font-weight: 700;
  color: var(--c24h-green);
}

.c24h-ff-col--help .c24h-ff-note {
  flex: 1 1 190px;
  min-width: 0;
}

.c24h-ff-whats {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  background: var(--c24h-white);
  border: 1px solid var(--c24h-green-deep);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--c24h-green-deep);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.c24h-ff-whats svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #25d366;
  transition: color 0.18s ease;
}

.c24h-ff-whats:hover,
.c24h-ff-whats:focus-visible {
  background: var(--c24h-green-deep);
  color: var(--c24h-white);
}

.c24h-ff-whats:hover svg,
.c24h-ff-whats:focus-visible svg {
  color: var(--c24h-white);
}

/* --- Links legais e assinatura ------------------------------------------- */

.c24h-ff-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--c24h-border);
}

.c24h-ff-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c24h-ff-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c24h-ff-links li::before {
  content: none;
}

.c24h-ff-links a {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c24h-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.c24h-ff-links a:hover,
.c24h-ff-links a:focus-visible {
  color: var(--c24h-green);
  border-bottom-color: currentColor;
}

.c24h-ff-copy {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c24h-muted);
}

/* --- Encaixe no carrinho -------------------------------------------------- */

/* As tres areas do rodape do tema ficam desligadas nas configuracoes da pagina
   do carrinho, e o <footer> do Woodmart sobra vazio com fundo navy e sticky.
   Some com o container vazio para nao criar faixa escura abaixo do bloco. */
body.woocommerce-cart .wd-footer.footer-container {
  display: none;
}

/* --- Encaixe no container do Checkout Inteligente ------------------------ */

#checkout-footer {
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

#checkout-footer > .c24h-funnel-footer {
  margin-top: 20px;
  border: 1px solid var(--c24h-border);
  border-radius: 12px;
}

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .c24h-ff-trust {
    grid-template-columns: repeat(2, auto);
    gap: 14px 20px;
  }

  .c24h-ff-trust li {
    font-size: 12.5px;
  }
}

@media (max-width: 900px) {
  .c24h-ff-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .c24h-ff-trust {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
  }
}

@media (max-width: 767px) {
  .c24h-funnel-footer {
    margin-top: 28px;
    padding: 30px 0 26px;
  }

  .c24h-ff-inner {
    padding: 0 16px;
  }

  .c24h-ff-row {
    gap: 12px;
  }

  /* Duas fileiras de tres bandeiras preenchem a largura sem sobra. */
  .c24h-ff-badges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c24h-ff-col--help .c24h-ff-note {
    flex: 1 1 100%;
  }

  .c24h-ff-whats {
    width: 100%;
  }

  /* No mobile os links quebram em duas linhas desiguais e a assinatura deixa
     palavra orfa. Centralizar faz a quebra parecer intencional. */
  .c24h-ff-legal {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .c24h-ff-links ul {
    justify-content: center;
    gap: 6px 16px;
  }

  .c24h-ff-copy {
    text-wrap: balance;
  }

  /* A barra fixa e os botoes flutuantes de contato cobrem o fim da pagina. */
  body.sticky-toolbar-on .c24h-funnel-footer {
    padding-bottom: 96px;
  }
}


/* ==========================================================================
   C24H - Icone (i) de ressalva, valido no site inteiro
   Mesmo desenho do (i) das opcoes do configurador, mas sem escopo, para poder
   ser usado no rodape, nas descricoes de produto, nas paginas e no header.
   Markup: <span class="c24h-info" role="img" tabindex="0" aria-label="texto">i</span>
   O texto do balao sai do proprio aria-label, entao leitor de tela e mouse
   leem exatamente a mesma coisa.
   ========================================================================== */

.c24h-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border: 0;
  border-radius: 999px;
  background: #04272e;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
  vertical-align: middle;
  outline: none;
  flex: 0 0 auto;
}

.c24h-info:hover,
.c24h-info:focus,
.c24h-info:focus-visible {
  background: #008744;
  color: #fff;
}

/* Balao */
.c24h-info::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 999;
  width: min(280px, 74vw);
  padding: 12px 14px;
  border-radius: 8px;
  background: #04272e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Setinha */
.c24h-info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 999;
  border: 6px solid transparent;
  border-top-color: #04272e;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.c24h-info:hover::after,
.c24h-info:focus::after,
.c24h-info:focus-visible::after,
.c24h-info:hover::before,
.c24h-info:focus::before,
.c24h-info:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Variante clara, para fundo escuro (header). */
.c24h-info--light {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}

/* Cores explicitas de proposito: usar currentColor no fundo e trocar a cor do
   texto na mesma regra faz os dois virarem a mesma cor, e o icone some. */
.c24h-info--light:hover,
.c24h-info--light:focus,
.c24h-info--light:focus-visible {
  background: #008744;
  border-color: #008744;
  color: #fff;
}

/* No celular o balao ancora pela direita para nunca vazar da tela. */
@media (max-width: 767px) {
  .c24h-info::after {
    left: auto;
    right: -6px;
    transform: translateX(0) translateY(4px);
  }

  .c24h-info:hover::after,
  .c24h-info:focus::after,
  .c24h-info:focus-visible::after {
    transform: translateX(0) translateY(0);
  }
}

/* Variante que abre para baixo: usada no header, onde o balao apontando para
   cima sairia da tela. */
.c24h-info--down::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}

.c24h-info--down::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: #04272e;
  transform: translateX(-50%) translateY(-4px);
}

.c24h-info--down:hover::after,
.c24h-info--down:focus::after,
.c24h-info--down:focus-visible::after,
.c24h-info--down:hover::before,
.c24h-info--down:focus::before,
.c24h-info--down:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 767px) {
  .c24h-info--down::after {
    left: auto;
    right: -6px;
    transform: translateX(0) translateY(-4px);
  }

  .c24h-info--down:hover::after,
  .c24h-info--down:focus::after,
  .c24h-info--down:focus-visible::after {
    transform: translateX(0) translateY(0);
  }
}