:root {
	--map-height: 26vw;
	--map-prolog-margin-top: 50px;
	--map-prolog-margin-bottom: 20px;
	--map-header-margin: 20px;
	--map-text-size: 14px;

	--btn-wrapper-width: 300px;

	--pin-btn-height: 40px;
	--contact-wrap-width: 20%;
	--contact-wrap-width_: 285px;
	--main-wrap-width: 80%;
	--main-wrap-width_: calc(100% - var(--contact-wrap-width_));
	--list-item-padding: 15px;

	--shop-city-width: 90px;
	--shop-addr-width: 300px;
	--shop-list-bottom-padding: 80px;

	--shop-btn-size: 14px;
	--shop-phone-width: 100px;
}

ymaps { filter: grayscale(1); }

#mapContainer {
	height: var(--map-height);
	background-color: #eee;
}

.map-prolog { 
	padding-top: var(--map-prolog-margin-top);
	padding-bottom: var(--map-prolog-margin-bottom);
}

.map-epilog { 
	padding-top: var(--map-prolog-margin-bottom);
	padding-bottom: var(--map-prolog-margin-bottom);
}

.map-prolog h1 { 
	margin: 0px 0px var(--map-header-margin);
	font-weight: 600;
	text-transform: uppercase;
}

.map-prolog p,
.map-epilog p { font-size: var(--map-text-size); }

.shop-phone { text-decoration: underline; }

.shop-main-info .toMiddle, 
.shop-contacts .toMiddle { 
	/*height: var(--pin-btn-height); 
	line-height: var(--pin-btn-height);
	*/
}

.shop-contacts a.shop-phone {
    width: var(--shop-phone-width);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-search-container .btn-wrapper .send-submit { width: calc(100% - 20px);  }

.goto-to-pin,
.shop-call-back-btn {
    /*width: var(--pin-btn-height);*/
    cursor: pointer;
    text-align: center;
    font-size: var(--shop-btn-size);
}

.shop-contacts { width: var(--contact-wrap-width_); }

.shop-main-info { 
	width: var(--main-wrap-width_);

}

.header-line {
	padding-left: calc(var(--footer-btn-width) + var(--list-item-padding));
}

.shop-list-item:not(.header-line) {
    padding: var(--list-item-padding) 0px;
    border-bottom: 1px solid var(--site-color);
}

.shop-main-info *, .toTop {
    vertical-align: top;
}

.shop-city-name { width: var(--shop-city-width); }

.shop-addits { width: calc(100% - var(--shop-city-width) - var(--footer-btn-width) - var(--list-item-padding) - 7px); }

.shop-addits, .shop-city-name {
	/*height: 36px;*/
	line-height: 18px;
}

.shop-timetable.brick { 
	display: none;
	padding-left: calc(var(--shop-city-width) + 3px);
}

.shop-list { padding-bottom: var(--shop-list-bottom-padding); }

.goto-to-pin { margin-right: var(--list-item-padding); }

.shop-call-back-btn { margin-left: 15px; }


/**************************************/

.user-form__self {
    width: 100%;
    max-width: 300px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    padding-top: 20px;
    box-shadow: 0px 3px 5px 0px rgb(0 0 0 / 10%);
}

.user-form__container {
    z-index: 500;
}

.user-form__self input {
    display: block;
    margin-bottom: 20px;
    width: 100%;
}

.user-form__container .hideForm svg {
    height: 15px;
    width: 15px;
}

.user-form__self p { margin: -5px 0px 2px; }

.user-form__container .send-submit {
	width: 100%;
}

input.order-collect.error {
    border-color: #ebc9c3;
}

/**************************************/


@media (min-width: 980px) and (max-width: 1100px) {
	:root {
		--map-prolog-margin-top: 25px;
    	--map-prolog-margin-bottom: 10px;
    	--map-height: 30vw;
	}

	#map-search-run.send-submit { margin-top: 0; margin-left: 20px !important; }
}

@media (max-width: 979px) and (min-width: 760px) {
	:root {
		--map-prolog-margin-top: 25px;
    	--map-prolog-margin-bottom: 10px;
    	--map-height: 40vw;
	}

	#map-search-run.send-submit { margin-top: 0; margin-left: 20px !important; }

	.shop-contacts,
	.shop-contacts.text-right {
	    text-align: left;
	    direction: rtl;
	    width: 100%;
	    margin-top: 10px;
	}

	.shop-main-info { width: 100%; }
	.shop-call-back-btn { margin: 0; }
	.shop-phone { margin-left: 15px; }

	.shop-list-item.header-line { display: none; }
}

@media (max-width: 759px) {
	:root {
		--map-prolog-margin-top: 25px;
    	--map-prolog-margin-bottom: 10px;
    	--map-header-margin: 5px;
    	--map-height: 45vh;
    	--pin-btn-height: 15px;
	}

	.map-search-container.padding15 { padding: 15px 0px; }

	/*#map-search-run.send-submit { margin-top: 0; margin-left: 20px !important; }*/

	.map-search-container .btn-wrapper, 
	.map-search-container .input-wrapper { float: none !important; width: 100%; }

	#map-search-run.send-submit { 
		width: 100%;
		margin-top: 0; 
		margin-top: 10px;
	}

	.shop-contacts,
	.shop-contacts.text-right {
	    text-align: left;
	    /*direction: rtl;*/
	    width: 100%;
	    margin-top: 10px;
	}

	.shop-addits, .shop-addr {
		display: inline;
	}

	.shop-main-info { width: 100%; }
	.shop-call-back-btn { margin: 0; }
	.shop-phone { /*margin-left: 15px;*/ }

	.shop-main-info .shop-city-name,
	.shop-main-info .shop-addits { display: inline !important; }
	.shop-city-name:after { content: ","; }

	.shop-list-item.header-line { display: none; }

	.shop-main-info .toMiddle, .shop-contacts .toMiddle {
    	min-height: var(--pin-btn-height);
        height: auto;
	}

	.shop-contacts .goto-to-pin { margin-right: 0px; margin-top: 10px;}
	.shop-contacts a.shop-phone { width: 100%; }
}