@import 'variables';
@import '_mixins';

html {
	scroll-behavior: smooth;
	scroll-padding-top: 105px;
}

body {
	&.fixed {
		overflow: hidden;
	}
}
p {
	&:last-child {
		margin-bottom: 0;
	}
}
strong {
	font-weight: 700;
}

.main-page {
	padding-top: 0px;
}

.breadcrumbs {
	margin: 14px 0;
}

.box-1 {
	background: #f7f6f5;

	.box-1--wrapper {
		.c-row {
			display: flex;
			flex-direction: row;
			column-gap: 50px;
			align-items: center;
			justify-content: space-between;
			min-height: 390px;

			@include respond-below(md) {
				flex-direction: column;
				padding-top: 50px;
				text-align: center;
				row-gap: 50px;
			}

			.c-col {
				&-1 {
					width: 100%;
					max-width: 500px;

					.box-title {
						margin-bottom: 20px;

						h1 {
							color: $cTxtBlack;
							font-family: $font3;
							font-weight: 500;
							font-size: 55px;
							line-height: 1;
							letter-spacing: 2px;

							@include respond-below(lg) {
								font-size: 40px;
							}
						}
					}

					.box-text {
						padding-bottom: 25px;
						margin-bottom: 40px;
						border-bottom: 1px solid #000;

						p {
							color: $cTxtBlack;
							font-family: $font3;
							font-weight: 300;
							font-size: 30px;
							line-height: 1.6;
							letter-spacing: 2px;
							text-transform: uppercase;

							@include respond-below(lg) {
								font-size: 24px;
							}
						}
					}

					.box-nav {
						ol {
							display: flex;
							flex-direction: row;
							align-items: center;
							list-style: none;
							padding: 0;
							margin: 0;
							gap: 16px;

							li {
								width: 100%;
								max-width: 241px;

								&:nth-child(1) {
									a {
										background-color: #1e2832;
									}
								}

								&:nth-child(2) {
									a {
										background-color: #b8aea4;
									}
								}

								a {
									display: block;
									padding: 18px 13px;
									border-radius: 10px;
									text-align: center;

									@include respond-below(lg) {
										padding: 14px 13px;
									}

									span {
										display: inline-block;
										color: $cWhite;
										font-family: $font3;
										font-weight: 700;
										font-size: 16px;
										line-height: 1.2;

										@include respond-below(lg) {
											font-size: 14px;
										}
									}
								}
							}
						}
					}
				}
				&-2 {
					.box-img {
						width: 100%;
						max-width: 700px;

						img {
							width: 100%;
						}
					}
				}
			}
		}
	}
}

.box-2 {
	padding-top: 80px;
	padding-bottom: 120px;

	.box-2--wrapper {
		.c-row {
			display: flex;
			flex-direction: row;
			align-items: center;

			@include respond-below(md) {
				flex-direction: column;
			}

			.c-col {
				&-1 {
					width: 100%;
					max-width: 600px;
					border-top: 1px solid #b79f87;
					border-left: 1px solid #b79f87;
					border-bottom: 1px solid #b79f87;
					border-top-left-radius: 30px;
					border-bottom-left-radius: 30px;
					padding: 45px 30px 45px 60px;

					@include respond-below(lg) {
						padding: 30px;
					}
					@include respond-below(md) {
						max-width: unset;
						text-align: center;
						border-bottom: 0;
						border-right: 1px solid #b79f87;
						border-top-right-radius: 30px;
						border-bottom-left-radius: 0;
						padding: 30px 30px 60px 30px;
						margin-bottom: -25px;
					}

					.box-text {
						margin-bottom: 40px;

						p {
							color: $cTxtBlack;
							font-family: 'URW Form';
							font-weight: 300;
							font-size: 24px;
							line-height: 34px;
							letter-spacing: -0.48px;

							@include respond-below(lg) {
								font-size: 20px;
							}
						}
						ul {
							width: 100%;
							max-width: 460px;
							padding-left: 30px;
							margin: 35px 0;

							@include respond-below(lg) {
								margin: 20px 0;
							}

							@include respond-below(md) {
								display: flex;
								flex-direction: column;
								align-items: center;
								max-width: unset;
							}

							li {
								color: $cTxtBlack;
								font-family: 'URW Form';
								font-weight: 300;
								font-size: 24px;
								line-height: 34px;
								letter-spacing: -0.48px;

								@include respond-below(lg) {
									font-size: 20px;
								}

								&:not(:last-child) {
									margin-bottom: 15px;

									@include respond-below(lg) {
										margin-bottom: 5px;
									}
								}
							}
						}
					}

					.box-nav {
						._radios {
							display: flex;
							flex-direction: column;
							row-gap: 26px;

							@include respond-below(lg) {
								row-gap: 20px;
							}
							@include respond-below(md) {
								align-items: center;
							}

							._radio {
								display: inline-flex;
								align-items: center;
								justify-content: center;

								width: 100%;
								max-width: 410px;

								input[type='radio'] {
									appearance: none;
								}

								input[type='radio']:checked + label {
									color: #fff !important;
									background: #1e2832 !important;
								}

								label,
								a {
									color: #3f3f3f;
									font-family: $font3;
									font-style: normal;
									font-weight: 600;
									font-size: 20px;
									line-height: 1;
									text-align: center;
									margin-bottom: 0;
									cursor: pointer;

									width: 100%;
									max-width: 410px;
									border-radius: 20px;
									border: 1px solid #dfdfdf;
									padding: 13px;

									@include respond-below(lg) {
										font-size: 18px;
									}
								}
							}
						}
					}
				}
				&-2 {
					padding: 46px 40px;
					background: #f7f6f5;
					border-radius: 14px 0 5px 22px;

					@include respond-below(md) {
						border-radius: 14px 14px 22px 22px;
					}
					input {
						&[type='text'],
						&[type='email'] {
							padding: 13px 14px 11px 14px;
							border-radius: 20px;
							width: 100%;
							border: none;
							background: #fff;

							color: #3f3f3f;
							font-size: 14px;
							font-family: $font3;
							line-height: 1;
							font-weight: 300;

							outline: none;
						}

						&[type='radio'],
						&[type='checkbox'] {
							position: relative;
							appearance: none;
							width: 11px;
							min-width: 11px;
							height: 11px;
							border-radius: 100%;
							border: 1px solid #dfdfdf;
							transition: all 250ms ease-in-out;
							outline: none;

							&::before {
								content: '';
								position: absolute;
								top: 50%;
								left: 50%;
								width: 0;
								height: 0;
								border-radius: 100%;
								background: #1d1d1e;
								transform: translate(-50%, -50%);
								visibility: hidden;
								transition: all 250ms ease-in-out;
							}

							&:checked {
								border-color: #1d1d1e;

								&::before {
									width: 6px;
									height: 6px;
									visibility: visible;
								}
							}
						}
					}
					textarea {
						padding: 13px 14px 11px 14px;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;
						min-height: 100px;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;

						outline: none;
						resize: none;
					}
					select {
						position: relative;
						appearance: none;
						padding: 13px 14px 11px 14px;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;

						outline: none;
					}

					._1_column {
						display: flex;
						flex-direction: row;
						margin-bottom: 5px;

						> * {
							width: 100% !important;
						}
					}

					._2_columns {
						display: flex;
						flex-direction: row;
						column-gap: 26px;
						margin-bottom: 16px;

						@include respond-below(sm) {
							flex-wrap: wrap;
							row-gap: 14px;
						}

						> * {
							width: 50% !important;

							@include respond-below(sm) {
								width: 100% !important;
							}
						}
					}

					._text {
						margin: 17px 0 25px;

						p {
							color: #1d1d1e;
							font-size: 14px;
							font-weight: 300;
							font-family: $font3;
							margin-bottom: 0px;
						}
					}

					._file {
						padding: 29px;
						margin: 0 0 23px 0;
						border-radius: 20px;
						width: 100%;
						border: none;
						background: #fff;

						color: #3f3f3f;
						font-size: 14px;
						font-family: $font3;
						line-height: 1;
						font-weight: 300;
						border: none;

						.fileuploader-input {
							width: fit-content;
							margin: 0 auto;

							.fileuploader-input-caption {
								span {
									padding-top: 3px;
									display: inline-block;

									color: #1d1d1e;
									font-size: 16px;
									font-family: $font3;
									font-weight: 300;
								}
							}

							button.fileuploader-input-button {
								background: #1e2832;
								border-radius: 25px;
								padding: 10px 36px;

								display: flex;
								flex-direction: row;
								align-items: center;
								gap: 10px;

								color: #fff;
								font-family: $font3;
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 2px;
								text-transform: uppercase;
							}

							@media (max-width: 768px) {
								flex-direction: column;
							}
						}

						@media (max-width: 576px) {
						}
					}

					._radio,
					._checkbox {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 8px;

						label {
							color: #1d1d1e;
							font-size: 10px;
							font-family: $font3;
							font-weight: 300;
							line-height: 1;
							padding-top: 2px;
							margin-bottom: 0;
							cursor: pointer;
						}
					}

					.form_actions {
						margin-top: 40px;
						align-items: center;

						button[type='submit'] {
							display: flex;
							flex-direction: row;
							align-items: center;
							gap: 10px;
							padding: 11px 20px 12px 20px;
							margin: 0;
							background: #fff246;
							border-radius: 6px;
							color: #1d1d1e;
							font-size: 13px;
							font-family: 'URW Form', sans-serif;
							font-weight: 700;
							letter-spacing: 1px;
							text-transform: uppercase;
							line-height: 1;
							box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
							width: fit-content !important;
							height: auto;
							border: none;
							outline: none;
							cursor: pointer;

							// &:active {
							// 	background: #f0e875;
							// }

							img {
								width: 18px;
								padding-bottom: 3px;
							}

							@include respond-above(xs) {
								margin-left: 20px;
							}
						}
					}
				}
			}
		}
	}
}

.box-3 {
	.box-3--wrapper {
		.c-row {
			.c-col {
				.box-title {
					margin-bottom: 30px;

					h2 {
						color: #000;
						font-family: $font3;
						font-weight: 300;
						font-size: 50px;
						line-height: 1;
						text-align: center;
						letter-spacing: 0.01em;
						margin: 0;

						@include respond-below(lg) {
							font-size: 38px;
						}
						@include respond-below(md) {
							font-size: 28px;
							line-height: 1.5;
						}
					}
				}
				.box-text {
					p {
						color: #000000;
						font-family: $font3;
						font-weight: 300;
						font-size: 24px;
						line-height: 1.37;
						text-align: center;
						letter-spacing: 0.01em;

						@include respond-below(md) {
							font-size: 20px;
						}
					}
				}
			}
		}
	}
}

.box-4 {
	padding-top: 115px;
	padding-bottom: 115px;

	.box-4--wrapper {
		#box-showrooms {
			display: flex;
			flex-direction: row;
			column-gap: 60px;

			nav#showrooms-nav {
				margin-top: 105px;
				min-width: 240px;

				ul {
					display: flex;
					flex-direction: column;
					padding: 0;
					margin: 0;
					list-style: none;
					row-gap: 7px;

					li {
						&.active {
							input {
								font-weight: 700;
								text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14);
							}
						}

						input {
							color: #1d1d1e;
							font-family: $font3;
							font-weight: 300;
							font-size: 18px;
							line-height: 1;
							text-align: center;
							text-transform: uppercase;
							border: none;
							border-radius: 0;
							background: transparent;
							cursor: pointer;
						}
					}
				}
			}
			#showrooms-lists {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 40px;
				width: 100%;

				.showrooms-list {
					&-1 {
						.showrooms-list-title {
							background: #1e2832;
							h3 {
								color: #fff;
							}
						}
					}
					&-2 {
						.showrooms-list-title {
							h3 {
								color: #3f3f3f;
							}
						}
					}
					.showrooms-list-title {
						display: block;
						width: 100%;
						max-width: fit-content;
						padding: 14px 30px 12px;
						margin: 0 auto 50px;
						border-radius: 20px;
						border: 1px solid #dfdfdf;

						h3 {
							font-family: $font3;
							font-weight: 600;
							font-size: 20px;
							line-height: 1;
							text-align: center;
							margin: 0;
						}
					}
					.showrooms-list-cards {
						max-height: 500px;
						overflow-y: auto;

						ol {
							padding: 0;
							margin: 0;
							display: grid;
							grid-template-columns: repeat(2, minmax(205px, 1fr));
							row-gap: 60px;
							column-gap: 40px;

							li.showroom-card {
								display: none;
								// display: flex;

								flex-direction: column;
								align-items: center;
								row-gap: 20px;

								&.active {
									display: flex;
								}

								.showroom-card-text {
									flex: 1;

									p {
										color: $cTxtBlack;
										font-family: $font3;
										font-weight: 400;
										font-size: 16px;
										line-height: 1.3;
										text-align: center;
									}
								}
								.showroom-card-action {
									input {
										color: #000000;
										font-family: $font3;
										font-weight: 500;
										font-size: 12px;
										line-height: 14px;
										text-transform: uppercase;
										padding: 14px 30px 12px;
										background: #fff;
										border: 1px solid #bbbbbb;
										border-radius: 5px;
										cursor: pointer;
									}
								}
							}
						}
					}
				}
			}

			#showroom-popup.showroom-card--popup {
				position: fixed;
				inset: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 1;
				backdrop-filter: blur(3px);
				background: rgba(0, 0, 0, 0.2);

				visibility: hidden;
				opacity: 0;

				transition: all 50ms ease-in-out;

				&.active {
					visibility: visible;
					opacity: 1;
				}

				.showroom-card--popup-wrapper {
					width: 650px;
					margin-top: 120px;
					background: $cWhite;
					border-radius: 30px;
					display: flex;
					flex-direction: column;
					overflow: hidden;

					.popup--head {
						display: flex;
						flex-direction: row;
						background: #1e2832;
						padding: 40px 60px 35px 60px;

						p {
							color: $cWhite;
							font-family: $font3;
							font-weight: 600;
							font-size: 20px;
							line-height: 1;
							margin: 0;

							position: relative;

							&:not(:last-child) {
								padding-right: 25px;
								margin-right: 25px;

								&::before {
									content: '';
									position: absolute;
									top: 0;
									right: 0;
									bottom: 3px;
									width: 1px;
									background: $cWhite;
								}
							}
						}
					}

					.popup--body {
						padding: 20px;

						.popup--body-info {
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							gap: 30px;

							p,
							a {
								color: $cTxtBlack;
								font-family: $font3;
								font-weight: 400;
								font-size: 16px;
								line-height: 1.5;

								strong {
									font-weight: 700;
								}
							}

							.info-name {
								p {
									padding-left: 11px;
									border-left: 5px solid #000;
								}
							}
							.info-time {
							}
							.info-products {
								img {
									max-height: 30px;
								}
							}
						}

						.popup--body-map {
							margin-top: 20px;
							line-height: 0;
							border-radius: 10px;
							overflow: hidden;
							height: 200px;

							.popup-map {
								height: 100%;
							}
						}
					}
				}
			}
		}
	}
}

.box-5 {
	margin-bottom: 115px;
	background: #161717;

	.box-5--wrapper {
		padding: 100px 0;

		.c-row {
			.box-title {
				margin-bottom: 40px;

				h2 {
					color: $cWhite;
					font-family: $font3;
					font-weight: 300;
					font-size: 40px;
					line-height: 1;
					text-align: center;
					letter-spacing: 0.01em;
					margin: 0;

					@include respond-below(lg) {
						font-size: 36px;
					}
					@include respond-below(md) {
						font-size: 28px;
						line-height: 1.5;
					}

					strong {
						font-weight: 500;
					}
				}
			}

			.box-form {
				form {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.form-search {
						display: flex;
						flex-direction: row;
						width: 100%;
						max-width: 500px;

						.row-input {
							display: flex;
							flex-direction: row;
							border-bottom: 1px solid $cWhite;
							gap: 10px;
							width: 100%;

							label {
								margin: 0;
								display: flex;
								align-items: center;

								img {
									width: 16px;
									filter: brightness(1) invert(1);
								}
							}
							input {
								width: 100%;
								padding: 0;
								margin-bottom: -1px;
								background: transparent;
								border: 0;
								outline: none;
								height: 48px;

								color: $cWhite;
								font-family: $font3;
								font-weight: 300;
								font-size: 18px;

								&::placeholder {
									color: #cdcdcd;
								}
							}
						}
						button {
							background: $cWhite;
							border: none;
							border-radius: 0;
							height: 48px;

							color: #1e2832;
							font-family: $font3;
							font-weight: 300;
							font-size: 18px;
							line-height: 1;
							margin-bottom: 0;
							padding: 15px 30px;
							min-width: fit-content;
							outline: none;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
}
.box-6 {
	padding-bottom: 100px;

	.box-6--wrapper {
		display: flex;
		flex-direction: column;

		.c-row {
			&-1 {
				padding: 36px 35px;
				border-radius: 30px;
				background: #f6f5f4;

				display: flex;
				flex-direction: row;
				justify-content: space-between;
				gap: 40px;

				@include respond-below(md) {
					flex-direction: column;
				}

				.c-col {
					&-1 {
						@include respond-between(xs, md) {
							display: grid;
							grid-template-columns: 1fr 1fr;
							grid-template-areas:
								't1 t1'
								't2 t3'
								't4 t4';
						}
						@include respond-below(xs) {
							display: flex;
							flex-direction: column;
						}

						.text-1 {
							margin-bottom: 20px;

							@include respond-between(xs, md) {
								grid-area: t1;
							}
							p {
								color: #1e2832;
								font-family: $font3;
								font-weight: 500;
								font-size: 20px;
								line-height: 1;
							}
						}
						.text-2 {
							margin-bottom: 40px;

							@include respond-between(xs, md) {
								grid-area: t2;
							}
							h2 {
								color: #1e2832;
								font-family: $font3;
								font-weight: 600;
								font-size: 23px;
								line-height: 1;
							}
							p {
								color: #1e2832;
								font-family: $font3;
								font-weight: 400;
								font-size: 16px;
								line-height: 1.2;
							}
						}
						.text-3 {
							margin-bottom: 40px;

							@include respond-between(xs, md) {
								grid-area: t3;
							}
							p {
								color: #1e2832;
								font-family: $font3;
								font-weight: 400;
								font-size: 16px;
								line-height: 1.5;
								margin-bottom: 0;
							}
						}
						.text-4 {
							@include respond-between(xs, md) {
								grid-area: t4;
							}
							p {
								color: #1e2832;
								font-family: $font3;
								font-weight: 700;
								font-size: 16px;
								line-height: 1.5;
								margin-bottom: 0;
							}
						}
					}
					&-2 {
						width: 100%;
						max-width: 765px;
						display: flex;
						flex-direction: column;

						.box-map {
							height: 100%;
							line-height: 0;
							margin-bottom: 30px;
							border-radius: 10px;
							overflow: hidden;

							@include respond-below(md) {
								height: 250px;
							}
							#big-map {
								height: 100%;
							}
						}

						.box-info {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							@include respond-below(sm) {
								flex-direction: column;
								row-gap: 40px;
								text-align: center;
							}
							.box-info-left {
								ul {
									padding: 0;
									margin: 0;
									list-style: none;

									li {
										.icons {
											display: inline-block;
											width: 19px;
											margin-right: 8px;
										}

										color: #1e2832;
										font-family: $font3;
										font-weight: 600;
										font-size: 16px;
										line-height: 1.5;

										a {
											color: inherit;
											font-family: inherit;
											font-weight: inherit;
											font-size: inherit;
											line-height: inherit;
										}
									}
								}
							}
							.box-info-right {
								display: flex;
								flex-direction: row;
								align-items: center;
								column-gap: 20px;

								&.active {
									span {
										img {
											transform: scale(-1);
										}
									}
								}

								p {
									color: #1e2832;
									font-family: $font3;
									font-weight: 400;
									font-size: 16px;
									line-height: 20px;
									text-align: right;
									text-transform: uppercase;
									margin: 0;
								}

								span {
									display: inline-flex;
									align-items: center;
									justify-content: center;
									width: 27px;
									min-width: 27px;
									height: 27px;
									border-radius: 100%;
									background: #1e2832;
									cursor: pointer;

									img {
										transition: all 250ms ease-in-out;
									}
								}
							}
						}
					}
				}
			}

			&-2 {
				display: none;

				.tiles {
					display: flex;
					flex-direction: row;
					gap: 38px;
					flex-wrap: wrap;
					padding-top: 60px;

					.tile {
						text-align: center;
						width: calc((100% / 4) - (38px - (38px / 4)));

						@include respond-below(md) {
							width: calc((100% / 2) - (38px - (38px / 2)));
						}

						@include respond-below(xs) {
							width: 100%;
						}

						h3 {
							color: #1d1d1e;
							font-size: 20px;
							font-weight: 700;
							margin-bottom: 22px;

							@include respond-below(md) {
								font-size: 18px;
							}
						}

						.tile-text {
							border-radius: 15px;
							border: 0.5px solid #181c1d;
							padding: 27px 20px;
							box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
							background: #fff;

							a {
								color: #1d1d1e;
								font-size: 16px;
								font-family: $font3;
								font-weight: 600;

								@include respond-below(md) {
									font-size: 14px;
								}
							}
						}
					}
				}
			}
		}
	}
}