/* BRANDED TICKET SHOP PAGES */

/* VARIABLES */
:root {
	--primary-color: #303030;
	--secondary-color: #808080;
	--accent-color: #86bc25;
	--accent-color-hover: #66991a;
	--accent-r: 134;
	--accent-g: 188;
	--accent-b: 37;
	--accent-font-color: #fff;
	--primary-font-family: 'Roboto', Arial, sans-serif;
	--secondary-font-family: 'Asap Condensed', Arial, sans-serif;
	--border-color: rgba(0,0,0,0.1);
	--border-color-light: rgba(0,0,0,0.05);
	--border-color-medium: rgba(0,0,0,0.1);
	--border-color-dark: rgba(0,0,0,0.2);
	--border-color-very-dark: rgba(0,0,0,0.3);
	--bgd-color: #fff;
	--bgd-hover-color: #f4f4f4;
	--black-color: #000;
	--surface: #ffffff;
	--muted-color: #555;
	--text-color: #1a1a1a;
	--brand: #0073e6;
	--brand-2: #00b38f;
	--danger: #e60023;
	--full-radius: 100px;
	--primary-radius: 16px;
	--secondary-radius: 8px;
	--shadow: 0 4px 12px rgba(0,0,0,.08);
	--shadow-light: 0 1px 4px rgba(0,0,0,.08);
	--maxw: 1200px;
	--green: #008000;
	--green-50: rgba(0,128,0,.4);
	--yellow: #ffff00;
	--yellow-50: rgba(255,255,0,.4);
	--red: #ff0000;
	--red-50: rgba(255,0,0,.4);
}

:root {
	font-size: 16px;
	text-rendering: optimizeLegibility;
}

/* BASE STYLES */
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 360px;
	/* height: 100%;
	overflow-x: hidden; */
	position: relative;
	background: var(--bgd-color);
	color: var(--text-color);
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
	z-index: 0;
}
html { scrollbar-gutter: stable; }  /* Prevents the opening modal from shifting content to the right. */
* {
	font-family: var(--primary-font-family);
	box-sizing: border-box;
}
.h1, .h2, .h3, h1, h2, h3 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1em;
}
.h1, h1 {
	margin-top: 0rem;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 32px;
	color: var(--black-color);
}
.h2, h2.h2 /* Since Online primarily uses h3 styling, have default h2's look like h3 for WCAG compliance. */ {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: 500;
	color: var(--primary-color);
}
.h3, h3,
h2:not(.h1, .h2, .ContentBoxHeader), 
h2.h3 /* Since Online primarily uses h3 styling, have default h2's look like h3 for WCAG compliance. */ {
	margin-top: 1.5rem;
	padding: 0 5px 0 5px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 450;
	color: var(--black-color);
} 

a {
	color: var(--brand);
	text-decoration: none;
	cursor: pointer;
}
img {
	width: 100%;
	max-width: 100%;
	display: block
}

/* FIXING SCALING ISSUES ON IOS */
body::before {
	transform: scale(1) !important;
}

/* Lock page scroll when overlay is open */
body:has(.overlay.open),
body:has(.EventCardMobileOverlay.is-open) {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* PRELOADERS */
.Preloader16 { padding: 10px; text-align: center;  font-size: 16px; }
.Preloader24 { padding: 20px; text-align: center;  font-size: 24px; }
.Preloader32 { padding: 30px; text-align: center;  font-size: 32px; }

/* BUTTON SPINNER */
.btn-spinner { position:absolute; display:inline-flex; align-items:center; justify-content:center;  color: #ffffff !important; pointer-events:none; }
.btn-spinner i { font-size: 14px; }


/* OVERLAY */
/* Backdrop */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.33);
	z-index: 98;
	display: none; /* hidden by default */
	transition: background .2s ease-in-out;
}

/* Shown state */
.overlay.open {
	display: block;
}

/* Panel (scrolls if tall) */
.overlay-content {
	position: relative;
	background: #fff;
	max-width: 1240px;
	margin: 100px auto; /* 100px top/bottom, centered horizontally */
	padding: 0px;
	border-radius: 12px;
	height: calc(100vh - 200px);
	max-height: calc(100vh - 200px);
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* Close button fixed to viewport top-right */
.overlay-close {
	position: absolute;
	top: 100px;
	left: calc(50vw + 640px);
	font-size: 32px;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-shadow: 0 0 12px rgba(0,0,0,0.6);
	z-index: 9999; /* above the panel */
}
button.overlay-close {
    padding: 0;
    line-height: inherit;
}
button.overlay-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
    border-radius: 4px;
}
.overlay-body {
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}

/* OVERLAY */
/* Backdrop */
.seatmap-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0);
	z-index: 100;
	display: none; /* hidden by default */
	transition: background .2s ease-in-out;
}

/* Shown state */
.seatmap-overlay.open {
	display: block;
}

/* Panel (scrolls if tall) */
.seatmap-overlay-content {
	position: relative;
	background: #fff;
	max-width: 2000px;
	margin: 100px auto; /* 100px top/bottom, centered horizontally */
	padding: 0;
	border-radius: 12px;
	height: calc(100vh - 200px);
	max-height: calc(100vh - 200px);
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
}

/* Close button fixed to viewport top-right */
.seatmap-overlay-close {
	position: absolute;
	top: 100px;
	left: calc(50vw + 1020px);
	opacity: 0.8;
	transition: opacity .25s ease-in-out;
	z-index: 101; /* above the panel */
	font-size: 32px;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-shadow: 0 0 12px rgba(0,0,0,0.6);
}
.seatmap-overlay-body {
	overflow: hidden;
	height: 100%;
}

.__spinner { margin-left: 5px; }
.btn__spinner, .__spinner { display: none; }
button[data-spinner="true"] .btn__spinner { display: block; }
button[data-spinner="true"] .btn__label { display: none; }
button[data-spinner="true"] { opacity: .8; cursor: wait; }
button:disabled { opacity: .6; cursor: not-allowed; }

/* BASIC STYLES */
.TicketShop {
	margin: 0 0 20px 0;
	padding: 0 0 0 0;
	min-height: calc(100vh - 300px);
}
.TicketShopWrapper {
	margin: 90px auto 0 auto;
	width: 100%;
	max-width: 1210px;
	min-height: calc(100vh - 270px);
}

.TicketShopHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 75px;
	z-index: 2;
	background: rgba(255,255,255,.9);
	backdrop-filter: saturate(1.2) blur(8px);
	box-sizing: border-box;
	display: flex;
	transform: translateZ(0);
	box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
.TicketShopHeader .HeaderWrapper {
	position: relative;
	margin: 0 auto;
	width: 1210px;
	min-width: 360px;
	max-width: 1210px;
	box-sizing: border-box;
}
.TicketShopHeader .Logo {
	float: left;
	padding: 13px;
	box-sizing: border-box;
	cursor: pointer;
}
.TicketShopHeader .Logo img {
	width: auto;
	max-width: 150px;
	height: 50px;
	display: block;
}
.TicketShopHeader .Icons {
	float: right;
	margin: 10px 0 0 0;
	color: var(--black-color);
}
.IconCart, .IconAccount, .IconGlobe {
	float: left;
	margin: 0 20px 0 0;
	padding: 10px 0 10px 0;
	font-size: 20px;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	line-height: inherit;
}
.CartDisabled{
    pointer-events: none;
    color: #999;
}
.CartCount {
	position: absolute;
	top: 10px;
	margin: 0 0 0 -2px;
	padding: 2px 2px 2px 2px;
	color: var(--black-color);
	text-shadow: 0 0 5px rgba(0,0,0,0.2);
	font-size: 14px;
	font-weight: 400;
}
.IconAcctActive {
	margin: 8px 10px 0 0;
	padding: 0 5px 0 5px;
	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 25px;
	font-weight: 400;
	color: var(--black-color);
	text-align: center;
}

.SmallPriceText {
    font-family: var(--primary-font-family);
    font-size: 13px;
    color: var(--secondary-color);
}

.IconCart .CartAddedBubble {
    position: absolute;
    right: 0;
    top: 120px;
    transform: translateY(-100%);
    z-index: 1000;
    white-space: nowrap;
    pointer-events: none;
    transition: all 0.2s ease;
}
.CartAddedBubble::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-left: 1px solid rgba(0,0,0,0.12);
    border-top: 1px solid rgba(0,0,0,0.12);
}

.FixedBottomMiddleViewport {
    display: block;
    margin: 0 auto;
	padding: 20px 0px;
    
    position: sticky;
    bottom: 0px;
    z-index: 97;
    
    min-width: 200px;
	text-align: center;
	background-color: #fff;
}
.BottomContinueButtonWrapper {
    transition: all 200ms ease;
}
.BottomContinueButtonWrapper button {
    min-width: 300px;
}
.BottomContinueButtonWrapper.is-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
}

/* ACCOUNT TOGGLE */
.AccountActionWrapper {
	display: none;
	position: relative;
	box-sizing: border-box;
	z-index: 10;
}
.AccountActionBox {
	position: absolute;
	top: 85px;
	right: 10px;
	width: 125px;
	background-color: #fff;
	border-radius: var(--secondary-radius);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0,0,0,0.25);
}
.AccountActionValue {
	padding: 5px 10px 5px 10px;
	margin: 2px 2px 2px 2px;
	font-family: var(--primary-font-family);
	font-size: 14px;
	font-weight: 300;
	color: var(--primary-color);
	cursor: pointer;
}
.AccountActionValue:hover {
	color: var(--black-color);
	background: #f4f4f4;
	font-weight: 400;
	border-radius: 4px;
}
button.AccountActionValue {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    line-height: inherit;
    box-sizing: border-box;
}

/* LANGUAGE TOGGLE */
.LangSelectorWrapperTop {
	display: none;
	position: relative;
	box-sizing: border-box;
	z-index: 10;
}
.LangSelectorBoxTop {
	position: absolute;
	top: 85px;
	right: 10px;
	width: 125px;
	background-color: #fff;
	border-radius: var(--secondary-radius);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0,0,0,0.25);
}
.LangSelectorValue {
	display: block;
	width: 100%;
	padding: 5px 10px 5px 10px;
	margin: 2px 2px 2px 2px;
	font-family: var(--primary-font-family);
	font-size: 14px;
	font-weight: 300;
	color: var(--primary-color);
	cursor: pointer;
	background: none;
	border: none;
	text-align: left;
	box-sizing: border-box;
}
.LangSelectorBoxTop > .Selected, .LangSelectorValue:hover {
	color: var(--black-color);
	background: #f4f4f4;
	font-weight: 400;
	border-radius: 4px;
}
.LangSelectorWrapperBottom {
	display: none;
	position: relative;
	box-sizing: border-box;
	z-index: 10;
}
.LangSelectorBoxBottom {
	position: absolute;
	bottom: 10px;
	left: 120px;
	width: 125px;
	background-color: #fff;
	border-radius: var(--secondary-radius);
	box-shadow: var(--shadow);
	border: 1px solid rgba(0,0,0,0.25);
}
.LangSelectorValue {
	padding: 5px 10px 5px 10px;
	margin: 2px 2px 2px 2px;
	font-family: var(--primary-font-family);
	font-size: 14px;
	font-weight: 300;
	color: var(--primary-color);
	cursor: pointer;
}
.LangSelectorBoxBottom > .Selected {
	color: var(--black-color);
	background: #f4f4f4;
	font-weight: 400;
	border-radius: 4px;
}
.PromoterHeader {
	margin: -50px 0 50px 0;
	box-sizing: border-box;
}

.TicketShopHero {
	position: relative;
	overflow: hidden;
	margin: 75px 0 0 0;
	z-index: -1;
	width: 100%;
    min-height: 300px;
    height: calc(100vh - 420px);
    max-height: 700px;
}
.HeroSlider, .HeroSlider .uk-slider-items {
    min-height: inherit;
    height: inherit;
    max-height: inherit;
}
.TicketShopHero video,
.TicketShopHero img {
	object-fit: cover;
    object-position: center center;
	min-width: 100%;
	min-height: 100%;
}
.TicketShopHero::after {
	content: "";
    display: block;
	position: absolute;
	bottom: -1px;   /* Changed from 0, since there was a weird line underneath the image on mobile. */
	left: 0;
	width: 100%;
	height: 100px;
	/*background: linear-gradient(to top, white, transparent); */
	pointer-events: none; /* Allows clicks to go through if necessary */
	z-index: 1; /* Must be above the video, but still within the container */
}
body:has(.TicketShopHero) .TicketShopWrapper {
    margin-top: 20px;
}
.HeroTitleWrapper {
    position: absolute;
    display: block;
    z-index: 2;
    bottom: 50px;
    left:   max(16px, calc((100% - 1210px) / 2));  /* Aligns with the left edge of the main container. */
}
.HeroTitle {
    margin: 0 0 10px 0;
	font-size: clamp(40px, 7vw, 96px);  /* clamp(min, preferred, max) lets a value scale fluidly with limits. */
    font-family: 'Archivo Black', 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);

    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}
.HeroTitle span {
	display: block;
	margin: 0 0 10px 0;
	font-size: clamp(20px, 7vw, 40px);  /* clamp(min, preferred, max) lets a value scale fluidly with limits. */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 400;
	opacity: 0.8;
}
.HeroTitleWrapper > button {
    margin: 15px 0 0 0;
}

/* HERO CAROUSEL ANIMATIONS */

/* Progress bar */
.HeroProgressBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.2);
    z-index: 3;
}
.HeroProgressFill {
    width: 0;
    height: 100%;
    background: rgba(255,255,255,0.8);
}
.HeroProgressFill.animating {
    animation: heroProgress 7s linear forwards;
}
@keyframes heroProgress {
    from { width: 0; }
    to   { width: 100%; }
}

/* Image zoom on active slide */
.HeroSliderItem img {
    transform: scale(1);
    transition: transform 0.3s ease;
}
.HeroSliderItem.uk-active img {
    transform: scale(1.08);
    transition: transform 7.5s ease-out;
}

/* Title slide-in from the left */
.HeroSliderItem .HeroTitleWrapper {
    opacity: 0;
    transform: translateX(-60px);
}
.HeroSliderItem.uk-active .HeroTitleWrapper {
    animation: heroTitleSlideIn 0.6s ease-out 0.3s both;
}
@keyframes heroTitleSlideIn {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}

.TicketShopContent {
	margin: 15px 0 0 0;
}
 
.TicketShopFooter {
	width: 100%;
	max-width: 100%;
}
.FooterLogo {
	margin: 45px 0 25px 0;
}
.FooterName {
	margin: 0 0 15px 0;
	font-size: 20px;
	text-transform: uppercase;
	color: #000;
}
.FooterName h2 {
	font-size: 20px;
	text-transform: uppercase;
	color: #000;
}
.FooterLink {
	margin: 0 0 25px 0;
	font-size: 16px;
	font-weight: 600;
	color: #000;
}

.TicketShopImpressum {
	margin: 15px 0 0 0;
	padding: 15px;
	height: 155px;
	border-top: 1px solid #dadada;
	background-color: #f4f4f4;
	color: var(--secondary-color);
	font-size: 14px;
}
.ImpressumWrapper {
	margin: 0 auto 0 auto;
	width: 1210px;
	max-width: 1210px;
}
.PolicyWrapper {
	overflow: hidden;
	margin: 0 auto 0 auto;
	padding: 15px 0 25px 0;
	width: 100%;
	max-width: 1210px;
	border-bottom: 1px solid rgba(0,0,0,0.1)
}
.PolicyLink {
	display: block;
	float: left;
	margin: 0 15px 0 0;
	font-size: 14px;
	color: var(--secondary-color);
	font-weight: 400;
	text-decoration: none;
}
.PolicyLink:hover {
	color: var(--primary-color);
	text-decoration: underline;
}
.ImpressumLink, .SupportLink {
	display: block;
	margin: 5px 0 0 15px;
	float: right;
	font-size: 14px;
	color: var(--secondary-color);
	font-weight: 400;
	text-decoration: none;
}
.ImpressumLink:hover, .SupportLink:hover {
	color: var(--primary-color);
	text-decoration: underline;
}
.BrandWrapper {
	margin: 0 auto 0 auto;
	padding: 15px 0 0 0;
	width: 100%;
	max-width: 1210px;
}
.BrandLogo {
	float: left;
	margin: 0 10px 0 0;
}
.BrandLogo img {
	height: 30px;
	width: auto !important;
}
.Language {
	float: left;
	margin: 5px 15px 0 0;
	font-size: 14px;
	color: var(--secondary-color);
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
    
    /* button styling override */
    background: none;
    border: none;
    padding: 0;
    line-height: inherit;
}
.Language:hover {
	color: var(--primary-color);
}
.OnlineButtonSubmit {
    padding: 15px;
    background-color: var(--black-color, #000);
    color: #ffffff;
    border-radius: var(--secondary-radius, 8px);
    text-transform: uppercase;
}
.OnlineButtonSubmit:hover,
.OnlineButtonSubmit:focus,
.OnlineButtonSubmit:active {
    background-color: var(--primary-color, #444f4f);
    border-color: var(--primary-color, #444f4f);
}

/* NAVIGATION TILES */

#PageNavigationWrapper {
    margin-left: -15px;
    margin-bottom: 50px;
}

/* MERCHANDISE */
.SliderProgressBarWrapper {
	width: 100%;
	height: 5px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin: 12px 0 0 0;
}

.SliderProgressBar {
	width: 100%;
	height: 100%;
	background: none;
	border-radius: 3px;
	position: relative;
}

.SliderProgressThumb {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: #303030;
	border-radius: 3px;
	transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1);
	min-width: 20px;
}

.MerchandiseTrack, 
.FeaturedMerchandiseBox, 
.Items, 
.Categories, 
.MerchandiseContentWrapper, 
.MerchandiseImgWrapper, 
.Category {
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}

.MerchandiseTileWrapper, 
.TileWrapper {
    position: relative;
    margin-bottom: 7px;
    cursor: pointer;
}

.MerchandiseTileWrapper a,
MembershipTileWrapper a {
    color: #333;
    text-decoration: none;
}

.MerchandiseTileBox, .TileBox {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 1px solid var(--border-color-light);
    border-radius: var(--secondary-radius);
    box-shadow: 0 0 0 0 transparent,0 0 0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
    transition: box-shadow .2s ease-in-out;
}

.MerchandisePicturesWrapper, 
.TileImgWrapper {
    height: 150px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

.MerchandisePicturesWrapper img,
.TileImgWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.MerchandiseTitleWrapper,
.TileTitleWrapper {
    padding: 15px;
    height: 70px;
    max-height: 95px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.MerchandiseTitle, 
.TileTitle {
    font-family: var(--primary-font-family);
    font-size: 25px;
    font-weight: 500;
}

.SlideShowDots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.SlideShowDot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s;
    pointer-events: auto;
    border: none;
    outline: none;
}
.SlideShowDot.active {
    background: transparent;
    border: none;
    outline: none;
}
.SlideShowDotTimer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    background: conic-gradient(transparent 0deg, transparent 0deg, #ccc 0deg, #ccc 360deg);
    border: none;
    outline: none;
}

/* MERCHANDISE PAGE */
.MerchGlobalDescription {
    margin-top: 5px;
    margin-left: 2px;
}
.MerchandiseSlider {
    display: flex;
    align-items: center;
}
.MerchandiseViewPort {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.MerchandiseTrack {
    display: flex;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.FeaturedMerchandiseBox {
    flex: 0 0 calc(25% - 16px);
    box-sizing: border-box;
    margin: 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.BackArrow, .ForwardArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    cursor: pointer;
    font-size: 2rem;
    user-select: none;
    width: 35px;
    height: 35px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1);
}

#FeaturedCategories .BackArrow, 
#FeaturedCategories .ForwardArrow {
    top: 150px;
}

.BackArrow:hover, .ForwardArrow:hover {
    transform: translateY(-50%) scale(1.19);
    box-shadow: 0 4px 18px rgba(0,0,0,0.16);
}
.BackArrow {
    left: 10px;
}
.ForwardArrow {
    right: 10px;
}
.MerchandiseImgWrapper img,
.MerchandiseContentWrapper img{
    transition: transform 0.4s ease-in-out;
    
    width: 100%;
    height: 100%;
    display: block;
}
.MerchandiseImgWrapper img:hover,
.MerchandiseContentWrapper img:hover{
    transform: scale(1.15);
}

.MerchandiseImgWrapper{
    box-sizing: border-box;
    padding:20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.MerchandiseContentWrapper {
    max-height: 500px;
    width: 180px;   /* width of the "+ Cart" button, plus padding. */
    box-sizing: border-box;
    padding:20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.MerchandiseItem.MerchandiseTextWrapper {
    font-size: 1rem;
    margin-top: 20px;
}

.MerchandiseItemName {
    font-weight: 500;
}

.Category.MerchandiseTextWrapper {
    text-align: center;
    font-size: 1rem;
    margin-top: 20px;
    font-weight: 500;
}


.MerchandiseContentWrapper {
    display: flex; 
    flex-direction: column;
}

.MerchandiseButtons {
    margin-top: 20px;
    text-align: center;
}

.MerchandiseButtons .MerchandiseItemSubmitBtn,
.MerchandiseButtons .MerchSoldOutBtn {
    background-color: black;
    border-radius: 20px;
    width: 140px;
    box-sizing: border-box;
    padding: 4px !Important;
    font-weight: 400;
    justify-content: center;
}

.MerchandiseItemSubmitBtn:hover {
    opacity: 0.6;
}

.MerchandiseButtons .hide,
.BackArrow.hide, .ForwardArrow.hide,
.SliderProgressBarWrapper.hide
{
    display: none;
}

.PlusMinusCounterWrapper {
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:1.2rem;
    gap: 10px;
}

.MerchAllCategories {
    display: grid;
    align-items: start;
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16px;
    row-gap: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.MerchCategoryBox {
    cursor: pointer;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.MerchCategoryBox:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--secondary-radius);
}

.FeaturedItems.MerchandiseTrackWrapper,
.MerchAllCategoriesWrapper {
    margin-top: 55px;
}

.AddToCartBtn.loading {
    background: #ccc !important;
    color: #888 !important;
    pointer-events: none;
    position: relative;
}
.AddToCartBtn .spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
.AddToCartBtn.loading .btn-text {
    opacity: 0.5;
}
.AddToCartBtn.loading .spinner {
    display: inline-block;
}

.ItemPlusContainer, .ItemMinusContainer {
    cursor: pointer;
}
button.ItemPlusContainer, button.ItemMinusContainer {
    background: none;
    border: none;
    line-height: inherit;
    padding: 0;
}
.ItemPlusContainer:hover, .ItemMinusContainer:hover {
    opacity: 0.6;
}

.disablePlusMinus {
    cursor: not-allowed;
    opacity: 0.25;
}
.ItemPlusContainer.disabled,
.MerchandiseButtons .MerchSoldOutBtn{
	pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}
@media (min-width: 500px) and (max-width: 700px) {
    .MerchAllCategories {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 25px;
    }
}
@media (max-width: 500px) {
    .MerchAllCategories {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
}

/* Ticket Select Page */
.TicketWrapper {
    color: var(--black-color);
    min-height: 78px;
}
.TicketWrapper.DoNotShow {
    color: var(--secondary-color);
}
.TicketWrapper.SoldOut {
    color: var(--danger);
}

.TicketContainer {
    padding-bottom: 10px;
}

.DisabledTicket { color: #999; }
.DisabledTicket .TicketNotes,
.DisabledTicket .SmallPriceText { color: #999 !important; }

.AdvancedPurchasePrice { color: #999; font-size: 14px; font-weight: normal; text-decoration: line-through; }

.TicketNameWrapper {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 5px;
}

.TicketNameLabel {
    font-size: 13px;
    color: var(--brand);
}

.PayWhatYouCanWrapper {
    position: relative;
}

input.PayWhatYouCanInput {
    text-align: center;
    margin: 0;
}

input.PayWhatYouCanInput + label {
    position: absolute;
    top: 100%;                 /* place right below input */
    left: 50%;                 /* start horizontally centered */
    transform: translateX(-50%); /* perfectly center */
    margin-top: 4px;           /* small spacing */
    text-align: center;
    pointer-events: none;      /* so it doesn’t block input clicks */
    white-space: nowrap;
    
    font-family: var(--primary-font-family);
    font-size: 13px;
    color: var(--secondary-color);
}

.input-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: #e53935;           /* red background */
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;     /* smooth slide/opacity */
}

.input-tooltip.show {
    transform: translateX(-50%) translateY(-120%);
    opacity: 1;
}

.DepositDropdown {
    max-width: 200px;
    margin-bottom: 0 !important;
}

/* OVERLAY */
.OverlayWrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	backdrop-filter: blur(10px);
	overflow: auto;
}

.OverlayOuter {
    position: relative;
    top: 0;
    left: 0;
    width: 1000px;
    height: 400px;
    margin: 20px auto;
    border: 1px solid blue;
    box-sizing: border-box;
}

.OverlayContent {
    height: 2000px !important;
    min-height: calc(100% - 30px);
    width: 100%;
    background-color: white;
    border: 1px solid black;
    box-sizing: border-box;
}

.OverlayClose {
    height: 30px;
    color: red;
    cursor: pointer;
    background-color: white;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

/* Desktop/tablet layout */
.RightModal {
    position: fixed;
    margin: 0;
    width: 400px;
    right: 100px;     /* equivalent to left = w - (400 + 100) */
	padding-bottom: 15px;
}

#UikitModal .uk-modal-dialog {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px);    /* The -100px comes from the padding of .uk-modal-dialog. The modal will not 
        be centered vertically if this is changed. */
}
#UikitModal .uk-modal-dialog > .uk-modal-header {
    flex: 0 0 auto;
}
#UikitModal #UikitModalInfo {
    /* This prevents the modal dialog from containing a scrollbar. CartSummaryContainer should have the scrollbar. */
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Any Cart UikitModal must have the height of its parent. */ 
#UikitModal .uk-modal-dialog:has(.CartSummaryContainer) {
    height: 100%;
}

.overlay-close:has(+ .RightModal) {
    right: calc(100px - 32px - 10px) !important;  /* Set the button to be just right of the overlay.*/
    left: auto;
}

#UikitModalInfo:has(.CartSummaryContainer) {
    overflow: hidden;
}

.CartSummaryContainer.cart-summary-custom {
    min-height: 100px;
    height: calc(100vh - 220px);  /* hh2 */
}

.RightModal > .uk-modal-body { padding: 0 0 0 5px; }

/* The RightModal snaps to the center of the screen from 576px - 900px width. */
@media (min-width: 576px) and (max-width: 900px) {
    .RightModal {
        right: unset;
        top: unset;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) !important;
    }
}

/* Small screens: fall back to framework defaults */
@media (max-width: 575px) {
    .RightModal {
        position: static;
        width: auto;
        height: auto;
    }
    .RightModal .CartCheckoutFooter {
        padding-bottom: 10px;
    }
    .CartSummaryContainer.cart-summary-custom {
        height: auto;
    }
    /* Modal goes full screen at width 575px and below. */
    #UikitModal .uk-modal-dialog:has(.CartSummaryContainer),
    .uk-modal .uk-modal-dialog:has(.OptionsContent) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        padding-bottom: 0;
    }
}

/* Fix scrolling on mobile view */
@media (max-width: 900px) {
    .overlay-content {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    html, body {
        height: auto;
        overflow: auto;
    }

    .TicketShopWrapper {
        height: auto;
        overflow: visible;
    }
}

/* EVENTS HEADING + PAST/UPCOMING TOGGLE */
.EventsHeadingRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.EventsHeadingRow h2 {
	margin: 0;
}
.EventTypeToggle {
	display: flex;
	gap: 4px;
}
.EventTypeBtn {
	padding: 6px 14px;
	border: 1px solid var(--border-color-light);
	border-radius: var(--secondary-radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 0.875rem;
	transition: background 0.15s, color 0.15s;
}
.EventTypeBtn:hover {
	background: var(--border-color-light);
}
.EventTypeBtn.active {
	background: var(--primary-color, #333);
	color: #fff;
	border-color: var(--primary-color, #333);
}
.EventTypeBtn:focus-visible {
	outline: 2px solid var(--primary-color, #333);
	outline-offset: 2px;
}
@media (max-width: 640px) {
	.EventsHeadingRow {
		flex-direction: column;
		align-items: flex-start;
	}
	.EventsHeadingRow:has(.EventTypeToggle) h2 {
		display: none;
	}
}

/* EVENT LIST PAGE */
.EventWrapper {
	position: relative;
	margin-bottom: 7px;
	cursor: pointer;
}
.EventWrapper a {
	color: #333;
	text-decoration: none;
}
.EventBox {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: 100%;
	border: 1px solid var(--border-color-light);
	border-radius: var(--secondary-radius);
	box-shadow: 0 0 0 0 transparent,0 0 0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
	transition: box-shadow .2s ease-in-out;
}
.EventBox:hover {
	box-shadow: 0 0 0 0 transparent,0 0 0 0 transparent,0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}

.EventBox .PriceRange {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 3px 6px 3px 6px;
	background: #fff;
	border-radius: var(--secondary-radius);
	box-shadow: 0 0 6px rgba(0,0,0,0.2);
	font-size: 14px;
	font-weight: 500;
	color: #404040;
}
.EventVenue {
	padding: 0 0 0 0;
}
.EventVenue > .EventVenueName {
	font-family: var(--primary-font-family);
	font-size: 14px;
	font-weight: 400;
	color: var(--primary-color);
}

.EventPictureWrapper {
	overflow: hidden;
	height: 150px;
	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.EventPicture {
	object-fit: cover;
    object-position: center center;
	width: 100%;
	min-height: 150px;
}

.EventInfoWrapper {
	padding: 15px;
	height: 95px;
	max-height: 95px;
	box-sizing: border-box;
	background-color: #fff;
}


/* EVENT INFO PAGE */
.EventInfoDate {
	font-family: var(--primary-font-family);
	font-size: 12px;
	font-weight: 300;
}
.EventInfoName {
	font-family: var(--primary-font-family);
	font-size: 18px;
	font-weight: 500;
}
.EventDescription {
	font-family: var(--primary-font-family);
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5em;
}
.EventVenueInfo {
	padding: 15px;
	font-family: var(--primary-font-family);
	color: var(--primary-color);
	font-size: 17px;
	border-bottom: 1px solid var(--border-color-light);
}
.EventVenueInfo .EventVenueName {
	color: var(--black-color);
	font-weight: 500;
}
.EventVenueInfo .EventVenueAddress {
	color: var(--secondary-color);
	font-weight: 400;
}
.GoogleMapWrapper {
	width: 100%; 
	aspect-ratio: 16/5;
}
.GoogleMap {
	width: 100%;
	height: 100%;
	border: none;
}
.SectionWrapper {
	overflow: hidden;
	padding: 15px;
	border-radius: var(--secondary-radius);
	border: 1px solid var(--border-color);
	margin: 0 0 15px 0;
	background-color: var(--surface);
}
.EventGrid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	margin-top: 18px;
}
.EventGrid .CrossListingHeader,
.EventGrid .CrossListingWrapper {
	grid-column: 1;
}
.EventCard {
	position: sticky;
	top: 88px;
	align-self: start;
	background: var(--surface);
	border-radius: var(--primary-radius);
	box-shadow: var(--shadow);
	border: 1px solid rgba(50,50,50,0.1);
	overflow: hidden;
}
.EventCardCalendar {
	display: block;
	overflow: hidden;
	padding: 0 0 0 0;
	border-bottom: 1px solid var(--border-color-light);
}
.EventCardMobileOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(0,0,0,0.5);
}
.EventCardMobile {
    display: none; /* default hidden on desktop */
	transform: translate(-50%, 100%);
} 
.EventCardMobileClose {
	overflow: hidden;
	margin: 0 -15px 0px -15px;
	padding: 2px 0 0 0;
	height: 35px;
	color: var(--black-color);
	background-color: white;
	box-sizing: border-box;
	border-bottom: 1px solid var(--border-color-light);
}
.EventCardMobileHeader {
	float: left;
	margin: -6px 0 0 0;
	padding: 0 0 0 15px;
	font-size: 18px;
	box-sizing: border-box;
}
.EventCardMobileCloseButton {
	float: right;
	margin: -20px 0 0 0;
	padding: 15px;
	font-size: 18px;
	cursor: pointer;
}
button.EventCardMobileCloseButton {
    background: none;
    border: none;
    color: inherit;
    line-height: inherit;
}
button.EventCardMobileCloseButton:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -10px;
}
.PrevMonthWrapper {
	padding: 0 0 0 5px;
	font-size: 20px;
	color: var(--primary-color);
}
.NextMonthWrapper {
	padding: 0 5px 0 0;
	font-size: 20px;
	color: var(--primary-color);
}
.EventCard .EventCardBody {
	padding: 15px;
	display: grid;
	gap: 12px;
	border-bottom: 1px solid var(--border-color-light);
	background-color: rgba(0,0,0,0.025);
}
.EventMeta {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 12px;
	margin: 15px 0 15px 0;
	font-family: var(--primary-font-family);
}
.EventMeta .Cell {
	background: #f9f9f9;
	border: 1px solid var(--border-color-light);
	border-radius: var(--secondary-radius);
	padding: 15px
}
.EventMeta .Cell .Label {
	font-size: 14px;
	font-weight: 300;
}
.EventMeta .Cell .Value {
	font-size: 16px;
	font-weight: 500;
}
.SelectTicketButtonWrapper {
	padding: 15px;
}
.SelectTicketButtonWrapper button {
	display: block;
	padding: 10px 0 10px 0;
	width: 100%;
    line-height: inherit;
	text-decoration: none;
}
.TimeSlotSelect {
	width: 100%;
	padding: 8px 10px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	background-color: var(--surface);
	border: 1px solid var(--border-color-light);
	border-radius: var(--secondary-radius);
	appearance: auto;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
.TimeSlotSelect:focus {
	outline: none;
	border-color: var(--accent-color);
}
.TimeSlotError {
	margin-top: 6px;
	font-size: 0.82rem;
	color: var(--danger, #c0392b);
}
.SectionLabel {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--secondary-color);
}
.SectionLabel i {
	display: inline-block;
	margin: 0 5px 0 0;
	width: 20px;
	font-size: 16px;
	text-align: center;
}
.SectionValue {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
}
fieldset.SectionValue {
    border: none;
    margin: 0;
    padding: 0;
}
.EventOrgLogo {
	width: 100px;
	cursor: pointer;
}
.EventOrgLogo img {
	width: 100px;
	cursor: pointer;
}
.EventOrgInfo {
	padding: 15px 0 0 2px;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	color: var(--primary-color);
	font-size: 17px;
}
.DateSelectButtonWrapper {
	display: none;
}
#DateSelectButtonWrapper.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 97;
    padding: 20px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    text-align: center;
    display: none;     /* hidden until needed */
}
.ButtonDateSelect, .ButtonTicketSelect {
	padding: 15px;
	width: 100%;
}

/* PAYMENT PAGE */
.PaymentContainer {
	padding: 0 20px 0 0;
}
.PayMethodsWrapper {
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 1px solid var(--border-color-light);
	border-radius: var(--secondary-radius);
}
.PayMethod {  
	padding: 20px;	
	margin: 0 0 0 0; 
	border-bottom: 1px solid var(--border-color-light);
}
.PayMethod input {
	display: inline-block;
	margin: -3px 8px 0 0;
}
.PayMethod label {
	display: inline-block;
	margin: 0 0 0 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
}
.PayMethod.Active {
	border-left: 1px solid var(--primary-color);
	border-right: 1px solid var(--primary-color);
	border-top: 1px solid var(--primary-color);
}
.PayMethod.Active:first-child {
	border-radius: var(--secondary-radius) var(--secondary-radius) 0 0;
}
.PaymentFormWrapper {
	margin: 0 0 0 0;
	padding: 15px 15px 15px 15px;
	border-bottom: 1px solid var(--border-color-light);
}
.PaymentFormWrapper.Active {
	border-left: 1px solid var(--primary-color);
	border-right: 1px solid var(--primary-color);
	border-bottom: 1px solid var(--primary-color);
}
.PaymentFormWrapper.Active:last-child {
	border-radius: 0 0 var(--secondary-radius) var(--secondary-radius);
}
#StripeIframeContainer { min-height: 42px; }
.PaymentButtonWrapper {
	margin: 0 0 0 0;
	padding: 15px 0 15px 0;
	text-align: right;
}
.PaymentButton {
	padding: 15px 20px;
	width: 100%;
}

.PaymentBranded .CartSummaryWrapper,
.AddOnBranded .CartSummaryWrapper {
	border-radius: var(--secondary-radius);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow);
}
.PayCreditAmount {
	padding: 10px 0 0 20px;
	font-size: 16px;
}

@media (max-width: 959px) {
    .PaymentContainer {
        padding: 0;
    }
}

/* CONFIRMATION PAGE */
.ThankYou { 
	padding: 15px; 
	margin: 0 0 15px 0; 
	color: var(--black-color); 
	font-size: 17px; 
	font-weight: 400; 
	background-color: #f4f4f4; 
	line-height: 1.3; 
	border-radius: var(--secondary-radius); 
}
.ThankYou h2 {
	margin: 0 0 15px 0;
	font-size: 30px;
	font-weight: 500;
	color: var(--black-color);
}
.ThankYou > div > p { 
	margin: 0 0 0 0; 
}
.ThankYouMessage {  
	color: var(--primary-color); 
	font-size: 17px; 
	line-height: 1.3;  
}
.OrderConfirmationInfo {
	margin: 0 0 10px 0;
}
.OrderConfirmationMsg { 
	padding: 0 0 10px 0; 
	font-size: 17px;
	font-weight: 400;
	color: var(--secondary-color); 
}
.OrderConfirmationText { 
	padding: 0 0 0 0; 
	color: var(--primary-color); 
	font-weight: 300; 
}

/* Content Toggler */
.ContentToggle {
    height: 30px;
    width: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;          /* hides sliding label */
    cursor: pointer;
    white-space: nowrap;

    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    color: #111;
    font-size: smaller;

    /* animations */
    transition: transform 160ms ease, box-shadow 160ms ease, width 200ms ease, padding 200ms ease;
    will-change: transform;
    padding: 0;
}
.ContentToggle:hover {
    padding-right: 3px;
}
/* Icon area stays centered */
.ContentToggle__icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
}
.ContentToggle__icon i {
    display: inline-block;                 /* required for transform */
    transition: transform 300ms ease;      /* tweak duration/easing to taste */
    transform: rotate(0deg);
}
/* When expanded, rotate 180 degrees clockwise */
.ContentToggle[aria-expanded="true"] .ContentToggle__icon i {
    transform: rotate(180deg);
}
/* Sliding text label */
.ContentToggle__text {
    white-space: nowrap;
    font-size: 13px;
    line-height: 1;

    display: none;
    opacity: 0;
    transform: translateX(-12px);
    transition: transform 280ms ease, opacity 240ms ease;
    pointer-events: none; /* prevents hover flicker */
}
.ContentToggle__text--left {
    padding-left: 3px;
}
.ContentToggle__text--right {
    padding-right: 3px;
}
/* Hover: slight grow + expand width + reveal text */
.ContentToggle:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);

    width: max-content;
    justify-content: flex-start;
}
.ContentToggle--leftText:hover {
    padding-left: 6px;
}
.ContentToggle--rightText:hover {
    padding-right: 6px;
}
.ContentToggle:hover .ContentToggle__text {
    opacity: 1;
    display: block;
    transform: translateX(0);
}
/* Keyboard focus */
.ContentToggle:focus-visible {
    outline: 2px solid rgba(0,0,0,.35);
    outline-offset: 2px;
}

/* FONTAWESOME */
.Spinner16 {
	font-size: 16px;
	color: var(--secondary-color);
	text-align: center;
}
.Spinner24 {
	font-size: 24px;
	color: var(--secondary-color);
	text-align: center;
}
.Spinner32 {
	font-size: 32px;
	color: var(--secondary-color);
	text-align: center;
}
.fa-spin {
	animation: fa-spin 2s linear infinite !important;
}
.fa-spin-slow {
	animation: fa-spin 4s linear infinite !important;
}
@keyframes fa-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* ADA Screen Reader Updates */
.VisuallyHidden:not(:focus):not(:active) {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.uk-modal-close-default {
	background: transparent;
	border: none;
	font-size: 24px;
}
.ModalSpinner {
	text-align: center;
	padding: 0px 0 15px 0;
	font-size: 32px;
	color: var(--secondary-color);
}
.OverlaySpinner {
	text-align: center;
	padding: 50px 0 50px 0;
	font-size: 48px;
	color: var(--secondary-color);
}

.TopNavMobileIcon.uk-button:focus-visible,
/*.uk-modal-close-default:focus-visible,*/
.CalCellContent:focus-visible,
.EventCalendarIcon:focus-visible,
.uk-slidenav-next:focus-visible,
.uk-slidenav-previous:focus-visible,
/*.ButtonSubmit:focus-visible,*/
.uk-accordion-title:focus-visible {
    outline: 2px auto #1e87f0;
    outline-offset: 2px;
}

[data-item-type="event"]:focus-visible,
.TileWrapper:focus-visible,
.MerchandiseTileWrapper:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--secondary-radius);
}

.WarningMessage {
    padding: 10px;
	margin-bottom: 20px;
	background-color: #fffad7;
    border: 1px solid #fccd0b;
    border-radius: var(--secondary-radius);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.01);
}


/* MEDIA QUERIES */
@media (max-width: 500px) {
	.TicketSelectContainer {
		margin-top: 75px !important;
	}
}

@media (max-width: 639px) {
	.TicketShop {
        margin: 0 -15px 20px 0;
	}
}

@media (max-width: 860px) {
	.EventGrid {
		grid-template-columns: 1fr;
	}
	.EventCard { display: none; }         /* hide desktop version */
	#EventCardMobileOverlay {
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .3s ease, visibility 0s .3s;
	}
	#EventCardMobile {
		all: unset;
		display: flex;
		flex-direction: column;
		visibility: hidden;
		position: fixed;
		top: 50%;
		left: 50%;
		width: calc(100% - 30px);
		max-width: 400px;
		max-height: 90vh;
		overflow: hidden;
		z-index: 10000;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 24px rgba(0,0,0,0.25);
		transform: translate(-50%, -40%);
		opacity: 0;
		padding: 15px 15px 0 15px;
		box-sizing: border-box;
		transition: transform .3s ease, opacity .3s ease, visibility 0s .3s;
	}
	#EventCardMobileOverlay.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .3s ease, visibility 0s 0s;
	}
	#EventCardMobile.is-open {
		visibility: visible;
		transform: translate(-50%, -50%);
		opacity: 1;
		transition: transform .3s ease, opacity .3s ease, visibility 0s 0s;
	}
	
	#DateSelectButtonWrapper {
		display: block;
		margin: 0 0 15px 0;
	}
	#DateSelectButtonWrapper.fixed-bottom {
		display: block;
		margin: 0 0 0 0;
	}
	#EventCardMobile .EventCardMobileClose {
		flex-shrink: 0;
	}
	#EventCardMobile .EventCardCalendar {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		margin: 0 -15px;
	}
	#EventCardMobile .EventDateDetailsMobile {
		/* flex-shrink: 0; */
		margin: 0 -15px;
	}
	#EventCardMobile .SelectTicketButtonWrapper {
		padding: 15px;
	}
}

@media (max-width: 1240px) {
	.overlay-close {
		top: 10px !important;
		left: calc(100% - 35px) !important;
		font-size: 24px;
		text-shadow: 0 1px 3px rgba(0,0,0,0.3);
	}
	.overlay-content:not(.RightModal) {
		margin: 0;
		height: 100vh;
		min-height: 100vh;
		border-radius: 0;
	}
	.TicketShopWrapper {
		width: calc(100% - 30px) !important;
	}
}

@media (max-width: 1340px) {
	.overlay-close {
		top: 110px;
  		left: calc(50vw + 580px);
		color: var(--black-color);
	}
}

@media (max-width: 2000px) {
	.seatmap-overlay-content {
		max-width: 100vw;
		margin: 0 auto;
		border-radius: 0;
		height: 100vh;
		max-height: 100vh;
		box-shadow: none;
	}
}

@media (max-width: 640px) {
    .Categories.FeaturedMerchandiseBox {
        min-width: 140px; /* A bit more compact on phones, optional */
    }
    .EventMeta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {
    #PageNavigationWrapper {
        margin-right: 15px !important;
    }
}