/* EM CEU Tracker - clickable ticket tiles on the public booking form.
 * Used when Ops Settings > One space per registration is on and the event
 * has two or more tickets. The real quantity select stays in the form,
 * hidden, so Events Manager's price summary and validation keep working. */
table.em-tickets.emceu-tiles,
table.em-tickets.emceu-tiles tbody {
    display: block;
    width: 100%;
    border: 0;
}
table.em-tickets.emceu-tiles thead { display: none; }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 0 0 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fff;
    border: 2px solid rgba( 0, 0, 0, 0.2 );
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
table.em-tickets.emceu-tiles tr.emceu-ticket-tile > td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
}
table.em-tickets.emceu-tiles .em-bookings-ticket-table-type { flex: 1 1 auto; font-weight: 600; }
table.em-tickets.emceu-tiles .em-bookings-ticket-table-price { flex: 0 0 auto; }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile > td.em-bookings-ticket-table-spaces { display: none; }
table.em-tickets.emceu-tiles .ticket-desc { display: block; font-weight: 400; font-size: 0.9em; opacity: 0.75; }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile:hover { border-color: #2271b1; background: rgba( 34, 113, 177, 0.06 ); }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile.is-selected { background: #e8f0fb; border-color: #2271b1; }
table.em-tickets.emceu-tiles tr.emceu-ticket-tile.is-selected .em-bookings-ticket-table-type::before {
    content: "\2713\00a0";
    font-weight: 700;
    color: #2271b1;
}
table.em-tickets.emceu-tiles tr.emceu-ticket-tile.is-na { opacity: 0.45; cursor: default; }