@charset "UTF-8"; 
@import url(var.css);
@import url('lang.css');
:root{
	--cnt-img-visible: 3;
}
*{margin: 0; box-sizing: border-box;}
a{text-decoration:none; color:inherit; 	-webkit-tap-highlight-color: transparent;}
a:visited{color:inherit;}
body{font-family: -apple-system, system-ui, sans-serif; min-height: 100vh;}
header{
	background: #eaebef; user-select: none;	padding: 0.5em;	
	.header_top{display: flex; flex-direction:row ;justify-content: space-between; align-items: center; }	
	h1,h2{	font-size:1.3em; text-align:center;	}	
}
.weather{font-family:-apple-system, system-ui, sans-serif; width: fit-content; font-size:1.3em; color:#0054ea;font-weight:bold;}
#box_data{	
	display:flex;
	flex-direction:column;
	align-items:center;
	min-height: calc(100vh - 2em - 196px);
	max-width:768px;
	margin: 0 auto;
	gap:0.5em;
}
.size_content{
	max-width:768px; margin: 0 auto;
}
details{
	transition:all .2s;
}
/*block hello message background*/
.hello{		
	background-repeat: no-repeat;background-position:center;background-size: cover;
    width: 100%;min-height:45vh;
	color: #ffffff;user-select:none;
	h2{	font-size: 1.2rem;margin-bottom: 0.5em;}
	div{font-size:min(5vw, 1rem);background-color: #00000091; padding: 1em 0.5em;width: min(100%, 600px);}
}
/* меню категорий главной страницы ------------------------------------------ */
.menu_category{
	position: sticky; z-index: 10; top:0; width: 100%;max-width: 100%;overflow-y: auto;scrollbar-width: none;	
	background-color: #545454;	color:white;
	ol{display: flex; gap: 0.5em; list-style-type: none; padding: 6px 5px;}
	li{ 
		/*font-family: system-ui;font-size: small; text-transform: uppercase; */
		white-space: nowrap; border-radius: 5px; padding: 2px 10px;
	}	
	input[type='radio']{display: none;}
	@media screen and (max-width : 768px) {		
		.menu_category{	padding: 0.5em;	}	
	}
}	
.menu_category li:has(input:checked){		
	color: #000000;
    background-color: #ffffff;
}
.menu_category li:hover{cursor:pointer; background-color:#777777;}
.rmarker::after{
	content:'\276F';/*\276F ❯ 27EB 226B ≫   \203A ›*/
	color:#fff;	position:absolute;	top:7px;right:3px;	font-size:x-large;
}
/* меню со типа радио ------------------------------------------ */
.menu_radio{
	width: fit-content;
	ol{display: flex; gap: 1em; list-style-type: none;padding: 1em;}
	li{ 
		color: #0000cd;
		border-bottom: 2px solid transparent;
	}
	input{
		display: none;
	}	
}	
.menu_radio li:has(input:checked){	border-bottom-color: #0000cd;}
.menu_radio li:hover{cursor:pointer; border-bottom-color: #c7c7c7;}
/* ------------------------------------------------------------ */


.link_grey{font-size: small;  color: grey; text-decoration: none;}
.link_grey:hover{text-decoration: underline;}


.fon_modal_transparent{display: none;position: absolute;top: 0px;left: 0px;flex-direction: column;justify-content: center;align-content: center;height: 97vh;width: 100vw;margin: 0 auto;z-index: 20;}
.fon_modal_dark{display: none; backdrop-filter: blur(1px); background-color: #0000002e;position: fixed;top: 0px;left: 0px;flex-direction: column;justify-content: center;align-content: center;height: 100vh;width: 100vw;margin: 0 auto;z-index: 20;}

/* кнопка  =============================*/
.but_black{
	display: flex;gap: 0.5em;margin:0 auto;
	background: linear-gradient(359deg, #4592cd, #4baaf2); font-size:1.2em; padding: 0.5rem 1rem;color: #fff;border: none;border-radius: 25px;outline: none;
}
.but_blue{
	display: inline-block;
	background-color:#939393;
	outline: none;
    border: 1px solid transparent;    
    font-size: large;
    padding: 0.5em 1em;
    border-radius: 4px;
	color:#fff;
}
.but_blue:hover{
	background-color:var(--bgcolorbut_hover);
}	
/* кнопка в ввиде иконки =============================*/
.wrap_but_icon{
	display: flex; align-items: center;
	text-decoration: none;
	.but_icon_capt{
		font-size: small;  color: grey; text-decoration: none;
		margin-left: 3px;
	}
}
/* иконки (анимированные круглые квадратные)*/
.icon{
	display:inline-block;box-sizing: content-box;background-size: contain;background-repeat: no-repeat;background-position: center;	border: 1px solid transparent;transition: all .2s;border-radius: 6px;}
.icon.circle{border-radius: 50%;}
.icon.func:hover{cursor:pointer;transform:scale(1.1);
}	
/*----------------------------------*/
.but_icon{display:inline-block;box-sizing: content-box;width: 1.5em;  height: 1.5em;padding: 2px;background-size: contain;background-repeat: no-repeat;background-position: center;border: 1px solid transparent;}
.but_icon:hover{border-color: #d3d3d3;background-color: #dddddd9c;}

.home{background-image:url(../img_system/home_black.svg); }
.home_w{background-image:url(../img_system/home_white.svg); }
.account{	background-image:url(../img_system/account_black.svg); }
.close_red{background-image:url(../img_system/close_thin_red.svg);}
.menu_mob{background-image:url(../img_system/menu_black.svg);}
.loc{background-image:url(../img_system/location_black.svg);}
.loc_blue{background-image:url(../img_system/location_blue.svg);}
.zalo{background-image:url(../img_system/zalo_orig.svg);}
.tg_bg{background-image:url(../img_system/tg_orig.svg);}
.wa_bg{background-image:url(../img_system/whatsapp_white.svg); background-color:#30d24e;}
.wa{background-image:url(../img_system/whatsapp_orig.svg);}
.email_bg{background-image:url(../img_system/email_bg.svg); background-color:#bd6900;}
.phone{background-image:url(../img_system/phone_black.svg);}
.website{background-image:url(../img_system/website2.svg);}
.email{background-image:url(../img_system/email_bg.svg);}
.inst_black{background-image:url(../img_system/instagram_black.svg);}
.inst_color{background-image:url(../img_system/instagram_color.svg);}
.share_black{background-image:url(../img_system/share_black.svg);}
.gm_link{background-image:url(../img_system/gm_link.svg);}
.gm_location{background-image:url(../img_system/gm_location.svg);}
.tg_group{background-image:url(../img_system/tg_group_black.svg);}
.tg_group_color{background-image:url(../img_system/tg_group_color.svg);}
.facebook{background-image:url(../img_system/facebook.svg);}
.discount{background-image:url(../img_system/discount-icon.svg);}
.webcam{background-image:url(../img_system/webcam2.svg);}
#map{
	width:100%; height:min(600px, 80vh);
}
#map_modal{
	background-color: #474747d9;
    color: #fff;
	margin: auto; max-width: 600px;
    width: -webkit-fill-available;    
    padding: 0;
    border: 1px solid #474747;
	.map_modal_capt{
		font-size: large;	margin: 0.5em;
	}
	.box_map{
		width:100%;	padding-left: 1px;	
	}
	.map_modal_title{
		padding-left: 0.5em; height: 1em; font-family: monospace; color: #bfbfbf;
	}	
}
#map_modal::backdrop{
	background:rgba(0,0,0,0.5);
}	


.footer_main{
	align-items: center; justify-content: space-around;
	margin-top: 2em;
	height: 6em;
    color: #aaaaaa;
    background-color: #3b3b3b;   
}
/* диалоговый контейнер */
#webcam_window{
	width: -webkit-fill-available;  margin: auto 0.5em;  border: none;   background: #000000; max-width: 768px;padding:0 5px;}	
#modal_image{
	margin: auto; border: none;background: #fff; border-radius: 12px;
	padding: 38px 5px 20px 5px;
	/*border: 2px solid black;*/
	box-shadow: 3px 3px 16px 3px #515151;
	max-width: calc(100% - 1em);
}
#show_more{	text-align: center; margin: 2em 0;cursor:pointer;}
#modal_map{
	max-width: 768px; width: 100%; margin: auto;background-color: #2e2e2efa;padding: 0 1px;border: none;
	h4{color:white;font-weight:unset; text-align: center;}	
}	
#modal_map::backdrop{
    background-color: #0000006b;
}
/* обертка слайдера */
.modal_img_slider{
	display: flex; overflow-y: auto; gap: 3px; align-items: center;
	width:480px; 
	height: fit-content;
	max-height: 80vh;
	img{
		object-fit: contain;
		min-width: 100%;       
		height: auto;
	}
}
/* маркер на карту */
.marker_for_map{
	font-family: system-ui;
	background-color: #ffec7b;
	padding: 0 4px;color: #000000;border-radius: 5px;border: 1px solid #cecece;transform: translateY(10px);margin-top: 10px;
}
.marker_for_map::before{content:'\1F4CD';font-size: 24px;position: absolute;left: calc(40% - 10px);top: -25px;}
/* ********************************************************* */
.fx_row{display:flex;}
.fx_row_wrap{display:flex;flex-wrap: wrap;}
.fx_col{display:flex; flex-direction:column;}
.fx_c{align-items: center;}
.sb{justify-content: space-between;}
.sa{justify-content: space-around;}
.jc-end{justify-content: end;}
.fx_left{justify-content: flex-start;}
.fx_space{justify-content: space-evenly;}
.fx_end_space{justify-content: end;}
.fx_center{justify-content: center;}
.maxw{ width: -webkit-fill-available;}
.br_50{border-radius:50%;}
.br0{border-radius:unset;}
/* gap */
.g1{gap:1em;}
.g05{gap:0.5em;}
/* margin */
.m05{margin:0.5em;}.m5px{margin:5px;}.m1{margin:1em;}.mt1{margin-top:1em;}.mt2{margin-top:2em;}.mb1{margin-bottom:1em;}
/* padding */
.p0{padding-left:0;}.pl1{padding-left:1em;}.p05{padding:0.5em;}.s1{height:1em; width:1em}.s15{height:1.5em; width:1.5em}.s2{height:2em; width:2em}.s25{height:2.5em; width:2.5em}.s3{height:3em; width:3em}.center{text-align:center;}
/* ========================================================================================= 
MEDIA MEDIA MEDIA MEDIA MEDIA MEDIA MEDIA MEDIA MEDIA
===========================================================================================*/

@media screen and (max-width : 1280px) {		
	
}
@media screen and (max-width : 1024px) {		
	
}
/*если вход с мобильного*/
@media screen and (max-width : 768px) {	
	header{
		/*h1, h2{font-size:1.2em;}*/
	}		
	.but_icon_capt{
		display:none;
	}
	.modal_img_slider{
		display: flex; overflow-y: auto; gap: 3px; align-items: center;
		width:360px; 
		img{
			object-fit: cover;
		}
	}
	.fx_end_space{justify-content: space-evenly;}
	#map_modal{	margin: auto 5px; }	
	
}