@import './foods-images.css';
@import './animations.css';
@import './gradients.css';
@import './popup.css';
@import './overlay.css';
@import './tooltip.css';

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	font-weight: 300;
	font-size: 108%;

	overflow: hidden;
	user-select: none;
}
	@media screen and (max-width: 480px) {
		html, body {
			font-size: 4vw;
		}
	}

body {
	background-image: linear-gradient(to bottom right, rgba(204, 255, 51, 1) 0%, rgba(0, 153, 51, 1) 100%), url('../images/background.png');
	background-blend-mode: hard-light;

	font-family: 'Lato', 'Open Sans', 'Helvetica', sans-serif;
	color: #444;
	/* We use flexbox only for aligning '.container',
	because we need the container to be relatively-positioned. */
	display: flex;
	justify-content: center;
	align-items: flex-end;



	/* color variables */
	--fruits: #ffcf11;
	--vegetables: #734569;
	--milk: #79b5fe;
	--fast-food: #99bf2b;
	--drinks: #587d52;
	--meat: #d16b79;
	--sea-food: #f29631;
	--desserts: #80e0ba;
	--bread: #c2281c;

	--fruits-light: #ffd635;
	--vegetables-light: #7a4e70;
	--milk-light: #80b9fe;
	--fast-food-light: #9ec236;
	--drinks-light: #60845a;
	--meat-light: #d47280;
	--sea-food-light: #f39d3e;
	--desserts-light: #8ae2bf;
	--bread-light: #c6352a;

	--fruits-dark: #ff8c12;
	--vegetables-dark: #40243a;
	--milk-dark: #2a74ce;
	--fast-food-dark: #5b750f;
	--drinks-dark: #33532e;
	--meat-dark: #8b414b;
	--sea-food-dark: #b95c1c;
	--desserts-dark: #468d75;
	--bread-dark: #73150e;

	--fruits-hover: #ffdb1330;
	--vegetables-hover: #a4689730;
	--milk-hover: #8cc8ff30;
	--fast-food-hover: #a5c84330;
	--drinks-hover: #6a956330;
	--meat-hover: #e3899530;
	--sea-food-hover: #feaa6830;
	--desserts-hover: #90e8c530;
	--bread-hover: #d85a5030;
}


.container {
	position: relative;
	
	width: 80%;
	height: 93%;
	min-width: 256px; max-width: 700px; 
	min-height: 500px; /*max-height: 780px;*/

	background-color: #fff;
	border-top-right-radius: 3rem;

	display: grid;
	grid-template-rows: 6rem 1fr 3.4rem;
	grid-template-columns: 1fr 256px 256px 1fr;	/* 512 x 512 */
	grid-template-areas:
	"nav nav calories calories"
	"btn-prev main main btn-next"
	"footer footer footer footer";
	align-items: center;
	box-shadow: 0 .3rem 1rem rgba(0, 51, 0, .1);

	transition: filter 200ms;
}

.container.blur {
	filter: blur(.4rem);
}

@media screen and (min-width: 768px) {
	.container {
		min-width: 660px;
	}
}

/*
	between 768px and 600px we can normally use BIG images (170x170),
	but TWO in a row
*/
@media screen and (min-width: 600px) and (max-width: 767px) {
	.container {
		/* 2 BIG in a row */
		grid-template-columns: 1fr 171px 170px 1fr;
	}
}

@media screen and (min-width: 400px) and (max-width: 599px) {
	.container {
		/* 2 MIDDLE in a row */
		grid-template-columns: 1fr 131px 130px 1fr;
	}
}
@media screen and (max-width: 399px) {
	.container {
		/* 2 SMALL in a row */
		grid-template-columns: 1fr 91px 90px 1fr;
	}
}


@media screen and (max-width: 480px) {
	.container {
		grid-template-rows: 4.5rem 3rem 1fr 2.2rem;
		grid-template-areas:
		"nav nav nav nav"
		"calories calories calories calories"
		"btn-prev main main btn-next"
		"footer footer footer footer";

		border-top-right-radius: 2.2rem;
	}
}











/*
*
*	TOP CONTAINER
*
*/

nav {
	grid-area: nav;
	align-self: start;
	display: flex;
	align-items: center;
	position: absolute;
}
	.menu {
		position: relative;
		list-style: none;
		margin-left: -.3ch;
		font-family: 'Nunito Sans', 'Roboto', 'Helvetica', sans-serif;
		font-size: 1.7rem;
		font-weight: 300;
		height: 2.8rem;
		margin-top: 1.6rem;

		border-bottom-right-radius: 1.4rem;
		border-top-right-radius: 1.4rem;
		box-shadow: 0 .1rem .16rem rgba(0, 0, 0, .1);
		/* animate height so that shadow under the menu could adjust to its size.
			we also need this transition to detect its end */
		transition: height 250ms ease-out, width 200ms ease-out;
	}
		.menu.open {
			height: calc(2.8rem * 9);
			transition: height 250ms cubic-bezier(.14, .66, .4, 1.1);
		}

		@media screen and (max-width: 480px) {
			.menu {
				font-size: 1.3rem;
				height: 2.1rem;
				margin-top: 1.2rem;
				box-shadow: 0 .1rem .12rem rgba(0, 0, 0, .1);
			}
			.menu.open {
				height: calc(2.1rem * 9);
			}
		}
			.menu.en { width: 13.5rem; }
			.menu.ru { width: 16.5rem; }
			@media screen and (max-width: 480px) {
				.menu.en { width: 10.3rem; }
				.menu.ru { width: 12.5rem; }
			}
			

	

		.menu__item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: absolute;
			width: inherit;
			height: 2.8rem;
			border-bottom-right-radius: 1.4rem;
			border-top-right-radius: 1.4rem;
			cursor: pointer;
			text-transform: uppercase;
			text-decoration: none;
			color: #fff;
			padding-left: 1.2ch;

			transition: border-radius 200ms ease-out, transform 250ms ease-out, background-color 200ms ease-out;
		}

		@media screen and (max-width: 480px) {
			.menu__item {
				height: 2.1rem;
				border-bottom-right-radius: 1.1rem;
				border-top-right-radius: 1.1rem;
			}
		}

		.menu.open .menu__item {
			transition: border-radius 200ms ease-out, transform 250ms cubic-bezier(.14, .66, .4, 1.1), background-color 100ms ease-out;
		}

		.menu__item[data-type="fruits"]		{ background-color: var(--fruits); }
		.menu__item[data-type="vegetables"]	{ background-color: var(--vegetables); }
		.menu__item[data-type="milk"]			{ background-color: var(--milk); }
		.menu__item[data-type="fast-food"]		{ background-color: var(--fast-food); }
		.menu__item[data-type="drinks"]		{ background-color: var(--drinks); }
		.menu__item[data-type="meat"]			{ background-color: var(--meat); }
		.menu__item[data-type="sea-food"]		{ background-color: var(--sea-food); }
		.menu__item[data-type="desserts"]		{ background-color: var(--desserts); }
		.menu__item[data-type="bread"]			{ background-color: var(--bread); }


		.menu__item:nth-child(1) { z-index: 9; }
		.menu__item:nth-child(2) { z-index: 8; }
		.menu__item:nth-child(3) { z-index: 7; }
		.menu__item:nth-child(4) { z-index: 6; }
		.menu__item:nth-child(5) { z-index: 5; }
		.menu__item:nth-child(6) { z-index: 4; }
		.menu__item:nth-child(7) { z-index: 3; }
		.menu__item:nth-child(8) { z-index: 2; }
		.menu__item:nth-child(9) { z-index: 1; }

		/* LOOK HOW TO CREATE THIS VIA ANIMATION */

		/* opening the menu */
		.menu.open .menu__item:nth-child(1) { border-bottom-right-radius: 0; }
		.menu.open .menu__item:nth-child(2) { transform: translateY(100%); }
		.menu.open .menu__item:nth-child(3) { transform: translateY(200%); }
		.menu.open .menu__item:nth-child(4) { transform: translateY(300%); }
		.menu.open .menu__item:nth-child(5) { transform: translateY(400%); }
		.menu.open .menu__item:nth-child(6) { transform: translateY(500%); }
		.menu.open .menu__item:nth-child(7) { transform: translateY(600%); }
		.menu.open .menu__item:nth-child(8) { transform: translateY(700%); }
		.menu.open .menu__item:nth-child(9) {
			transform: translateY(800%);
			border-top-right-radius: 0;
		}
		.menu.open .menu__item:not(:first-child):not(:last-child) {
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}

		.menu.hidden .menu__item:not(:first-child) { visibility: hidden; }





.calories {
	grid-area: calories;
	justify-self: end;
	align-self: end;

	display: flex;
	align-items: baseline;

	font-family: 'Lato', 'Helvetica', sans-serif;
	font-size: 4rem;
	font-weight: 100;

	margin-right: 1ch;
}
@media screen and (max-width: 480px) {
	.calories {
		justify-self: center;
		align-self: center;
		font-size: 2.5rem;
		margin-right: 0;
		margin-left: 1.8rem; /* this is because of calculator icon */
	}
}

	.calories--icon {
		opacity: .7;
		transition: opacity 100ms ease-in-out;
	}

	.calories--icon__wrapper {
		width: 1.8rem;
		height: 1.8rem;
		transition: transform 100ms ease-in-out;
		transform-origin: center;
	}
	@media screen and (max-width: 480px) {
		.calories--icon__wrapper {
			width: 1.2rem;
			height: 1.2rem;
		}
	}

	.calories--icon.active { opacity: 1; cursor: pointer; }

	.calories--icon.calculator #calculator { display: block; }
	.calories--icon.calculator #trash { display: none; }
	.calories--icon.trash #calculator { display: none; }
	.calories--icon.trash #trash { display: block; }

	.calories--icon.calculator.calculator-close .calories--icon__wrapper { transform: scaleX(.1); }
	.calories--icon.trash.calculator-close .calories--icon__wrapper { transform: scaleX(1); }

	.calories--icon.trash.trash-close .calories--icon__wrapper { transform: scaleX(.1); }
	.calories--icon.calculator.trash-close .calories--icon__wrapper { transform: scaleX(1); }






/*

	MIDDLE CONTAINER

*/

.btn__prev {
	grid-area: btn-prev;
}
.btn__next {
	grid-area: btn-next;
}

.btn__prev.visible,
.btn__next.visible {
	visibility: visible;
}

.btn__prev,
.btn__next {
	justify-self: stretch;
	align-self: stretch;
	display: flex;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	border: none;
	outline: none;
	visibility: hidden;
}

@media screen and (max-width: 480px) {
	.btn__prev,
	.btn__next {
		justify-self: center;
	}
}

	.arrow:active { margin-top: .15rem; }

		.arrow--icon {
			background-image: linear-gradient(to bottom right, rgba(204, 255, 51, 1) 0%, rgba(0, 153, 51, 1) 100%), url('../images/background.png');
			background-blend-mode: hard-light;
			background-attachment: fixed;
			height: 2.4rem;
			width: 2.4rem;
		}
		@media screen and (max-width: 480px) {
			.arrow--icon {
				height: 1.6rem;
				width: 1.6rem;
			}
		}

		.btn__prev .arrow--icon {
			-webkit-clip-path: url('#arrow-left');
			clip-path: url('#arrow-left');
		}
		.btn__next .arrow--icon {
			-webkit-clip-path: url('#arrow-right');
			clip-path: url('#arrow-right');
		}



/*
*
*	MAIN CONTAINER
*
*/

main {
	position: relative;
	
	grid-area: main;
	display: flex;

	overflow: hidden;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

main::-webkit-scrollbar {
	display: none;
}

/* LOADING-ICON */

.foods__loading {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: none;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, .8);
	opacity: 0;
}
.foods__loading.display { display: flex; }
.foods__loading.visible {
	opacity: 1;
	transition: opacity 30ms ease-in-out;
}

	.foods__loading--icon {
		width: 4rem;
		height: 4rem;
	}
	@media screen and (max-width: 480px) {
		.foods__loading--icon {
			width: 2.6rem;
			height: 2.6rem;
		}
	}
	.foods__loading.display .foods__loading--icon { animation: loading-rotate 1200ms linear infinite; }


/* FOODS PAGE */


.foods__page__list {	
	display: grid;
	grid-template-rows: 170px 170px 170px;
	grid-template-columns: 170px 170px 170px;
	grid-gap: 1px;

	list-style: none;
}
	.bottom:after { content: "9"; }

/* iPad Pro height and bigger */
@media screen and (min-height: 1025px) {
	.foods__page__list {
		grid-template-rows: 170px 170px 170px 170px 170px;
	}
	.bottom:after { content: "15"; }
}

/* iPad height */
@media screen and (min-height: 960px) and (max-height: 1024px) {
	.foods__page__list {
		grid-template-rows: 170px 170px 170px 170px;
	}
	.bottom:after { content: "12"; }
}


/* small height of the screen */
@media screen and (max-height: 720px) {
	.foods__page__list {
		grid-template-rows: 170px 170px;
	}
	.bottom:after { content: "6"; }
}

/*
	between 768px and 600px we can normally use BIG images (170x170),
	but TWO in a row
*/
@media screen and (min-width: 600px) and (max-width: 767px) {
	.foods__page__list {
		/* 2 BIG in a row */
		grid-template-rows: 170px 170px 170px;
		grid-template-columns: 170px 170px;
	}
	.bottom:after { content: "6"; }
}

@media screen and (min-width: 400px) and (max-width: 599px) {
	.foods__page__list {
		/* 2 MIDDLE in a row */
		grid-template-rows: calc(130px + 1.6rem) calc(130px + 1.6rem) calc(130px + 1.6rem);
		grid-template-columns: 130px 130px;
	}
	.bottom:after { content: "6"; }
}

@media screen and (max-width: 399px) and (max-height: 759px) {
	.foods__page__list {
		/* 2 SMALL in a row*/
		grid-template-rows: calc(90px + 1.8rem) calc(90px + 1.8rem) calc(90px + 1.8rem);
		grid-template-columns: 90px 90px;
	}
	.bottom:after { content: "6"; }
}

/* Case of iPhone X */
@media screen and (max-width: 399px) and (min-height: 760px) {
	.foods__page__list {
		/* 2x4 SMALL */
		grid-template-rows: calc(90px + 1.8rem) calc(90px + 1.8rem) calc(90px + 1.8rem) calc(90px + 1.8rem);
		grid-template-columns: 90px 90px;
	}
	.bottom:after { content: "8"; }
}


	.foods__page__list.scroll-out {
		transform: translateX(-100%);
	}


	.foods__page__list__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		cursor: pointer;
		transition: background-color 150ms;
	}


		.foods__page__list__item__image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			transition: transform 100ms ease-out;
		}

			.foods__page__list__item__image img {
				display: block;
				transition: transform 100ms ease-out;
			}

			.foods__page__list__item__image img.hidden { visibility: hidden; }

			.foods__page__list__item:active .foods__page__list__item__image img {
				transform: scale(.98) translateY(.05rem);
			}
			
			.foods__page__list__item.selected .foods__page__list__item__image img {
				animation: item-select 200ms ease-out;
				filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8))
						drop-shadow(1px 0 0 rgba(255, 255, 255, .8))
						drop-shadow(0 -1px 0 rgba(255, 255, 255, .8))
						drop-shadow(-1px 0 0 rgba(255, 255, 255, .8))
						drop-shadow(0 0 .5rem rgba(255, 255, 255, .15));
			}

		.foods__page__list__item__text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: baseline;
			padding: 0 .5rem .2rem .5rem;
		}
		

			.foods__page__list__item__text--title {
				font-size: inherit;
				font-weight: inherit;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.foods__page__list__item__text--grams {
				font-size: .86rem;
				white-space: nowrap;

				display: none;
			}
			.foods__page__list__item__text--grams:before {
				content: "\00b7";
				margin: 0 .5ch;
			}

			@media screen and (max-width: 599px) {
				.foods__page__list__item__text {
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 3.4rem;
				}
				.foods__page__list__item__text--grams { font-size: .8rem; }
				.foods__page__list__item__text--grams:before { content: ""; }

			}

			.foods__page__list__item.selected .foods__page__list__item__text--grams { display: block; }

			/*.foods[theme="vegetables"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="milk"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="fast-food"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="drinks"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="meat"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="sea-food"] .foods__page__list__item__text--grams { color: #fff; }
			.foods[theme="bread"] .foods__page__list__item__text--grams { color: #fff; }*/

	.foods__page__list__item,
	.foods__page__list__item.selected,
	.foods__page__list__item.selected:hover
		{ background-attachment: fixed; }





	.foods__page__list[data-type="vegetables"] .foods__page__list__item.selected,
	.foods__page__list[data-type="vegetables"] .foods__page__list__item.selected:hover
		{ color: #fff;}
	.foods__page__list[data-type="milk"] .foods__page__list__item.selected,
	.foods__page__list[data-type="milk"] .foods__page__list__item.selected:hover
		{ color: #fff;}
	.foods__page__list[data-type="fast-food"] .foods__page__list__item.selected,
	.foods__page__list[data-type="fast-food"] .foods__page__list__item.selected:hover
		{ color: #fff; }
	.foods__page__list[data-type="drinks"] .foods__page__list__item.selected,
	.foods__page__list[data-type="drinks"] .foods__page__list__item.selected:hover
		{ color: #fff; }
	.foods__page__list[data-type="meat"] .foods__page__list__item.selected,
	.foods__page__list[data-type="meat"] .foods__page__list__item.selected:hover
		{ color: #fff;}
	.foods__page__list[data-type="sea-food"] .foods__page__list__item.selected,
	.foods__page__list[data-type="sea-food"] .foods__page__list__item.selected:hover
		{ color: #fff;}
	.foods__page__list[data-type="desserts"] .foods__page__list__item.selected,
	.foods__page__list[data-type="desserts"] .foods__page__list__item.selected:hover
		{ color: #fff;}
	.foods__page__list[data-type="bread"] .foods__page__list__item.selected,
	.foods__page__list[data-type="bread"] .foods__page__list__item.selected:hover
		{ color: #fff;}






/*

	BOTTOM CONTAINER

*/

footer {
	grid-area: footer;
	justify-self: end;
	align-self: end;
	margin-right: -.3ch;
}
	.bottom {
		position: relative;
		width: 10rem;
		height: 1.4rem;
		border-top-left-radius: 1.4rem;
		box-shadow: 0 .2rem .25rem rgba(0, 0, 0, .2);
		transition: height 200ms ease-in-out, border-radius 200ms ease-in-out, background-color 200ms ease-in-out;
	}
	@media screen and (max-width: 480px) {
		.bottom {
			width: 9rem;
			height: 1.3rem;
			box-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
		}
	}

	.bottom.open {
		height: 4rem;
		border-top-left-radius: 2rem;
	}
	@media screen and (max-width: 480px) {
		.bottom.open {
			height: 3.4rem;
		}
	}

	.bottom[theme="fruits"]		{ background-color: var(--fruits-dark); }
	.bottom[theme="vegetables"]	{ background-color: var(--vegetables-dark); }
	.bottom[theme="milk"]		{ background-color: var(--milk-dark); }
	.bottom[theme="fast-food"]	{ background-color: var(--fast-food-dark); }
	.bottom[theme="drinks"]		{ background-color: var(--drinks-dark); }
	.bottom[theme="meat"]		{ background-color: var(--meat-dark); }
	.bottom[theme="sea-food"]	{ background-color: var(--sea-food-dark); }
	.bottom[theme="desserts"]	{ background-color: var(--desserts-dark); }
	.bottom[theme="bread"]		{ background-color: var(--bread-dark); }


		.bottom__menu {
			list-style: none;
			margin: 0 auto;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			font-size: .86rem;
			color: #fff;
			width: 90%;
			height: 100%;
			opacity: 0;
			transition: opacity 200ms;
		}
		@media screen and (max-width: 480px) {
			.bottom__menu { font-size: .8rem; }
		}

			.bottom__menu li:not(.separator) {
				cursor: pointer;
				text-decoration: underline;
			}

			.bottom__menu li:not(.separator):hover,
			.bottom__menu li:not(.separator):active {
				text-decoration: none;
			}

			.bottom__menu.visible { opacity: 1; }



		.bottom__flags {
			position: absolute;
			top: 0;
			display: none;
			justify-content: space-evenly;
			align-items: center;
			list-style: none;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			transition: opacity 200ms;
		}

		.bottom__flags.display { display: flex; }
		.bottom__flags.visible { opacity: 1; }

			.bottom__flags__item {
				margin: 0;
				padding: 0;
				line-height: 0;
			}
			.bottom__flags__item.clickable {
				cursor: pointer;
				transition: transform 150ms ease-in-out;
			}
			.bottom__flags__item.clickable:hover {
				transform: translateY(-.1rem);
			}

			.bottom__flags__item--icon {
				height: 2.6rem;
				width: 2.6rem;
				background-size: 2.6rem 2.6rem;
			}
			@media screen and (max-width: 480px) {
				.bottom__flags__item--icon {
					height: 2.2rem;
					width: 2.2rem;
					background-size: 2.2rem 2.2rem;
				}
			}





	/* DON'T REMOVE THIS PSEUDO ELEMENT */
	/* It takes care about how many items are shown on one page */
	.bottom:after {
		font-size: 0;
		position: absolute;
		visibility: hidden;
	}