/* Colors, sizes and motion are CSS variables set by the widget's style
   controls; the other controls use a more specific selector than these
   defaults, so the result does not depend on stylesheet order. */
.pfwa {
  display: flex;
  flex-direction: column;
  align-items: var(--pfwa-align, flex-start);
}
.pfwa .pfwa__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pfwa-icon-gap, 10px);
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 14px 28px;
  border: 0 solid transparent;
  border-radius: 999px;
  background-color: #25d366;
  color: var(--pfwa-color, #fff);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--pfwa-shadow, none);
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: var(--pfwa-speed, 250ms);
  transition-timing-function: ease;
}
/* :where() keeps this at the same weight as the rule above, so a background
   chosen in the Normal tab also stays on hover unless Hover sets its own. */
.pfwa .pfwa__btn:where(:hover, :focus-visible) {
  background-color: #1ebe5b;
}
.pfwa .pfwa__btn:hover,
.pfwa .pfwa__btn:focus-visible {
  color: var(--pfwa-hover-color, var(--pfwa-color, #fff));
  /* No hover shadows set = keep the normal ones. */
  box-shadow: var(--pfwa-shadow-h, var(--pfwa-shadow, none));
  text-decoration: none;
  transform: translateY(calc(var(--pfwa-lift, 0px) * -1));
}
.pfwa .pfwa__btn--icon-after {
  flex-direction: row-reverse;
}
.pfwa .pfwa__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--pfwa-icon-color, currentColor);
  font-size: var(--pfwa-icon-size, 1.25em);
  line-height: 1;
  transition: color var(--pfwa-speed, 250ms) ease;
}
.pfwa .pfwa__btn:hover .pfwa__icon,
.pfwa .pfwa__btn:focus-visible .pfwa__icon {
  color: var(--pfwa-icon-hover, var(--pfwa-icon-color, currentColor));
}
.pfwa .pfwa__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.pfwa .pfwa__notice {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: #fff8e5;
  color: #1d2327;
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .pfwa .pfwa__btn { transition-duration: 0ms; }
  .pfwa .pfwa__btn:hover { transform: none; }
}