/**
 * ==================================================
 * TICKETS
 * Mazury Hip Hop Festival Premium
 * ==================================================
 */


/* ==================================================
   SECTION
================================================== */

.tickets-section {

	position:relative;

	overflow:hidden;

	padding-block:
		var(--section-padding);

	color:#fff;

	background:

		radial-gradient(
			circle at top left,
			rgba(255,0,120,.18),
			transparent 45%
		),

		radial-gradient(
			circle at bottom right,
			rgba(0,217,255,.12),
			transparent 45%
		),

		linear-gradient(
			180deg,
			#060913 0%,
			#101735 100%
		);

}


/* ==================================================
   CONTAINER
================================================== */

.tickets__container {

	width:
		min(
			calc(100% - 3rem),
			var(--container-width)
		);

	margin-inline:auto;

}


/* ==================================================
   GRID / SLIDER
================================================== */

.tickets-grid {

	display:flex;

	align-items:stretch;

	gap:32px;

	width:100%;

	margin:0;

	padding:0;

	box-sizing:border-box;

}


/* ==================================================
   CARD CORE
================================================== */

.ticket-card {

	position:relative;

	display:flex;

	flex:0 0 340px;

	flex-direction:column;

	width:340px;

	min-height:600px;

	padding:
		2.5rem 2.25rem;

	box-sizing:border-box;

	border:
		1px solid rgba(255,255,255,.14);

	border-radius:28px;

	overflow:hidden;

	isolation:isolate;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.04),
			rgba(255,255,255,.01)
		),

		#101827;

	box-shadow:

		0 20px 45px rgba(0,0,0,.25);

	transition:

		transform .35s ease,

		border-color .35s ease,

		box-shadow .35s ease;

}


/* ==================================================
   HOVER
================================================== */

.ticket-card:hover {

	transform:
		translateY(-10px);

	border-color:
		rgba(255,255,255,.35);

	box-shadow:
		0 35px 80px rgba(0,0,0,.45);

}


/* ==================================================
   TOP ACCENT
================================================== */

.ticket-card::before {

	content:"";

	position:absolute;

	top:0;

	left:0;

	width:100%;

	height:5px;

	background:

		linear-gradient(
			90deg,
			#ff0055,
			#ff8a00
		);

	z-index:2;

}


/* ==================================================
   SHINE
================================================== */

.ticket-card::after {

	content:"";

	position:absolute;

	top:-120%;

	left:-40%;

	width:40%;

	height:300%;

	background:

		linear-gradient(
			90deg,
			rgba(255,255,255,0),
			rgba(255,255,255,.18),
			rgba(255,255,255,0)
		);

	transform:
		rotate(25deg);

	opacity:0;

	pointer-events:none;

	transition:
		left 1s ease,
		opacity .3s ease;

	z-index:1;

}


.ticket-card:hover::after {

	left:140%;

	opacity:1;

}


/* ==================================================
   STANDARD
================================================== */

.ticket-standard {

	background:

		linear-gradient(
			180deg,
			#151d30,
			#101827
		);

}


.ticket-standard .ticket-title,
.ticket-standard .ticket-current-price {

	color:#fff;

}


/* ==================================================
   PREMIUM
================================================== */

.ticket-premium {

	background:

		linear-gradient(
			180deg,
			#18121d,
			#0b0b0f
		);

	border:
		2px solid rgba(255,41,109,.75);

	box-shadow:
		0 25px 70px rgba(255,0,85,.18);

}


.ticket-premium:hover {

	border-color:
		rgba(255,80,140,.95);

	box-shadow:
		0 40px 90px rgba(255,0,85,.32);

}


.ticket-premium .ticket-title {

	color:#fff;

}


.ticket-premium .ticket-subtitle {

	color:#ffbfd3;

}


.ticket-premium .ticket-current-price {

	background:

		linear-gradient(
			135deg,
			#ff5d8e,
			#ff8a00
		);

	-webkit-background-clip:text;

	background-clip:text;

	-webkit-text-fill-color:transparent;

	color:transparent;

}


/* ==================================================
   VIP
================================================== */

.ticket-vip {

	background:

		linear-gradient(
			180deg,
			#15130d,
			#050505
		);

	border:
		2px solid #d4af37;

	color:#fff;

	box-shadow:

		0 0 0 1px rgba(212,175,55,.15),

		0 30px 80px rgba(212,175,55,.25);

}


.ticket-vip:hover {

	box-shadow:

		0 0 0 1px rgba(212,175,55,.35),

		0 45px 100px rgba(212,175,55,.38);

}


.ticket-vip .ticket-title {

	color:#f9de7a;

}


.ticket-vip .ticket-subtitle {

	color:#e6d18d;

}


.ticket-vip .ticket-current-price {

	background:

		linear-gradient(
			135deg,
			#fff9d6,
			#d4af37
		);

	-webkit-background-clip:text;

	background-clip:text;

	-webkit-text-fill-color:transparent;

	color:transparent;

}


/* ==================================================
   BADGE
================================================== */

.ticket-badge {

	position:absolute;

	top:22px;

	right:22px;

	z-index:3;

	display:flex;

	align-items:center;

	padding:
		.45rem 1rem;

	border-radius:999px;

	font-size:.7rem;

	font-weight:900;

	letter-spacing:.12em;

	line-height:1;

	text-transform:uppercase;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff8a00
		);

	color:#fff;

	box-shadow:
		0 10px 25px rgba(255,0,85,.25);

}


.ticket-vip .ticket-badge {

	background:

		linear-gradient(
			135deg,
			#fff8cf,
			#d4af37
		);

	color:#111;

	box-shadow:
		0 10px 28px rgba(212,175,55,.35);

}


/* ==================================================
   LABEL
================================================== */

.ticket-label {

	position:absolute;

	top:22px;

	left:22px;

	z-index:3;

	padding:
		.4rem .9rem;

	border-radius:999px;

	background:
		rgba(255,255,255,.1);

	border:
		1px solid rgba(255,255,255,.18);

	color:#fff;

	font-size:.7rem;

	font-weight:900;

	letter-spacing:.12em;

	line-height:1;

	text-transform:uppercase;

}


.ticket-vip .ticket-label {

	background:
		rgba(212,175,55,.15);

	border-color:
		rgba(212,175,55,.4);

	color:#f5d66a;

}


/* ==================================================
   HEADER
================================================== */

.ticket-header {

	position:relative;

	z-index:2;

}


.ticket-title {

	margin:0;

	padding:0;

	font-size:
		clamp(
			1.7rem,
			3vw,
			2rem
		);

	line-height:1.05;

	font-weight:900;

	letter-spacing:-.02em;

	color:#fff;

}


.ticket-subtitle {

	margin:
		.7rem 0 0;

	font-size:.92rem;

	line-height:1.55;

	color:
		rgba(255,255,255,.58);

}


/* ==================================================
   META
================================================== */

.ticket-meta {

	position:relative;

	z-index:2;

	display:flex;

	flex-direction:column;

	gap:14px;

	margin:
		2rem 0;

}


.ticket-meta-item {

	min-height:54px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:1rem;

	padding:
		0 18px;

	box-sizing:border-box;

	border-radius:16px;

	background:
		rgba(255,255,255,.05);

}


.ticket-meta-label {

	font-size:11px;

	font-weight:800;

	letter-spacing:.14em;

	text-transform:uppercase;

	color:
		rgba(255,255,255,.55);

}


.ticket-meta-value {

	font-size:16px;

	font-weight:900;

	color:#fff;

}


/* ==================================================
   VIP META
================================================== */

.ticket-vip .ticket-meta-item {

	background:
		rgba(212,175,55,.08);

	border:
		1px solid rgba(212,175,55,.15);

}


.ticket-vip .ticket-meta-label {

	color:
		rgba(230,209,141,.75);

}


.ticket-vip .ticket-meta-value {

	color:#f9de7a;

}


/* ==================================================
   PRICE
================================================== */

.ticket-price {

	position:relative;

	z-index:2;

	display:flex;

	align-items:flex-end;

	flex-wrap:wrap;

	gap:.5rem;

	margin-top:auto;

}


.ticket-old-price {

	flex-basis:100%;

	margin-bottom:-10px;

	font-size:18px;

	font-weight:700;

	line-height:1.2;

	text-decoration:line-through;

	color:
		rgba(255,255,255,.45);

}


.ticket-current-price {

	font-size:68px;

	font-weight:900;

	line-height:1;

	letter-spacing:-2px;

	color:#fff;

}


.ticket-currency {

	margin-bottom:10px;

	font-size:.9rem;

	font-weight:800;

	letter-spacing:.2em;

	opacity:.75;

}


/* ==================================================
   PROGRESS
================================================== */

.ticket-progress {

	display:flex;

	flex-direction:column;

	gap:.6rem;

	margin:
		1.5rem 0 0;

}


.ticket-progress-bar {

	width:100%;

	height:10px;

	overflow:hidden;

	border-radius:999px;

	background:
		rgba(255,255,255,.08);

}


.ticket-progress-bar span {

	display:block;

	width:0;

	height:100%;

	border-radius:inherit;

	background:

		linear-gradient(
			90deg,
			#ff0055,
			#ff8a00
		);

}


.ticket-progress-text {

	display:flex;

	justify-content:flex-end;

	align-items:center;

	gap:.5rem;

	font-size:.75rem;

	font-weight:800;

	letter-spacing:.08em;

	text-transform:uppercase;

	color:
		rgba(255,255,255,.6);

}


/* ==================================================
   STATUS DOT
================================================== */

.ticket-status-dot {

	width:10px;

	height:10px;

	flex-shrink:0;

	border-radius:50%;

	background:#35d06f;

	box-shadow:
		0 0 12px rgba(53,208,111,.5);

}


/* ==================================================
   PREMIUM PROGRESS
================================================== */

.ticket-premium .ticket-progress-bar {

	background:
		rgba(255,255,255,.1);

}


.ticket-premium .ticket-progress-bar span {

	background:

		linear-gradient(
			90deg,
			#ff0055,
			#ff8a00
		);

}


.ticket-premium .ticket-progress-text {

	color:
		rgba(255,191,211,.85);

}


/* ==================================================
   VIP PROGRESS
================================================== */

.ticket-vip .ticket-progress-bar {

	background:
		rgba(212,175,55,.12);

}


.ticket-vip .ticket-progress-bar span {

	background:

		linear-gradient(
			90deg,
			#fff6c0,
			#d4af37
		);

}


.ticket-vip .ticket-progress-text {

	color:
		rgba(230,209,141,.85);

}


/* ==================================================
   FEATURES
================================================== */

.ticket-features {

	position:relative;

	z-index:2;

	list-style:none;

	margin:
		2rem 0 0;

	padding:0;

	display:flex;

	flex-direction:column;

	gap:14px;

	flex:1;

}


.ticket-features li {

	display:flex;

	align-items:center;

	gap:14px;

	padding:
		14px 16px;

	border-radius:14px;

	font-size:15px;

	font-weight:600;

	line-height:1.4;

	background:
		rgba(255,255,255,.05);

	color:#fff;

	transition:
		transform .25s ease,
		background .25s ease;

}


.ticket-features li:hover {

	transform:
		translateX(4px);

	background:
		rgba(255,255,255,.09);

}


/* ==================================================
   CHECK ICON
================================================== */

.ticket-features li::before {

	content:"✓";

	width:28px;

	height:28px;

	flex-shrink:0;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:50%;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff8a00
		);

	color:#fff;

	font-size:14px;

	font-weight:900;

	box-shadow:
		0 8px 18px rgba(255,0,85,.25);

}


/* ==================================================
   VIP FEATURES
================================================== */

.ticket-vip .ticket-features li {

	background:
		rgba(212,175,55,.08);

	border:
		1px solid rgba(212,175,55,.15);

}


.ticket-vip .ticket-features li::before {

	background:

		linear-gradient(
			135deg,
			#fff7c7,
			#d4af37
		);

	color:#111;

	box-shadow:
		0 8px 20px rgba(212,175,55,.3);

}


/* ==================================================
   BUTTON
================================================== */

.ticket-button {

	position:relative;

	z-index:2;

	overflow:hidden;

	display:flex;

	align-items:center;

	justify-content:center;

	width:100%;

	min-height:58px;

	margin-top:2rem;

	box-sizing:border-box;

	border-radius:999px;

	text-decoration:none;

	font-size:15px;

	font-weight:900;

	letter-spacing:.08em;

	text-transform:uppercase;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff8a00
		);

	color:#fff;

	box-shadow:
		0 14px 34px rgba(255,0,85,.25);

	transition:
		transform .3s ease,
		box-shadow .3s ease;

}


.ticket-button:hover {

	transform:
		translateY(-3px);

	color:#fff;

	box-shadow:
		0 20px 45px rgba(255,0,85,.35);

}


/* ==================================================
   VIP BUTTON
================================================== */

.ticket-vip .ticket-button {

	background:

		linear-gradient(
			135deg,
			#fff6c0,
			#d4af37
		);

	color:#111;

	box-shadow:
		0 18px 40px rgba(212,175,55,.35);

}


.ticket-vip .ticket-button:hover {

	color:#111;

	box-shadow:
		0 24px 50px rgba(212,175,55,.45);

}


/* ==================================================
   SLIDER
================================================== */

.tickets-section .slider-arrow {

	display:none;

}


.tickets-section .slider-pagination {

	display:none;

}


/* ==================================================
   DESKTOP
================================================== */

@media (min-width:1100px) {

	.tickets-grid {

		overflow:visible;

		justify-content:center;

	}


	.ticket-card {

		flex:
			0 0 340px;

		width:340px;

		max-width:340px;

	}

}


/* ==================================================
   TABLET
================================================== */

@media (max-width:1100px) {

	.ticket-card {

		flex-basis:320px;

		width:320px;

	}

}


/* ==================================================
   MOBILE SLIDER
================================================== */

@media (max-width:768px) {

	.tickets__container {

		width:
			calc(100% - 1.5rem);

		max-width:none;

	}


	.tickets-grid {

		gap:1rem;

		padding-inline:.75rem;

		overflow-x:auto;

		overflow-y:visible;

		scroll-snap-type:
			x mandatory;

		scroll-padding-inline:.75rem;

		-webkit-overflow-scrolling:touch;

		scrollbar-width:none;

	}


	.tickets-grid::-webkit-scrollbar {

		display:none;

	}


	.ticket-card {

		flex:
			0 0 82%;

		width:82%;

		min-height:auto;

		padding:
			2rem 1.5rem;

		border-radius:24px;

		scroll-snap-align:center;

	}


	.ticket-card:hover {

		transform:none;

	}


	.ticket-title {

		padding-right:0;

		font-size:28px;

	}


	.ticket-current-price {

		font-size:58px;

	}


	.ticket-badge {

		top:18px;

		right:18px;

	}


	.ticket-label {

		top:18px;

		left:18px;

	}


	.tickets-section .slider-arrow {

		display:flex;

	}


	.tickets-section .slider-pagination {

		display:flex;

	}

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width:480px) {

	.tickets__container {

		width:
			calc(100% - 1rem);

	}


	.tickets-grid {

		padding-inline:.5rem;

		scroll-padding-inline:.5rem;

	}


	.ticket-card {

		flex-basis:88%;

		width:88%;

		border-radius:22px;

		padding:
			30px 22px;

	}


	.ticket-current-price {

		font-size:54px;

		letter-spacing:-1px;

	}


	.ticket-old-price {

		font-size:16px;

	}


	.ticket-currency {

		font-size:14px;

		margin-bottom:7px;

	}


	.ticket-features li {

		font-size:15px;

	}


	.ticket-button {

		min-height:54px;

		font-size:14px;

	}

}


/* ==================================================
   ACCESSIBILITY
================================================== */

.ticket-button:focus-visible {

	outline:
		3px solid rgba(255,0,85,.35);

	outline-offset:4px;

}


.ticket-vip .ticket-button:focus-visible {

	outline-color:
		rgba(212,175,55,.45);

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion:reduce) {

	.ticket-card,
	.ticket-button,
	.ticket-features li {

		transition:none;

	}

}