@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400&family=Nunito:wght@200;400;500;600&display=swap');

:root {
	--main-font-color: #151515;
	--secondary-font-color: #ccc;
	--header-background: #f8f8f8;
	--bg-color: #fdfdfd;
	--bg-second-color: hsl(107 11% 97% / 1);
	--bg-semi-transparent-color: rgba(253, 253, 253, 0.5);
	--backdrop-color: #88888850;
	--list-items-separator: #eee;
	--footer-bg-color: #f8f8f8;
	--no-media-color: aliceblue; /*hsl(294 23% 94% / 1) */; /* hsl(180 25% 97% / 1); */ /* hsl(33 100% 98% / 1); warm */

	--input-bg: #ffffff;
	--input-border: #dcdcdc;
	--input-font: #151515;

	--fav-color: hsl(330 110% 65% / 1);
	--fav-font-color: #FFFFFF;
	--fav-bg-color: #f0f0f0;

	--chips-font-color: hsl(234 6% 67% / 1);
	--chips-bg-color: aliceblue;

	--price-label-font-color: #ffffffa8;
	--price-item-font-color: white;
	--price-item-bg-color: hsl(234 65% 57% / 1);
	--price-item-bg-color-disabled: #b2b4c7;
	--secondary-price-item-bg-color: hsl(234 65% 67% / 1);
	--success-bg-color: #d96b4a;
	/*--success-bg-color: hsl(107, 47%, 53%);*/

	--filter-active-color: #00031a;
	--filter-disabled-color: transparent;

	--cart-widget-color: #00031a;

	--promo-card-bg-color: #2b2b2d;
	--promo-card-text-color: white;

	--fs-75: 0.75rem;
	--fs-85: 0.85rem;
	--fs-90: 0.90rem;
	--fs-95: 0.95rem;
	--fs-100: 1.00rem;
	--fs-110: 1.10rem;
	--fs-120: 1.20rem;
	--fs-125: 1.25rem;
	--fs-130: 1.30rem;
	--fs-150: 1.50rem;

	--button-primary-bg-color: #3B4FCF;
	--button-primary-text-color: #FFFFFF;
	--button-secondary-bg-color: transparent;
	--button-secondary-text-color: #5C5C5B;
	--button-secondary-border: 1px solid #AEAEAE;
	--button-disabled-bg-color: #D9D9D9;
	--button-disabled-text-color: #9D9D9D;

	--screen-backdrop-color: rgba(0,0,50,0.25);
	--screen-bg-color: #FCFDFF;
	--screen-text-color: #000000;
	--screen-border-color: #DFE2F7;
	--screen-shadow: 0 0 12px 0 rgba(54, 158, 255, 0.15);

	--cart-items-separator: #DDEAF7;
	--cart-min-order-warning-bg: #0088ff14;

	--order-success-icon-color: #3B4FCF;
	--order-error-icon-color: #FC6260;
	--order-result-message-color: #605F5F;
	--order-number-text-color: #302C3E;
	--order-number-color: #3B4FCF;
	--order-input-border-radius: .625rem;
	--order-input-border-color: #E0E2EB;
	--order-input-placeholder-color: #CFCFCF;
	--order-input-text-color: #191919;
	--order-input-bg-color: #FFFFFF;
	--order-error-label-color: #C13C1B;
	--order-footer-text-color: #111111;
	--cart-item-preview-bg: #F1F8FD;
}
.theme--warm {
	--main-font-color: #151515;
	--secondary-font-color: #ccc;
	--bg-color: #fffffe;
	--bg-second-color: hsl(107 11% 97% / 1);
	--backdrop-color: #00000070;
	--footer-bg-color: #f8f8f8;
	--no-media-color: #fff5f0;
	--fav-color: hsl(5 91% 66% / 1);
	--fav-font-color: #FFFFFF;
	--fav-bg-color: #f0f0f0;
	--chips-font-color: hsl(234 6% 67% / 1);
	--chips-bg-color: #fff5f0;
	--price-label-font-color: #ffffffa8;
	--price-item-font-color: white;
	--price-item-bg-color: hsl(214 65% 57% / 1);
	--secondary-price-item-bg-color: hsl(214 65% 67% / 1);
	--success-bg-color: hsl(107, 47%, 53%);
	--cart-widget-color: #00031a;

	--promo-card-bg-color: maroon;
	--promo-card-text-color: white;

	--button-primary-bg-color: #3B4FCF;
	--button-primary-text-color: #FFFFFF;
	--button-secondary-bg-color: transparent;
	--button-secondary-text-color: #5C5C5B;
	--button-secondary-border: 1px solid #AEAEAE;
	--button-disabled-bg-color: #D9D9D9;
	--button-disabled-text-color: #9D9D9D;

	--screen-backdrop-color: rgba(0,0,50,0.25);
	--screen-bg-color: #FCFDFF;
	--screen-text-color: #000000;
	--screen-border-color: #DFE2F7;
	--screen-shadow: 0 0 12px 0 rgba(54, 158, 255, 0.15);

	--cart-items-separator: #DDEAF7;
	--cart-min-order-warning-bg: #0088ff14;

	--order-success-icon-color: #3B4FCF;
	--order-error-icon-color: #FC6260;
	--order-result-message-color: #605F5F;
	--order-number-text-color: #302C3E;
	--order-number-color: #3B4FCF;
	--order-input-border-radius: .625rem;
	--order-input-border-color: #E0E2EB;
	--order-input-placeholder-color: #CFCFCF;
	--order-input-text-color: #191919;
	--order-input-bg-color: #FFFFFF;
	--order-error-label-color: #C13C1B;
	--order-footer-text-color: #111111;
	--cart-item-preview-bg: #F1F8FD;
}
.theme--dark {
	--main-font-color: #eaeaea;
	--secondary-font-color: #ccc;
	--header-background: #232323;
	--bg-color: #171717;
	--bg-second-color: #3f3f3f;
	--backdrop-color: #45454570;
	--list-items-separator: #3f3f3f;
	--footer-bg-color: #000000;
	--no-media-color: #3d3d3d;

	--input-bg: #24242c;
	--input-border: #4e4b59;
	--input-font: #eaeaea;

	--fav-color: darkorange;
	--fav-font-color: #FFFFFF;
	--fav-bg-color: #3d3d3d;

	--chips-font-color: hsl(234 6% 67% / 1);
	--chips-bg-color: #1e3e5a;

	--price-label-font-color: #ffffffa8;
	--price-item-font-color: white;
	--price-item-bg-color: hsl(234 65% 57% / 1);
	--price-item-bg-color-disabled: #b2b4c7;
	--secondary-price-item-bg-color: hsl(234 65% 67% / 1);
	--success-bg-color: hsl(107, 47%, 53%);

	--filter-active-color: #414777;
	--filter-disabled-color: transparent;

	--cart-widget-color: #485cf5;

	--promo-card-bg-color: darkorange;
	--promo-card-text-color: white;

	--screen-backdrop-color: rgba(25, 25, 45, 0.5);
	--screen-bg-color: #141418;
	--screen-text-color: #F2F2F2;
	--screen-border-color: #305c83;
	--screen-shadow: 0 0 12px 0 rgba(20, 20, 50, 0.9);

	--button-primary-bg-color: #0A5CA6;
	--button-primary-text-color: #FFFFFF;
	--button-secondary-bg-color: transparent;
	--button-secondary-text-color: #FFFFFF;
	--button-secondary-border: 1px solid #359EFF;
	--button-disabled-bg-color: #333333;
	--button-disabled-text-color: #7D7D7D;

	--cart-items-separator: #373737;
	--cart-min-order-warning-bg: #678fdf40;

	--order-success-icon-color: #359EFF;
	--order-error-icon-color: #FC6260;
	--order-result-message-color: #F6F6F6;
	--order-number-text-color: #F6F6F7;
	--order-number-color: #359EFF;
	--order-input-border-radius: .625rem;
	--order-input-border-color: #363636;
	--order-input-placeholder-color: #7F7F7F;
	--order-input-text-color: #F6F6F7;
	--order-input-bg-color: #25252D;
	--order-error-label-color: #C13C1B;
	--order-footer-text-color: #E8F4FF;
	--cart-item-preview-bg: #34383b;
}
.theme--dark a {
	color: cornflowerblue;
}

.fonts--xs {
	--fs-75: 0.5625rem;
	--fs-85: 0.6375rem;
	--fs-90: 0.675rem;
	--fs-95: 0.7125rem;
	--fs-100: 0.75rem;
	--fs-110: 0.825rem;
	--fs-120: 0.9rem;
	--fs-125: 0.9375rem;
	--fs-130: 0.975rem;
	--fs-150: 1.125rem;
}
.fonts--sm {
	--fs-75: 0.675rem;
	--fs-85: 0.765rem;
	--fs-90: 0.81rem;
	--fs-95: 0.855rem;
	--fs-100: 0.9rem;
	--fs-110: 0.99rem;
	--fs-120: 1.08rem;
	--fs-125: 1.125rem;
	--fs-130: 1.17rem;
	--fs-150: 1.35rem;
}
.fonts--md {
	--fs-75: 0.75rem;
	--fs-85: 0.85rem;
	--fs-90: 0.90rem;
	--fs-95: 0.95rem;
	--fs-100: 1.00rem;
	--fs-110: 1.10rem;
	--fs-120: 1.20rem;
	--fs-125: 1.25rem;
	--fs-130: 1.30rem;
	--fs-150: 1.50rem;
}
.fonts--xl {
	--fs-75: 0.825rem;
	--fs-85: 0.935rem;
	--fs-90: 0.99rem;
	--fs-95: 1.045rem;
	--fs-100: 1.1rem;
	--fs-110: 1.21rem;
	--fs-120: 1.32rem;
	--fs-125: 1.375rem;
	--fs-130: 1.43rem;
	--fs-150: 1.65rem;
}
.fonts--xxl {
	--fs-75: 0.9375rem;
	--fs-85: 1.0625rem;
	--fs-90: 1.125rem;
	--fs-95: 1.1875rem;
	--fs-100: 1.25rem;
	--fs-110: 1.375rem;
	--fs-120: 1.5rem;
	--fs-125: 1.5625rem;
	--fs-130: 1.625rem;
	--fs-150: 1.875rem;
}

* {
	box-sizing: border-box;
}
html {
	margin: 0;
	padding: 0;
}
body {
	font-family: Nunito, sans-serif;
	font-weight: 300;
	color: var(--main-font-color);
	background: var(--bg-color);
	padding: 0;
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 16px;
}

body::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
body::-webkit-scrollbar-track {
	box-shadow: none;
	background-color: var(--bg-color);
}
body::-webkit-scrollbar-thumb {
	background-color: var(--backdrop-color);
}
body:hover::-webkit-scrollbar-thumb {
	background-color: var(--button-primary-bg-color);
}
@media (max-width: 768px) {
	body::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}
}

em {
	background: gold;
	font-style: normal;
	color: #0f0f0f;
}

@media (min-width: 768px) {
	.pointer {
		cursor: pointer;
	}
}

.dm-label {
	font-size: .8rem;
}

.layer-sections { z-index: 100; }
.layer-filters { z-index: 200; }
.layer-widgets { z-index: 300; }
.layer-details { z-index: 400; }
.layer-cart { z-index: 500; }

.stick-bottom {
	bottom: env(safe-area-inset-bottom);
	position: fixed;
}

.fs-75 { font-size: var(--fs-75); }
.fs-85 { font-size: var(--fs-85); }
.fs-90 { font-size: var(--fs-90); }
.fs-95 { font-size: var(--fs-95); }
.fs-100 { font-size: var(--fs-100); }
.fs-110 { font-size: var(--fs-110); }
.fs-120 { font-size: var(--fs-120); }
.fs-125 { font-size: var(--fs-125); }
.fs-130 { font-size: var(--fs-130); }
.fs-150 { font-size: var(--fs-150); }

/*SCREEN CONTAINER*/
.screen-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 110vh;
	height: 110dvh !important;
	background: var(--screen-backdrop-color);

	animation: fade-in .5s ease-out forwards;
}
.screen-content {

	position: fixed;
	left: 0;
	bottom: 0;
	height: calc(95vh - calc(100vh - 100%));

	width: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top-left-radius: 1.75rem;
	border-top-right-radius: 1.75rem;
	padding-left: 24px;
	padding-right: 24px;
	color: var(--screen-text-color);
	background: var(--screen-bg-color);
	border-top: 1px solid var(--screen-border-color);
	box-shadow: var(--screen-shadow);
}
.screen-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 22px;
	padding-bottom: 22px;
}
.screen-header h1 {
	display: flex;
	gap: .35em;
	width: 100%;
	font-size: 1.5em;
	padding: 0;
	margin: 0;
	line-height: 1;
}
.screen-header svg {
	color: var(--screen-text-color);
}
.screen-header small {
	opacity: .7;
}
.screen-close-button {
	border: none;
	background: none;
	line-height: 1;
	font-size: 1.25rem;
}
.screen-footer {
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
@media (min-width: 768px) {
	.screen-content {
		max-width: 500px;
		border-radius: 1.75rem;
		margin-bottom: 2vh;
		left: 50%;
		transform: translateX(-50%);
	}
}

.blurred-layer {
	filter: blur(2px) brightness(1) opacity(0.5);
}

.bounce-animation {
	animation: bounce 1.5s ease-in-out forwards;
}
.bounce-short-animation {
	animation: bounce-short 1.5s ease-in-out forwards;
}
.fade-in-animation {
	animation: fade-in .5s ease-out forwards;
}
.scale-in-animation {
	animation: scale-in .15s ease forwards;
}
.slide-up-animation,
.slide-up-animation--centered {
	animation: slide-up-mobile .2s ease-out forwards;
}
@media (min-width: 768px) {
	.slide-up-animation {
		animation: slide-up-desktop .2s ease-out forwards;
	}
	.slide-up-animation--centered {
		animation: slide-up-desktop--centered .2s ease-out forwards;
	}
}

@keyframes bounce {
	0%  { transform: translateY(0%) scale(.95); opacity: 0;}
	10% { transform: translateY(-15%) scale(1.05); opacity: 1;}
	20% { transform: translateY(0%) scale(1);}
	25% { transform: translateY(-7%);}
	27% { transform: translateY(0%);}
}
@keyframes bounce-short {
	0%  { transform: translateY(0%) scale(.95); opacity: 0;}
	10% { transform: translateY(-10%) scale(1.03); opacity: 1;}
	20% { transform: translateY(0%) scale(1);}
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes scale-in {
	from {
		opacity: 0;
		transform: scale(.9) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}
@keyframes slide-up-mobile {
	from {
		opacity: 0.5;
		transform: translateY(50vh);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slide-up-desktop {
	from {
		opacity: 0.5;
		transform: translateY(20vh) scale(.8);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes slide-up-desktop--centered {
	from {
		opacity: 0.5;
		transform: translateY(20vh) translateX(-50%) scale(.8);
	}
	to {
		opacity: 1;
		transform: translateY(0) translateX(-50%) scale(1);
	}
}

/*END: SCREEN CONTAINER*/

ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 0;
}

.splide {
	height: 100% !important;
	max-height: 100% !important;
}
.splide__track {
	height: 100% !important;
	max-height: 100% !important;
}
.splide__arrow:disabled {
	opacity: 0 !important;
}
.splide {
	border-radius: 1.5rem;
	overflow: hidden;
}
.flex {
	display: flex;
}
.flex-column {display: flex; flex-direction: column;}
.flex-fill{
	flex: 1 1;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.jc-center {
	display: flex;
	justify-content: center;
}
.ai-center {
	display: flex;
	align-items: center;
}
.flex-vertical {
	display: flex;
	flex-direction: column;
}
.gap-05 { gap: .5rem; }
.gap-1 { gap: 1rem; }
.gap-15 { gap: 1.5rem; }

.full-width {width: 100%;}
.full-height {height: 100%;}

.scroll-y {
	overflow-y: auto;
}

@media (min-width: 768px) {
	.hide-on-desktop { display: none; }
}

.nowrap {
	white-space: nowrap;
}
.wrap-anywhere {
	text-wrap: auto;
	white-space: break-spaces;
	overflow-wrap: anywhere;
}
.user-select-none {
	user-select: none;
}
.underline {
	text-decoration: underline;
}

.order-buttons {
	display: flex;
	align-items: center;
	background: var(--price-item-bg-color);
	color: var(--price-item-font-color);
	border-bottom-right-radius: 0.75rem;
	border-top-left-radius: 0.75rem;
	overflow: hidden;
}
.add-button {
	width: 2rem;
	height: 2rem;
	font-size: 1.25rem;
	background: inherit;
	color: inherit;
	border: none;
}