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

header#header {
	padding-top: 0;
	padding-bottom: 10px;

	.top-header {
		padding-top: 8px;
		padding-bottom: 8px;
		background: linear-gradient(90deg, #f2f2f2 100%, #b8aea4 100%);

		.top-header-data {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;

			.header-social {
				padding: 0;
				margin: 0 10% 0 0;
				list-style: none;
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 15px;

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

				li {
					a {
						&:hover {
							svg {
								path {
									fill: #1e2832;
								}
							}
						}

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

			> ul {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				column-gap: 18px;
				flex-wrap: wrap;

				li {
					&.top-header-btn {
						a {
							font-size: 12px;
							font-weight: 700;

							display: flex;
							align-items: center;
							column-gap: 8px;
							// padding: 5px 10px;
							// border: 0.5px solid #d8d8d8;
							// border-radius: 5px;

							&:hover {
								img {
									filter: brightness(0) saturate(100%) invert(18%) sepia(41%)
										saturate(6507%) hue-rotate(201deg) brightness(93%)
										contrast(101%);
								}
							}

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

				@media (max-width: 500px) {
					justify-content: center;
					row-gap: 10px;

					li {
						order: 1;

						&:not(.unia-item) {
							order: 2;
						}
						&.unia-item {
							width: 100%;
							text-align: center;
						}
					}
				}
			}

			.search-item {
				line-height: 0;

				a.search {
					display: inline-block;
					margin-left: 0;

					img {
						width: 16px;
						height: 14px;
					}
				}
				.search {
					margin: 0;
				}
			}
		}
	}

	.bottom-header {
		padding-top: 10px;
	}
	.header-data {
		// position: relative;
		height: 54px;

		.header-logo {
			img {
				max-width: 263px;
			}
		}
	}
	#header-nav {
		display: flex;

		nav#header-mine-menu {
			li.nav-btn-1,
			li.nav-btn-2,
			li.nav-btn-3,
			li.nav-btn-4 {
				@include respond-above(md) {
					display: none;
				}
			}
		}

		nav#header-mine-menu,
		nav#header-sub-menu {
			a.disabled {
				cursor: default;
			}

			i.arrow {
				line-height: 0;

				@include respond-below(md) {
					position: absolute;
					right: 0;
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 1;
					transition: all 250ms ease-in-out;

					img {
						width: 14px;
					}
				}
			}

			@include respond-above(md) {
				.submenu {
					position: absolute;
					left: 0;
					right: 0;
					top: calc(100% - 10px);
					background: $cWhite;
					border-bottom: 1px solid #dcdcdc;
					box-shadow: 0 1.5px 4px 0 rgba(0, 0, 0, 0.05);
					padding-top: 25px;
					padding-bottom: 25px;

					opacity: 0;
					visibility: hidden;
					overflow: hidden;

					.container {
						position: relative;
					}
				}

				ul {
					list-style: none;

					&:not(.container) {
						padding: 0;
						margin: 0;
					}

					&.lvl-1 {
						display: flex;
						flex-direction: row;
						column-gap: 20px;

						> li {
							height: 54px;
							align-content: center;

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

								> a {
									i {
										transform: scale(-1);
									}
								}
							}
							// &:hover {
							// 	> .submenu {
							// 		opacity: 1;
							// 		visibility: visible;
							// 	}
							// }
							> a {
								display: flex;
								flex-direction: row;
								align-items: center;
								column-gap: 5px;

								span {
									color: $cTxtBlack;
									font-size: 16px;
									font-family: $font3;
									font-weight: 600;
									// letter-spacing: 1px;
									// text-transform: uppercase;
									line-height: 1;
									margin-bottom: -4px;

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

						@include respond-below(xl) {
							column-gap: 20px;
						}
						@include respond-below(lg) {
							column-gap: 15px;
						}
					}
					&.lvl-2 {
						width: 150px;

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

							&:hover {
								> a {
									span {
										text-shadow:
											0px 0.2px 0px $cTxtBlack,
											0px -0.2px 0px $cTxtBlack,
											0.2px 0px 0px $cTxtBlack,
											-0.2px 0px 0px $cTxtBlack,
											-0.2px -0.2px 0px $cTxtBlack,
											0.2px 0.2px 0px $cTxtBlack,
											0.2px -0.2px 0px $cTxtBlack,
											-0.2px 0.2px 0px $cTxtBlack,
											-0.2px 0.2px 0px $cTxtBlack;

										&::before {
											width: 100%;
											visibility: visible;
										}
									}

									img {
										width: 11px;
									}
								}

								.lvl-3 {
									opacity: 1;
									visibility: visible;
								}
							}

							> a {
								position: relative;
								width: 100%;
								display: inline-flex;
								flex-direction: row;
								align-items: center;
								column-gap: 5px;
								text-decoration: none;
								transition: all 250ms ease-in-out;

								span {
									display: inline-block;
									position: relative;
									color: $cTxtBlack;
									font-size: 16px;
									font-family: $font3;
									font-weight: 500;
									line-height: 1;
									transition: all 250ms ease-in-out;

									&::before {
										content: '';
										position: absolute;
										bottom: -10px;
										left: 0;
										width: 0;
										height: 3px;
										background: $cTxtBlack;
										visibility: hidden;
										transition: all 250ms ease-in-out;
									}
								}

								img {
									transform: rotate(-90deg);
									width: 0;
									transition: all 250ms ease-in-out;
								}
							}
						}
					}
					&.lvl-3 {
						position: absolute;
						// left: calc(150px + 15px + 60px);
						left: 150px;
						top: 0;
						right: 0;
						bottom: 0;
						transition: all 250ms ease-in-out;
						padding-left: 75px;

						opacity: 0;
						visibility: hidden;

						&.lvl-3-big {
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							column-gap: 60px;

							> li,
							> .lvl-3-col > li {
								> a {
									text-decoration: none;

									span {
										color: $cTxtBlack;
										font-size: 16px;
										font-family: $font3;
										font-weight: 700;
										line-height: 1;
									}

									.arrow {
										display: none;
									}
								}
							}
							> .lvl-3-col {
								display: flex;
								flex-direction: column;
								row-gap: 30px;
							}

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

							> li.parent {
								&:hover {
									> a {
										span {
											&::before {
												width: 100%;
												visibility: visible;
											}
										}
									}
									.lvl-4 {
										opacity: 1;
										visibility: visible;
									}
								}

								> a {
									position: relative;
									width: 100%;
									display: inline-flex;
									flex-direction: row;
									align-items: center;
									column-gap: 5px;
									text-decoration: none;
									transition: all 250ms ease-in-out;

									span {
										display: inline-block;
										position: relative;
										transition: all 250ms ease-in-out;

										&::before {
											content: '';
											position: absolute;
											bottom: -10px;
											left: 0;
											width: 0;
											height: 3px;
											background: $cTxtBlack;
											visibility: hidden;
											transition: all 250ms ease-in-out;
										}
									}
								}
							}
						}

						&:not(.lvl-3-big) {
							> li {
								&:not(:last-child) {
									margin-bottom: 20px;

									@include respond-below(lg) {
										margin-bottom: 10px;
									}
								}
								> a {
									text-decoration: none;

									span {
										color: $cTxtBlack;
										font-size: 16px;
										font-family: $font3;
										font-weight: 300;
										line-height: 1;

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

						@include respond-below(lg) {
							padding-left: 50px;
						}
					}
					&.lvl-4 {
						opacity: 0;
						visibility: hidden;
						transition: all 250ms ease-in-out;
						margin-top: 20px;
						> li {
							&:not(:last-child) {
								margin-bottom: 20px;

								@include respond-below(lg) {
									margin-bottom: 10px;
								}
							}
							> a {
								text-decoration: none;
								span {
									color: $cTxtBlack;
									font-size: 16px;
									font-family: $font3;
									font-weight: 300;
									line-height: 1;

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

					li.nav-btn-1,
					li.nav-btn-2,
					li.nav-btn-3 {
						a {
							span {
								font-weight: 500;
							}
						}
					}
				}
			}

			@include respond-below(md) {
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				height: 0;
				overflow: hidden;
				transition: all 250ms ease-in-out;

				background: rgba(255, 255, 255, 0.5);
				backdrop-filter: blur(10px);

				&.visible {
					padding: 10px 0 50px;
					height: calc(100dvh - 110px) !important;
					overflow: auto;
				}

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

					&.lvl-1 {
						max-width: 540px;
						width: 100%;
						padding-right: 15px;
						padding-left: 15px;
						margin-right: auto;
						margin-left: auto;

						> li {
							&:not(:last-child) {
								border-bottom: 1px solid rgba(0, 0, 0, 0.1);
							}

							> a {
								padding-top: 10px;
								padding-bottom: 10px;
								font-weight: 600;
							}

							ul {
								padding-left: 15px;
								border-left: 1px solid rgba(17, 14, 12, 0.1);
							}
						}
					}

					&.lvl-2 {
						> li {
							> a {
								padding-top: 10px;
								padding-bottom: 10px;
							}
						}
					}

					&.lvl-3 {
						> .lvl-3-col {
							> li {
								> a {
									padding-top: 10px;
									padding-bottom: 10px;

									br {
										display: none;
									}
								}
							}
						}
						> li {
							> a {
								padding-top: 10px;
								padding-bottom: 10px;
							}
						}
					}

					&.lvl-4 {
						> li {
							> a {
								padding-top: 5px;
								padding-bottom: 5px;
							}
						}
					}

					li {
						&.active {
							> a {
								.arrow {
									transform: scale(-1);
								}
							}
						}

						&.parent {
							> a {
								font-weight: 600;
							}
						}

						a {
							color: $cTxtBlack;
							position: relative;
							padding-right: 30px;

							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;

							span {
								font-size: 16px;
							}

							&:hover {
								color: $cTxtBlack;
							}
						}
					}

					&:not(.lvl-1) {
						display: none;
					}
				}

				.container {
					padding: 0;
					margin: 0;
					max-width: unset;
				}
			}

			ul.lvl-1 {
				.btn-action {
					margin-right: 80px;
					.btn1 {
						color: #303030;
						font-family: $font3;
						font-size: 15px;
						font-weight: 700;
						line-height: 1;

						padding: 10px 15px 8px !important;
						background: #ffed00;
						border-radius: 6px;
						box-shadow: 0 4px 4px #e9e3de;
						border: none;
						transition: all 250ms ease-in-out;

						&:hover {
							color: $cWhite;
							background: #1e2832;
						}
					}
				}
			}
		}

		#header-mine-menu-btn {
			position: relative;
			height: 20px;
			width: 33px;
			// position: fixed;
			// bottom: 10px;
			// right: 10px;
			// color: #fff;
			// background: #000;
			display: none;
			z-index: 9999;
			// line-height: 50px;
			// text-align: center;
			// font-size: 25px;
			cursor: pointer;
			// @include border-radius(50%);
			overflow: hidden;

			&.active {
				&::before {
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(45deg);
				}
				&::after {
					bottom: 50%;
					left: 50%;
					transform: translate(-50%, -50%) rotate(-45deg);
				}

				span.line {
					transform: translateX(calc(100% + 2px));
				}
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}

			span.line {
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				height: 1px;
				background: #000;
				transition: all 250ms ease-in-out;
			}

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

.header-logo {
	min-height: 45px;

	.box-logo-relative {
		position: relative;
		transform-style: preserve-3d;
		width: 100%;
		height: 100%;

		.box-logo-absolute {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120px;
			height: 46px;
			object-fit: contain;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			-moz-animation: action-logo 4s linear infinite alternate;
			-webkit-animation: action-logo 4s linear infinite alternate;
			-ms-animation: none;

			&.box-logo-absolute-front {
			}
			&.box-logo-absolute-back {
				transform: rotateY(180deg);
				-moz-animation: action-logo-back 4s linear infinite alternate;
				-webkit-animation: action-logo-back 4s linear infinite alternate;
				-ms-animation: none;
			}

			img {
				width: 100%;
				height: 46px;
				object-fit: contain;
			}
		}
	}
}
@keyframes action-logo {
	0% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	40% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	61% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	100% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
}
@keyframes action-logo-back {
	0% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	40% {
		transform: rotateY(180deg);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	61% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	100% {
		transform: rotateY(0);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
}