/*
 * Events Table - front end
 *
 * Deliberately restrained: colours and fonts are inherited from the theme so the
 * table sits on a dark or light page without being restyled. Everything tweakable
 * is a custom property, so the Custom CSS box can override one value rather than
 * fighting a whole rule.
 */

.etbl-wrap {
	--etbl-line: rgba(128, 128, 128, 0.32);
	--etbl-stripe: rgba(128, 128, 128, 0.08);
	--etbl-hover: rgba(128, 128, 128, 0.14);
	--etbl-muted: rgba(128, 128, 128, 0.85);
	--etbl-soldout: #dd3333;
	--etbl-low: #e08a00;
	--etbl-group: #e2e2e2;
	--etbl-group-w: 1px;
	--etbl-radius: 3px;
	--etbl-cell-y: 12px;
	--etbl-cell-x: 10px;

	margin: 0 0 1.5em;
}

/* ---------------------------------------------------------------- filters */

.etbl-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin: 0 0 14px;
}

.etbl-filter {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 150px;
}

.etbl-filter-label {
	font-size: 0.82em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.8;
	margin: 0;
}

.etbl-wrap .etbl-select {
	width: 100%;
	max-width: 260px;
	padding: 7px 9px;
	border: 1px solid var(--etbl-line);
	border-radius: var(--etbl-radius);
	background-color: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.3;
}

.etbl-wrap .etbl-select option {
	/* Native dropdowns paint with the OS palette, so force something readable. */
	color: #222;
	background: #fff;
}

.etbl-wrap .etbl-reset {
	padding: 8px 14px;
	border: 1px solid var(--etbl-line);
	border-radius: var(--etbl-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	opacity: 0.85;
}

.etbl-wrap .etbl-reset:hover {
	opacity: 1;
	background: var(--etbl-hover);
}

/* Hide sold out tickbox, sitting on the same line as the bottom of the dropdowns. */
.etbl-wrap .etbl-filter-check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0 0 8px;
	cursor: pointer;
}

.etbl-wrap .etbl-filter-check input {
	margin: 0;
}

/* ------------------------------------------------------------------ table */

.etbl-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.etbl-wrap .etbl-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	background: transparent;
	font-size: inherit;
}

.etbl-wrap .etbl-table th,
.etbl-wrap .etbl-table td {
	padding: var(--etbl-cell-y) var(--etbl-cell-x);
	border: 0;
	border-bottom: 1px solid var(--etbl-line);
	vertical-align: middle;
	background: transparent;
	word-wrap: break-word;
}

.etbl-wrap .etbl-table thead th {
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom-width: 2px;
	white-space: nowrap;
}

/* Themes commonly zebra-stripe every table on the site. The list is meant to read
   as a plain list, so that is turned off here rather than inherited. The selector
   is deliberately specific enough to beat a theme's own nth-child rule. */
.etbl-wrap .etbl-table tbody tr > td,
.etbl-wrap .etbl-table tbody tr:nth-child(odd) > td,
.etbl-wrap .etbl-table tbody tr:nth-child(even) > td {
	background: transparent;
}

/* Optional date striping: the shade changes when the DATE changes, not every row,
   so two times on the same day stay together as one block. */
.etbl-wrap .etbl-table.etbl-striped tbody tr.etbl-band-1 > td {
	background: var(--etbl-stripe);
}

.etbl-wrap .etbl-table.etbl-no-head thead {
	display: none;
}

/* Month and year dividers */

.etbl-wrap .etbl-table tbody tr.etbl-divider > td {
	padding: 18px 12px 6px;
	border-bottom: 2px solid var(--etbl-line);
	background: transparent;
	text-align: left;
}

.etbl-wrap .etbl-table tbody tr.etbl-divider:first-child > td {
	padding-top: 4px;
}

.etbl-divider-label {
	font-weight: 700;
	font-size: 0.95em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.etbl-wrap .etbl-divider-year > td {
	border-bottom-width: 3px;
}

.etbl-wrap .etbl-divider-year .etbl-divider-label {
	font-size: 1.25em;
	letter-spacing: 0.08em;
}

.etbl-row-soldout {
	opacity: 0.72;
}

/* Same day, different times. Each time stays its own row, with its own picture and
   the usual spacing, so the times never merge into one boxed-in block. Two ways to
   show they belong together, both in the chosen colour and thickness:
   between - a bar in place of the usual line under a time, where the next time is
			 on the same day
   bar     - a bar down the left of the times on one day, with the usual lines */
@media (min-width: 768px) {

	.etbl-wrap .etbl-table.etbl-group-between tbody tr.etbl-day-more > td {
		border-bottom: var(--etbl-group-w) solid var(--etbl-group);
	}

	.etbl-wrap .etbl-table.etbl-group-bar tbody tr.etbl-day-joined > td:first-child {
		box-shadow: inset var(--etbl-group-w) 0 0 var(--etbl-group);
	}

	/* The cart bar shown under a grouped time belongs to that time, so the grouping
	   carries on through it instead of breaking. */
	.etbl-wrap .etbl-table.etbl-group-bar tbody tr.etbl-day-joined.etbl-has-cart-bar + tr.etbl-cart-bar-row > td {
		box-shadow: inset var(--etbl-group-w) 0 0 var(--etbl-group);
	}

	.etbl-wrap .etbl-table.etbl-group-between tbody tr.etbl-day-more.etbl-has-cart-bar + tr.etbl-cart-bar-row > td {
		border-bottom: var(--etbl-group-w) solid var(--etbl-group);
	}
}

.etbl-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ cells */

.etbl-image-link {
	display: block;
	line-height: 0;
}

.etbl-wrap .etbl-thumb {
	width: 100%;
	height: auto;
	max-width: 90px;
	border-radius: var(--etbl-radius);
	display: inline-block;
}

.etbl-title-link {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.etbl-title-link:hover {
	text-decoration: underline;
}

.etbl-price {
	white-space: nowrap;
	font-weight: 600;
}

.etbl-date {
	white-space: nowrap;
}

/* quantity */

.etbl-qty-wrap {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--etbl-line);
	border-radius: var(--etbl-radius);
	overflow: hidden;
	max-width: 120px;
}

.etbl-wrap .etbl-qty-btn {
	width: 30px;
	flex: 0 0 30px;
	padding: 0;
	border: 0;
	background: var(--etbl-stripe);
	color: inherit;
	font: inherit;
	font-size: 1.05em;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.etbl-wrap .etbl-qty-btn:hover {
	background: var(--etbl-hover);
}

.etbl-wrap input.etbl-qty {
	width: 46px;
	min-width: 0;
	flex: 1 1 auto;
	margin: 0;
	padding: 7px 2px;
	border: 0;
	border-left: 1px solid var(--etbl-line);
	border-right: 1px solid var(--etbl-line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
	box-shadow: none;
	-moz-appearance: textfield;
}

.etbl-wrap input.etbl-qty::-webkit-outer-spin-button,
.etbl-wrap input.etbl-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* cart */

.etbl-cart-wrap {
	display: inline-block;
	max-width: 100%;
}

.etbl-wrap .etbl-btn {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	line-height: 1.25;
	cursor: pointer;
}

.etbl-wrap .etbl-btn.loading {
	opacity: 0.6;
}

.etbl-wrap .etbl-btn.added::after {
	content: "";
}

/* WooCommerce appends its own "View cart" link after a successful add. */
.etbl-wrap .added_to_cart {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	text-decoration: underline;
}

.etbl-soldout {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--etbl-soldout);
	border-radius: var(--etbl-radius);
	color: var(--etbl-soldout);
	font-weight: 700;
	font-size: 0.9em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* stock */

/* Full inherited text colour rather than a faded 0.9, with a touch more weight.
   Darker than it was without introducing a colour of its own, so it still works
   against a light or a dark theme. */
.etbl-stock {
	font-size: 0.92em;
	opacity: 1;
	font-weight: 500;
	white-space: nowrap;
}

.etbl-stock-low {
	color: var(--etbl-low);
	font-weight: 600;
	opacity: 1;
}

.etbl-stock-out {
	color: var(--etbl-soldout);
	font-weight: 600;
	opacity: 1;
}

/* messages */

.etbl-empty,
.etbl-none {
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px dashed var(--etbl-line);
	border-radius: var(--etbl-radius);
	text-align: center;
	opacity: 0.9;
}

/* Sits where the table was, so the eye lands on it rather than on a gap. */
.etbl-wrap .etbl-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 180px;
	padding: 32px 16px;
}

.etbl-wrap .etbl-empty[hidden] {
	display: none;
}

.etbl-wrap .etbl-empty-text {
	margin: 0;
	font-size: 1.05em;
}

.etbl-wrap .etbl-empty-reset {
	opacity: 1;
}

/* --------------------------------------------------------------- cart bar */

.etbl-cart-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var(--etbl-line);
	border-radius: var(--etbl-radius);
}

.etbl-wrap .etbl-cart-bar[hidden] {
	display: none;
}

.etbl-cart-bar-slot-bottom .etbl-cart-bar {
	margin: 14px 0 0;
}

.etbl-cart-bar-summary {
	margin-right: auto;
	font-weight: 600;
	white-space: nowrap;
}

.etbl-cart-bar-sep {
	opacity: 0.5;
}

.etbl-cart-bar-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.etbl-wrap .etbl-cart-bar .button {
	margin: 0;
	line-height: 1.25;
}

/* With the bar showing, WooCommerce's own small View cart link under the button
   only repeats it. */
.etbl-wrap[data-after-add="cart_bar"] .added_to_cart {
	display: none !important;
}

/* Some themes hide a WooCommerce button once it is marked as added. The7 does, with
   .product_type_simple.added { display: none !important }. In the table that left
   nothing where the button was, so the table's own button stays put. */
.etbl-wrap .etbl-add-to-cart.added {
	display: inline-block !important;
}

/* After tickets are added, the cart bar moves under the event that was added, inside
   that event: the event's own line is dropped and drawn under the bar instead. */
.etbl-wrap .etbl-table tbody tr.etbl-cart-bar-row > td {
	padding: 0 var(--etbl-cell-x) var(--etbl-cell-y);
	border-bottom: 1px solid var(--etbl-line);
	background: transparent;
}

.etbl-wrap .etbl-table tbody tr.etbl-row.etbl-has-cart-bar > td {
	border-bottom-color: transparent;
}

.etbl-wrap .etbl-cart-bar-row .etbl-cart-bar {
	margin: 0;
}

.etbl-cart-added {
	margin: 0 0 8px;
	font-weight: 600;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 767px) {

	.etbl-wrap .etbl-table,
	.etbl-wrap .etbl-table tbody,
	.etbl-wrap .etbl-table tr {
		display: block;
		width: 100%;
	}

	.etbl-wrap .etbl-table colgroup,
	.etbl-wrap .etbl-table thead {
		display: none;
	}

	/* A column set to Hidden on mobile, in either layout. */
	.etbl-wrap .etbl-table tbody tr > td.etbl-m-hide {
		display: none !important;
	}

	/* ---- Mobile layout: Table (default) ----
	   The row stays a row. Columns set to "In row" share the top line as a grid,
	   and the ones set to "Below" span the full width underneath it. */

	.etbl-mobile-table tbody tr.etbl-row {
		display: grid;
		align-items: center;
		column-gap: 6px;
		padding: 4px 0 2px;
		border-bottom: 2px solid var(--etbl-line);
	}

	.etbl-mobile-table tbody tr.etbl-row > td {
		display: block;
		width: auto;
		padding: 4px 3px;
		border-bottom: 0;
	}

	/* The row has to survive a theme with generous mobile typography. The7 hands
	   down 15px on a 27px line height, which wraps the event name to five lines in
	   the width left over and makes every row read as a block whatever the display
	   property says. These are forced, because the inherited values come from the
	   content area and would otherwise win. */
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td,
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td a,
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td span {
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td.etbl-col-title {
		overflow-wrap: break-word;
		word-break: normal;
	}

	/* Stops "£120.00" taking two lines and widening its track. */
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td.etbl-col-price {
		white-space: nowrap;
	}

	/* The button and the ticket count are the point of the row, so they keep a
	   readable size even though the row above them is tightened. */
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below,
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below a,
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below span {
		font-size: 14px !important;
	}

	/* No rule above these: they belong to the row over them, and a line there
	   reads as a separator between events, which it is not. The only line is the
	   one under the row. */
	.etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below {
		grid-column: 1 / -1;
		padding: 2px 4px;
		text-align: right !important;
	}

	/* Space between one below line and the next, so the ticket count is not
	   crowded under the add to cart button. Keyed off following another below
	   cell rather than naming the stock column, so it holds whatever is put
	   down there. */
	.etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below + td.etbl-m-below {
		padding-top: 10px;
	}

	.etbl-mobile-table tbody tr.etbl-row > td.etbl-m-below:last-child {
		padding-bottom: 10px;
	}

	/* Keeps the picture from eating the row it shares. */
	.etbl-mobile-table .etbl-thumb {
		max-width: 100%;
	}

	.etbl-mobile-table tbody tr.etbl-row > td.etbl-col-title {
		text-align: left !important;
	}

	/* Same day, different times, on a phone. The dividing line between events is
	   2px here, so a bar left at "same as the dividing line" is 2px too. */
	.etbl-wrap {
		--etbl-group-w: 2px;
	}

	/* Bar down the left: the row carries it, and every first cell gets the same room
	   for it, so the columns still line up between rows that share a day and rows
	   that do not. */
	.etbl-wrap .etbl-mobile-table.etbl-group-bar tbody tr.etbl-row.etbl-day-joined,
	.etbl-wrap .etbl-mobile-stacked.etbl-group-bar tbody tr.etbl-row.etbl-day-joined {
		box-shadow: inset var(--etbl-group-w) 0 0 var(--etbl-group);
	}

	.etbl-wrap .etbl-mobile-table.etbl-group-bar tbody tr.etbl-row > td:first-child {
		padding-left: calc(var(--etbl-group-w) + 6px);
	}

	/* Between: the bar takes the place of the usual line under the row. */
	.etbl-wrap .etbl-mobile-table.etbl-group-between tbody tr.etbl-row.etbl-day-more,
	.etbl-wrap .etbl-mobile-stacked.etbl-group-between tbody tr.etbl-row.etbl-day-more {
		border-bottom: var(--etbl-group-w) solid var(--etbl-group);
	}

	/* The space between a month or year heading's line and the first event under it
	   used to be a margin on the heading. A same-day bar on that event then started
	   below the gap while reaching the line at the bottom. The space is now inside
	   the event, so the bar meets the line at both ends and the spacing is unchanged:
	   4px of the row's own padding plus the 10px the margin was. */
	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row.etbl-after-divider {
		padding-top: 14px;
	}

	.etbl-wrap .etbl-mobile-stacked tbody tr.etbl-row.etbl-after-divider {
		margin-top: 10px;
	}

	/* The cart bar shown under a grouped time carries the grouping on. */
	.etbl-wrap .etbl-mobile-table.etbl-group-bar tbody tr.etbl-day-joined.etbl-has-cart-bar + tr.etbl-cart-bar-row {
		box-shadow: inset var(--etbl-group-w) 0 0 var(--etbl-group);
	}

	.etbl-wrap .etbl-mobile-table.etbl-group-bar tbody tr.etbl-day-joined.etbl-has-cart-bar + tr.etbl-cart-bar-row > td {
		padding-left: calc(var(--etbl-group-w) + 6px);
	}

	.etbl-wrap .etbl-mobile-table.etbl-group-between tbody tr.etbl-day-more.etbl-has-cart-bar + tr.etbl-cart-bar-row {
		border-bottom: var(--etbl-group-w) solid var(--etbl-group);
	}

	.etbl-wrap .etbl-mobile-stacked.etbl-grouped tbody tr.etbl-row.etbl-day-more {
		margin-bottom: 4px;
	}

	/* ---- Mobile layout: Stacked ----
	   One cell per line, each row a card. */

	.etbl-mobile-stacked tbody tr > td {
		display: block;
		width: 100% !important;
	}

	.etbl-mobile-stacked tbody tr.etbl-row {
		margin: 0 0 14px;
		padding: 6px 0 2px;
		border: 1px solid var(--etbl-line);
		border-radius: var(--etbl-radius);
	}

	.etbl-mobile-stacked tbody tr.etbl-row > td {
		border-bottom: 0;
		padding: 7px 12px;
		text-align: center !important;
	}

	.etbl-mobile-stacked tbody tr.etbl-row > td.etbl-col-title {
		font-size: 1.08em;
		text-align: center !important;
	}

	.etbl-mobile-stacked .etbl-thumb {
		max-width: 110px;
	}

	/* Stacked, each row is a card, so the date band shades the whole card. */
	.etbl-wrap .etbl-table.etbl-striped tbody tr.etbl-band-1 > td {
		background: var(--etbl-stripe);
	}

	/* A divider is a heading between the cards, not a card of its own. */
	.etbl-wrap .etbl-table tbody tr.etbl-divider {
		margin: 20px 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	.etbl-wrap .etbl-table tbody tr.etbl-divider:first-child {
		margin-top: 0;
	}

	.etbl-wrap .etbl-table tbody tr.etbl-divider > td {
		display: block;
		width: 100%;
		padding: 0 2px 6px;
		border-bottom: 2px solid var(--etbl-line);
		text-align: left !important;
	}

	/* The stepper has to give way, or it takes the space the event name needs.
	   At 15px inherited it measured 96px of a 354px row. */
	.etbl-wrap .etbl-mobile-table .etbl-qty-wrap {
		max-width: 76px;
	}

	.etbl-wrap .etbl-mobile-table input.etbl-qty {
		width: 26px;
		padding-left: 0;
		padding-right: 0;
	}

	.etbl-wrap .etbl-mobile-table .etbl-qty-btn {
		padding: 0 7px;
	}

	.etbl-filter {
		flex: 1 1 100%;
		min-width: 0;
	}

	.etbl-wrap .etbl-select {
		max-width: none;
	}

	.etbl-wrap .etbl-reset {
		width: 100%;
	}

	.etbl-wrap .etbl-filter-check {
		padding: 2px 0;
	}

	/* Cart bar: the total on one line, the two buttons sharing the next. */
	.etbl-cart-bar-summary {
		flex: 1 1 100%;
		margin-right: 0;
	}

	.etbl-cart-bar-actions {
		flex: 1 1 100%;
	}

	.etbl-wrap .etbl-cart-bar-actions .button {
		flex: 1 1 0;
		text-align: center;
	}

	/* The cart bar under an event, on a phone: part of that event's card, with the
	   event's line moved below it. */
	.etbl-wrap .etbl-table tbody tr.etbl-cart-bar-row {
		display: block;
		padding: 0 0 12px;
		border-bottom: 2px solid var(--etbl-line);
	}

	.etbl-wrap .etbl-table tbody tr.etbl-cart-bar-row > td {
		display: block;
		width: 100%;
		padding: 0;
		border-bottom: 0;
	}

	.etbl-wrap .etbl-mobile-table tbody tr.etbl-row.etbl-has-cart-bar {
		border-bottom: 0;
	}
}