@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://c.ststat.net/content/sites/BaseTemplate/css/WebOverrides.css");

body {
    --heading-font-family: 'Cormorant Garamond';
    --body-font-family: 'Open Sans';
    --primary-link-color: #AB090D;
    --primary-link-color-hover: #8b0709;
    --body-background-color: #fff;
	--med-border-radius: 8px;
	--event-image-display: block;
	--t-breadcrumbs-background: #fff;
}

.t-decorative-title {
	display: flex;
	width: 100%;
	justify-content: center;
	.t-decoration {
		border: 1px solid var(--primary-link-color);
		display: inline-block;
		padding: 0 1.5em;
		.t-decorative-title-text {
			background: #fff;
			transform: scale(1.15);
			font-weight: 500;
			color: var(--primary-link-color);
			font-size: 14px;
			padding: 0 1em;
		}
	}
}
.v2-tour-header,
.g-masthead {
	text-align: center;
    .v2-tour-header-inner h2,
	.g-masthead-title {
		font-weight: 500;
		font-size: 40px;
		text-align: center;
	}
	.g-masthead-inner {
		justify-content: center;
	}
	.v2-tour-header-inner h1 {
		text-transform: initial;
	}
	.masthead-title-grid {
		justify-content: center;
		.g-masthead-subtitle {
			font-size: 0;
			time {
				font-size: 22px;
			}
		}
	}
}

.l-header {
	padding: 1rem;
	margin-bottom: 2rem;
    .g-container {
		display: flex;
		align-items: center;
		justify-content: center;
		@media (max-width: 600px) {
			justify-content: left;
		}
		position: relative;
        .support-centre {
            position: absolute;
            right: 0;
            max-width: 200px;
        }
        .g-logo {
            img {
                max-height: 65px;
            }
        }
    }
}
.v2-tour-banner {
    .g-ui-box {
        background: transparent;
        border: 0;
        .g-grid-col:has(.v2-tour-img-desktop-container) {
            display: none;
        }
        .x6 {
            min-width: 100%;
            max-width: 100%;
            width: 100%;
        }
        .v2-tour-header-inner {
            h1 {
                margin: 0;
                color: var(--heading-masthead-font-color);
            }
        }
        .v2-tour-header-inner__detail {
            display: none;
        }
    }
}
.g-ui-box:has(#eventCalendar) {
    border: 0;
}
#eventCalendar {
    .pv-event-calendar {
        .tour-calendar__navigation {
            display: none;
        }
        .pv-event-calendar-content {
            padding: 0;
			display: flex;
			gap: 1rem;
            .pv-calendar-day:nth-child(-n+7) .pv-calendar-day-date-day {
                display: none;
            }
            .pv-event-calendar-day {
				border: 2px solid var(--primary-link-color);
				margin: 0;
				border-radius: var(--med-border-radius);
                &.empty {
                    display: none;
                }
                .pv-calendar-day-date {
					&:has(time[datetime="2026-12-17"]) {
						background-image: linear-gradient(180deg, #FFFFFF00 50%, var(--primary-link-color) 100%), url(../images/calendar-image-thursday.png);
					}
					&:has(time[datetime="2026-12-18"]) {
						background-image: linear-gradient(180deg, #FFFFFF00 50%, var(--primary-link-color) 100%), url(../images/calendar-image-friday.png);
					}
					&:has(time[datetime="2026-12-19"]) {
						background-image: linear-gradient(180deg, #FFFFFF00 50%, var(--primary-link-color) 100%), url(../images/calendar-image-saturday.png);
					}
					&:has(time[datetime="2026-12-20"]) {
						background-image: linear-gradient(180deg, #FFFFFF00 50%, var(--primary-link-color) 100%), url(../images/calendar-image-sunday.png);
					}
					&:has(time[datetime="2026-12-21"]) {
						background-image: linear-gradient(180deg, #FFFFFF00 50%, var(--primary-link-color) 100%), url(../images/calendar-image-monday.png);
					}
					background-size: cover;
					height: 300px;
					width: 100%;
					display: flex;
					border-radius: var(--low-border-radius) var(--low-border-radius) 0 0;

					time {
						align-self: flex-end;
						display: flex;
						flex-wrap: wrap;	
						width: 100%;
						color: #fff;
						text-align: center;
						justify-content: center;
						gap: .5rem .25rem;
						
						.pv-calendar-day-date-day {
							display: block;
							order: 0;
							width: 100%;
							font-family: var(--heading-font-family);
							font-weight: 500;
							text-transform: uppercase;
						}
						.pv-calendar-day-date-date {
							order: 1;
							font-weight: 400;
							font-size: 16px;
						}
						.pv-calendar-day-date-month {
							display: block;
							text-transform: uppercase;
							order: 2;
							font-weight: 400;
							font-size: 16px;
						}
					}
                }
				.pv-calendar-day-list {
					display: grid;
					gap: .5rem;
					padding: .5rem;
					.pv-calendar-day-event {
						padding: 0;

						.disciplines-list {
							border: 2px solid var(--primary-link-color);
							background: #FFFCEE;
							text-align: center;
							padding: .5rem;
							border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);
							font-weight: 500;
							text-transform: uppercase;
						}

						a {
							padding: .5em;
							min-height: 45px;
							display: flex;
							align-items: center;
							justify-content: center;
							text-align: center;
							border-radius: var(--default-border-radius);
							text-transform: uppercase;
							font-size: 14px;
							font-weight: 500;
							border: 2px solid var(--primary-link-color);

							&[title*="London Arena"] {
								background: #fff;
								.pv-calendar-day-event-main {
									color: var(--primary-link-color);
								}
							}
							&[title*="Arena: Afternoon"] {
								background: #df7357;
								border-width: 2px 2px 0 2px;
								.pv-calendar-day-event-main {
									color: #fff;
								}
							}
							&[title*="Arena: Evening"] {
								background: var(--primary-link-color);
								border-width: 2px 2px 0 2px;
								.pv-calendar-day-event-main {
									color: #fff;
								}
							}
							&:has(+ .disciplines-list) {
								border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;
							}
							
							&:hover {
								background: var(--primary-link-color-hover);
								
								&[title*="London Arena"] {
									.pv-calendar-day-event-main {
										color: #fff;
									}
								}
							}

							.pv-calendar-day-event-subtext{
								display: none;
							}
						}
					}
					.calendar-title {
						color: #fff;
						font-family: var(--heading-font-family);
						font-size: 22px;
						margin-top: .75rem;
					}
					.calendar-title.london-arena {
						grid-area: london-title;
					}
					.calendar-title.international-arena {
						grid-area: international-title;
					}
				}
				@media screen and (max-width: 48.75rem) {
					padding: 0;
					display: initial;
	                .pv-calendar-day-date {
						float: initial;
						margin: 0;
					}
					.pv-calendar-day-list {
                    	.pv-calendar-day-event {
                        	a {
								margin: 0;
							}
						}
					}
				}
            }
        }
    }
}
.g-tour-narratives {
	border: 0;
	padding-top: 0;
	.g-ui-box-title {
		display: none;
	}
}
#tabs #pricesTab.tab.active {
	display: grid;
	.pv-event-offer-code {
		order: 0;
	}
	#prices {
		order: 1;
	}
	.pv-shared-link-order {
		order: 2;
	}

	.v2-price-row h4 {
		font-family: var(--body-font-family);
	}
}
.g-event-narratives {
	display: none;
}
.seat-picker-key {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    .key-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        @media (max-width: 650px) {
            flex-direction: column;
            align-items: start;
            margin-bottom: 1rem;
        }
        .key-chip {
            color: #fff;
            background: var(--primary-link-color);
            min-width: 200px;
            border-radius: 25px;
            padding: .25rem .5rem;
            font-size: 12px;
            text-align: center;
        }
        &#hosp {
            .key-chip {
                background: #d1232a;
            }
        }
        &#phoenix {
            .key-chip {
                background: #253f8e;
            }
        }
        &#top {
            .key-chip {
                background: #40ae49;
            }
        }
        &#second {
            .key-chip {
                background: #fff101;
                color: #000;
            }
        }
        &#third {
            .key-chip {
                background: #cc813e;
            }
        }
        &#fourth {
            .key-chip {
                background: #d1232a;
            }
        }
        &#limited {
            .key-chip {
                background: #231f20;
            }
        }
    }
    .key-text {
        font-size: 12px;
    }

}
.seats-pick-or-best {
    a {
        background: var(--primary-link-color);
        padding: .35rem .7rem;
        border-radius: var(--default-border-radius);
        color: #fff;
        text-decoration: none;
        margin-left: .25rem;
        &:hover {
            background: var(--primary-link-color-hover);
        }
    }
}
.select-opn {
	display: none;
}
#seat-picker {
	.legend-container {
		display: none;

		.legend {
			max-height: initial;
			/* display: grid;
			grid-template-columns: max-content min-content min-content;
			align-items: center;
			gap: .25rem .5rem;
			.price {
			margin: 0;
			} */
			.st-offer-desc {
				/* margin: 0!important; */
				font-family: var(--body-font-family);
				font-size: 14px;
			}
		}
	}
}
.t-logo-footer {
	background: var(--primary-link-color);
	padding: 4rem 1rem 10rem 1rem;

	img {
		max-width: 250px;
		margin: auto;
	}
}
.eventinfo {
	.g-driver-link svg {
		margin-right: .5rem;
	}
}
.blur-image-card:has(img[title="Merchandise"]),
.blur-image-card:has(img[title*="Season Tickets"]) {
	display: none;

	& + .eventinfo .g-seating-plan-container {
		display: none;
	}
}