/*!
 * Pricing Toggle v1.0 - monthly / yearly switch with animated prices
 * by Rehmat (Animated Creativity) - https://animatedcreativity.com - MIT License
 */

/* ---------- the switch ---------- */
[data-pricing-toggle] {
  --pt-accent: #7c5cff;                       /* colour of the sliding pill */
  --pt-track: rgba(127, 127, 150, .16);       /* background of the switch */
  --pt-text: inherit;
  --pt-active-text: #fff;
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: var(--pt-track);
  isolation: isolate;
}
[data-pricing-toggle] button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pt-text);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s;
  -webkit-tap-highlight-color: transparent;
}
[data-pricing-toggle] button[aria-checked="true"] { color: var(--pt-active-text); }
[data-pricing-toggle] button:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }

/* the pill that slides under the active word (added by pricing.js) */
.pt-pill {
  position: absolute;
  z-index: 0;
  top: 5px; bottom: 5px; left: 0;
  width: var(--pt-w, 0);
  transform: translateX(var(--pt-x, 0));
  border-radius: 999px;
  background: var(--pt-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1);
  pointer-events: none;
}
.pt-pill.pt-instant { transition: none; }

/* small "save 20%" label inside a switch button */
.pt-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .18);
  color: #16a34a;
  font-size: .75em;
  font-weight: 700;
}
[aria-checked="true"] .pt-badge { background: rgba(255, 255, 255, .25); color: inherit; }

/* ---------- prices ---------- */
[data-price] { font-variant-numeric: tabular-nums; }    /* digits keep their width while they count */

/* <span data-pricing-show="yearly"> is only visible for that period */
[data-pricing-show][hidden] { display: none !important; }

/* text read by screen readers when the period changes */
.pt-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 380px) {
  [data-pricing-toggle] button { padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-pill, [data-pricing-toggle] button { transition: none; }
}