.floating-actions {
  --fab-touch-size: 60px;
  --fab-icon-size: 48px;
  --phone-glyph-size: 31px;
  position: fixed;
  right: clamp(0.85rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.4vw, 1.35rem);
}

@media (max-width: 768px) {
  .floating-actions {
    --fab-touch-size: clamp(54px, 10vw, 72px);
    --fab-icon-size: clamp(48px, 8.8vw, 58px);
    --phone-glyph-size: clamp(33px, 6.2vw, 39px);
  }
}

.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-touch-size);
  height: var(--fab-touch-size);
  color: #ffffff;
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab:hover {
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: none;
}

.fab svg,
.fab img {
  width: var(--fab-icon-size);
  height: var(--fab-icon-size);
}

.fab img {
  display: block;
  object-fit: contain;
}

.wa-fab,
.tg-fab {
  background-color: transparent;
}

.phone-fab {
  width: var(--fab-icon-size);
  height: var(--fab-icon-size);
  background-color: #111111;
  border-radius: 50%;
}

.phone-fab svg {
  width: var(--phone-glyph-size);
  height: var(--phone-glyph-size);
  fill: #ffffff;
  flex: 0 0 auto;
}