@import "../../../css/theme.css";
@import "../../../css/custom.css";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Raleway:wght@400;600;800&display=swap');


* {
	font-family: 'Open Sans', sans-serif;
}

.bg-golden {
	background-color: #DFD8D2 !important;
}

.bg-golden-light {
	background-color: #f2ede9 !important;
}

.bg-golden-dark {
	background-color: #b1a599 !important;
}

.text-golden {
	color: #b1a599 !important;
}

.border-golden {
	border-color: #b1a599 !important;
}

body {
	background-color: #f2ede9;
	padding-top: 137px;

	&.with-name {
		padding-top: 178px;
	}

	&.with-bar {
		padding-top: 163px;
	}

	&.with-name.with-bar {
		padding-top: 204px;
	}
}

.tns-controls {
    left: 0;
    position: absolute;
    top: 38%;
    width: 100%;
}

.tns-controls [data-controls=prev], .tns-controls [data-controls=next] {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
    height: 24px;
    padding: 0;
    position: absolute;
    width: 24px;
}

.tns-controls [data-controls="prev"] {
    background-image: url(https://emidica.com/img/templates/theme-2/ico-arrow-prev.svg);
}

.tns-controls [data-controls="next"] {
    background-image: url(https://emidica.com/img/templates/theme-2/ico-arrow-next.svg);
    right: 0;
}

.sliderSaleProducts {
	h3 {
		color: #FFF;
	}

	span {
		&.text-dark {
			color: #FFF !important;
		}

		&.text-black-50, &.opacity-50 {
			color: rgba($color: #FFF, $alpha: .5) !important;
		}
	}

	i.text-black {
		color: rgba($color: #FFF, $alpha: .5) !important;
	}
}

footer .list-unstyled li:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid white;
    margin-right: 4px;
}

.shipping_type, .payment_method {
	&.active::after {
		color: var(--bs-green);
		content: '\F26A';
		display: block;
		font-family: 'bootstrap-icons';
		height: 16px;
		position: absolute;
		right: 5px;
		top: 5px;
		width: 16px;
	}
}

header {
	z-index: 4;

	.logo {
		max-height: 48px;
	}

	.menu {
		width: 30px;

		span {
			height: 2px;
			transition: all ease-in-out .3s;
		}

		&.active {
			span:first-child {
				transform: rotate(45deg);
			}
			span:nth-child(2) {
				opacity: 0;
			}
			span:last-child {
				transform: rotate(-45deg);
				margin-top: -11px;
			}
		}
	}
}


footer {
	.logo {
		max-height: 45px;
		max-width: 115px;
	}
}

.longDescription figure, .short_description figure {
	display: block;
	margin: 20px auto;
	max-width: 100%;

	img {
		display: block;
		margin: 20px auto;
	}
}

.dropdown-menu {
	max-height: 350px;
}

#carouselBanners .tns-nav { bottom: 15px; display: flex; justify-content: center; left: 0; position: absolute; text-align: center; width: 100%; z-index: 2; }
#carouselBanners .tns-nav button { border: 3px solid #B1A599; border-radius: 50%; display: block; height: 20px; margin: 0 5px; opacity: 1; width: 20px; }
#carouselBanners .tns-nav button.tns-nav-active { border-color: #FFF; }

.menu-categories li.active > div > a { color: #CB8161; }
.menu-categories button { transition: all ease-in-out .3s;}
.menu-categories button.active { transform: rotate(90deg); }

.border-dashed.active { border-color: #3fca90 !important; }
.shipping_type.active::after, .payment_method.active::after { color: #3fca90; content: '\F26A'; display: block; font-family: 'bootstrap-icons'; height: 16px; position: absolute; right: 5px; top: 5px; width: 16px; }


@media (max-width: 991px) {
	body {
		padding-top: 81px;

		.mobile-nav {
			left: -100%;
			padding-top: 81px;
			transition: all ease-in-out .3s;
			z-index: 3;
			max-width: 425px;

			&.active {
				left: 0;
			}
		}

		&.with-bar {
			padding-top: 107px;

			.mobile-nav {
				padding-top: 107px;
			}
		}

		&.with-name {
			padding-top: 119px;

			.mobile-nav {
				padding-top: 119px;
			}
		}

		&.with-name.with-bar {
			padding-top: 145px;

			.mobile-nav {
				padding-top: 145px;
			}
		}
	}


	body.with-name .mobile-nav {
		padding-top: 118px;
	}

	.div-sellfast {
		padding-left: 1rem;
		padding-right: 1rem;

		button {
			flex: 1 1 auto !important;
		}
	}
}