/* =========================================================
   RK Eventin Single Builder: ticket templates
   Defaults are kept at LOW specificity on purpose, so anything set in Elementor wins.
   ========================================================= */

/* ---------- Ticket page ---------- */
body.rk-ticket-page {
	margin: 0;
	min-height: 100vh;
	background: var(--rk-page-bg, #0b0c0e);
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.rk-tkt-stage {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(16px, 4vw, 48px);
}

.rk-tkt-capture {
	background: var(--rk-page-bg, #0b0c0e);
}

.rk-tkt-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 24px 16px 0;
}

/* Buttons: same neon look as the site. The selectors are strong on purpose, because themes
   style <button> elements (e.g. a crimson outline) and would otherwise win. */
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	padding: 11px 22px;
	border: 1px solid var(--rk-accent, #D5FE3C) !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--rk-accent, #D5FE3C) !important;
	font: 700 14px/1.2 'Manrope', system-ui, sans-serif;
	text-decoration: none !important;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn:hover,
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn:focus-visible {
	background: var(--rk-accent, #D5FE3C) !important;
	color: var(--rk-accent-ink, #0b0c0e) !important;
	box-shadow: 0 0 18px rgba(213, 254, 60, .35) !important;
}
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn--primary {
	background: var(--rk-accent, #D5FE3C) !important;
	color: var(--rk-accent-ink, #0b0c0e) !important;
}
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn--primary:hover,
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn--primary:focus-visible {
	filter: brightness(1.08);
}
body.rk-ticket-page .rk-tkt-toolbar .rk-tkt-btn:disabled {
	opacity: .6;
	cursor: wait;
}

.rk-tkt-sample-note {
	margin: 14px auto 0;
	max-width: 560px;
	padding: 8px 14px;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: 10px;
	color: #a3a8b0;
	font: 500 13px/1.4 'Manrope', system-ui, sans-serif;
	text-align: center;
}

/* ---------- Elementor containers on the ticket page ----------
   The ticket page is a standalone page: Elementor's base container CSS (frontend.css) is not loaded there, only the
   template's own CSS file, which sets CSS variables. These rules apply those variables (direction, gap, padding,
   width, alignment), so any layout made in Elementor shows as designed. Kept at low specificity: the Neon rules
   below and anything set in Elementor still win. */
.rk-tkt-capture .e-con {
	box-sizing: border-box;
	display: flex;
	flex-direction: var(--flex-direction, column);
	flex-wrap: var(--flex-wrap, nowrap);
	align-items: var(--align-items, stretch);
	justify-content: var(--justify-content, flex-start);
	gap: var(--row-gap, 0px) var(--column-gap, 0px);
	width: var(--width, 100%);
	max-width: 100%;
	min-width: 0;
	padding: var(--padding-top, 0px) var(--padding-right, 0px) var(--padding-bottom, 0px) var(--padding-left, 0px);
}
.rk-tkt-capture .e-con > .elementor-widget {
	max-width: 100%;
}

/* ---------- Widgets ---------- */
.rk-tkt-field .rk-tkt-label,
.rk-tkt-cell .rk-tkt-label {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 4px;
}
.rk-tkt-field .rk-tkt-value,
.rk-tkt-cell .rk-tkt-value {
	overflow-wrap: anywhere;
}

.rk-tkt-details.has-divider {
	border-top: 1px solid rgba(128, 128, 128, .25);
	padding-top: 22px;
}
.rk-tkt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px 24px;
}
.rk-tkt-cell {
	min-width: 0;
}

.rk-tkt-qr-wrap {
	display: flex;
	justify-content: center;
}
.rk-tkt-qr {
	box-sizing: border-box;
	width: 150px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	padding: 14px;
	border-radius: 20px;
	background: #f2f0e6;
	line-height: 0;
}
.rk-tkt-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}
.rk-tkt-qr-invalid {
	max-width: 260px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 42, 133, .6);
	border-radius: 14px;
	color: #FF2A85;
	font: 700 13px/1.4 'Manrope', system-ui, sans-serif;
	text-align: center;
}

/* ---------- Bassworld Neon design: layout defaults (every value can be overridden in Elementor) ---------- */
.rk-ticket-card {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	max-width: 920px;
	margin: 0 auto;
	overflow: hidden !important; /* the neon strip follows the rounded corners */
	background: #131417;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 24px;
}
.rk-ticket-accent {
	flex: 0 0 auto;
	min-width: 6px; /* the width itself comes from Elementor (Layout > Width) */
	padding: 0;
	border-radius: 23px 0 0 23px;
	background: linear-gradient(180deg, #D5FE3C, #FF2A85);
}
.rk-ticket-main {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	min-width: 0;
	gap: 18px;
	padding: 26px 32px 28px;
}
.rk-ticket-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.rk-ticket-tags {
	display: flex;
	align-items: center;
	gap: 14px;
}
.rk-ticket-stub {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	min-width: 230px; /* the width itself comes from Elementor (Layout > Width) */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px 28px;
	border-left: 2px dashed #2a2c31;
}

/* The two round notches on the dashed line, in the color of the page behind the ticket */
.rk-ticket-stub::after {
	content: "";
	position: absolute;
	top: -11px;
	bottom: -11px;
	left: -12px;
	width: 22px;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 50%, var(--rk-notch, #0b0c0e) 0 10px, transparent 10.5px) 0 0 / 22px 22px no-repeat,
		radial-gradient(circle at 50% 50%, var(--rk-notch, #0b0c0e) 0 10px, transparent 10.5px) 0 100% / 22px 22px no-repeat;
}

/* Brand name with a lime dot */
.rk-ticket-brand .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.rk-ticket-brand .elementor-heading-title::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #D5FE3C;
	box-shadow: 0 0 10px rgba(213, 254, 60, .7);
}

.rk-ticket-title .rk-tkt-value {
	display: block;
	text-wrap: balance;
}

/* ---------- Small screens ---------- */
@media (max-width: 880px) {
	.rk-tkt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.rk-ticket-card {
		flex-direction: column;
	}
	.rk-ticket-card > .rk-ticket-accent.e-con,
	.rk-ticket-card > .rk-ticket-accent {
		flex: 0 0 6px;
		width: 100%;
		min-width: 0;
		height: 6px;
		min-height: 6px;
		border-radius: 23px 23px 0 0;
	}
	.rk-ticket-card > .rk-ticket-main.e-con,
	.rk-ticket-card > .rk-ticket-main {
		flex: 0 0 auto;
		width: 100%;
	}
	.rk-ticket-card > .rk-ticket-stub.e-con,
	.rk-ticket-card > .rk-ticket-stub {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		border-left: 0;
		border-top: 2px dashed #2a2c31;
	}
	.rk-ticket-stub::after {
		top: -12px;
		bottom: auto;
		left: -11px;
		right: -11px;
		width: auto;
		height: 22px;
		background:
			radial-gradient(circle at 50% 50%, var(--rk-notch, #0b0c0e) 0 10px, transparent 10.5px) 0 0 / 22px 22px no-repeat,
			radial-gradient(circle at 50% 50%, var(--rk-notch, #0b0c0e) 0 10px, transparent 10.5px) 100% 0 / 22px 22px no-repeat;
	}
	.rk-ticket-main {
		padding: 22px 20px 24px;
	}
}

/* ---------- Print / Save as PDF ---------- */
@media print {
	@page {
		margin: 0;
	}
	html,
	body.rk-ticket-page {
		background: var(--rk-page-bg, #0b0c0e) !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	body.rk-ticket-page * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.rk-tkt-toolbar,
	.rk-tkt-sample-note,
	#wpadminbar {
		display: none !important;
	}
	.rk-tkt-stage {
		padding: 12mm;
	}
}

/* ---------- Bassworld Classic (white, print-friendly) ---------- */
.rk-ticket-classic {
	max-width: 920px;
	margin: 0 auto;
	background: #fff;
	color: #111;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.rk-ticket-classic .rk-tkt-field .rk-tkt-label {
	margin-bottom: 2px;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
}
.rk-ticket-classic .rk-tkt-image-text {
	font: 800 26px/1.2 'Inter', system-ui, sans-serif;
	letter-spacing: .04em;
}
.rk-ticket-classic .rk-tkt-barcode svg {
	max-width: 100%;
}
body.rk-ticket-page .rk-tkt-sample-note {
	border-color: rgba(128, 128, 128, .35);
}