.event-participation {border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: var(--surface);}
.event-participation-options {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.event-participation .event-participation-choice {display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;}
.event-participation-choice:has(input:checked) {border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent);}
.event-participation-choice input {width: auto; accent-color: var(--brand); margin-top: 4px;}
.event-participation-choice span {display: grid; gap: 6px;}
.event-participation small, .event-participation p {color: var(--muted); font-size: .85rem; line-height: 1.6;}
.event-participation [hidden] {display: none;}
@media (max-width: 620px) {.event-participation-options {grid-template-columns: 1fr;}}
.booking-attendance {grid-column: 1 / -1; display: grid; gap: 12px;}
.booking-attendance select {min-width: 0; min-height: 44px; font: inherit; cursor: pointer;}
.booking-attendance select:focus-visible {border-color: var(--brand);}
.booking-attendance option {background: var(--surface-2); color: var(--text);}
.booking-attendance-counts {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.booking-attendance-counts div {display: grid; gap: 4px; padding: 14px; background: var(--surface-2); border-radius: 12px;}
.booking-attendance-counts strong {font-size: 1.6rem;}
.booking-attendance-counts small {color: var(--muted);}
.booking-attendance progress {width: 100%; height: 7px; accent-color: var(--brand);}