/* React Bits SlideCommit and ElectricBorder, fitted to AAG's existing surfaces. */
.plan-purchase-actions .billing-slide,
.billing-slide {
  --commit-progress: 0;
  --commit-height: 44px;
  --commit-ink: var(--dark-text, #f3ece2);
  --commit-track: var(--dark-surface, #12100e);
  --commit-success: #2f8a45;
  position: relative;
  display: block;
  flex-basis: 148px;
  min-width: 148px;
  min-height: var(--commit-height);
  height: var(--commit-height);
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--commit-track);
  color: var(--commit-ink);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.is-generator .billing-slide {
  --commit-track: var(--dark-surface);
  --commit-ink: var(--dark-text);
  box-shadow: inset 0 0 0 1px var(--dark-border);
}
.billing-slide.is-dragging { cursor: grabbing; touch-action: none; }
.billing-slide[data-commit-phase="committing"],
.billing-slide[data-commit-phase="confirming"],
.billing-slide[data-commit-phase="committed"] { cursor: progress; }
.billing-slide__label {
  position: absolute;
  inset: 0 8px 0 38px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--commit-ink);
  opacity: calc(1 - var(--commit-progress));
  transition: opacity 200ms ease;
  pointer-events: none;
}
.billing-slide__fill {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--gold, #b98d3f) 30%, transparent);
  clip-path: inset(0 calc((1 - var(--commit-progress)) * 100%) 0 0 round 24px);
  transition: clip-path 380ms cubic-bezier(.23, 1, .32, 1), background-color 180ms ease;
  pointer-events: none;
}
.billing-slide__thumb {
  position: absolute;
  left: calc(4px + var(--commit-progress) * (100% - var(--commit-height)));
  top: 4px;
  bottom: 4px;
  width: calc(var(--commit-height) - 8px);
  display: grid;
  place-items: center;
  background: var(--commit-ink);
  color: var(--commit-track);
  border-radius: 999px;
  box-shadow: 0 2px 8px #0002;
  transition: left 380ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease, scale 200ms ease;
  pointer-events: none;
}
.billing-slide__thumb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.billing-slide.is-dragging .billing-slide__thumb,
.billing-slide.is-dragging .billing-slide__fill,
.billing-slide.is-dragging .billing-slide__label { transition: none; }
.billing-slide[data-commit-phase="confirming"] .billing-slide__thumb,
.billing-slide[data-commit-phase="committed"] .billing-slide__thumb { background: var(--commit-success); color: #fff; }
.billing-slide[data-commit-phase="confirming"] .billing-slide__fill,
.billing-slide[data-commit-phase="committed"] .billing-slide__fill { background: color-mix(in srgb, var(--commit-success) 35%, transparent); }
.billing-slide__live { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.billing-slide:focus-visible { outline: 2px solid var(--gold, #b98d3f); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .billing-slide:hover:not(:disabled):not(.is-dragging) .billing-slide__thumb { scale: 1.03; }
}
.billing-electric {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 16px;
  overflow: hidden;
  clip-path: inset(0 round 16px);
  contain: paint;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg) translateZ(2px);
  opacity: 0;
  transition: opacity 300ms ease;
}
.billing-electric--back { transform: rotateY(180deg) translateZ(2px); }
.billing-electric.is-visible { opacity: 1; }
.billing-electric canvas { position: absolute; inset: 0; max-width: 100%; max-height: 100%; pointer-events: none; }
.billing-electric__glow {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold, #b98d3f);
  border-radius: inherit;
  opacity: var(--electric-strength, .18);
  box-shadow: inset 0 0 5px var(--gold, #b98d3f);
  transition: opacity 240ms ease;
  pointer-events: none;
}
.plan-tile.is-behind .billing-electric { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .billing-slide__thumb, .billing-slide__fill, .billing-slide__label, .billing-electric, .billing-electric__glow { transition: none; }
  .billing-slide:hover .billing-slide__thumb { scale: 1; }
}