.city-button,
.city-mobile-button {
  display: flex;
  align-items: center;
  gap: 4px;

  height: 24px;

  border: none;

  font-family: Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #413d58;

  background-color: transparent;

  cursor: pointer;
}

.city-button {
  min-width: 112px;
}

.city-button::before,
.city-mobile-button::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3748_41' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Cpath d='M8.00008 14.6667L7.55814 15.1086C7.80222 15.3527 8.19795 15.3527 8.44202 15.1086L8.00008 14.6667ZM2.66675 6.6667H2.04175V6.6667H2.66675ZM4.22885 2.89544L4.67079 3.33738C6.50951 1.49866 9.49066 1.49866 11.3294 3.33738L11.7713 2.89544L12.2133 2.4535C9.88639 0.126624 6.11378 0.126626 3.7869 2.4535L4.22885 2.89544ZM2.66675 6.6667H3.29175C3.29175 5.49289 3.77884 4.22933 4.67079 3.33738L4.22885 2.89544L3.7869 2.4535C2.6519 3.5885 2.04175 5.17378 2.04175 6.6667H2.66675ZM11.7713 2.89544L11.3294 3.33738C12.2213 4.22933 12.7084 5.49289 12.7084 6.66669H13.3334H13.9584C13.9584 5.17378 13.3483 3.5885 12.2133 2.4535L11.7713 2.89544ZM13.3334 6.66669H12.7084C12.7084 8.12132 11.98 9.48231 10.9317 10.7726C9.87505 12.073 8.59941 13.1835 7.55814 14.2247L8.00008 14.6667L8.44202 15.1086C9.40075 14.1499 10.7918 12.927 11.9018 11.5608C13.0202 10.1844 13.9584 8.54537 13.9584 6.66669H13.3334ZM8.00008 14.6667L8.44202 14.2247C7.40075 13.1835 6.12511 12.073 5.06849 10.7726C4.02016 9.48232 3.29175 8.12133 3.29175 6.6667H2.66675H2.04175C2.04175 8.54538 2.98 10.1844 4.09834 11.5608C5.20839 12.927 6.59941 14.1499 7.55814 15.1086L8.00008 14.6667ZM10.0001 6.66668H9.37508C9.37508 7.42607 8.75947 8.04168 8.00008 8.04168V8.66668V9.29168C9.44983 9.29168 10.6251 8.11643 10.6251 6.66668H10.0001ZM8.00008 8.66668V8.04168C7.24069 8.04168 6.62508 7.42607 6.62508 6.66668H6.00008H5.37508C5.37508 8.11643 6.55033 9.29168 8.00008 9.29168V8.66668ZM6.00008 6.66668H6.62508C6.62508 5.90729 7.24069 5.29168 8.00008 5.29168V4.66668V4.04168C6.55033 4.04168 5.37508 5.21693 5.37508 6.66668H6.00008ZM8.00008 4.66668V5.29168C8.75947 5.29168 9.37508 5.90729 9.37508 6.66668H10.0001H10.6251C10.6251 5.21693 9.44983 4.04168 8.00008 4.04168V4.66668Z' fill='black' style='fill:black;fill-opacity:1;'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3748_41)'%3E%3Crect width='16' height='16' fill='%23091620' fill-opacity='0.8' style='fill:%23091620;fill:color(display-p3 0.0353 0.0863 0.1255);fill-opacity:0.8;'/%3E%3C/g%3E%3C/svg%3E");
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
}

.city-button::after,
.city-mobile-button::after {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 -9.53674e-07L4.9592 4.9592L9.9184 -9.53674e-07H0Z' fill='%23413D58' style='fill:%23413D58;fill:color(display-p3 0.2549 0.2392 0.3451);fill-opacity:1;'/%3E%3C/svg%3E");
  margin-bottom: 5px;
}

.city-popover {
  border: none;
  border-radius: 8px;

  padding: 0;
}

[popover]:popover-open {
  opacity: 1;
  transform: translate(0, 0);
}

[popover] {
  opacity: 0;
  transform: translate(0, -32px);

  transition: opacity 0.4s, transform 0.4s, display 0.4s allow-discrete,
    overlay 0.4s allow-discrete;
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translate(0, -32px);
  }
}

.city-change-popover::backdrop {
  background-color: #35516b2e;
}

[popover].city-change-popover::backdrop {
  background-color: transparent;
  transition: display 0.4s allow-discrete, overlay 0.4s allow-discrete,
    background-color 0.4s;
}

[popover].city-change-popover:popover-open::backdrop {
  background-color: #35516b2e;
}

@starting-style {
  [popover].city-change-popover:popover-open::backdrop {
    background-color: transparent;
  }
}

.city-popover__content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  padding: 24px;

  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #333f48;
}

.city-popover__header {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.city-popover__button {
  flex: 1;
  min-height: 40px;
  padding: 11.5px 6px;

  border: 1px solid #333f48bf;
  border-radius: 4px;

  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: #333f48bf;

  cursor: pointer;

  background-color: transparent;
}

.city-popover__button_red {
  border: none;
  color: #fafaff;
  background-color: #fa5f55;
}

.city-confirm-popover {
  width: 328px;

  margin: 48px auto;

  box-shadow: 0px 5px 10px 0px #0c18221f, 0px 19px 19px 0px #0c18221c,
    0px 42px 25px 0px #0c18220f, 0px 75px 30px 0px #0c182205,
    0px 117px 33px 0px #0c182200;
}

@media (min-width: 1024px) {
  .city-confirm-popover {
    width: 340px;

    margin: 0;
    inset: auto;
    top: calc(anchor(top) + 32px);
    right: 104px;
    justify-self: anchor-center;
  }
}

.city-confirm-popover__action-block {
  display: flex;
  gap: 8px;
}

.city-change-popover {
  width: 340px;
  margin: auto;
  min-height: 400px;
  box-shadow: 0px 4px 8px 0px #99a3ad1a, 0px 15px 15px 0px #99a3ad17,
    0px 34px 21px 0px #99a3ad0d, 0px 61px 24px 0px #99a3ad03,
    0px 95px 27px 0px #99a3ad00;
}

@media (min-width: 1024px) {
  .city-change-popover {
    width: 360px;
  }
}

body:has(.city-change-popover:popover-open) > *:not(.city-change-popover) {
  pointer-events: none;
}

.city-change-popover:popover-open {
  pointer-events: auto;
}

.city-change-popover__close-button {
  position: absolute;
  right: 12px;
  top: 12px;

  width: 20px;
  height: 20px;

  padding: 0;

  border: none;

  fill: #75828b;

  cursor: pointer;

  background-color: transparent;
}

.city-change-popover__input {
  padding: 10px 12px;

  border: 2px solid #d1d8dd;
  border-radius: 6px;

  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #39444c;
}

.city-change-popover__input::placeholder {
  color: #8e9aa4;
  font-weight: 400;
}

.city-change-popover__auto-define {
  align-self: flex-start;

  padding: 0;

  border: none;

  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #d6483d;

  background-color: transparent;

  cursor: pointer;
}

.city-change-popover__city-list {
  max-height: min(496px, 56dvh);

  list-style-type: none;

  overflow-y: auto;

  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #39444c;
}

.city-change-popover__city-list::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

.city-change-popover__city-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #35516b2e;
}

.city-change-popover__city-list li {
  position: relative;

  height: 48px;

  display: flex;
  align-items: center;

  border-bottom: 1px solid #e5ecf1;

  cursor: pointer;
}

.city-change-popover__city-list .city-change-popover-checked-city::after {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ctitle%3Echeck%3C/title%3E%3Cpath fill='%23d6483d' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/%3E%3C/svg%3E");
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
}

.city-popover__save_button {
  display: none;
}

.city-popover__input-wrapper {
  position: relative;
  width: 100%;
}

.city-change-popover__input {
  width: 100%;
  padding-right: 30px; /* Место под крестик */
}

.city-change-popover__clear-input {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
}