/* Payo Pixel frontend buttons - critical, builder-safe */
.payo-button-embed,
.payo-whatsapp-embed {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  max-width: 100% !important;
}

.payo-track-button,
.payo-whatsapp-button {
  --payo-btn-bg: var(--payo-wa-bg, #25D366);
  --payo-btn-color: var(--payo-wa-color, #ffffff);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--payo-btn-bg) 92%, #ffffff 8%), var(--payo-btn-bg)) !important;
  color: var(--payo-btn-color) !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}

.payo-track-button:hover,
.payo-track-button:focus-visible,
.payo-whatsapp-button:hover,
.payo-whatsapp-button:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(.98) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255,255,255,.28) !important;
  color: var(--payo-btn-color) !important;
  text-decoration: none !important;
}

.payo-track-button:focus-visible,
.payo-whatsapp-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--payo-btn-bg) 38%, #ffffff 62%) !important;
  outline-offset: 3px !important;
}

.payo-track-button::after,
.payo-whatsapp-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.25), transparent 34%) !important;
  opacity: .9 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.payo-button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  color: currentColor !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.payo-button-icon svg,
.payo-button-embed .payo-button-icon svg,
.payo-track-button .payo-button-icon svg,
.payo-whatsapp-button .payo-button-icon svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  fill: currentColor !important;
  stroke: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.payo-track-button > span:not(.payo-button-icon),
.payo-whatsapp-button > span:not(.payo-button-icon) {
  display: inline-block !important;
  width: auto !important;
  max-width: min(260px, calc(100vw - 96px)) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.payo-button-floating,
.payo-whatsapp-floating {
  position: fixed !important;
  z-index: 2147482000 !important;
  bottom: 22px !important;
}
.payo-button-floating.is-right,
.payo-whatsapp-floating.is-right { right: 22px !important; }
.payo-button-floating.is-left,
.payo-whatsapp-floating.is-left { left: 22px !important; }

.payo-button-missing {
  display: inline-flex !important;
  align-items: center !important;
  padding: .65rem .9rem !important;
  border-radius: .75rem !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid #fed7aa !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

@media (max-width: 480px) {
  .payo-button-floating,
  .payo-whatsapp-floating { bottom: 14px !important; }
  .payo-button-floating.is-right,
  .payo-whatsapp-floating.is-right { right: 14px !important; }
  .payo-button-floating.is-left,
  .payo-whatsapp-floating.is-left { left: 14px !important; }
  .payo-track-button,
  .payo-whatsapp-button {
    max-width: calc(100vw - 28px) !important;
    min-height: 44px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
  }
}