/* Hello Tickets Public Styles */

/* ============================================
   RESET for event single wrapper
   ============================================ */
.hello-tickets-event-single {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ============================================
   EVENT DETAIL PAGE (Page 1)
   ============================================ */
.ht-event-detail {
	font-family: 'Leon', sans-serif;
	direction: rtl;
	text-align: right;
	color: #2d2828;
}

.ht-event-detail *,
.ht-event-detail *::before,
.ht-event-detail *::after {
	box-sizing: border-box;
}

/* Hero section */
.ht-event-detail__hero {
	padding: 24px;
	max-width: 375px;
	margin: 0 auto;
}

.ht-event-detail__hero-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Image */
.ht-event-detail__image {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	order: -1;
}

.ht-event-detail__image img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	display: block;
}

/* Info */
.ht-event-detail__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: flex-start = right side */
	gap: 20px;
	width: 100%;
}

/* Badge row — holds one linked badge per event_category term. */
.ht-event-detail__badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

/* Badge */
.ht-event-detail__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px 8px;
	border-radius: 360px;
	color: #fff;
	font-size: 14px;
	line-height: 14px;
	white-space: nowrap;
}

/* When the badge is rendered as an <a> linking to its term archive, give
   the same subtle lift the homepage event-card badges use. */
.ht-event-detail__badge[href] {
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ht-event-detail__badge[href]:hover,
.ht-event-detail__badge[href]:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	color: #fff;
}

.ht-event-detail__badge[href]:focus-visible {
	outline: 2px solid #38494b;
	outline-offset: 2px;
}

.ht-badge--pink { background: rgba(255, 143, 183, 0.8); }
.ht-badge--purple { background: rgba(171, 148, 221, 0.8); }
.ht-badge--green { background: rgba(156, 171, 132, 0.8); }
.ht-badge--brown { background: rgba(137, 108, 108, 0.8); }
.ht-badge--custom { background: var(--ksm-badge-bg, rgba(137, 108, 108, 0.8)); }

/* Title */
.ht-event-detail__title {
	margin: 0;
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 28px;
	color: #38494b;
	text-align: right;
	width: 100%;
}

/* Price */
.ht-event-detail__price {
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
	color: #e16a54;
	text-align: right;
	width: 100%;
}

.ht-event-detail__price-symbol {
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
}

/* Separator */
.ht-event-detail__separator {
	width: 100%;
	height: 1px;
	background: rgba(56, 73, 75, 0.15);
}

/* Meta rows */
.ht-event-detail__meta {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
}

.ht-event-detail__meta-row {
	display: flex;
	/* flex-start so the label and Waze icon stay aligned with the first line
	   of the value when long addresses wrap to two lines (center would push
	   them to the vertical middle of the wrapped block and look disconnected). */
	align-items: flex-start;
	justify-content: flex-start; /* RTL: flex-start = right side */
	gap: 8px;
	font-size: 16px;
	line-height: 1.4;
	/* No nowrap: long location/address strings must wrap to a second
	   line instead of overflowing and pushing the flex hero off-center. */
	flex-wrap: nowrap;
	min-width: 0;
}

.ht-event-detail__meta-label {
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	color: #2d2828;
	white-space: nowrap;
	flex-shrink: 0;
}

.ht-event-detail__meta-value {
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	color: #6d6d61;
	/* Allow long addresses to break onto a second line within the
	   fixed-width info column instead of forcing the column wider. */
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ht-event-detail__waze-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ht-event-detail__waze-link img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

/* Buy button */
.ht-event-detail__buy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 12px 24px 12px 16px;
	background: #38494b;
	color: #f4f1ea;
	border: 0;
	border-radius: 4px;
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ht-event-detail__buy-btn:hover {
	background: #2a3739;
	color: #f4f1ea;
}

.ht-event-detail__buy-btn svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Notes */
.ht-event-detail__notes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.ht-event-detail__note-item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start; /* RTL: flex-start = right side */
	gap: 8px;
}

.ht-event-detail__note-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 8px;
	height: 20px; /* matches .ht-event-detail__note-text line-height so the dot aligns with the first line */
	margin-top: 0;
}

.ht-event-detail__note-text {
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #6d6d61;
	text-align: right;
}

/* Auto-linkified contacts inside notes (tel:/mailto:) — keep them visually
   tied to the note color but underlined so the affordance is obvious. */
.ht-event-detail__note-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.ht-event-detail__note-text a:hover,
.ht-event-detail__note-text a:focus-visible {
	color: #38494b;
}

/* Description section */
.ht-event-detail__description {
	background: #f4f1ea;
	padding: 64px 32px;
	width: 100%;
}

.ht-event-detail__description-inner {
	font-family: 'Leon', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #38494b;
	text-align: right;
	max-width: 100%;
	margin: 0 auto;
}

.ht-event-detail__description-inner p {
	margin: 0 0 1em;
}

/* Gallery section */
.ht-event-detail__gallery {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 24px;
	max-width: 375px;
	margin: 0 auto;
}

.ht-event-detail__gallery-item {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

.ht-event-detail__gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Embeds (YouTube / Spotify) */
.ht-event-detail__embed {
	padding: 64px 24px 0;
	max-width: 375px;
	margin: 32px auto 0;
}

.ht-event-detail__youtube .ht-event-detail__embed-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	border-radius: 4px;
	overflow: hidden;
}

.ht-event-detail__youtube .ht-event-detail__embed-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ht-event-detail__music {
	margin-top: 24px;
}

/* ── Desktop (≥992px) ──
   Figma reference (node 1200:787) targets a 1920px frame with 200px padding,
   648px image, 687px info column, and a 185px auto-gap (justify-between).
   The fixed 648/687 widths only fit when the viewport reaches ~1920px; below
   that they overflow the content area and push the hero off-center. Use
   clamp()s tied to Figma's exact ratios (200/1920=10.42vw, 648/1920=33.75vw,
   687/1920=35.78vw, 185/1920=9.64vw) so every column scales proportionally
   from 992px up to 1920px, then locks at the Figma values on wider screens. */
@media (min-width: 992px) {
	.ht-event-detail__hero {
		max-width: 1920px;
		padding: clamp(48px, 6.25vw, 120px) clamp(32px, 10.42vw, 200px);
	}

	.ht-event-detail__hero-inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: clamp(24px, 9.64vw, 185px);
	}

	.ht-event-detail__image {
		width: auto;
		min-width: 0;
		height: auto;
		flex: 0 0 clamp(320px, 33.75vw, 648px);
		aspect-ratio: 1 / 1;
		border-radius: 4px;
		order: 0;
	}

	.ht-event-detail__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ht-event-detail__info {
		width: auto;
		flex: 0 1 clamp(280px, 35.78vw, 687px);
		min-width: 0;
		gap: 16px;
	}

	.ht-event-detail__title {
		font-size: 44px;
		line-height: 44px;
	}

	.ht-event-detail__price {
		font-size: 32px;
		line-height: 32px;
	}

	.ht-event-detail__meta {
		gap: 40px;
		margin-top: 28px;
	}

	.ht-event-detail__meta-row {
		font-size: 20px;
		line-height: 20px;
	}

	.ht-event-detail__separator {
		margin: 12px 0;
	}

	.ht-event-detail__buy-btn {
		margin-top: 8px;
	}

	.ht-event-detail__note-text {
		font-size: 16px;
		line-height: 16px;
	}

	/* Description */
	.ht-event-detail__description {
		padding: 100px 10px;
	}

	.ht-event-detail__description-inner {
		max-width: 1000px;
		font-size: 16px;
		line-height: 24px;
	}

	/* Gallery */
	.ht-event-detail__gallery {
		max-width: 1920px;
		padding: 0 200px 120px;
		gap: 64px;
	}

	.ht-event-detail__gallery-item img {
		border-radius: 4px;
	}

	/* Embeds */
	.ht-event-detail__embed {
		max-width: 1920px;
		padding: 120px 200px 0;
		margin-top: 0;
	}

	.ht-event-detail__youtube {
		margin-bottom: 64px;
	}

	.ht-event-detail__music {
		margin-top: 0;
		margin-bottom: 120px;
	}
}

/* Tablet (768–991) */
@media (min-width: 768px) and (max-width: 991px) {
	.ht-event-detail__hero {
		max-width: 700px;
		padding: 48px;
	}

	/* The mobile base rule forces a fixed 300px image height which becomes
	   rectangular on the wider tablet hero. Keep the hero image square. */
	.ht-event-detail__image {
		aspect-ratio: 1 / 1;
		height: auto;
	}

	.ht-event-detail__image img {
		height: 100%;
	}

	.ht-event-detail__title {
		font-size: 32px;
		line-height: 36px;
	}

	.ht-event-detail__gallery {
		max-width: 700px;
		padding: 0 48px;
		gap: 32px;
	}
}

/* Small desktop (992–1919)
   Below 1920px the description/gallery/embed paddings still need to scale —
   hero proportions are now driven by clamp()s in the main ≥992 block. */
@media (min-width: 992px) and (max-width: 1919px) {
	.ht-event-detail__description {
		padding: 64px clamp(24px, 4vw, 80px);
	}

	.ht-event-detail__gallery {
		padding: 0 clamp(32px, 6vw, 120px) 80px;
		gap: clamp(24px, 3vw, 48px);
	}

	.ht-event-detail__embed {
		padding: 0 clamp(32px, 6vw, 120px);
	}

	.ht-event-detail__music {
		margin-bottom: 80px;
	}
}

/* ============================================
   EVENT TICKETS PAGE (Page 2)
   ============================================ */
.ht-event-tickets {
	font-family: 'Leon', sans-serif;
	direction: rtl;
	text-align: right;
	color: #2d2828;
}

.ht-event-tickets *,
.ht-event-tickets *::before,
.ht-event-tickets *::after {
	box-sizing: border-box;
}

.ht-event-tickets__container {
	background: #f4f1ea;
	padding: 44px 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start; /* RTL: flex-start = right side */
}

/* Header */
.ht-event-tickets__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	text-align: right;
}

.ht-event-tickets__title {
	margin: 0;
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 32px;
	color: #2d2828;
}

.ht-event-tickets__subtitle {
	margin: 0;
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	color: #6d6d61;
}

/* Section */
.ht-event-tickets__section {
	width: 100%;
}

.ht-event-tickets__label {
	display: block;
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	color: #2d2828;
	margin-bottom: 16px;
	text-align: right;
}

/* Date selector */
.ht-event-tickets__date-section {
	width: 100%;
}

/* Custom dropdown */
.ht-dropdown {
	position: relative;
	width: 100%;
}

.ht-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 0;
	border-radius: 4px;
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #2d2828;
	cursor: pointer;
	text-align: right;
}

.ht-dropdown__chevron {
	display: flex;
	align-items: center;
	transition: transform 0.2s ease;
}

.ht-dropdown--open .ht-dropdown__chevron {
	transform: rotate(180deg);
}

.ht-dropdown__panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(45, 40, 40, 0.12);
	z-index: 100;
	max-height: 280px;
	overflow-y: auto;
	padding: 4px 0;
}

.ht-dropdown--open .ht-dropdown__panel {
	display: block;
}

.ht-dropdown__option {
	padding: 14px 16px;
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #2d2828;
	text-align: right;
	cursor: pointer;
	transition: background 0.1s ease;
}

.ht-dropdown__option:hover {
	background: rgba(244, 241, 234, 0.6);
}

.ht-dropdown__option--selected {
	background: #f4f1ea;
}

.ht-dropdown__option--disabled {
	color: #b0ada6;
	cursor: not-allowed;
}

/* Disabled cards (no occurrence selected) */
.ht-event-tickets__cards--disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* Ticket cards */
.ht-event-tickets__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.ht-event-tickets__card {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start; /* RTL: flex-start = right */
	transition: opacity 0.15s ease;
}

.ht-event-tickets__card-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start; /* RTL: flex-start = right */
	text-align: right;
}

.ht-event-tickets__card-name {
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	color: #2d2828;
}

.ht-event-tickets__card-age {
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	color: #6d6d61;
}

.ht-event-tickets__card-price {
	font-family: 'Leon', sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 28px;
	color: #e16a54;
	text-align: right;
	width: 100%;
}

.ht-event-tickets__card-price-symbol {
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
}

/* Quantity controls */
.ht-event-tickets__card-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.ht-event-tickets__card-qty-label {
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	color: #2d2828;
}

.ht-event-tickets__qty-control {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 2px solid #2d2828;
	border-radius: 4px;
	padding: 12px;
	min-height: 48px;
	min-width: 48px;
}

.ht-event-tickets__qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.ht-event-tickets__qty-value {
	font-family: 'Leon', sans-serif;
	font-size: 20px;
	line-height: 20px;
	color: #2d2828;
	min-width: 12px;
	text-align: center;
}

/* Status messages */
.ht-event-tickets__card-status {
	width: 100%;
	text-align: right;
}

.ht-status--sold-out {
	color: #dc3545;
	font-weight: 700;
	font-size: 14px;
}

.ht-status--low {
	color: #dba617;
	font-weight: 700;
	font-size: 14px;
}

.ht-status--error {
	color: #dc3545;
	font-size: 14px;
}

/* Purchase button */
.ht-event-tickets__purchase-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	padding: 12px 24px 12px 16px;
	background: #38494b;
	color: #f4f1ea;
	border: 0;
	border-radius: 4px;
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.ht-event-tickets__purchase-btn:hover {
	background: #2a3739;
}

.ht-event-tickets__purchase-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ht-event-tickets__purchase-btn svg {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Modal */
.ht-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(45, 40, 40, 0.5);
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.ht-modal-overlay--visible {
	display: flex;
}

.ht-modal {
	background: #f4f1ea;
	border-radius: 4px;
	padding: 40px 32px;
	max-width: 400px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	direction: rtl;
	animation: htModalIn 0.2s ease;
}

@keyframes htModalIn {
	from { opacity: 0; transform: scale(0.95) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.ht-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ht-modal__message {
	margin: 0;
	font-family: 'Leon', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #2d2828;
}

.ht-modal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 40px;
	background: #38494b;
	color: #f4f1ea;
	border: 0;
	border-radius: 4px;
	font-family: 'Leon', sans-serif;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ht-modal__btn:hover {
	background: #2a3739;
}

/* ── Desktop (≥992px) ── */
@media (min-width: 992px) {
	.ht-event-tickets__container {
		padding: 120px 100px;
		min-height: 920px;
		justify-content: space-between;
		gap: 48px;
	}

	.ht-event-tickets__title {
		font-size: 44px;
		line-height: 44px;
	}

	.ht-event-tickets__subtitle {
		font-size: 32px;
		line-height: 32px;
	}

	.ht-event-tickets__label {
		font-size: 24px;
		line-height: 24px;
	}

	.ht-event-tickets__date-section {
		max-width: 600px;
	}

	.ht-event-tickets__select {
		padding: 16px;
		font-size: 20px;
		line-height: 20px;
	}

	.ht-event-tickets__cards {
		flex-direction: row;
		gap: 24px;
	}

	.ht-event-tickets__card {
		flex: 1;
		padding: 32px;
		gap: 44px;
	}

	.ht-event-tickets__card-info {
		width: auto;
	}

	.ht-event-tickets__card-name {
		font-size: 20px;
		line-height: 20px;
	}

	.ht-event-tickets__card-age {
		font-size: 20px;
		line-height: 20px;
	}

	.ht-event-tickets__card-price {
		font-size: 32px;
		line-height: 32px;
	}

	.ht-event-tickets__card-qty-label {
		font-size: 20px;
		line-height: 20px;
	}

	.ht-event-tickets__qty-value {
		font-size: 20px;
	}
}

/* ============================================
   ARCHIVE / SHORTCODE STYLES (preserved)
   ============================================ */
.hello-tickets-events-archive {
	padding: 20px 0;
}

.hello-tickets-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 30px;
}

.hello-tickets-event-card {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.hello-tickets-event-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hello-tickets-event-image {
	overflow: hidden;
}

.hello-tickets-event-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.hello-tickets-event-card:hover .hello-tickets-event-image img {
	transform: scale(1.05);
}

.hello-tickets-event-content {
	padding: 20px;
}

.hello-tickets-event-title {
	margin: 0 0 15px 0;
	font-size: 1.5em;
}

.hello-tickets-event-title a {
	color: #333;
	text-decoration: none;
}

.hello-tickets-event-title a:hover {
	color: #0073aa;
}

.hello-tickets-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 15px;
	color: #666;
	font-size: 0.9em;
}

.hello-tickets-event-meta span {
	display: flex;
	align-items: center;
}

.hello-tickets-event-price {
	font-size: 1.2em;
	font-weight: bold;
	color: #0073aa;
	margin-bottom: 15px;
}

.hello-tickets-buy-button {
	display: inline-block;
	padding: 12px 24px;
	background: #0073aa;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.3s ease;
}

.hello-tickets-buy-button:hover {
	background: #005a87;
	color: #fff;
}

/* ============================================
   LIGHTBOX (shared)
   ============================================ */
.hello-tickets-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	animation: htFadeIn 0.3s ease;
}

@keyframes htFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.hello-tickets-lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	cursor: default;
}

.hello-tickets-lightbox-content img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hello-tickets-lightbox-close {
	position: absolute;
	top: -50px;
	right: 0;
	background: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-weight: bold;
	transition: background 0.3s ease, transform 0.3s ease;
}

.hello-tickets-lightbox-close:hover {
	background: #f0f0f0;
	transform: rotate(90deg);
}