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

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

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 {
			margin-bottom: 50px;

			.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: #1d1d1e;
					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 {
											position: relative;
											max-width: fit-content;
											margin-left: auto;

											color: #3f3f3f;
											font-size: 18px;
											font-weight: 300;
											text-align: right;
											text-transform: uppercase;
											// text-decoration: underline;
											// margin-bottom: 10px;
											padding-bottom: 2px;
											margin-bottom: -3px;
											line-height: 1;

											&::before {
												content: '';
												position: absolute;
												left: 0;
												right: 0;
												bottom: 0;
												height: 1px;
												background: #bbbbbb;
											}
										}

										._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;

														&::after {
															content: '';
															position: absolute;
															bottom: -5px;
															left: 0;
															right: 0;
															height: 2px;
															background: #fff246;
														}
													}
												}
											}
										}
									}

									&[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;

							@include respond-below(md) {
								gap: 40px;
							}

							&.export {
								max-width: 920px;

								._person__wrapp {
									@include respond-above(md) {
										flex-basis: 260px;
									}

									._person {
										p {
											strong {
												font-weight: 700;

												a {
													font-weight: 700;
												}
											}
										}
									}
								}
							}

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

								@include respond-below(sm) {
									flex-basis: calc(100% / 2 - (40px - 40px / 2));
								}
								@include respond-below(xs) {
									flex-basis: 100%;
								}

								._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);
									// width: calc(100% / 3 - (70px - 70px / 3));
									width: 100%;
									// @include respond-below(md) {
									// 	width: calc(100% / 2 - (40px - 40px / 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);
							width: calc(100% / 3 - (70px - 70px / 3));

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

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

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

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

								strong {
									font-weight: 700;

									a {
										font-weight: 700;

										&:hover {
											color: #fff246;
										}

										@include respond-below(xs) {
											font-size: 12px;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		&.row-3 {
			._h1 {
				color: #181c1d;
				font-size: 32px;
				font-family: $font3;
				font-weight: 300;
				padding: 40px 0px;
			}
		}
	}
}

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

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

		._left {
			width: 40%;
			min-width: 520px;
			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(lg) {
				padding: 60px 30px;
				min-width: 410px;
			}

			@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-transform: uppercase;
			}

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

			._bold {
				// font-weight: 600;
				font-weight: 500;
			}

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

				._head_link {
					> a {
						color: #fff;
						font-family: $font3;
						// font-weight: 600;
						font-weight: 500;
						cursor: pointer;
					}
				}

				._head {
					// font-weight: 600;
					font-weight: 500;
					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: 280px;
				display: grid;
				grid-template-columns: 1fr auto;
				grid-template-areas: 'icon text' 'numbers numbers';
				align-items: center;
				gap: 20px 30px;
				margin-bottom: 40px;

				@include respond-below(md) {
					margin-top: 50px;
					margin-bottom: 50px;
					grid-template-columns: 1fr;
					grid-template-areas: 'icon' 'text' 'numbers';
				}

				._icon {
					grid-area: icon;
					// margin-bottom: 20px;
					width: 100%;
					max-width: 78px;
					margin-left: auto;

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

				._text {
					grid-area: text;
					font-size: 15px;
					margin: 0;

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

				._accounts_numbers {
					grid-area: numbers;
					font-size: 20px;
					font-weight: 300;

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

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

		._right {
			// width: 60%;

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

			._h1 {
				color: #181c1d;
				font-size: 32px;
				font-family: $font3;
				font-weight: 300;
				padding: 40px 60px 0px 60px;
			}

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

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

			.contact-form-box {
				padding: 60px 30px 30px 30px;
				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 {
						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;
					}

					.voivodeship__wrapper {
						position: relative;

						&::before {
							content: '\f107';
							font: normal normal normal 14px / 1 FontAwesome;
							font-size: 14px;
							text-rendering: auto;
							position: absolute;
							top: 50%;
							right: 20px;
							transform: translateY(-50%);
							z-index: 1;
						}
					}

					._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;
							}

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

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

					.form_actions {
						align-items: center;

						@include respond-below(xs) {
							flex-direction: column;
							row-gap: 20px;
						}
					}

					.g-recaptcha {
						@include respond-above(xs) {
							max-width: fit-content;
							margin-left: auto;
						}
						@include respond-below(xs) {
							display: flex;
							justify-content: center;
						}
					}

					button[type='submit'] {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 10px;
						padding: 17px 20px 13px 38px;
						margin-bottom: 5px;
						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;
						border: none;
						outline: none;
						cursor: pointer;

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

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

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