/* ===== Botões "liquid glass" laranja (adaptação do LiquidButton) =====
   Usado em todos os botões que levam ao WhatsApp. Carregado por último para
   sobrepor .btn--primary, .pill__cta e .mobile-menu__cta.
   - ::before = vidro laranja com a distorção do filtro SVG #container-glass
   - ::after  = borda/relevo do vidro (sombras internas do componente original) */
.btn-liquid.btn-liquid {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(120, 40, 0, .35);
}
.btn-liquid.btn-liquid:not(.mobile-menu__cta) { transition: scale .3s ease; }
.btn-liquid.btn-liquid:hover {
  background: transparent;
  transform: none;
  scale: 1.05;
}
.btn-liquid.btn-liquid:active { scale: .98; }
.btn-liquid.btn-liquid:focus-visible { outline: 3px solid rgba(255, 107, 53, .5); outline-offset: 3px; }

.btn-liquid::before,
.btn-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

/* Vidro laranja */
.btn-liquid::before {
  background: linear-gradient(180deg, rgba(255, 140, 94, .8) 0%, rgba(255, 107, 53, .78) 55%, rgba(229, 85, 31, .88) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.5);
  backdrop-filter: url("#container-glass");
}

/* Relevo do vidro */
.btn-liquid::after {
  box-shadow:
    0 0 8px rgba(0, 0, 0, .03),
    0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09),
    inset -3px -3px .5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6),
    inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12),
    inset 0 0 2px 2px rgba(255, 255, 255, .06),
    0 0 12px rgba(0, 0, 0, .15),
    0 8px 24px -8px rgba(255, 107, 53, .55);
  transition: box-shadow .3s ease;
}
.btn-liquid:hover::after {
  box-shadow:
    0 0 8px rgba(0, 0, 0, .03),
    0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09),
    inset -3px -3px .5px -3.5px rgba(255, 255, 255, .95),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .7),
    inset -1px -1px 1px -.5px rgba(255, 255, 255, .7),
    inset 0 0 6px 6px rgba(255, 255, 255, .16),
    inset 0 0 2px 2px rgba(255, 255, 255, .08),
    0 0 12px rgba(0, 0, 0, .15),
    0 12px 30px -8px rgba(255, 107, 53, .7);
}

/* O filtro SVG fica fora da tela */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
