.my-tickets-container {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	gap: 32px;
	padding-bottom: 32px;
	max-width: 1024px;
	margin: 0 auto;
}

.season-pass {
	position: relative;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	width: 330px;
	height: 210px;
	background-color: var(--color-text-1);
	background-image: url("../images/admira-half-white-stroke-panther.svg"), url("../images/aw-white.svg");
	background-size: 260px auto, 32px 32px;
	background-position: bottom 48px left -50px, right 20px top 20px;
	background-repeat: no-repeat;
	color: var(--color-background-1);
	box-shadow: var(--shadow-high);
	white-space: nowrap;
}

.my-tickets-container .season-pass {
	background: var(--color-text-1);
}

.my-tickets-container .season-pass-main_stand,
.my-tickets-container .season-pass-fan,
.my-tickets-container .season-pass-membership_regular,
.my-tickets-container .season-pass-membership_wacki {
	background-image: url("../images/admira-grey-panther.svg");
	background-position: bottom 0 right 0;
	background-size: 211px;
	background-repeat: no-repeat;
}

.season-pass-seating-container {
	position: absolute;
	bottom: 54px;
	right: 20px;
	display: grid;
	grid-template-columns: auto auto;
	grid-auto-rows: min-content;
	gap: 8px;
}

.season-pass-seating-container-cell {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.season-pass-seating-container-cell > div:first-child {
	color: var(--color-text-2);
	text-transform: uppercase;
	font-size: 0.65rem;
}

.season-pass-seating-container-cell > div:last-child {
	font-weight: bold;
	font-size: 0.8rem;
}

.season-pass-seating-container-cell.span-entire-row { /* When there are 3 seat details, the first will span its row */
	grid-column: span 2;
}

.season-pass-title-container {
	display: flex;
	justify-content: space-between;
	border-top: 2px solid var(--color-background-1);
	z-index: 1; /* To overlay panther */
	text-transform: uppercase;
}

.season-pass-title-container div {
	margin-top: 4px;
}

.ticket-expired {
	position: relative;
	color: var(--color-text-2) !important;
	opacity: 0.5;
}

.ticket-expired::after {
	opacity: 0.5;
}

.ticket-qr-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100px;
}

.ticket-qr-mask-image {
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 100px;
	height: 100px;
	padding: 4px;
	background: var(--color-background-1);
}

.ticket-qr-label { /* Ticket ID */
	font-size: 0.65rem;
	color: var(--color-text-2);
	padding-top: 3px;
}

.ticket-settings-button-container {
	position: absolute;
	top: 20px;
	right: 20px;
}

.season-pass-status-stamp {
	position: absolute;
	top: 35%;
	left: 59%;
	transform: translate(-50%, -50%) rotate(-17deg);
	font-size: 1.6rem;
	z-index: 1; /* Overlay text on pass */
	text-transform: uppercase;
	color: var(--color-accent-1);
	font-weight: 900;
	border: 2px solid var(--color-accent-1);
	padding: 4px 16px;
	border-radius: 16px;
	mask-image: url("../images/stamp_mask.png");
	mask-repeat: no-repeat;
	mask-size: 210% auto;
}

.season-pass-business_gold {
	background-image: url("../images/admira-half-gold-stroke-panther.svg"), url("../images/aw-gold.svg");
	background-size: 260px auto, 32px 32px;
	background-position: bottom 48px left -50px, right 20px top 20px;
	background-repeat: no-repeat;
}

.season-pass-business_silver {
	background-image: url("../images/admira-half-silver-stroke-panther.svg"), url("../images/aw-silver.svg");
	background-size: 260px auto, 32px 32px;
	background-position: bottom 48px left -50px, right 20px top 20px;
	background-repeat: no-repeat;
}

.season-pass-business_gold .ticket-qr-mask-image {
	background: var(--color-gold-gradient-2);
}

.season-pass-business_gold .ticket-qr-label {
	background: var(--color-gold-gradient-2);
	background-clip: text;
	color: transparent;
	opacity: 1;
}

.season-pass-business_gold .season-pass-title-container {
	position: relative;
	background:var(--color-gold-gradient-2);
	background-clip: text;
	color: transparent;
	border-image-source: var(--color-gold-gradient-2);
	border-image-slice: 1; /* Show full border gradient */
}

.season-pass-business_gold .season-pass-seating-container {
	background: var(--color-gold-gradient-1);
	background-clip: text;
	color: transparent;
}

.season-pass-business_gold .season-pass-seating-container-cell > div:first-child { /* Higher Specificity needed for business_gold seating-container titles */
	color: transparent;
}

.season-pass-business_silver .ticket-qr-mask-image {
	background: var(--color-silver-gradient-2);
}

.season-pass-business_silver .ticket-qr-label {
	background: var(--color-silver-gradient-2);
	background-clip: text;
	color: transparent;
	opacity: 1;
}

.season-pass-business_silver .season-pass-title-container {
	position: relative;
	background: var(--color-silver-gradient-2);
	background-clip: text;
	color: transparent;
	border-image-source: var(--color-silver-gradient-2);
	border-image-slice: 1; /* Show full border gradient */
}

.season-pass-business_silver .season-pass-seating-container {
	background: var(--color-silver-gradient-2);
	background-clip: text;
	color: transparent;
}

.season-pass-business_silver .season-pass-seating-container-cell > div:first-child { /* Higher Specificity needed for business_silver seating-container titles */
	color: transparent;
}

.my-tickets-container .season-pass-business_gold .season-pass-seating-placeholder { /* Edge case */
	display: flex;
	position: absolute;
	bottom: 48px;
	right: 0;
	width: 136px;
	height: 112px;
	background: url(../images/admira-half-gold-stroke-panther-left.svg);
	background-size: cover;
	background-position: bottom left;
	background-repeat: no-repeat;
}

.my-tickets-container .season-pass-business_silver .season-pass-seating-placeholder {
	display: flex;
	position: absolute;
	bottom: 48px;
	right: 0;
	width: 136px;
	height: 112px;
	background: url(../images/admira-half-silver-stroke-panther-left.svg);
	background-size: cover;
	background-position: bottom left;
	background-repeat: no-repeat;
}

.my-tickets-container .season-pass-parking {
	background: linear-gradient(rgba(6, 57, 113, 1), rgba(0, 91, 138, 1));
}

.ticket {
	position: relative;
	z-index: 0; /* position + z-index create a stacking context so ::after backgrounds (with mask-image) render above parent backgrounds */
	scroll-snap-align: center;
	flex: 0 0 auto;
	width: 330px;
	height: 444px;
	padding: 8px 8px 24px 8px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	color: var(--color-background-1);
}

.ticket::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 330px;
	height: 444px;
	box-shadow: 0 15px 15px 0 rgba(0, 0, 0, .3);
	border-radius: 14px;
}

.ticket::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 330px;
	height: 444px;
}

.ticket .ticket-qr-container > img {
	background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
	filter: none;
	padding: 8px;
	border-radius: 8px;
}

.ticket-matchday-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.ticket-matchday-title img {
	height: 50px;
}

.ticket-matchday-title > div {
	font-weight: 900;
}

.ticket-matchday-row {
	display: flex;
	justify-content: space-between;
	padding: 0 12px;
}

.ticket-matchday-cell {
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.ticket-matchday-cell > div:first-of-type {
	color: var(--color-text-2);
	text-transform: uppercase;
	font-size: 0.75rem;
}

.ticket-matchday-row .ticket-settings-button-container {
	position: inherit;
}

.ticket-matchday-status-stamp {
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-17deg);
	font-size: 2.2rem;
	text-transform: uppercase;
	color: var(--color-accent-3);
	font-weight: 900;
	border: 3px solid var(--color-accent-3);
	padding: 4px 16px;
	border-radius: 16px;
	mask-image: url("../images/stamp_mask.png");
	mask-repeat: no-repeat;
	mask-size: 210% auto;
}

.ticket-matchday-parking::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	url("../images/car-bg.svg") no-repeat center,
	linear-gradient(rgba(6, 57, 113, 1), rgba(0, 91, 138, 1));

	background-size: 75% auto,
	60% auto,
	40% auto,
	cover;

	background-position: -10px -10px,
	185px 290px,
	center,
	center;

	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-guest::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1) 0%,
		rgba(0,0,0, 1) 25%,
		rgba(0, 0, 0, 0.5) 40%,
		rgba(0, 0, 0, 1) 75%,
		rgba(0, 0, 0, 1) 100%
	),
	url("../images/stadion.jpg") no-repeat center;

	background-size: 75% auto,
	60% auto,
	cover,
	1000px auto;

	background-position: -10px -10px,
	185px 290px,
	center,
	-50px -100px;

	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-fan::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1) 0%,
		rgba(0,0,0, 1) 25%,
		rgba(0, 0, 0, 0.5) 40%,
		rgba(0, 0, 0, 1) 75%,
		rgba(0, 0, 0, 1) 100%
	),
	url("../images/stadion.jpg") no-repeat center;

	background-size: 75% auto,
	60% auto,
	cover,
	1000px auto;

	background-position: -10px -10px,
	185px 290px,
	center,
	-650px -100px;

	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-main_stand::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	linear-gradient(
		to bottom,
		rgba(0, 0, 0, 1) 0%,
		rgba(0,0,0, 1) 25%,
		rgba(0, 0, 0, 0.5) 40%,
		rgba(0, 0, 0, 1) 75%,
		rgba(0, 0, 0, 1) 100%
	),
	url("../images/stadion.jpg") no-repeat center;

	background-size: 75% auto,
	60% auto,
	cover,
	1000px auto;

	background-position: -10px -10px,
	185px 290px,
	center,
	-400px -100px;

	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-business_silver, .ticket-matchday-business_gold {
	color: var(--color-text-1);
}

.ticket-matchday-business_silver::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	var(--color-silver-gradient-1);

	background-size: 75% auto,
	60% auto,
	cover;

	background-position: -10px -10px,
	185px 290px,
	center;

	background-blend-mode: normal;
	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-business_silver .ticket-matchday-cell > div:first-of-type {
	color: var(--color-background-2);
}

.ticket-matchday-business_gold::after {
	background: url("../images/stripes-bg.svg") no-repeat,
	url("../images/admira-tile-bg.png") no-repeat,
	var(--color-gold-gradient-1);

	background-size: 75% auto,
	60% auto,
	cover;

	background-position: -10px -10px,
	185px 290px,
	center;

	background-blend-mode: normal;
	mask-image: url("../images/ticket-mask.svg");
}

.ticket-matchday-business_gold .ticket-matchday-cell > div:first-of-type {
	color: var(--color-background-1);
}

@media screen and (min-width: 799px) {
	.my-tickets-container {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}
}