/* --------- Core Blaze Styles --------- */
.blaze-slider {
	/*
		If you want a Default then this setting overides the JavaScript.
		This will affect ALL Sliders using this stylesheet.
		
		--slides-to-show: 1;
	*/
	--slide-gap: 20px;
	direction: ltr
}

.blaze-container {
	position: relative
}

.blaze-track-container {
	overflow: hidden
}

.blaze-track {
	will-change: transform;
	touch-action: pan-y;
	display: flex;
	gap: var(--slide-gap);
	--slide-width: calc((100% - (var(--slides-to-show) - 1) * var(--slide-gap)) / var(--slides-to-show));
	box-sizing:border-box
}
.blaze-track > * {
	box-sizing: border-box;
	width: var(--slide-width);
	flex-shrink: 0
}

/* -------- Blaze Slider (cont) ---------*/
/* ----------- Custom Styling -----------*/
#Itinerary .blaze-slider {
	--slides-to-show: 1.5;
}

#Itinerary .blaze-container {
	margin-top: 1rem;
}

#Itinerary .blaze-track-container {
	overflow: visible;
}

#Itinerary .blaze-track > * {
	transition: width 300ms ease;
	cursor: grab;
}

#Itinerary .blaze-track > *:active {
	cursor: grabbing;
}

#Itinerary .blaze-track img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: .5rem;
}

#Itinerary .blaze-arrows {
	display: flex;
	align-items: center;
	margin: 1rem 0;
}

#Itinerary .blaze-prev, #Itinerary .blaze-next {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3rem;
	aspect-ratio: 1 / 1;
	margin: 0 .5rem;
	color: var(--brand-black);
	background-color: transparent;
	border-width: 1px;
	border-style: solid;
	border-color: var(--brand-black);
	border-radius: 100%;
	transition: color .125s linear, background-color .125s linear, border-color .125s linear;
}

#Itinerary .blaze-slider.start .blaze-prev, #Itinerary .blaze-slider.end .blaze-next {
	color: var(--brand-primary-200);
	background-color: transparent;
	border-color: var(--brand-primary-200);
	cursor: default;
}

#Itinerary .blaze-slider:not(.start) .blaze-prev:active, #Itinerary .blaze-slider:not(.end) .blaze-next:active {
	color: var(--brand-black);
	background-color: var(--brand-primary-200);
	border-color: var(--brand-primary-200);
	transform: scale(0.95);
}

#Itinerary .blaze-slider:not(.start) .blaze-prev:hover, #Itinerary .blaze-slider:not(.end) .blaze-next:hover {
	background-color: var(--brand-primary);
	border-color: var(--brand-primary);
}

@media (min-width: 992px) {
	#Itinerary .blaze-slider {
		padding-bottom: 3.75rem;
	}
}

@media (max-width: 992px) {
	/* --------- Core Blaze Styles --------- */
	#Itinerary .blaze-slider {
		--slides-to-show: 1.05;
		padding-bottom: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* --------------- Summary --------------*/
#Itinerary #Itinerary_Top #Banner {
	aspect-ratio: 16 / 9;
}

#Itinerary #Itinerary_Top #Banner img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

#Itinerary #Itinerary_Bottom {
	background: linear-gradient(180deg, var(--brand-secondary) 40rem, transparent 40rem);
}

#Itinerary #Itinerary_Summary #Favourite img {
	height: 3rem;
	aspect-ratio: 1;
	border-radius: 50%;
}

#Itinerary #Itinerary_Summary #Favourite p.lead > span {
	color: var(--brand-primary);
}

#Itinerary #Itinerary_Content h5, #Itinerary #Itinerary_Content h6 > span {
	color: var(--brand-primary);
}

#Itinerary #Itinerary_Content h5 + p, #Itinerary #Itinerary_Content h6 + p, #Itinerary #Itinerary_Content h5 + small, #Itinerary #Itinerary_Content h6 + small {
	margin-top: unset;
}

#Itinerary #Itinerary_Content p {
	margin-bottom: 1.875rem;
}

/* ------------ Availability ------------*/
#Itinerary #Itinerary_Availability p {
	font-size: 1.25rem;
}

#Itinerary #Itinerary_Availability p > span {
	color: var(--brand-primary);
	font-weight: bold;
	font-size: 1.25rem;
}

#Itinerary #Itinerary_Availability button {
	min-width: 6rem;
}

#Itinerary #Itinerary_Availability #Dates #expand-icon {
	position: relative;
	top: -1px;
	width: 12px;
	height: 12px;
}

#Itinerary #Itinerary_Availability #Dates #expand-icon::before, #Itinerary #Itinerary_Availability #Dates #expand-icon::after {
	content: "";
	position: absolute;
	background-color: var(--brand-black);
	transition: transform .25s ease-out;
}

#Itinerary #Itinerary_Availability #Dates #expand-icon::before {
	top: 0%; left: 50%;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}

#Itinerary #Itinerary_Availability #Dates #expand-icon::after {
	top: 50%; left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}

#Itinerary #Itinerary_Availability #Dates.show #expand-icon::before {
	transform: translateX(-50%) rotate(90deg);
}

#Itinerary #Itinerary_Availability #Dates.show #expand-icon::after {
	transform: translateY(-50%) rotate(180deg);
}

#Itinerary #Itinerary_Availability #Dates #Dates_Menu {
	max-height: 0rem;
	overflow: overlay;
	transition: max-height .25s ease-out;
}

#Itinerary #Itinerary_Availability #Dates.show #Dates_Menu {
	max-height: calc(15rem - 6px);
}

#Itinerary #Itinerary_Availability #Dates #Dates_Menu > div {
	background-color: var(--brand-white);
	transition: background-color .125s ease-in-out;
	cursor: pointer;
}

#Itinerary #Itinerary_Availability #Dates #Dates_Menu > div:nth-of-type(even) {
	background-color: var(--brand-grey-200);
}

#Itinerary #Itinerary_Availability #Dates #Dates_Menu > div:hover {
	background-color: var(--brand-primary-300);
}

#Itinerary #Itinerary_Availability #Dates #Dates_Menu > div[data-active="true"] {
	background-color: var(--brand-primary-200);
}

#SeatPlan_Plan {
    display: flex;
    justify-content: center;
    gap: 4px;
}
  
.SeatPlan_Row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
  
.SeatPlan_Seat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: .25rem;
}

.SeatPlan_Seat[data-seat-type="0"] {
    pointer-events: none;
}

.SeatPlan_Seat[data-seat-type="1"] {
    background-color: transparent;
    border: 1px solid var(--brand-primary);
    cursor: pointer;
    pointer-events: auto;
}

.SeatPlan_Seat[data-seat-type="1"]:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.SeatPlan_Seat.selected[data-seat-type="1"] {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.SeatPlan_Seat[data-seat-type="2"] {
    background-color: var(--brand-grey);
    border: 1px solid var(--brand-grey);
}

/* Related Tours */
#Featured_Tours .Tour {
	margin-bottom: 3.75rem;
}

#Featured_Tours .Tour > div {
	aspect-ratio: 1;
}

#Featured_Tours img {
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1;
}

#Featured_Tours .Sold-Out-Banner {
    position: absolute;
    left: 100%;
    transform: translate(-60%, 60%) rotate(45deg);
    width: 100%;
    padding: .5rem 1rem;
    text-align: center;
    color: var(--brand-white);
    background-color: #F3443B;
}

/* Footer */
#Itinerary #Brochure_CTA {
	border-radius: 0.625rem;
	padding: 5rem 1.5rem;
}

#Itinerary #Brochure_CTA h3 > span {
	color: var(--brand-primary);
}

#Itinerary #Brochure_CTA button {
	padding: .75rem 1.5rem;
    color: var(--brand-white);
    background-color: var(--brand-primary);
    border-radius: 2rem;
}

/* Media Queries */
@media (min-width: 992px) {
	#Itinerary #Itinerary_Summary {
		min-height: 30rem;
	}
	
	#Itinerary #Itinerary_Availability > div {
		/* position: sticky; */
		top: 1rem;
		background-color: var(--brand-white);
		border: 1px solid var(--brand-secondary-400);
	}

	#Itinerary #Itinerary_Availability #Itinerary_BookOnline > button {
		width: 100%;
	}
}

@media (max-width: 992px) {
	#Itinerary #Itinerary_Availability {
		position: relative;
		z-index: 2;
	}

	#Itinerary #Itinerary_Availability #Mobile_Wrapper {
		padding: 1rem;
	}

	#Itinerary #Itinerary_Availability #Itinerary_BookOnline {
		position: fixed;
		bottom: 0; left: 0;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 1rem;
		background-color: var(--brand-white);
		box-shadow: 0px 0px 2px rgba(var(--brand-black-rgb), 0.25);
		z-index: 2;
		transition: top .5s ease-in-out;
		cursor: pointer;
	}

	#Itinerary #Itinerary_Availability.show #Itinerary_BookOnline {
		top: calc(0% + 4.625rem);
	}

	#Itinerary #Itinerary_Availability #Itinerary_BookOnline > div {
		width: 100%;
	}

	#Itinerary #Itinerary_Availability #Itinerary_BookOnline > button {
		min-width: 8rem;
	}

    #Itinerary #Brochure_CTA {
        padding: 9.25rem 1.5rem;
    }

	footer {
		padding-bottom: 5rem;
	}
}