/* === Billing Toggle — Clean Rewrite ===================================== */
/* Tweak these two to taste */
:root{
  --bill-height: 30px;   /* overall pill height (keeps knob aligned) */
  --label-lift: 16px;    /* how much higher the text should sit (12–18px) */
}

.bill-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:6px 0 10px;
}

/* Pill wrapper */
.bill-switch{
  --edge:#49c6ff;

  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:var(--bill-height);
  padding:2px;                           /* 2px inner gutter for knob */
  border-radius:999px;
  border:1.5px solid var(--edge);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:#eaffff;
  font-weight:800;
}

/* Buttons inside the pill */
.bill-option{
  display:inline-block;                  /* IMPORTANT: no grid centering */
  height:calc(var(--bill-height) - 4px); /* same inner box as knob area */
  line-height:calc(var(--bill-height) - var(--label-lift)); /* LIFT TEXT */
  padding:0 12px var(--label-lift);      /* give the lift to bottom padding */
  border:0;
  background:transparent;
  color:inherit;
  border-radius:999px;
  cursor:pointer;
  font-size:.9rem;
}

.bill-option.is-active{
  background:rgba(255,255,255,.06);
}

/* Sliding knob */
.bill-knob{
  position:absolute;
  top:2px;
  left:2px;
  width:calc(50% - 4px);
  height:calc(100% - 4px);
  border-radius:999px;
  background:rgba(255,255,255,.14);
  transition:transform .22s ease;
}

/* State when Yearly is active (your HTML/JS sets data-mode) */
.bill-switch[data-mode="yearly"] .bill-knob{
  transform:translateX(100%);
}

/* Offer badge text to the right of the pill */
.bill-offer{
  font-weight:700;
  font-size:.9rem;
  white-space:nowrap;
  background:linear-gradient(90deg,#49c6ff,#8fe4ff,#49c6ff);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:billShimmerBlue 7s linear infinite;
  filter:drop-shadow(0 0 4px rgba(73,198,255,.25));
}

@keyframes billShimmerBlue{
  0% { background-position:0% center; }
  100% { background-position:200% center; }
}

/* Stack on small screens */
@media (max-width:480px){
  .bill-container{ flex-direction:column; gap:8px; }
}