@use '../../utils' as *;

/*----------------------------------------*/
/*  3.3.2 Shop Style
/*----------------------------------------*/



.product-details-wrapper {
	&.shop-details{
		margin-inline-start: 40px;
		@media #{$lg}{
			margin-inline-start: 20px;
		}
		@media #{$md}{
			margin-inline-start: 0px;
		}
	}
}

.rs-shop-meta-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.rs-shorting-select{
    .nice-select{
		height: 52px;
		display: flex;
		align-items: center;
		background: transparent;
		min-width: 220px;
        &::after{
            font-size: 18px;
        }
        .list{
            margin-top: 0;
            border-radius: 0 0 4px 4px;
            width: 100%;
            padding-bottom: 5px;
            padding-top: 5px;
            .option{
                &:hover{
                    color: var(--rs-theme-primary);
                }
            }
        }
    }
}

.rs-product{
	&-item{
		background: var(--rs-white);
		padding-top: 12px;
		padding-inline: 12px;
		padding-bottom: 22px;
		border-radius: 6px;
		&:hover{
			.rs-product-thumb{
				&::before{
					opacity: 1;
  					visibility: visible;
				}
				img{
					transform: scale(1.1);
				}
			}
			.rs-product-btn{
				opacity: 1;
				visibility: visible;
				transform: translateY(0px);
			}
		}
	}
	&-tag{
		font-size: 14px;
	}
    &-thumb{
        position: relative;
        z-index: 1;
        overflow: hidden;
		border-radius: 6px;
        img{
            width: 100%;
            transition: all 0.3s ease-out 0s;
        }
    }
	&-btn{
		position: absolute;
		opacity: 0;
		visibility: hidden;
		bottom: 0px;
		transition: 0.5s;
		transform: translateY(40px);
		width: 100%;
		z-index: 1;
		.product-btn{
			background: var(--rs-theme-yellow);
			padding-top: 10px;
			padding-bottom: 10px;
			padding-inline-end:30px;
			padding-inline-start: 30px;
			font-weight: 500;
			gap: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 0.6s;
			color: var(--rs-title-primary);
			z-index: 1;
			&:hover{
				background: var(--rs-theme-blue);
				color: var(--rs-white);
			}
		}
    }
    &-content{
		text-align: center;
        margin-top: 15px;
    }
    &-title{
		margin-bottom: 5px;
 		margin-top: 3px;
		a{
			&:hover{
            	color: var(--rs-theme-yellow);
        	}
		}
    }
    &-price{
        .rs-current-price{
			font-size: 16px;
			color: var(--rs-title-primary);
        }
        .rs-product-discount-price{
            color: #5d5d5d;
            opacity: .5;
        }
    }
    &-badge{
        position: absolute;
        inset-inline-start: 10px;
        top: 10px;
		z-index: 1;
        span{
			font-size: 13px;
			font-weight: 600;
			padding: 4px 10px;
			text-transform: uppercase;
			color: var(--rs-white);
			border-radius: 4px;
			&.new{
				background: #5EA9B4;
			}
			&.hot{
				background: #E34A36;
			}
			&.off{
				background: #FECE00;
				color: var(--rs-title-primary);
			}
        }
    }
}

// shop details style
.item-details {
	&-reviews-wrapper{
		margin-bottom: 50px;
	}
	&-wrapper{
		margin-inline-start: 50px;
		@media #{$lg}{
			margin-inline-start: 0px;
		}
	}
	&-active {
		overflow: hidden;
	}
	&-thumb {
		position: relative;
		width: 186px;
		flex: 0 0 auto;
		border-radius: 4px;
		@media #{$md} {
			margin: 0 auto 20px;
		}
		width: 100%;
		flex: 0 0 auto;
		text-align: center;
		position: relative;
		@include flexbox();
		align-items: flex-end;
		justify-content: center;
		img {
			width: 100%;
			border-radius: 4px;
		}
	}
	&-nav {
		& .swiper-wrapper {
			display: inline-flex;
			align-items: center;
			gap: 20px;
			& .custom-button {
				border: none;
				background: transparent;
				padding: 0;
				position: relative;
				width: 115px;
				height: 115px;
				border-radius: 4px;
				border: 1px solid transparent;
				background: transparent;
				@include flexbox();
				align-items: center;
				justify-content: center;
				overflow: hidden;
				line-height: 1;
				transition: all 0.3s ease-in-out;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			& .swiper-slide {
				width: auto !important;
			}
		}
		& .swiper-slide-thumb-active {
			& .custom-button {
				background: var(--rs-white);
				border-color: var(--rs-theme-yellow);
			}
		}
	}
	&-rating-count{
		span{
			font-size: 14px;
		}
	}
	&-price{
		display: flex;
		align-items: end;
		gap: 5px;
	}
	&-old-price{
		font-size: 16px;
			color: var(--rs-text-primary);
			text-decoration-line: line-through;
	}
	&-current-price{
		font-size: 24px;
	}
	&-count-wrap{
		border-bottom: 1px solid rgba(62, 62, 62, 0.1);
		padding-bottom: 30px;
		margin-bottom: 20px;
	}
	&-action{
		.rs-btn{
			background: var(--rs-theme-blue);
			display: flex;
			gap: 10px;
			height: 48px;
			&:hover{
				background: var(--rs-theme-yellow);
			}
		}
	}
	&-more{
		a{
			font-size: 16px;
			&:hover{
				color: var(--rs-theme-primary);
			}
		}
	}
	&-tags{
		a{
			font-size: 16px;
			&:hover{
				color: var(--rs-theme-primary);
			}
		}
	}
	&-title{
		@media #{$md}{
			font-size: 30px;
		}
		@media #{$xs}{
			font-size: 26px;
		}
	}
}

.product-rating{
	position: relative;
	padding-inline-end: 10px;
	margin-inline-end: 10px;
	&::before{
		position: absolute;
		content: "";
		inset-inline-end: 0;
		top: 0px;
		width: 1px;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	i{
		font-size: 14px;
	}
}

// tab style
.product-information-tab{
	.nav-link{
		background:var(--rs-white);
		color: var(--rs-title-primary);
		padding: 0 40px;
		text-align: left;
		font-weight: 600;
		font-size: 18px;
		border-radius: 0px;
		height: 60px;
		transition: .3s;
		&:hover{
			background-color: var(--rs-theme-yellow);
			color: var(--rs-title-primary);
		}
		@media #{$xs}{
			padding: 0 20px;
			height: 50px;
			font-size: 16px;
		}
		&.active{
			background-color: var(--rs-theme-blue);
			border-color: var(--rs-theme-blue);
			color: var(--rs-white);
		}
	}
	.has-border{
		border-bottom: 1px solid var(--rs-border-primary);
	}

}

// review style
.product-review{
	&-form{
		background: var(--rs-white);
		padding: 30px;
		border-radius: 12px;
	}
	&-avater{
		display: flex;
		align-items: center;
		gap: 13px;
		&-thumb{
			img{
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
		
		}
	}
	&-item{
		&:not(:last-child){
			border-bottom: 1px solid var(--rs-border-primary);
			padding-bottom: 25px;
			margin-bottom: 25px;
		}
	}
	&-input{
		input{
			height: 60px;
		}
		&.is-textarea{
			textarea{
				height: 180px;
			}
		}
	}
	&-btn{
		.rs-btn{
			&:hover{
				background: var(--rs-theme-yellow);
			}
		}
	}
}


.product-details-social{
	.product-details-social-title{
			font-size: 15px;
  			color: var(--rs-title-primary);
	}
	a{
		background: transparent;
		border: 1px solid var(--rs-border-primary);
		border-radius: 50%;
		svg{
			path{
				fill: var(--rs-black);
			}
		}
	}
}