/**
 * Order History — layout plus the module.json visual defaults.
 *
 * Divi's builder always paints attributes.<name>.default onto the canvas.
 * The published page only emits CSS for values that differ from those
 * defaults (or from Static CSS), so the card chrome has to live here or
 * the accordion collapses into unstyled <details>/<summary>. Title
 * alignment is restated so Maple's `h2 { text-align: center }` cannot
 * override the module's Title Text control.
 *
 * Column header and accordion summaries share .spruce-order-history__row
 * so Batch Number / Kit Name / Start Date line up. Flex is used instead
 * of grid because iOS Safari treats the first track of a grid <summary>
 * as the disclosure marker and does not paint it.
 */

.spruce-order-history {
  width: 100%;
}

.spruce-order-history__title {
  margin: 0 0 20px;
  text-align: inherit;
}

@media (max-width: 767px) {
  .spruce-order-history__title-name {
    display: none;
  }
}

.spruce-order-history__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spruce-order-history__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.spruce-order-history__item {
  margin: 0;
}

.spruce-order-history__colhead {
  font-weight: 600;
  background-color: #e8eef4;
  padding: 10px 16px;
  border: 1px solid #d5dde5;
  border-radius: 8px;
}

.spruce-order-history__header {
  cursor: pointer;
  list-style: none;
  background-color: #f8fafc;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.spruce-order-history__header::marker {
  display: none;
  content: none;
}

.spruce-order-history__header::-webkit-details-marker {
  display: none;
}

.spruce-order-history__batch {
  flex: 1 1 0;
  min-width: 0;
}

.spruce-order-history__kit {
  flex: 2 1 0;
  min-width: 0;
}

.spruce-order-history__date {
  flex: 1 1 0;
  min-width: 0;
}

.spruce-order-history__gutter {
  flex: 0 0 1.25em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.spruce-order-history__toggle::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.spruce-order-history__item[open] .spruce-order-history__toggle::after {
  transform: rotate(-135deg);
}

.spruce-order-history__empty {
  margin: 0;
}

.spruce-order-history__inner {
  margin: 0;
  background-color: #ffffff;
  padding: 16px;
}

.spruce-order-history__more {
  min-height: 1px;
}

.spruce-order-history__more-label {
  display: none;
  margin: 4px 0 0;
  padding: 8px 0;
  text-align: center;
}

.spruce-order-history__more.is-loading .spruce-order-history__more-label {
  display: block;
}