/* =====================
   Tabs — generic ARIA-driven tab UI with sliding indicator.

   Pattern:
     <div data-tabs>
       <div role="tablist" class="tabs_main" aria-label="...">
         <!-- JS auto-injects: <span class="tabs_main_indicator" aria-hidden="true"></span> -->
         <button role="tab" aria-selected="true"  data-tab-target="annual"  class="tabs_main_btn is-active">Annual</button>
         <button role="tab" aria-selected="false" data-tab-target="monthly" class="tabs_main_btn">Monthly</button>
       </div>
       <div role="tabpanel" data-tab-panel="annual">…</div>
       <div role="tabpanel" data-tab-panel="monthly" hidden>…</div>
     </div>

   The light-pill background slides smoothly between active tabs (morphing
   left/width). On switch, JS sets `left` + `width` on the indicator to
   match the newly active tab's offset rect; CSS transitions both
   properties with the same easing for a single coherent morph.

   Webflow migration: indicator is a single absolutely-positioned span
   with one transition rule — copies into Designer cleanly. JS lives in
   Footer Code as part of `init-scripts.js` (data-attribute driven, no
   hard-coded selectors per section).
===================== */

/* Tab list wrapper — pill container (positioned for the absolute indicator) */
.tabs_main {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 0.25rem;                    /* 4px */
  border-radius: 0.375rem;             /* 6px */
  background-color: rgba(255, 255, 255, 0.05);
  isolation: isolate;                  /* contain z-index stack */
}

/* Sliding "morph" indicator — JS sets left/top/width/height to match the
   currently active tab; transition does the rest. */
.tabs_main_indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 0.375rem;             /* 6px */
  background-color: rgba(249, 245, 255, 0.15);
  pointer-events: none;
  z-index: 0;
  transition:
    left   0.32s cubic-bezier(0.4, 0, 0.2, 1),
    top    0.32s cubic-bezier(0.4, 0, 0.2, 1),
    width  0.32s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* JS adds this class for the very first paint to skip the entrance slide. */
.tabs_main_indicator.is-no-anim { transition: none; }

/* Reduced motion preference — no slide for users who opted out. */
@media (prefers-reduced-motion: reduce) {
  .tabs_main_indicator { transition: none; }
}

/* Tab button base — inactive state. Stays above the indicator. */
.tabs_main_btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1.125rem;          /* 6px 18px */
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  font-family: "Inter", sans-serif;
  font-weight: 500;                    /* Medium inactive */
  font-size: 0.875rem;                 /* 14px */
  line-height: 1.4286;                 /* 20/14 */
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Active state — only color + weight change. The moving indicator paints
   the background, so we explicitly clear the bg here. */
.tabs_main_btn.is-active,
.tabs_main_btn[aria-selected="true"] {
  background-color: transparent;
  color: var(--color--main-green, #90F99C);
  font-weight: 600;                    /* SemiBold active */
}

.tabs_main_btn:focus-visible {
  outline: 2px solid var(--color--main-green, #90F99C);
  outline-offset: 2px;
}