/*
 * Front-end Purchase Tickets box.
 *
 * Visually reproduces the Event Tickets v2 tickets block (card, ticket row
 * with -/+ quantity stepper, footer with total and Get Tickets button)
 * using this plugin's own classes -- no dependency on Event Tickets.
 * Colors/sizes reference The Events Calendar's CSS variables with their
 * default values as fallbacks, so if TEC theme settings customize the
 * accent color etc., this box follows along.
 */

.wcst-tickets {
	background-color: var(--tec-color-background, #fff);
	border: 1px solid var(--tec-color-border-secondary, #e4e4e4);
	border-radius: var(--tec-border-radius-default, 4px);
	color: var(--tec-color-text-primary, #141827);
	font-family: var(--tec-font-family-sans-serif, "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 24px 0;
	max-width: 580px;
	padding: 24px 24px 20px;
	position: relative;
	width: 100%;
}

.wcst-tickets__title {
	color: var(--tec-color-text-primary, #141827);
	font-size: var(--tec-font-size-5, 20px);
	font-weight: 700;
	line-height: 1.42;
	margin: 0 0 8px;
}

/* Badges overlaid on event featured images (show flyers), wherever the
   flyer renders: TEC list views, single event pages, theme listings. */
.wcst-flyer-badge-wrap {
	display: inline-block;
	max-width: 100%;
	position: relative;
}

/* TEC v2 views get badges injected right before their <img>; make the
   element hugging the image the positioning context -- the featured-image
   link where the view has one (nearest positioned ancestor wins), else
   the wrapper. */
[class*="__event-featured-image-wrapper"],
[class*="__event-featured-image-link"] {
	position: relative;
}

/* Ticket product page: the WooCommerce gallery image container becomes
   the positioning context for the injected badge stack. */
.woocommerce-product-gallery__image {
	position: relative;
}

/* Events Block For The Events Calendar list block: its image link is the
   positioning context for the injected badge stack. The block leaves the
   link display:inline (coordinate box = a text-height strip at the image
   bottom); inline-block is no good either, since it sizes to the flyer
   file's natural width while the image visually squeezes into the column.
   Block makes the link match the column width -- which is exactly the
   image's rendered width, because the block's own CSS stretches the img
   to fill available width. */
.ebec-static-small-list-ev-img {
	display: block;
	position: relative;
}

/* Default look matches the Sale Booster badges used on merch: sharp
   red banner, white bold theme-font text, top-right. Colors, shape,
   position, and size are configurable under WooCommerce -> Show Tickets
   (delivered as --wcst-badge-* variables; the values here are fallbacks). */
.wcst-flyer-badges {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Badges are decoration: never block clicks on the flyer/link below. */
	pointer-events: none;
	position: absolute;
	z-index: var(--wcst-badge-z, 2);
}

/* Fixed and Relative size modes: the badge box is set explicitly (like
   Sale Booster's hard-coded dimensions) and the text centers inside it. */
.wcst-flyer-badges--size-fixed .wcst-flyer-badge,
.wcst-flyer-badges--size-relative .wcst-flyer-badge {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	overflow: hidden;
	text-align: center;
}

.wcst-flyer-badges--size-fixed .wcst-flyer-badge {
	height: var(--wcst-badge-h, 33px);
	width: var(--wcst-badge-w, 200px);
}

/* Relative mode: the stack spans the flyer so a percentage width on the
   badge resolves against the flyer's width; height follows text+padding. */
.wcst-flyer-badges--size-relative {
	width: calc(100% - var(--wcst-badge-offset-x, 0px));
}

.wcst-flyer-badges--size-relative .wcst-flyer-badge {
	width: var(--wcst-badge-rel-w, 35%);
}

/* The --wcst-img-* variables are 0 everywhere except containers where the
   image may not fill its positioning box (the ebec events block); there a
   small script measures the image's inset within the box and sets them so
   badges hug the image's real corners. */
.wcst-flyer-badges--top-right {
	align-items: flex-end;
	right: calc(var(--wcst-badge-offset-x, 0px) + var(--wcst-img-right, 0px));
	top: calc(var(--wcst-badge-offset-y, 12px) + var(--wcst-img-top, 0px));
}

.wcst-flyer-badges--top-left {
	align-items: flex-start;
	left: calc(var(--wcst-badge-offset-x, 0px) + var(--wcst-img-left, 0px));
	top: calc(var(--wcst-badge-offset-y, 12px) + var(--wcst-img-top, 0px));
}

.wcst-flyer-badges--bottom-right {
	align-items: flex-end;
	bottom: calc(var(--wcst-badge-offset-y, 12px) + var(--wcst-img-bottom, 0px));
	right: calc(var(--wcst-badge-offset-x, 0px) + var(--wcst-img-right, 0px));
}

.wcst-flyer-badges--bottom-left {
	align-items: flex-start;
	bottom: calc(var(--wcst-badge-offset-y, 12px) + var(--wcst-img-bottom, 0px));
	left: calc(var(--wcst-badge-offset-x, 0px) + var(--wcst-img-left, 0px));
}

.wcst-flyer-badge {
	background-color: var(--wcst-badge-bg, #e8112d);
	border-radius: var(--wcst-badge-radius, 0);
	box-shadow: var(--wcst-badge-shadow, none);
	color: var(--wcst-badge-color, #fff);
	display: inline-block;
	font-size: var(--wcst-badge-font-size, 14px);
	font-weight: var(--wcst-badge-font-weight, 700);
	line-height: 1.4;
	opacity: var(--wcst-badge-opacity, 1);
	padding: var(--wcst-badge-padding, 5px 14px);
	transform: rotate(var(--wcst-badge-rotation, 0deg));
	white-space: nowrap;
}

/* Ribbon and Tag label styles. The decorative end faces inward (away
   from the flyer edge), so the clip-path flips with the badge's side.
   clip-path clips box-shadow and border-radius, hence Banner-only radius. */
.wcst-flyer-badges--top-right .wcst-flyer-badge--ribbon,
.wcst-flyer-badges--bottom-right .wcst-flyer-badge--ribbon {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
	padding-left: calc(10px + var(--wcst-badge-font-size, 14px));
}

.wcst-flyer-badges--top-left .wcst-flyer-badge--ribbon,
.wcst-flyer-badges--bottom-left .wcst-flyer-badge--ribbon {
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
	padding-right: calc(10px + var(--wcst-badge-font-size, 14px));
}

.wcst-flyer-badges--top-right .wcst-flyer-badge--tag,
.wcst-flyer-badges--bottom-right .wcst-flyer-badge--tag {
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
	padding-left: calc(12px + var(--wcst-badge-font-size, 14px));
}

.wcst-flyer-badges--top-left .wcst-flyer-badge--tag,
.wcst-flyer-badges--bottom-left .wcst-flyer-badge--tag {
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
	padding-right: calc(12px + var(--wcst-badge-font-size, 14px));
}

/* Badge pills, styled like Event Tickets' sale label. */
.wcst-tickets__badges {
	line-height: 1;
}

.wcst-tickets__badge {
	background-color: var(--tec-color-accent-primary-background, #eaf1ff);
	border-radius: var(--tec-spacer-2, 12px);
	color: var(--tec-color-accent-primary, #334aff);
	display: inline-block;
	font-size: var(--tec-font-size-0, 11px);
	font-weight: 700;
	margin: 0 4px 5px 0;
	padding: 4px 6px;
}

/* Bundle deal promo: a callout that stands out without shouting. The
   accent follows the badge background color from the settings page. */
.wcst-tickets__promo,
.wcst-bundle-promo {
	background: #fdf1f2;
	background: color-mix(in srgb, var(--wcst-badge-bg, #e8112d) 7%, #fff);
	border-left: 4px solid var(--wcst-badge-bg, #e8112d);
	border-radius: 4px;
	color: var(--tec-color-text-primary, #141827);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 12px 16px;
}

.wcst-bundle-promo {
	margin: 12px 0 16px;
}

.wcst-tickets__item {
	align-items: center;
	border-top: 1px solid var(--tec-color-border-secondary, #e4e4e4);
	display: grid;
	grid-template-columns: 1fr auto auto;
	margin: 0;
	padding: 12px 0 16px;
}

.wcst-tickets__item-content {
	grid-column: 1;
}

.wcst-tickets__item-title {
	color: var(--tec-color-text-primary, #141827);
	font-size: var(--tec-font-size-3, 16px);
	font-weight: 700;
	line-height: 1.42;
	margin: 0;
}

.wcst-tickets__item-available {
	color: var(--tec-color-text-secondary, #5d5d5d);
	font-size: var(--tec-font-size-2, 14px);
	margin: 4px 0 0;
}

.wcst-tickets__item-price {
	color: var(--tec-color-text-primary, #141827);
	font-size: var(--tec-font-size-3, 16px);
	font-weight: 700;
	grid-column: 2;
	padding-right: 24px;
	text-align: right;
	white-space: nowrap;
}

.wcst-tickets__item-quantity {
	align-items: center;
	color: var(--tec-color-text-secondary, #5d5d5d);
	display: flex;
	flex: 0 0 82px;
	grid-column: 3;
	justify-content: center;
}

.wcst-tickets__quantity-add,
.wcst-tickets__quantity-remove {
	background: transparent;
	border: 0;
	color: var(--tec-color-icon-secondary, #bababa);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	padding: 0;
	width: 16px;
}

.wcst-tickets__quantity-add:hover,
.wcst-tickets__quantity-add:focus,
.wcst-tickets__quantity-remove:hover,
.wcst-tickets__quantity-remove:focus {
	background: transparent;
	color: var(--tec-color-icon-primary, #5d5d5d);
}

.wcst-tickets input[type="number"].wcst-tickets__quantity-input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: none;
	box-shadow: none;
	color: var(--tec-color-text-primary, #141827);
	font-family: inherit;
	font-size: var(--tec-font-size-6, 22px);
	font-weight: 700;
	height: 48px;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 48px;
}

@media (min-width: 768px) {
	.wcst-tickets input[type="number"].wcst-tickets__quantity-input {
		font-size: var(--tec-font-size-7, 24px);
		line-height: 1.42;
	}
}

.wcst-tickets input[type="number"].wcst-tickets__quantity-input::-webkit-inner-spin-button,
.wcst-tickets input[type="number"].wcst-tickets__quantity-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wcst-tickets__footer {
	align-items: baseline;
	border-top: 1px solid var(--tec-color-border-secondary, #e4e4e4);
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	padding: 20px 0 0;
}

.wcst-tickets__footer-quantity,
.wcst-tickets__footer-total {
	color: var(--tec-color-text-secondary, #5d5d5d);
	font-size: var(--tec-font-size-2, 14px);
}

.wcst-tickets__footer-total {
	margin-left: 24px;
}

.wcst-tickets__footer-quantity-number,
.wcst-tickets__footer-total-number {
	color: var(--tec-color-text-primary, #141827);
	font-weight: 700;
}

.wcst-tickets__buy {
	background-color: var(--tec-color-accent-primary, #334aff);
	border: 0;
	border-radius: var(--tec-border-radius-default, 4px);
	color: var(--tec-color-background, #fff);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: var(--tec-font-size-2, 14px);
	font-weight: 700;
	line-height: 1.62;
	margin: 0 0 0 24px;
	padding: 11px 14px;
	text-align: center;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	width: auto;
}

.wcst-tickets__buy:hover,
.wcst-tickets__buy:focus {
	background-color: var(--tec-color-accent-primary-hover, rgba(51, 74, 255, 0.8));
	color: var(--tec-color-background, #fff);
}

.wcst-tickets__buy:active {
	background-color: var(--tec-color-accent-primary-active, rgba(51, 74, 255, 0.9));
}

.wcst-tickets__unavailable {
	color: var(--tec-color-text-secondary, #5d5d5d);
	font-size: var(--tec-font-size-2, 14px);
	grid-column: 2 / span 2;
	text-align: right;
}