/* ==========================================================================
   Tickets page (page-purchase-tickets.php). Builds on css/looc-ui.css.
   ========================================================================== */

.looc-tickets-widget { padding: 20px; overflow: visible; }
.looc-tickets-list { display: grid; gap: 28px; }
.looc-tickets-list .looc-teaser { font-size: 19px; margin: 16px 0 18px; }

.looc-tickets-empty { max-width: 720px; margin: 0 auto; padding: 48px 32px; text-align: center; }
.looc-tickets-empty > i { font-size: 34px; color: var(--looc-gold); margin-bottom: 14px; }
.looc-tickets-empty h2 { font-size: clamp(24px, 3vw, 32px) !important; margin: 0 0 10px !important; line-height: 1.2 !important; }
.looc-tickets-empty p { color: var(--looc-muted); margin: 0 0 22px; }
.looc-tickets-empty .looc-ctas { justify-content: center; }

.looc-tickets-help { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.looc-tickets-help li {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 22px; border: 1px solid var(--looc-line); border-radius: var(--looc-radius); background: var(--looc-surface);
}
.looc-tickets-help i { flex: 0 0 40px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(252, 159, 19, 0.14); color: var(--looc-gold); }
.looc-tickets-help strong { display: block; margin-bottom: 2px; color: var(--looc-ink); font-size: 16px; }
.looc-tickets-help span { display: block; color: var(--looc-muted); font-size: 15px; }
@media (max-width: 860px) { .looc-tickets-help { grid-template-columns: minmax(0, 1fr); } }