@import url("./header.css");
@font-face {
	font-family:Poppins-Regular;
	src: url('../font/Poppins-Regular.ttf');
}

* {
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	text-decoration: none;
	font-family:Poppins-Regular;
}

:root {
	--primary-accent-clr: #c17a5f;
	--Persian-Orange: var(--primary-accent-clr);
}

.none,.fillter-dropdown, .fix-none, #save{
	display: none;
}

.bg{
	background-color: var(--primary-accent-clr);
}

.clr{
	color: var(--primary-accent-clr);
}

.clr-white{color:white;}

.clr-black{color: black;}

/* Width & Images */
.images{
	width: 100%;
	height: 100%;
}

.object-fit-contain{
	object-fit: contain;
}

.width-100, .table{
	width: 100%;
}

.height-90vh{
	height: 90vh;
}

.border-solid{border: 1px solid;}

.border-color{border-color: var(--Persian-Orange);}

.rtl {order: 1;}
.ltr {order: 2;}

.gap-5px{gap:5px;}

.gap-20px{gap: 20px;}

.gap-50px{gap: 50px;}

.display-flex{display: flex;}

.align-items-end{align-items: flex-end;}

.align-items-center{align-items: center;}

.align-items-start{align-items: flex-start;}

.justify-content-center{justify-content:center;}

.justify-content-between{justify-content:space-between;}

.justify-content-start{justify-content:flex-start;}

.flex-direction-col{flex-direction: column;}

.flex-wrap{flex-wrap: wrap;}

.tt-Cap, .title, th, input::placeholder, textarea::placeholder , .form-btn{
	text-transform: capitalize;
}

.title {font-size:24px;}

.ta-Ctr {text-align: center;}

.text-line-through {text-decoration: line-through;}

.text-line-underline{text-decoration: underline;}

.f-bold {font-weight: bold;}

.csr-pointer, .form-btn{cursor: pointer;}

.radius-20px {border-radius: 20px;}
.radius-50px {border-radius: 50px;}

.form{
	width:300px;
	border-radius:10px;
}

.form-group{
	position: relative;
}

.form-group label{
	margin-left:5px;
	text-transform: capitalize;
}

.toggle-password{
	transform: translateY(-50%);
	color: var(--Persian-Orange);
	position: absolute;
	cursor: pointer;
	right:5%;
	top: 50%;
}

.select, .input, .textarea{
	outline: none;
	padding: 12px 20px;
}

.textarea{
	min-width:100%;
	max-width: 100%;
	min-height: 12vh;
	max-height: 12vh;
}

.form-btn{
	border: none;
	padding: 12px 20px;
}




/* nav menu */
#nav{
	overflow: hidden;
	background-color: var(--Persian-Orange);
}

#navbar-menu{
	padding: 5px 0;
	margin: 0 8%;
	width: 84%;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

#navbar-menu::-webkit-scrollbar {
	display: none;
}

.main-categories li{
	text-transform: capitalize;
}

.main-categories li a{
	color: white;
}

.main-categories li a img{
	display: none;
}

.head-category{
	display: none;
	width: 84%;
	margin: 0 8%;
	position: absolute;
	left: 0;
	background-color: white;
	border-top:6px solid;
	border-top-color:var(--Persian-Orange);
	z-index: 999;
}

.head-category li{
	padding: 5px;
}

.head-category li:nth-child(odd){
	background-color:rgba(193, 122, 95, 0.8);
}

.main-categories li:hover >.head-category{
	display: flex;
	gap: 5px;
}

.sub-category li:nth-child(odd){
	background-color:transparent;
}

/* dashboard */

.dashboard-wrapper{
	display: flex;
}

.aside-navbar, .aside-fillter {
	border-right: 2px solid;
	border-right-color: var(--Persian-Orange);
	width: 220px;
	padding-top: 5px;
}

.aside-navbar ul li a {
	display: flex;
	cursor: pointer;
	width: 95%;
	margin: 10px 0;
	padding: 10px 20px;
	background-color: #eee;
	border-radius: 0 50px 50px 0;
	color: black;
}

.aside-navbar ul li a:hover {
	background-color:var(--Persian-Orange);
	color: white;
}

.main-container {
	width: calc(100% - 220px);
	padding: 20px;
	flex-grow: 1;
}

/* fillter */

.aside-fillter ul{
	padding: 20px 0 0 20px;
}

.aside-fillter ul li ul{
	padding:3px 10px;
}

.aside-fillter ul li ul li a{
	color: black;
}

.fillter-clr-box{
	width: 20px;
	height: 20px;
	display:flex;
	background-color: red;
	border-radius: 50%;
}

.fillter-size-box{
	padding:2px 10px;
}

.pdt-card-container{
	border: 2px solid var(--Persian-Orange);
	border-radius: 10px;
	color: black;
	margin: 0.5%;
	width: 19%;
}

.cardImgCont{
	position: relative;
}

.cardDisPer{
	position: absolute;
	background-color:green;
	border-radius: 20px 0 0 20px;
	padding: 8px;
	top: 20px;
	right:0;
	color: white;
}

.cardTitle, .CouponContent {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cardImgCont img{
	height: 280px;
	border-radius: 10px 10px 0 0;
	width: 100%;
	object-fit: cover;
}

.cardDtls{
	padding: 8px;
	gap:10px;
}

.cardTitle{
	font-size:18px;
}

.cardDis,.cardSale{
	font-size: 24px;
}

.cardDlvy{
	width: 120px;
	color: #aaa;
	font-size: 12px;
	padding: 6px 10px;
	border: 1px solid #aaa;
}
.CouponContainer{
	position: relative;
}
.cardCoupon{
	color: white;
	padding: 2px 4px;
	border-radius: 5px;
	background-color: green;
}

.coupon-info{
	font-size: 11px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #aaa;
	position: relative;
}

.coupon-info p{
	display: none;
	position: absolute;
	top: 150%;
	width: 180px;
	background-color: white;
	border: 2px dashed #aaa;
	padding:8px;
	border-radius: 10px;
	z-index: 999;
}

.coupon-info:hover > p{
	display: block;
}

.reviews-container{
	padding: 0 10%;
}
/*product details*/

.pdtDtlCont{
	padding:0 10%;
	margin-top: 10px;
}

.pdtDtlMainSection{
	position: sticky;
	top: 0;
}

.pdtDtlMainCont{
	width: 600px;
	height:600px;
	position: relative;
	border: 4px double;
	border-color: var(--Persian-Orange);
}

.pdtDtlMainIcon{
	position: absolute;
	right:2%;
	top:2%;
}

#wishlist, .pdtDtlMainIcon li a abbr{
	color:white;
	width: 35px;
	height: 35px;
	display: flex;
	cursor: pointer;
	font-size: 18px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background-color: var(--Persian-Orange);
}

.Share-icon{
	display:none;
	padding-top:5px;
}

.pdtDtlMainIcon li:hover > .Share-icon{
	display:flex;
}

#add_to_cart{
	background-color: var(--Persian-Orange);
	color: white;
	font-size:18px;
	border: 4px solid;
	border-radius: 10px;
	border-color: var(--Persian-Orange);
}

#buy_now{
	background-color: transparent;
	border: 4px double;
	font-size:18px;
	border-radius: 10px;
	color: var(--Persian-Orange);
	border-color: var(--Persian-Orange);
}

#pdtDtlImgListCont{
	margin-top:6%;
}

#pdtDtlImgListCont ul{
	gap:8px;
	flex-direction: column;
}

#pdtDtlImgListCont ul li{
	width:3em;
	height:3.5em;
	cursor: pointer;
	border-radius:5px;
	border: 1px solid;
	border-color: var(--Persian-Orange);
}

#pdtDtlImgListCont ul li img, .pdtDtlClrBox img{
	border-radius:5px;
}

.pdtDtlDis,.pdtDtlSale{
	font-size: 32px;
}

.pdtDtlDisPer{
	font-size: 24px;
	color: green;
}

.pdtDtlClrBox{
	width: 60px;
	height: 60px;
	cursor: pointer;
	border-radius: 5px;
}

.pdtDtlSizeBox{
	cursor: pointer;
	font-weight: bold;
	padding:2px 12px;
	border-radius:10px;
	border: 1px solid;
	text-transform: uppercase;
	color: var(--Persian-Orange);
	border-color: var(--Persian-Orange);
}

.pdtDtlTable{
	border-collapse: collapse;
}

.pdtDtlTable tbody tr th,.pdtDtlTable tbody tr td{
	text-align: start;
	border: none;
	padding: 2px 0;
}

.pdtInfoTable tbody tr th ,.pdtInfoTable tbody tr td{
	text-align: start;
	padding: 2px 0;
	border-bottom:1px solid #aaa;
}

.pdtDtlAboutItem li{
	margin-left:20px;
	list-style-type: disc;
	list-style-position: outside;
}


.pdtDtlReview{
	padding: 50px 10%;
}

.pdtDtlReview .cols{
	width: 45%;
}

.ratings-section {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.overall-rating {
	flex: 1;
	min-width: 200px;
	text-align: center;
	border-right: 1px solid #eee;
	padding-right: 30px;
}

.overall-rating h1 {
	font-size: 60px;
	color: #ff9f00;
	margin-bottom: 5px;
}

.overall-rating span {
	display: block;
	font-size: 18px;
	color: #666;
}

.ratings-breakdown {
	flex: 2;
	min-width: 250px;
}

.rating-row {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.rating-label {
	width: 80px;
	font-size: 15px;
}

.bar-container {
	flex: 1;
	height: 12px;
	background-color: #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	margin: 0 10px;
}

.bar {
	height: 100%;
	background-color: #4caf50;
	border-radius: 6px;
}

.percentage {
	width: 40px;
	font-size: 14px;
	text-align: right;
}

/*cart & wishlist*/
.cart-empty-content img { width: 250px; padding-top: 20px; }

.pdt-cart-item, .pdt-wishlist-item{
	width:500px;
	padding: 10px 20px;
	border-radius: 10px;
}

.pdt-cart-item img, .pdt-wishlist-item img{
	width: 100px;
	height: 100px;
	object-fit: contain;
	border-radius: 10px;
}

.cart-btn{
	background-color: transparent;
	border: none;
}

.cart-price-container{
	padding: 0 20px 20px 20px;
}

#cart-delivery-from, #cart-payment-from{
	/*position: fixed;*/
	padding: 5%;
	width: 100%;
	background-color: white;
}



#cart-edit-section, #cart-delivery-section, #review-rating-section{
	position: fixed;
	top: 0;
	right:-100%;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 333;
	transition: right 0.3s ease-in-out;
}

.cart-edit-container{
	position: absolute;
	right: 0;
	width: 400px;
	height: 100vh;
	padding: 20px;
	overflow-y: auto;
	background-color: white;
}

.cart-edit-container img{
	width: 200px;
	height: 200px;
	object-fit: contain;
	border-radius: 10px;
}

.cart-payment-container{
	padding: 20px;
	width:500px;
}

.cart-payment-container div b{
	border-left: 2px solid #aaa;
	padding: 0 10px;
}

.rating-section{
	padding: 0 3%;
}

.rating-container i{
	font-size: 32px;
}

.rating-container span{
	font-size: 8px;
	text-transform: capitalize;
}

/*review*/
.review-container{
	padding: 20px 10px;
	border-bottom: 1px solid #aaa;
}

.user-img-review{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.review-stars{
	color:#ff9f00;
}

.review-customer-images li{
	width: 80px;
	height: 80px;
}

@media screen and (max-width: 1400px){
	.header{
		padding: 2px 8%;
	}
}

@media screen and (max-width: 1200px){
	.header{
		padding: 2px 5%;
	}
}

@media screen and (max-width: 992px){
}

@media screen and (max-width: 768px){
	.header{
		padding: 2px 3%;
	}

	#search-header{
		width: 180px;
		padding: 8px 12px;
	}

	.search-header-container label{
		padding: 8px 25px;
	}
}

/* Mobile styles */
@media screen and (max-width: 576px){
	/* header */
	.header{
		padding:5px 3%;
	}

	.logo-container{
		order: 1;
	}

	.header-icon-container{
		order: 2;
	}

	.search-header-container{
		order: 3;
		width: 100%;
		margin-top: 5px;
	}

	#search-header{
		width: 80%;
	}

	.search-header-container label{
		padding: 8px 10%;
	}
}

@media screen and (max-width: 400px){

}

#order-coupons-btn{
	color: #aaa;
	border: none;
	font-size: 18px;
	cursor: pointer;
	background-color: transparent;
}