/* --- Container & Layout --- */
.wp-block-tab-group,
.tab-anything-panels {
  width: 100%;
  box-sizing: border-box;
}

/* --- Tab Navigation Layout --- */
.tab-anything-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 0.5em;
  width: 100%;
  box-sizing: border-box;
}

/* --- Alignment Variants (set by extra class) --- */
.tab-anything-nav--horizontal {
  flex-direction: row !important;
}
.tab-anything-nav--vertical {
  flex-direction: column !important;
}
/* Fluid: buttons fill row (default) */
.tab-anything-nav--fluid {
  justify-content: flex-start; /* works with flex:1 on buttons */
}
.tab-anything-nav--fluid .tab-anything-button {
  flex: 1 1 0;
  min-width: 64px;
}

/* Center-aligned */
.tab-anything-nav--center {
  justify-content: center;
}
.tab-anything-nav--center .tab-anything-button {
  flex: 0 0 auto;
}

/* Left-aligned */
.tab-anything-nav--left {
  justify-content: flex-start;
}
.tab-anything-nav--left .tab-anything-button {
  flex: 0 0 auto;
}

/* Right-aligned */
.tab-anything-nav--right {
  justify-content: flex-end;
}
.tab-anything-nav--right .tab-anything-button {
  flex: 0 0 auto;
}

/* --- Responsive Per-row: works for all alignments --- */
.tab-anything-nav[data-items-per-row="1"] .tab-anything-button { flex-basis: 100%; }
.tab-anything-nav[data-items-per-row="2"] .tab-anything-button { flex-basis: 50%; }
.tab-anything-nav[data-items-per-row="3"] .tab-anything-button { flex-basis: 33.3333%; }
.tab-anything-nav[data-items-per-row="4"] .tab-anything-button { flex-basis: 25%; }
.tab-anything-nav[data-items-per-row="5"] .tab-anything-button { flex-basis: 20%; }
.tab-anything-nav[data-items-per-row="6"] .tab-anything-button { flex-basis: 16.6666%; }
@media (max-width: 1024px) {
  .tab-anything-nav[data-items-per-row-tablet="1"] .tab-anything-button { flex-basis: 100%; }
  .tab-anything-nav[data-items-per-row-tablet="2"] .tab-anything-button { flex-basis: 50%; }
  .tab-anything-nav[data-items-per-row-tablet="3"] .tab-anything-button { flex-basis: 33.3333%; }
  .tab-anything-nav[data-items-per-row-tablet="4"] .tab-anything-button { flex-basis: 25%; }
  .tab-anything-nav[data-items-per-row-tablet="5"] .tab-anything-button { flex-basis: 20%; }
  .tab-anything-nav[data-items-per-row-tablet="6"] .tab-anything-button { flex-basis: 16.6666%; }
}
@media (max-width: 767px) {
  .tab-anything-nav[data-items-per-row-mobile="1"] .tab-anything-button { flex-basis: 100%; }
  .tab-anything-nav[data-items-per-row-mobile="2"] .tab-anything-button { flex-basis: 50%; }
  .tab-anything-nav[data-items-per-row-mobile="3"] .tab-anything-button { flex-basis: 33.3333%; }
  .tab-anything-nav[data-items-per-row-mobile="4"] .tab-anything-button { flex-basis: 25%; }
  .tab-anything-nav[data-items-per-row-mobile="5"] .tab-anything-button { flex-basis: 20%; }
  .tab-anything-nav[data-items-per-row-mobile="6"] .tab-anything-button { flex-basis: 16.6666%; }
}

/* --- Tab Button Styles --- */
.tab-anything-button {
  cursor: pointer;
  user-select: none;
  outline: none;
  border: none;
  background: transparent;
  font: inherit;
  display: inline-flex;
  align-items: center;
}

/* Panels: we now also toggle aria-hidden */
.tab-anything-panel[hidden] { display: none !important; }
.tab-anything-panel[aria-hidden="false"],
.tab-anything-panel.active {
  display: block;
  animation: fadeIn 0.18s;
}

.tab-anything-button:focus {
  z-index: 2;
}

/* --- Tab Panels --- */
.tab-anything-panels {
  width: 100%;
}
.tab-anything-panel {
  display: none;
  width: 100%;
  padding: 16px 0 0 0;
}
.tab-anything-panel[aria-hidden="false"],
.tab-anything-panel.active {
  display: block;
  animation: fadeIn 0.18s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}