@import url("./fonts.css");

* {
	padding: 0px;
	margin: 0px;
	outline: none;
	border: none;
	--brandGreen: #002518;
	--brandGreen50: #00251880;
	--brandGreen90: #002518e5;
	--white: #ffffff;
	--white10: #ffffff1a;
	--white25: #ffffff40;
	--white30: #ffffff4d;
	--white50: #ffffff80;
	--white75: #ffffffbf;
	--grey45: #f1f1f173;
	--black5: rgba(0, 0, 0, 0.05);
	--black15: rgba(0, 0, 0, 0.15);
	--black25: rgba(0, 0, 0, 0.25);
	--black50: rgba(0, 0, 0, 0.5);
	--black60: #00000099;
	--lightDangerRed: #f34747;
	--dangerRed: #a40000;
	--lightBrandGreen: #105840;

	--deviceWidthPaddingSize: 75px;

	/* Font sizes */
	--xSmallSize: 0.875rem;
	--smallSize: 1rem;
	--mediumSize: 1.125rem;
	--largeSize: 1.25rem;
	--xLargeSize: 1.5rem;
	--xXLargeSize: 2.8125rem;
	--xXXLargeSize: 4rem;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

a {
	text-decoration: none;
	cursor: pointer;
}

body {
	display: flex;
	width: 100vw;
	overflow-x: hidden;
	min-height: 100vh;
	flex-direction: column;
	align-items: flex-start;
	gap: 75px;
	background-color: var(--white);
}

body:has(.showOverlayContainer) {
	overflow: hidden;
}

header {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}

header .topBanner {
	display: flex;
	justify-content: space-between;
	height: 30px;
	overflow-x: hidden;
	padding: 5px var(--deviceWidthPaddingSize);
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	background: #e9bc7859;
	transition: transform 0.1s ease;
}

header .topBanner p {
	color: var(--brandGreen);
	font-size: var(--xSmallSize);
	font-family: "Raleway";
	font-style: normal;
	font-weight: 400;
}

header .topBanner p a {
	color: var(--brandGreen);
	text-decoration: underline;
}

.topNav .openNavMenu {
	cursor: pointer;
	display: none;
	width: 50px;
	height: 50px;
}

.topNav {
	display: flex;
	overflow-x: hidden;
	padding: 20px var(--deviceWidthPaddingSize);
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	background: var(--white);
	transition: transform 0.1s ease;
}

.topNav.stickyTopNav {
	width: calc(100vw - 150px);
	top: -100px;
	transform: translateY(calc(100%));
	opacity: 0;
	position: fixed;
	z-index: 1;
	border: solid var(--brandGreen50) 1px;
	transition: transform 0.75s ease, opacity 1s ease-in-out;
}

.hero {
	display: flex;
	padding: 0px var(--deviceWidthPaddingSize);
	align-items: center;
	gap: 75px;
	align-self: stretch;
}

.navLogo {
	width: 50px;
	height: 50px;
}

.menuLinkContainer,
header .menuLinkContainer.mobileNav {
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 50px;
	align-self: stretch;
	list-style: none;
}

header .menuLinkContainer.mobileNav {
	background: white;
	flex-direction: column;
	position: fixed;
	right: 0px;
	top: 0px;
	padding: 30px 100px 20px 20px;
	z-index: 2;
	height: 100vh;
	transition: transform 750ms ease;
}

header .menuLinkContainer.mobileNav.hide {
	transform: translateX(100%);
}

header .menuLinkContainer.mobileNav .linkItems {
	width: 100%;
}

header .menuLinkContainer.mobileNav .closeNavMenu {
	cursor: pointer;
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
}

.menuLinkContainer .linkItems {
	text-decoration: none;
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
}

.menuLinkContainer .currentLinkItem,
.menuLinkContainer .linkItems:hover {
	transition: font-size 2s;
	font-weight: 700;
	border-bottom: solid var(--brandGreen) 2px;
}

.callToActionContainer {
	display: flex;
	height: 50px;
	align-items: center;
	gap: 30px;
}

.CTABtnContainer {
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	border: 3px solid var(--brandGreen);
}

.CTABtnContainer .CTABtn {
	display: flex;
	width: 100px;
	padding: 2px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
}

.CTABtnContainer .openSignupBtn {
	color: var(--brandGreen);
	background: var(--white);
}

.CTABtnContainer .openLoginBtn {
	color: var(--white);
	background: var(--brandGreen);
}

.CTABtnContainer .logoutBtn {
	color: var(--white);
	background: var(--brandGreen);
}

.callToActionContainer .accountPageLink {
	width: auto;
	height: 100%;
	cursor: pointer;
}

.callToActionContainer .staffDashboardLinkImg {
	height: 50px;
	width: 50px;
}

.cartOpenContainer {
	position: relative;
	display: flex;
	width: 50px;
	height: 50px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.cartOpenContainer svg {
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}

.cartOpenContainer .cartOpenItemCounterContainer {
	display: flex;
	width: 30px;
	height: 30px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: 0px;
	top: 0px;
	border-radius: 15px;
	border: 1px solid var(--white);
	background: var(--brandGreen);
}

.cartOpenContainer .cartOpenItemCounterContainer p {
	color: var(--white);
	font-family: "Lato";
	font-size: var(--xSmallSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.notifToastsContainer {
	position: fixed;
	top: 0px;
	left: 0px;
	transform: translate(calc(50vw - 50%), -100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70vw;
	min-width: 270px;
	max-width: 700px;
	padding: 15px;
	gap: 10px;
	z-index: 3;
	overflow: visible;
	opacity: 0;
	transition: all 1s ease;
}

.notifToastsContainer:has(.notifToast) {
	transform: translate(calc(50vw - 50%), 0%);
	opacity: 1;
	transition: all 1s ease;
}

.notifToast {
	width: 100%;
	border-radius: 10px;
	padding: 15px;
	background-color: var(--lightBrandGreen);
	box-shadow: 0px 0px 10px 0px var(--brandGreen50);
	display: flex;
	align-items: center;
}

.notifToast.isError {
	background-color: var(--lightDangerRed);
}

.notifToast p {
	align-self: stretch;
	width: -webkit-fill-available;
	height: -moz-fit-content;
	height: fit-content;
	color: var(--white);
	text-align: center;
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	transition: all 1s ease;
}

.notifToast p a {
	font-weight: 300;
	color: var(--white);
	text-decoration: underline;
}

.notifToast .notifCloseBtn {
	width: 25px;
	height: 25px;
	cursor: pointer;
}

.notifToast.removeNotif {
	display: flex;
	height: 0px;
	opacity: 0;
	padding: 0px;
	width: 0px;
	transition: opacity 700ms ease, height 350ms ease, padding 350ms ease,
		width 350ms ease;
	overflow: hidden;
}

.notifToast.removeNotif p {
	display: none;
}

/* To be removed */
.overlayContainer {
	display: none;
	position: fixed;
	opacity: 0;
	width: 100vw;
	height: 100vh;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: var(--black60);
	z-index: 3;
}
/* End to be removed */

.cartOverlay {
	display: none;
	width: 100vw;
	opacity: 1;
	position: fixed;
	flex-direction: column;
	max-width: calc(100% - var(--deviceWidthPaddingSize) * 2);
	height: 100vh;
	padding: var(--deviceWidthPaddingSize);
	align-items: center;
	justify-content: flex-start;
	gap: calc(var(--deviceWidthPaddingSize) / 2);
	background: var(--white);
	z-index: 3;
}

.cartOverlay .overlayHeader {
	display: flex;
	align-self: stretch;
	justify-content: space-between;
}

.cartOverlay .overlayHeaderText {
	flex: 1 0 0;
	color: var(--brandGreen);
	font-family: Literata;
	font-size: var(--xLargeSize);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.cartOverlay .overlayHeader .closeCart {
	width: 30px;
	height: 30px;
	cursor: pointer;
}

/* Change class name of overlay container */
.showOverlayContainer {
	display: flex;
	opacity: 1;
}

/* Remove */
.overlayContainer .overlayContentContainer {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 30px;
}
/* Remove end */

.cartOverlay .overlayContentContainer {
	align-self: stretch;
	justify-content: space-between;
	gap: var(--deviceWidthPaddingSize);
}

.overlayContentContainer .overlaySectionContainer {
	display: flex;
	width: -webkit-fill-available;
	max-width: 100%;
	height: 65vh;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	border-radius: 10px;
	background: var(--white);
	box-shadow: 0px 0px 10px 0px var(--white25);
}

.overlaySectionContainer.billSection {
	width: 25vw;
	min-width: 200px;
	max-width: 350px;
	overflow-y: auto;
}

.overlaySectionContainer .overlayHeaderContainer {
	display: flex;
	padding-bottom: 10px;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
	border-bottom: 1px solid var(--brandGreen);
}

.overlayHeaderContainer h3.overlayHeaderText {
	flex: 1 0 0;
	color: var(--brandGreen);
	font-family: Literata;
	font-size: var(--largeSize);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.overlaySectionContainer .cartListContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	flex: 1 0 0;
	align-self: stretch;
	overflow-y: auto;
}

.cartListContainer .cartItemContainer {
	display: flex;
	padding: 10px;
	min-width: -webkit-fill-available;
	min-width: -moz-fit-content;
	min-width: fit-content;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
	border-radius: 8px;
	background: var(--grey45);
}

.cartItemContainer .cartItemImg {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	border: 1px solid var(--brandGreen);
	-o-object-fit: cover;
	   object-fit: cover;
}

.cartItemContainer .itemDetailsAndControl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
	flex: 1 0 0;
	align-self: stretch;
}

.cartItemContainer .itemDetailsAndControl p {
	align-self: stretch;
	color: var(--brandGreen);
	font-family: "Raleway";
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.cartItemContainer .itemDetailsAndControl p.itemName {
	font-size: var(--mediumSize);
}

.cartItemContainer .itemDetailsAndControl p.itemUnitPrice {
	font-size: var(--mediumSize);
}

.cartItemContainer .itemDetailsAndControl .itemQuantityControlContainer {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cartItemContainer .itemDetailsAndControl .cartSubtractItem,
.cartItemContainer .itemQuantityControlContainer .cartAddItem {
	display: flex;
	width: 30px;
	height: 30px;
	padding: 5px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	border: 1px solid var(--brandGreen);
	cursor: pointer;
}

.cartItemContainer .itemDetailsAndControl .cartSubtractItem svg,
.cartItemContainer .itemQuantityControlContainer .cartAddItem svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.cartItemContainer .itemDetailsAndControl .itemQuantity {
	display: flex;
	width: 50px;
	height: 30px;
	padding: 5px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 5px;
	border: 1px solid var(--brandGreen);
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.cartItemContainer .itemPriceAndDelete {
	display: flex;
	padding: 5px 0px;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
}

.cartItemContainer .itemPriceAndDelete .itemTotalPrice {
	align-self: stretch;
	color: var(--brandGreen);
	text-align: right;
	font-family: "Raleway";
	font-size: var(--largeSize);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.cartItemContainer .itemPriceAndDelete .deleteCartItemBtn {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

.cartItemContainer .itemPriceAndDelete .deleteCartItemBtn .deleteIcon {
	width: 20px;
	height: 20px;
}

.cartItemContainer .itemPriceAndDelete .deleteCartItemBtn .deleteText {
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.overlaySectionContainer.billSection .billSubtotal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.overlaySectionContainer.billSection .billSubtotal p {
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.overlaySectionContainer.billSection .additionalCharges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
}

.overlaySectionContainer.billSection .additionalCharges .charge {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.overlaySectionContainer.billSection .additionalCharges .charge p {
	color: black;
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 300;
	line-height: normal;
}

.overlaySectionContainer.billSection .billTotalContainer {
	display: flex;
	padding: 10px 0px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	align-self: stretch;
	border-top: 1px solid var(--black50);
	border-bottom: 1px solid var(--black50);
}

.overlaySectionContainer.billSection .billTotalContainer .total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
}

.overlaySectionContainer.billSection .billTotalContainer .total p {
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.overlaySectionContainer.billSection .confirmOrderBtn,
.orderSuccessContainer .goToHomePageBtn,
.overlaySectionContainer.billSection .confirmAndPay,
.overlaySectionContainer.billSection .continueShoppingBtn {
	display: flex;
	padding: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 8px;
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	cursor: pointer;
}

.overlaySectionContainer.billSection .confirmOrderBtn,
.orderSuccessContainer .goToHomePageBtn,
.overlaySectionContainer.billSection .confirmAndPay {
	border: 1px solid var(--brandGreen);
	background: white;
}

.overlaySectionContainer.billSection .continueShoppingBtn {
	background: var(--brandGreen);
	color: white;
}

.loginOverlayContainer .overlaySectionContainer,
.signupOverlayContainer .overlaySectionContainer {
	gap: 5px;
	max-width: 400px;
	height: -moz-fit-content;
	height: fit-content;
	padding: 15px;
}

.loginOverlayContainer .overlaySectionContainer .overlayHeaderContainer,
.signupOverlayContainer .overlaySectionContainer .overlayHeaderContainer {
	border-bottom: none;
}

.loginOverlayContainer .formContainer,
.signupOverlayContainer .formContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	align-self: stretch;
}

.loginOverlayContainer .formContainer .iconLeftInputContainer,
.signupOverlayContainer .formContainer .iconLeftInputContainer {
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 8px;
	border: 2px solid var(--brandGreen);
}

.loginOverlayContainer .formContainer .iconLeftInputContainer .inputIcon,
.signupOverlayContainer .formContainer .iconLeftInputContainer .inputIcon {
	width: 25px;
	height: 25px;
}

.loginOverlayContainer .formContainer .iconLeftInputContainer input,
.signupOverlayContainer .formContainer .iconLeftInputContainer input {
	flex: 1 0 0;
	color: var(--brandGreen);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.loginOverlayContainer button.submitLoginForm,
.signupOverlayContainer button.submitLoginForm {
	padding: 15px 0px;
	align-self: stretch;
	border-radius: 8px;
	background: var(--brandGreen);
	color: var(--white);
	font-family: "Lato";
	font-size: var(--mediumSize);
	font-style: normal;
	font-weight: 400;
	cursor: pointer;
}

.overlayContainer.loadingAnimationContainer.showLoadingAnimationContainer {
	opacity: 1;
	display: flex;
	z-index: 5;
}

.overlayContainer.loadingAnimationContainer img {
	width: 85px;
}

footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}

footer .footerSection {
	display: flex;
	padding: 20px var(--deviceWidthPaddingSize);
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	background: var(--brandGreen);
}

footer .footerSection .menuLinkContainer .linkItems {
	color: var(--white);
	font-weight: 400;
}

footer .footerSection .menuLinkContainer .currentLinkItem,
footer .footerSection .menuLinkContainer .linkItems:hover {
	border-bottom: solid var(--white) 2px;
}

footer .footerSection .backToTopBtn {
	border-radius: 10px;
	cursor: pointer;
	display: flex;
}

footer .footerSection .backToTopBtn svg {
	width: 50px;
	height: 50px;
}

/* Adding hover effect */
.btnHover,
.whiteBgGreenBorder,
.whiteBgGreenColor,
.menuItemBtnHover {
	transition: all 0.5s ease;
	cursor: pointer;
}

.btnHover:hover,
.menuItemBtnHover:hover {
	background: var(--lightBrandGreen) !important;
	border-color: var(--lightBrandGreen) !important;
	color: var(--white) !important;
}

.whiteBgGreenColor:hover {
	color: var(--lightBrandGreen) !important;
}

.whiteBgGreenBorder {
	border-color: var(--lightBrandGreen) !important;
}

.menuItemBtnHover:hover {
	background: var(--white30) !important;
}

/* Small laptop and large tablet */
@media (max-width: 1024px) {
	.topNav .menuLinkContainer {
		display: none;
	}

	.topNav .openNavMenu {
		display: block;
	}

	.menuLinkContainer .linkItems {
		width: 100%;
	}

	footer .footerSection {
		flex-direction: column;
		gap: 15px;
		justify-content: center;
	}

	.footerSection .menuLinkContainer {
		justify-content: center;
		flex-wrap: wrap;
		gap: 25px;
	}

	.footerSection .menuLinkContainer .linkItems {
		width: -moz-fit-content;
		width: fit-content;
	}
}

/* Tablet */
@media (max-width: 768px) {
	* {
		--deviceWidthPaddingSize: 25px;
	}

	html {
		font-size: 14px;
	}

	.navLogo,
	.topNav .openNavMenu,
	header .menuLinkContainer.mobileNav .closeNavMenu {
		width: 30px;
		height: 30px;
	}

	.topNav.stickyTopNav {
		width: calc(100vw - (var(--deviceWidthPaddingSize) * 2));
	}

	.CTABtnContainer {
		height: 40px;
	}

	.CTABtnContainer .CTABtn {
		width: 75px;
	}

	.overlayContainer {
		padding: 0px;
	}

	.cartOverlay {
		max-width: calc(100% - 50px);
		padding: 25px;
		gap: 25px;
		overflow-y: auto;
		height: calc(100% - 50px);
	}

	.cartOverlay .overlaySectionContainer .cartListContainer {
		flex: 0 1 auto;
		max-height: 45vh;
	}

	.overlayContainer .overlayContentContainer {
		flex-direction: column;
		align-self: stretch;
		margin: auto;
		height: 95vh;
		justify-content: center;
		align-items: center;
		padding: 0px;
	}

	.cartOverlay.overlayContainer .overlayContentContainer {
		justify-content: flex-start;
	}

	.overlayContentContainer .overlaySectionContainer,
	.overlayContentContainer .overlaySectionContainer.billSection {
		flex: 1 0 0;
		align-self: center;
		justify-self: center;
		width: 300px;
		max-width: 300px;
	}

	.cartOverlay .overlayContentContainer .overlaySectionContainer {
		flex: 0 1 auto;
		height: auto;
	}

	.loginOverlayContainer .overlaySectionContainer,
	.signupOverlayContainer .overlaySectionContainer {
		height: -moz-fit-content;
		height: fit-content;
		flex-grow: 0;
	}

	.cartItemContainer .cartItemImg {
		width: 75px;
		height: 75px;
		align-self: center;
	}

	.cartItemContainer .itemDetailsAndControl .cartSubtractItem,
	.cartItemContainer .itemQuantityControlContainer .cartAddItem {
		width: 15px;
		height: 15px;
	}

	.cartItemContainer .itemDetailsAndControl .itemQuantity {
		height: 15px;
		width: 20px;
	}
}

/* Mobile  */
@media (max-width: 600px) {
	* {
		--deviceWidthPaddingSize: 15px;
	}

	.topNav.stickyTopNav {
		width: calc(100vw - (var(--deviceWidthPaddingSize) * 2));
	}

	.callToActionContainer {
		gap: 10px;
	}

	header .topBanner p:nth-child(3) {
		display: none;
	}
}