/* Flora Nobilis — rodapé estilo Café Frida.
 * 3 colunas:
 *   1) Marca + tagline + contatos + nav unificado (Arranjos + institucionais)
 *   2) Nossa Floricultura (endereço + horários)
 *   3) Mapa (saliente +20%, sombra esfumaçada à esquerda, flor 3D top-down)
 *      + CTA Loja + redes sociais
 */

:root {
  --fc-fundo: #2d3a1d;
  --fc-fundo-2: #1f2a13;
  --fc-claro: #f3ead6;
  --fc-claro-fraco: rgba(243, 234, 214, 0.65);
  --fc-dourado: #d4a574;
  --fc-borda: rgba(243, 234, 214, 0.18);
  --fc-text-font: Georgia, 'Times New Roman', serif;
}

/* ---------- container do rodapé ---------- */
.site-footer.site-footer--fixed,
.site-footer {
  background: var(--fc-fundo) !important;
  color: var(--fc-claro);
  display: block;
  margin: 0 0 -10px !important;
  padding: 0 0 10px;
  overflow: visible !important;          /* deixa o mapa "sair" pra cima */
  position: relative;
  clip-path: inset(-180px 0 -24px 0);    /* permite o mapa subir e cobre arredondamento no fim da pagina */
  box-shadow: 0 24px 0 0 var(--fc-fundo);
}
/* Garante que o mapa n?o fica clipado por containers acima do footer */
body.has-fixed-site-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}
body.has-fixed-site-footer main,
body.has-fixed-site-footer .parceiros { overflow: visible !important; }
.site-footer__inner { padding: 0; overflow: visible; position: relative; }

/* A faixa antiga de folhagem do rodape invadia a area branca acima do footer.
   O rodape atual usa apenas os quatro cantos vivos abaixo. */
.site-footer #folhagem-base.folhagem--rodape {
  display: none !important;
}

/* === Folhagens nos 4 cantos do footer ===
 * Imagem-fonte orientada para o canto INFERIOR ESQUERDO.
 * Cada canto fica preso ao proprio quadrante. Os cantos espelhados usam
 * transform-origin central para o flip nao deslocar a imagem para fora.
 */
.site-footer::before,
.site-footer::after,
.site-footer__inner::before,
.site-footer__inner::after {
  content: '';
  position: absolute;
  width: 290px;
  height: 290px;
  background: url('/assets/images/footer-folhagem.webp') no-repeat bottom left / contain;
  opacity: 0.78;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.34))
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.24));
  will-change: transform;
}
.site-footer::before {
  bottom: 0;
  left: 0;
  transform-origin: 50% 50%;
  animation: fn-leaf-bl 11s ease-in-out infinite;
}
.site-footer::after {
  bottom: 0;
  right: 0;
  transform-origin: 50% 50%;
  animation: fn-leaf-br 13s ease-in-out infinite;
}
.site-footer__inner::before {
  top: 6px;
  left: 0;
  transform-origin: 50% 50%;
  animation: fn-leaf-tl 12s ease-in-out infinite;
}
.site-footer__inner::after {
  top: 6px;
  right: 0;
  transform-origin: 50% 50%;
  animation: fn-leaf-tr 14s ease-in-out infinite;
}

@keyframes fn-leaf-bl {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.0deg) scale(1); }
  50%      { transform: translate3d(0, 0, 0) rotate(1.2deg) scale(1.018); }
}
@keyframes fn-leaf-br {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(-1) rotate(-1.1deg) scale(1); }
  50%      { transform: translate3d(0, 0, 0) scaleX(-1) rotate(1.0deg) scale(1.018); }
}
@keyframes fn-leaf-tl {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(-1) rotate(-1.0deg) scale(1); }
  50%      { transform: translate3d(0, 0, 0) scaleY(-1) rotate(1.2deg) scale(1.016); }
}
@keyframes fn-leaf-tr {
  0%, 100% { transform: translate3d(0, 0, 0) scale(-1, -1) rotate(-1.2deg) scale(1); }
  50%      { transform: translate3d(0, 0, 0) scale(-1, -1) rotate(1.0deg) scale(1.016); }
}

.site-footer__glass,
.site-footer__intro,
.site-footer__bottom { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .site-footer::before,
  .site-footer::after,
  .site-footer__inner::before,
  .site-footer__inner::after { animation: none; }
}
.site-footer__glass {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem) !important;
  max-width: 1400px;
  margin: 0 auto;
  overflow: visible;
}
.site-footer__flowers { opacity: 0.1; mix-blend-mode: screen; }

/* ---------- grid: 3 colunas ---------- */
.site-footer__intro {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 1.1fr) !important;
  gap: clamp(1.5rem, 3.5vw, 3rem) !important;
  align-items: start;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  overflow: visible;
}

/* ---------- COLUNA 1: marca + contato + nav unificado ---------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.site-footer__brand-name {
  font-family: 'Dancing Script', 'Cormorant Garamond', cursive !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  color: var(--fc-claro) !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  margin: 0;
}
.site-footer__tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--fc-claro-fraco);
  font-style: italic;
  margin: 0;
  max-width: none;
  white-space: normal;
}

/* Linha de contato: 2 itens lado a lado */
.site-footer__contact-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 1.5rem !important;
  align-items: center;
  margin: 0 !important;
}
.site-footer__pill {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--fc-claro) !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.03em;
  text-transform: none !important;
  text-decoration: none;
  display: inline-block;
  transition: color .2s;
  line-height: 1.4;
}
.site-footer__pill:hover { color: var(--fc-dourado) !important; }
.site-footer__pill::before { display: none !important; }
.site-footer__pill--wa::before,
.site-footer__pill[href^="tel"]::before,
.site-footer__pill--muted::before {
  content: '✦ '; color: var(--fc-dourado); display: inline !important;
  margin-right: 4px;
}

/* Botão "Receba novidades" */
.fn-feed-btn {
  background: transparent !important;
  border: 1px solid var(--fc-dourado) !important;
  color: var(--fc-dourado) !important;
  width: 32px !important; height: 32px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.fn-feed-btn:hover,
.fn-feed-btn:focus-visible {
  background: var(--fc-dourado) !important;
  color: var(--fc-fundo) !important;
  border-color: var(--fc-dourado) !important;
}

/* Bloco de navegação (Navegue + institucionais) */
.site-footer__cols { margin-top: 0.5rem; }
.site-footer__block-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.74rem !important;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fc-dourado) !important;
  font-weight: 600;
  margin: 0 0 0.7rem !important;
}

/* Nav unificada — Arranjos/Sobre/etc + institucionais, tudo num só fluxo */
.site-footer__nav-flow {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.4rem;
  row-gap: 0.45rem;
}
.site-footer__nav-flow a {
  color: var(--fc-claro) !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  text-decoration: none;
  transition: color .2s;
  padding: 0;
  white-space: nowrap;
}
.site-footer__nav-flow a:hover { color: var(--fc-dourado) !important; }
/* Páginas institucionais: estilo mais discreto */
.site-footer__nav-flow .site-footer__nav-mini {
  color: var(--fc-claro-fraco) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em;
}
.site-footer__nav-flow .site-footer__nav-mini:hover {
  color: var(--fc-dourado) !important;
}

/* Anula resíduos das antigas listas (caso alguma página ainda use) */
.site-footer__shortcut,
.site-footer__menu-list { display: contents; }
.site-footer__chev { display: none !important; }

/* ---------- COLUNA 2: Nossa floricultura ---------- */
.site-footer__info-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.site-footer__address {
  color: var(--fc-claro);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
}
.fn-horario { margin: 0.4rem 0 0; }
.fn-horario__titulo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fc-dourado);
  font-weight: 600;
  margin: 0 0 0.55rem;
}
.fn-horario__bloco {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  color: var(--fc-claro);
  line-height: 1.55;
  margin: 0 0 0.18rem;
}
.fn-horario__bloco strong {
  font-weight: 600;
  color: var(--fc-claro);
  margin-right: 6px;
}

/* ---------- COLUNA 3: mapa + CTA + redes ---------- */
.site-footer__map-col {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  position: relative;
  overflow: visible;
}

/* MAPA — Leaflet + Voyager, sobe ~110px acima do topo do footer */
.site-footer__map-wrap {
  position: relative;
  border-radius: 10px;
  height: clamp(220px, 22vw, 290px);
  /* Levanta o mapa pra cima do topo do footer (≈20% da altura dele)
     sem mexer na coluna parceiros (overflow: visible em toda cadeia) */
  transform: translateY(-110px);
  margin-bottom: -100px;     /* puxa CTA pra não ficar gap embaixo */
  overflow: visible;
  isolation: isolate;
  z-index: 5;
}
.fn-map-leaflet {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  background: #f1efe8;       /* mesma cor base da skin enquanto carrega */
  cursor: grab;
}
.fn-map-leaflet:active { cursor: grabbing; }
/* Tinta sutil pra aproximar das cores da skin (estradas mais oliva, água mais clara) */
.fn-map-leaflet .leaflet-tile-pane {
  filter: hue-rotate(-8deg) saturate(0.82) brightness(0.98) contrast(1.04);
}
.fn-map-leaflet .leaflet-control-attribution {
  background: rgba(45, 58, 29, 0.55) !important;
  color: var(--fc-claro-fraco) !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 6px 0 0 0;
}
.fn-map-leaflet .leaflet-control-attribution a {
  color: var(--fc-claro-fraco) !important;
}
/* Pino customizado */
.fn-map-pin {
  background: transparent;
}
.fn-map-pin span {
  display: block;
  width: 18px; height: 18px;
  background: #c8463a;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  margin: 6px 0 0 0;
}

/* Overlay esverdeado bem sutil sobre o mapa (combina com o footer) */
.site-footer__map-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg,
      rgba(45, 58, 29, 0.10) 0%,
      transparent 50%,
      rgba(45, 58, 29, 0.14) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3;
}
/* SOMBRA esfumaçada — cobre TODA a altura do mapa atrás dele, ligeiramente
   deslocada pra esquerda-baixo, dando impressão de relevo (mapa saltando pra
   frente). Curta, levemente mais forte que a anterior. */
.site-footer__map-wrap::after {
  content: '';
  position: absolute;
  top: 6%;            /* começa quase na borda superior do mapa */
  left: -22px;        /* deslocamento sutil pra esquerda */
  bottom: -18px;      /* só um pouco abaixo */
  right: 16%;         /* não se estende até a direita — curta */
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.55) 28%,
      rgba(0, 0, 0, 0.58) 60%,
      rgba(0, 0, 0, 0.32) 90%,
      rgba(0, 0, 0, 0.08) 100%);
  filter: blur(22px);
  transform: skewX(-5deg);
  z-index: -1;
  pointer-events: none;
  border-radius: 16px;
  opacity: 1;
}
/* Popup do Leaflet (endereço sobre o pino) com cara do site */
.fn-map-popup .leaflet-popup-content-wrapper {
  background: rgba(45, 58, 29, 0.92) !important;
  color: var(--fc-claro) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35) !important;
  border: 1px solid var(--fc-borda);
}
.fn-map-popup .leaflet-popup-content {
  margin: 6px 8px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 0.86rem !important;
  line-height: 1.4 !important;
  color: var(--fc-claro) !important;
}
.fn-map-popup .leaflet-popup-content strong {
  color: var(--fc-dourado) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-bottom: 2px;
}
.fn-map-popup .leaflet-popup-tip {
  background: rgba(45, 58, 29, 0.92) !important;
}

/* FLOR 3D top-down no canto superior direito */
.fn-mapa-flor3d {
  position: absolute;
  top: -55px;
  right: -28px;
  width: 130px;
  height: 130px;
  z-index: 4;
  background: transparent !important;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  filter: drop-shadow(4px 12px 14px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
/* Esconde APENAS o loader / barra de progresso interna do <model-viewer>
   (risco horizontal sobre a flor enquanto o .glb carregava). A flor mesma
   continua sempre visível — se o web component falhar, ao menos o poster
   transparente aparece e não bloqueia o renderer. */
.fn-mapa-flor3d::part(default-progress-bar),
.fn-mapa-flor3d::part(default-progress-mask) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Joaninha 3D — replica o LadybugOverlay do app mobile.
 * Anda livremente sobre o conteúdo do rodapé, com leve sombra projetada
 * para parecer que está pousada nas superfícies. transform-origin centrado
 * para que a rotação 2D (yaw) gire em torno do próprio corpo da joaninha. */
.fn-joaninha {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  z-index: 50;
  pointer-events: none;
  background: transparent !important;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  --mv-spinner-display: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: transform, opacity;
}
.fn-joaninha::part(default-progress-bar),
.fn-joaninha::part(default-progress-mask) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Passarinho 3D: camada viva independente do layout. Fica pousado na linha
   superior do mapa, no lado oposto da flor, sem alterar mapa, footer ou CTA. */
.fn-passarinho-mapa3d {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(78px, 5.2vw, 104px);
  height: clamp(78px, 5.2vw, 104px);
  z-index: 58;
  pointer-events: none;
  background: transparent !important;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  --mv-spinner-display: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 9px 12px rgba(0, 0, 0, 0.34));
  opacity: 0;
  will-change: transform, opacity;
}
.fn-passarinho-mapa3d::part(default-progress-bar),
.fn-passarinho-mapa3d::part(default-progress-mask) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* CTA Loja — embaixo do mapa. Modal COMPACTO, perto da linha dos links. */
.site-footer__pop-cta {
  background: transparent !important;
  border: 1px solid var(--fc-borda) !important;
  box-shadow: none !important;
  text-align: center;
  padding: 0.55rem 0.7rem 0.7rem !important;
  border-radius: 10px !important;
  margin-top: 0.6rem !important;
  transition: border-color .25s, transform .25s !important;
}
.site-footer__pop-cta:hover {
  border-color: var(--fc-dourado) !important;
  transform: translateY(-2px) !important;
}
.site-footer__pop-cta__sup {
  color: var(--fc-dourado) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.2em !important;
  margin: 0 0 0.2rem !important;
}
.site-footer__pop-cta__titulo {
  color: var(--fc-claro) !important;
  font-family: 'Dancing Script', cursive !important;
  text-shadow: none !important;
  font-size: 1.25rem !important;
  display: block;
  margin-bottom: 0.25rem !important;
}
/* Container da rosa Lottie — width E height fixos pra impedir o SVG de
 * esticar verticalmente (era o que estava deixando o modal gigante). */
.site-footer__pop-cta__rosa {
  display: inline-block;
  width: 58px !important;
  height: 78px !important;
  filter: brightness(1.1);
  vertical-align: middle;
}
.site-footer__pop-cta__rosa svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Redes sociais — centralizadas embaixo */
.fn-social-rodape {
  justify-content: center !important;
  margin-top: 0.2rem !important;
  gap: 12px !important;
}
.fn-social-rodape__btn {
  background: transparent !important;
  border: 1px solid var(--fc-dourado) !important;
  color: var(--fc-dourado) !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  filter: none !important;
}
.fn-social-rodape__btn--ig:hover {
  background: var(--fn-ig-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.fn-social-rodape__btn--fb:hover {
  background: var(--fn-fb-color) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---------- rodapé inferior ---------- */
.site-footer__bottom {
  border-top: 1px solid var(--fc-borda) !important;
  padding-top: 1rem !important;
  margin-top: 1.5rem !important;
  text-align: center;
}
.site-footer__bottom p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.78rem;
  color: var(--fc-claro-fraco);
  letter-spacing: 0.08em;
  font-style: italic;
  margin: 0;
}

/* Mantem o rodape com o mesmo peso visual do checkout em todas as paginas.
   O checkout ja caia nesse desenho via fallback; agora isso vira regra. */
.site-footer :is(
  .site-footer__tagline,
  .site-footer__pill,
  .site-footer__block-title,
  .site-footer__nav-flow a,
  .site-footer__address,
  .fn-horario__titulo,
  .fn-horario__bloco,
  .site-footer__bottom p
) {
  font-family: var(--fc-text-font) !important;
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .site-footer__intro {
    grid-template-columns: 1fr 1fr !important;
  }
  .site-footer__map-col {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: flex-start;
  }
  .site-footer__map-wrap {
    flex: 1 1 60%; min-width: 280px;
    transform: none;
    margin-bottom: 0;
    height: 280px;
  }
  .site-footer__pop-cta { flex: 1 1 30%; min-width: 220px; }
  .fn-social-rodape { width: 100%; }
}
@media (max-width: 720px) {
  .site-footer__intro { grid-template-columns: 1fr !important; }
  .site-footer__map-col { flex-direction: column; }
  .site-footer__brand { text-align: center; align-items: center; }
  .site-footer__contact-row,
  .site-footer__nav-flow { justify-content: center; }
  .site-footer__brand-name { font-size: 2.4rem !important; }
  .fn-mapa-flor3d { width: 95px; height: 95px; top: -36px; right: -10px; }
  .site-footer__map-wrap::after { left: -16px; bottom: -16px; }
  /* Folhagens dos cantos — bem menores no mobile pra não invadir o conteúdo */
  .site-footer::before,
  .site-footer::after,
  .site-footer__inner::before,
  .site-footer__inner::after { width: 150px; height: 150px; opacity: 0.6; }
}