/* ============================================================
   Circus Extreme — Ticket prices table
   ------------------------------------------------------------
   Styles for partials/prices-table.blade.php, which is shared by
   the tickets-seating block and the location single template.
   These rules used to live inside tickets-seating.css, which the
   plugin only enqueues on pages that actually contain the block —
   so on the location template the table rendered unstyled, with
   the browser's centred, bold <th> defaults.

   The markup has one source of truth, so its CSS does too.
   ============================================================ */

.ce-prices {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: 1rem;
}

.ce-prices th,
.ce-prices td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-white-color);
}

/* First column carries the seating area; no left padding keeps it flush
   with the widget title above it. */
.ce-prices th:first-child,
.ce-prices td:first-child {
  padding-left: 0;
}

.ce-prices thead th {
  font-family: var(--heading-font);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--circus-yellow);
  border-bottom-color: rgba(var(--circus-yellow-rgb), .4);
}

.ce-prices__label {
  font-weight: 400;
  color: var(--color-white);
}

.ce-prices__label span {
  display: block;
  font-weight: 300;
  font-size: .85rem;
  opacity: .75;
  margin-top: 2px;
}

.ce-prices__cell {
  font-weight: 400;
  white-space: nowrap;
}

/* A price superseded by a saving is struck through rather than removed,
   so the discount is visible. */
.ce-prices__cell .is-struck {
  text-decoration: line-through;
  opacity: .55;
}

/* ── Compact variant ─────────────────────────────────────────
   The sidebar column on the location single is roughly half the
   width the block gets, so the table breathes less: tighter
   padding and a smaller type size, with the price columns kept
   as narrow as their content allows.
   ─────────────────────────────────────────────────────────── */

.ce-prices--compact {
  font-size: .95rem;
}

.ce-prices--compact th,
.ce-prices--compact td {
  padding: 10px 6px;
}

.ce-prices--compact th:last-child,
.ce-prices--compact td:last-child {
  padding-right: 0;
}

.ce-prices--compact .ce-prices__cell {
  width: 1%;
}

/* ── Stacked layout on small screens ─────────────────────────
   Each cell announces which column it came from via data-label,
   because the header row is out of view once stacked.
   ─────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .ce-prices thead {
    /* Hidden visually but still the accessible header for each row. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .ce-prices,
  .ce-prices tbody,
  .ce-prices tr,
  .ce-prices th,
  .ce-prices td {
    display: block;
    width: auto !important;
  }

  .ce-prices tr {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-white-color);
  }

  .ce-prices th,
  .ce-prices td {
    border-bottom: 0;
    padding: 4px 0;
  }

  .ce-prices__cell {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .ce-prices__cell::before {
    content: attr(data-label);
    font-weight: 400;
    opacity: .75;
  }
}

/* ── Notice ──────────────────────────────────────────────────
   The savings notice rendered by the partial, and the
   concessions footnote on the location single.
   ─────────────────────────────────────────────────────────── */

.ce-tickets__notice {
  font-size: .9rem;
  opacity: .85;
  margin-bottom: var(--space-md);
}