/* calendar */
:root
{
	--bg: #0e0e10;
	--surface: #18181c;
	--surface2: #222228;
	--border: rgba(255, 255, 255, 0.07);
	--text: #FFF;
	--text-muted: #6b6b7a;
	--text-dim: #3a3a45;
	--room-a: gold;
	--room-b: var(--wp--preset--color--brand-secondary);
	--room-c: var(--wp--preset--color--brand-accent);
	--room-d: #5af6f0;
	--room-e: #5b9cf6;
	--external: rgb(250, 189, 255);
	--radius: 5px;
	--font: 'false', sans-serif;
	--mono: 'inter', sans-serif;
}

.seetickets-calendar th,
.seetickets-calendar-year-month-container,
.seetickets-calendar .date-number
{
	color: #FFF !important;
	font-family: 'false', sans-serif;
}

.seetickets-calendar td
{
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	width: calc(100% / 7);

	&.today
	{
		outline: 3px solid #fff;
		outline-offset: 0;
		border-radius: 5px;

		@media (width < 1024px)
		{
			outline: 0px;
		}
	}
}

.seetickets-calendar .mdc-card
{
	border: 0 !important;
	background: none !important;
}

.seetickets-calendar-event-picture
{
	width: 100%;
	height: auto !important;
}

.calendar-body
{
	max-width: 100%;
	margin: 0;
}

.seetickets-calendar-event-date p,
.seetickets-calendar td p
{
	margin: 8px 0;
	display: block;
	font-size: 12px;
	letter-spacing: 1px;
	font-family: "Inter", sans-serif;
}

.seetickets-calendar td p
{
	line-height: 1.1;
}

.mdc-card .seetickets-calendar-event-title a,
.seetickets-calendar td p.event-title a
{
	text-overflow: ellipsis;
	font-weight: 400 !important;
	font-family: "false", sans-serif !important;
	letter-spacing: 1.5px;
}

.seetickets-calendar .doortime-showtime,
.seetickets-calendar .doortime-showtime+p.fs-12:not(.venue)
{
	display: none;
}

.seetickets-calendar p.venue
{
	font-size: 12px;
	letter-spacing: 1px;
}

div.seetickets-buy-btn
{
	display: block;
	width: auto;
	margin-top: 12px;
	background: none;
	padding: 0;
}

div.seetickets-buy-btn a
{
	width: auto;
	display: block;
	background: #000;
	border-radius: 100px;
	font-size: 12px;
	line-height: 1.1;
	font-family: var(--mono);
	padding: 5px 3px;
	margin: auto !important;
	color: var(--wp--preset--color--brand-secondary) !important;
	border: 1px var(--wp--preset--color--brand-secondary) solid;
	transition: .2s ease all;
}

div.seetickets-buy-btn:hover a,
div.seetickets-buy-btn:focus-within a
{
	background: #FFF !important;
	color: #000 !important;
	border: 1px var(--wp--preset--color--brand-secondary) solid;
	transition: .2s ease all;
}

@media (max-width: 1153px)
{
	main .entry-content
	{
		padding: 0 !important;
	}

	.list-view-events.with-calendar
	{
		display: none !important
	}

	.seetickets-calendar-container
	{
		display: block !important
	}

	.seetickets-calendar td
	{
		max-width: calc(100dvw / 7) !important;
		padding: 0 !important
	}
}

/* calendar */
@media (min-width:1025px)
{

	.cal-legend,
	#cal-popover
	{
		display: none !important
	}
}

@media (max-width: 1024px)
{
	.wp-block-group.alignwide.is-layout-flow.wp-block-group-is-layout-flow
	{
		padding-inline: 0 !important;
	}

	/* ─────────────────────────────────────────────────
	   LEGEND
	───────────────────────────────────────────────── */
	.cal-legend
	{
		display: flex;
		flex-wrap: wrap;
		row-gap: 8px;
		column-gap: 16px;
		padding: 10px 12px 0;
	}

	.cal-legend-item
	{
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 11px;
		color: var(--text-muted);
		font-family: var(--mono);
		line-height: 1;
	}

	.cal-legend-dot
	{
		width: 7px;
		height: 7px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.cal-legend-dot.room-a
	{
		background: var(--room-a);
	}

	.cal-legend-dot.room-b
	{
		background: var(--room-b);
	}

	.cal-legend-dot.room-c
	{
		background: var(--room-c);
	}

	.cal-legend-dot.room-d
	{
		background: var(--room-d);
	}

	.cal-legend-dot.room-e
	{
		background: var(--room-e);
	}

	.cal-legend-dot.external
	{
		background: var(--external);
	}

	/* ─────────────────────────────────────────────────
	   CALENDAR CONTAINER
	   Wrap all the month divs and tables in one element
	   so CSS doesn't bleed into other tables on the page.
	   SWAP: change .seetickets-calendar-container to whatever your page uses,
	   or just add this class to the plugin's output wrapper.
	───────────────────────────────────────────────── */
	.seetickets-calendar-container
	{
		padding-bottom: 80px;
	}

	/* ─────────────────────────────────────────────────
	   MONTH TITLE — sibling div before each table
	   SWAP: change .cal-month-title to your plugin's class.
	───────────────────────────────────────────────── */
	.seetickets-calendar-year-month-container
	{
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--text-muted);
		font-family: var(--font);
		padding: 28px 12px 12px;
	}

	/* ─────────────────────────────────────────────────
	   TABLE — reset all default table styling
	───────────────────────────────────────────────── */
	.seetickets-calendar-container table
	{
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
		padding: 0 8px;
	}

	/* ─────────────────────────────────────────────────
	   TH — day-of-week header row
	───────────────────────────────────────────────── */
	.seetickets-calendar-container table th
	{
		text-align: center;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--text-dim);
		font-family: var(--font);
		padding: 4px 0 6px;
		border: none;
		background: none;
	}

	/* ─────────────────────────────────────────────────
	   TD — every day cell
	───────────────────────────────────────────────── */
	.seetickets-calendar-container table td
	{
		vertical-align: top;
		padding: 4px 2px 6px;
		border: none;
		background: none;
		border-radius: 8px;
		min-height: 48px;
		cursor: default;
		transition: background 0.12s;
		overflow: hidden;
	}

	.seetickets-calendar-container table td.has-events
	{
		cursor: pointer;
	}

	.seetickets-calendar-container table td.has-events:active
	{
		background: var(--surface2);
	}

	/* ─────────────────────────────────────────────────
	   DATE NUMBER
	   SWAP: change .cal-date-num to your plugin's element.
	───────────────────────────────────────────────── */
	.seetickets-calendar td .date-number
	{
		display: block;
		font-size: 13px;
		font-weight: 400;
		color: var(--text);
		text-align: center;
		line-height: 26px;
		min-width: 26px;
		margin: 0 auto;
	}

	.seetickets-calendar-container table td.today .date-number
	{
		background: #FFF;
		color: #000 !important;
		border-radius: 50%;
		width: 26px;
		height: 26px;
		line-height: 26px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* ─────────────────────────────────────────────────
	   CARDS — hidden in calendar, read by JS
	───────────────────────────────────────────────── */
	.seetickets-calendar-container table td .mdc-card
	{
		display: none;
	}

	/* ─────────────────────────────────────────────────
	   DOT STRIP — injected by JS into each td.has-events
	───────────────────────────────────────────────── */
	.dot-strip
	{
		display: flex;
		gap: 2px;
		margin-top: 3px;
		flex-wrap: wrap;
		justify-content: center;
		max-width: 28px;
		margin-left: auto;
		margin-right: auto;
	}

	.dot
	{
		display: inline-block;
		flex-shrink: 0;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	.dot.room-a
	{
		background: var(--room-a);
	}

	.dot.room-b
	{
		background: var(--room-b);
	}

	.dot.room-c
	{
		background: var(--room-c);
	}

	.dot.room-d
	{
		background: var(--room-d);
	}

	.dot.room-e
	{
		background: var(--room-e);
	}

	.dot.external
	{
		background: var(--external);
	}

	.dot.overflow
	{
		background: var(--text-dim);
	}

	/* ─────────────────────────────────────────────────
	   POPOVER
	───────────────────────────────────────────────── */
	main:has(#cal-popover.open)
	{
		z-index: 9999;
	}

	#cal-popover
	{
		display: none;
		position: fixed;
		inset: 0;
		background: #000;
		z-index: 9999;
		flex-direction: column;
		overflow: hidden;
		width: 100dvw;
		min-height: 100dvh;
		height: auto;
		margin-block-start: 0;
		top: 0px !important;
	}

	#cal-popover.open
	{
		display: flex;

	}

	.pop-header
	{
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 18px 16px 14px;
		border: 0;
		flex-shrink: 0;
	}

	#pop-close
	{
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #000;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		font-size: 24px;
		color: var(--wp--preset--color--brand-secondary);
	}

	#pop-close:hover,
	#pop-close:focus-visible
	{
		color: #FFF;
	}

	#pop-date
	{
		font-size: 20px;
		font-weight: 400;
		color: var(--text);
		flex: 1;
		font-family: var(--font);
	}

	#pop-count
	{
		font-size: 12px;
		font-family: var(--mono);
		color: #000;
		background: #FFF;
		padding: 3px 8px;
		border-radius: 20px;
	}

	#pop-scroll
	{
		flex: 1;
		overflow-y: auto;
		padding: 14px 14px 32px;
		-webkit-overflow-scrolling: touch;
	}

	/* ─────────────────────────────────────────────────
	   EVENT CARDS inside popover
	───────────────────────────────────────────────── */
	.pop-event-card
	{
		background: #000;
		border: 0;
		border-bottom: 1px solid #FFF;
		border-radius: 0;
		overflow: hidden;
		margin-bottom: 10px;
		padding-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.pop-event-card:first-of-type
	{

		border-top: 1px solid #FFF;
	}

	.pop-card-inner
	{
		display: flex;
		gap: 12px;
		padding: 12px 12px 10px;
		align-items: flex-start;
	}

	.pop-thumb
	{
		max-width: 100px;
		width: 100%;
		height: auto;
		border: 1px solid #222;
		aspect-ratio: 1/1;
		border-radius: 7px;
		object-fit: cover;
		flex-shrink: 0;
		background: var(--surface2);
	}

	.pop-thumb-placeholder
	{
		width: 100px;
		height: 100px;
		aspect-ratio: 1/1;
		border-radius: 7px;
		background: var(--surface2);
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: var(--text-dim);
	}

	.pop-meta
	{
		flex: 1;
		min-width: 0;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}

	.pop-venue-tag
	{
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 10px;
		font-family: var(--mono);
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		margin-bottom: 5px;
	}

	.pop-venue-tag.room-a
	{
		color: var(--room-a);
	}

	.pop-venue-tag.room-b
	{
		color: var(--room-b);
	}

	.pop-venue-tag.room-c
	{
		color: var(--room-c);
	}

	.pop-venue-tag.room-d
	{
		color: var(--room-d);
	}

	.pop-venue-tag.room-e
	{
		color: var(--room-e);
	}

	.pop-venue-tag.external
	{
		color: var(--external);
	}

	.pop-venue-dot
	{
		width: 6px;
		height: 6px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.pop-venue-dot.room-a
	{
		background: var(--room-a);
	}

	.pop-venue-dot.room-b
	{
		background: var(--room-b);
	}

	.pop-venue-dot.room-c
	{
		background: var(--room-c);
	}

	.pop-venue-dot.room-d
	{
		background: var(--room-d);
	}

	.pop-venue-dot.room-e
	{
		background: var(--room-e);
	}

	.pop-venue-dot.external
	{
		background: var(--external);
	}

	a.pop-card-link
	{
		display: block;
		font-size: 20px;
		letter-spacing: 1px;
		line-height: 1.2;
		font-weight: 600 !important;
		font-family: "Clash Display", sans-serif !important;
		color: #FFF;
		text-decoration: none;
		font-family: var(--font);
		transition: .2s ease all;
	}

	a.pop-card-link:has(img)
	{
		aspect-ratio: 1/1;
	}

	.room-a+a.pop-card-link:hover,
	.room-a+a.pop-card-link:focus
	{
		color: var(--room-a);
		transition: .2s ease all;
	}

	.room-b+a.pop-card-link:hover,
	.room-b+a.pop-card-link:focus
	{
		color: var(--room-b);
		transition: .2s ease all;
	}

	.room-c+a.pop-card-link:hover,
	.room-c+a.pop-card-link:focus
	{
		color: var(--room-c);
		transition: .2s ease all;
	}

	.room-d+a.pop-card-link:hover,
	.room-d+a.pop-card-link:focus
	{
		color: var(--room-d);
		transition: .2s ease all;
	}

	.room-e+a.pop-card-link:hover,
	.room-e+a.pop-card-link:focus
	{
		color: var(--room-e);
		transition: .2s ease all;
	}

	.external+a.pop-card-link:hover,
	.external+a.pop-card-link:focus
	{
		color: var(--external);
		transition: .2s ease all;
	}

	.pop-title
	{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 3px;
	}

	.pop-subtitle
	{
		font-size: 12px;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 6px;
	}

	.pop-times
	{
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-top: 2px;
	}

	.pop-time-item
	{
		display: flex;
		align-items: baseline;
		gap: 6px;
	}

	.pop-time-label
	{
		font-size: 9px;
		font-family: var(--mono);
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #fff;
		min-width: 34px;
	}

	.pop-time-value
	{
		font-size: 12px;
		font-family: var(--mono);
		color: #fff;
	}

	.pop-card-footer
	{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0px 12px 9px 120px;
		border: 0;
	}

	.pop-buy-btn
	{
		font-family: var(--mono);
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0.04em;
		padding: 3px 16px;
		border-radius: 20px;
		border: none;
		cursor: pointer;
		text-decoration: none;
		text-transform: uppercase;
		transition: opacity 0.12s, transform 0.1s, background .2s, border .2s;
	}

	.pop-buy-btn.room-a
	{
		color: var(--room-a);
		border: 1px solid var(--room-a);
		background: #000;
	}

	.pop-buy-btn.room-b
	{
		color: var(--room-b);
		border: 1px solid var(--room-b);
		background: #000;
	}

	.pop-buy-btn.room-c
	{
		color: var(--room-c);
		border: 1px solid var(--room-c);
		background: #000;
	}

	.pop-buy-btn.room-d
	{
		color: var(--room-d);
		border: 1px solid var(--room-d);
		background: #000;
	}

	.pop-buy-btn.room-e
	{
		color: var(--room-e);
		border: 1px solid var(--room-e);
		background: #000;
	}

	.pop-buy-btn.external
	{
		color: var(--external);
		border: 1px solid var(--external);
		background: #000;
	}

	.pop-buy-btn:hover,
	.pop-buy-btn:focus
	{
		color: #000;
		background: #FFF !important;
		border: 1px solid var(--wp--preset--color--brand-secondary);
		background: #000;
		transition: .2s ease all;
	}

	.pop-buy-btn:active
	{
		transform: scale(0.96);
		opacity: 0.85;
	}

	/* ─────────────────────────────────────────────────
	   SLIDE-UP ANIMATION
	───────────────────────────────────────────────── */
	@keyframes slideUp
	{
		from
		{
			transform: translateY(20px);
			opacity: 0;
		}

		to
		{
			transform: translateY(0);
			opacity: 1;
		}
	}

	#cal-popover.open .pop-event-card
	{
		animation: slideUp 0.2s ease both;
	}

	#cal-popover.open .pop-event-card:nth-child(2)
	{
		animation-delay: 0.04s;
	}

	#cal-popover.open .pop-event-card:nth-child(3)
	{
		animation-delay: 0.08s;
	}

	#cal-popover.open .pop-event-card:nth-child(4)
	{
		animation-delay: 0.12s;
	}

	#cal-popover.open .pop-event-card:nth-child(5)
	{
		animation-delay: 0.16s;
	}
}