* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: unset;
}

:root {
	--txt: #231916;
	--yellow: #FFDA3E;
	--orange: #D8561D;
	--blue: #4C8FE0;
	
	--font-normal: "Poppins", sans-serif;
	--font-header: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-normal);
	font-size: 16px;
	line-height: 1.5;
	color: var(--txt);
	background: #fff;
}

.fit {
	padding: 0 70px;
}

a {
	color: var(--txt);
	text-decoration: none;
	transition: all 0.25s ease;
}


h1 {					
	position: relative;
	display: inline-block;
		
	font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
	color: var(--txt);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.2;
}

h2 {
	position: relative;
	display: inline-block;
	
	font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
	color: var(--txt);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

h3 {
	position: relative;
	display: inline-block;
	
	font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
	color: var(--txt);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

.hide-on-desktop {
	display: none;
}

a:hover {
	transition: all 0.25s ease;
}


a.button {
	position: relative;
	width: auto !important;
	z-index:1;
	
	font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
	display: inline-flex;
	gap: 15px;
	color: var(--orange);
	background: #fff;
	border: 2px solid var(--orange);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.6;
	font-weight: 500;
	border-radius: 0;
	font-size: 16px;
	box-sizing: border-box;
	min-height: 50px;
	padding: 0;
	text-transform: lowercase;
	transition: all 0.3s ease;
}

	a.button span:first-child {
		flex: 1 0 0;
		display: block;
		align-self: center;
		padding: 0 0 0px 15px;
		text-align: center;
		text-transform: lowercase;
	}
	
	a.button span:last-child {
		flex-grow: 0;
		margin-left: auto;
		display: block;
		height: 100%;
		min-height: 50px;
		aspect-ratio: 1 / 1;
		background-color: var(--orange);
		background-image: url(../img/icoArrowRight.svg);
		background-repeat: no-repeat;
		background-position: 55% 50%;
		background-size: 10px auto;
		
		position: relative;
		padding: 8px;
		box-sizing: border-box;
	}
	
	a.button:hover {
		background: var(--orange);
		color: #fff;
		transition: all 0.3s ease;
	}
	
	/* Niebieski przycisk */
	a.button.buttonBlue {
		color: var(--blue);
		border-color: var(--blue);
	}

	a.button.buttonBlue span:last-child {
		background-color: var(--blue);
	}

	a.button.buttonBlue:hover {
		background: var(--blue);
		color: #fff;
	}
	
	/* Żółty przycisk */
	a.button.buttonYellow {
		color: var(--txt);
		border-color: var(--yellow);
	}

	a.button.buttonYellow span:last-child {
		background-color: var(--yellow);
	}

	a.button.buttonYellow:hover {
		background: var(--yellow);
		color: #fff;
	}


@media screen and (min-width: 1001px) {
	header {
		width: 100%;
	}
	
		header a.header-mail-icon {
			display: none;
		}

		#header {
			display: flex;
			width: 100%;
			max-width: 100%;
			gap: 20px;
			align-items: center;
			padding: 20px 5% 40px 5%;
			box-sizing: border-box;
			position: relative;
			z-index: 5;
			transition: all 0.25s ease;
		}

		#header #logo {
			position: relative;
			flex-grow: 1;
			display: flex;
			gap: 20px;
			width: 30px;
		}

		#header #logo a.custom-logo-link,
		#header #logo a.custom-logo-link img {
			display: block;
			width: 35px;
			height: auto;
		}

		#header #logo .slogan {
			position: absolute;
			left: 0;
			bottom: -45px;
			font-size: 16px;
			font-weight: 500;
			line-height: 1.4;
			white-space: nowrap;
			opacity: 1;
			transition: all 0.2s ease;
		}

		#header #logo .slogan a {
			font-family: var(--font-header);
			color: #fff;
			text-decoration: none;
		}

		#header #showMenu {
			display: none;
		}

		#header #menu {
			flex-grow: 1;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;
			transition: all 0.3s ease;
		}

		#header #menu .menuInner {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			flex-direction: column;
			padding: 0;
			box-sizing: border-box;
		}

		#header #menu ul {
			width: 100%;
			padding: 0;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 3%;
			list-style: none;
		}

		#header #menu ul li {
			position: relative;
			display: flex;
			box-sizing: border-box;
		}

		#header #menu ul li.panel {
			order: 99;
		}

		#header #menu ul li a {
			font-family: var(--font-header);
			display: inline-block;
			font-size: 20px;
			color: var(--txt);
			font-weight: 500;
			white-space: nowrap;
			line-height: 1.4;
			padding: 8px 10px;
			box-sizing: border-box;
		}

		#header #menu ul li a:hover {
			color: var(--orange);
		}

		#header #menu ul li.panel a {
			position: relative;
			display: inline-block;
			width: 30px;
			height: 30px;
			background-image: url("../img/icoUser.svg");
			background-repeat: no-repeat;
			background-position: 0 50%;
			background-size: contain;
		}

		#header #menu ul li.panel a:after {
			content: "twoje konto";
			position: absolute;
			width: 50px;
			top: calc(100% + 5px);
			left: 50%;
			transform: translateX(-50%);
			font-size: 13px;
			white-space: normal;
			text-align: center;
			line-height: 1.1;
			transition: all 0.2s ease;
		}

		#header #menu ul li.panel a span {
			display: none;
		}

		#header #menu ul li.panel a:hover {
			filter: brightness(0) saturate(100%) invert(44%) sepia(18%) saturate(7446%) hue-rotate(352deg) brightness(89%) contrast(90%);
		}

		#header #menu ul li.menu-item-has-children > a {
			position: relative;
			display: flex;
			align-items: center;
			gap: 15px;
		}

		#header #menu ul li.menu-item-has-children > a:after {
			content: "";
			display: block;
			width: 10px;
			height: 15px;
			background-image: url("../img/icoArrowRight.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			transform: rotate(90deg);
			filter: brightness(0) saturate(100%) invert(5%) sepia(50%) saturate(505%) hue-rotate(327deg) brightness(99%) contrast(89%);
			transition: all 0.2s ease;
		}

		#header #menu ul li.menu-item-has-children > a:hover:after,
		#header #menu ul li.menu-item-has-children.on > a:after {
			transform: rotate(-90deg);
			transition: all 0.2s ease;
		}

		#header #menu ul.sub-menu {
			display: block;
			width: 160px;
			position: absolute;
			visibility: hidden;
			top: 100%;
			opacity: 0;
			transform: translateY(10%);
			z-index: 10;
			transition: all 0.3s ease;
		}

		#header #menu li.menu-item-has-children:hover ul.sub-menu {
			visibility: visible;
			opacity: 1;
			transform: translateY(0);
			transition: all 0.3s ease;
		}

		#header #menu ul.sub-menu li {
			display: block;
			border-bottom: 1px solid #fff;
			background: var(--blue);
		}

		#header #menu ul.sub-menu li a {
			font-weight: 400;
			font-size: 15px;
			color: #fff;
			padding: 10px 15px 10px 10px;
			line-height: 1.3;
			white-space: normal;
			text-align: left;
		}

		#header #menu ul.sub-menu li a:hover {
			padding: 10px 10px 10px 15px;
		}

		#header #menu .logo {
			display: none;
		}
		
}


@media screen and (max-width: 1000px) {
	#header {
		display: flex;
		width: 100%;
		gap: 20px;
		align-items: center;
		padding: 20px 24px;
		box-sizing: border-box;
		
		position: relative;
		z-index: 5;
		transition: all 0.2s ease;
	}
	
	header.header-subpage #header {
		background: rgba(255, 255, 255, 0.75);
		justify-content: space-between;
	}
	
	header.header-home.scrolled #header {
		background: rgba(255, 255, 255, 0.9);
		justify-content: space-between;
		transition: all 0.2s ease;
	}
	
		header.header-subpage #header a.header-mail-icon {
			display: flex;
			align-items: center;
		}
	
		#header #logo {
			flex-grow: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px;
		}
	
			#header #logo a.custom-logo-link,
			#header #logo a.custom-logo-link img {
				display: block;
				width: 35px;
				height: auto;
			}
	
			#header #logo .slogan {
				flex-grow: 1;
				font-size: 16px;
				font-weight: 500;
				line-height: 1.4;
				text-align: center;
			}

				#header #logo .slogan a {
					font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
					color: var(--txt);
					text-decoration: none;
				}
				
		#header #showMenu {
			margin-left: auto;
			
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			aspect-ratio: 1 / 1;
		}
		
		header.header-subpage #header #showMenu {
			margin: unset;
			aspect-ratio: 1 / 1;
			
			display: flex;
			align-items: center;
		}
		
			#header #showMenu span {
				display: inline-block;
				width: 5px;
				height: 5px;
				background: var(--txt);
				border-radius: 50%;
			}
		
		#header #menu {
			position: fixed;
			top: 0;
			right: 0;
			width: 80%;
			height: 100%;
			
			display: flex;
			box-sizing: border-box;
			background: var(--yellow);
			
			transform: translateX(105%);
			opacity: 0;
			transition: all 0.3s ease;
		}
		
		#header #menu.on {
			opacity: 1;
			transform: translateX(0%);
			transition: all 0.3s ease;
		}
			
			#header #menu #closeMenu {
				content: "";
				display: block;
				width: 50px;
				height: 50px;
				
				
				position: fixed;
				z-index: 5;
				top: 15%;
				right: 100%;
				transform: translateX(50%);
				border-radius: 50%;
				border: 5px solid var(--yellow);
				background-color: var(--yellow);
				background-image: url(../img/icoMenuArrow.svg);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: 50% 50%;
			}
			
			
			#header #menu .menuInner {
				display: flex;
				gap: 5vw;
				flex-direction: column;
				width: 100%;
				max-height: 100%;
				overflow: auto;
				padding: 10px 40px;
				box-sizing: border-box;
			}
			
			#header #menu ul {
				flex-grow: 1;
				width: 100%;
				padding: 70px 5% 0 5%;
				box-sizing: border-box;
				
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
				
				#header #menu ul li {
					display: block;
					width: 100%;
					margin-bottom: 15px;
					box-sizing: border-box;
				}
			
				#header #menu ul li.panel {
					margin-bottom: 40px;
				}
				
					#header #menu ul li a {
						font-family: "itc-avant-garde-gothic-pro", "Poppins", sans-serif;
						display: inline-block;
						font-size: 18px;
						color: var(--txt);
						font-weight: 500;
						line-height: 1.4;
					}
				
					#header #menu ul li.panel a {
						min-height: 35px;
						padding: 0 0 0 50px;
						background-image: url(../img/icoUser.svg);
						background-repeat: no-repeat;
						background-position: 0% 50%;
						background-size: 35px auto;
					}
				
				#header #menu ul li.menu-item-has-children > a {
					display: flex;
					align-items: center;
					gap: 20px;
				}
					
					#header #menu ul li.menu-item-has-children > a:after {
						content: "";
						display: block;
						width: 10px;
						height: 15px;
						
						background-image: url(../img/icoArrowRight.svg);
						background-size: contain;
						background-repeat: no-repeat;
						background-position: 50% 50%;
						transform: rotate(90deg);
						filter: brightness(0) saturate(100%) invert(5%) sepia(50%) saturate(505%) hue-rotate(327deg) brightness(99%) contrast(89%);
						transition: all 0.2s ease;
					}
					
					#header #menu ul li.menu-item-has-children.on > a:after {
						transform: rotate(-90deg);
						transition: all 0.2s ease;
					}
						
			#header #menu ul.sub-menu {
				padding: 0 0 0 0;
				max-height: 0;
				overflow: hidden;
				visibility: hidden;
				transition: all 0.3s ease;
			}
					
						
			#header #menu li.menu-item-has-children.on ul.sub-menu {
				padding: 10px 0 0 0;
				max-height: 500px;
				visibility: visible;
				transition: all 0.3s ease;
			}
					
						
				#header #menu ul.sub-menu li {
					margin-bottom: 5px;
				}
						
					#header #menu ul.sub-menu li a {
						font-weight: 400;
						font-size: 16px;
					}
						
					
			#header #menu .socials {
				display: flex;
				gap: 15px;
				justify-content: center;
				margin-top: 50px;
			}
			
				#header #menu .socials a,
				#header #menu .socials a img {
					display: block;
					width: 30px;
					height: auto;
				}

			#header #menu .logo {
				text-align: center;
				margin-top: auto;
			}
			
				#header #menu .logo img {
					display: inline-block;
					width: 85px;
					height: auto;
				}
				
	#headerBottom {
		display: flex;
		justify-content: space-between;
		padding: 15px 24px;
		box-sizing: border-box;
		color: #fff;
		transition: all 0.3s ease;
	}
	
	.single-wyjazdy #headerBottom {
		display: none;
	}
	
	header.scrolled	#headerBottom {
		height: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-100%);
		transition: all 0.3s ease;
	}
	
		#headerBottom .thirdLogo img {
			width: 110px;
			height: auto;
		}
		
		#headerBottom .slogan {
			width: 150px;
			text-align: right;
			font-size: 16px;
			line-height: 1.4;
		}
		
			#headerBottom .slogan a {
				color: #fff;
				text-decoration: none;
			}
}


main {
	width: 100%;
	max-width: 950px;
	padding: 0 3%;
	box-sizing: border-box;
	margin: 0 auto;
}

nav#main {
	width: 100%;
	margin: 50px auto 80px auto;
	padding: 0 3%;
	box-sizing: border-box;
	
	display: flex;
	justify-content: space-between;
}

	nav#main a {
		display: block;
		width: 65px;
		height: 65px;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 50%;
	}
		nav#main a img {
			display: block;
			width: 35px;
			height: 35px;		
			transition: all 0.25s ease;
		}

	nav#main a.active {
		background: var(--yellow);
	}
		
	nav#main a:not(.active):hover {
		background: var(--blue);
	}

		nav#main a:not(.active):hover img {
			filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(2%) hue-rotate(311deg) brightness(107%) contrast(101%);
			transition: all 0.25s ease;
		}

.mainContent {
	padding: 0 0 80px;
}

/* PODSTRONA TWOJE KONTO */


	.accountPage {
		width: 100%;
		max-width: 540px;
		display: flex;
		flex-direction: column;
		gap: 56px;
	}

	.accountSection {
		display: flex;
		flex-direction: column;
		gap: 50px;
		}

		.accountSectionTitle {
			display: inline-flex;
			align-items: center;
			align-self: flex-start;
		}

			.accountSectionTitle h1 {
				padding: 0 8px 8px 4px;
				border-bottom: 1px solid var(--yellow);
			}

	.accountSectionTitleMain {
		padding-left: 0;
	}

	.accountSectionTitle h1,
	.accountSectionTitle h2 {
		font-size: 36px;
		font-weight: 500;
		line-height: 1.2;
		
		padding: 0 8px 8px 4px;
		border-bottom: 1px solid var(--yellow);
	}

	.accountSectionTitle h4 {
		font-family: var(--font-header);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.2;
		
		padding: 0 8px 8px 4px;
		border-bottom: 1px solid var(--yellow);
	}

	.accountProfile {
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-template-columns: 80px 1fr; 
		grid-template-rows: auto auto; 
		gap: 10px 20px; 
		grid-template-areas: 
		"avatar name"
		"sign .";
	}

		.accountAvatar {
			grid-area: avatar;
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;
			justify-content: center;
			font-family: var(--font-header);
			font-size: 14px;
			font-weight: 300;
			line-height: 1;
		}


		.accountProfileInfo {
			grid-area: name;
			align-self: center;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

			.accountProfileInfo h3 {
				font-family: var(--font-header);
				font-size: 22px;
				font-weight: 500;
				line-height: 1.2;
			}
			
			.accountProfileInfo h4 {
				font-family: var(--font-header);
				font-size: 20px;
				font-weight: 500;
				line-height: 1.2;
			}

		.accountProfile .accountProfileSign {
			grid-area: sign;
			font-size: 12px;
			font-weight: 300;
			text-align: center;
			line-height: 1.4;
		}

	.accountDataList {
		list-style: none;
		display: grid;
		gap: 15px;
	}

		.accountDataList li {
			display: flex;
			align-items: center;
			gap: 20px;
			font-size: 16px;
			font-weight: 300;
			line-height: 1.4;
			word-break: break-word;
		}

		.accountIcon {
			width: 35px;
			min-width: 35px;
			height: 35px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}

		.accountIcon img {
			width: 23px;
			height: 23px;
			object-fit: contain;
		}

		.accountIconSvg svg {
			width: 24px;
			height: 24px;
			stroke: var(--blue);
			stroke-width: 1.8;
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

	.accountEditButton {
		align-self: flex-start;
		padding: 8px 12px;
		border: 1px solid var(--blue);
		background: #fff;
		color: var(--txt);
		font-family: var(--font-normal);
		font-size: 12px;
		font-weight: 300;
		line-height: 1.4;
		cursor: pointer;
		
		display: flex;
		align-items: center;
		gap: 10px;
	}

		.accountEditButton:hover {
			background: var(--blue);
			color: #fff;
		}
		
			.accountEditButton:hover svg path {
				fill: #fff;
			}

	.companionsList {
		list-style: none;
		display: grid;
		gap: 40px;
		margin: 20px 0;
	}

		.companionsList .accountProfile {
			    grid-template-columns: 45px 1fr;
		}
		
	@media (max-width: 768px) {
		.accountPage {
			gap: 42px;
		}

		.accountSectionTitle h1,
		.accountSectionTitle h2 {
			font-size: 30px;
		}

		.accountProfileInfo h3,
		.accountProfileInfo h4 {
			font-size: 20px;
		}

		.accountDataList li {
			gap: 14px;
		}
	}


/* PODSTRONA REZERWACJE */

.reservationsPage {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-bottom: 80px;
}

	.reservationsGroup {
		display: flex;
		flex-direction: column;
		gap: 50px;
	}

		.reservationsTitle {
			display: inline-flex;
			align-items: center;
		}

		.reservationsTitleMain {
			padding-left: 0;
		}

		.reservationsTitle h1 {
			font-size: 36px;
			font-weight: 500;
			line-height: 1.2;
			
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
			align-self: flex-start;
		}

		.reservationsTitle h4 {
			font-family: var(--font-header);
			font-weight: 500;
			line-height: 1.2;
			font-size: 20px;
			
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
			align-self: flex-start;
		}

		.reservationsGrid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 24px;
		}

		.reservationCard {
			display: flex;
			gap: 0;
			flex-direction: column;
			background: #fff;
		}

			.reservationImageWrap {
				aspect-ratio: 402 / 260;
				overflow: hidden;
			}

				.reservationImageWrap img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					display: block;
				}

			.reservationSummary {
				background: var(--yellow);
				padding: 16px 30px 16px;
				margin: 2px 0;
				display: grid; 
				grid-auto-columns: 1fr; 
				grid-template-columns: 220px 1fr; 
				grid-template-rows: auto auto; 
				gap: 15px 20px; 
				grid-template-areas: 
					"title reservTitle"
					"date reservVal"; 
			}

			.reservationSummaryTitle {
				grid-area: title;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap: 12px;
			}

				.reservationSummary h3 {
					font-family: var(--font-header);
					font-size: 18px;
					font-weight: 500;
					line-height: 1.2;
					max-width: 220px;
				}

			.reservationNumberTitle {
				grid-area: reservTitle;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 8px;
			}

				.reservationNumberTitle span {
					font-size: 12px;
					font-weight: 300;
					line-height: 1.4;
					text-align: right;
				}

			.reservationNumberVal {
				grid-area: reservVal;
				text-align: right;
				
				font-weight: 500;
				font-size: 20px;
			}


			.reservationDate {
				grid-area: date;
				display: inline-flex;
				align-items: center;
				gap: 10px;
				font-size: 12px;
				font-weight: 300;
				line-height: 1.4;
			}

				.reservationDate svg {
					width: 18px;
					height: 18px;
					stroke: var(--txt);
					fill: none;
					stroke-width: 1.8;
					stroke-linecap: round;
					stroke-linejoin: round;
				}

			.reservationFooter {
				display: grid;
				gap: 8px;
				padding: 8px 8px 6px 20px;
				background: #fff;
				border: 2px solid var(--yellow);
				
			}

				.reservationFooterUpcoming {
					grid-template-columns: minmax(0, 1fr) auto;
					align-items: stretch;
				}

				.reservationPriceMeta {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 6px;
				}

						.reservationPriceMeta p {
							font-size: 12px;
							font-weight: 300;
							line-height: 1.4;
						}

						.reservationPriceMeta strong {
							font-size: 16px;
							font-weight: 400;
						}

					.reservationPriceMeta small {
						font-size: 12px;
						font-weight: 300;
					}

				.reservationAction {
					border: 0;
					background: var(--yellow);
					border: 2px solid var(--yellow);
					font-size: 16px;
					font-weight: 300;
					line-height: 1.4;
					padding: 18px 10px;
					white-space: nowrap;
					cursor: pointer;
					transition: all 0.25s ease;
				}
				
					.reservationAction:hover {
						background: #fff;
						transition: all 0.25s ease;
					}

			.reservationCardFinished .reservationImageWrap img {
				opacity: 0.4;
			}

			.reservationFooterPaid {
				grid-template-columns: minmax(0, 1fr) 100px;
				align-items: center;
				padding: 10px 12px;
			}

				.reservationPaid {
					display: inline-flex;
					align-items: center;
					gap: 12px;
				}

				.reservationCheck {
					width: 30px;
					height: 30px;
					border: 2px solid var(--blue);
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}

				.reservationCheck svg {
					width: 18px;
					height: 18px;
					stroke: var(--blue);
					fill: none;
					stroke-width: 2.5;
					stroke-linecap: round;
					stroke-linejoin: round;
				}

				.reservationPaid p {
					font-size: 16px;
					font-weight: 300;
					line-height: 1.4;
				}

				.reservationPaid strong {
					font-weight: 500;
				}

				.reservationDetails {
					border: 1px solid var(--yellow);
					background: #fff;
					padding: 12px 16px;
					font-size: 12px;
					font-weight: 400;
					line-height: 1.4;
					text-align: center;
					cursor: pointer;
					transition: all 0.25s ease;
				}
				
					.reservationDetails:hover {
						background: var(--yellow);
						transition: all 0.25s ease;
					}

			.reservationOpinion {
				border: 0;
				border: 2px solid var(--yellow);
				border-top: 0;
				background: #fff;
				font-family: var(--font-header);
				font-size: 24px;
				font-weight: 500;
				letter-spacing: 0.05em;
				line-height: 1.2;
				padding: 18px 12px;
				cursor: pointer;
				transition: all 0.25s ease;
			}

				.reservationOpinion:hover {
					background: var(--yellow);
					transition: all 0.25s ease;
				}


/* PODSTRONA USTAWIENIA */

.settingsPage {
	width: 100%;
	max-width: 700px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

	.settingsTitle h1 {
		padding: 0 8px 8px 4px;
		border-bottom: 1px solid var(--yellow);
	}

	.settingsSection {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

		.settingsSectionTitle h4 {
			font-family: var(--font-header);
			font-size: 20px;
			font-weight: 500;
			line-height: 1.2;
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
			display: inline-flex;
		}

	.settingsList {
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

		.settingsList li {
			display: flex;
			align-items: center;
			gap: 20px;
			padding-bottom: 12px;
		}

	.settingsIcon {
		width: 35px;
		min-width: 35px;
		height: 35px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

		.settingsIcon img {
			width: 24px;
			height: 24px;
			object-fit: contain;
		}

	.settingsItemContent {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

		.settingsValue {
			font-size: 16px;
			font-weight: 300;
			line-height: 1.4;
		}

	.settingsChecks {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

		.settingsChecks {
			display: inline-flex;
			align-items: center;
			gap: 14px;
			font-size: 14px;
			font-weight: 300;
			line-height: 1.5;
			cursor: pointer;
		}


	.settingsSection .buttonSection {
		margin-top: 15px;
		text-align: center;
	}


/* PODSTRONA SKARBONKA */

.skarbonkaPage {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

	.skarbonkaContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 56px;
	}

	.skarbonkaTitle {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
	}

		.skarbonkaTitle h1 {
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
		}

	.skarbonkaTitleSub {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-start;
	}
	
		.skarbonkaTitleSub h4 {
			font-family: var(--font-header);
			font-size: 20px;
			font-weight: 500;
			line-height: 1.2;
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
		}

	.skarbonkaPigIconWrap img {
		width: 120px;
		height: 120px;
		display: block;
	}

	.skarbonkaDescription {
		width: min(100%, 773px);
		text-align: center;
		font-size: 16px;
		font-weight: 300;
		line-height: 1.4;
	}

		.skarbonkaDescription a {
			
		}

		.skarbonkaDescription a:hover {
			color: var(--blue);
		}

	.skarbonkaAgreement {
		display: inline-flex;
		align-items: center;
		gap: 20px;
		font-size: 16px;
		font-weight: 300;
		line-height: 1.4;
		cursor: pointer;
	}

		.skarbonkaAgreement input[type="checkbox"] {
			width: 25px;
			height: 25px;
			appearance: none;
			border: 2px solid var(--blue);
			background: #fff;
			position: relative;
			cursor: pointer;
		}

		.skarbonkaAgreement input[type="checkbox"]:checked::after {
			content: "";
			position: absolute;
			left: 7px;
			top: 2px;
			width: 5px;
			height: 12px;
			border-right: 2px solid var(--blue);
			border-bottom: 2px solid var(--blue);
			transform: rotate(45deg);
		}

	.skarbonkaPage .button {
		margin-top: 20px;
	}


/* PODSTRONA SKARBONKA 1 */

	.skarbonkaPageStats {
		gap: 24px;
	}

	.skarbonkaPageStats .skarbonkaMenu {
		width: 100%;
		height: 50px;
		border: 1px solid var(--blue);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20px 0 50px 0;
		gap: 12px;
		color: var(--blue);
		font-weight: 300;
		font-family: var(--font-header);
		font-size: 20px;
	}

	.skarbonkaStatsRow {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		margin-top: 40px;
	}
	
	.skarbonkaStatsSingleRow {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 40px;
	}

	.skarbonkaWalletCard {
		border: 2px solid var(--orange);
		padding: 20px 24px 20px;
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.walletHead {
	}
	
	.walletHeadBox {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		
		padding: 0 8px 8px 4px;
		border-bottom: 1px solid var(--orange);
	}

	.walletHead h4 {
		font-family: var(--font-header);
		font-size: 20px;
		font-weight: 400;
	}

	.walletIcon {
		
	}
	
		.walletIcon svg {
			display: block;
		}

	.walletLabel,
	.walletSplitLabel {
		font-size: 14px;
		font-weight: 300;
	}

	.walletAmount {
		font-size: 40px;
		font-weight: 300;
		line-height: 1;
	}
	
	.walletSplitValue {
		font-size: 22px;
		font-weight: 300;
	}

	.walletSplit {
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-template-columns: 1fr 1fr; 
		gap: 20px;
	}

	.skarbonkaWalletCard hr {
		border: 0;
		height: 2px;
		background: var(--orange);
	}

	.skarbonkaKpiCard {
		border: 1px solid var(--yellow);
	}

	.kpiGrid {
		display: grid;
		height: 100%;
		grid-template-columns: repeat(2, 1fr);
	}

	.kpiItem {
		min-height: 90px;
		border: 1px solid var(--yellow);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
		text-align: center;
		padding: 8px;
	}

	.kpiItem p {
		font-family: var(--font-header);
		color: var(--blue);
		font-size: 36px;
		line-height: 1;
		font-weight: 300;
	}
	
	.kpiItem.grey p {
		color: #D9D9D9;
	}

	.kpiItem span {
		font-size: 12px;
		font-weight: 300;
	}

	.kpiItemWide {
		grid-column: 1 / -1;
	}

	.kpiItemWide p {
		color: var(--orange);
	}

	.reflinkCard {
		border: 2px solid var(--blue);
		padding: 24px 32px 40px 32px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	
	.reflinkHead {
		
	}

	.reflinkHead h4 {
		display: inline-flex;
		align-items: center;
		gap: 15px;
		
		font-family: var(--font-header);
		font-size: 20px;
		font-weight: 400;
		
		padding: 0 8px 8px 4px;
		border-bottom: 1px solid var(--yellow);
	}

	.reflinkCode {
		font-family: var(--font-header);
		font-size: 36px;
		font-weight: 300;
	}

	.reflinkText {
		line-height: 1.4;
		font-weight: 300;
		font-size: 14px
	}
	
		.reflinkText ol {
			margin-left: 20px;
			font-size: 16px;
		}

		.reflinkText ol li {
			margin: 10px 0;
		}

	.skarbonkaOffers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.offerCard img {
		display: block;
		width: 100%;
		aspect-ratio: 402 / 260;
		object-fit: cover;
	}
	
	.reflinkCard hr {
		border: 0;
		height: 2px;
		background: var(--blue);
	}
	
	.offerSummary {
		background: var(--yellow);
		padding: 20px 40px;
		display: flex;
		justify-content: space-between;
		gap: 20px;
		margin: 2px 0;
	}

	.offerSummary h5 {
		font-family: var(--font-header);
		font-size: 18px;
		max-width: 210px;
		font-weight: 400;
		line-height: 1.4;
	}

	.offerDate,
	.offerFrom {
		font-size: 12px;
	}
	
	.offerDate {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 10px;
	}

	.offerPriceWrap {
		align-self: flex-end;
		text-align: right;
	}

	.offerPrice {
		font-family: var(--font-header);
		font-size: 20px;
		margin-top: 8px;
	}

	.offerActions {
		border: 2px solid var(--yellow);
		border-top: 0;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}

	.offerActions span {
		font-weight: 500;
	}
	
	.offerActions p {
		font-size: 16px;
	}

	.offerBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--yellow);
		border: 2px solid var(--yellow);
		min-height: 58px;
		width: 100%;
		font-size: 16px;
	}


	.offerBtn:hover {
		background: transparent;
	}
		
/* PODSTRONA SKARBONKA 2 */

	.settlementsSection {
		border: 2px solid var(--blue);
		padding: 15px 20px;
		box-sizing: border-box;
	}

	.settlementRow {
		display: flex;
		gap: 16px;
		padding: 10px 0;
		align-items: center;
		color: var(--txt);
		text-align: center;
	}

	.settlementRow > div {
		flex: 1 1 120px;
		min-width: 0;
		font-weight: 300;
	}
	
	.settlementRow > :first-child,
	.settlementRow > :last-child {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.settlementRowHeader {
		font-family: var(--font-header);
		font-size: 16px;
	}

	.settlementDate,
	.settlementNumber,
	.settlementAmount {
		font-family: var(--font-normal);
	}

	.settlementStatus {
		display: block;
		font-size: 14px;
	}

	.settlementTrip {
		font-size: 14px;
	}

	.settlementDivider {
		height: 2px;
		background: var(--blue);
		margin: 20px 0;
	}

	.settlementEmpty {
		background: #E4E4E4;
		padding: 10px 10px;
		font-size: 14px;
		color: var(--txt);
		margin: 30px 0 10px 0;
		text-align: center;
		font-weight: 300;
	}

.howSection {
	border: 2px solid var(--blue);
	padding: 20px 20px;
	box-sizing: border-box;
}

	.howTitle  {
		
	}
	
		.howTitle h2 {
			display: inline-flex;
			align-items: center;
			gap: 15px;
			
			font-family: var(--font-header);
			font-size: 20px;
			font-weight: 400;
			
			padding: 0 8px 8px 4px;
			border-bottom: 2px solid var(--blue);
		}
		
	.howContent {
		margin-top: 25px;
		font-size: 16px;
		font-weight: 300;
	}

	.howButton {
		margin-top: 40px;
		margin-bottom: 20px;
		
		background: var(--blue);
		color: #fff;
		display: block;
		width: 100%;
		padding: 10px 10px;
		box-sizing: border-box;
		text-align: center;
		font-weight: 300;
	}

.skarbonkaTopUp {
	margin-top: 50px;
	display: grid; 
	grid-auto-columns: 1fr; 
	grid-template-columns: 1fr 1fr; 
	gap: 20px 20px; 
}

	.skarbonkaTopUp .offerCardBox {
		border: 1px solid var(--yellow);
		padding: 20px;
		box-sizing: border-box;
	}

		.skarbonkaTopUp .offerCardBox .offerCardBox_header span {
			display: inline-flex;
			align-items: center;
			gap: 15px;
			margin-bottom: 15px;
			
			font-family: var(--font-header);
			font-size: 16px;
			font-weight: 500;
			
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--yellow);
		}
		
		.skarbonkaTopUp .offerCardBox .offerSummary {
			background: #fff;
			border: 2px solid var(--yellow);
			margin: 0 0;
			padding: 15px 25px;
			gap: 15px;
			align-items: center;
		}

			.skarbonkaTopUp .offerCardBox .offerSummary h5 {
				font-family: var(--font-normal);
				font-size: 14px;
				font-weight: 300;
			}

		.skarbonkaTopUp .offerDate {
			font-size: 14px;
			font-weight: 300;
		}

			.skarbonkaTopUp .offerDate svg {
				width: 16px;
				height: 16px;
			}
			
		.skarbonkaTopUp .offerPriceWrap {
			min-width: 130px;
			align-self: center;
			font-size: 14px;
		}
			
			.skarbonkaTopUp .offerPriceWrap .offerFrom {
				font-family: var(--font-normal);
				font-size: 14px;
				font-weight: 300;
			}

			.skarbonkaTopUp .offerPriceWrap .offerPrice {
				font-family: var(--font-normal);
				font-size: 14px;
				font-weight: 300;
			}

		.skarbonkaTopUp .offerActions {
			border: 0;
			padding: 15px 0 0 0;
		}

			.skarbonkaTopUp .offerActions a {
				font-size: 18px;
				font-weight: 500;
			}
			
/* PODSTRONA WIADOMOŚCI */

.messagesPage {
	width: 100%;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

	.messagesBox {
		border: 1px solid var(--blue);
		padding: 30px;
		box-sizing: border-box;
	}
		
		.messagesBoxHeader h3 {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			
			padding: 0 8px 8px 4px;
			border-bottom: 1px solid var(--blue);
		}
		
	.messagesList {
		display: flex;
		flex-direction: column;
		gap: 25px;
		margin: 30px 0 0 0;
	}
	
		.messagesList .message {
			display:flex;
			align-items: flex-start;
			gap: 25px;
		}
		
			.messagesList .message .messageImg {
				display: flex;
				flex-direction: column;
				gap: 10px;
				text-align: center;
				font-size: 16px;
				font-weight: 300;
			}
			
				.messagesList .message .messageImg figure {
					width: 60px;
					height: 60px;
				}
				
				.messagesList .message .messageImg img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: contain;
					object-position: 50% 50%;
				}
	
			.messagesList .message .messageDesc {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
	
				.messagesList .message .messageDesc .messageTitle {
					font-weight: 500;
					font-size: 18px;
				}
				
				.messagesList .message .messageDesc .messageMsg {
					font-weight: 300;
				}
				
	.messageNew {
		text-align: center;
		margin-top: 20px;
	}
	



footer {
	background: #231916;
	padding: 50px 0;
	box-sizing: border-box;
}

	.stFooterColumns {
		display: flex;
		flex-direction: column;
		gap: 50px;
	}

	.stFooterColumns figure {
		text-align: center;
	}

	.stFooterColumnLogoMain {
		width: 100%;
		padding-bottom: 50px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	}
	
		.stFooterColumnLogoMain img {
			width: 400px;
			height: auto;
		}
	
	.stFooterColumnNav {
		margin-bottom: 100px;
	}

	.stFooterColumnContact,
	.stFooterColumnSocial {
		padding: 0 15%;
		box-sizing: border-box;
		color: #fff;
		align-items: center;
	}

	.stFooterColumnContact p,
	.stFooterColumnSocial p {
		margin: 10px 0;
		font-weight: 300;
		font-size: 16px;
	}

	.stFooterBadge {
		margin-bottom: 80px;
	}

	.stFooterBadge img {
		width: 150px;
		height: auto;
	}

	.stFooterCenter {
		text-align: center;
	}

	.st-contact-link {
		display: inline-block;
		margin: 15px 0;
		font-size: 16px;
		font-weight: 300;
		color: #fff;
	}

	.st-contact-link.st-tel,
	.st-contact-link.st-mail {
		font-family: var(--font-header);
		padding-left: 30px;
		background-size: 15px auto;
		background-repeat: no-repeat;
		background-position: 0 50%;
	}

	.st-contact-link.st-tel {
		margin-top: 70px;
		background-image: url("../img/icoTel.svg");
	}

	.st-contact-link.st-mail {
		margin-top: 0;
		background-image: url("../img/icoMail.svg");
	}

	.st-contact-link:hover {
		color: var(--orange);
	}

	.stFooterColumnSocial {
		display: flex;
		flex-wrap: wrap;
		gap: 0 6%;
		padding: 50px 15%;
		justify-content: center;
	}

	.stFooterColumnSocial a {
		display: inline-block;
	}

	.stFooterColumnSocial a:hover {
		transform: scale(1.1);
	}

	.stFooterNav {
		color: #fff;
		padding: 30px 5%;
		box-sizing: border-box;
	}

	.stFooterNavList {
		display: flex;
		flex-direction: row;
		width: 100%;
		list-style: none;
	}

	.stFooterNavItem {
		flex-grow: 1;
		margin: 4px 0;
		display: block;
	}

	.stFooterNavLink {
		font-weight: 500;
		font-family: var(--font-header);
		color: #fff;
	}

	.stFooterSubmenu {
		padding-top: 10px;
		width: 100%;
		list-style: none;
	}

	.stFooterSubmenuLink {
		display: block;
		color: #fff;
		font-size: 16px;
		font-weight: 200;
	}

	.stFooterNav a:hover {
		color: var(--orange);
	}

	.stFooterCopyright {
		color: #fff;
		text-align: left;
		font-size: 14px;
		padding: 20px 15%;
		box-sizing: border-box;
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		margin: 80px 0 0;
	}

	.stFooterCopyrightInner {
		padding-top: 20px;
		display: flex;
		justify-content: center;
	}

	
	
@media screen and (max-width: 1000px) {
	body {
		font-size: 14px;
	}
	
	main {
		padding: 0 40px;
	}
	
	nav#main {
		margin: 40px auto 50px auto;
		padding: 0 0;
	}
	
		nav#main a {
			width: 50px;
			height: 50px;
			padding: 13px;
		}
		
			nav#main a img {
				width: 24px;
				height: 24px;
			}
	
	.accountSectionTitle h1, 
	.accountSectionTitle h2 {
		font-size: 20px;
	}
	
	.accountProfile {
		grid-template-columns: 55px 1fr;
	}
	
	.accountAvatar figure svg {
		width: 47px;
		height: 47px;
	}
	
	.companionsList .accountAvatar figure svg {
		width: 35px;
		height: 35px;
	}
	
	.accountProfileInfo h3 {
		font-size: 16px;
	}
	
	.accountProfileInfo h4 {
		font-size: 16px;
	}
	
	.accountSection {
		gap: 30px;
	}
	
	.accountDataList li {
		gap: 12px;
		font-size: 14px;
	}
	
	
	.reservationsTitle h1 {
		font-size: 20px;
	}
	
	.reservationsTitle h4 {
		font-size: 14px;
	}
	
	
	.reservationsGroup {
		gap: 30px;
	}
	
	
	@media screen and (max-width: 850px) {
		.reservationsGrid {
			width: 100%;
			max-width: 500px;
			margin: 0 auto;
			grid-template-columns: 1fr;
		}
		
		.reservationSummary {
			padding: 12px 15px;
			gap: 10px 10px;
		    grid-template-columns: 200px 1fr;
		}
		
		.reservationSummary h3 {
			font-size: 16px;
		}
		
		.reservationFooterUpcoming {
			display: flex;
		}
		
		.reservationPriceMeta {
			white-space: nowrap;
		}
		
		.reservationPriceMeta strong {
			font-size: 14px;
		}
		
		.reservationAction {
			display: block;
			font-size: 14px;
			text-align: center;
			white-space: unset;
			padding: 10px 8px;
		}
		
		.reservationOpinion {
			font-size: 16px;
		}
		
		.reservationPaid p {
			font-size: 14px;
		}
		
		.reservationFooter {
			padding: 5px 8px;
		}
	}
	
	
	.settingsTitle h1 {
		font-size: 20px;
	}
	
	.settingsSectionTitle h4 {
		font-size: 16px;
	}
	
	.settingsPage {
		gap: 30px;
	}
	
	.settingsValue {
		font-size: 14px;
	}
	
	.settingsList li {
		gap: 12px;
	}
	
	.accountEditButton {
		padding: 4px 8px;
	}
	
	.settingsSection {
		gap: 25px;
	}
	
	.skarbonkaTitle h1 {
		font-size: 20px;
	}
	
	.skarbonkaPage {
		gap: 35px;
	}
	
	.skarbonkaContent {
		gap: 25px;
	}
	
	.skarbonkaPigIconWrap svg {
		width: 65px;
		height: 65px;
	}
	
	.skarbonkaTitleSub {
		text-align: center;
		width: 100%;
	}
	
	.skarbonkaTitleSub h4 {
		font-size: 16px;
		text-align: center;
	}
	
	.skarbonkaDescription {
		font-size: 14px;
	}
	
	.skarbonkaAgreement {
		font-size: 14px;
	}
	
	.skarbonkaAgreement input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
	
	.skarbonkaAgreement input[type="checkbox"]:checked::after {
		left: 5px;
		top: 0;
		width: 4px;
		height: 10px;
	}
	
	
	.messagesBox {
		padding: 20px;
	}
	
	.messagesList .message {
		gap: 15px;
	}
	
	
	
	footer {
		padding: 30px 0;
	}
	
	.stFooterColumns  {
		gap: 25px;
	}
	
	.stFooterColumnLogoMain {
		padding-bottom: 30px;
	}
	
	.stFooterColumnLogoMain img {
		width: 100%;
		max-width: 300px;
		height: auto;
	}
	
	.stFooterColumnNav {
		margin-bottom: 30px;
	}
		
	.stFooterNav {
		padding: 25px 40px;
	}		
		
		.stFooterNavList {
			flex-direction: column;
		}
	
	.stFooterBadge {
		margin-bottom: 30px;
	}
		
		.stFooterBadge img {
			width: 120px;
		}
		
	.st-contact-link.st-tel {
		margin-top: 20px;
	}
	
	.stFooterColumnSocial {
		padding: 10px 40px;
		gap: 0 4%;
	}
	
	.stFooterCopyright {
		margin: 30px 0 0 0;
		padding: 40px 40px;
	}
	
	.stFooterCopyrightInner {
		padding: 0 0;
	}
}


/**
	Proxy
*/
.panelReservationsEmpty,
.panelReservationsMessage {
	width: 100%;
	padding: 28px 30px;
	border-radius: 18px;
	font-size: 15px;
	line-height: 1.6;
}

.panelReservationsEmpty {
	background: rgba(255, 255, 255, .75);
	color: #231916;
}

.panelReservationsMessageError {
	margin-bottom: 28px;
	background: rgba(216, 86, 29, .12);
	color: #a13d13;
}

.reservationOpinion[disabled] {
	cursor: default;
	opacity: .55;
}

/**
	Dev Info
*/
.panelDevelopmentNotice {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 36px;
	padding: 22px 26px;
	border: 1px solid rgba(216, 86, 29, .28);
	border-radius: 16px;
	background: rgba(255, 218, 62, .18);
	color: #231916;
}

.panelDevelopmentNoticeIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	background: #d8561d;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
}

.panelDevelopmentNoticeContent {
	min-width: 0;
}

	.panelDevelopmentNoticeContent strong {
		display: block;
		margin-bottom: 5px;
		font-size: 16px;
		line-height: 1.4;
	}

	.panelDevelopmentNoticeContent p {
		margin: 0;
		font-size: 13px;
		line-height: 1.65;
		color: rgba(35, 25, 22, .72);
	}

.panelPreviewDisabled,
.panelPreviewDisabled:hover,
.panelPreviewDisabled:focus {
	cursor: default;
	opacity: .58;
}

a.panelPreviewDisabled {
	pointer-events: none;
}

@media (max-width: 600px) {
	.panelDevelopmentNotice {
		gap: 13px;
		margin-bottom: 26px;
		padding: 18px;
	}

	.panelDevelopmentNoticeIcon {
		width: 32px;
		height: 32px;
		flex-basis: 32px;
		font-size: 17px;
	}
}





.reservationFooterActions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-width: 190px;
}

	.reservationFooterActions .reservationAction {
		box-sizing: border-box;
		width: 100%;
		text-align: center;
	}

.reservationDetailsBelow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	font-size: 12px;
	text-align: center;
}

.reservationCardDraft {
	position: relative;
}

.reservationDraftBadge {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	padding: 7px 12px;
	border-radius: 20px;
	background: #ffda3e;
	color: #231916;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.reservationFooterDraft {
	background: rgba(255, 218, 62, .15);
}

.reservationDraftInfo {
	max-width: 300px;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(35, 25, 22, .68);
}

.reservationsGroupDrafts {
	margin-bottom: 48px;
}

@media (max-width: 700px) {
	.reservationFooterActions {
		width: 100%;
		min-width: 0;
	}

	.reservationFooterUpcoming,
	.reservationFooterDraft {
		align-items: stretch;
	}

	.reservationDetailsBelow {
		padding-top: 8px;
		padding-bottom: 2px;
	}
}



.reservationsGroupCollapsible {
	margin-top: 40px;
}

.reservationsTitleCollapsible {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

	.reservationsTitleCollapsible h4 {
		margin: 0;
	}

.reservationGroupToggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	padding: 7px 0;
	border: 0;
	background: transparent;
	color: #231916;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

	.reservationGroupToggle:hover .reservationGroupToggleLabel {
		text-decoration: underline;
	}

	.reservationGroupToggle:focus-visible {
		outline: 2px solid #d8561d;
		outline-offset: 5px;
	}

	.reservationGroupToggle:disabled {
		cursor: default;
		opacity: .45;
	}

		.reservationGroupToggle:disabled:hover
		.reservationGroupToggleLabel {
			text-decoration: none;
		}

.reservationGroupCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	box-sizing: border-box;
	padding: 0 8px;
	border-radius: 20px;
	background: #231916;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.reservationGroupToggle svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.reservationGroupToggle.is-open svg {
	transform: rotate(180deg);
}

.reservationsCollapsibleContent {
	margin-top: 26px;
}

	.reservationsCollapsibleContent[hidden] {
		display: none !important;
	}

@media (max-width: 600px) {
	.reservationsTitleCollapsible {
		gap: 12px;
	}

	.reservationGroupToggleLabel {
		display: none;
	}

	.reservationGroupToggle {
		gap: 7px;
	}

	.reservationsCollapsibleContent {
		margin-top: 20px;
	}
}