/* event/event_pro.css */
body {
  background: var(--custom-background-color);
  background-attachment: fixed;
  background-size: cover;
  color: var(--custom-text-color);
  font-family: var(--theme-font-body);
  line-height: 1.5;
}
.pro-shell { display: flex; flex-direction: column; min-height: 100dvh; position: relative; }
.pro-main { display: flex; flex: 1; justify-content: center; }
.pro-card {
  background: var(--custom-text-background-color);
  color: var(--custom-text-color);
  max-width: 510px;
  overflow: hidden;
  width: 100%;
}
.pro-banner { aspect-ratio: 16/9; object-fit: cover; }
.pro-content { padding: 1rem; }
.pro-header { align-items: flex-start; display: flex; gap: 1rem; }
.pro-header .event-logo { border-radius: 8px; max-height: 80px; max-width: 80px; }
.pro-card h1 {
  color: var(--custom-heading-color);
  font-family: var(--theme-font-heading);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
}
.pro-content h2,.schedule-group h3,.step-heading { font-family: var(--theme-font-heading); }
.pro-content h2 { color: var(--custom-heading-color); font-size: 1.125rem; }
.pro-meta { color: var(--custom-text-color-muted); margin: 1rem 0 2rem; }
.pro-meta .meta-icon { margin-right: .15rem; vertical-align: -.125em; width: 1.125em; }
.pro-description { margin-bottom: 2rem; }
/* ticket-list / ticket-row — the Pro skin of the purchase construct's public
   contract (docs/themes.md §The CSS contract). The list keeps its real <ul>
   inside: the wrapper is there to give it context, not to replace it. */
ticket-list {
  display: block;

  > ul { list-style: none; margin: 0; padding: 0; }

  > ul > li {
    border-bottom: 1px solid var(--divider-color);
    padding: 1rem 0;

    &:last-child { border-bottom: 0; }
    /* An attached add-on hangs off the ticket above it: no rule between the
       two, a spur down the left instead. */
    &[data-addon-for] {
      border-left: 2px solid var(--divider-color);
      margin-left: .2rem;
      padding: .6rem 0 .6rem 1rem;
    }
    &:has(+ li[data-addon-for]) { border-bottom: 0; }
  }
}
ticket-row {
  justify-content: space-between;

  & label { font-size: 1rem; font-weight: 500; }
  & .grow > span:first-child { font-size: 1rem; font-weight: 500; }
  & .muted, & .grow .muted { font-size: .875rem; }
  & .price { color: var(--custom-text-color-muted); }
  & .price input::placeholder { color: var(--custom-text-color); opacity: 1; }
  & input {
    background: transparent;
    border: 1px solid var(--custom-control-border);
    border-radius: 4px;
    box-shadow: var(--custom-control-shadow);
    color: var(--custom-text-color);
    padding: .45rem;
  }
  & .qty button.step {
    background: color-mix(in srgb, var(--custom-text-color) 6%, var(--custom-text-background-color));
    border: 0;
    color: var(--custom-text-color);
  }
  & .qty button.step:hover:not(:disabled) {
    background: var(--custom-text-color);
    color: var(--custom-text-background-color);
  }
}
.pro-card .schedule-group select {
  background: transparent;
  border: 1px solid var(--custom-control-border);
  border-radius: 4px;
  box-shadow: var(--custom-control-shadow);
  color: var(--custom-text-color);
  padding: .6rem;
  width: 100%;
}
.pro-card .checkout-fields input,.pro-card .checkout-fields select,.pro-card .checkout-fields textarea {
  background: transparent;
  border: 1px solid var(--custom-control-border);
  border-radius: 4px;
  box-shadow: var(--custom-control-shadow);
  color: var(--custom-text-color);
  padding: .6rem;
}
.pro-card .checkout-button {
  background: var(--custom-button-background-color);
  color: var(--custom-button-text-color);
  width: 100%;
}
.pro-form-footer {
  border-top: 1px solid var(--divider-color);
  margin: 1rem -1rem -1rem;
  padding: 1rem;
}
.pro-footer { color: var(--custom-text-color-muted); padding: 1rem; text-align: center; }
.pro-footer a { color: var(--custom-link-color); }
@media (min-width:600px) {
  .pro-main { flex: none; padding: 3rem 3rem 1.5rem; }
  .pro-card {
    border-radius: var(--custom-card-border-radius);
    box-shadow: var(--custom-card-shadow);
  }
  .pro-content { padding: 2rem; }
  .pro-form-footer { margin: 1rem -2rem -2rem; padding: 1rem 2rem; }
}
/* Stepped timed booking (checkout-steps.js) — Date › Time › Tickets. Rides the
account's Pro customisation tokens, so it themes with the event's palette. */
.checkout-steps { margin: .4rem 0 1rem; }
.step-progress { display: flex; gap: .4rem; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.step-progress li { flex: 1; min-width: 0; }
.step-chip {
  background: color-mix(in srgb,var(--custom-button-background-color) 12%,var(--custom-text-background-color));
  border: 0;
  border-radius: 99px;
  color: var(--custom-text-color-muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  padding: .4rem .55rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.step-progress li.active .step-chip {
  background: var(--custom-button-background-color);
  color: var(--custom-button-text-color);
}
.step-progress li.done .step-chip {
  background: color-mix(in srgb,var(--custom-button-background-color) 24%,var(--custom-text-background-color));
  color: var(--custom-text-color);
}
.step-chip:disabled { cursor: default; opacity: .5; }
.step-heading {
  color: var(--custom-heading-color);
  font-size: 1.2rem;
  font-weight: 600;
  margin: .1rem 0 .9rem;
}
.step-heading:focus { outline: none; }
.step-back {
  background: none;
  border: 0;
  color: var(--custom-link-color);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  margin: 0 0 .9rem;
  padding: .1rem 0;
}
.step-back:hover { text-decoration: underline; }
.step-choice {
  align-items: stretch;
  background: var(--custom-text-background-color);
  border: 1.5px solid var(--custom-control-border);
  border-radius: 12px;
  color: var(--custom-text-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0 0 .55rem;
  padding: .8rem 1rem;
  text-align: left;
  transition: opacity .32s ease,transform .32s ease,border-color .12s,background .12s;
  width: 100%;
}
.step-choice:hover:not(:disabled) { border-color: var(--custom-button-background-color); }
.step-choice[aria-current] {
  background: color-mix(in srgb,var(--custom-button-background-color) 8%,var(--custom-text-background-color));
  border-color: var(--custom-button-background-color);
}
.step-choice:disabled { cursor: default; opacity: .55; }
.step-choice-top {
  align-items: center;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}
.step-choice-main { font-size: 1.02rem; font-weight: 600; }
.step-choice-badge {
  background: color-mix(in srgb,var(--custom-button-background-color) 16%,var(--custom-text-background-color));
  border-radius: 99px;
  color: var(--custom-text-color);
  flex: none;
  font-size: .75rem;
  font-weight: 600;
  padding: .1rem .5rem;
}
.step-choice:disabled .step-choice-badge { opacity: .65; }
.step-choice-sub { color: var(--custom-text-color-muted); font-size: .85rem; }
.step-heading,.step-back { transition: opacity .32s ease,transform .32s ease; }
.step-panel.leaving { pointer-events: none; }
.step-panel.leaving .step-heading,.step-panel.leaving .step-back,.step-panel.leaving .step-choice:not(.chosen) {
  opacity: 0;
  transform: translateY(-14px);
}
.step-panel.leaving .step-choice.chosen { transform: translateY(-6px); }
.step-choice.chosen { position: relative; }
.step-choice.chosen::after {
  animation: spin .6s linear infinite;
  border: 2px solid var(--custom-button-background-color);
  border-radius: 50%;
  border-top-color: transparent;
  bottom: .6rem;
  content: "";
  height: 1rem;
  position: absolute;
  right: .6rem;
  width: 1rem;
}