@charset "UTF-8"; 
:root{
	--color:#000000;
	--bg-color:#ffffff;
	--bg-butpay:#42bdac;	
	--tr-odd-bg-color:#f1f1f1;	
	--bg-invalid:#ffd3d3;
	--border-color-invalid:red;
	--input-color:#006294;
	--radio-bg-color:limegreen;
	--fieldset-bg-color:transparent;
	--fieldset-border-color:#bdbdbd;
	--xpos-stores:translateX(200%);
	--is-tg:false;
	--paddingconteiner: 0.5em;	
	--height_h1: 0px;
	--height-submit: 55px;			
	--but-count-maxh: 26px;		
	--plus-bg-color:#42bdac;
	--color-orange:#ff9900;	
	--header-bg-color:#527da3;
	--main-blue:#0088cc;
	--bg-bookmark:#d6d6d6;
	--border-color-bookmark:#555;
	--border-color-active-bookmark:dimgrey;
	--color-bookmark: #606060;
	--color-bookmark-active: var(--color);	
}
*{box-sizing: border-box;margin:0; padding:0;user-select:none;}
body{font-family:-apple-system, system-ui, sans-serif; color:var(--color);background-color:var(--bg-color);}
header{	
	background-size: cover; background-repeat: no-repeat; background-position: center;
	[data-store-descript]{line-height: 1.1em;padding: 0 3rem 1em 2rem;text-align: left;text-wrap-style: balance;font-style:Italic;}	
	.toner{backdrop-filter: brightness(0.6);color:white;min-height:17vh;}
}
button{outline: none; border: none;color: inherit;}
button[popovertarget]{background-color: transparent;}
.menu_radio_category{			
	width: min(1024px, 100%); margin: 0 auto; overflow-y: auto; scrollbar-width: none;
	ol{display: grid;grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap:3px;flex-wrap: wrap;list-style-type: none;padding:0; margin:0 5px;}
	li{white-space: nowrap;padding:2px; color:#222;background-color: color-mix(in srgb, var(--bg-bookmark), transparent 8%);text-align: center;transition: all .2s;border-radius: 15px;}
	label{display:inline-block;width:-webkit-fill-available;}
	input{display: none;}	
}	
.menu_radio_category li:has(input:checked){
	background-color:var(--bg-color);color:var(--color-bookmark-active);
}
.menu_radio_category li:hover{cursor:pointer;}	
.menu_radio_lang{
	display: flex; gap: 1em;align-items: center;
	label{
		height: 1.2em; opacity: 0.4; white-space: nowrap;aspect-ratio: 4 / 3;
		background-position:center; background-repeat:no-repeat; background-size:cover;
	}
	input{display: none;}	
}
.menu_radio_lang label:has(input:checked){opacity: unset;}
.menu_radio_lang label:hover{cursor:pointer;}	
/* ------------------------------------------------------------ */
/*.icon{
	display:inline-block;box-sizing: content-box;background-size: cover;background-repeat: no-repeat;background-position: center;	border: 1px solid transparent;transition: all .2s;border-radius: 6px;width:1.3em; height:1.3em;
}*/
.conteiner{margin: 0 auto; padding: 0 0.5em;width:min(680px, 100%); height: var(--height-conteiner);}
.conteiner_stores{width:min(768px, 100%); position: sticky;  top: 0px;max-height: 100svh;margin: 0 auto;}
.link_but{
	display:block; width: -webkit-fill-available; transition: opacity .3s;
	text-decoration: none; text-align: center;background-color: var(--plus-bg-color);color:white;border-radius:5px;padding: 10px 5px ;
	&:hover{background-color: #41c7b5;}
}
.box_dishes{
	display: grid;grid-template-columns: repeat(3, 1fr);gap:5px;overflow-y: auto;scrollbar-width: thin;	margin-left: 2px;    margin-right: 2px;
	figure{width: 100%;position:relative;background-color: transparent;border-radius: 15px;text-align:center;}	
	img{width: 90%; object-fit: cover; border-radius: 5%; aspect-ratio:1 / 1;}			
	.name_img{font-size:small;font-weight: 500;position: absolute;width: -webkit-fill-available;background-color: #ffffff;color: #000; transform: translateY(-100%);text-align: center;padding: 2px;white-space: nowrap;overflow-y: hidden;text-overflow: ellipsis;scrollbar-width: none;}
	button[popovertarget]{position:absolute; top:0;left: 0;height:100%;opacity: 0; width:-webkit-fill-available; }
}
.but_count{display: block;overflow:hidden;transition: all .2s;padding: 0px 5px;width: 50px;max-height:var(--but-count-maxh);border-radius: 5px;color: white;font-weight:bold;font-size: x-large;text-shadow: 1px 1px #717171; margin:0 5px;}	
.but_buy{
	transition: all .2s;width: 90px;background-color: var(--main-blue);color: white; padding: 4px 15px; border-radius: 5px;font-size: medium;display: block;
	&[disabled]{background-color: var(--bg-bookmark);color:#333;}
}
.wrap_but_order{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;height: 26px;max-width: calc(100vw / 3 - 8px);overflow: hidden;}
.mode_pay{.but_count{width:0; height:0;border:none; overflow:hidden;}}
.mode_count{
	.but_buy{width:0; height:0; border:none;padding: 0;margin: 0;overflow:hidden;}		
}
.minus{background-color: #ff9900;} .plus {background-color: var(--plus-bg-color);}
.over-time{grid-column: 1 / -1; width: -webkit-fill-available;text-align: center;line-height: 2em;font-size: x-large;color: orangered;}
footer{
	color:white;line-height:var(--height_footer);font-size:medium;text-align:center;transition: all .2s;
	button{width: -webkit-fill-available;background-color: var(--bg-bookmark); height: 50px; font-size: medium;}
	.return_app{display:none;}
}
footer:has([data-lang='min_amount']){	background-color:var(--color-orange);}
footer:not(has([data-lang='min_amount'])):hover{background-color:#0a91d5;}
#table_basket{
	font-family: -apple-system, system-ui, sans-serif; width: -webkit-fill-available;border-collapse: collapse; margin: 0 5px;
	td,th{border-bottom: 1px solid #d7d7d7; padding:1px 3px;}
	thead th{font-size:smaller;font-weight: unset;color:#333;}
	tbody{}
	td[summ]{text-align:right;white-space: nowrap;}
	td[left],th[left]{text-align:left;}
	td[right],th[right]{text-align:right;}	
	tbody td:nth-child(3){text-align:center;}		
}
.menu_radio{input{display:none}}
.main_blue label{text-align:center;background-color: #e9e9e9;border: 1px solid #b2b2b2;}
.main_blue label:has(input:checked){background-color:var(--main-blue);border-color:var(--main-blue);color:#fff;}

.menu_radio_simple{	
	padding: 0.5em;	
	label{display:block;text-align: center; width: calc(50% - 0.5em); border:1px solid transparent; padding: 6px 2px;border-radius: 18px;}
	input{position:absolute;opacity: 0;}
}			
#box_order{
	display:none;overflow-y: auto;scrollbar-width: thin;
	form{margin-bottom:var(--height-submit);/*position: sticky; bottom: 0px;*/}
	fieldset{
		background-color:var(--fieldset-bg-color); width: -webkit-fill-available; margin: 5px;border:none;border-top: 1px solid var(--fieldset-border-color);		
		legend{font-size: 0.9em;padding: 0 1em;}
	}
	textarea, input[type='text'], input[type='tel']{ 
			border: none; resize: none;  width: -webkit-fill-available;margin: 1px 0;padding:5px 10px;outline: none;font-family: system-ui;font-size: 1.1em;   color: var(--input-color);text-align: center;background-color: inherit;
	}	
	textarea::placeholder {font-size:0.8em;}
	textarea:placeholder-shown {background-color: #feffdb;}
	input:autofill{-webkit-box-shadow: 0 0 0 30px var(--bg-color) inset !important;	-webkit-text-fill-color: var(--input-color) !important;}
	input:-webkit-autofill:invalid{-webkit-box-shadow: 0 0 0 30px var(--bg-invalid) inset !important;}	
	.wrap_tel_input{display:block;border-radius: 18px;}
	.wrap_tel_input:has(input[type='tel']:invalid){	background-color:var(--bg-invalid);}
	input[type='text']:invalid{	background-color:var(--bg-invalid);	}
	button{position: absolute;bottom: 50px;left: 0;font-weight: bold;background-color: #19d45c;color: white;height:var(--height-submit); width: -webkit-fill-available;font-size: large; padding: 1em; border: none;}
	button[disabled]{background-color:#c1c1c1;}		
	.required_radio label:not(:has(input:checked)) {background-color: var(--bg-invalid);}
	.required_radio:has(input:checked) label{background-color:unset;border-color:var(--radio-bg-color);}
	.required_radio label:has(input:checked){background-color: var(--radio-bg-color) !important; color: white !important;
	}
	.required_input:has(input:invalid) label{border-color:var(--border-color-invalid);background-color: var(--bg-invalid);}	
	
}
/* простое чекбокс меню */
#quick_filter{	
	@media screen and (min-width : 768px) {	font-size:unset;}
}
.but_select_loc{background-color: var(--bg-invalid);text-align: center;padding: 5px 10px;border-radius: 18px;align-self: stretch;}
.but_select_loc:has(span[data-adress]){background-color: var(--radio-bg-color);color:white;border-color:transparent;}

dialog{margin: auto; padding: 0; border: none;border-radius:3px;}
#map_modal{
	background-color: #ece7e4;color: #000;width: min(480px, 100%);
	.map_modal_capt{margin: 0.5em;}	
	.map_modal_title{padding-left: 0.5em; height: 1em; font-family: monospace; color: #bfbfbf;}	
	button{color:white;}
	geolocation, [geolocation]{background-color:#e9d300;border: none;color:black;}	
}
#map_modal::backdrop{background:rgba(0,0,0,0.5);}
#about_price{
	margin: auto;padding: 0;border: none;outline: none;transition: all .3s;transition-behavior: allow-discrete; border-radius: 10px 10px 0 0;
	opacity:0; transform: scale(0);
	figure{max-width: 258px;}	
	img{max-width: 256px;max-height: 256px;object-fit: contain;height: auto; border-radius: 10px 10px 0 0;border: 1px solid white;border-bottom: none;}
	figcaption{position:relative;max-width: 256px; text-align: justify; font-size: small; padding: 0;border-top: 1px solid #e1e1e1;}
	.price{
		font-size: medium;padding: 3px 5px;
		[data-nameprice]{text-align: left; font-weight: normal;}
		[data-price]{font-weight: bold;white-space:nowrap;}
	}
	[data-namemarket]{color: var(--plus-bg-color);  text-align: center;}
	.descript{padding: 0 1em 1em 1em;}
	.icons{position:absolute; left:-1px; bottom:-1px;font-family: emoji;min-width:1.3em;background-color:#ffffffad;font-size: x-large;backdrop-filter: blur(5px);padding:1px 3px;}
	.emo_img{height:256px;width:256px;font-size: 166px;text-align: center;line-height: 250px;border-radius: 10px 10px 0 0;}
	.link_but{border-radius:unset;}
}
#about_price::backdrop {  background-color: #00000026;}
#about_price:popover-open{	
	opacity:1;transform: scale(1);
	@starting-style {opacity: 0; transform: scale(0.5) translateY(10px);}
}
#map{width:100%; height:min(400px, 50vh);}
.loc{background-image:url(../img_system/location_black.svg);}
.loc_blue{background-image:url(../img_system/location_blue.svg);}
.current_location{background-image:url(../img_system/curr_location.svg);}
/***************************************************************/