.green {
	color: var(--green)
}

.yellow {
	color: var(--yellow)
}

.red {
	color: var(--red)
}

.step {
	display: none
}

.step.active {
	display: block
}

.step-nav {
	margin-top: 36px;
	display: flex;
	gap: 24px;
	flex-wrap: wrap
}

.step-nav .btn {
	flex: 1;
	min-width: 140px;
	text-align: center
}

.step-nav .btn.disabled,
.room-blocks .room-block.selected .btn.select-room {
	opacity: .5;
	cursor: not-allowed
}

.room-info .btn {
	padding: 15px;
	font-size: 22px
}

#booking-form .form-container {
	max-width: none;
	width: 100%
}

.room-blocks {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center
}

.room-block {
	flex: 1 1 100%;
	max-width: 100%;
	background: rgba(255, 255, 255, .05);
	border: 2px solid transparent;
	border-radius: var(--border-radius-xl);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
	transition: var(--transition)
}

.room-block:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, .1)
}

.room-block.selected {
	border: 2px solid var(--green);
	box-shadow: 0 0 0 4px rgba(var(--rgb-green), .3);
	background: rgba(var(--rgb-green), .15)
}

.room-block.selected .btn.select-room {
	background: var(--green);
	color: var(--dark)
}

.room-gallery {
	position: relative;
	height: 300px
}

.room-gallery .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center
}

.room-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius-lg);
	transition: var(--this-transition)
}

.room-gallery img:hover {
	transform: scale(1.02)
}

.room-gallery .swiper-pagination {
	bottom: 16px
}

.room-gallery .swiper-pagination-bullet {
	background: var(--white);
	opacity: .6;
	width: 12px;
	height: 12px
}

.room-gallery .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--green)
}

.room-info {
	padding: 24px;
	color: var(--white)
}

.room-info h4 {
	font-size: 24px;
	margin-bottom: 12px;
	font-family: var(--font-semibold)
}

.room-info p {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 24px;
	color: var(--l-gray);
	font-family: var(--font-normal);
	font-weight: 300
}

.room-features {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 16px 0 24px;
	flex-direction: column
}

.feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--l-gray)
}

.feature .icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 50%;
	background-color: rgba(var(--rgb-green), .2);
	font-size: 0
}

.icon.wifi {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M319.1 367.1C289.1 367.1 264 393.1 264 424s25.07 56 55.1 56S376 454.9 376 424S350.9 367.1 319.1 367.1zM632.5 150.6C553.3 75.22 439.4 32 320 32S86.72 75.22 7.473 150.6c-9.625 9.125-10 24.31-.8438 33.91c9.062 9.594 24.31 10 33.91 .8438C110.1 118.4 212.8 80 320 80s209 38.41 279.5 105.4C604.1 189.8 610.1 192 615.1 192c6.344 0 12.69-2.5 17.38-7.469C642.5 174.9 642.2 159.8 632.5 150.6zM320 207.9c-76.63 0-147.9 28-200.6 78.75C109.8 295.9 109.5 311.1 118.7 320.6c9.219 9.625 24.41 9.844 33.94 .6875C196.4 279.2 255.8 256 320 256s123.6 23.19 167.4 65.31C492 325.8 497.1 328 503.1 328c6.281 0 12.59-2.469 17.31-7.375c9.188-9.531 8.875-24.72-.6875-33.94C467.9 235.9 396.6 207.9 320 207.9z'/%3E%3C/svg%3E")
}

.icon.fridge {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M288 0H96C42.98 0 0 42.98 0 96v352c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V96C384 42.98 341 0 288 0zM336 448c0 8.822-7.178 16-16 16H64c-8.822 0-16-7.178-16-16V208h192v136c0 13.25 10.75 24 24 24S288 357.3 288 344V208h48V448zM336 160H288V120C288 106.8 277.3 96 264 96S240 106.8 240 120V160h-192V96c0-26.47 21.53-48 48-48h192c26.47 0 48 21.53 48 48V160z'/%3E%3C/svg%3E")
}

.icon.shower {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M344.1 87.03c-9.375-9.375-24.56-9.375-33.94 0L310.2 87.84l-7.031-7.031C281.3 58.94 252.7 48 224 48c-21.57 0-43.13 6.211-61.8 18.6L145.3 52.53C129.4 39.28 109.3 32 88.61 32C39.75 32 0 71.75 0 120.6V456C0 469.3 10.75 480 24 480s24-10.75 24-24V120.6C48 98.22 66.22 80 88.61 80c9.469 0 18.7 3.344 26 9.406l14.29 11.91c-26.67 43.18-21.54 100.4 15.9 137.9L151.8 246.2L151 247c-9.375 9.375-9.375 24.56 0 33.94C155.7 285.7 161.9 288 168 288s12.28-2.344 16.97-7.031l160-160C354.3 111.6 354.3 96.41 344.1 87.03zM185.8 212.3L178.7 205.3c-24.95-24.95-24.95-65.55 .002-90.51C190.8 102.7 206.9 96 224 96c17.09 0 33.17 6.656 45.26 18.75l7.031 7.029L185.8 212.3zM480 192c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32s32-14.33 32-32C512 206.3 497.7 192 480 192zM288 384c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32s32-14.33 32-32C320 398.3 305.7 384 288 384zM352 320c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32s32-14.33 32-32C384 334.3 369.7 320 352 320zM416 256c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32s32-14.33 32-32C448 270.3 433.7 256 416 256zM288 320c0-17.67-14.33-32-32-32s-32 14.33-32 32c0 17.67 14.33 32 32 32S288 337.7 288 320zM320 224c-17.67 0-32 14.33-32 32c0 17.67 14.33 32 32 32s32-14.33 32-32C352 238.3 337.7 224 320 224zM384 224c17.67 0 32-14.33 32-32c0-17.67-14.33-32-32-32s-32 14.33-32 32C352 209.7 366.3 224 384 224z'/%3E%3C/svg%3E")
}

.icon.space {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M400 200V113.9L257.9 256L400 398.1V312C400 298.8 410.8 288 424 288S448 298.8 448 312v144c0 3.125-.6387 6.238-1.854 9.172c-2.432 5.863-7.104 10.54-12.96 12.97C430.2 479.4 427.1 480 424 480h-144C266.8 480 256 469.3 256 456s10.75-24 24-24h86.06L224 289.9L81.94 432H168C181.3 432 192 442.8 192 456S181.3 480 168 480h-144c-3.125 0-6.238-.6406-9.172-1.852c-5.863-2.434-10.54-7.105-12.97-12.97C.6406 462.3 0 459.1 0 456v-144C0 298.8 10.75 288 24 288S48 298.8 48 312v86.06L190.1 256L48 113.9V200C48 213.3 37.25 224 24 224S0 213.3 0 200v-144c0-3.125 .6387-6.238 1.854-9.172c2.432-5.863 7.104-10.54 12.96-12.97C17.75 32.64 20.87 32 24 32h144C181.3 32 192 42.75 192 56S181.3 80 168 80H81.94L224 222.1L366.1 80H280C266.8 80 256 69.25 256 56S266.8 32 280 32h144c3.125 0 6.238 .6406 9.172 1.852c5.863 2.434 10.54 7.105 12.97 12.97C447.4 49.75 448 52.87 448 56v144C448 213.3 437.3 224 424 224S400 213.3 400 200z'/%3E%3C/svg%3E")
}

.select-room {
	width: 100%;
	margin-top: 16px
}

.fancybox__container {
	z-index: 9999 !important
}

.fancybox__carousel__slide {
	background: var(--dark)
}

.fancybox__toolbar {
	background: rgba(var(--rgb-dark), .8)
}

.total-price-display {
	font-size: 18px;
	color: var(--green);
	text-align: center;
	font-weight: bold
}

.info-block {
	background: var(--form-bg);
	color: var(--white)
}

.info-content {
	padding: 20px;
	line-height: 1.6;
	text-align: center
}

.legal-contact-block {
	background: var(--form-bg)
}

.legal-contact-content {
	padding: 20px;
	line-height: 1.6
}

.legal-contact-content h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1.2em;
	color: var(--white)
}

.legal-contact-content p {
	margin: 0.3em 0;
	color: var(--white)
}

.services-modal {
	width: 800px;
	max-width: 95%;
	margin: 0 auto;
	background: var(--dark);
	padding: 24px;
	border-radius: var(--border-radius-xl);
	color: var(--white)
}

.services-modal h2 {
	margin-top: 0;
	color: var(--green)
}

.services-modal p {
	line-height: 1.6;
	margin-bottom: 1em
}

.services-modal a {
	color: var(--green)
}


.services-modal a:hover {
	opacity: .8
}

.services-link {
	color: var(--green);
	display: inline-block;
	transition: var(--transition)
}

.services-link:hover {
	opacity: .8
}

.card {
	position: relative;
	border-radius: min(80 / 1920 * 100vw, 80 * 1.25 * 1px);
	background: var(--form-bg);
	padding: 60px 102px;
	font-family: var(--font-regular);
	color: var(--white)
}

.card.corner {
	padding: 60px 102px 100px
}

.card.corner::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: -1px;
	width: 194px;
	height: 93px;
	background: url(../images/bottom_corner.svg) no-repeat center;
	background-size: contain;
	z-index: 2;
	pointer-events: none
}

.card > div {
	position: relative;
	overflow: hidden
}

.card > div::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: -50%;
	width: 100%;
	height: 100%;
	background: #1a53bc;
	border-radius: 50%;
	opacity: .25;
	filter: blur(500px);
	pointer-events: none
}

.copyright {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: .5rem !important;
	font-size: .75rem
}

.copyright a {
	display: block
}

@media (min-width: 1200px) {
	.room-block {
		flex: 1 1 calc(50% - 16px);
		max-width: calc(50% - 16px);
	}
}

@media (max-width: 767px) {
	.card {
		padding: 60px 24px
	}

	.card.corner {
		padding: 60px 24px 80px
	}

	.room-block {
		max-width: 100%
	}

	.room-gallery {
		height: 200px
	}

	.room-info {
		padding: 16px
	}

	.room-info h4 {
		font-size: 20px
	}

	.room-info p {
		font-size: 14px;
		line-height: 20px
	}

	.room-features {
		gap: 8px
	}

	.feature {
		font-size: 12px
	}

	.feature .icon {
		width: 20px;
		height: 20px;
		background-size: 14px
	}

	.info-block, .legal-contact-block {
		padding: 20px 0
	}

	.info-content, .legal-contact-content {
		padding: 15px
	}

	.services-modal {
		margin: 10px;
		padding: 16px
	}
}