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

strong {
	font-weight: 700;
}

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

.breadcrumbs {
	margin-bottom: 45px;
}

.box-1 {
	padding-top: 95px;
	padding-bottom: 125px;
	background: #2e2d2c;

	box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.25);

	.contact-form {
		display: flex;
		flex-direction: row;
		column-gap: 60px;

		._left {
			width: 100%;
			max-width: 350px;

			h1 {
				color: #fff;
				font-size: 50px;
				font-family: $font3;
				letter-spacing: 2px;
				text-transform: uppercase;

				margin-bottom: 64px;
				padding-bottom: 31px;
				border-bottom: 1px solid #fff;
			}

			.contact-form-tiles {
				.tile {
					&:not(:last-child) {
						margin-bottom: 60px;
					}

					h2.tile-title {
						color: #fff;
						font-size: 24px;
						font-weight: 700;
						font-family: $font3;
						letter-spacing: 2px;
						text-transform: uppercase;
						margin-bottom: 50px;

						&._title_border {
							padding-bottom: 25px;
							margin-bottom: 30px;
							margin-left: 45px;
							border-bottom: 1px solid #fff;
						}
					}

					.tile-data {
						.c-row {
							display: flex;
							flex-direction: row;
							column-gap: 20px;

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

							._icon {
								img {
									filter: brightness(0) saturate(100%) invert(79%) sepia(84%)
										saturate(367%) hue-rotate(356deg) brightness(104%)
										contrast(104%);
								}
							}

							._text {
								color: #fff;
								font-size: 16px;
								font-weight: 300;
								font-family: $font3;
								margin-bottom: 0;

								a {
									color: #fff;
									font-size: 16px;
									font-weight: 300;
									font-family: $font3;
									line-height: 1;
									text-decoration: underline;
								}

								&._mails {
								}

								&._phones {
								}
							}
						}
					}
				}
			}
		}

		._right {
			width: 100%;

			#map {
				outline: none;
			}
		}
	}
}

.box-2 {
	padding-top: 50px;
	padding-bottom: 40px;

	h2 {
		color: #1d1d1e;
		font-size: 45px;
		font-weight: 300;
		font-family: $font3;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-align: center;

		margin: 0;

		strong {
			position: relative;
			font-weight: 800;

			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 6px;
				background: #fff246;
				transform: translateY(100%);

				box-shadow: 0 4px 4px rgba(0, 0, 0, 0.11);
			}
		}
	}
}

.box-3 {
	background: #f5f5f5;
	padding-top: 40px;
	padding-bottom: 40px;
}

.box-4 {
	margin-top: 50px;

	@include respond-below(md) {
		margin-top: 0;
	}

	.row {
		&.row-1 {
			margin-top: 40px;
			margin-bottom: 40px;

			._text {
				p {
					color: #1d1d1e;
					font-size: 16px;
					font-family: $font3;
					font-weight: 300;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		&.row-2 {
			.contact_accordion {
				display: flex;
				gap: 10px;
				flex-direction: column;

				> ._title {
					color: #fff;
					font-size: 24px;
					font-family: $font3;
					font-weight: 500;
					text-transform: uppercase;
					line-height: 1;
					letter-spacing: 2px;
					cursor: pointer;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 22px 46px 19px;
					background: #2e2d2c;
					border-radius: 3px;
					font-weight: 200;

					strong {
						font-weight: 600;
						margin-left: 10px;
					}

					img {
						margin-left: auto;
						margin-right: 0;
						filter: brightness(0) saturate(100%) invert(79%) sepia(84%)
							saturate(367%) hue-rotate(356deg) brightness(104%) contrast(104%);
					}

					@include respond-below(md) {
						font-size: 16px;
						padding: 22px 26px 19px;
					}
				}

				._content {
					margin: 40px 0;

					&._2_columns {
						display: grid;
						grid-template-columns: 250px 1fr;
						gap: 50px;

						@include respond-below(md) {
							grid-template-columns: 1fr;
						}

						._left {
							margin-top: 45px;

							@include respond-below(md) {
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: center;
								column-gap: 30px;
								row-gap: 5px;

								margin-top: 0;
							}

							a {
								position: relative;
								display: flex;
								gap: 10px;
								text-transform: uppercase;
								padding: 5px;

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

								&:hover {
									img {
										display: block;
									}
								}

								&::before {
									content: '';
									left: -10px;
									top: 50%;
									bottom: 0;
									width: 9px;
									background: #fff246;
									box-shadow: 0 4px 4px rgba(0, 0, 0, 0.11);
									position: absolute;
									height: calc(100% - 6px);
									transform: translateY(-50%);
									visibility: hidden;
								}

								&.active {
									font-size: 18px;
									font-weight: 700;
									text-shadow: 0 4px 4px rgba(0, 0, 0, 0.19);

									&::before {
										visibility: visible;
									}
								}

								img {
									width: 10px;
									transform: rotate(-90deg);
									display: none;
									margin-bottom: 4px;

									@include respond-below(md) {
										display: none !important;
									}
								}
							}
						}

						._right {
							.contact-btn {
								color: #000;
								font-size: 12px;
								font-family: $font3;
								font-weight: 500;
								line-height: 1;
								padding: 13px 30px;
								border: 1px solid #bbbbbb;
								border-radius: 5px;
								text-align: center;
								text-transform: uppercase;

								margin: 0 auto;
								display: block;
								max-width: fit-content;
							}

							._city_content {
								display: none;

								._city_content_nav {
									margin-bottom: 30px;

									ul {
										padding: 0;
										margin: 0;
										list-style: none;

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

										@include respond-below(md) {
											justify-content: center;
										}

										li {
											a {
												color: #000;
												font-size: 14px;
												font-family: $font3;
												font-weight: 700;
												text-transform: uppercase;
												letter-spacing: 2px;
												line-height: 1;

												display: inline-block;
												padding: 14px 36px;
												border-radius: 5px;
												border: 1.5px solid #000;

												&.active {
													color: #fff;
													background: #000;
												}
											}
										}
									}
								}

								._cities {
									display: none;

									&.active {
										display: block;
									}

									._grid {
										display: grid;
										grid-template-columns: 1fr 1fr 1fr;
										column-gap: 50px;
										row-gap: 50px;

										@include respond-below(md) {
											grid-template-columns: 1fr 1fr;
										}
									}

									._autoryzowani_partnerzy {
										._title {
											font-size: 18px;
											text-align: right;
											text-transform: uppercase;
											text-decoration: underline;
											margin-bottom: 10px;
										}

										._grid {
											background: rgba(244, 244, 244, 0.46);
											padding: 40px;

											&._white {
												background: #fff;
											}

											._city {
												._description {
													height: 100%;
													display: flex;
													justify-content: space-between;
													flex-direction: column;

													._name {
														text-align: center;
														font-weight: 600;

														&::before {
															content: '';
															display: inline-block;
															height: 10px;
															width: 10px;
															background: #fff246;
															margin-right: 5px;
														}
													}

													p {
														line-height: 1.5;

														&._mt50 {
															margin-top: 50px;
														}

														strong {
															position: relative;
														}
													}
												}
											}
										}
									}

									&[type='salony_firmowe'] {
										._city {
											padding-bottom: 30px;
											margin-bottom: 30px;
											border-bottom: 1px solid #bbbbbb;

											._description {
												height: 100%;
												display: flex;
												justify-content: space-between;
												flex-direction: column;

												p {
													line-height: 1.5;

													&._mt50 {
														margin-top: 30px;
													}

													span {
														position: relative;
														display: block;
														margin-bottom: 5px;

														&::after {
															content: '';
															position: absolute;
															bottom: 0;
															left: 50%;
															transform: translateX(-50%);
															width: 50px;
															height: 2px;
															background: #fff246;
														}
													}

													strong {
														position: relative;
													}
												}
											}
										}
									}

									&[type='partnerzy_handlowi'] {
										._city {
											._description {
												._name {
													position: relative;
													font-size: 16px;
													font-weight: 700;
													font-family: $font3;

													text-align: center;
													width: 100%;
													max-width: fit-content;
													display: block;
													margin: 0 auto;

													&::before {
														content: '';
														position: absolute;
														left: -15px;
														top: 5px;
														width: 10px;
														height: 10px;
														background: #fff246;
													}
												}
											}
										}
									}

									._city {
										._description {
											p {
												font-size: 16px;
												font-family: $font3;
												font-weight: 400;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}

					._city_content {
						display: flex;
						flex-direction: row;

						._persons {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: flex-start;
							gap: 70px;
							width: 100%;
							max-width: 1100px;
							margin: 0 auto;

							._person__wrapp {
								flex-basis: 320px;
								text-align: center;

								._person_title {
									color: #1d1d1e;
									font-size: 20px;
									font-family: $font3;
									font-weight: 700;
									margin-bottom: 20px;

									span {
										color: #fff246;
									}
								}

								._person {
									padding: 20px 26px;
									border-radius: 10px;
									box-shadow: 2px -2px 10px 0.5px rgba(0, 0, 0, 0.05);
									flex-basis: calc(100% / 3 - (70px - 70px / 3));

									@include respond-below(md) {
										flex-basis: calc(100% / 2 - (70px - 70px / 2));
									}

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

										&:last-child {
											margin-bottom: 0;
										}

										strong {
											font-weight: 300;

											a {
												font-weight: 300;

												&:hover {
													color: #000;
													text-decoration: underline;
												}
											}
										}
									}
								}
							}
						}
					}

					._city_content._city_content_2 {
						._person {
							padding: 20px 26px;
							border-radius: 10px;
							box-shadow: 2px -2px 10px 0.5px rgba(0, 0, 0, 0.05);
							flex-basis: calc(100% / 3 - (70px - 70px / 3));

							@include respond-below(md) {
								flex-basis: calc(100% / 2 - (70px - 70px / 2));
							}

							p {
								color: #1d1d1e;
								font-size: 16px;
								font-family: $font3;
								font-weight: 300;
								text-align: center;

								&:last-child {
									margin-bottom: 0;
								}

								strong {
									font-weight: 700;

									a {
										font-weight: 700;

										&:hover {
											color: #fff246;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.box-0 {
	._columns {
		width: 100%;
		max-width: 1270px;
		margin: auto;
		display: flex;

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

		._left {
			width: 30%;
			min-width: 350px;
			background: url('/layout/images/contact-left-bg.png') no-repeat;
			background-size: cover;
			padding: 60px;
			text-align: right;
			color: #fff;
			display: flex;
			flex-direction: column;

			@include respond-below(md) {
				width: 100%;
				min-width: unset;
				text-align: center;
				background: transparent;
				color: #1d1d1e;
			}

			._socials {
				margin-top: auto;
				margin-bottom: 0;
				display: flex;
				gap: 10px;
				justify-content: flex-end;

				img {
					height: 30px;
					width: 30px;
				}

				@include respond-below(md) {
					justify-content: center;

					img {
						filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
							saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
					}
				}
			}

			h1,
			._h1 {
				margin-bottom: 50px;
				font-size: 32px;
				font-weight: 600;
			}

			._text {
				margin-bottom: 50px;
				font-weight: 200;
				font-size: 20px;
			}

			._bold {
				font-weight: 600;
			}

			._accordion_small {
				font-size: 15px;
				display: grid;
				grid-template-columns: 1fr;
				gap: 10px;

				._head {
					font-weight: 600;
					cursor: pointer;

					&._active {
						img {
							transform: rotateX(215deg);
						}
					}

					@include respond-below(md) {
						img {
							filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
								saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
						}
					}
				}

				._body {
					color: #fff;
					display: none;

					a {
						color: #fff;
					}

					@include respond-below(md) {
						color: #1d1d1e;

						a {
							color: #1d1d1e;
						}
					}
				}
			}

			._accounts {
				margin-top: 400px;

				@include respond-below(md) {
					margin-top: 50px;
				}

				._icon {
					margin-bottom: 20px;

					@include respond-below(md) {
						filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
							saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
					}
				}

				._text {
					font-size: 15px;

					@include respond-below(md) {
						margin-bottom: 20px;
					}
				}

				._accounts_numbers {
					@include respond-above(md) {
						display: none;
					}
					@include respond-below(md) {
						margin-bottom: 50px;
					}
				}
			}
		}

		._right {
			width: 70%;

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

			._map {
				padding: 60px 60px 0 60px;

				@include respond-below(md) {
					padding: 60px 0;
				}
			}

			.contact-form-box {
				padding: 60px;
				background: #f5f5f5;

				@include respond-below(md) {
					padding: 30px;
				}
			}

			._accounts_numbers {
				padding: 120px 60px 60px 60px;

				@include respond-below(md) {
					display: none;
				}
			}

			.c-row {
				&-1 {
					margin-bottom: 40px;

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

				&-2 {
					width: 100%;
					max-width: 900px;
					margin-left: auto;
					margin-right: auto;

					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 {
						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;
					}

					._radios {
						display: flex;
						flex-direction: row;
						column-gap: 35px;
						justify-content: center;
					}

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

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

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

						> * {
							width: 100%;
						}
					}

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

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

						> * {
							width: 50%;

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

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

					._file {
						padding: 29px;
						margin: 0 0 14px 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: #1d1d1e;
								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;
							}
						}
					}

					button[type='submit'] {
						background: #fbf27a;
						width: fit-content;
						margin-left: auto;
						border: none;

						color: #1d1d1e;
						font-size: 14px;
						font-family: $font3;
						font-weight: 800;
						letter-spacing: 2px;
						text-transform: uppercase;

						padding: 12px 37px;
						box-shadow: 0 4px 4px rgba(0, 0, 0, 0.11);
						outline: none;
						cursor: pointer;

						&:active {
							background: #f0e875;
						}

						img {
							margin-left: 10px;
						}
					}
				}
			}
		}
	}
}