/* Variables (overridden by Style controls) */
.mcga-tabs{
  --mcga-accent:#88c341;
  --mcga-accent-weak:#cfe7aa;
  --mcga-interval:5000ms;
}

/* Panels are whatever your templates output; we don't style inside. */
.mcga-tabs__panel{ display:block; }
.mcga-tabs__panel[hidden]{ display:none; }
.mcga-tabs__panel-inner{ /* optional: feel free to adjust or remove */
  /* padding: 0;  keep your template in full control */
}

/* ---------- Labels row (no lines) ---------- */
.mcga-tabs__nav{ background:#fff; }
.mcga-tabs__list{
  display:flex; flex-wrap:nowrap;
  justify-content:space-between; /* can be overridden by a control */
  gap:0;
  padding:22px min(5vw, 40px);
  margin-left:auto; margin-right:auto;           /* centers when max-width set */
  max-width:var(--mcga-nav-max, 100%);           /* set by control */
}

/* Each tab */
.mcga-tabs__tab{
  position:relative;
  flex:1 1 0;               /* “stretch” mode; we’ll toggle to auto width via class */
  text-align:left;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:16px 28px 18px;
  font-size:clamp(14px, 1.3vw, 18px);
  color:#9aa0a6;
  border-right:0;           /* removed vertical dividers */
  transition: background-color .25s ease;
}

/* Optional: non-stretched mode (width fits label content) */
.mcga-tabs--auto .mcga-tabs__tab{ flex:0 0 auto; }
.mcga-tabs--auto .mcga-tabs__list{ justify-content:flex-start; gap:40px; }

/* Pale bar above each label */
.mcga-tabs{ --mcga-bar-width:96px; --mcga-hover-bg:#f7f9fb; } /* defaults */
.mcga-tabs__tab::before{
  content:""; display:block; height:8px; width:var(--mcga-bar-width); border-radius:4px;
  background:var(--mcga-accent-weak); margin:0 0 10px 0;
}

/* Active + hover = subtle grey background */
.mcga-tabs__tab:hover,
.mcga-tabs__tab.is-active{ background:var(--mcga-hover-bg); }
.mcga-tabs__tab.is-active{ color:#606469; }
.mcga-tabs__tab.is-active::before{ background:var(--mcga-accent); }

/* Autoplay progress overlay (animated). We animate scaleX so width is variable-safe. */
.mcga-tabs.has-autoplay .mcga-tabs__tab.is-active::after{
  content:""; position:absolute; left:28px; top:16px; height:8px;
  width:var(--mcga-bar-width); border-radius:4px; background:var(--mcga-accent);
  transform-origin:left center; transform:scaleX(0);
}
.mcga-tabs.has-autoplay .mcga-tabs__tab.is-active.is-animating::after{
  animation: mcga-progress-scale var(--mcga-interval) linear forwards;
}
@keyframes mcga-progress-scale{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Focus ring (unchanged) */
.mcga-tabs__tab:focus{ outline:2px solid var(--mcga-accent); outline-offset:2px; }

/* ---- Hard reset for button defaults coming from theme/Elementor Kit ---- */
.mcga-tabs .mcga-tabs__tab,
.mcga-tabs .mcga-tabs__tab:hover,
.mcga-tabs .mcga-tabs__tab:focus,
.mcga-tabs .mcga-tabs__tab:active {
  background: transparent !important;       /* kill pink backgrounds */
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;                            /* we set colors elsewhere */
  border-radius: 0;                          /* remove pill corners; tweak if desired */
  -webkit-appearance: none;
  appearance: none;
}

/* Our intended backgrounds */
.mcga-tabs .mcga-tabs__tab:hover,
.mcga-tabs .mcga-tabs__tab.is-active {
  background: var(--mcga-hover-bg) !important;
}

/* =========================
   Responsive tweaks
   ========================= */

/* Tablet (≤ 1024px): tighten paddings/gaps, slightly shorter bar */
@media (max-width: 1024px){
  .mcga-tabs__list{
    padding:16px 20px;
    gap:0;
  }
  .mcga-tabs{ --mcga-bar-width: 72px; }
  .mcga-tabs__tab{ padding:14px 22px 16px; }
}

/* Mobile (≤ 767px): make labels a horizontal scroll row with snap */
@media (max-width: 767px){
  /* Horizontal scroll container */
  .mcga-tabs__list{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 12px 16px;
  }
  /* Each tab becomes content-sized “chip”; force non-stretch */
  .mcga-tabs__tab{
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 12px 16px 14px;
    font-size: 15px;
  }
  /* Slightly smaller bar on phones */
  .mcga-tabs{ --mcga-bar-width: 56px; }

  /* Optional: hide scrollbars (WebKit) */
  .mcga-tabs__list::-webkit-scrollbar{ height: 0; }
}

/* Disable the animated progress overlay */
.mcga-tabs.has-autoplay .mcga-tabs__tab.is-active::after {
  content: none !important;
}

/* (Optional) ensure the top bar just switches instantly */
.mcga-tabs__tab::before { transition: none; }
/* You already have: .mcga-tabs__tab.is-active::before { background: var(--mcga-accent); } */