/* Rhythmic motion for the three Buttonizer contact actions. */
#contact-zalo { --contact-rgb: 0, 104, 255; --contact-delay: 0s; }
#contact-phone { --contact-rgb: 0, 145, 0; --contact-delay: -.6s; }
#contact-messenger { --contact-rgb: 180, 30, 225; --contact-delay: -1.2s; }

.contact-button {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  animation: dgp-main-contact-shake 3.1s ease-in-out 0s infinite,
             dgp-main-contact-glow 3.6s ease-in-out var(--contact-delay) infinite !important;
}

#contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button,
#contact-phone#contact-phone#contact-phone#contact-phone.contact-button,
#contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button {
  margin-bottom: 22px !important;
}
#contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button::before,
#contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button::after,
#contact-phone#contact-phone#contact-phone#contact-phone.contact-button::before,
#contact-phone#contact-phone#contact-phone#contact-phone.contact-button::after,
#contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button::before,
#contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 2px solid rgba(var(--contact-rgb), .78);
  border-radius: 50%;
  background: rgba(var(--contact-rgb), .1);
  pointer-events: none;
  animation: dgp-main-contact-halo 3.6s ease-out var(--contact-delay) infinite;
}
#contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button::after,
#contact-phone#contact-phone#contact-phone#contact-phone.contact-button::after,
#contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button::after {
  animation-delay: calc(var(--contact-delay) - 1.8s);
}

@keyframes dgp-main-contact-shake {
  0%, 30%, 100% { transform: translateX(0) rotate(0deg); }
  4%, 12%, 20% { transform: translateX(-2px) rotate(-18deg); }
  8%, 16%, 24% { transform: translateX(2px) rotate(18deg); }
  27% { transform: translateX(-1px) rotate(-7deg); }
}
@keyframes dgp-main-contact-glow {
  0%, 65%, 100% { box-shadow: 0 3px 8px rgba(0, 0, 0, .2), 0 0 0 0 rgba(var(--contact-rgb), 0); }
  18%, 35% { box-shadow: 0 4px 10px rgba(0, 0, 0, .28), 0 0 10px 2px rgba(var(--contact-rgb), .78); }
}
@keyframes dgp-main-contact-halo {
  0% { transform: scale(1); opacity: 0; }
  12% { opacity: .9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* Keep the floating actions useful without covering tablet and phone content. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Buttonizer uses three fake IDs in its generated size selector. */
  #contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button,
  #contact-phone#contact-phone#contact-phone#contact-phone.contact-button,
  #contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    flex-basis: 50px !important;
    margin-bottom: 18px !important;
  }

  #contact-zalo.contact-button :is(img, svg),
  #contact-phone.contact-button :is(img, svg),
  #contact-messenger.contact-button :is(img, svg) {
    width: 23px !important;
    height: 23px !important;
  }
}

@media (min-width: 482px) and (max-width: 768px) {
  #contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button,
  #contact-phone#contact-phone#contact-phone#contact-phone.contact-button,
  #contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
    margin-bottom: 14px !important;
  }

  #contact-zalo.contact-button :is(img, svg),
  #contact-phone.contact-button :is(img, svg),
  #contact-messenger.contact-button :is(img, svg) {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (max-width: 481px) {
  #contact-zalo#contact-zalo#contact-zalo#contact-zalo.contact-button,
  #contact-phone#contact-phone#contact-phone#contact-phone.contact-button,
  #contact-messenger#contact-messenger#contact-messenger#contact-messenger.contact-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex-basis: 40px !important;
    margin-bottom: 12px !important;
  }

  #contact-zalo.contact-button :is(img, svg),
  #contact-phone.contact-button :is(img, svg),
  #contact-messenger.contact-button :is(img, svg) {
    width: 18px !important;
    height: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-button, .contact-button::before, .contact-button::after { animation: none !important; }
}