/* =========================================
	CSS Custom Properties
	========================================= */
:root {
	--color-ramadhan-primary: #004c47;
	--color-ramadhan-secondary: #07855b;
	--color-ramadhan-border: #FFF35C;
}

/* =========================================
	Header
	========================================= */
.header-main {
	background-color: var(--color-ramadhan-primary);
	border-bottom: 2px solid var(--color-ramadhan-border);
	color: #fff;
	position: relative;
}

/* Decorative side icons (hidden below 1540px) */
.header-container:nth-child(1)::before,
.header-container:nth-child(1)::after {
	content: "";
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 46px;
	height: 80.5px;
	top: 17px;
	transition: all 0.3s ease-in-out;
}

.header-container:nth-child(1)::before {
	background-image: url("/assets/theme/ramadhan/header-left.svg");
	right: calc(100% + 10px);
}

.header-container:nth-child(1)::after {
	background-image: url("/assets/theme/ramadhan/header-right.svg");
	left: calc(100% + 10px);
}

/* Center logo decoration */
.header-container .logo-center::before {
	content: "";
	position: absolute;
	background: url("/assets/theme/ramadhan/header-center.svg") no-repeat center;
	background-size: 100%;
	width: 324px;
	height: 117px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.3s ease-in-out;
}

/* White icon/text overrides */
.header-container .logo img,
.header-container .account-icon,
.header-container .search-icon,
.header-container .cart-icon,
.header-container .globe-icon,
.header-container .mobile-toggle {
	filter: brightness(0) invert(1);
}

.header-container .account-icon-login {
	background: url("/assets/css/images/iconv2/account-white.svg") center
		no-repeat;
}

.nav.header-tag a.parent-link {
	color: #fff;
}
.login-btn {
	border-color: #fff;
}
.divider-right {
	border-color: #fff;
}

/* =========================================
	Content — Best Seller Title
	========================================= */
#best-seller-title h3 {
	display: flex;
	align-items: center;
	gap: 16px;
}

#best-seller-title .title-icon {
	display: inline-block;
	background: url("/assets/theme/ramadhan/content-title.svg") no-repeat center;
	background-size: 100%;
	width: 247px;
	height: 54px;
}

/* =========================================
	Footer
	========================================= */
.consumer-service {
	border-bottom: none;
}

.footer {
	background: linear-gradient(
		180deg,
		var(--color-ramadhan-primary) 0%,
		var(--color-ramadhan-secondary) 100%
	);
	border-top: 2px solid var(--color-ramadhan-border);
	color: #fff;
	padding-top: 0;
	padding-bottom: 0;
}

.footer .container-fluid {
	position: relative;
}

/* Shared footer pseudo-element base */
.footer .container-fluid::before,
.footer .container-fluid::after,
.footer .container-fluid #footer-logo::before,
.footer .container-fluid #footer-logo::after,
.footer .container-fluid #footer-logo div.text-center::after {
	content: "";
	position: absolute;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.footer .container-fluid::before {
	background-image: url("/assets/theme/ramadhan/footer-left.svg");
	width: 168.9px;
	height: 60.1px;
	left: 6px;
	bottom: 0;
}

.footer .container-fluid #footer-logo {
	position: relative;
}

.footer .container-fluid #footer-logo::before {
	background-image: url("/assets/theme/ramadhan/footer-center-left.svg");
	width: 126.3px;
	height: 135px;
	left: 5%;
	top: 0;
	transition: all 0.3s ease-in-out;
}

.footer .container-fluid #footer-logo::after {
	background-image: url("/assets/theme/ramadhan/footer-center-right.svg");
	width: 142px;
	height: 145px;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-in-out;
}

.footer .container-fluid #footer-logo div.text-center::after {
	background-image: url("/assets/theme/ramadhan/footer-right.svg");
	width: 132.9px;
	height: 115.1px;
	left: 105%;
	bottom: 0;
	transition: all 0.3s ease-in-out;
}

.footer .footer-logo,
.footer .footer-link li a {
	filter: brightness(0) invert(1);
}

.footer .container-fluid .row div {
	padding-top: 40px;
	padding-bottom: 20px;
}

/* =========================================
	Responsive
	========================================= */

/* Hide header side icons on smaller desktops */
@media (max-width: 1539.98px) {
	.header-container:nth-child(1)::before,
	.header-container:nth-child(1)::after {
		opacity: 0;
	}
}

/* Hide footer right icon */
@media (max-width: 1299.98px) {
	.footer .container-fluid #footer-logo div.text-center::after {
		opacity: 0;
	}
}

/* Scale down footer decorations on tablets */
@media (max-width: 1199.98px) {
	.header-container .logo-center::before,
	.footer .container-fluid #footer-logo::before,
	.footer .container-fluid #footer-logo::after,
	.footer .container-fluid #footer-logo div.text-center::after {
		scale: 0.85;
	}

	.footer .container-fluid #footer-logo::before {
		left: -5%;
	}
	.footer .container-fluid #footer-logo::after {
		right: -5%;
	}
}

/* Mobile landscape */
@media (max-width: 991.98px) {
	/* Swap left header icon for mobile version */
	.header-container:nth-child(1)::before {
		opacity: 1;
		background-image: url("/assets/theme/ramadhan/header-mobile.svg");
		width: 97px;
		height: 55.5px;
		top: 0;
		left: 7%;
	}

	#best-seller-title h3 {
		gap: 10px;
	}
	#best-seller-title .title-icon {
		width: 107px;
		height: 32px;
	}

	.footer .container-fluid::before {
		opacity: 0;
	}
}

/* Mobile portrait */
@media (max-width: 767.98px) {
	.footer {
		padding-top: 20px;
	}
	.footer .container-fluid .row div {
		padding-top: 0;
		padding-bottom: 0;
	}
	.footer .copyright {
		margin-bottom: 16px;
	}

	.footer .container-fluid::before {
		background-image: url("/assets/theme/ramadhan/footer-right.svg");
		opacity: 1;
		width: 61.4px;
		height: 54.9px;
	}

	.footer .container-fluid::after {
		background-image: url("/assets/theme/ramadhan/footer-center-right.svg");
		width: 51.9px;
		height: 53px;
		bottom: 5%;
		right: 5%;
		transition: all 0.3s ease-in-out;
	}
}