/**
 * Floating Zalo / WhatsApp contact buttons.
 *
 * Rendered by inc/floating-contact.php on wp_footer. Self-contained so it never
 * depends on load order with main.css.
 */

.skinbar-floating-contact {
  --skinbar-floating-size: 58px;
  --skinbar-floating-gap: 14px;
  --skinbar-floating-edge: 22px;
  --skinbar-floating-bottom: 24px;

  /* Pink icon palette requested by the studio. The inline SVGs read these, so
     changing the four values below recolours both icons and their pulse ring. */
  --skinbar-zalo-color: #e894ae;
  --skinbar-zalo-color-deep: #d77c99;
  --skinbar-whatsapp-color: #e894ae;
  --skinbar-whatsapp-color-light: #f8cbd8;
  --skinbar-facebook-color: #e894ae;
  --skinbar-instagram-color: #e894ae;

  position: fixed;
  bottom: var(--skinbar-floating-bottom);
  z-index: 120;
  pointer-events: none;
}

.skinbar-floating-contact--right {
  right: var(--skinbar-floating-edge);
}

.skinbar-floating-contact--left {
  left: var(--skinbar-floating-edge);
}

.skinbar-floating-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--skinbar-floating-gap);
  align-items: flex-end;
}

.skinbar-floating-contact--left .skinbar-floating-contact__list {
  align-items: flex-start;
}

/* ---------------------------------------------------------------- button -- */

.skinbar-floating-contact__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--skinbar-floating-size);
  height: var(--skinbar-floating-size);
  border-radius: 50%;
  pointer-events: auto;
  text-decoration: none;
  box-shadow:
    0 10px 26px rgba(72, 64, 64, 0.22),
    0 2px 6px rgba(72, 64, 64, 0.14);
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.32s ease,
    opacity 0.42s ease;
  /* Entrance stays in CSS (staggered by --skinbar-floating-index) so the
     buttons appear even if the script fails to load. */
  /* "backwards" (not "both") so the finished animation does not lock the
     transform and block the hover lift below. */
  animation: skinbar-floating-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--skinbar-floating-index, 0) * 0.11s + 0.3s);
}

.skinbar-floating-contact__item:hover,
.skinbar-floating-contact__item:focus-visible {
  transform: translateY(-4px) scale(1.07);
  box-shadow:
    0 16px 34px rgba(72, 64, 64, 0.28),
    0 3px 8px rgba(72, 64, 64, 0.16);
}

.skinbar-floating-contact__item:focus-visible {
  outline: 2px solid #484040;
  outline-offset: 4px;
}

.skinbar-floating-contact__item:active {
  transform: translateY(-1px) scale(0.96);
  transition-duration: 0.12s;
}

/* ------------------------------------------------------------------ icon -- */

.skinbar-floating-contact__icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* Gentle idle float, offset per button so they never move in lockstep. */
  animation: skinbar-floating-bob 4.2s ease-in-out infinite;
  animation-delay: calc(var(--skinbar-floating-index, 0) * -1.4s);
}

.skinbar-floating-contact__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.skinbar-floating-contact__item:hover .skinbar-floating-contact__icon,
.skinbar-floating-contact__item:focus-visible .skinbar-floating-contact__icon {
  animation-play-state: paused;
}

/* ----------------------------------------------------------- pulse halo --- */

.skinbar-floating-contact__pulse {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.skinbar-floating-contact__pulse::before,
.skinbar-floating-contact__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: skinbar-floating-ping 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.skinbar-floating-contact__pulse::after {
  animation-delay: 1.1s;
}

.skinbar-floating-contact__item--zalo .skinbar-floating-contact__pulse {
  color: var(--skinbar-zalo-color, #e894ae);
}

.skinbar-floating-contact__item--whatsapp .skinbar-floating-contact__pulse {
  color: var(--skinbar-whatsapp-color, #e894ae);
}

.skinbar-floating-contact__item--facebook .skinbar-floating-contact__pulse {
  color: var(--skinbar-facebook-color, #e894ae);
}

.skinbar-floating-contact__item--instagram .skinbar-floating-contact__pulse {
  color: var(--skinbar-instagram-color, #e894ae);
}

/* ---------------------------------------------------------------- label --- */

.skinbar-floating-contact__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: #484040;
  color: #faf8f5;
  font-family: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(72, 64, 64, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(10px) scale(0.94);
  transform-origin: right center;
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(0.34, 1.4, 0.64, 1),
    visibility 0.26s;
}

.skinbar-floating-contact__label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  width: 9px;
  height: 9px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}

.skinbar-floating-contact--left .skinbar-floating-contact__label {
  right: auto;
  left: calc(100% + 12px);
  transform-origin: left center;
  transform: translateY(-50%) translateX(-10px) scale(0.94);
}

.skinbar-floating-contact--left .skinbar-floating-contact__label::after {
  right: auto;
  left: -4px;
}

.skinbar-floating-contact__item:hover .skinbar-floating-contact__label,
.skinbar-floating-contact__item:focus-visible .skinbar-floating-contact__label,
.skinbar-floating-contact.is-peek .skinbar-floating-contact__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) scale(1);
}

.skinbar-floating-contact.is-peek .skinbar-floating-contact__label {
  transition-delay: calc(var(--skinbar-floating-index, 0) * 0.09s);
}

/* -------------------------------------------------------------- motion ---- */

@keyframes skinbar-floating-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.55);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes skinbar-floating-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes skinbar-floating-ping {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 782px) {
  /* Clear the WordPress admin bar / mobile browser chrome. */
  .skinbar-floating-contact {
    --skinbar-floating-size: 52px;
    --skinbar-floating-gap: 12px;
    --skinbar-floating-edge: 16px;
    --skinbar-floating-bottom: 18px;
  }

  .skinbar-floating-contact__label {
    font-size: 12px;
    padding: 7px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skinbar-floating-contact__item,
  .skinbar-floating-contact__label {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }

  .skinbar-floating-contact__item,
  .skinbar-floating-contact__icon,
  .skinbar-floating-contact__pulse::before,
  .skinbar-floating-contact__pulse::after {
    animation: none;
  }

  .skinbar-floating-contact__item:hover,
  .skinbar-floating-contact__item:focus-visible {
    transform: none;
  }
}

@media print {
  .skinbar-floating-contact {
    display: none;
  }
}