/* assets/css/tour-events.css */

/* ===== Theme custom properties (dark = default) ===== */
.pte-event-list,
.pte-compact-widget,
.pte-static-widget,
.pte-scrolling-widget {
	--pte-bg-primary: #000000;
	--pte-bg-alt: #212024;
	--pte-bg-heading: #212024;
	--pte-text: #fff;
	--pte-text-muted: rgba(255,255,255,0.9);
	--pte-border: #999;
	--pte-btn-bg: #333;
	--pte-btn-bg-hover: #555;
	--pte-btn-text: #fff;
	--pte-link-color: #fff;
	--pte-scroll-thumb: rgba(255,255,255,0.3);
	--pte-scroll-track: rgba(255,255,255,0.05);
	--pte-ticket-pad-y: 0.5rem;
	--pte-ticket-pad-x: 1rem;
	--pte-ticket-font-weight: 700;
	--pte-ticket-radius: 0;
}

/* Light theme overrides */
[data-pte-theme="light"].pte-event-list,
[data-pte-theme="light"].pte-compact-widget,
[data-pte-theme="light"].pte-static-widget,
[data-pte-theme="light"].pte-scrolling-widget {
	--pte-bg-primary: #ffffff;
	--pte-bg-alt: #f2f2f2;
	--pte-bg-heading: #e8e8e8;
	--pte-text: #222;
	--pte-text-muted: rgba(0,0,0,0.7);
	--pte-border: #ccc;
	--pte-btn-bg: #e0e0e0;
	--pte-btn-bg-hover: #ccc;
	--pte-btn-text: #222;
	--pte-link-color: #222;
	--pte-scroll-thumb: rgba(0,0,0,0.25);
	--pte-scroll-track: rgba(0,0,0,0.05);
}

.pte-event-list {
	margin: 2rem auto;
	max-width: 800px;
	padding: 0;
}

.pte-event-cluster {
	border: 2px solid var(--pte-border);
	margin-bottom: 2rem;
	text-align: center;
}

.pte-event-list .pte-event-cluster > h3 {
	margin: 0;
	padding: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: bold;
	background-color: var(--pte-bg-heading);
	color: var(--pte-text);
	border-bottom: 2px solid var(--pte-border);
}

.pte-event-list .pte-event-cluster ul.pte-event-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pte-event-list .pte-event-item {
	display: grid;
	align-items: center;
	gap: 16px;
	list-style: none;
	padding: 1rem 1.25rem;
	margin: 0;
	color: var(--pte-text);
	min-width: 0;
	box-sizing: border-box;
}

/* Clustered mode: date+time | buttons */
.pte-event-item--clustered {
	grid-template-columns: 1fr auto;
}

/* Flat mode: date+time | name+location | buttons */
.pte-event-item--flat {
	grid-template-columns: 1fr 1fr auto;
}

.pte-event-list .pte-event-item:nth-child(odd) {
	background-color: var(--pte-bg-primary);
}

.pte-event-list .pte-event-item:nth-child(even) {
	background-color: var(--pte-bg-alt);
}

.pte-event-col {
	min-width: 0;
}

.pte-event-col-date {
	text-align: left;
	justify-self: start;
}

.pte-event-col-info {
	text-align: left;
	justify-self: start;
}

.pte-event-col-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-self: end;
	justify-content: flex-end;
	min-width: 160px;
}

.pte-event-date {
	font-weight: 600;
	line-height: 1.2;
}

.pte-event-time {
	opacity: 0.9;
	line-height: 1.2;
}

.pte-event-name {
	font-weight: bold;
	line-height: 1.2;
}

.pte-event-location {
	opacity: 0.9;
	line-height: 1.2;
}

.pte-event-list .pte-tickets-button,
.pte-event-list .pte-rsvp-button {
	display: inline-block;
	background-color: var(--pte-btn-bg);
	color: var(--pte-btn-text);
	padding: var(--pte-ticket-pad-y) var(--pte-ticket-pad-x);
	line-height: 1.2;
	text-decoration: none;
	border: none;
	border-radius: var(--pte-ticket-radius);
	font-weight: var(--pte-ticket-font-weight);
	cursor: pointer;
	white-space: nowrap;
}

.pte-event-list .pte-tickets-button:hover,
.pte-event-list .pte-rsvp-button:hover {
	background-color: var(--pte-btn-bg-hover);
}

.pte-pagination {
	text-align: center;
	margin-top: 2rem;
}

.pte-pagination + .pte-toggle {
	margin-top: 0.875rem;
}

.pte-pagination .page-numbers {
	display: inline-block;
	margin: 0 6px;
	padding: 6px 12px;
	background: #eee;
	color: #333;
	border-radius: 4px;
	text-decoration: none;
}

.pte-pagination .current {
	background: #333;
	color: #fff;
	font-weight: bold;
}

.pte-pagination .page-numbers:hover {
	background: #ddd;
}

.pte-toggle,
.pte-empty {
	text-align: center;
	margin-top: 1rem;
}

/* ===== Upcoming widget ===== */
.pte-compact-widget {
	max-width: 800px;
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--pte-border);
	background: var(--pte-bg-primary);
	color: var(--pte-text);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}


.pte-compact-title {
	margin: 0;
	padding: 0.5rem;
	font-size: 1.25rem;
	font-weight: bold;
	background-color: var(--pte-bg-heading);
	color: var(--pte-text);
	border-bottom: 2px solid var(--pte-border);
	text-align: center;
}

.pte-compact-scrollbox {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	padding: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--pte-scroll-thumb) var(--pte-scroll-track);
}

.pte-compact-scrollbox::-webkit-scrollbar {
	width: 6px;
}
.pte-compact-scrollbox::-webkit-scrollbar-track {
	background: var(--pte-scroll-track);
	border-radius: 3px;
}
.pte-compact-scrollbox::-webkit-scrollbar-thumb {
	background: var(--pte-scroll-thumb);
	border-radius: 3px;
}
.pte-compact-scrollbox::-webkit-scrollbar-thumb:hover {
	background: var(--pte-scroll-thumb);
	filter: brightness(1.3);
}

.pte-compact-widget .pte-compact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 0;
	box-sizing: border-box;
}

.pte-compact-widget .pte-compact-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 1rem 1.25rem;
	min-width: 0;
	box-sizing: border-box;
}

.pte-compact-widget .pte-compact-item--clickable {
	cursor: pointer;
	transition: background-color 150ms ease;
}

.pte-compact-widget .pte-compact-item--clickable:hover {
	background-color: var(--pte-btn-bg-hover) !important;
}


.pte-compact-widget .pte-compact-item:nth-child(odd) {
	background-color: var(--pte-bg-primary);
}

.pte-compact-widget .pte-compact-item:nth-child(even) {
	background-color: var(--pte-bg-alt);
}

.pte-compact-widget .pte-compact-col {
	min-width: 0;
}

.pte-compact-widget .pte-compact-col-left {
	text-align: left;
	min-width: 0;
}


.pte-compact-widget .pte-compact-col-mid {
	text-align: center;
	min-width: 0;
}


.pte-compact-widget .pte-compact-name {
	font-weight: bold;
	line-height: 1.2;
}

.pte-compact-widget .pte-compact-location {
	opacity: 0.9;
	line-height: 1.2;
}

.pte-compact-widget .pte-compact-date {
	font-weight: 600;
	line-height: 1.2;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}


.pte-compact-widget .pte-compact-time {
	opacity: 0.9;
	line-height: 1.2;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}


.pte-compact-footer {
	border-top: 2px solid var(--pte-border);
	background: var(--pte-bg-heading);
	padding: 12px;
	text-align: center;
}

.pte-compact-link {
	display: inline-block;
	padding: 2px 4px;
	font-size: 0.9rem;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pte-compact-link:hover {
	text-decoration: underline;
}

.pte-compact-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}



/* Responsive layout for the compact widget rows
   Use element-width classes (set by JS) instead of viewport breakpoints,
   because builders (like Avada) can render a narrow column inside a wide viewport.
*/

/* Single-column stacked layout */
.pte-compact-widget.pte-compact-w-stack .pte-compact-item {
	grid-template-columns: 1fr;
	gap: 10px;
}
.pte-compact-widget.pte-compact-w-stack .pte-compact-col-mid {
	text-align: left;
}
.pte-compact-widget.pte-compact-w-stack .pte-compact-date,
.pte-compact-widget.pte-compact-w-stack .pte-compact-time {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: break-word;
}

/* Viewport fallback when JS width classes are not present */
@media (max-width: 360px) {
	.pte-compact-widget:not(.pte-compact-has-js) .pte-compact-item {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.pte-compact-widget:not(.pte-compact-has-js) .pte-compact-col-mid {
		text-align: left;
	}
	.pte-compact-widget:not(.pte-compact-has-js) .pte-compact-date,
	.pte-compact-widget:not(.pte-compact-has-js) .pte-compact-time {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		word-break: break-word;
	}
}


.pte-compact-widget .pte-compact-scrollbox {
	min-height: 0;
}

/* ===== Static widget ===== */
.pte-static-widget {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--pte-border);
	background: var(--pte-bg-primary);
	color: var(--pte-text);
	margin: 0 auto;
	padding: 0;
}

.pte-static-title {
	margin: 0;
	padding: 0.5rem;
	font-size: 1.25rem;
	font-weight: bold;
	background-color: var(--pte-bg-heading);
	color: var(--pte-text);
	border-bottom: 2px solid var(--pte-border);
	text-align: center;
}

.pte-static-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pte-static-item {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 1rem 1.25rem;
	min-width: 0;
	box-sizing: border-box;
}

.pte-static-item:nth-child(odd) {
	background-color: var(--pte-bg-primary);
}

.pte-static-item:nth-child(even) {
	background-color: var(--pte-bg-alt);
}

.pte-static-col {
	min-width: 0;
}

.pte-static-col-date {
	text-align: left;
	justify-self: start;
}

.pte-static-col-info {
	text-align: left;
	justify-self: start;
}

.pte-static-col-right {
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-self: end;
	min-width: 160px;
	justify-content: flex-end;
}

.pte-static-name {
	font-weight: bold;
	line-height: 1.2;
}

.pte-static-location {
	opacity: 0.9;
	line-height: 1.2;
}

.pte-static-date {
	font-weight: 600;
	line-height: 1.2;
}

.pte-static-time {
	opacity: 0.9;
	line-height: 1.2;
}

.pte-static-widget .pte-tickets-button,
.pte-static-widget .pte-rsvp-button {
	display: inline-block;
	background-color: var(--pte-btn-bg);
	color: var(--pte-btn-text);
	padding: var(--pte-ticket-pad-y) var(--pte-ticket-pad-x);
	line-height: 1.2;
	text-decoration: none;
	border: none;
	border-radius: var(--pte-ticket-radius);
	font-weight: var(--pte-ticket-font-weight);
	cursor: pointer;
	white-space: nowrap;
}

.pte-static-widget .pte-tickets-button:hover,
.pte-static-widget .pte-rsvp-button:hover {
	background-color: var(--pte-btn-bg-hover);
}

.pte-static-empty {
	padding: 1rem;
	text-align: center;
	color: var(--pte-text-muted);
}

.pte-static-footer {
	border-top: 2px solid var(--pte-border);
	background: var(--pte-bg-heading);
	padding: 12px;
	text-align: center;
}

.pte-static-viewall {
	display: inline-block;
	padding: var(--pte-ticket-pad-y) var(--pte-ticket-pad-x);
	background: var(--pte-btn-bg);
	color: var(--pte-btn-text);
	text-decoration: none;
	font-weight: var(--pte-ticket-font-weight);
	border-radius: var(--pte-ticket-radius);
}

.pte-static-viewall:hover {
	background: var(--pte-btn-bg-hover);
}

/* Static widget narrow screens: stack buttons below */
@media (max-width: 560px) {
	.pte-static-item {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"date info"
			"actions actions";
	}
	.pte-static-col-date  { grid-area: date; }
	.pte-static-col-info  { grid-area: info; }
	.pte-static-col-right {
		grid-area: actions;
		justify-self: center;
		min-width: auto;
		margin-top: 4px;
	}
}

@media (max-width: 360px) {
	.pte-static-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"date"
			"info"
			"actions";
		gap: 10px;
	}
	.pte-static-col-date  { grid-area: date; }
	.pte-static-col-info  { grid-area: info; }
	.pte-static-col-right {
		grid-area: actions;
		justify-self: center;
		flex-direction: column;
		align-items: center;
		min-width: auto;
	}
}

/* ===== Scrolling widget (scrollbox layer on top of static styles) ===== */
.pte-scrolling-scrollbox {
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--pte-scroll-thumb) var(--pte-scroll-track);
}

.pte-scrolling-scrollbox::-webkit-scrollbar {
	width: 6px;
}
.pte-scrolling-scrollbox::-webkit-scrollbar-track {
	background: var(--pte-scroll-track);
	border-radius: 3px;
}
.pte-scrolling-scrollbox::-webkit-scrollbar-thumb {
	background: var(--pte-scroll-thumb);
	border-radius: 3px;
}
.pte-scrolling-scrollbox::-webkit-scrollbar-thumb:hover {
	background: var(--pte-scroll-thumb);
	filter: brightness(1.3);
}

/* ===== RSVP Modal ===== */
.pte-rsvp-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pte-rsvp-modal {
	background: #fff;
	color: #222;
	padding: 2rem;
	border-radius: 8px;
	max-width: 400px;
	width: 90%;
	position: relative;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.pte-rsvp-close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #666;
	line-height: 1;
	padding: 4px;
}

.pte-rsvp-close:hover {
	color: #000;
}

.pte-rsvp-modal-title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 700;
}

.pte-rsvp-event-info {
	margin-bottom: 1.25rem;
	padding: 0.75rem;
	background: #f5f5f5;
	border-radius: 4px;
}

.pte-rsvp-event-name {
	font-weight: 700;
	font-size: 1.05rem;
}

.pte-rsvp-event-details {
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: #555;
}

.pte-rsvp-field {
	margin-bottom: 1rem;
}

.pte-rsvp-field label {
	display: block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.pte-rsvp-field input[type="email"] {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	box-sizing: border-box;
}

.pte-rsvp-field--checkbox label {
	font-weight: 400;
	cursor: pointer;
}

.pte-rsvp-submit {
	display: block;
	width: 100%;
	padding: 0.65rem;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	margin-top: 0.5rem;
}

.pte-rsvp-submit:hover {
	background: #555;
}

.pte-rsvp-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.pte-rsvp-message {
	text-align: center;
	padding: 1rem 0;
	font-size: 1rem;
}

.pte-rsvp-message--success {
	color: #0a7c2e;
}

.pte-rsvp-message--error {
	color: #d63638;
}