/* Inter (variable, SIL OFL 1.1), bundled for a consistent look across
   iOS/Android and all app locales (en, cs, ru, uk). Subsets from Google
   Fonts, license in fonts/OFL.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('./inter-latin.Dx4kXJAl.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('./inter-latin-ext.DO1Apj_S.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('./inter-cyrillic.DqGufNeO.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --tg-color-scheme: dark;
  --tg-theme-bg-color: #212121;
  --tg-theme-button-color: #8774e1;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-hint-color: #aaaaaa;
  --tg-theme-link-color: #8774e1;
  --tg-theme-secondary-bg-color: #181818;
  --tg-theme-text-color: #ffffff;
  --tg-theme-section-separator-color: #303030;
  --tg-theme-accent-text-color: #8774e1;
  --tg-theme-section-bg-color: #212121;
  --tg-theme-section-header-text-color: #8774e1;
  --tg-theme-destructive-text-color: #ff595a;

  --font-size: 16px;

  --gap-half: 4px;
  --gap-side: 8px;
  --gap-small: 8px;
  --gap-median: 16px;
  --gap-large: 32px;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-round: 500px;

  /* Touch controls: compact but comfortably tappable. The --tg-theme-* vars
     are set automatically by telegram-web-app.js (at load and on theme
     change); the values above are only fallbacks for browser preview. */
  --control-height: 36px;
  --control-height-sm: 32px;
  --control-radius: 10px;
  --control-border: 1px solid var(--tg-theme-section-separator-color, #303030);

  --default-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --bg-color: var(--tg-theme-secondary-bg-color, #181818);
  --animation: .15s ease;
  --font-weight-medium: 500;
  --hint-color: var(--tg-theme-hint-color, #aaaaaa);
  --text-color: var(--tg-theme-text-color, #ffffff);
}

body {
  font-family: var(--default-font);
  font-size: var(--font-size);
  line-height: 20px;
  font-weight: 400;
  background-color: var(--bg-color);
  color: var(--text-color);
  color-scheme: var(--tg-color-scheme);
  margin: 0;
  padding: 0;
  /* Telegram iframe scroll workaround, do not remove */
  width: 1px;
  min-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

* {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  padding: var(--gap-median) 0;
  font-size: 2em;
}

p {
  margin: 0;
}

a,
a:visited {
  color: var(--tg-theme-link-color);
  text-decoration-line: none;
}

:focus-visible {
  outline: 2px solid var(--tg-theme-link-color);
  outline-offset: 2px;
}

sup {
  vertical-align: top;
  font-size: 0.6em;
}

.hint {
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  color: var(--hint-color);
  padding-bottom: var(--gap-half);
}

/* Native controls don't inherit the document font by default */
button,
input,
select {
  font-family: inherit;
}

input {
  border: none;
  margin: 0;
  accent-color: var(--tg-theme-button-color);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

select {
  border: none;
}

hr {
  margin: 0;
}

legend {
  padding: var(--gap-small) 0 var(--gap-half);
  color: var(--tg-theme-section-header-text-color, #8774e1);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  width: 100%;
}

footer {
  padding-bottom: calc(var(--gap-median) + env(safe-area-inset-bottom, 0px));
  padding-top: var(--gap-small);
  display: flex;
  align-items: center;
  flex-direction: column;
}

footer a {
  color: var(--hint-color);
  text-decoration: underline;
}

.page {
  transition: filter var(--animation);
  display: flex;
  flex-direction: column;
}

.header {
  padding: var(--gap-large) var(--gap-side) 0 var(--gap-side);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#main {
  display: flex;
  flex-direction: column;
}

.mobile .header {
  padding-top: 100px;
}

#bot-pic {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-round);
}

#title {
  padding: 0;
  font-size: 28px;
  line-height: var(--gap-large);
}

#subtitle {
  font-size: 14px;
  text-align: center;
  align-content: center;
  line-height: 20px;
}

.section_header {
  color: var(--tg-theme-section-header-text-color, #8774e1);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  padding: var(--gap-median) var(--gap-side) var(--gap-half) var(--gap-side);
}

.section {
  background-color: var(--tg-theme-section-bg-color);
  -webkit-box-shadow: 0 0.5px rgba(0, 0, 0, .07);
  box-shadow: 0 0.5px rgba(0, 0, 0, .07);
  padding: var(--gap-small) var(--gap-side);
}

.section-round {
  border-radius: var(--gap-small);
  margin: 0 var(--gap-side);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

#filter-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small) 0;
}

.range-fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-small);
}

.range-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 var(--gap-half);
  font-size: 14px;
  color: var(--hint-color);
}

.range-button {
  color: var(--tg-theme-link-color, #8774e1);
  padding: 0 12px;
  border-radius: var(--radius-round);
  text-decoration: none;
  border: var(--control-border);
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  height: var(--control-height-sm);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
  transition: background-color var(--animation), border-color var(--animation), color var(--animation);
}

.range-button:active {
  background-color: var(--tg-theme-button-color, #8774e1);
  color: var(--tg-theme-button-text-color, #ffffff);
  border-color: transparent;
}

.filter-field {
  width: 100%;
  min-width: 0;
  padding: 0 var(--gap-small);
  border-radius: var(--control-radius);
  border: var(--control-border);
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  color: var(--tg-theme-text-color, #ffffff);
  caret-color: var(--tg-theme-link-color, #8774e1);
  font-size: 14px;
  height: var(--control-height);
  box-sizing: border-box;
  /* Horizontal finger drag on a scrubbed input belongs to the JS gesture
     (see scrub.js), vertical drag keeps scrolling the page. Also silence
     the iOS long-press text-selection callout during the drag. */
  touch-action: pan-y;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.filter-field:focus {
  outline: none;
  border-color: var(--tg-theme-button-color, #8774e1);
}

/* Hints that an input supports horizontal touch-scrubbing. Drawn as a
   background image so it lives inside the input itself: it never blocks
   the drag gesture and never disappears while the value is edited. */
.scrub-hint {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='feather%20feather-move'%20version='1.1'%20id='svg5'%20sodipodi:docname='move-sides.svg'%20inkscape:version='1.4.4%20(dcaf3e7d9e,%202026-05-05)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs5'%20/%3e%3csodipodi:namedview%20id='namedview5'%20pagecolor='%23505050'%20bordercolor='%23ffffff'%20borderopacity='1'%20inkscape:showpageshadow='0'%20inkscape:pageopacity='0'%20inkscape:pagecheckerboard='1'%20inkscape:deskcolor='%23d1d1d1'%20inkscape:zoom='34.916667'%20inkscape:cx='12'%20inkscape:cy='12'%20inkscape:window-width='1920'%20inkscape:window-height='1046'%20inkscape:window-x='0'%20inkscape:window-y='0'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg5'%20/%3e%3cpolyline%20points='5%209%202%2012%205%2015'%20id='polyline1'%20style='stroke:%2374787a;stroke-opacity:1'%20/%3e%3cpolyline%20points='19%209%2022%2012%2019%2015'%20id='polyline4'%20style='fill:none;fill-opacity:1;stroke:%2374787a;stroke-opacity:1'%20/%3e%3cline%20x1='2'%20y1='12'%20x2='22'%20y2='12'%20id='line4'%20style='fill:none;fill-opacity:1;stroke:%2374787a;stroke-opacity:1'%20/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--gap-half) center;
  background-size: 14px 14px;
  padding-right: calc(var(--gap-small) + 18px);
  appearance: textfield;
}

#filter-type-cbox-set {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small) 0;
}

/* Toggle chips: the input itself is visually hidden, the following <span>
   is the visible chip face. `input:checked + span` styles the selected
   state without relying on :has() (older webviews). */
.filter-type-cbox {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
}

.filter-type-cbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.filter-type-cbox span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--control-height);
  max-width: 100%;
  padding: 0 12px;
  border-radius: var(--control-radius);
  border: var(--control-border);
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  color: var(--tg-theme-text-color, #ffffff);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--animation), border-color var(--animation), color var(--animation);
}

.filter-type-cbox:active span {
  opacity: 0.7;
}

.filter-type-cbox input:checked + span {
  background-color: var(--tg-theme-button-color, #8774e1);
  border-color: transparent;
  color: var(--tg-theme-button-text-color, #ffffff);
}

.filter-type-cbox input:focus-visible + span {
  outline: 2px solid var(--tg-theme-link-color, #8774e1);
  outline-offset: 2px;
}

/* "Don't show duplicates" renders as a checkbox row instead of a chip:
   leading square box, accent fill + white checkmark when checked. */
.filter-type-check {
  flex: 1 1 100%;
}

.filter-type-check span {
  justify-content: flex-start;
  gap: var(--gap-small);
  border: none;
  padding: 0;
  background: transparent;
}

/* The checked state must not fill the row: only the ::before box gets the
   accent treatment. Overrides the base chip rule above. */
.filter-type-check input:checked + span {
  background-color: transparent;
  border-color: transparent;
  color: var(--tg-theme-text-color, #ffffff);
}

.filter-type-check span::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1.5px solid var(--tg-theme-section-separator-color, #303030);
  transition: background-color var(--animation), border-color var(--animation);
}

.filter-type-check input:checked + span::before {
  background-color: var(--tg-theme-button-color, #8774e1);
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

#floorplan-wrap,
#source-wrap,
#other-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Rent/Buy segmented control */
#rent-or-buy-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  border-radius: var(--control-radius);
}

#rent-or-buy-wrap .filter-type-cbox {
  flex: 1;
}

#rent-or-buy-wrap .filter-type-cbox span {
  width: 100%;
  min-height: var(--control-height-sm);
  padding: 0 var(--gap-small);
  border: none;
  border-radius: calc(var(--control-radius) - 2px);
  background-color: transparent;
}

#rent-or-buy-wrap .filter-type-cbox input:checked + span {
  background-color: var(--tg-theme-button-color, #8774e1);
  color: var(--tg-theme-button-text-color, #ffffff);
}

.block {
  padding: var(--gap-small);
  width: calc(100% - 2*var(--gap-small));
}

#subs-block {
  display: flex;
  flex-direction: column;
  background-color: var(--tg-theme-section-bg-color);
}

.subscription {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--gap-half) 0;
}

.subscription-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.subscription-details {
  display: flex;
  align-items: center;
}

.subscription-details-info {
  flex: 1;
  min-width: 0;
}

.subs-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.subscription-title {
  display: flex;
  align-items: center;
  color: var(--tg-theme-accent-text-color, #8774e1);
  font-weight: var(--font-weight-medium);
}

.subscription-title-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-right: 24px;
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
}

.subscription-title-text::-webkit-scrollbar {
  display: none;
}

.pending-icon {
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  margin-left: calc(-24px + 6px);
  stroke: var(--hint-color);
}

.subs-svg-wrap {
  display: flex;
  flex-shrink: 0;
}

.subs-svg-map {
  overflow: visible;
  margin-left: var(--gap-small);
  opacity: 0.7;
  pointer-events: none;
}

.subs-svg-city {
  fill: none;
  stroke: var(--tg-theme-hint-color);
  stroke-width: 1.5;
  opacity: 0.4;
}

.section-separator-wrap {
  padding: var(--gap-small) 0;
}

.section-separator {
  background-color: var(--tg-theme-section-separator-color, #303030);
  height: 1px;
  border: none;
  margin: 0 var(--gap-half);
}

#remove-button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  margin-left: var(--gap-small);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--tg-theme-destructive-text-color, #ff595a);
}

#remove-button:active {
  background-color: var(--tg-theme-section-separator-color, #303030);
}

#remove-button svg {
  width: 16px;
  height: 16px;
  display: block;
}

#preview-data {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

#advert-table {
  border-collapse: collapse;
  width: 100%;
}

#advert-table td {
  vertical-align: top;
  padding: var(--gap-half) 0;
}

#advert-table tr:last-child td {
  border-bottom: none;
}

#advert-table>tbody td:nth-child(1) {
  white-space: nowrap;
  color: var(--tg-theme-hint-color, #aaaaaa);
}

#advert-table>tbody td:nth-child(2) {
  padding-left: var(--gap-small);
  font-weight: var(--font-weight-medium);
}

.map {
  width: 100%;
  height: 100%;
}

/* leaflet.css hardcodes Helvetica for attribution/controls */
.leaflet-container {
  font-family: var(--default-font);
}

.leaflet-bottom {
  width: 100%;
}

.map.mode-create {
  cursor: crosshair;
}

.leaflet-edge {
  background-color: #95bc59;
  box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, .35);
  border-radius: 50%;
  cursor: move;
  outline: none;
  transition: background-color .25s;
}

.leaflet-polygon,
.leaflet-polygon-non-blurred {
  fill: var(--tg-theme-link-color);
  stroke: var(--tg-theme-link-color);
  stroke-width: 2;
  fill-opacity: .35;
}

.leaflet-polygon {
  filter: blur(4px);
}

.leaflet-street-line {
  stroke: var(--tg-theme-link-color);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}

#mycontrols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-small);
  padding: var(--gap-small);
  justify-content: flex-end;
  background-color: var(--tg-theme-bg-color);
  box-sizing: border-box;
}

#mycontrols a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-small);
  width: 100%;
  max-width: calc(50vw - var(--gap-small) - var(--gap-half));
  min-height: var(--control-height);
  padding: 0 var(--gap-median);
  border-radius: var(--control-radius);
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  border: var(--control-border);
  color: var(--tg-theme-text-color, #ffffff);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  box-sizing: border-box;
  transition: opacity var(--animation);
}

#mycontrols a:active {
  opacity: 0.7;
}

#mode-button {
  background-color: var(--tg-theme-button-color, #8774e1);
  border-color: transparent;
  color: var(--tg-theme-button-text-color, #ffffff);
}

#mycontrols a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

#mycontrols select {
  border: var(--control-border);
  border-radius: var(--control-radius);
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--gap-half) var(--gap-small);
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  color: var(--tg-theme-text-color, #ffffff);
  box-sizing: border-box;
}

#map-overlay {
  visibility: hidden;
  position: fixed;
  /* Crucial: Takes it out of normal flow without impacting scroll */
  top: 0;
  left: 0;
  width: 100vw;
  /* 100% of the viewport width of the iframe */
  height: 100vh;
  /* 100% of the viewport height of the iframe */
  margin: 0;
  /* Remove any margin */
  padding: 0;
  /* Remove any padding */
  z-index: 9999;
  /* Ensure it's on top of everything else */
  background-color: var(--tg-theme-bg-color, #212121);
  /* To cover underlying content */
  border: none;
  display: flex;
  flex-direction: column;
}

#map-preview {
  width: 100%;
  height: 240px;
  max-height: 240px;
  border-radius: var(--radius-m);
  overflow: hidden;
}

#activate-map-btn {
  width: 100%;
  height: 100%;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  z-index: 10000;
  background-color: var(--tg-theme-secondary-bg-color, #181818);
  opacity: 0.7;
}

#preview-map-container {
  width: 100%;
  height: 400px;
  max-height: 400px;
  position: relative;
  overflow: hidden;
  /* Prevents text from spilling out */
}

@media (max-width: 400px) {
  #preview-map-container {
    aspect-ratio: 1;
  }
}

#preview-map {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  top: 0;
  left: 0;
}

#preview-map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent */
  z-index: 1001;
  /* Leaflet UI is 1000, so we go slightly higher */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  backdrop-filter: blur(2px);
  /* Optional: blurs the map */
}

#overlay-content {
  border-radius: var(--radius-m);
  pointer-events: auto;
  /* Ensures buttons inside the overlay still work */
}

div.leaflet-edge.disabled {
  pointer-events: none;
  background-color: #bbb;
  visibility: hidden;
}

#no-telegram-message {
  line-height: 20px;
  padding: var(--gap-median);
}

.leaflet-lock {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 100%;
}

.leaflet-lock img {
  height: 20px;
  width: 20px;
  display: block;
}

#message-wrap {
  background: var(--tg-theme-section-bg-color, #212121);
  width: calc(100% - 2*var(--gap-median));
  height: fit-content;
  position: fixed;
  left: var(--gap-median);
  bottom: calc(var(--gap-median) + env(safe-area-inset-bottom, 0px));
  padding: 12px var(--gap-median);
  border-radius: var(--radius-m);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  font-size: 14px;
  text-align: center;
  box-sizing: border-box;
  z-index: 10001;
}