.wrapGeoIpReaspekt{
	font-family: 'Artegra Sans', Arial, sans-serif;
}
.reaspektGeobaseWrapperPopup {
    padding: 32px;
    font-family: 'Artegra Sans', Arial, sans-serif;
    color: #1A1A1A;
    background: #fff;
}
.reaspektGeobaseTitleFind {
    font-size: 28px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 24px;
    text-align: center;
}
.reaspektGeobaseCurrentCity {
    color: #666;
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 400;
    text-align: center;
}
.reaspektGeobaseCurrentCity span {
    font-weight: 600;
    color: #906E50;
}
.reaspektGeobaseSearchWrap {
    position: relative;
    margin-bottom: 32px;
}
.reaspektGeobaseSearchWrap input[type="text"] {
    width: 100%;
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    padding: 16px 48px 16px 18px;
    color: #1A1A1A;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease;
}
.reaspektGeobaseSearchWrap input[type="text"]:focus {
    border-color: #906E50;
}
.reaspektGeobaseSearchWrap input[type="text"]::placeholder {
    color: #999;
}
.reaspektGeobaseSearchWrap span {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.reaspektGeobaseCitiesCol div,
.reaspektSearchCity a {
    margin-bottom: 12px;
    font-size: 15px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    color: #666;
    border-radius: 6px;
    padding: 8px 0;
    display: block;
}
.reaspektGeobaseCitiesCol div.active {
    color: #906E50;
    font-weight: 600;
    cursor: default;
}
.reaspektGeobaseCitiesCol div:hover:not(.active),
.reaspektSearchCity a:hover {
    color: #906E50;
}
#ReaspektPopupBody{
    border: 1px solid #E5E5E5;
    background: #fff;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.1);
    font-family: 'Artegra Sans', Arial, sans-serif;
    font-size: 14px;
    padding: 0;
    max-width: 800px;
    width: 90%;
}
#ReaspektPopupBody .popup-window-close-icon {
    width: 32px;
    height: 32px;
    top: 20px !important;
    right: 20px !important;
    background: transparent !important;
    border-radius: 50%;
    transition: background 0.2s;
}
#ReaspektPopupBody .popup-window-close-icon:hover {
    background: #F5F5F5 !important;
}
#ReaspektPopupBody .popup-window-close-icon:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 20px;
    height: 21px;
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M2.99875 3.49973C3.30438 3.1941 3.7999 3.1941 4.10553 3.49973L9.99984 9.39297L15.8918 3.49951C16.1974 3.19388 16.6929 3.19388 16.9985 3.49951C17.3042 3.80514 17.3042 4.30066 16.9985 4.60629L11.1066 10.4998L16.9985 16.3927C17.3042 16.6984 17.3042 17.1939 16.9985 17.4995C16.6929 17.8051 16.1974 17.8051 15.8918 17.4995L9.99984 11.6065L4.10531 17.4995C3.79968 17.8051 3.30416 17.8051 2.99854 17.4995C2.69291 17.1939 2.69291 16.6984 2.99854 16.3927L8.89307 10.4998L2.99875 4.6065C2.69312 4.30088 2.69312 3.80536 2.99875 3.49973Z' fill='%23999'/></svg>");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.reaspektGeobaseTitle {
    color: #363636;
    font-family: 'Artegra Sans', Arial, sans-serif;
    font-size: 14px;
    text-shadow: 0 0 0.1px #878787;
    line-height: 100%;
    margin-bottom: 18px;
    text-transform: none;
}
.reaspekt_row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.reaspektGeobaseCities .reaspektGeobaseAct {
    min-width: min-content;
    box-sizing: border-box;
    position: relative;
    min-height: 1px;
    margin-right: 8px;
	margin-bottom: 20px;
}
.reaspektGeobaseCities .reaspektGeobaseAct a,
.reaspektGeobaseCities .reaspektGeobaseAct strong {
	font-size: 13px;
    line-height: 18px;
	color: #363636;
    white-space: nowrap;
    text-decoration: none;
    border: none;
    transition: all .2s ease;
    border-radius: 4px;
    background: #efefef;
    padding: 6px 10px 7px;
}
.reaspektGeobaseCities .reaspektGeobaseAct strong {
    cursor: default;
    color: #000000;
    background: #dbdbdb;
    font-weight: normal;
    text-shadow: 0 0 0.1px #545454;
}
.reaspektGeobaseCities .reaspektGeobaseAct a:hover {
    color: #000000;
    text-decoration: none;
    background: #dbdbdb;
}

/* .reaspektGeobaseTitleFind {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin-bottom: 25px;
} */

#reaspektGeobaseFind {
    position: relative;
}

.wrapGeoIpReaspekt {
	position: relative;
	display: inline-block;
}

.wrapGeoIpReaspekt .linkReaspekt{
    font-weight: 400;
    font-size: 16px;
    color:#fff;
    text-decoration:none;
	cursor: pointer;
	line-height: 100%;
	display: inline-block;
}

#wrapQuestionReaspekt{
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 5;
    min-width: 280px;
    max-width: 320px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E5E5E5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    margin-top: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: 'Artegra Sans', Arial, sans-serif;
}
#wrapQuestionReaspekt:before{
	position: absolute;
	top: -8px;
	left: 20px;
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #E5E5E5;
	z-index: 1;
}
#wrapQuestionReaspekt:after{
	position: absolute;
	top: -7px;
	left: 20px;
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #fff;
	z-index: 2;
}
.questionYourCityReaspekt{
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    line-height: 1.4;
}
.questionCityReaspekt{
    color: #906E50;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    display: inline;
}
.questionButtonReaspekt {
    border: none;
    border-radius: 0;
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
}
.questionNoReaspekt, .questionYesReaspekt {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 12px;
    border: 1px solid #E5E5E5;
    transition: all 0.2s ease;
    margin: 0;
    text-align: center;
    cursor: pointer;
    background: #fff;
    text-transform: none;
}
.questionYesReaspekt {
    background: #906E50;
    color: #fff;
    border-color: #906E50;
}
.questionNoReaspekt {
    background: #fff;
    color: #1A1A1A;
    border-color: #E5E5E5;
}
.questionYesReaspekt:hover, .questionYesReaspekt:focus {
    background: #A07A5A;
    border-color: #A07A5A;
    color: #fff;
}
.questionNoReaspekt:hover, .questionNoReaspekt:focus {
    background: #F5F5F5;
    color: #1A1A1A;
    border-color: #D0D0D0;
}
.questionYesReaspekt:active, .questionNoReaspekt:active {
    transform: translateY(1px);
}
.wrapGeoIpReaspekt{
	font-family: 'Artegra Sans', Arial, sans-serif;
}
.reaspekt_geobase_title {
    color: #363636;
    font-family: 'Artegra Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.reaspekt_geobase_cities .reaspekt_geobase_act{
	margin-bottom: 15px;
	line-height: 100%;
}
.reaspekt_geobase_cities .reaspekt_geobase_act a,
.reaspekt_geobase_cities .reaspekt_geobase_act strong{
	font-size: 14px;
    line-height: 100%;
	color: #363636;
    white-space: nowrap;
}
.reaspekt_geobase_cities .reaspekt_geobase_act a:after {
    background: #407da6 none repeat scroll 0 0;
}
.reaspekt_geobase_find {
    margin: 0 0 25px 0;
    position: relative;
}

#reaspektGeobaseSearch {
    width: 100%;
    padding: 16px 48px 16px 18px;
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    color: #1A1A1A;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    height: auto;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 1;
    line-height: 1.4;
}

#reaspektGeobaseSearch:focus {
    border-color: #906E50;
}

#reaspektGeobaseSearch::placeholder {
    color: #999;
}

#reaspektResultCityAjax {
    color: #666;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    margin-top: 8px;
    position: absolute;
    width: 100%;
    left: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

#reaspektResultCityAjax .reaspektSearchCity a {
    color: #666;
    text-decoration: none;
    padding: 12px 16px;
    display: block;
    border-radius: 8px;
    margin: 4px 8px;
    transition: all 0.2s ease;
}
#reaspektResultCityAjax .reaspektSearchCity a:hover {
    color: #906E50;
    background: #F8F8F8;
}

#reaspektResultCityAjax .reaspektNotFound {
    color: #999;
    padding: 12px 16px;
    font-style: italic;
}

#reaspektResultCityAjax::-webkit-scrollbar {
    width: 4px;
}

#reaspektResultCityAjax::-webkit-scrollbar-track {
    background: #F8F8F8;
    border-radius: 2px;
}

#reaspektResultCityAjax::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 2px;
}

#reaspektResultCityAjax::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

/* Preloader styles */
.preloaderReaspekt {
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
}
.preloaderReaspekt.active {
    width: 40px;
    height: 40px;
    opacity: 1;
    visibility: visible;
}
.preloaderReaspekt div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 31px;
    height: 31px;
    margin: 4px;
    border: 4px solid #906E50;
    border-radius: 50%;
    animation: preloaderReaspekt 1.2s cubic-bezier(0.3, 0, 0.3, 1) infinite;
    border-color: #906E50 transparent transparent transparent;
}
.preloaderReaspekt div:nth-child(1) {
    animation-delay: -0.45s;
}
.preloaderReaspekt div:nth-child(2) {
    animation-delay: -0.3s;
}
.preloaderReaspekt div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes preloaderReaspekt {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Стили для списка городов с использованием grid */
.reaspektGeobaseCitiesList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 32px;
    width: 100%;
    max-height: 178px;
    overflow-y: auto;
    padding-right: 5px; /* Отступ для скролла */
}

/* Кастомный скролл для списка городов */
.reaspektGeobaseCitiesList::-webkit-scrollbar {
    width: 3px;
}

.reaspektGeobaseCitiesList::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 1.5px;
}

.reaspektGeobaseCitiesList::-webkit-scrollbar-thumb {
    background: #3A3C47;
    border-radius: 1.5px;
}

.reaspektGeobaseCitiesList::-webkit-scrollbar-thumb:hover {
    background: #4a4c57;
}

/* Для Firefox */
.reaspektGeobaseCitiesList {
    scrollbar-width: thin;
    scrollbar-color: #3A3C47 transparent;
}

/* Единые стили для всех элементов в списке городов */
.reaspektGeobaseCitiesCol div,
.reaspektSearchCity,
.reaspektSearchCity a {
    margin-bottom: 12px;
    font-size: 15px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    color: #666;
    border-radius: 6px;
    padding: 8px 0;
}

.reaspektGeobaseCitiesCol div.active,
.reaspektSearchCity.active,
.reaspektSearchCity a.active {
    color: #906E50;
    font-weight: 600;
    cursor: default;
}

.reaspektGeobaseCitiesCol div:hover:not(.active),
.reaspektSearchCity:hover:not(.active),
.reaspektSearchCity a:hover {
    color: #906E50;
}

/* Медиа-запросы для адаптивности */
@media (max-width: 900px) {
    .reaspektGeobaseCitiesList {
        gap: 0 12px;
    }
}

@media (max-width: 768px) {
    #ReaspektPopupBody {
        max-width: 90%;
        padding: 20px;
        padding-bottom: 20px;
        max-height: 80vh; /* Ограничиваем высоту в процентах от высоты окна */
    }
    
    #ReaspektPopupBody .popup-window-close-icon {
        top: 15px !important;
        right: 15px !important;
    }
    
    .reaspektGeobaseTitleFind {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .reaspektGeobaseCurrentCity {
        font-size: 14px;
        margin-bottom: 15px;
    }
}

@media (max-width: 600px) {
    .reaspektGeobaseCitiesList {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 450px) {
    #ReaspektPopupBody {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        padding: 15px;
        padding-bottom: 15px;
        border-radius: 0;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        max-height: 100vh;
    }
    
    .popup-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .popup-window-overlay {
        position: fixed !important;
    }
    
    #ReaspektPopupBody .popup-window-close-icon {
        width: 28px;
        height: 28px;
        top: 15px !important;
        right: 15px !important;
        z-index: 9999;
    }
    
    .reaspektGeobaseTitleFind {
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    
    .reaspektGeobaseSearchWrap {
        margin-bottom: 20px;
    }
    
    .reaspektGeobaseSearchWrap input[type="text"] {
        padding: 12px 40px 12px 15px;
        font-size: 14px;
    }
    
    .reaspektGeobaseCitiesList {
        grid-template-columns: 1fr;
        max-height: calc(100vh - 280px);
    }
}

@media (max-width: 450px) {
    #ReaspektPopupBody {
        max-width: 100%;
        padding: 15px;
        padding-bottom: 15px;
        border-radius: 10px;
    }
    
    #ReaspektPopupBody .popup-window-close-icon {
        width: 28px;
        height: 28px;
        top: 25px !important;
        right: 15px !important;
    }
    
    .reaspektGeobaseTitleFind {
        font-size: 20x;
        margin-bottom: 25px;
    }
    .reaspektGeobaseCurrentCity {
        font-size: 16px;
        margin-bottom: 20px;
    }
    
    .reaspektGeobaseWrapperPopup {
        padding: 0;
    }
    
    .reaspektGeobaseSearchWrap {
        margin-bottom: 40px;    
    }
    .reaspektGeobaseCitiesCol div  {
        margin-bottom: 25px;
    }
    .reaspektGeobaseSearchWrap input[type="text"] {
        padding: 12px 40px 12px 15px;
        font-size: 14px;
    }
    
}

/* Прелоадер */
.preloaderReaspekt {
    display: none;
}

.preloaderReaspekt.active {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}