/* Tab Navigation (Desktop) */
.os-tabs-table__nav {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 3.2rem;
  }
  
.os-tabs-table__nav .tab-button {
flex: 1;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1.6rem;
background-color: var(--wp--preset--color--brand-slate-ultra-ultra-light);
border-radius: 0.8rem;
justify-content: center;
font-size: var(--wp--preset--font-size--body-3);
font-weight: 500;
transition: var(--os-transition);
}
.os-tabs-table__nav .tab-button.is-active {
  box-shadow: var(--os-box-shadow-s);
}
  
.os-tabs-table__nav .tab-button img {
height: 2.4rem;
width: auto;
}
.os-tabs-table__nav .tab-button.is-active .tab-icon,
.os-tabs-table__nav .tab-button:not(.is-active) .tab-icon-white,
.os-tabs-table__nav .tab-button:not(.is-active):hover .tab-icon-white
{
display: none;
}
.os-tabs-table__nav .tab-button:not(.is-active) {
cursor: pointer;
}

.os-tabs-table__nav .tab-button:not(.is-active):hover {
background-color: var(--wp--preset--color--brand-slate-ultra-light);
}
.os-tabs-table__nav .tab-button.is-active {
background-color: var(--wp--preset--color--text-dark);
color: white;
}
  
  /* Tab Panels (Desktop) */
  .tab-panels-wrapper {
    position: relative;
    min-height: 300px; /* or whatever suits your content */
  }
  .os-tabs-table .tab-panel {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  
  .os-tabs-table .tab-panel.is-visible {
    opacity: 1;
    visibility: visible;
    position: relative;
  }
  
  /* Table Layout */
  .os-tabs-table .tab-table {
    border-radius: var(--os-radius-m);
    box-shadow: var(--os-box-shadow-l);
    overflow: hidden;
    background-color: white;
  }
  
  .os-tabs-table .table-row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--wp--preset--color--brand-slate-ultra-light);
  }
  
  .os-tabs-table .table-row:last-child {
    border-bottom: none;
  }
  
  .os-tabs-table .table-row:nth-child(even) {
    background-color: var(--wp--preset--color--background-grey);
  }
  
  .os-tabs-table .table-cell {
    flex: 1;
    padding: 3.2rem;
  }
  
  .os-tabs-table .table-header {
    background: var(--wp--preset--gradient--charcoal-radial-gradient);
    color: white;
    font-weight: 700;
  }
  
  /* Tooltip Styling */
  .tooltip-trigger.has-tooltip {
    border-bottom: 3px dotted var(--os-accent);
    position: relative;
    cursor: help;
  }
  
  .tooltip-trigger.has-tooltip:hover .tooltip-content,
  .tooltip-trigger.has-tooltip:focus .tooltip-content {
    display: block;
  }
  
  .tooltip-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 10;
    margin-top: 1.25rem;
    padding: 1.2rem;
    background: var(--wp--preset--color--text-dark);
    color: #fff;
    box-shadow: var(--os-box-shadow-s);
    border-radius: 0.5rem;
    font-size: var(--wp--preset--font-size--body-3);
    line-height: 1.5;
    max-width: 200px;
  }
  
  .tooltip-content::before {
    content: "";
    background-color: var(--wp--preset--color--text-dark);
    width: 36px;
    height: 36px;
    transform: rotate(45deg) translateY(50%);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    margin-top: -18px;
  }
  
  /* Accordion Panels (Mobile) */
  .os-tabs-table .tab-panel-accordion {
    display: none;
  }
  
  .os-tabs-table .accordion-summary {
    background: var(--wp--preset--color--brand-slate-ultra-ultra-light);
    padding: 2.4rem;
    padding-right: 6.4rem;
    border-radius: 1.6rem;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--body-1);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
  }
  .os-tabs-table .accordion-summary::marker {
    content: none;
  }
  .os-tabs-table .accordion-summary::after {
    content: '';
    width: 1.6rem;
    height: 1.6rem;
    background-image: url('../../img/chevron-down.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
    position: absolute;
    right: 3.6rem;
    transition: transform 0.3s ease;
  }

.os-tabs-table details[open] .accordion-summary::after {
  transform: rotate(180deg);
}
.stacked-table {
  box-shadow: var(--os-box-shadow-l);
  border-radius: var(--wp--preset--spacing--24);
  overflow: hidden;
}
.stacked-table h3.column-heading {
  font-size: var(--wp--preset--font-size--headline-4);
  margin-top: 0;
  margin-bottom: 0;
}
.stacked-table .column-heading {
  color: white;
  background: var(--wp--preset--gradient--charcoal-radial-gradient);
  padding: var(--wp--preset--spacing--small);
}
.stacked-table .column-list {
  margin-top: 0;
  margin-bottom: 0;
}
.stacked-table .column-list-item {
  padding: var(--wp--preset--spacing--small);
  border-bottom: var(--wp--preset--color--brand-slate-ultra-light);
  margin-bottom: 0;
}
.stacked-table .column-list-item:last-child {
  border-bottom: none;
}
.stacked-table .column-list-item:nth-of-type(even) {
  background-color: var(--wp--preset--color--background-grey);
}

  /* Mobile View */
  @media (max-width: 768px) {
    /* Hide tabs and show accordion */
    .os-tabs-table__nav,
    .tabs-mode {
      display: none;
    }
    .os-tabs-table .accordion-mode {
      display: block;
    }
    .os-tabs-table .tab-panel-accordion {
      display: block;
      margin-bottom: 1.5rem;
      border-radius: var(--os-radius-m);
      overflow: visible;
    }
    /* Make panels behave like normal content on mobile */
    .os-tabs-table .tab-panel {
      opacity: 1 !important;
      visibility: visible !important;
      position: static !important;
      z-index: auto !important;
      transition: none !important;
      padding: 2.4rem 0;
    }

    .table-scroll {
        overflow-x: scroll;
        max-width: 100%;
        display: block;
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    }
    .tab-table {
        min-width: 600px; /* or wider, based on your content */
    }
  }