/*** ------ Wux events form ------ ***/
.wux-bookings--event-list { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
.wux-bookings--event-list .wux-bookings--event-list__main { background-color: var(--clr-sand); }
.wux-bookings--event-list .wux-bookings--event__overview h3 { font-family: var(--font-primary); font-size: 2rem; font-weight: 600; margin-bottom: 1.4rem; }  
.wux-bookings--event-list .wux-bookings--event__overview table { --fs: 1.6rem; border: none; display: grid; margin-bottom: 3.2rem; }
.wux-bookings--event-list .wux-bookings--event__overview table :is(td, th) { padding: 0; border: none; }
.wux-bookings--event-list .wux-bookings--event__overview table th { text-align: left; }
.wux-bookings--event-list .wux-bookings--event__overview table th span { color: var(--clr-dark-75); }
.wux-bookings--event-list .wux-bookings--event__overview table td span { color: var(--clr-dark); }
.wux-bookings--event-list .wux-bookings--event__overview table small { display: block; width: 100%; margin-bottom: 1rem; font-size: 1.6rem; font-weight: 500; }
.wux-bookings--event-list .wux-bookings--event__overview table tr { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.wux-bookings--event-list .wux-bookings--event__overview table tbody { display: grid; border-top: 1px solid rgba(var(--clr-dark-75-rgb), .3); padding: 2.4rem 0 2.4rem 0; }  
.wux-bookings--event-list .wux-bookings--event__overview table tfoot { display: grid; border-top: 1px solid rgba(var(--clr-dark-75-rgb), .3); padding-top: 2.4rem; }
.wux-bookings--event-list .wux-bookings--event__overview p { --fs: 1.2rem; text-align: center; padding-top: 1.2rem; }
.wux-bookings--event-list .wux-bookings--event__overview .wpb-person { margin-bottom: 2rem; }
.wux-bookings--event-list .wux-bookings--event__overview .wpb-person p { padding-top: 0; text-align: left; color: var(--clr-text); }

.wux-bookings--event-list .form-section { margin-bottom: 32px; }
.wux-bookings--event-list .form-section:last-child { margin-bottom: 0; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) { --gc: 2; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 10px; position: relative; } 
.wux-bookings--event-list :is(.events, .variations, .locations, .dates)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, .5); z-index: 1; opacity: 0; pointer-events: none; transition: opacity .3s; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates).--loading { pointer-events: none; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates).--loading::before { opacity: 1; pointer-events: all; }


.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input { position: absolute; left: -999rem; opacity: 0; }

.wux-bookings--event-list :is(.events, .variations, .locations, .dates) label { cursor: pointer; display: block; font-size: 16px; line-height: 1.2; color: var(--clr-dark); background-color: transparent; border-radius: 0; padding: 1.6rem; position: relative; border: 1px solid var(--clr-border); }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) label * { font: inherit; color: inherit; transition: color var(--ts-15) ease-in-out; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) label::after { content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; position: absolute; top: 1.6rem; right: 1.4rem; border-radius: 50%; transition: background-color 150ms ease-in-out; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input:checked + label { background-color: var(--clr-primary); border-color: var(--clr-primary); }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input:checked + label * { color: #fff; }
.wux-bookings--event-list :is(.events, .variations, .locations, .dates) input:checked + label::after { background-color: #fff; outline: 2px solid var(--clr-primary); outline-offset: -3px;}

.wux-bookings--event-list .dates label .start-date { font-weight: 500; }
.wux-bookings--event-list .dates label .time-range { opacity: .75; font-size: 14px; }
.wux-bookings--event-list .dates label .spots-remaining { font-size: 13px; }
.wux-bookings--event-list .dates input:disabled + label { cursor: not-allowed; background-color: var(--clr-border); border-color: var(--clr-border); }
.wux-bookings--event-list .dates input:disabled + label * { color: rgba(var(--clr-dark-rgb), .4); }

.wux-bookings--event-list .field-row { --gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); gap: 10px; }
.wux-bookings--event-list .field-row + .field-row { margin-top: 10px; }
.wux-bookings--event-list .field-row .field-col label { font-size: 1.6rem; line-height: 1; font-weight: 500; display: block; width: 100%; line-height: 1; margin-bottom: 1.2rem; }
.wux-bookings--event-list .field-row .field-col input:not([type="checkbox"]), .wux-bookings--event-list .field-row .field-col select { width: 100%; font-size: 1.6rem; padding: .5rem 2rem; min-height: 5.5rem; border: 1px solid var(--clr-border); background-color: transparent; }
.wux-bookings--event-list .field-row .field-col input:focus, .wux-bookings--event-list .field-row .field-col select:focus { outline: none; }  
.wux-bookings--event-list .field-row .field-col .form-check { display: flex; padding: 0; column-gap: .5rem; }

.wux-bookings--event-list .form-section--participant { counter-reset: participants; }
.wux-bookings--event-list .form-section--participant .field-row { --gc: 1; counter-increment: participants; }
.wux-bookings--event-list .form-section--participant .field-row .field-col .field-group { display: flex; }
.wux-bookings--event-list .form-section--participant .field-row .field-col .field-group input + input { border-left: 0; }
.wux-bookings--event-list .form-section--participant .field-row .field-col .field-group::before { content: "Deelnemer " counter(participants) " "; white-space: nowrap; display: flex; align-items: center; font-size: 1.6rem; font-weight: 500; border: 1px solid var(--clr-border); padding: 10px 24px; border-right: 0; }

@media (min-width: 768px) {
    .wux-bookings--event-list :is(.events, .variations, .locations, .dates) { --gc: 3; }
    .wux-bookings--event-list .field-row { --gc: 2; }

    .field-col--wide { grid-column: span 2; }
}

@media (min-width: 992px) {
    .wux-bookings--event-list { grid-template-columns: minmax(0, 1fr) minmax(0, 32.3rem); }
}

@media (min-width: 1200px) {
    .wux-bookings--event-list { column-gap: 6.4rem; }
}

@media (min-width: 1400px) {
    .wux-bookings--event-list { column-gap: 8rem; }
}