/* ==========================================================================
   Spolubydlim — veřejná mapa (redesign 2026)
   Figma: bnHU8qcVUONKhsKPuc1Jkh, řada 05 „MAPA — DESKTOP" (122:2 a stavy 0–5)

   Samostatný stylopis: assets/css/app.css zůstává adminu, tenhle soubor
   obsluhuje jen veřejnou mapu. Tokeny záměrně kopírují newweb/assets/css/
   site.css, aby mapa a statický web byly jeden vizuální systém.
   ========================================================================== */

:root {
  /* Barvy — shodné s newweb/assets/css/site.css */
  --primary:      #0059ff;   /* modrá z loga (Figma uvádí #2f6bff)  */
  --primary-dark: #0047cc;
  --primary-soft: #eef2fc;
  --ink:          #111a3d;
  --muted:        #5a6478;
  --line:         #e1e7f5;
  --white:        #fff;

  --green:        #1db954;   /* volné ihned            */
  --green-bg:     #e4f8ec;
  --amber-dot:    #f09d1b;   /* volné později          */
  --amber-text:   #b45309;   /* kontrast pro text      */
  --amber-bg:     #fef3dd;

  --wa:           #25d366;   /* WhatsApp               */
  --wa-dark:      #1eb455;
  --red:          #e23b4e;   /* uložit hledání (srdíčko) */
  --red-dark:     #c22a3c;
  --full-dot:     #e74c3c;   /* plně obsazený byt      */
  --full-text:    #991b1b;   /* kontrast pro text      */
  --full-bg:      #fdecec;

  --photo-bg:     #d7e1f8;   /* placeholder fotky      */
  --zast:         #3f4d63;   /* zastávka MHD / vlaku   */

  /* Rádiusy */
  --r-pill: 99px;
  --r-card: 14px;
  --r-btn:  10px;

  /* Stíny */
  --sh-pin:   0 3px 8px rgba(18, 26, 61, .20);
  --sh-seg:   0 2px 5px rgba(18, 26, 61, .12);
  --sh-panel: 0 3px 8px rgba(18, 26, 61, .12);
  --sh-popup: 0 10px 26px rgba(18, 26, 61, .22);
  --sh-card:  0 4px 12px rgba(0, 89, 255, .18);

  /* Rozměry */
  --topbar-h: 74px;
  --panel-w:  430px;

  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body.mapa {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  overflow: hidden;              /* posouvá se panel a mapa, ne stránka */
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}

/* ==========================================================================
   TopBar (135:2)
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 24px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* Strany se měří podle obsahu, prostor navíc bere vyhledávání.
   ⚠️ `flex: 1 0 0` tu být nesmí — nutilo obě strany na stejnou šířku,
   pravá se do ní nevešla a přetekla přes vyhledávací pole. */
.topbar__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar__side--right { justify-content: flex-end; }

/* Logo 1:1 podle hlavičky webu (site.css ř. 318–324 a 393):
   obrázek, ne text, a na desktopu 30 px na výšku. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  height: 30px;
  width: auto;
}

/* --- vyhledávání + našeptávač (141:2) --- */

.searchbox {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  max-width: 460px;
  min-width: 0;
  margin-inline: auto;      /* drží vyhledávání na středu zbylého místa */
}

.searchbox__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.searchbox.is-open .searchbox__field,
.searchbox__field:focus-within {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 255, .12);
}

.searchbox__icon {
  flex: none;
  width: 16px; height: 16px;
  color: var(--muted);
}
.searchbox.is-open .searchbox__icon,
.searchbox__field:focus-within .searchbox__icon { color: var(--primary); }

.searchbox__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.searchbox__input::placeholder { color: var(--muted); }

.searchbox__clear {
  flex: none;
  display: none;
  width: 18px; height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  line-height: 1;
}
.searchbox__clear:hover { color: var(--ink); }
.searchbox.has-value .searchbox__clear { display: block; }

.suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 1200;
  padding: 6px 0;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(18, 26, 61, .18);
  overflow: hidden;
}
.suggest[hidden] { display: none; }

.suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  border: 0;
  background: none;
  text-align: left;
}
.suggest__item:hover,
.suggest__item.is-active { background: var(--primary-soft); }

.suggest__icon {
  flex: none;
  width: 18px; height: 18px;
  color: var(--muted);
}

.suggest__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.suggest__title mark {
  background: none;
  color: var(--primary);
  font-weight: 700;
}
.suggest__meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.suggest__all {
  display: block;
  width: 100%;
  padding: 12px 18px 8px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-align: left;
}

.suggest__empty {
  padding: 14px 18px;
  font-size: 12px;
  color: var(--muted);
}

/* --- Uložit hledání --- */

/* Metriky (padding, font, line-height, border) drží krok s .pill níže,
   aby všechna tři tlačítka v hlavičce byla stejně vysoká. */
.savebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--r-pill);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.savebtn:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-1px);
}
.savebtn:active { transform: translateY(1px); transition-duration: 0.4s; }

/* 18px stejně jako .pill .ico — ikona je vyšší než řádek textu, takže
   určuje výšku tlačítka; při 16px by bylo o 2px nižší než sousedé. */
.savebtn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

/* --- kontaktní pilulky: kopie .pill z newweb/assets/css/site.css (ř. 349–366),
       včetně hover i active. Používá je hlavička i detail bytu v modálu. --- */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--ink);
  text-decoration: none; background: var(--white);
  white-space: nowrap;
  transition: border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.pill .ico { width: 18px; height: 18px; flex: none; }
.pill:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; transform: translateY(-1px); }
.pill:active { transform: translateY(1px); transition-duration: 0.4s; }

.pill--wa {
  background: var(--wa); border-color: var(--wa); color: #fff;
  font-weight: 700; font-size: 14px; padding: 10px 20px;
}
.pill--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); color: #fff; }

/* --- volání na Magdu: obsah i stavy podle .detail__tel (site.css ř. 2093–2110),
       jen menší avatar a pilulkový tvar, ať to sedne vedle sousedů --- */

.callbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.callbox img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.callbox__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.callbox__txt strong { font-size: 13px; font-weight: 700; line-height: 1.2; }
.callbox__txt > span {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}
.callbox .ico { width: 18px; height: 18px; flex: none; color: var(--primary); }

.callbox:hover {
  border-color: var(--primary);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 89, 255, .12);
  transform: translateY(-1px);
}
.callbox:active { transform: translateY(1px); transition-duration: 0.4s; }

/* Avatar (32) + odsazení určuje výšku; sousedé se dorovnají, aby řádek
   hlavičky držel jednu linku. */
.topbar__side--right > * { min-height: 44px; }

/* ==========================================================================
   Rozvržení (122:25)
   ========================================================================== */

.body {
  display: flex;
  align-items: stretch;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
}

.panel {
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--panel-w);
  background: var(--white);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.mapwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #eaf0e6;
}

#map {
  position: absolute;
  inset: 0;
}

/* ==========================================================================
   Filtry (137:27)
   ========================================================================== */

.filters {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--primary-soft);
  border-radius: var(--r-pill);
}

.seg__btn {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
}
.seg__btn:hover { color: var(--ink); }

.seg__btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--primary);
  box-shadow: var(--sh-seg);
}

.seg__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.seg__dot--green { background: var(--green); }
.seg__dot--amber { background: var(--amber-dot); }

/* ✕ na aktivním filtru (141:270) */
.seg__x {
  flex: none;
  width: 12px; height: 12px;
  color: currentColor;
  opacity: .75;
}
.seg__btn[aria-pressed="true"] .seg__x { display: block; }
.seg__btn .seg__x { display: none; }

.chiprow {
  display: flex;
  gap: 8px;
}

.chip {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.chip:hover { border-color: #c9d5ef; }

.chip[aria-expanded="true"],
.chip.is-set {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 89, 255, .12);
}

.chip__caret { font-size: 9px; line-height: 1; opacity: .7; }

/* --- rozbalený filtr ceny / velikosti (141:136) --- */

.drop {
  padding: 16px;
  background: var(--primary-soft);
  border-radius: var(--r-card);
}
.drop[hidden] { display: none; }

.drop__range {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.drop__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.preset {
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.preset[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.drop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.drop__clear {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.drop__clear:hover { color: var(--ink); text-decoration: underline; }

.drop__apply {
  padding: 10px 22px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.drop__apply:hover { background: var(--primary-dark); }

/* Dvojitý posuvník — dvě průhledné dráhy nad společným pásem */
.slider {
  position: relative;
  height: 20px;
}
.slider__track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 4px;
  margin-top: -2px;
  background: #d7e1f8;
  border-radius: 2px;
}
.slider__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  background: var(--primary);
  border-radius: 2px;
}
.slider input[type="range"] {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 20px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;   /* chytají jen palce, ne celá dráha */
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: var(--white);
  pointer-events: auto;
  cursor: grab;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background: var(--white);
  pointer-events: auto;
  cursor: grab;
}

/* ==========================================================================
   Hlavička výpisu (122:27)
   ========================================================================== */

.panel__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
}

.panel__count {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.sortbtn {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sortbtn:hover { color: var(--ink); }

.sortmenu {
  position: absolute;
  z-index: 1100;
  min-width: 210px;
  padding: 6px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18, 26, 61, .18);
}
.sortmenu[hidden] { display: none; }

.sortmenu__item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.sortmenu__item:hover { background: var(--primary-soft); }
.sortmenu__item[aria-checked="true"] { color: var(--primary); font-weight: 600; }

/* ==========================================================================
   Výpis bytů (122:31)
   ========================================================================== */

.panel__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hint {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 14px;
  color: var(--muted);
}
.hint--foot { margin: 14px 0 0; }

/* Zelený pruh „aktivní filtr" (141:270) */
.activefilter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 14px;
  background: var(--green-bg);
  border-radius: var(--r-btn);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.activefilter[hidden] { display: none; }
.activefilter__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.activefilter__clear {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
}
.grouphead__dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.grouphead__dot--green { background: var(--green); }
.grouphead__dot--amber { background: var(--amber-dot); }
.grouphead__dot--red   { background: var(--full-dot); }
.grouphead__label { font-size: 13px; font-weight: 700; color: var(--ink); }
.grouphead__count { font-size: 12px; color: var(--muted); }

/* --- karta bytu (122:32) --- */

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-align: left;
  text-decoration: none;
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.card:hover { border-color: #c9d5ef; }

/* Zvýraznění z mapy i z výpisu — modrý stav = hover (poznámky 202:2) */
.card.is-active {
  border: 2px solid var(--primary);
  padding: 11px;                 /* dorovná tlustší rámeček */
  box-shadow: var(--sh-card);
}

.card__photo {
  flex: none;
  width: 84px; height: 64px;
  border-radius: var(--r-btn);
  background: var(--photo-bg);
  object-fit: cover;
}

.card__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__meta {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

/* --- odznak dostupnosti --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.badge__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }

.badge--green { background: var(--green-bg); color: var(--green); }
.badge--green .badge__dot { background: var(--green); }

.badge--amber { background: var(--amber-bg); color: var(--amber-text); }
.badge--amber .badge__dot { background: var(--amber-dot); }

/* Plně obsazený byt — zobrazuje se jen když to admin zapne. */
.badge--red { background: var(--full-bg); color: var(--full-text); }
.badge--red .badge__dot { background: var(--full-dot); }

/* ==========================================================================
   Prázdný výsledek + wizard (176:2, 195:10–195:150)
   ========================================================================== */

.empty {
  margin-top: 12px;
  padding: 22px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-align: center;
}
.empty[hidden] { display: none; }

.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.empty__icon svg { width: 20px; height: 20px; }

.empty__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.empty__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.wizard { margin-top: 18px; }

.wizard__steps {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.wizard__step {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.wizard__step.is-done { background: var(--primary); }

.wizard__q {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.wizard__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wizard__opt {
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.4s, background 0.4s, color 0.4s;
}
.wizard__opt:hover { border-color: var(--primary); color: var(--primary); }

.wizard__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  text-align: left;
}

.wizard__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
}
.wizard__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 255, .12);
}
textarea.wizard__input { min-height: 64px; resize: vertical; }

.wizard__submit {
  width: 100%;
  margin-top: 4px;
  padding: 11px 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.wizard__submit:hover { background: var(--primary-dark); }
.wizard__submit:disabled { opacity: .6; cursor: default; }

.wizard__back {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
}

.wizard__note {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.wizard__note--err { color: #c0392b; }

/* ==========================================================================
   Značky na mapě (122:80–122:95)
   ========================================================================== */

/* Leaflet obaluje divIcon vlastním divem — nulujeme jeho výchozí vzhled */
.pin-icon,
.cluster-icon { background: none; border: 0; }

.pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-pin);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s;
}

.pin__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pin__dot--green { background: var(--green); }
.pin__dot--amber { background: var(--amber-dot); }
.pin__dot--red   { background: var(--full-dot); }

/* Obsazený pin ustupuje volným — červený text na světlém podkladu, ať je
   čitelný a přitom nepřebíjí nabídku. Hover/aktivní stav zůstává modrý. */
.pin--full {
  background: var(--full-bg);
  border-color: #f6c9c9;
  color: var(--full-text);
}

.pin:hover,
.pin.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translate(-50%, -50%) scale(1.04);
  z-index: 500;
}

/* shluk ve stylu Sreality — kolečko + popisek pod ním */
.cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.cluster__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: var(--sh-pin);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
}

.cluster__label {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--white);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(18, 26, 61, .15);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* ==========================================================================
   Popup bytu (122:96)
   ========================================================================== */

.leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 16px;
  box-shadow: var(--sh-popup);
  overflow: hidden;
}
.leaflet-popup-content { margin: 0; width: 250px !important; }
.leaflet-popup-tip { box-shadow: var(--sh-popup); }
.leaflet-popup-close-button {
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  line-height: 22px !important;
}

.pop__photo {
  display: block;
  width: 100%;
  height: 120px;
  background: #c3d2f2;
  object-fit: cover;
}

.pop__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  background: var(--white);
}

.pop__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.pop__meta {
  font-size: 11px;
  color: var(--muted);
}

.pop__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.pop__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
}
.pop__chip .badge__dot { width: 6px; height: 6px; }

.pop__more { font-size: 10px; color: var(--muted); }

/* Selektor musí přebít `.leaflet-container a { color: #0078A8 }` z Leafletu —
   bez toho je bílý text na modrém tlačítku modrý, tedy neviditelný. */
.leaflet-container a.pop__cta {
  display: block;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--primary);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  text-decoration: none;
}
.leaflet-container a.pop__cta:hover { background: var(--primary-dark); color: var(--white); }

.leaflet-container a.pop__link {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
  text-decoration: none;
}
.leaflet-container a.pop__link:hover { text-decoration: underline; }

/* ==========================================================================
   Ovládání mapy — legenda, zoom (122:113, 122:120)
   ========================================================================== */

.legend {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--sh-panel);
}
.legend__row { display: flex; align-items: center; gap: 6px; }
.legend__dot { width: 9px; height: 9px; border-radius: 50%; }
.legend__dot--green { background: var(--green); }
.legend__dot--amber { background: var(--amber-dot); }
.legend__label { font-size: 11px; font-weight: 500; color: var(--ink); }

/* --- vrstva vysokých škol: hlavní vypínač + dlaždice jednotlivých škol --- */

.legend__skoly {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
}
.legend__skoly:empty { display: none; }

.legend__master {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.legend__master .legend__label { font-weight: 600; }
.legend__master[aria-pressed="false"] .legend__label { color: var(--muted); }

/* Dvě sloupce, ať legenda nevyroste přes půl mapy. */
.legend__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

.legend__skola {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--hover-t, .15s), opacity var(--hover-t, .15s);
}
.legend__skola:hover { background: var(--primary-soft); }

/* Vypnutá škola vybledne — stav je vidět bez čtení. */
.legend__skola[aria-pressed="false"] { opacity: .42; }
.legend__skola[aria-pressed="false"] .legend__box { background: none; }
.legend__skola[aria-pressed="false"] .legend__label { color: var(--muted); }

.legend__switch {
  position: relative;
  flex: none;
  width: 28px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--primary);
  transition: background-color var(--hover-t, .15s);
}
.legend__switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--white);
  transition: left var(--hover-t, .15s);
}
.legend__master[aria-pressed="false"] .legend__switch { background: #c3ccdd; }
.legend__master[aria-pressed="false"] .legend__switch::after { left: 2px; }

/* Čtvereček nese barvu školy přes `color` z inline stylu (viz map.js). */
.legend__box {
  flex: none;
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  background: currentColor;
}
/* Zastávka je na mapě tečka, tak ať ji má i legenda. */
.legend__label--tecka { display: inline-flex; align-items: center; gap: 6px; }
.legend__box--zastavka { border-radius: 50%; color: var(--zast); }

/* Legenda po přidání škol a zastávek roste — na nízkém okně ať radši roluje,
   než aby vylezla pod horní lištu. */
.legend { max-height: calc(100% - 40px); overflow-y: auto; }

/* --- značka zastávky --- */

.zast-icon { background: none; border: 0; }
/* Drobná tečka — zastávky jsou doplňková informace, nesmí přebít nabídku
   bytů. Druh dopravy schválně neřešíme, stačí „tady je zastávka". */
.zast {
  display: block;
  width: 11px; height: 11px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--zast);
  box-shadow: var(--sh-seg);
  transform: translate(-50%, -50%);
  transition: transform var(--hover-t, .15s);
}
.zast:hover { transform: translate(-50%, -50%) scale(1.35); }

/* Bublina s názvem fakuty — stejný tvar jako popisek pinu. */
.leaflet-tooltip.skola-tip {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  box-shadow: var(--sh-panel);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.35;
  color: var(--white);
  white-space: nowrap;
}
.leaflet-tooltip.skola-tip span { display: block; opacity: .72; }
.leaflet-tooltip.skola-tip::before { border-top-color: var(--ink); }

.zoom {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--white);
  border-radius: var(--r-btn);
  box-shadow: var(--sh-panel);
}
.zoom__btn {
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.zoom__btn:hover { background: var(--primary-soft); }

/* Leaflet vlastní zoom schováváme — máme svůj */
.leaflet-control-zoom { display: none; }
.leaflet-container { font-family: var(--font-body); background: #eaf0e6; }
.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   Načítání — skeleton výpisu + spinner na mapě (186:2)
   ========================================================================== */

.skeleton { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.skeleton[hidden] { display: none; }

.skel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.skel-photo { flex: none; width: 84px; height: 64px; border-radius: var(--r-btn); }
.skel-col { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
.skel-line { height: 10px; border-radius: 5px; }
.skel-line--sm { width: 55%; }
.skel-line--md { width: 78%; }

.skel-photo,
.skel-line {
  background: linear-gradient(90deg, #eef2fc 25%, #e2e9f8 37%, #eef2fc 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.maploading {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(234, 240, 230, .75);
  backdrop-filter: blur(2px);
}
.maploading[hidden] { display: none; }

.spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(0, 89, 255, .2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.maploading__text { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   Modal „Uložit hledání" (198:16)
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 26, 61, .45);
}
.modal[hidden] { display: none; }

.modal__box {
  width: 420px;
  max-width: 100%;
  padding: 24px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(17, 26, 61, .25);
}

.modal__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.modal__text { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.modal__summary {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border-radius: var(--r-btn);
  font-size: 12px;
  color: var(--ink);
}

.modal__actions { display: flex; gap: 10px; margin-top: 14px; }
.modal__actions .wizard__submit { margin-top: 0; }

.modal__cancel {
  flex: none;
  padding: 11px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.modal__cancel:hover { background: var(--primary-soft); }

/* ==========================================================================
   Výsledky hledání + detail bytu v modálním okně
   ========================================================================== */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: rgba(17, 26, 61, .45);
}
.sheet[hidden] { display: none; }

.sheet__box {
  display: flex;
  flex-direction: column;
  width: 720px;
  max-width: 100%;
  max-height: 100%;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(17, 26, 61, .25);
  overflow: hidden;
}
.sheet__box--wide { width: 860px; }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.sheet__heading { min-width: 0; }

/* Nadpis a shrnutí vedle sebe; na úzkém okně se pilulky zalomí pod nadpis. */
.sheet__titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.sheet__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.sheet__sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.sheet__sub:empty { display: none; }

/* --- shrnutí shluku jako pilulky (metriky drží krok s .badge u karet) --- */

.sheet__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sheet__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--primary-soft);
  color: var(--ink);
}
/* Ikona je vyšší než řádek textu, proto pevná velikost bez zmenšování. */
.sheet__chip svg { flex: none; width: 13px; height: 13px; }

.sheet__chip--green { background: var(--green-bg); color: var(--green); }
.sheet__chip--amber { background: var(--amber-bg); color: var(--amber-text); }

.sheet__close {
  flex: none;
  width: 32px; height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}
.sheet__close:hover { background: #e2e9fb; }

.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- seznam výsledků hledání --- */

.results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.results .card { background: var(--white); }

.results__empty { padding: 20px 0; font-size: 13px; color: var(--muted); text-align: center; }

/* --- detail bytu ---------------------------------------------------------
   Stavba i třídy převzaté z detailu bytu na webu (newweb/assets/css/site.css:
   .galerie, .params, .detail__blok, .pokoje, .chipy, .odrazky), aby detail
   vypadal stejně, ať se na něj člověk dostane z landingu nebo z mapy.
   Rozměry jsou o něco menší — tohle je okno, ne celá stránka.
   ------------------------------------------------------------------------- */

/* galerie — na desktopu velká vlevo a dvě pod sebou vpravo,
   stejně jako site.css ř. 1975–1979 (tam v @media min-width 900). */
.galerie {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  gap: 12px;
}
.galerie__hlavni img { aspect-ratio: 2 / 1; height: 100%; }
.galerie__vedle { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.galerie__mala img { aspect-ratio: auto; height: 100%; }
.galerie__hlavni,
.galerie__mala {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
}
.galerie__mala { border-radius: 12px; }
.galerie__hlavni img,
.galerie__mala img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--photo-bg);
  display: block;
}
.galerie__vedle { display: grid; gap: 10px; }
.galerie__vic {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

/* nadpis + dlaždice s parametry */
.detail__uvod h1 {
  margin: 18px 0 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}

.params { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.param {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--primary-soft);
  border-radius: 14px;
}
.param strong { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--ink); }
.param span { font-size: 12px; color: var(--muted); }

/* sekce se stejným akcentem jako na webu */
.detail__blok { margin-top: 26px; }
.detail__blok h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
}
.detail__blok h2 .accent { color: var(--primary); }

/* volné pokoje — v okně po dvou vedle sebe, každý s fotkou */
.pokoje {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pokoj {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color var(--hover-t);
}
.pokoj--klik { cursor: pointer; }
.pokoj:hover { border-color: var(--primary); }
.pokoj--klik:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pokoj__foto {
  flex: none;
  width: 84px; height: 68px;
  border-radius: 10px;
  background: var(--photo-bg);
  object-fit: cover;
}
.pokoj__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pokoj__hlava { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pokoj__hlava strong { font-size: 15px; color: var(--ink); }
.pokoj__stav { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.pokoj__stav--free { color: var(--green); }
.pokoj__stav--later { color: var(--amber-text); }
.pokoj__stav--full  { color: var(--full-text); }
.pokoj__meta { margin: 0; font-size: 13px; color: var(--muted); }
.pokoj__cena {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  color: var(--primary);
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--free { background: var(--green); }
.dot--later { background: var(--amber-dot); }
.dot--full  { background: var(--full-dot); }

/* vybavení */
.chipy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chipy li {
  padding: 8px 14px;
  background: var(--primary-soft);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* popis bytu */
.odrazky { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.odrazky li { display: flex; gap: 10px; font-size: 14px; line-height: 21px; color: var(--muted); }
.odrazky li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--primary);
}

/* cena */
.detail__cena { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.detail__cena strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--primary);
}
.detail__cena > span { font-size: 13px; color: var(--muted); }

/* patička okna — stejné bloky jako v postranní kartě detailu bytu na webu
   (site.css: .btn--wa.btn--block nad .detail__tel), tedy na plnou šířku
   pod sebou, ne dvě malé pilulky vedle sebe. */

/* Vlevo „zavolat / napsat", vpravo formulář. Na úzké ploše pod sebou. */
.detail__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.detail__kontakt,
.detail__formular { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* zelené tlačítko — kopie .btn + .btn--wa + .btn--block */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 0; border-radius: 12px;
  font-weight: 700; font-size: 14px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--hover-t), color var(--hover-t), transform var(--hover-t);
}
.btn:hover { text-decoration: none; transform: translateY(var(--hover-lift)); }
.btn:active { transform: translateY(1px); transition-duration: 0.4s; }
.btn .ico { width: 18px; height: 18px; flex: none; }
.btn--block { width: 100%; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-dark); color: #fff; }

/* kontakt na Magdu — kopie .detail__tel (site.css ř. 2093–2110) */
.detail__tel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--hover-t), transform var(--hover-t);
}
.detail__tel img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.detail__tel-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.detail__tel-txt strong { font-size: 15px; font-weight: 700; }
.detail__tel-txt > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.detail__tel .ico { width: 20px; height: 20px; margin-left: auto; flex: none; color: var(--primary); }
.detail__tel:hover { border-color: var(--primary); text-decoration: none; transform: translateY(var(--hover-lift)); }
.detail__tel:active { transform: translateY(1px); transition-duration: 0.4s; }

/* kontaktní formulář — 1:1 podle .form v postranní kartě detailu na webu */
.detail__nebo { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }

.form { display: flex; flex-direction: column; gap: 14px; }
.form__pole { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.form input, .form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--hover-t), box-shadow var(--hover-t), background-color var(--hover-t);
}
.form textarea { resize: vertical; min-height: 108px; line-height: 1.45; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form input:focus, .form textarea:focus {
  outline: 0;
  background: var(--white);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 89, 255, .18);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #e5484d; }
.form__note { margin: 0; font-size: 12px; color: var(--muted); }
.form__note a { color: var(--primary); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.form__stav { margin: 0; font-size: 13px; font-weight: 600; color: var(--green); }
.form__stav--err { color: #c0392b; }

/* Skrytý honeypot pro roboty (stejný vzor jako api/lead.php) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skel-photo, .skel-line, .spinner { animation: none; }
  * { transition: none !important; }
}

/* ==========================================================================
   JEDNOTNÉ HOVER CHOVÁNÍ
   --------------------------------------------------------------------------
   Shodné s blokem na konci newweb/assets/css/site.css:

     najetí  = jemná změna barvy + nadzvednutí o 1 px, ŽÁDNÝ stín navíc
     stisk   = posun o 1 px dolů, rychlejší přechod
     přechod = .18s ease
   ========================================================================== */

:root {
  --hover-lift: -1px;
  --hover-t: 0.4s ease;
}

/* Kontakt na Magdu se dřív při najetí podsvěcoval modrým stínem. */
.callbox:hover { box-shadow: none; }

/* Karta bytu ve výpisu se chová jako karta pokoje na webu. */
.card { transition: border-color var(--hover-t), transform var(--hover-t); }
.card:hover { transform: translateY(var(--hover-lift)); }
.card:active { transform: translateY(1px); transition-duration: 0.4s; }
/* Vybraná karta se nezvedá — drží ji modrý rámeček, ne pohyb. */
.card.is-active:hover { transform: none; }

/* Pin na mapě je posazený přes translate(-50%,-50%), takže zdvih musí
   to posunutí zachovat. Dřív se navíc zvětšoval — jinak než zbytek webu. */
.pin:hover,
.pin.is-active {
  transform: translate(-50%, calc(-50% + var(--hover-lift)));
}

/* Ovládací prvky mění jen barvu, nezvedají se — nejsou to tlačítka s akcí. */
.zoom__btn, .sheet__close, .suggest__item, .chip, .preset, .seg__btn {
  transition: background-color var(--hover-t), border-color var(--hover-t), color var(--hover-t);
}

/* ==========================================================================
   MOBIL (řada 04: 199:2, 125:2, 131:2, 131:73, 131:153, 199:61)
   --------------------------------------------------------------------------
   Jiná kompozice, ne zúžený desktop: mapa přes celý displej, ovládání
   plave nahoře, výpis je spodní přehoz (bottom-sheet).
   ========================================================================== */

/* Na desktopu mobilní prvky vůbec neexistují. */
.mtop, .msheet-toggle, .panel__handle, .mcta, .msheet, .msearch { display: none; }

@media (max-width: 899px) {

  .topbar { display: none; }             /* hlavička nahrazená plovoucím ovládáním */

  .body { height: 100dvh; display: block; }

  .mapwrap {
    position: fixed;
    inset: 0;
    width: auto;
  }

  /* --- plovoucí vyhledávání + chipy (125:6) --- */

  .mtop {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 700;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 12px 0;
    pointer-events: none;                /* mapa pod tím zůstane ovladatelná */
  }
  .mtop > * { pointer-events: auto; }

  .mtop__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: var(--white);
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: 0 3px 10px rgba(18, 26, 61, .15);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
  }
  .mtop__search svg { flex: none; width: 16px; height: 16px; color: var(--muted); }

  .mtop__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mtop__chips::-webkit-scrollbar { display: none; }

  .mchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 7px 12px;
    background: var(--white);
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 6px rgba(18, 26, 61, .12);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: background-color var(--hover-t), color var(--hover-t);
  }
  .mchip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .mchip__dot--green { background: var(--green); }
  .mchip__dot--amber { background: var(--amber-dot); }

  .mchip__x { display: none; font-size: 10px; opacity: .8; }
  .mchip[aria-pressed="true"] { background: var(--primary); color: var(--white); }
  .mchip[aria-pressed="true"] .mchip__x { display: inline; }
  .mchip[aria-pressed="true"] .mchip__dot { background: var(--white); }

  /* --- přepínač mapa / seznam (125:44) --- */

  .msheet-toggle {
    position: absolute;
    left: 50%;
    bottom: calc(var(--peek) + 14px);
    z-index: 750;
    display: block;
    transform: translateX(-50%);
    padding: 9px 16px;
    background: var(--ink);
    border: 0;
    border-radius: var(--r-pill);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    transition: bottom var(--hover-t);
  }

  /* --- výpis jako spodní přehoz (125:29) --- */

  :root { --peek: 210px; }

  /* Zavřený přehoz je **opravdu vysoký jen `--peek`**, nesjíždí se dolů
     posunem. S `height: 78dvh` + `translateY` si vnitřní layout myslel, že je
     vidět celých 78dvh, takže `.panel__scroll` vyšel na 551 px a `overflow-y`
     neměl co rolovat (scrollHeight == clientHeight). Zbytek seznamu se vykreslil
     ~390 px pod spodním okrajem okna, kam se nedalo dostat: karta byla vidět
     jen napůl a tažení prstem propadlo na mapu za panelem. */
  .panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 800;
    width: auto;
    height: var(--peek);
    border-right: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .15);
    transition: height var(--hover-t);
  }
  body.sheet-open .panel { height: 78dvh; }
  body.sheet-open .msheet-toggle { bottom: calc(78dvh + 14px); }

  .panel__handle {
    display: flex;
    justify-content: center;
    flex: none;
    width: 100%;
    padding: 10px 0 6px;
    border: 0;
    background: none;
  }
  .panel__handle span {
    width: 36px; height: 4px;
    border-radius: 2px;
    background: var(--line);
  }

  /* Filtry se na mobilu přesouvají do vlastního přehozu (viz JS). */
  .panel .filters { display: none; }

  .panel__head { padding: 4px 16px 10px; }
  .panel__count { font-size: 13px; }
  .sortbtn { font-size: 12px; }
  .panel__scroll { padding: 0 16px 12px; }
  .hint { display: none; }               /* na malé ploše jen ubírá místo */

  .mcta {
    display: block;
    flex: none;
    margin: 0 16px calc(16px + env(safe-area-inset-bottom));
    padding: 12px 16px;
    background: var(--primary);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    text-decoration: none;
  }
  .mcta:hover { background: var(--primary-dark); }
  /* V náhledu je 210 px místa na pokoje, ne na druhotné CTA — dřív bylo pod
     okrajem okna, teď by ho ubralo seznamu. Ukáže se s rozbaleným přehozem. */
  body:not(.sheet-open) .mcta { display: none; }

  /* --- filtry jako spodní přehoz (131:73) --- */

  .msheet {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: flex-end;
    background: rgba(17, 26, 61, .45);
  }
  .msheet[hidden] { display: none; }

  .msheet__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88dvh;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--white);
    border-radius: 20px 20px 0 0;
  }
  .msheet__handle {
    width: 36px; height: 4px;
    margin: 10px auto 6px;
    border-radius: 2px;
    background: var(--line);
  }
  .msheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
  }
  .msheet__title { margin: 0; font-size: 18px; font-weight: 700; }
  .msheet__clear {
    padding: 0; border: 0; background: none;
    font-size: 13px; color: var(--muted); text-decoration: underline;
  }
  .msheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* Filtry v přehozu jsou na plnou šířku, bez rámečku panelu. */
  .msheet__body .filters {
    display: flex;
    padding: 0 0 12px;
    border-bottom: 0;
  }
  .msheet__body .drop { background: var(--primary-soft); }

  .msheet__cta {
    flex: none;
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--primary);
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
  }
  .msheet__cta:hover { background: var(--primary-dark); }

  /* --- celoobrazovkové hledání (131:2) --- */

  .msearch {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    flex-direction: column;
    background: var(--white);
  }
  .msearch[hidden] { display: none; }

  .msearch__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid var(--line);
  }
  .msearch__back {
    flex: none;
    width: 32px; height: 32px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: none;
    font-size: 20px;
    color: var(--ink);
  }
  .msearch__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 16px;
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-radius: var(--r-pill);
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    outline: none;
  }
  .msearch__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0 20px; }

  .msearch__label {
    padding: 12px 16px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
  }

  /* --- drobnosti --- */

  .legend { display: none; }             /* semafor vysvětlují chipy nahoře */
  .zoom { top: auto; bottom: calc(var(--peek) + 70px); right: 12px; }
  body.sheet-open .zoom { display: none; }

  .sheet { padding: 0; align-items: flex-end; }
  .sheet__box, .sheet__box--wide {
    width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  .params { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; gap: 10px; }
  .galerie__hlavni img, .galerie__mala img { aspect-ratio: 16 / 10; height: auto; }
  .galerie__vedle { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .detail__tel-txt > span { white-space: normal; }
  .pokoje { grid-template-columns: 1fr; }
  .detail__cta { grid-template-columns: 1fr; gap: 16px; }
  .results { grid-template-columns: 1fr; }
  .modal__box { border-radius: 18px; }
}

/* Logo se zmenší spolu s hlavičkou webu (site.css: 26 px pod 900 px). */
@media (max-width: 899px) {
  .brand img { height: 26px; }
}

/* ==========================================================================
   Hlavička v užším okně
   --------------------------------------------------------------------------
   Mapa běží i v modálu na landingu (~1280 px) a v úzkém okně prohlížeče.
   Postup je stejný jako v hlavičce webu (site.css ř. 2112–2124): nejdřív se
   zmenší odsazení, pak zmizí to nejméně důležité. WhatsApp zůstává vždy.
   ========================================================================== */

@media (max-width: 1399px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .savebtn, .pill { padding: 9px 14px; font-size: 12px; }
  .pill--wa { padding: 9px 16px; font-size: 13px; }
  /* Kontakt zůstává celý včetně role a čísla — proměřeno až k 1080 px, kde
     mizí stejně celý: vyhledávací pole se do té doby smrskne jen o 30 px
     a hlavička se nikde nepřekrývá. Zkrácená podoba jen na jméno je tedy
     zbytečná a v modálu na landingu (~1280 px) působila jako chyba. */
  .callbox { padding-right: 12px; }
}

@media (max-width: 1249px) {
  .savebtn { display: none; }          /* uložit hledání jde i z detailu */
}

@media (max-width: 1079px) {
  .callbox { display: none; }          /* telefon zůstává v popupu i v detailu */
}

/* ==========================================================================
   Složení bočního panelu (desktop)
   --------------------------------------------------------------------------
   Mapa běží i ve vloženém rámu — na webu jako náhled a v modálu. Tam je
   430px panelu z malé plochy moc, takže startuje zavřený a jde rozbalit.
   ========================================================================== */

.paneltoggle {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color var(--hover-t), color var(--hover-t), transform var(--hover-t);
}
.paneltoggle:hover { border-color: var(--primary); color: var(--primary); transform: translateY(var(--hover-lift)); }
.paneltoggle:active { transform: translateY(1px); transition-duration: 0.4s; }

.paneltoggle__ico {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform var(--hover-t);
}

/* Panel odjede doleva; mapa si vezme jeho místo.
   --------------------------------------------------------------------------
   Omezeno na desktop schválně. Bez toho by `.panel { transition: margin-left }`
   přebilo mobilní `transition: height` z bloku výše — je v souboru později
   a má stejnou váhu (media query váhu nepřidává), takže by spodní přehoz
   neplynul, jen skákal. Zasouvání doleva na mobilu neexistuje, proto tu
   nechybí ani dřívější reset `body.panel-off .panel { margin-left: 0 }`. */
@media (min-width: 900px) {
  .panel { transition: margin-left var(--hover-t); }
  body.panel-off .panel { margin-left: calc(-1 * var(--panel-w)); }
}
body.panel-off .paneltoggle__ico { transform: rotate(180deg); }

@media (max-width: 899px) {
  /* Na mobilu je panel spodní přehoz a má vlastní přepínač. */
  .paneltoggle { display: none; }
}

/* ==========================================================================
   Prohlížeč fotek — galerie v detailu je klikatelná a ukáže úplně všechny
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 13, 30, .92);
}
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: min(1200px, calc(100vw - 140px));
  max-height: calc(100vh - 140px);
  border-radius: 12px;
  object-fit: contain;
}

.lightbox__zavrit,
.lightbox__sip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 20px;
  line-height: 1;
  color: #fff;
  transition: background-color var(--hover-t);
}
.lightbox__zavrit:hover,
.lightbox__sip:hover { background: rgba(255, 255, 255, .3); }

/* ⚠️ `display: flex` výše přebíjí atribut [hidden] — bez tohohle by šipky
   svítily i u jediné fotky, přestože je JS schová. */
.lightbox__sip[hidden] { display: none; }

.lightbox__zavrit { top: 20px; right: 20px; }
.lightbox__sip--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__sip--next { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox__pocet {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* dlaždice galerie jsou tlačítka */
.galerie__hlavni,
.galerie__mala {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.galerie img { transition: transform var(--hover-t); }
.galerie button:hover img { transform: scale(1.02); }

@media (max-width: 899px) {
  .lightbox__img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 120px); }
  .lightbox__sip--prev { left: 8px; }
  .lightbox__sip--next { right: 8px; }
}

/* ==========================================================================
   Všechny fotky v mřížce — kopie .mrizka z detailu bytu na webu
   (site.css), aby prohlížení fotek vypadalo všude stejně.
   Vrství se mezi detail (2100) a prohlížeč jedné fotky (2300).
   ========================================================================== */

.mrizka {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: var(--primary-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mrizka[hidden] { display: none; }

.mrizka__hlava {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--primary-soft);
}
.mrizka__nazev { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink); }

.mrizka__prepnout {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: border-color var(--hover-t), color var(--hover-t);
}
.mrizka__prepnout:hover { border-color: var(--primary); color: var(--primary); }
/* ⚠️ `display: inline-flex` výše přebíjí [hidden] — bez tohohle by přepínač
   svítil i u jediné fotky (stejná past jako u šipek prohlížeče). */
.mrizka__prepnout[hidden] { display: none; }

/* U jediné fotky není kam klikat, ať kurzor neslibuje akci. */
.mrizka.je-jedna .mrizka__grid button { cursor: default; }
.mrizka.je-jedna .mrizka__grid button:hover img { transform: none; }
.mrizka__ikona { width: 16px; height: 16px; color: var(--primary); }
.mrizka__ikona--mrizka,
.mrizka.is-sloupec .mrizka__ikona--sloupec { display: none; }
.mrizka.is-sloupec .mrizka__ikona--mrizka { display: block; }

.mrizka__zavrit {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  transition: border-color var(--hover-t), color var(--hover-t);
}
.mrizka__zavrit:hover { border-color: var(--primary); color: var(--primary); }

.mrizka__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 10px 48px;
}
.mrizka__grid button {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--photo-bg);
  cursor: pointer;
}
.mrizka__grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform var(--hover-t);
}
.mrizka__grid button:hover img { transform: scale(1.03); }

.mrizka.je-jedna .mrizka__grid { grid-template-columns: 1fr; }
.mrizka.je-jedna .mrizka__grid img { aspect-ratio: 16 / 10; }
.mrizka.is-sloupec .mrizka__grid { grid-template-columns: 1fr; }
.mrizka.is-sloupec .mrizka__grid img { aspect-ratio: 16 / 10; }

@media (max-width: 899px) {
  .mrizka__prepnout span { display: none; }
  .mrizka__prepnout { padding: 9px 11px; }
}

/* Vybavení pokoje — ikonové štítky jako v původní mapě (app.js: .room-tag). */
.room-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.room-tag {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--muted);
  cursor: help;
  transition: border-color var(--hover-t), color var(--hover-t);
}
.room-tag:hover { border-color: var(--primary); color: var(--primary); }
.room-tag svg { width: 14px; height: 14px; display: block; }

/* Fotka pokoje, ze které se do přehledu přišlo — ať je hned jasné, která to je. */
.mrizka__grid button.je-vybrana {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}