@import url('../images/css2-4');

body.overflow-popup,
html.overflow-popup {
  overflow-x: hidden;
  position: fixed; 
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

body.overflow-popup {
  overflow-y: scroll;
}

html.overflow-popup .page-wrappers,
body.overflow-popup .page-wrappers {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.popup-sm {
  background: #FFFFFF;
  border-radius: 16px;
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 932px;
  overflow: hidden;
  padding: 24px;
  z-index: 99999999999;
  font-family: 'Open Sans';
}

.popup-sm--city {
  max-width: 560px;
  display: none;
}

.popup-sm--cities {
  min-height: 515px;
  padding-bottom: 47px;
  display: none;
}

.popup-sm__header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  color: #0B1F35;
}

.popup-sm__header--md {
  margin-bottom: 24px;
}

.popup-sm__title {
  font-family: 'Open Sans';
  font-size: 24px;
  line-height: 33px;
  font-weight: 700;
  margin: 0;
}

.popup-sm__close {
  position: absolute;
  right: 16px;
  top: 16px;
  height: 24px;
  width: 24px;
  background: no-repeat 0 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.35355 5.64645C6.15829 5.45118 5.84171 5.45118 5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355L11.2929 12L5.64645 17.6464C5.45118 17.8417 5.45118 18.1583 5.64645 18.3536C5.84171 18.5488 6.15829 18.5488 6.35355 18.3536L12 12.7071L17.6464 18.3536C17.8417 18.5488 18.1583 18.5488 18.3536 18.3536C18.5488 18.1583 18.5488 17.8417 18.3536 17.6464L12.7071 12L18.3536 6.35355C18.5488 6.15829 18.5488 5.84171 18.3536 5.64645C18.1583 5.45118 17.8417 5.45118 17.6464 5.64645L12 11.2929L6.35355 5.64645Z' fill='%23858F9A'/%3E%3C/svg%3E%0A");
  background-size: contain;
  padding: 0;
  border: none;
}

.popup-sm__content {
  max-width: 100%;
  position: relative;
}

.popup-sm__input {
  margin-bottom: 16px;
}

.popup-sm__input .input[type="text"] {
  background: var(--color-porcelain);
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 19px;
  font-weight: 300;
  color: var(--color-blue-zodiac);
  padding: 18px 18px 19px;
}

.popup-sm__input .input--city[type="text"] {
  width: 100%;
  padding-left: 56px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3L3 11.2566H12.375C12.4745 11.2566 12.5698 11.2961 12.6402 11.3664C12.7105 11.4367 12.75 11.5321 12.75 11.6316V21L21 3Z' stroke='%23858F9A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: 24px auto;
  background-repeat: no-repeat;
  background-position: 16px 50%;
}

.popup-sm__input .input--city[type="text"]::placeholder {
  color: var(--color-blue-zodiac);
  font-weight: 400;
}

.popup-sm__input .input--city[type="text"]:hover {
  background-color: #DDE1E3;
}

.popup-sm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
  color: var(--color-blue-zodiac);
}

.popup-sm__item {
  padding: 8px 16px;
  cursor: pointer;
}

.popup-sm__link {
  color: var(--color-blue-zodiac);
  text-decoration: none;
}

.popup-sm__link:hover {
  color: #C22B7F;
  text-decoration: none;
}

.popup-sm__wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  overflow: hidden;
}

.popup-sm__wrap.active {
  padding: 8px;
  box-shadow: 0px 10px 40px 0px #00000029;
}

.popup-sm__error {
  padding: 10px 12px;
  padding-left: 44px;
  position: relative;
  background: no-repeat 12px 50%;
  background-size: 24px auto;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4C7.58885 4 4 7.58885 4 12C4 16.4112 7.58885 20 12 20C16.4112 20 20 16.4112 20 12C20 7.58885 16.4112 4 12 4ZM12 16.3042C11.8479 16.3042 11.6991 16.2591 11.5726 16.1746C11.4461 16.0901 11.3475 15.9699 11.2893 15.8294C11.2311 15.6888 11.2159 15.5341 11.2456 15.3849C11.2752 15.2357 11.3485 15.0987 11.4561 14.9911C11.5637 14.8835 11.7007 14.8102 11.8499 14.7806C11.9991 14.7509 12.1538 14.7661 12.2944 14.8243C12.4349 14.8825 12.5551 14.9811 12.6396 15.1076C12.7241 15.2341 12.7692 15.3829 12.7692 15.535C12.7692 15.739 12.6882 15.9347 12.5439 16.0789C12.3997 16.2232 12.204 16.3042 12 16.3042ZM12.8354 8.56769L12.6146 13.26C12.6146 13.4232 12.5498 13.5797 12.4344 13.6951C12.319 13.8105 12.1624 13.8754 11.9992 13.8754C11.836 13.8754 11.6795 13.8105 11.5641 13.6951C11.4487 13.5797 11.3838 13.4232 11.3838 13.26L11.1631 8.57V8.56808C11.1582 8.45536 11.1763 8.34282 11.2161 8.23725C11.2559 8.13168 11.3166 8.03526 11.3947 7.95379C11.4727 7.87231 11.5664 7.80748 11.6702 7.76319C11.774 7.7189 11.8856 7.69606 11.9985 7.69606C12.1113 7.69606 12.2229 7.7189 12.3267 7.76319C12.4305 7.80748 12.5242 7.87231 12.6023 7.95379C12.6803 8.03526 12.7411 8.13168 12.7809 8.23725C12.8207 8.34282 12.8387 8.45536 12.8338 8.56808L12.8354 8.56769Z' fill='%23EE4236'/%3E%3C/svg%3E%0A");
  font-size: 14px;
  line-height: 19px;
  color: #0B1F35;
  font-weight: 400;
  font-family: 'Open Sans';
  display: none;
}

.ui-autocomplete {
  z-index: 9999;
}

.popup-sm__wrap .ui-autocomplete {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: #FFFFFF;
  border-radius: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-right: 12px;
}

@media (min-width: 992px) {
  .popup-sm__wrap .ui-autocomplete::-webkit-scrollbar {
    width: 4px;
    background: #F5F5F5;
    border-radius: 4px;
  }
  
  .popup-sm__wrap .ui-autocomplete::-webkit-scrollbar-thumb {
    background: #DDE1E3;
    border-radius: 4px;
  }
  
  .popup-sm__wrap .ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: #C22B7F; 
  }
}

.popup-sm__wrap .ui-menu-item {
  padding: 8px;
  font-family: 'Open Sans';
  font-size: 14px;
  line-height: 19px;
  cursor: pointer;
  margin: 0;
}

.popup-sm__wrap .ui-menu-item:hover {
  color: #C22B7F;
}

.popup-sm__wrap .ui-menu-item strong {
  font-weight: 700;
}

.popup-sm--city .popup-sm__title:not(:last-child),
.popup-sm--cities .popup-sm__title:not(:last-child) {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .popup-sm {
    padding: 16px 12px 14px;
    top: 50%;
    left: 12px;
    border-radius: 16px;
    transform: translateY(-50%);
    width: calc(100% - 24px);
  }

  .popup-sm--city .popup-sm__title:not(:last-child) {
    margin-bottom: 0;
  }

  .popup-sm__header {
    margin-bottom: 25px;
  }

  .popup-sm--city .popup-sm__title,
  .popup-sm--cities .popup-sm__title {
    font-size: 16px;
    line-height: 22px;
  }

  .popup-sm__button-row:not(:last-child) {
    margin-bottom: 12px;
  }

  .popup-sm--city {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-top: 16px;
  }

  .popup-sm--cities {
    min-height: 510px;
  }
}

@media (max-height: 639px) {
  .popup-sm--cities {
    min-height: unset;
    top: 0;
    bottom: 0;
    transform: none;
  }

  .popup-sm__body {
    display: flex;
    flex-direction: column;
    height: calc(100% - 47px);
  }

  .popup-sm__input {
    flex-shrink: 0;
  }

  .popup-sm__content {
    height: calc(100% - 72px);
  }

  .popup-sm__list {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
  }
}

.overlay-block-locality {
  opacity: 0;
  z-index: -1;
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transition: all 0.2s ease-in-out;
  background-color: rgba(51, 51, 51, 0.4);
}

.overlay-block-locality.active {
  opacity: 1;
  z-index: 9999999999;
  box-shadow: -6px -5px 15px rgba(0, 0, 0, 0.2);
}