/* Reservations module: only what the shared design system does not provide. Tokens only. */

/* Components such as .btn and .empty-state set their own display, which would defeat [hidden]. */
.rsv [hidden] { display: none !important; }

.rsv-code-input { font-size: var(--fs-2xl); text-align: center; text-transform: uppercase; min-height: 64px; }

.rsv-result--success { border-left: 6px solid var(--c-green); }
.rsv-result--warning { border-left: 6px solid var(--c-amber); }
.rsv-result--danger { border-left: 6px solid var(--c-red); }
.rsv-result--info { border-left: 6px solid var(--brand); }
.rsv-result--pop { animation: rsv-pop var(--t-slow) var(--ease); }
@keyframes rsv-pop { 0% { transform: scale(0.94); opacity: 0.4; } 60% { transform: scale(1.02); } 100% { transform: none; opacity: 1; } }

.rsv-event-card { display: grid; gap: var(--sp-3); align-content: start; text-decoration: none; color: inherit; }
.rsv-event-card__date { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semibold); color: var(--brand); }
.rsv-event-card__title { margin: 0; font-size: var(--fs-xl); }
.rsv-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: var(--fs-sm); }
.rsv-meta > span { display: inline-flex; align-items: center; gap: var(--sp-1); }

.rsv-steps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: rsv-step; }
.rsv-steps li { counter-increment: rsv-step; display: grid; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); }
.rsv-steps li::before { content: counter(rsv-step); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rsv-ticket { max-width: 560px; margin: 0 auto; }
.rsv-ticket .ticket__head h1 { margin: 0; font-size: var(--fs-2xl); }
.rsv-ticket .code-display { text-align: center; margin: 0; }

@media (prefers-reduced-motion: reduce) { .rsv-result--pop { animation: none; } }