/* ============================================================================
   Footer da loja — visual moderno e consistente entre lojas.
   Sobrescreve o footer legado das skins (skin-NN.css / gray-look.css) sem mexer
   nelas. Herda a cor do tema via var(--mc-cor) (resolvida pela sonda _cor-tema.php).
   Escopado em `footer` p/ não vazar. Markup global em views/_includes/footer.php.
   ============================================================================ */

footer .footer {
  background: #fff !important;
  border-top: 1px solid #ececec !important;
  padding: 44px 0 32px !important;
}
footer .footer .container { background: none !important; }

/* colunas: distribui em flex (larguras Bootstrap fixas faziam a col estreita "Loja"
   quebrar textos longos). Cada coluna cresce conforme conteúdo, com largura mínima
   confortável — padrão de footer de e-commerce (ML/Amazon: colunas que respiram). */
footer .footer .row {
  display: flex !important; flex-wrap: wrap !important; gap: 24px 32px; align-items: flex-start;
  /* zera a margin negativa do .row (Bootstrap -15px): como zeramos o padding das
     colunas, sem isto o conteúdo era puxado 15px à esquerda e colava na borda. */
  margin-left: 0 !important; margin-right: 0 !important;
}
footer .footer .row > [class*="col-"] {
  float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important;
  flex: 1 1 160px !important; min-width: 150px;
}
/* a 1ª coluna (Atendimento) precisa de mais espaço (telefone/email longos) */
footer .footer .row > [class*="col-"]:first-child { flex: 1.4 1 220px !important; }
/* itens não quebram no meio de palavra; só entre palavras, sem espremer.
   e-mail/links longos quebram p/ não estourar a coluna. */
footer .footer ul li a { display: inline-block; overflow-wrap: anywhere; max-width: 100%; }
footer .footer .supportLi h4 a { overflow-wrap: anywhere; max-width: 100%; }
/* os <div clear:both class="hide visible-xs"> entre colunas não têm função no flex
   (eram p/ o float legado) — removidos do fluxo p/ não criarem "buracos". */
footer .footer .row > [style*="clear"] { display: none !important; }

/* títulos das colunas — discretos, uppercase, com divisória sutil */
footer .footer h3 {
  font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: .04em; color: #3a3f49 !important; margin: 0 0 16px !important;
  padding: 0 0 10px !important; border-bottom: 1px solid #f0f1f3 !important;
}

/* listas e links */
footer .footer ul { list-style: none; margin: 0; padding: 0; }
footer .footer ul li { margin: 0 0 9px; line-height: 1.4; }
footer .footer ul li a {
  color: #6b7180 !important; font-size: 13.5px; font-weight: 400; text-decoration: none;
  transition: color .15s ease;
}
footer .footer ul li a:hover { color: var(--mc-cor, #3a3f49) !important; }

/* ----- Coluna Atendimento ----- */
footer .footer .supportLi h4 { margin: 0 0 10px; font-size: 13.5px; }
footer .footer .supportLi h4 a { color: #3a3f49 !important; font-weight: 600; display: inline-flex; align-items: center; }
footer .footer .supportLi h4 a strong { font-weight: 600; }
footer .footer .supportLi h4 a i,
footer .footer .supportLi p i { color: var(--mc-cor, #8a8f99); margin-right: 4px; }
footer .footer .supportLi p { color: #3a3f49; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
footer .footer .supportLi ul.inline li { color: #8a8f99; font-size: 12.5px; margin-bottom: 3px; }

/* ----- Faixa de redes sociais (abaixo das colunas) ----- */
footer .footer .footer-social {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid #f0f1f3;
}
footer .footer .footer-social-tit {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #3a3f49;
}

/* ----- Ícones sociais ----- (o original é cinza #B5B5B5 com hover azul fixo e ícone
   deslocado pelo &nbsp; — apagado e fora da identidade. Círculos na cor do tema.) */
footer .footer ul.social { display: flex; gap: 10px; }
footer .footer ul.social li {
  float: none !important; margin: 0 !important; width: 38px !important; height: 38px !important;
  line-height: 1 !important; border: 0 !important; background: #f4f5f7 !important;
  border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease !important;
}
footer .footer ul.social li:hover {
  background: var(--mc-cor, #3a3f49) !important; border: 0 !important;
  transform: none !important; -webkit-transform: none !important;
}
footer .footer ul.social li a { display: inline-flex; color: #6b7180 !important; }
footer .footer ul.social li a i {
  margin: 0 !important; font-size: 16px !important; color: inherit !important;
}
footer .footer ul.social li:hover a,
footer .footer ul.social li:hover a i { color: #fff !important; }

/* ============================================================================
   Rodapé inferior (copyright + bandeiras)
   ============================================================================ */
footer .footer-bottom {
  background: #fafbfc !important; border-top: 1px solid #f0f1f3 !important;
  padding: 16px 0 !important;
}
footer .footer-bottom .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
footer .footer-bottom p {
  margin: 0 !important; float: none !important; color: #8a8f99; font-size: 12.5px;
}
footer .footer-bottom p small { color: #b0b4bc; }
footer .footer-bottom p b { color: #6b7180; }
/* bandeiras de cartão — alinhadas, sem o pull-right legado */
footer .footer-bottom .paymentMethodImg {
  float: none !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
footer .footer-bottom .paymentMethodImg img {
  float: none !important; height: 26px !important; width: auto;
  border: 1px solid #ececec; border-radius: 5px; background: #fff; padding: 2px 4px;
}

/* ============================================================================
   Mobile (≤767px): colunas empilham, rodapé centraliza
   ============================================================================ */
@media (max-width: 767px) {
  footer .footer { padding: 32px 0 24px !important; }
  footer .footer h3 { margin-bottom: 12px !important; }
  /* colunas em 2 por linha no mobile (cabem bem); 1 por linha em telas bem estreitas */
  footer .footer .row { gap: 22px 24px; }
  footer .footer .row > [class*="col-"],
  footer .footer .row > [class*="col-"]:first-child { flex: 1 1 42% !important; min-width: 42%; }
  footer .footer .footer-social { justify-content: center; text-align: center; margin-top: 22px; padding-top: 18px; }
  footer .footer-bottom .container { flex-direction: column; text-align: center; gap: 12px; }
  footer .footer-bottom .paymentMethodImg { justify-content: center; }
}
@media (max-width: 479px) {
  footer .footer .row > [class*="col-"],
  footer .footer .row > [class*="col-"]:first-child { flex: 1 1 100% !important; min-width: 100%; }
}