/*
	Multycity Frontend Styles
	====================
*/

/* Body states */
body.hiddenbody{overflow:hidden!important;}
/* Отключаем blur из темы */
body.blur .page-frame,
body.compensate-for-scrollbar .page-frame {
    -webkit-filter: none !important;
    filter: none !important;
}

/*
	Список мультигородов
	====================
*/
.city {position:relative;}

#popup-location-confirm{position:absolute;top:3rem;left:0;box-shadow: 0 10px 60px 0px rgba(0,0,0,0.25);visibility:hidden;opacity:0;border-radius: 5px;z-index:999999;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; min-width: max-content;}
#popup-location-confirm.show{opacity:1;visibility:visible}
#popup-location-confirm .item{position:relative;background:#fff;padding:1.5rem;border-radius:5px;-webkit-filter:none!important;filter:none!important;}
#popup-location-confirm .item::before{content:"";position:absolute;background:#fff;width:1rem;height:1rem;transform:rotate(45deg);top:-.5rem}
#popup-location-confirm .link{cursor: pointer;color: #666; border-bottom: 1px dashed;}
#popup-location-confirm .confirm {margin-right: 1rem;color: var(--color, #007bff);font-weight: bold;}
#popup-location-confirm .header{font-size:1rem;margin-bottom: 0.5rem;color: var(--dark, #212529);}

#popup-location{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);visibility:hidden;opacity:0;z-index:999998;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .3s .1s ease-in-out;-o-transition:all .3s .1s ease-in-out;transition:all .3s .1s ease-in-out;-webkit-filter:none!important;filter:none!important;}
#popup-location.show{opacity:1;visibility:visible}

#popup-location .location-field{position:absolute;top:0;bottom:0;overflow-x:hidden;overflow-y:scroll;max-width:1200px;width:70%;min-width:320px;background:#fff;padding:1.5rem 4rem 1.5rem 3rem;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;-o-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out;right:0;-webkit-filter:none!important;filter:none!important;}
.dark_theme #popup-location .location-field{background:var(--dark, #212529);}
#popup-location .location-field.active{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

#popup-location .citys{-webkit-column-count:3;column-count:3}
#popup-location .citys ul{list-style:none;margin:0;padding:0}
#popup-location .citys ul li{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;margin:3px 0}
#popup-location .citys .letter{font-weight:700;font-size:1.5rem;margin:.5rem 0}
#popup-location .citys .city{display:inline-block;font-size:.9rem;cursor:pointer}
#popup-location .citys a{color:var(--dark, #212529);text-decoration:none;border-bottom:1px solid transparent;transition:all .2s ease}
#popup-location .citys a:hover{color:var(--color, #007bff);border-bottom-color:var(--color, #007bff)}

#popup-location .header{font-size:2rem;font-weight:700}

#popup-location .close_link{position:absolute;right:3rem;top:2rem;cursor:pointer;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;line-height:0}
#popup-location .close_link svg{width:2rem;height:2rem;padding:5px}
#popup-location .close_link:hover svg{fill:var(--color, #007bff)}
.dark_theme #popup-location .close_link svg{fill: #fff;}

#popup-location .maincitys{border-bottom:1px solid var(--color, #007bff);margin-bottom:2rem;margin-top:1rem;padding-bottom:1rem}
#popup-location .maincitys .city{display:inline-block;margin:.5rem 2rem;margin-left:0;font-weight:700;font-size:1rem;border-bottom-width:2px;color:var(--dark, #212529);text-decoration:none;transition:all .2s ease}
#popup-location .maincitys .city:hover{color:var(--color, #007bff)}

.city_span{color:var(--color, #007bff);font-weight:700;border-bottom:1px dashed;cursor:pointer}
.city_span:hover{border-bottom-color:transparent}

@media (max-width: 767px) {
#popup-location .location-field {width: 90%;}
}

@media (max-width: 499px) {
#popup-location .header {font-size: 1.5rem;}
#popup-location .close_link {right: 2rem;top: 1.5rem;}
#popup-location .location-field {padding: 1.5rem 2rem 1.5rem 2rem;}
#popup-location .citys {column-count: 2;}
}