/*
 * Date list for events with several dates. Used inside the booking card on the event page
 * (.ev-dates--booking) and as past dates on the ended page (.ev-dates--history).
 */
.ev-dates {
  --dates-border: var(--ev-border, #e6e9ee);
  --dates-surface: var(--ev-surface, #ffffff);
  --dates-text: var(--ev-text, #181b20);
  --dates-muted: var(--ev-muted, #68707d);
  --dates-brand: var(--ev-brand, var(--shows-primary, #df640f));
  --dates-brand-strong: var(--ev-brand-strong, var(--shows-primary-hover, #b84f08));
  --dates-brand-soft: var(--ev-brand-soft, var(--shows-primary-soft, #fff0e3));
  --dates-radius: var(--ev-radius-sm, 12px);
  display: grid;
  gap: 12px;
}

html.night-mode .ev-dates {
  --dates-border: var(--ev-border, #2c3136);
  --dates-surface: var(--ev-surface, #1a1d1f);
  --dates-text: var(--ev-text, #f6f7f8);
  --dates-muted: var(--ev-muted, #a0a7b1);
  --dates-brand-soft: var(--ev-brand-soft, #36261a);
}

.ev-dates--booking {
  padding: 16px 24px;
  border-bottom: 1px solid var(--dates-border);
}

.ev-dates--booking:last-child {
  border-bottom: 0;
}

.ev-dates--history {
  max-width: 520px;
  margin: 12px 0 16px;
}

.ev-dates .ev-dates__notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--dates-radius);
  background: var(--dates-brand-soft);
  color: var(--dates-text);
  font-size: 14px;
}

.ev-dates__chosen {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--dates-text);
}

.ev-dates__chosen > i {
  margin-top: 3px;
  color: var(--dates-brand);
}

.ev-dates__chosen-text {
  display: grid;
  gap: 2px;
  font-size: 15px;
}

.ev-dates__chosen-text span {
  color: var(--dates-muted);
  font-size: 14px;
}

.ev-dates__toggle {
  width: fit-content;
  color: var(--dates-brand-strong);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ev-dates__picker[open] .ev-dates__toggle {
  margin-bottom: 10px;
}

.ev-dates .ev-dates__list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.ev-dates .ev-date {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid var(--dates-border);
  border-radius: var(--dates-radius);
  background: var(--dates-surface);
  color: var(--dates-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ev-dates .ev-date:hover,
.ev-dates .ev-date:focus-visible {
  border-color: var(--dates-brand);
  color: var(--dates-text);
}

.ev-dates .ev-date.is-chosen {
  border-color: var(--dates-brand);
  background: var(--dates-brand-soft);
}

.ev-dates .ev-date.is-closed {
  color: var(--dates-muted);
}

.ev-date__day {
  font-size: 15px;
  font-weight: 600;
}

.ev-date__time {
  grid-column: 1;
  color: var(--dates-muted);
  font-size: 14px;
}

.ev-date__state,
.ev-date__check {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.ev-date__state {
  color: var(--dates-muted);
  font-size: 13px;
}

.ev-date__check {
  color: var(--dates-brand);
}

.ev-dates__pages {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.ev-dates .ev-dates__pages a {
  color: var(--dates-brand-strong);
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .ev-dates--booking {
    padding-left: 18px;
    padding-right: 18px;
  }
}