:root {
	--black: #1f1f1f;
	--grey: #737373;
	--grey-light: #a1a1a1;
	
	--white: #fff;
	--white-orange: #fff3d9;
	
	--orange: #FF8303;
	--orange-light: #ffd685;
	--orange-x-light: #ffe2b8;
	--orange-xx-light: #fffcf0;
	
	--red: #db0404;
	--green: #00b530;
	
	--border-radius:5px;
	--box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
	--box-shadow-1: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	
	--transition: all 0.2s linear;
}
@media (prefers-color-scheme: dark) {
      select {
        color: #ffffff; /* White text */
        background-color: #333333; /* Dark background */
      }
      option {
        color: #ffffff; /* White text */
        background-color: #333333; /* Dark background */
      }
    }
/* UI KIT */
a{
	text-decoration:none;
}
.side-category{
	font-weight:500;
	padding:5px;
	color:var(--black)
}
.btn-imp{
	width:150px;
	background: var(--orange);
	background: #FF8303;
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:2px solid var(--orange);
	border-radius:var(--border-radius);
}
.btn-imp:hover{
	background: var(--orange);
	color: var(--white);
}
.btn-nrm{
	width:150px;
	background: var(--orange-x-light);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:2px solid var(--orange-x-light);
	border-radius:var(--border-radius);
}
.btn-nrm:hover{
	background: var(--orange-light);
}
.btn-igr{
	width:150px;
	background: var(--white);
	padding:9px 20px;
	font-size:16px;
	font-weight:500;
	border:none;
	border-radius:var(--border-radius);
}
.btn-igr:hover{
	color: var(--grey);
}
@media( max-width: 768px){
	.btn-imp{
		font-size:16px;
	}
	.btn-nrm{
		font-size:16px;
	}
	.btn-igr{
		font-size:16px;
	}
}

.input-group span{
	position: absolute;
	padding: 9px 15px;
	color:var(--orange);
	font-size:16px;
	font-weight:700;
}
.input-text, .select-text{
	width: 100%;
	padding: 9px;
	padding-left:50px;
	border:1px solid var(--orange-light);
	background:var(--orange-xx-light);
	font-size:16px;	
}
.input-text::placeholder{
	color:var(--grey);
}
.input-text:hover{
	box-shadow: inset 1px 2px 8px var(--orange-x-light);
}
.input-text:focus{
	outline-color: var(--orange);
	box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px var(--orange-x-light);
}
.select-text{
	color:var(--grey);
}
.select-text:hover{
	box-shadow: inset 1px 2px 8px var(--orange-x-light);
}
.select-text:focus{
	outline-color: var(--orange);
	box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px var(--orange-x-light);
}
@media( max-width: 768px){
	.input-group span{
		padding: 9px 15px;
		font-size:18px;
	}
	.input-text, .select-text{
		padding-left:50px;
		font-size:18px;	
		border:1px solid var(--orange-light);
	}
}

/*Headings*/
.sub-heading-1{
	font-size:20px;
	font-weight:600;
	color:rgba(0,0,0,0.8);
	padding:15px 3px;
}
@media( max-width: 768px){
	.sub-heading-1{
		font-size:23px;
		padding:10px 3px;
	}
}
/* Header */
.header{
	padding:15px 30px;
}
.header-brand{
	padding-right:20px;
	font-size:25px;
	font-weight:900;
}
.header-brand a{
	text-decoration:none;
	color:var(--black);
}
.header-brand img{
	width:35px;
}
.header-icons{
	padding:0px 20px;
	font-size:25px;
}
.header-icons a{
	text-decoration:none;
	color: var(--black);
}
.cart-count{
	background: var(--orange-light);
	color: var(--black);
	font-size: 14px;
	padding:5px;
}
.header-m-search{
	display:none;
}
.header-shop-name{
	background:var(--orange-x-light);
	padding:5px 30px;
	font-size:14px;
}
.header-shop-name a{
	text-decoration:none;
	color:var(--black);
}
.select-shop-drop li{
	border-bottom:1px solid rgba(0,0,0,0.2);
}
.dropdown-item{
	padding:10px 30px;
}
.change-area{
	padding:3px 10px;
}
.search-list{
	display:none;
	padding:10px 0px;
	height:auto;
	max-width:500px;
	min-width:300px;
	background-color:var(--white);
	position:fixed!important;
	z-index:2;
	overflow:auto;
	box-shadow: var(--box-shadow-1);
	border:1px solid var(--orange-x-light);
}
.search-list-a{
	padding:5px;
	color:var(--black);
	border-bottom:1px solid var(--orange-x-light);
}
.search-list-a a{
	color:var(--black);
	padding:10px;
	width:100%;
}
@media( max-width: 768px){
	.header{
		padding:10px 10px;
	}
	.header-brand{
		padding-right:0px;
		font-size:23px;
	}
	.header-brand img{
		width:25px;
	}
	.header-search{
		display:none;
	}
	.header-icons{
		padding:0px 10px;
		font-size:23px;
	}
	.header-m-search{
		padding:5px;
		display:block;
	}
	.header-shop-name{
		font-size:14px;
		padding:7px 10px;
	}
}