/*
  Shared fitment UI: truck grouped (text + JSON) and wheel metaobject tables.
  Scope: .fitment-table on the root wrapper.
*/

.fitment-table {
  border-radius: var(--btn-border-radius, 0);
  overflow: hidden;

  .fitment-table__heading {
    padding: 2rem;
    background: rgba(var(--text-color) / 1);
    color: rgb(var(--bg-color));

    h2 {
      color: rgb(var(--bg-color));
      font-size: var(--h6-font-size);

      @media (min-width: 768px) {
        font-size: var(--h4-font-size);
      }
    }
  }

  details-disclosure {
    summary {
      padding: 1rem 2rem;
    }

    .disclosure__content {
      padding-bottom: 0;
    }
  }

  .fitment-table__disclosure--primary {
    background: rgba(var(--bg-color));

    &[open] {
      background: rgba(var(--text-color) / 0.04);
    }

    @media (hover: hover) {
      &:hover {
        background: rgba(var(--text-color) / 0.04);
      }
    }
  }

  .fitment-table__disclosure--nested {
    summary {
      font-size: 0.88em;

      @media (min-width: 768px) {
        font-size: 1em;
      }

      font-weight: 700;
    }

    .disclosure__title>.icon {
      margin-inline-end: 0;
      width: 1.1em;
      height: 1.1em;
    }

    tr {
      background-color: var(--bg-color) !important;
    }

    &[open] {
      summary {
        background: rgba(var(--text-color) / 1);
        color: rgb(var(--bg-color));
      }
    }

    @media (hover: hover) {
      &:hover {
        summary {
          background: rgba(var(--text-color) / 1);
          color: rgb(var(--bg-color));
        }
      }
    }

    .disclosure__panel,
    table {
      background-color: #fff;
      color: rgba(var(--text-color) / 1);
    }
  }

  /* Truck grouped: Engine × Year pivot */
  .fitment-table__pivot-wrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--text-color) / 1) #fff;
    font-size: 0.77em;

    @media (min-width: 768px) {
      font-size: 1em;
    }
  }

  .fitment-table__pivot {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 0.75rem;

      @media (min-width: 768px) {
        padding: 1.5rem;
      }

      text-align: center;
      border: 1px solid rgba(var(--text-color) / 0.1);
      white-space: nowrap;
      transition: background-color 0.3s ease;
    }

    th {
      text-transform: uppercase;
      padding: 1.15rem;
    }

    td {
      font-size: 0.77em;
    }

    td:first-child {
      width: 1%;
      white-space: nowrap;
      font-weight: 500;
      font-size: 0.88em;
      text-transform: uppercase;
    }
  }

  .fitment-check-icon {
    color: #2e7d32;
  }

  .fitment-extra {
    display: block;
    font-size: 1em;

    @media (min-width: 768px) {
      font-size: 0.77em;
    }

    opacity: 0.8;
  }

  hr {
    background-color: rgb(var(--bg-color));
    margin: 0;
    opacity: 0.25;
  }
}

/* Fitment Notes */
.fitment-table__notes {
  color: rgb(var(--bg-color));
  font-size: 0.88em;

  @media (min-width: 768px) {
    font-size: 1em;
  }

  legend {
    font-size: 1em;
  }

  p:last-of-type {
    margin-bottom: 0;
  }

  a {
    color: currentColor !important;
    text-decoration: underline;
  }

  ul {
    list-style: disc;
    padding-left: 3.5rem;
  }
}