@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;
	padding-bottom: 0;
	overflow: hidden;
}

.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-map-showrooms {
	display: flex;
	height: calc(100svh - 119px);

	#showrooms-sidebar {
		width: 500px;
		min-width: 500px;
		background: #fff;
		transition: all 300ms ease-in-out;

		#showrooms-sidebar--header {
			padding: 20px;

			#search-showrooms-form {
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #f7f6f5;
				border-radius: 100px;

				#place {
					width: 100%;
					border: none;
					padding: 12px 12px 12px 30px;
					color: #1d1d1e;
					font-size: 20px;
					font-weight: 500;
					background: transparent;
					outline: none !important;

					&::placeholder {
						color: #1d1d1e;
					}
				}

				button[type='submit'] {
					color: #fff;
					font-size: 16px;
					font-weight: 700;
					padding: 16px 30px 15px;
					background: #1e2832;
					border-radius: 100px;
					border: none !important;
					box-shadow: none !important;
					outline: none !important;
					cursor: pointer;
				}
			}
		}

		#results-list {
			display: flex;
			flex-direction: column;
			row-gap: 12px;
			padding: 20px;

			overflow-y: auto;
			overflow-x: hidden;
			height: calc(100svh - 119px);

			.sidebar-item {
				position: relative;
				cursor: pointer;

				&:hover {
					.sidebar-item--wrapper {
						background: #fff;
						box-shadow: -2px 2px 4.6px rgb(180, 170, 162, 0.5);
					}
				}
				&.active {
					.sidebar-item--wrapper {
						background: #fff;
						border: 1px solid #b4aaa2;
						box-shadow: -2px 2px 4.6px #b4aaa2;
					}
				}

				.sidebar-item--wrapper {
					display: grid;
					grid-template-columns: 200px 1fr;
					gap: 48px 32px;
					padding: 24px;
					// border: 1px solid #b4aaa2;
					border-radius: 10px;
					width: 100%;
					background: #f7f6f5;
					transition: all 250ms ease-in-out;
					border: 1px solid #f7f6f5;

					.item-type {
						&.sales {
							span {
								background: #1e2832;
							}
						}
						&.partner {
							span {
								background: #b4aaa2;
							}
						}

						span {
							display: inline-flex;
							padding: 8px 22px 7px;

							color: $cWhite;
							font-family: $font3;
							font-style: normal;
							font-weight: 700;
							font-size: 16px;
							line-height: 1;

							border-radius: 100px;
						}
					}

					.item-location {
						display: inline-block;
						border-left: 5px solid #1e2832;
						padding-left: 14px;
						height: fit-content;

						> strong {
							font-size: 17px;
						}
						p {
							color: #1d1d1e;
							font-size: 16px;
							font-family: $font3;
						}
					}

					.item-working-hours {
						p {
							color: #1d1d1e;
							font-size: 16px;
							line-height: 1.5;
							font-family: $font3;
						}
					}
					.item-contact {
						ul {
							list-style: none;
							padding: 0;
							margin: 0;
							display: flex;
							flex-direction: column;
							row-gap: 6px;

							li {
								display: flex;
								flex-direction: row;
								align-content: center;
								column-gap: 6px;

								a {
									color: #1d1d1e;
									font-size: 16px;
									line-height: 1.5;
									font-family: $font3;
								}
							}
						}
					}
				}
			}
		}
	}

	#showrooms-data-box {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;

		#showroom-popup.showroom-card--popup {
			visibility: hidden;
			opacity: 0;
			transition: all 50ms ease-in-out;

			position: absolute;
			z-index: 1;
			// left: calc(50% + 250px);
			left: 30px;
			top: 50%;
			transform: translateY(-50%);

			&.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;
					padding: 40px 60px 35px 60px;

					&[data-type='sales'] {
						background: #1e2832;
					}
					&[data-type='partner'] {
						background: #b6aca3;
					}

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

						position: relative;

						&.text {
							padding-right: 25px;
							margin-right: 25px;

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

					.close-popup {
						cursor: pointer;
						margin: 0 0 0 auto;
						width: 20px;
						height: 20px;
						color: #fff;
						font-size: 35px;
						line-height: 0.7;
					}
				}

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

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

							strong {
								font-weight: 700;
							}
						}

						.info-name {
							padding-left: 11px;
							border-left: 5px solid #000;
							height: fit-content;

							p {
							}
						}
						.info-time {
						}

						.info-products {
							padding-left: 15px;

							> p {
								color: $cTxtBlack;
								font-family: $font3;
								font-weight: 700;
								font-size: 16px;
								line-height: 1;
								margin-bottom: 10px;
							}
							ul {
								padding: 0;
								margin: 0;
								list-style: none;
								display: flex;
								flex-direction: row;
								column-gap: 24px;
								max-width: 200px;
								align-items: center;

								li {
									display: flex;
									flex-direction: row;
									align-items: center;
									row-gap: 12px;
									column-gap: 5px;
									width: calc(100% / 3 - (24px - (24px / 3)));
									max-width: fit-content;

									p {
										color: $cTxtBlack;
										font-family: $font3;
										font-weight: 600;
										font-size: 8px;
										line-height: 1;
										text-transform: uppercase;
										margin: 0;
									}

									img {
										max-height: 30px;
									}
								}
							}
						}

						.info-contact {
							ul {
								padding: 0;
								margin: 0;
								display: flex;
								flex-direction: column;
								row-gap: 6px;

								li {
									display: flex;
									flex-direction: row;
									align-content: center;
									column-gap: 6px;

									a {
										color: #1d1d1e;
										font-family: $font3;
										font-size: 16px;
										line-height: 1.5;
									}
								}
							}

							.showroom-contact-btn {
								color: #1e2832;
								font-family: $font3;
								font-size: 10px;
								font-weight: 700;
								padding: 13px 16px 10px;
								margin: 10px 0 0 auto;
								width: fit-content;

								background: #ffed00;
								box-shadow: 0px 4px 4px #e9e3de;
								border-radius: 10px;
							}
						}
					}

					.popup--body-footer {
						.popup--body-footer--baner {
							padding: 0 20px 20px 20px;

							img {
								border-radius: 10px;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
}