/* General Body Styles */
body {
	font-family: "Baloo Da 2", sans-serif;
	/* background-color: #C4DAD2; */ /* Updated color from palette */

}

body {
	--s: 80px; /* control the size*/
	--c1: #E9EFEC; /* Updated from palette */
	--c2: #6a9c8933; /* Updated from palette */

	--_s: calc(2*var(--s)) calc(2*var(--s));
	--_g: 35.36% 35.36% at;
	--_c: #0000 66%, var(--c2) 68% 70%, #0000 72%;
	background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), 
	radial-gradient(var(--_g) 0 75%, var(--_c)) var(--s) var(--s)/var(--_s), 
	radial-gradient(var(--_g) 100% 25%, var(--_c)) 0 0 /var(--_s), 
	radial-gradient(var(--_g) 0 75%, var(--_c)) 0 0 /var(--_s), 
	repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0 /var(--_s), 
	radial-gradient(var(--_c)) 0 calc(var(--s) / 2)/var(--s) var(--s) var(--c1);
}


/* Product List Container */
#products-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	padding: 20px;
	box-sizing: border-box;
}

/* Product Item */
.product-item {
	background: rgba(255, 255, 255, 0.9); /* White with transparency */
	border: 1px solid #C4DAD2; /* Updated border color */
	border-radius: 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden; /* Ensure content fits nicely within borders */
	cursor: pointer;
	position: relative;
}

.product-item img {
	display: block; /* Ensures margin auto works */
	margin-left: auto; /* Center horizontally */
	margin-right: auto; /* Center horizontally */
	/* width: 100%; */
	height: 30vh; /* Fixed height for images */
	object-fit: cover;
	border-bottom: 1px solid #C4DAD2; /* Updated border color */
}

.product-item h3 {
	margin: 10px;
	color: #16423C; /* Updated from palette */
	font-size: 1.1em;
}

.product-item p {
	margin: 10px;
	color: #6A9C89; /* Updated from palette */
}

/* Hover Effect */
.product-item:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Overlay Effect */
.product-item:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(22, 66, 60, 0.2); /* Updated overlay to match palette */
	transition: opacity 0.3s ease;
	opacity: 0.3;
}

/* Product Detail Section */
#product-detail {
	background: rgba(255, 255, 255, 0.95); /* White with more transparency */
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	margin: 20px auto;
	padding: 20px;
	max-width: 800px;
	position: relative;
}

#product-detail h2 {
	color: #16423C; /* Updated from palette */
}

#product-images {
	text-align: center;
	position: relative;
}

#main-image {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 8px;
	transition: opacity 0.5s ease;
}

#image-navigation {
	text-align: center;
	margin-top: 10px;
}

#image-navigation button {
	background: #16423C; /* Updated button background */
	border: none;
	color: white;
	padding: 10px 20px;
	margin: 0 5px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#image-navigation button:hover {
	background-color: #6A9C89; /* Updated hover color */
}

#product-description {
	margin-top: 2em;
	margin-bottom: 2em;
	line-height: 1.6;
	/* border: 1px solid #16423C; Updated border color from palette */
	border-radius: 0.5em;
	padding: 0.3em;
	transition: box-shadow 0.3s ease; /* Smooth transition effect */
}



#product-description img {
	width: 100%;
}

#reviews-list {
	list-style: none;
	padding: 0;
}

#reviews-list li {
	background: rgba(22, 66, 60, 0.1); /* Updated light background color */
	border: 1px solid #16423C; /* Updated border color */
	border-radius: 5px;
	margin: 5px 0;
	padding: 10px;
	transition: background-color 0.3s ease;
}

#reviews-list li:hover {
	background-color: rgba(22, 66, 60, 0.2); /* Updated hover background color */
}

/* Order Form */
#order-form {
	background: rgba(255, 255, 255, 0.9); /* White with transparency */
	border-radius: 8px;
	padding: 20px;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
	margin-top: 20px;
}

#order-form label {
	display: block;
	margin-top: 10px;
	color: #16423C; /* Updated label color */
}

#order-form input,
#order-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #C4DAD2; /* Updated input border color */
	border-radius: 5px;
	margin-top: 5px;
	box-sizing: border-box;
}

#order-form button {
	background: #16423C; /* Updated button background color */
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: 10px;
}

#order-form button:hover {
	background-color: #6A9C89; /* Updated button hover color */
}

/* Back Button */
#back {
	background: #16423C; /* Updated button background color */
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	/* position: absolute; */
	top: 20px;
	left: 20px;
}

#back:hover {
	background-color: #6A9C89; /* Updated button hover color */
}

/* Price Styling */
#product-price {
	font-size: 1.2em; /* Standard price size */
	color: #6A9C89; /* Updated price color */
	text-decoration: line-through; /* Line-through effect to indicate discount */
	position: relative;
	margin-right: 10px; /* Space between price and special price */
}

#product-special-price {
	font-size: 2em; /* Larger font size for the special price */
	color: #16423C; /* Updated special price color */
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 5px 10px; /* Padding for better spacing */
	border-radius: 5px; /* Rounded corners for the special price */
	background: rgba(22, 66, 60, 0.1); /* Updated background color with transparency */
}

/* Search Bar Container */
#search-container {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

/* Search Bar Styling */
#search-bar {
	width: 100%;
	max-width: 400px;
	padding: 12px 20px;
	font-size: 16px;
	border: 2px solid #C4DAD2; /* Updated border color */
	border-radius: 25px;
	outline: none;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 2px 5px rgba(22, 66, 60, 0.486); /* Updated shadow color */
}

/* On focus (when the user clicks on the input) */
#search-bar:focus {
	border-color: #6A9C89; /* Updated border color on focus */
	box-shadow: 0 4px 8px rgba(106, 156, 137, 0.329); /* Subtle glow using palette */
}

/* Optional: Add a placeholder text color */
#search-bar::placeholder {
	color: #888;
	/* font-style: italic; */
}

/* Add hover effect */
#search-bar:hover {
	border-color: #C4DAD2; /* Maintain palette color for hover effect */
}

/* Responsive design for smaller screens */
@media(max-width: 768px) {
	#search-bar {
		width: 90%; /* Adjust width on smaller screens */
	}
}

footer {
	background: linear-gradient(145deg, #16423C, #6A9C89); /* Updated gradient */
	color: white;
	text-align: center;
	padding: 15px;
	/* position: fixed; */
	bottom: 0;
	/* width: 80%; */
	border-radius: 10px 10px 0 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	animation: fadeInUp 1.5s ease-out;
}

.footer-content {
	margin: 0;
}

footer p {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media(min-width: 768px) {
	#main-image {
		max-width: 100%;
		max-height: 80vh; /* Adjust the height as needed */
		border-radius: 12px;
	}
}

/* Container styling */
.shop-link {
    
	display: flex;
	align-items: center;
	text-decoration: none; /* Remove underline from the link */
	color: inherit; /* Inherit color from parent */
	border: 1px solid transparent; /* Optional: adds border for focus */
	border-radius: 8px; /* Optional: rounded corners for the border */
	padding: 8px; /* Optional: space around the content */
	transition: border-color 0.3s ease, background-color 0.3s ease; /* Smooth transitions for hover effects */
}

/* Image styling */
.shop-link img {
	max-width: 8ch;
	max-height: 10vh;
	border-radius: 8px; /* Optional: rounded corners for the image */
	margin-right: 8px; /* Space between image and text */
}

/* Text styling */
.shop-link span {
	font-size: 2rem; /* Adjust text size as needed */
	font-weight: bold; /* Optional: make text bold */
    text-decoration: none;
}

/* Hover effect for the link */
.shop-link:hover {
	border-color: #C4DAD2; /* Light border on hover */
	background-color: rgba(22, 66, 60, 0.1); /* Light background color on hover */
}

/* Focus effect for accessibility */
.shop-link:focus {
	outline: 2px solid #6A9C89; /* Outline color when focused */
	outline-offset: 4px; /* Space between outline and element */
}

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 20px 0;
	background-color: rgba(164, 223, 201, 0.1); /* Transparent background from palette */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

table:hover {
	transform: scale(1.02); /* Slight zoom effect on hover */
}

thead td {
	background-color: rgba(22, 66, 60, 0.8); /* Dark color from palette */
	color: white;
	padding: 15px;
	text-align: left;
	font-size: 18px;
}

tr {
	border-bottom: 1px solid rgba(22, 66, 60, 0.2); /* Light border using palette color */
}

td {
	padding: 15px;
	font-size: 16px;
	background-color: rgba(233, 239, 236, 0.5); /* Transparent light background from palette */
	color: #16423C; /* Dark green text color */
	transition: background-color 0.3s ease;
}

input[type="text"],
input[readonly],
input[disabled] {
	width: 100%;
	padding: 10px;
	border: 2px solid rgba(106, 156, 137, 0.7); /* Semi-transparent color from palette */
	background-color: rgba(233, 239, 236, 0.7); /* Transparent background from palette */
	color: #16423C; /* Dark green text color */
	font-size: 16px;
	border-radius: 8px;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

input:focus {
	border-color: rgba(106, 156, 137, 0.9); /* Darker border on focus */
	background-color: rgba(233, 239, 236, 0.9); /* Less transparency on focus */
}

.quantity-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.quantity-button {
	background-color: rgba(106, 156, 137, 0.7); /* Transparent color from palette */
	color: white;
	border: none;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 8px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.quantity-button:hover {
	background-color: rgba(22, 66, 60, 0.9); /* Darker green on hover */
	transform: translateY(-2px); /* Slight lift effect */
}

#quantity {
	text-align: center;
	width: 50px;
	border: none;
	background-color: rgba(233, 239, 236, 0.7); /* Lighter background from palette */
	font-size: 16px;
	border-radius: 8px;
}

#delivary-charge,
#total-price {
	font-weight: bold;
	color: #16423C; /* Dark green text color */
	font-size: 16px;
}

tr:nth-child(even) {
	background-color: rgba(233, 239, 236, 0.3); /* Alternating row background */
}

tr:hover {
	background-color: rgba(106, 156, 137, 0.2); /* Hover effect for entire row */
}

button:active {
	transform: scale(0.98); /* Button click effect */
}

.instructions {
	display: none;
	border: 1px solid #C4DAD2; /* Light border color */
	padding: 10px;
	margin-top: 10px;
	background-color: #E9EFEC; /* Light background from palette */
}

.show-button {
	cursor: pointer;
	color: #16423C; /* Dark text color */
	text-decoration: underline;
}

/* General footer styles */
.footer-content {
	text-align: center;
	padding: 20px;
	color: #fff;
}

h4 {
	margin-bottom: 10px;
	font-size: 1.2em;
}

.about-us p,
.contact-info p,
.social-media a {
	margin: 5px 0;
}

.social-media a {
	display: inline-block;
	margin: 0 10px;
	font-size: 24px;
	color: #fff; /* Icon color */
}

.social-media a:hover {
	color: #C4DAD2; /* Lightened color on hover */
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Flexbox layout for larger screens */
.footer-sections {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20px 0;
	text-align: left;
}

.footer-sections > div {
	flex: 1 1 30%;
	margin: 10px;
}

/* Responsive design: stack sections vertically for small screens */
@media(max-width: 768px) {
	.footer-sections {
		flex-direction: column;
		text-align: center;
	}

	.footer-sections > div {
		flex: 1 1 100%;
	}
}

/* Circular filter button styles */
.filter-button {
	padding: 0.8em 1.5em;
	margin-left: 1em;
	border: none;
	border-radius: 1em;
	font-weight: 700;
	background-color: rgba(106, 156, 137, 0.7); /* Semi-transparent color from palette */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.filter-button:hover {
	background-color: #6A9C89; /* Darker shade on hover */
}

/* Hidden filter options by default */
.filter-options {
	z-index: 10;
	opacity: 0;
	max-height: 0;
	display: none;
	background-color: rgba(233, 239, 236, 0.9); /* Light background from palette */
	border-radius: 1em;
	margin: 1em;
	border: 0.1em solid #0e312d;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.filter-options.active {
	display: block;
	opacity: 1;
	max-height: 100vh;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.filter-options span {
	margin-left: 2em;
}

/* Container for buttons */
#sheet-buttons-container {
	margin: 0 2em;
	display: flex;
	flex-wrap: wrap;
}

/* Button styles within the filter */
#sheet-buttons-container > button {
	padding: 0.8em 1.5em;
	margin: 0.5em;
	border: none;
	border-radius: 1em;
	background-color: #416457; /* Color from palette */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

#sheet-buttons-container > button:hover {
	background-color: #0e312d;
	transform: translateY(-2px); /* Slight lift on hover */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#sheet-buttons-container > button:focus {
	outline: 2px solid #0e312d;
}

/* Input field styles */
input[type="number"] {
	padding: 0.8em;
	margin: 0.5em;
	border: 1px solid #ccc;
	border-radius: 1em;
	width: 33%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="number"]:focus {
	border-color: #6A9C89; /* Focus border color from palette */
	box-shadow: 0 0 8px rgba(106, 156, 137, 0.3); /* Focus shadow */
	outline: none;
}

/* Price filter button styles */
#filter-price {
	padding: 0.8em 1.5em;
	margin: 0.5em;
	border: none;
	border-radius: 1em;
	background-color: #6A9C89; /* Green color from palette */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

#filter-price:hover {
	background-color: #0e312d; /* Dark green on hover */
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#filter-price:focus {
	outline: 2px solid #0e312d; /* Focus state for accessibility */
}

/* Container for the price filter */
#price-filter-container {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap; /* Ensure the layout wraps on smaller screens */
}

/* Responsive styles */
@media(max-width: 768px) {
	input[type="number"] {
		width: 90%;
	}

	#price-filter-container {
		flex-direction: column; /* Stack filters on mobile */
		align-items: center;
	}

	.filter-options {
		margin: 0.5em; /* Reduce margin for smaller screens */
	}
}

/* URL bar container styles */
#url-container {
	margin: 1em;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* URL input field styles */
#product-url-input {
	width: 75%;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 2em;
	background-color: #f9f9f9;
	color: #333;
	transition: border-color 0.3s ease;
}

/* Change the border color when the input is focused */
#product-url-input:focus {
	border-color: #16423C;
	outline: none;
}

/* Copy button styles */
#url-container button {
	width: 20%;
	padding: 10px;
	margin-left: 10px;
	background-color: #16423C; /* Dark green button */
	color: white;
	font-size: 16px;
	border: none;
	border-radius: 2em;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

/* Copy button hover effect */
#url-container button:hover {
	background-color: #16423C; /* Darker green on hover */
}

/* Ensure the button and input field are responsive */
@media screen and (max-width: 600px) {
	#url-container {
		flex-direction: column; /* Stack elements on smaller screens */
		align-items: center;
	}

	#product-url-input,
	#url-container button {
		width: 100%;
		margin: 5px 0;
	}
}