@use "../utils" as *;

/*----------------------------------------*/
/*  FURNITURE CSS START
/*----------------------------------------*/
.bg-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.clr-furniture {
	color: var(--clr-theme-primary) !important;
}
.bg-furniture {
	background-color: var(--clr-theme-primary) !important;
}

.furniture-clr-hover {
	&:hover {
		color: var(--clr-theme-primary) !important;
	}
}

.furniture-bg-hover {
	&:hover {
		background-color: var(--clr-theme-primary) !important;
	}
}

.transition-furniture {
	transition: all 0.3s 0s ease-out;
}

.fs-rating {
	i {
		color: #e8c54a;
	}
}

// Furniture style area start ***
.furniture {
	&__menu {
		.main-menu {
			ul {
				li {
					&:hover {
						a {
							color: var(--clr-theme-primary);
						}
					}
				}
			}
			.submenu {
				li {
					a {
						color: var(--clr-common-heading) !important;
					}
					&:hover {
						a {
							background-color: var(--clr-theme-primary) !important;
							color: var(--clr-common-white) !important;
						}
					}
				}
			}
		}
	}
	&-icon {
		width: 44px;
		height: 44px;
		line-height: 44px;
		text-align: center;
		color: var(--clr-common-white);
		background-color: var(--clr-theme-primary);
		border-radius: 50%;
	}
	&-circle {
		position: absolute;
		left: 15%;
		bottom: 21%;
	}
	&-banner {
		&-area {
			.banner-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
				background-color: var(--clr-theme-primary);
			}
		}
	}
	&__btn-group {
		.solid-btn {
			background-color: var(--clr-theme-primary);
			border: 1px solid var(--clr-theme-primary);
			text-transform: uppercase;
			&:hover {
				background-color: transparent !important;
				color: var(--clr-theme-primary);
				span {
					color: var(--clr-theme-primary);
				}
			}
		}
		.border__btn-banner {
			&:hover {
				background-color: var(--clr-theme-primary);
				color: var(--clr-common-white);
				span {
					color: var(--clr-common-white);
				}
			}
		}
	}
	&__content {
		p {
			max-width: 500px;
		}
	}
	&__product {
		border: none;
		.product-thumb {
			@media screen and (max-width: 425px) {
				padding: 60px 30px 40px;
			}
		}
		.product-action-item {
			margin-top: 0;
			opacity: 0;
			visibility: hidden;
			transform: rotateX(-90deg);
			transition: all 0.3s 0s ease-out;
		}
		.product-content {
			border-top: none;
			padding: 0;
		}
		.product-title {
			text-transform: capitalize;
			a {
				&:hover {
					color: var(--clr-theme-primary);
				}
			}
		}
		.product-trending {
			background-color: var(--clr-theme-primary);
		}
		.user-rating {
			i {
				font-size: 15px;
				color: #e8c54a;
			}
		}
		.product-thumb {
			padding-bottom: 30px;
		}
		&:hover {
			.product-action-item {
				opacity: 1;
				visibility: visible;
				transform: rotate(0);
			}
		}
	}
	&__navigation {
		button {
			border: 5px solid var(--clr-common-white);
			&:hover {
				background-color: var(--clr-theme-primary);
				color: var(--clr-common-white);
			}
		}
	}
	&__blog-item {
		.round-link {
			background: rgba(177, 139, 94, 0.2);
			color: var(--clr-theme-primary);
		}
		.round-link:hover {
			background: var(--clr-theme-primary);
			color: var(--clr-common-white);
		}
	}
	&-seller {
		&__item {
			display: flex;
			align-items: center;
			gap: 30px;
			.fs-image {
				width: 170px;
				img {
					width: 100%;
				}
			}
			.fs-content {
				h5 {
					a {
						&:hover {
							color: var(--clr-theme-primary);
						}
					}
				}
				span {
					color: var(--clr-theme-primary);
					padding: 5px 0;
					display: inline-block;
					font-weight: 500;
				}
			}
		}
	}
	&-testimonial {
		button {
			border: 1px solid var(--clr-theme-primary);
			color: var(--clr-theme-primary);
			&:hover {
				background-color: var(--clr-theme-primary);
			}
		}
		&__item {
			padding: 40px;
			background-color: var(--clr-common-white);
			.ft-head {
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				h5 {
					margin-top: 5px;
					margin-bottom: 2px;
				}
			}
			p {
				margin: 0;
			}
		}
	}
	&-service {
		&__item {
			display: flex;
			align-items: center;
			gap: 20px;
			p {
				margin: 0;
				font-size: 14px;
			}
		}
	}
	&-off {
		&__item {
			padding: 70px 40px;
			.fo-discount {
				display: inline-block;
				font-weight: 500;
				color: var(--clr-theme-primary);
				margin-bottom: 10px;
			}
			.solid-btn {
				background-color: var(--clr-theme-primary);
				padding: 12px 36px;
				&:hover {
					opacity: 0.8;
				}
			}
		}
	}
	&-ad {
		&__item {
			padding: 25px;
			.fad-content {
				padding: 100px 40px;
				@media screen and (max-width: 991px) {
					padding: 30px;
				}
				border: 1px solid var(--clr-common-white);
				h2 {
					font-weight: 600;
					line-height: 60px;
					font-size: 40px;
				}
			}
			.fad-timer {
				padding: 65px 20px;
				@media screen and (max-width: 991px) {
					padding: 30px;
				}
			}
			.countdown-wrapper {
				ul {
					justify-content: center;
					li {
						background-color: rgb(255, 255, 255, 0.3);
					}
				}
			}
		}
	}
	&-rating {
		&__left-item {
			.frl-item {
				max-width: 520px;
				margin-left: 35%;
				margin-right: 30px;
				@media screen and (max-width: 1440px) {
					margin: 30px;
					max-width: 100%;
				}
				.fad-content {
					padding: 50px;
					@media screen and (max-width: 575px) {
						padding: 20px;
						h2 {
							font-size: 30px;
							line-height: 40px;
						}
					}
				}
			}
		}
		&__right-item {
			position: relative;
			.rating-dot {
				position: absolute;
				top: 45%;
				left: 25%;
				cursor: pointer;
				ul {
					display: none;
					position: absolute;
					top: -180px;
					left: -80px;
					padding: 30px;
					width: 250px;
					background-color: var(--clr-common-white);
					transition: all 0.3s 0s ease-out;
					&::after {
						position: absolute;
						bottom: -20px;
						left: 92px;
						background-color: var(--clr-common-white);
						content: "";
						-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
						clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
						transform: rotate(54deg);
						width: 60px;
						height: 70px;
					}
					li {
						list-style: none;
						h6 {
							font-size: 20px;
						}
						span {
							color: var(--clr-theme-primary);
							font-weight: 500;
						}
					}
				}
				&.dot-two {
					top: 68%;
					left: 52%;
					ul {
						display: block;
					}
				}
				&.dot-three {
					top: 35%;
					left: 75%;
				}
				&:hover {
					ul {
						display: block;
					}
				}
			}
		}
	}
	&-trendy {
		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			@media screen and (max-width: 991px) {
				margin-bottom: 30px;
			}
		}
		&__tab {
			.nav-link {
				font-size: 16px;
				color: var(--clr-text-secondary);
				font-weight: 500;
				border-bottom: 2px solid transparent;
				@media screen and (max-width: 575px) {
					margin-left: 5px;
					font-size: 12px;
				}
				&.active {
					border-bottom: 2px solid var(--clr-theme-primary);
					color: var(--clr-text-secondary);
					&#collection-tab {
						position: relative;
						&::after {
							content: "8";
							background-image: url(../../assets/imgs/furniture/icon/tag.png);
							color: var(--clr-common-white);
							padding: 2px 14px;
							position: absolute;
							right: 0px;
							margin: 0;
							top: -25px;
						}
					}
					&#new-tab {
						position: relative;
						&::after {
							content: "5";
							background-image: url(../../assets/imgs/furniture/icon/tag.png);
							color: var(--clr-common-white);
							padding: 2px 14px;
							position: absolute;
							right: 0px;
							margin: 0;
							top: -25px;
						}
					}
					&#top-tab {
						position: relative;
						&::after {
							content: "7";
							background-image: url(../../assets/imgs/furniture/icon/tag.png);
							color: var(--clr-common-white);
							padding: 2px 14px;
							position: absolute;
							right: 0px;
							margin: 0;
							top: -25px;
						}
					}
					&#tensing-tab {
						position: relative;
						&::after {
							content: "5";
							background-image: url(../../assets/imgs/furniture/icon/tag.png);
							color: var(--clr-common-white);
							padding: 2px 14px;
							position: absolute;
							right: 0px;
							margin: 0;
							top: -25px;
						}
					}
				}
			}
		}
	}
}
// Furniture style area end ***
