/* General layout */
html {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Main content wrapper */
.main-content {
	flex: 1; /* This pushes the footer to the bottom */
	width: 100%;
}

body {
	font-family: 'Montserrat', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Navigation Bar */
.navbar {
	background-color: #333;
	overflow: hidden;
	position: sticky;
	/* Ensure the navbar stays at the top when scrolling */
	top: 0; /* Stick to the top */
	z-index: 1000; /* Ensure it stays above other content */
	margin-bottom: 20px; /* Adjust this value as needed */
}

.nav-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.nav-list li {
	display: flex;
	align-items: center; /* Vertically align the links */
}

.nav-list a {
	display: flex;
	align-items: center; /* Vertically align text and images */
	color: white;
	text-align: center;
	padding: 14px 20px;
	text-decoration: none;
}

.nav-list a:hover {
	background-color: #ddd;
	color: black;
}

/* Style for the shopping cart icon */
.nav-icon {
	width: 30px; /* Adjust the size as needed */
	height: auto; /* Maintain aspect ratio */
	margin-left: 5px; /* Space between the text and the icon */
	vertical-align: middle; /* Align the icon vertically with the text */
}

/* Container */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

h1 {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 40px;
}







.price {
	font-weight: bold;
	color: #27ae60;
}

/* Add to Cart button */
.add-to-cart {
	background-color: #2ecc71; /* Light green */
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.3s;
}

.add-to-cart:hover {
	background-color: #27ae60; /* Darker green */
	transform: scale(1.1); /* Slightly enlarge button on hover */
}

.add-to-cart-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

.quantity-btn {
	background-color: #3498db;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
}

.quantity-btn:hover {
	background-color: #2980b9;
}

.quantity-input {
	width: 50px;
	padding: 5px;
	text-align: center;
	font-size: 1rem;
	border: 1px solid #ccc;
	border-radius: 5px;
}

/* Cart Styles */

/* Cart Container */
.cart-container {
	width: 80%;
	margin: 30px auto;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
	text-align: center;
	font-size: 2em;
}

/* Cart Table */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

th, td {
	padding: 15px;
	text-align: left;
}

th {
	background-color: #333;
	color: #fff;
}

td {
	border-top: 1px solid #ddd;
}

.cart-item {
	background-color: #fff;
}

.product-thumbnail {
	width: 50px;
	height: 50px;
	object-fit: cover;
	margin-right: 10px;
	vertical-align: middle;
}

/* Quantity Buttons */
.quantity-btn {
	background-color: #007bff;
	color: #fff;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
}

.quantity-btn:hover {
	background-color: #0056b3;
}

span {
	margin: 0 10px;
}

/* Remove Button */
.remove-btn {
	background-color: #e74c3c;
	color: #fff;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	font-size: 0.9em;
}

.remove-btn:hover {
	background-color: #c0392b;
}

/* Total Price Section */
#totalPriceContainer {
	text-align: right;
	font-size: 1.5em;
	margin-top: 20px;
}

/* Total Price Section */
#totalPriceContainer {
	text-align: right;
	margin-top: 20px;
}

/* Subtotal and Shipping Font Size */
#subtotalText, #shippingText {
	font-size: 0.8em; /* Smaller font size for subtotal and shipping */
	color: #555; /* Optional: Different color for differentiation */
}

/* Total Font Size */
#totalText {
	font-size: 1.5em; /* Larger font size for total */
	font-weight: bold; /* Optional: Bold for emphasis */
	color: #333; /* Optional: Stronger color for emphasis */
}

/* Add these to your styles.css */
.checkout-btn:disabled {
	background-color: #d3d3d3; /* Grey out the button */
	color: #888; /* Make the text lighter */
	cursor: not-allowed; /* Change cursor to indicate it's not clickable */
}

.checkout-btn {
	background-color: #4CAF50; /* Green background */
	color: white; /* White text */
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.checkout-btn:hover:not(:disabled) {
	background-color: #45a049; /* Darker green on hover */
}






















/* Footer Styles */
.footer {
	background-color: black;
	color: #32CD32; /* Vivid light green */
	padding: 20px;
	text-align: center;
	margin-top: auto;
	/* Push the footer to the bottom if content is short */
}

.footer a {
	color: #32CD32; /* Vivid light green */
	text-decoration: none;
	margin: 0 10px;
}

.footer a:hover {
	text-decoration: underline;
}

/* Credit Card Logos Section */
.credit-card-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	padding: 20px;
	margin-top: 1px;
	/* Increased margin to add more space from footer links */
}

.credit-card-logo {
	max-width: 200px; /* Adjust this to the classic size */
	height: auto; /* Maintain aspect ratio */
	margin-top: 10px; /* Additional space between footer links and logo */
}

/* Age Verification Modal */
.age-verification-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: visible;
	opacity: 1;
	transition: visibility 0.3s, opacity 0.3s;
	z-index: 9999; /* Ensure it's on top of other content */
}

.modal-content {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
	text-align: center;
	max-width: 500px;
	width: 100%;
}

.modal-content h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}

.modal-content p {
	font-size: 1.2rem;
	margin-bottom: 20px;
}

.modal-buttons {
	display: flex;
	justify-content: space-around;
	gap: 20px;
}

.verify-btn, .deny-btn {
	padding: 10px 20px;
	font-size: 1rem;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.verify-btn {
	background-color: #27ae60; /* Green for verification */
}

.verify-btn:hover {
	background-color: #2ecc71;
}

.deny-btn {
	background-color: #e74c3c; /* Red for denial */
}

.deny-btn:hover {
	background-color: #c0392b;
}

/* Desktop Cart: Default behavior (visible by default) */
#cartTable {
	display: table;
	width: 100%;
}

#mobileCartItems {
	display: none;
}

/* Mobile Cart: Show on smaller screens */
@media screen and (max-width: 768px) {
	#cartTable {
		display: none; /* Hide the desktop cart */
	}
	#mobileCartItems {
		display: block; /* Show the mobile cart */
	}

	/* Cart Container */
	.cart-container {
		width: 100%;
		padding: 0 10px; /* Add padding to prevent touching edges */
		box-sizing: border-box; /* Include padding in total width */
	}
	.mobile-cart-items {
		display: flex;
		flex-direction: column;
	}
	.mobile-cart-item {
		display: flex;
		position: relative;
		/* Enable absolute positioning for child elements */
		flex-direction: row;
		justify-content: flex-start; /* Align items tightly */
		align-items: flex-start; /* Align thumbnail and info to the top */
		margin-bottom: 15px;
		border: 1px solid #ccc;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
		padding: 15px; /* Increased padding for taller boxes */
		border-radius: 5px;
		background-color: #f9f9f9;
		gap: 10px; /* Reduced gap between thumbnail and info */
	}
	.product-thumbnail {
		flex: 0 0 115px; /* 20% larger than previous 96px */
		width: 115px;
		height: 115px;
		margin-right: 10px; /* Space between thumbnail and info */
	}
	.item-info {
		flex: 1; /* Take up the remaining space */
		display: flex;
		flex-direction: column;
		justify-content: space-between; /* Space name/price vertically */
		gap: 5px; /* Minimal gap between name and price */
	}
	.item-name {
		font-size: 16px;
		font-weight: bold;
		margin: 0; /* Remove unnecessary margin */
	}
	.item-price {
		font-size: 14px;
		color: #555;
		margin: 0; /* Remove unnecessary margin */
	}

	/* Remove Button (Top-Right Corner) */
	.remove-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: #ff6666;
		color: white;
		padding: 5px 10px;
		border: none;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}

	/* Quantity Controls (Bottom-Right Corner) */
	.item-quantity {
		position: absolute;
		bottom: 10px;
		right: 10px; /* Pin to the bottom-right corner */
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 5px; /* Space between quantity buttons */
	}
	.quantity-btn, .quantity-input {
		width: 24px;
		height: 24px;
	}
	#totalPriceContainer {
		width: 100%;
		margin-top: 20px;
		text-align: left;
	}
	.checkout-btn {
		width: 100%;
		margin-top: 20px;
		padding: 10px;
	}
}

/* Small Tablets and Large Phones (Max 576px) */
@media screen and (max-width: 576px) {
	.mobile-cart-item {
		padding: 12px; /* Adjust padding for smaller screens */
		margin-bottom: 12px;
		border-radius: 4px;
		gap: 8px;
	}
	.product-thumbnail {
		width: 101px; /* 20% larger than 84px */
		height: 101px;
	}
	.item-info {
		gap: 4px;
	}
	.item-name {
		font-size: 15px;
	}
	.item-price {
		font-size: 14px;
	}
	.quantity-btn, .quantity-input {
		width: 20px; /* 20% smaller than 25px */
		height: 20px; /* 20% smaller than 25px */
	}
	.remove-btn {
		font-size: 11px;
		padding: 4px 8px;
	}
	.checkout-btn {
		font-size: 14px;
	}
}

/* Medium Phones (Max 480px) */
@media screen and (max-width: 480px) {
	.mobile-cart-item {
		padding: 10px;
		margin-bottom: 10px;
		gap: 8px;
	}
	.product-thumbnail {
		width: 87px; /* 20% larger than 72px */
		height: 87px;
	}
	.item-name {
		font-size: 14px;
	}
	.item-price {
		font-size: 13px;
	}
	.quantity-btn, .quantity-input {
		width: 18px; /* 20% smaller than 22px */
		height: 18px; /* 20% smaller than 22px */
	}
	.remove-btn {
		font-size: 10px;
		padding: 4px 8px;
	}
	.checkout-btn {
		font-size: 12px;
	}
}

/* Small Phones (Max 400px) */
@media screen and (max-width: 400px) {
	.mobile-cart-item {
		padding: 8px;
		margin-bottom: 8px;
		gap: 5px;
	}
	.product-thumbnail {
		width: 72px; /* 20% larger than 60px */
		height: 72px;
	}
	.item-name {
		font-size: 12px;
	}
	.item-price {
		font-size: 12px;
	}
	.quantity-btn, .quantity-input {
		width: 16px; /* 20% smaller than 20px */
		height: 16px; /* 20% smaller than 20px */
	}
	.remove-btn {
		font-size: 10px;
		padding: 3px 6px;
	}
	.checkout-btn {
		font-size: 10px;
		padding: 8px;
	}
}