/* ==================================================================
   CLARITY — светла изчистена тема
   Зарежда се СЛЕД theme.css, затова тук стоят само промените.

   ТИПОГРАФИЯТА се сменя от един блок — виж --font-sans / --font-head
   по-долу. Сменяш двата реда и целият сайт сменя характера си.
================================================================== */

/* ---------- 1. ТИПОГРАФИЯ (единственото място за смяна) ---------- */
:root {
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* тежести на заглавията — по-леки числа = по-елегантно, по-тежки = по-силно */
  --weight-head: 700;
  --weight-body: 400;

  /* мащаб на шрифта — всички размери тръгват оттук */
  --fs-base: 16px;
  --tracking-head: -0.02em;
}

/* ---------- 2. ПАЛИТРА ---------- */
:root {
  --ink: #101820;          /* основен текст */
  --ink-2: #44525c;        /* второстепенен текст */
  --ink-3: #8795a0;        /* дребен текст, етикети */

  --paper: #ffffff;        /* фон на страницата */
  --paper-2: #f7f8f9;      /* леко отделена зона */
  --line: #e6eaed;         /* хоризонтални линии */

  /* акцент - бутони, връзки, активно състояние.
     Ако сайтът има свой бранд цвят в files/custom.css (--brand-accent),
     темата го поема автоматично; иначе остава топлата мед. */
  --accent: var(--brand-accent, #c8743c);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #ffffff);
  --accent-dark: color-mix(in srgb, var(--accent) 82%, #000000);

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 12px 32px -20px rgba(16, 24, 32, .45);

  --header-h: 72px;
}

/* ---------- 3. ОСНОВА ---------- */
html {
  font-size: var(--fs-base);
}
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  letter-spacing: var(--tracking-head);
  color: var(--ink);
  line-height: 1.15;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
hr {
  border-color: var(--line);
  opacity: 1;
}

/* бутоните на темата — спокойни, без градиенти */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .62rem 1.15rem;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--accent-ink);
}
.btn-outline-primary {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ==================================================================
   ХЕДЪР
   Два реда на широк екран: служебен ред (контакти, валута, езици)
   и основен ред (лого, меню, двата бутона). На телефон - един ред
   плюс чекмедже отстрани.
================================================================== */
.ct-header {
  position: relative;
  z-index: 1030;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* --- служебен ред --- */
.ct-topbar {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-size: .82rem;
}
.ct-topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
  flex-wrap: wrap;
}
.ct-topbar a {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ct-topbar a:hover {
  color: var(--accent);
  text-decoration: none;
}
.ct-topbar .material-icons,
.ct-topbar .material-icons-outlined {
  font-size: 17px;
}
.ct-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* месинджъри */
.ct-msg {
  display: inline-flex;
  gap: 6px;
}
.ct-msg a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
}
.ct-msg a:hover {
  color: #fff;
  border-color: transparent;
}
.ct-msg a.is-viber:hover    { background: #7360f2; }
.ct-msg a.is-whatsapp:hover { background: #25d366; }
.ct-msg a.is-telegram:hover { background: #2aabee; }

/* валута */
.ct-cur .btn {
  padding: .25rem .6rem;
  font-size: .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-2);
  background: #fff;
}

/* ЕЗИЦИ — винаги видими, всичките четири, не в падащо меню */
.ct-langs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: transparent;
  border: 0;
  border-radius: 999px;
}
.ct-langs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.ct-langs a img {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.ct-langs a:hover {
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}
.ct-langs a.is-active {
  background: var(--ink);
  color: #fff;
}

/* --- основен ред --- */
.ct-mainbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-h);
}
.ct-logo img {
  max-height: 46px;
  width: auto;
  display: block;
}
.ct-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 22px;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
/* Отстоянието е по 11, а не по 13: при единадесет точки разликата е
   над 40 пиксела и точно тя решаваше дали менюто се събира на един ред
   на немски и руски. */
.ct-nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.ct-nav > li > a:hover {
  background: var(--paper-2);
  text-decoration: none;
}
.ct-nav > li > a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
.ct-nav .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  min-width: 220px;
}
.ct-nav .dropdown-item {
  border-radius: 7px;
  padding: 8px 12px;
  font-size: .9rem;
  color: var(--ink-2);
}
.ct-nav .dropdown-item:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* двата бутона — оценка на имот и добави имот */
.ct-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ct-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .88rem;
  padding: .55rem 1rem;
  white-space: nowrap;
}
.ct-cta .material-icons {
  font-size: 18px;
}

/* бутон за мобилното меню */
.ct-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  margin-left: auto;
}
.ct-phone-mobile {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}

/* ==================================================================
   МОБИЛНА ВЕРСИЯ
   Чекмедже отдясно: езици най-горе (за да се виждат веднага),
   после менюто, после двата бутона и контактите.
================================================================== */
@media (max-width: 991.98px) {
  .ct-topbar { display: none; }
  .ct-burger,
  .ct-phone-mobile { display: inline-flex; }
  .ct-mainbar-inner { gap: 10px; min-height: 62px; }
  .ct-logo img { max-height: 38px; }
  .ct-cta { display: none; }
}

.ct-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 88vw);
  background: var(--paper);
  z-index: 1060;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px -30px rgba(16, 24, 32, .6);
}
.ct-drawer.is-open { transform: translateX(0); }
.ct-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 32, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s, visibility .26s;
  z-index: 1055;
}
.ct-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.ct-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.ct-drawer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ct-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px 24px;
}
.ct-drawer-body .ct-langs {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ct-drawer-body .ct-langs a {
  flex: 1 1 0;
  justify-content: center;
  padding: 8px 6px;
}

/* менюто в чекмеджето — едри редове, удобни за палец */
.ct-drawer-nav {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.ct-drawer-nav > li + li {
  border-top: 1px solid var(--line);
}
.ct-drawer-nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 6px 2px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}
.ct-drawer-nav > li > a:hover { text-decoration: none; }
.ct-drawer-nav .ct-sub {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 14px;
}
.ct-drawer-nav .ct-sub a {
  display: block;
  padding: 9px 0;
  font-size: .94rem;
  color: var(--ink-2);
}
.ct-drawer-cta {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}
.ct-drawer-cta .btn {
  justify-content: center;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ct-drawer-contacts {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ct-drawer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-2);
  font-size: .94rem;
}

/* ==================================================================
   ФУТЪР — пространен и полезен, не само копирайт
================================================================== */
/* ==================================================================
   ФУТЪР

   Плътното тъмно каре изглеждаше като изключен екран. Сега има три
   слоя един върху друг:
     - меко петно в акцентния цвят горе вляво, откъдето "идва" светлина;
     - второ, по-студено петно долу вдясно, за да не е симетрично;
     - наклон от почти черно към тъмносиньо, който дава дълбочина.

   Отгоре минава тънка светла черта - ръбът, който отделя футъра от
   страницата и дава усещане за качество, без да се набива на очи.
================================================================== */
.ct-footer {
  position: relative;
  margin-top: 64px;
  color: #c7d0d7;
  background:
    radial-gradient(900px 420px at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 62%),
    radial-gradient(760px 380px at 88% 100%, rgba(56, 128, 255, .16) 0%, transparent 60%),
    linear-gradient(165deg, #0d1419 0%, #111c24 48%, #0a1016 100%);

  /* overflow: hidden държи зърнистата текстура и светлата черта вътре
     в заобления ръб.

     ВНИМАНИЕ: body е вертикален flex контейнер (theme.css). По
     спецификацията на flexbox елемент с overflow различен от visible
     губи автоматичния си минимален размер - става свиваем до нула.
     main е flex-shrink: 0, затова цялото препълване се изливаше във
     футъра и той се свиваше до височина 0, тоест изчезваше.

     flex-shrink: 0 му връща нормалната височина. Не го махай. */
  overflow: hidden;
  flex-shrink: 0;
}

/* светлата черта отгоре */
.ct-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 70%, transparent) 22%,
    rgba(255, 255, 255, .38) 50%,
    rgba(56, 128, 255, .5) 78%,
    transparent 100%);
}

/* едва доловима зърнистост - маха усещането за плосък цвят */
.ct-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* съдържанието стои над слоевете */
.ct-footer > * { position: relative; z-index: 1; }

/* браузър без color-mix показва наклона, но без цветните петна -
   затова има и резервен плътен фон */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ct-footer { background: linear-gradient(165deg, #0d1419 0%, #111c24 48%, #0a1016 100%); }
}
.ct-footer a {
  color: #c7d0d7;
}
.ct-footer a:hover {
  color: #fff;
  text-decoration: none;
}
.ct-footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 54px 0 42px;
}
.ct-footer h5 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.ct-footer-logo img {
  max-height: 44px;
  margin-bottom: 16px;
}
.ct-footer-about {
  font-size: .92rem;
  line-height: 1.65;
  color: #9fadb7;
  margin-bottom: 18px;
}
.ct-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ct-footer-list li + li { margin-top: 9px; }
.ct-footer-list a { font-size: .93rem; }

.ct-footer-contact {
  display: grid;
  gap: 11px;
}
.ct-footer-contact a,
.ct-footer-contact span {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .93rem;
  color: #c7d0d7;
}
.ct-footer-contact .material-icons,
.ct-footer-contact .material-icons-outlined {
  font-size: 18px;
  color: var(--accent);
  flex: 0 0 auto;
  margin-top: 1px;
}

.ct-footer-social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.ct-footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 15px;
}
.ct-footer-social a:hover { background: var(--accent); }

.ct-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 18px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: .85rem;
  color: #8a99a4;
}

@media (max-width: 991.98px) {
  .ct-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 0 32px;
  }
}
@media (max-width: 575.98px) {
  .ct-footer-main { grid-template-columns: 1fr; }
}

/* ==================================================================
   ПОПРАВКИ НА ПРЕЛИВАНЕ
   1) Чекмеджето стои извън екрана с translateX, но продължава да
      разширява страницата надясно - оттам идваше хоризонталният скрол.
   2) При по-тесен десктоп логото + менюто + двата бутона не се побират
      на един ред. Вместо да се чупи редът, бутоните стават само иконки
      и запазват и двете действия видими.
================================================================== */
/* ВАЖНО: clip, а не hidden. При hidden и на html, и на body браузърът
   прави body скрол-контейнер и window.scrollTop() е винаги 0 - това
   спира броячите, [data-animate] и бутона "нагоре" от custom.js. */
html,
body {
  overflow-x: clip;
}

/* ВАЖНО: без overflow:hidden тук - то реже падащото подменю.
   Хоризонталният скрол е спрян с overflow-x:clip на html/body по-горе.
   Без nowrap: при много точки менюто минава на втори ред, вместо да се реже. */
.ct-nav {
  min-width: 0;
}

/* На по-тесен десктоп от служебния ред отпадат по ред на важност:
   адрес (вече скрит), после имейл, после надписите на двата бутона. */
@media (max-width: 1399.98px) {
  .ct-topbar .ct-email { display: none; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ct-cta .btn span:not(.material-icons) { display: none; }
  .ct-cta .btn { padding: .3rem .55rem; }
}

/* ==================================================================
   НАЧАЛНА СТРАНИЦА
================================================================== */

/* общи елементи на секциите */
.ct-section {
  padding: 56px 0;
}
.ct-section + .ct-section {
  padding-top: 8px;
}
.ct-eyebrow {
  margin: 0 0 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ct-eyebrow--light {
  color: rgba(255, 255, 255, .78);
}
.ct-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.ct-section-head--center {
  justify-content: center;
  text-align: center;
}
.ct-section-head--center .ct-section-lead {
  margin-left: auto;
  margin-right: auto;
}
.ct-section-title {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.ct-section-title a .material-icons {
  font-size: 18px;
  vertical-align: middle;
  color: var(--ink-3);
}
.ct-section-lead {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 1.02rem;
}
.ct-section-lead p:last-child { margin-bottom: 0; }

.ct-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, gap .15s;
}
.ct-more .material-icons { font-size: 18px; }
.ct-more:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  text-decoration: none;
  gap: 10px;
}
.ct-more--inline {
  padding: 0;
  border: 0;
  color: var(--accent);
}
.ct-more--inline:hover { background: none; color: var(--ink); }

/* ---------- ГЕРОЙ ---------- */
/* ==================================================================
   СЛАЙДЪР НА НАЧАЛНАТА СТРАНИЦА

   Кадрите стоят един върху друг и се сменят с претопяване. Активният
   е единственият видим и единственият, който приема кликове.

   Височината е свалена: при предишната (до 820 px) първият екран се
   изяждаше почти изцяло от снимка и под нея не оставаше нищо за
   четене. Сега слайдърът е по-тънък и търсачката под него се вижда
   веднага.
================================================================== */
.ct-hero {
  position: relative;
  min-height: clamp(320px, 46vh, 520px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* --- кадрите --- */
.ct-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  pointer-events: none;
}
/* Всички кадри стоят абсолютно, един върху друг. Височината идва от
   min-height на секцията - ако активният кадър стане relative, снимката
   му се свива до размера на текста и фонът остава празен. */
.ct-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ct-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
/* бавното приближаване върви само на видимия кадър */
.ct-hero-slide.is-active .ct-hero-img {
  animation: ctHeroZoom 14s ease-out forwards;
}
@keyframes ctHeroZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.11); }
}

.ct-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 16, 20, .88) 0%, rgba(10, 16, 20, .45) 38%, rgba(10, 16, 20, .12) 70%, rgba(10, 16, 20, .25) 100%),
    linear-gradient(to right, rgba(10, 16, 20, .35), transparent 60%);
}
/* Търсачката се качва върху долния ръб на героя (margin-top: -110px),
   затова текстът трябва да свършва над нея - иначе заглавието влиза под
   бялата карта. */
.ct-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 70px;
  padding-bottom: 152px;
}
.ct-hero-copy { max-width: 760px; }

/* текстът влиза след снимката, за да личи, че кадърът се е сменил */
.ct-hero-slide.is-active .ct-hero-copy > * {
  animation: ctHeroCopy .7s cubic-bezier(.16, 1, .3, 1) backwards;
}
.ct-hero-slide.is-active .ct-hero-copy > *:nth-child(2) { animation-delay: .08s; }
.ct-hero-slide.is-active .ct-hero-copy > *:nth-child(3) { animation-delay: .16s; }
@keyframes ctHeroCopy {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.ct-hero-title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  font-family: var(--font-head);
}

/* --- точки и стрелки ---

   Миниатюрите заемаха широка ивица точно там, където се качва бялата
   карта на търсачката. Точките казват същото (колко кадъра има и кой
   се гледа) на една десета от мястото. Стрелките са за хора, които
   предпочитат да листят, а не да се целят в точка. */
.ct-hero-dots-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: 152px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.ct-hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.ct-hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background .2s, width .25s cubic-bezier(.16, 1, .3, 1);
}
.ct-hero-dot:hover { background: rgba(255, 255, 255, .8); }
/* активната се разтяга в чертичка - вижда се и с периферно зрение */
.ct-hero-dot.is-active {
  width: 30px;
  background: #fff;
}

.ct-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(10, 16, 20, .3);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, background .2s, border-color .2s;
}
/* стрелките се появяват при посочване - иначе стоят върху снимката
   през цялото време и я затварят */
.ct-hero:hover .ct-hero-arrow,
.ct-hero-arrow:focus-visible { opacity: 1; }
.ct-hero-arrow:hover { background: rgba(10, 16, 20, .6); border-color: #fff; }
.ct-hero-arrow .material-icons { font-size: 26px; }
.ct-hero-arrow--prev { left: 18px; }
.ct-hero-arrow--next { right: 18px; }

@media (max-width: 767.98px) {
  /* на телефон точките се центрират, а стрелките отпадат - там се
     плъзга с пръст.

     Внимание: височината и отстоянията на .ct-hero-inner се задават в
     блока @media (max-width: 991.98px) по-долу. Той е след този и при
     еднаква тежест печели - не слагай тук padding или min-height,
     защото няма да подействат. */
  .ct-hero-dots-wrap { bottom: 118px; justify-content: center; }
  .ct-hero-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* без движение: без приближаване и без влизане на текста */
  .ct-hero-slide.is-active .ct-hero-img,
  .ct-hero-slide.is-active .ct-hero-copy > * { animation: none; }
  .ct-hero-slide { transition: none; }
}

/* ---------- ТЪРСАЧКА: плаваща карта върху долния ръб на героя ---------- */
.ct-search {
  position: relative;
  z-index: 5;
  padding: 0 0 24px;
}
.ct-search--overlap {
  margin-top: -110px;
}
.ct-search-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 30px 60px -30px rgba(16, 24, 32, .5);
  padding: 10px 14px 14px;
}
/* самият блок от основната тема, преоформен */
.ct-search-card form.form-group {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
  max-width: none;
  padding: 0;
}
.ct-search-card form .sHolderTitle {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px 2px;
}
.ct-search-card .btn-outline-secondary.dropdown-toggle,
.ct-search-card .form-control {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ct-search-card .btn-outline-secondary.dropdown-toggle:hover,
.ct-search-card .form-control:focus {
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 24, 32, .06);
  color: var(--ink);
}
.ct-search-card .dropdown-toggle::after {
  margin-left: auto;
  opacity: .5;
}
/* падащите списъци са със simplebar - абсолютно позициониран, без изрична
   ширина менюто се свива до 160px и текстът се реже; затова = ширината на бутона */
.ct-search-card .btn-group .dropdown-menu {
  width: 100%;
  min-width: 260px;
}
.ct-search-card .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  max-height: 320px;
}
.ct-search-card .dropdown-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .92rem;
}
.ct-search-card .dropdown-item:hover,
.ct-search-card .dropdown-item.active {
  background: var(--accent-soft);
  color: var(--ink);
}
.ct-search-card .dyn_search_input {
  width: 100% !important;
  height: 38px;
  padding: 6px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  margin: 0 0 6px !important;
  font-size: .9rem;
}
.ct-search-card .form__submit {
  height: 48px;
  border-radius: 12px !important;
  padding: 0 22px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.ct-search-card .adv_search_btn_holder {
  padding-top: 4px;
}
.ct-search-card .adv_search_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
}
.ct-search-card .adv_search_btn:hover { color: var(--accent); text-decoration: none; }

/* ---------- РЕДАКЦИОННО ВЪВЕДЕНИЕ ---------- */
.ct-intro-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.ct-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 22px;
  background: var(--accent);
  border-radius: 2px;
}
.ct-intro-title {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.ct-intro-text {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-2);
}
.ct-intro-text p:last-child { margin-bottom: 0; }

/* ---------- КАРТИЧКИ НА ИМОТИ (блокът EstatesBoxCircle, преоформен) ---------- */
.ct-ads-grid .ebc-card,
.ct-ads-carousel .ebc-card {
  border-radius: var(--radius-lg);
  box-shadow: none;
  border: 1px solid var(--line);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .25s;
}
.ct-ads-grid .ebc-card:hover,
.ct-ads-carousel .ebc-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 28px 48px -26px rgba(16, 24, 32, .45);
}
.ct-ads-grid .ebc-img-wrap { height: 240px; }
.ct-ads-grid .ebc-ribbon {
  top: 14px;
  left: 14px;
  border-radius: 999px;
  padding: 5px 11px;
  box-shadow: none;
  font-size: .68rem;
}
.ct-ads-grid .ebc-action-btn { background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.ct-ads-grid .ebc-action-btn:hover,
.ct-ads-grid .ebc-action-btn.is-active { background: var(--accent); }
.ct-ads-grid .ebc-photos { border-radius: 999px; background: rgba(16, 24, 32, .72); backdrop-filter: blur(6px); }
.ct-ads-grid .ebc-body { padding: 18px 20px 20px; }
.ct-ads-grid .ebc-price { font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); }
.ct-ads-grid .ebc-price small,
.ct-ads-grid .ebc-price .ebc-price-m2 { color: var(--ink-3); font-weight: 500; }
.ct-ads-grid .ebc-title { font-size: 1rem; }
.ct-ads-grid .ebc-title a:hover { color: var(--accent); }
.ct-ads-grid .ebc-location { color: var(--ink-3); }
.ct-ads-grid .ebc-location .material-icons-outlined,
.ct-ads-grid .ebc-facts .material-icons-outlined { color: var(--accent); }
.ct-ads-grid .ebc-facts { color: var(--ink-2); font-size: .86rem; }
.ct-ads-grid .ebc-divider { border-top-color: var(--line); }
.ct-ads-grid .ebc-btn {
  background: var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: .84rem;
}
.ct-ads-grid .ebc-btn:hover { background: var(--accent); }

/* ---------- БАНЕР ----------

   Беше плосък черен правоъгълник. Сега има два вида:

   1) без качена снимка - дълбок градиент с топло и студено петно,
      тънка светла черта отгоре и едва доловима зърнистост. Същият
      почерк като футъра, за да личи, че са от един сайт.

   2) със снимка - служебната снимка backgcta ляга като фон, а отгоре
      пада затъмняваща завеса, за да се чете текстът. Същото решение
      като лентата с броячите (.ct-counters--photo).

   Изрезката вдясно (picture1 по страницата) остава и в двата случая -
   тя е прозрачен PNG и стои добре върху снимка.
*/
.ct-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 32px;
  color: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0 0 0 56px;
  background:
    radial-gradient(820px 420px at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 62%),
    radial-gradient(700px 400px at 95% 110%, rgba(56, 128, 255, .18) 0%, transparent 58%),
    linear-gradient(145deg, #0e161c 0%, #13202a 52%, #0b1218 100%);
  box-shadow: 0 24px 60px -34px rgba(8, 16, 22, .7);
}

/* светлата черта отгоре - същата като на футъра */
.ct-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 70%, transparent) 20%,
    rgba(255, 255, 255, .4) 50%,
    rgba(56, 128, 255, .5) 80%,
    transparent 100%);
}

/* зърнистост - маха усещането за плосък цвят */
.ct-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .3;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* съдържанието стои над слоевете */
.ct-banner > * { position: relative; z-index: 2; }

/* --- вариант със снимка --- */
.ct-banner--photo {
  background-size: cover;
  background-position: center;
}
/* Завесата е на ::after, защото ::before е светлата черта. Тук
   зърнистостта отпада - снимката вече си има своя. */
.ct-banner--photo::after {
  opacity: 1;
  background-image: none;
  background:
    linear-gradient(100deg, rgba(8, 14, 19, .9) 0%, rgba(8, 14, 19, .72) 46%, rgba(8, 14, 19, .34) 100%),
    radial-gradient(640px 360px at 6% 6%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 62%);
}

/* браузър без color-mix: без цветните петна, но фонът си остава дълбок */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ct-banner { background: linear-gradient(145deg, #0e161c 0%, #13202a 52%, #0b1218 100%); }
}
.ct-banner-copy { padding: 48px 0; }
.ct-banner-title {
  color: #fff;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.ct-banner-text { color: rgba(255, 255, 255, .78); font-size: 1.02rem; margin-bottom: 24px; }
.ct-banner-text p:last-child { margin-bottom: 0; }
.ct-banner-btn { display: inline-flex; align-items: center; gap: 8px; }
.ct-banner-btn .material-icons { font-size: 18px; }
/* Изрезката вдясно.

   Беше width/height 100% + object-fit: cover. При изправена снимка
   (тази тук е 450x709) изображението теглеше целия блок на 817px
   височина - текстът стоеше в горната трета, а отдолу зееше празно.

   Сега височината я определя текстът, а снимката се вписва в нея и
   стъпва на долния ръб. object-fit: contain, защото картинката е
   прозрачна изрезка - cover би я отрязал. */
.ct-banner-media {
  align-self: end;
  display: flex;
  justify-content: flex-end;
  max-height: 340px;
  height: 100%;
}
.ct-banner-media img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  display: block;
}

/* ---------- БРОЯЧИ ---------- */
.ct-counters {
  margin: 24px 0;
  padding: 64px 0;
  background: var(--ink);
  color: #fff;
}
.ct-counters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ct-counter {
  text-align: left;
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.ct-counter .icon { font-size: 26px; color: var(--accent); display: block; margin-bottom: 14px; }
.ct-counter-num {
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.ct-counter-name {
  margin-top: 10px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}

/* ---------- GOOGLE РЕЙТИНГ ---------- */
.ct-rating {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  padding: 40px 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.ct-rating-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.025em; margin-bottom: 10px; }
.ct-rating-text { color: var(--ink-2); margin-bottom: 20px; }
.ct-rating-btn { display: inline-flex; align-items: center; gap: 8px; }
.ct-rating-btn .material-icons { font-size: 18px; }
.ct-rating-badge img { max-width: 240px; display: block; }

/* ---------- ПЛОЧКИ ГРАДОВЕ ---------- */
.ct-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.ct-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ct-tile:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.ct-tile-count { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent); line-height: 1; }
.ct-tile-name { font-size: 1.08rem; font-weight: 700; margin-top: 6px; }
.ct-tile-sub { font-size: .82rem; color: var(--ink-3); }
.ct-tile-arrow { position: absolute; right: 20px; top: 22px; color: var(--ink-3); transition: transform .2s, color .2s; }
.ct-tile:hover .ct-tile-arrow { transform: translateX(4px); color: var(--accent); }

/* ---------- УСЛУГИ ---------- */
.ct-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ct-service {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-service-img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 8px; }
.ct-service-title { font-size: 1.15rem; margin: 0; }
.ct-service-text { color: var(--ink-2); font-size: .95rem; margin: 0; flex: 1 1 auto; }

/* ---------- ОТЗИВИ ---------- */
.ct-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ct-quote {
  margin: 0;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ct-quote-stars { display: flex; gap: 2px; color: #f0b429; }
.ct-quote-stars .material-icons { font-size: 18px; }
.ct-quote-text { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.ct-quote-more { margin: 0; color: var(--ink-2); font-size: .94rem; flex: 1 1 auto; }
.ct-quote-who { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ct-quote-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ct-quote-who strong { display: block; font-size: .92rem; }
.ct-quote-who small { display: block; color: var(--ink-3); }

/* ---------- НОВИНИ ---------- */
.ct-news-grid .card { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: none; transition: transform .2s, box-shadow .2s; }
.ct-news-grid .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ct-news-grid .card-title a { color: var(--ink); }
.ct-news-grid .card-title a:hover { color: var(--accent); text-decoration: none; }
.news-cat-link { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: .9rem; font-weight: 500; line-height: 1.3; transition: border-color .15s, color .15s, background-color .15s; }
.news-cat-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.news-cat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-cat-link.is-active { color: #fff; }
.news-cat-label { display: inline-block; margin-bottom: 6px; color: var(--accent); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.news-cat-label:hover { text-decoration: underline; }
.news-cat-empty { margin: 8px 0 48px; color: var(--ink-2); }

/* ---------- БРОКЕРИ ---------- */
.ct-brokers .card { border: 1px solid var(--line) !important; border-radius: var(--radius-lg); box-shadow: none !important; transition: transform .2s, box-shadow .2s; }
.ct-brokers .card:hover { transform: translateY(-4px); box-shadow: var(--shadow) !important; }
.ct-brokers .broker-image { aspect-ratio: 1 / 1; object-fit: cover; }
.ct-brokers .broker-sidebar-name { color: var(--ink); }

/* ---------- БЪРЗИ БУТОНИ (модул quick_buttons) - веднага след търсачката ---------- */
.ct-qb { padding: 18px 0 4px; }
.ct-qb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ct-qb-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.ct-qb-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); transition: background .18s ease, color .18s ease;
}
.ct-qb-ico .material-icons-outlined { font-size: 20px; }
.ct-qb-btn:hover, .ct-qb-btn:focus-visible { border-color: var(--accent); color: var(--accent-dark); box-shadow: var(--shadow); transform: translateY(-2px); outline: none; }
/* общото правило a:hover подчертава текста - тук не */
.ct-qb-btn, .ct-qb-btn:hover, .ct-qb-btn:focus, .ct-qb-btn:focus-visible, .ct-qb-btn .ct-qb-txt { text-decoration: none !important; }
.ct-qb-btn:hover .ct-qb-ico, .ct-qb-btn:focus-visible .ct-qb-ico { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 767.98px) {
  .ct-qb { padding-top: 14px; }
  .ct-qb-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 16px 10px; margin: 0 -16px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .ct-qb-row::-webkit-scrollbar { display: none; }
  .ct-qb-btn { flex: 0 0 auto; scroll-snap-align: start; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .ct-qb-btn, .ct-qb-ico { transition: none; } .ct-qb-btn:hover { transform: none; } }

/* Същите бутони в страничната лента: цяла ширина, един под друг, леко заоблени */
.ct-qb-side-btn.ct-qb-side-btn {
  gap: 12px; width: 100%; padding: 9px 10px 9px 9px !important; margin-bottom: 8px !important;
  border-color: var(--line) !important; border-radius: 8px !important; background: var(--paper);
  color: var(--ink); font-weight: 600; font-size: .94rem; line-height: 1.25; text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05); transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.ct-qb-side-ico {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); transition: background .18s ease, color .18s ease;
}
.ct-qb-side-ico .material-icons-outlined { font-size: 21px; }
.ct-qb-side-txt { flex: 1 1 auto; min-width: 0; text-decoration: none !important; }
.ct-qb-side-arrow.material-icons { flex: 0 0 auto; font-size: 20px; color: var(--accent); opacity: .55; transition: opacity .18s ease, transform .18s ease; }
.ct-qb-side-btn:hover, .ct-qb-side-btn:focus-visible { border-color: var(--accent) !important; color: var(--accent-dark); box-shadow: var(--shadow); outline: none; }
.ct-qb-side-btn:hover .ct-qb-side-ico, .ct-qb-side-btn:focus-visible .ct-qb-side-ico { background: var(--accent); color: var(--accent-ink); }
.ct-qb-side-btn:hover .ct-qb-side-arrow, .ct-qb-side-btn:focus-visible .ct-qb-side-arrow { opacity: 1; transform: translateX(3px); }
.ct-qb-side-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ct-qb-side-btn, .ct-qb-side-ico, .ct-qb-side-arrow { transition: none; } .ct-qb-side-btn:hover .ct-qb-side-arrow { transform: none; } }

.ct-qb-active { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: .9rem; }
.ct-qb-active .material-icons-outlined { font-size: 18px; }
.ct-qb-active a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: inherit; text-decoration: none; }
.ct-qb-active a:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- ПАРТНЬОРИ - безкраен карусел с логата ---------- */
.ct-partners-marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ct-partners-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: ctPartners var(--pt-dur, 30s) linear infinite;
}
.ct-partners-marquee:hover .ct-partners-track,
.ct-partners-marquee:focus-within .ct-partners-track { animation-play-state: paused; }
@keyframes ctPartners { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.ct-partner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 104px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ct-partner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s, opacity .25s;
}
.ct-partner:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.ct-partner:hover img, .ct-partner:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 575.98px) { .ct-partner { width: 150px; height: 86px; } }
@media (prefers-reduced-motion: reduce) {
  .ct-partners-track { animation: none; }
  .ct-partners-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- ГОЛЯМА СНИМКА (основният блок, омекотен) ---------- */
.ct-bigpic #big_picture_and_content { padding: 32px 0 !important; }
.ct-bigpic section.bg-light { background: var(--paper-2) !important; border-radius: var(--radius-lg); overflow: hidden; }
.ct-bigpic h3.display-5 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.025em; }

/* ---------- МОБИЛНО ---------- */
@media (max-width: 991.98px) {
  .ct-section { padding: 40px 0; }
  /* таблет: 70vh изяждаше почти целия екран - търсачката оставаше под ръба */
  .ct-hero { min-height: clamp(340px, 42vh, 440px); }
  /* 152, а не 120: долните 34px са ивицата, в която стоят точките на
     слайдъра. На тясно заглавието е на два реда и заема цялата ширина,
     затова трябва да свършва НАД тях, а не на тяхната височина. */
  .ct-hero-inner { padding-top: 56px; padding-bottom: 152px; }
  .ct-hero-thumbs-wrap { display: none; }
  .ct-search--overlap { margin-top: -80px; }
  .ct-search-card { padding: 8px 10px 12px; }
  .ct-banner { grid-template-columns: 1fr; padding: 0 28px; }
  .ct-banner-copy { padding: 36px 0; }
  .ct-banner-media { display: none; }
  .ct-counters-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .ct-rating { grid-template-columns: 1fr; padding: 32px 28px; }
  .ct-rating-badge img { max-width: 200px; }
  .ct-services, .ct-quotes { grid-template-columns: 1fr; }
  .ct-section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ct-section-head--center { align-items: center; }
}
@media (max-width: 575.98px) {
  .ct-hero { min-height: clamp(300px, 42vh, 370px); }
  .ct-hero-title { font-size: 2.2rem; }
  .ct-counters-grid { grid-template-columns: 1fr 1fr; }
  .ct-counter { padding-left: 14px; }
}

/* ---------- ТЪРСАЧКА: форматът на темата (два реда) ---------- */
/* theme.css дава .form-group{display:flex} - тук формата е на редове.
   По-висока специфичност вместо !important, за да може на телефон
   #filters-sidebar да се крие и custom.js (slideDown) да я показва. */
.ct-search-card form.ct-sform.form-group { display: block; padding: 14px 10px 6px; }
.ct-sform-row + .ct-sform-row { margin-top: 4px; }
.ct-sform .row.g-0 > .col { width: 100%; }
.ct-sform .form-control {
  padding: 0 14px;
  font-weight: 500;
}
.ct-sform .form-control::placeholder { color: var(--ink-3); font-weight: 400; }
.ct-sform .form__submit .material-icons-outlined { font-size: 20px; }
.ct-sform-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 4px 4px;
}
.ct-sform-foot .material-icons-outlined { font-size: 18px; }

/* ---------- ГОЛЯМА СНИМКА + СЪДЪРЖАНИЕ (версия на темата) ---------- */
.ct-bigpic-wrap { padding: 32px 0 64px; }
.ct-bigpic-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.ct-bigpic-media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.ct-bigpic-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 32, .06);
  border-radius: inherit;
}
.ct-bigpic-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-bigpic-body .ct-section-title { margin-bottom: 14px; }
.ct-bigpic-lead {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: 28px;
}
.ct-bigpic-lead p:last-child { margin: 0; }
.ct-bigpic-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}
.ct-bigpic-point {
  display: flex;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ct-bigpic-num {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ct-bigpic-num img { width: 28px; height: 28px; object-fit: contain; }
.ct-bigpic-num b {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ct-bigpic-point h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ct-bigpic-point p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.55; }

/* ---------- БРОКЕРИ (картички на темата) ---------- */
.ct-broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  justify-content: center;
  gap: 24px;
}
.ct-broker {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .25s;
}
.ct-broker:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .05), 0 28px 48px -26px rgba(16, 24, 32, .45);
}
.ct-broker-photo {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.ct-broker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.ct-broker:hover .ct-broker-photo img { transform: scale(1.04); }
.ct-broker-body { padding: 18px 20px 20px; text-align: center; }
.ct-broker-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  letter-spacing: -.01em;
}
.ct-broker-name:hover { color: var(--accent); text-decoration: none; }
.ct-broker-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.ct-broker-tel .material-icons { font-size: 16px; color: var(--accent); }
.ct-broker-tel:hover { color: var(--ink); text-decoration: none; }
.ct-broker-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.ct-broker-actions a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
  transition: background .15s, color .15s, border-color .15s;
}
.ct-broker-actions a .material-icons-outlined { font-size: 18px; }
.ct-broker-actions a:hover { background: var(--ink); border-color: var(--ink); color: #fff; text-decoration: none; }

@media (max-width: 991.98px) {
  .ct-bigpic-grid { grid-template-columns: 1fr; gap: 24px; }
  .ct-bigpic-media { aspect-ratio: 16 / 10; }
  .ct-bigpic-points { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 575.98px) {
  /* на телефон: по две полета на ред за "къде", три малки за кв.м/цена/реф. */
  .ct-sform-foot { justify-content: center; }
  .ct-broker-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   ПРЕГЛЕД НА ИМОТ
================================================================== */
.ct-crumbs {
  font-size: .82rem;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.ct-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ct-crumbs li + li::before { content: "/"; color: var(--ink-3); margin: 0 6px 0 2px; }
.ct-crumbs a { color: var(--ink-2); }
.ct-crumbs li:last-child a { color: var(--ink); pointer-events: none; }

.ct-ad { padding: 24px 12px 0; }

.ct-ad-sold {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--ink);
}
.ct-ad-sold .material-icons { color: var(--accent); }
.ct-ad-sold strong { display: block; }

/* заглавие + цена */
.ct-ad-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 20px;
}
.ct-ad-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .8rem; }
.ct-ad-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ct-ad-ref { color: var(--ink-3); }
.ct-ad-ref b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-ad-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  letter-spacing: -.025em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.ct-ad-title .material-icons { font-size: 18px; vertical-align: middle; color: var(--ink-3); }
.ct-ad-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--ink-2);
  font-size: .98rem;
}
.ct-ad-sub .material-icons-outlined { font-size: 18px; color: var(--accent); }
.ct-ad-head-price { text-align: right; flex: 0 0 auto; }
.ct-ad-price {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ct-ad-price small { font-size: .5em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.ct-ad-price-sub { margin-top: 6px; font-size: .85rem; color: var(--ink-3); display: flex; gap: 10px; justify-content: flex-end; }
.ct-ad-price-sub s { text-decoration-thickness: 1.5px; }
/* под особеностите - продължение на блока им, без собствена черта */
.ct-ad-tags.ct-ad-block { border-top: 0; padding-top: 0; margin: 0; }
.ct-ad-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-ad-tags li > span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 17px 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-2);
  font-size: 1rem; font-weight: 600; text-decoration: none !important; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.ct-ad-tags .material-icons-outlined { font-size: 21px; color: var(--accent); }
.ct-ad-discount { padding: 1px 8px; border-radius: 999px; background: #fdecec; color: #c62828; font-weight: 700; font-size: .78rem; line-height: 1.5; }

/* галерия - същият блок, по-меки ъгли */
.ct-ad-gallery { margin-bottom: 16px; }
.ct-ad-gallery .gallery-item { display: block; overflow: hidden; border-radius: 14px !important; background: var(--paper-2); }
.ct-ad-gallery .gallery-main-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-ad-gallery .gallery-item img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.ct-ad-gallery .gallery-item:hover img { transform: scale(1.03); }

.ct-ad-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  /* в акцентния цвят на сайта (скинът го сменя), не черно */
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-dark);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ct-ad-jump .material-icons { color: var(--accent); transition: color .15s ease, transform .2s ease; }
.ct-ad-jump:hover, .ct-ad-jump:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}
.ct-ad-jump:hover .material-icons, .ct-ad-jump:focus-visible .material-icons { color: var(--accent-ink); }
.ct-ad-jump:hover .ct-ad-jump-arr { transform: translateY(2px); }
.ct-ad-jump-arr { margin-left: auto; }

/* две колони */
.ct-ad-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
.ct-ad-block { padding: 28px 0; border-top: 1px solid var(--line); }
.ct-ad-block:first-child { border-top: 0; padding-top: 12px; }
.ct-ad-h2 { font-size: 1.25rem; margin: 0 0 18px; letter-spacing: -.015em; }

/* факти */
.ct-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ct-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.ct-facts .material-icons-outlined { color: var(--accent); font-size: 22px; flex: 0 0 auto; }
.ct-facts small { display: block; color: var(--ink-3); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.ct-facts b { display: block; font-size: .98rem; font-weight: 700; overflow-wrap: anywhere; }

/* особености */
.ct-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px 10px 13px;
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 1rem;
  font-weight: 500;
}
.ct-chips .material-icons { font-size: 19px; color: var(--accent); }

/* описание */
.ct-ad-text { font-size: 1.04rem; line-height: 1.75; color: var(--ink-2); }
.ct-ad-text h1, .ct-ad-text h2, .ct-ad-text h3, .ct-ad-text h4 { font-size: 1.2rem; margin: 1.2em 0 .5em; color: var(--ink); }
.ct-ad-text p { margin-bottom: 1em; }
.ct-ad-text img { max-width: 100%; height: auto; border-radius: var(--radius); }

.ct-ad-table .table { font-size: .92rem; }

/* ---------- "Още имоти от тази сграда" (modules/item_blocks/estateTables/EstateTable.html) ---------- */
.ct-units { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.ct-units__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ct-units__table thead th {
  padding: 12px 14px; background: var(--paper-2); color: var(--ink-3);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.ct-units__table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.ct-units__table tbody tr:last-child td { border-bottom: 0; }
.ct-units__row { cursor: pointer; transition: background-color .15s ease; }
.ct-units__row:hover { background: var(--accent-soft); }
.ct-units__row.is-current { background: color-mix(in srgb, var(--accent) 6%, var(--paper)); box-shadow: inset 3px 0 0 var(--accent); }
.ct-units__num { text-align: right !important; white-space: nowrap; }
.ct-units__nowrap { white-space: nowrap; }
.ct-units__ph { width: 76px; }
.ct-units__thumb { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--paper-2); }
.ct-units__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 24px; }
.ct-units__type a { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
.ct-units__row:hover .ct-units__type a { color: var(--accent-dark); }
.ct-units__type small { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 2px; }
.ct-units__na { color: var(--ink-3); opacity: .6; }
.ct-units__pill {
  --pill: var(--accent);
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--pill) 80%, #000); background: color-mix(in srgb, var(--pill) 14%, #fff);
}
.ct-units__price { color: var(--ink); font-weight: 700; font-size: 1rem; }
.ct-units__price small { font-weight: 500; color: var(--ink-3); font-size: .78rem; }
.ct-units__ask { font-weight: 500; font-size: .85rem; color: var(--ink-3); }
.ct-units__ppm { font-size: .85rem; }
.ct-units__go { width: 36px; color: var(--ink-3); padding-left: 0 !important; }
.ct-units__row:hover .ct-units__go { color: var(--accent); }

/* преглед на снимката при посочване - фиксиран, до 340px, не излиза от екрана */
.ct-units-preview {
  position: fixed; left: 0; top: 0; z-index: 1080; width: 340px; padding: 6px;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(16, 24, 40, .28);
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.ct-units-preview.is-on { opacity: 1; }
.ct-units-preview img { display: block; width: 100%; height: 230px; object-fit: cover; border-radius: 10px; background: var(--paper-2); }

/* телефон: всеки апартамент е карта.
   снимка | тип (на два реда) / цена / етаж + площ / изложение + цена на м² / статус */
@media (max-width: 767.98px) {
  .ct-units { border: 0; background: none; border-radius: 0; overflow: visible; }
  .ct-units__table, .ct-units__table tbody { display: block; }
  .ct-units__table thead { display: none; }
  .ct-units__row {
    display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-items: start;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
  }
  .ct-units__row:hover { background: var(--paper); border-color: var(--accent); }
  .ct-units__row.is-current { box-shadow: inset 3px 0 0 var(--accent); }
  .ct-units__table td { display: block; padding: 0; border: 0; text-align: left !important; }
  .ct-units__ph { grid-column: 1; grid-row: 1 / span 5; width: auto; }
  .ct-units__thumb { width: 88px; height: 88px; border-radius: 10px; }
  .ct-units__type { grid-column: 2 / span 2; }
  .ct-units__price { grid-column: 2 / span 2; margin: 2px 0 4px; }
  .ct-units__table td[data-label] { font-size: .82rem; line-height: 1.5; }
  .ct-units__table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); }
  .ct-units__status { grid-column: 2 / span 2; margin-top: 4px; }
  .ct-units__status::before { display: none; }
  .ct-units__go { display: none !important; }
  /* изложението и цената на м² са по-дълги - на цял ред, иначе се режат вдясно */
  .ct-units__table td.ct-units__exp, .ct-units__table td.ct-units__ppm { grid-column: 2 / span 2; white-space: normal; }
  /* в HTML-а цената е последна - тук трябва да е веднага под типа */
  .ct-units__type { order: 1; }
  .ct-units__price { order: 2; }
  .ct-units__table td[data-label] { order: 3; }
  .ct-units__table td.ct-units__status { order: 4; }
}
.ct-ad-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.ct-ad-map #map_canvas { width: 100%; height: 380px; }
.ct-ad-map #gmapDirectionBtn { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
/* OpenStreetMap вариант (templates/modules/item_blocks/map_osm.html + assets/js/osm_ad_map.js) */
.ct-ad-map--osm { overflow: visible; }
.ct-ad-map--osm #map_canvas { border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); z-index: 0; }
/* покана за оглед под картата - отделена от картата, нормална ширина */
.osm-ad-map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.osm-ad-visit { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; font-size: 1rem; font-weight: 600; white-space: normal; }
.osm-ad-visit .material-icons { font-size: 24px; flex: 0 0 auto; }
@media (max-width: 575.98px) { .osm-ad-visit { width: 100%; justify-content: center; } }
.osm-pin-wrap { background: none; border: 0; }
.osm-pin { display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.leaflet-container { font-family: var(--font-sans); }
.leaflet-container img.leaflet-tile, .leaflet-container img.leaflet-marker-icon { max-width: none !important; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md, 10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); }
.leaflet-popup-content { margin: 12px 16px; font-size: .9rem; line-height: 1.45; }
.leaflet-popup-content b { display: block; color: var(--ink); }
.osm-pop-sub { display: block; color: var(--accent); font-weight: 600; font-size: .8rem; margin-top: 2px; }
.osm-pop-note { display: block; color: var(--ink-3); font-size: .78rem; margin-top: 4px; }
.ct-ad-360 { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; }
.ct-ad-360 iframe { width: 100%; height: 100%; border: 0; }
.ct-ad-share h5, .ct-ad-share h6 { font-size: .85rem; color: var(--ink-3); font-weight: 500; }

/* странична колона */
.ct-ad-sticky { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 16px; }
.ct-ad-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; background: #fff; }
.ct-ad-cta { display: flex; flex-direction: column; gap: 10px; }
.ct-ad-price--card { margin-bottom: 8px; }
.ct-ad-cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .8rem 1rem; }
.ct-ad-cta .btn .material-icons, .ct-ad-cta .btn .material-icons-outlined { font-size: 19px; }
.ct-ad-print {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
  font-size: .86rem;
  color: var(--ink-3);
}
.ct-ad-print:hover { color: var(--ink); text-decoration: none; }
.ct-ad-print .material-icons-outlined { font-size: 18px; }

/* Стилът на малката картичка на брокера (.ct-ad-broker*) отпадна заедно
   с нея - данните са в голямата картичка до формата за запитване. */

.ct-ad-qr { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.ct-ad-qr img { border-radius: 8px; }
.ct-ad-qr small { color: var(--ink-2); font-size: .82rem; line-height: 1.4; }

/* запитване */
.ct-ad-inquiry { margin: 40px 0 8px; }
.ct-inq {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.ct-inq .form-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.ct-inq .form-control, .ct-inq .form-select { border-radius: 10px; border-color: var(--line); background: #fff; min-height: 46px; }
.ct-inq .form-control:focus, .ct-inq .form-select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16, 24, 32, .06); }
.ct-inq-ok { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: var(--radius); background: #e8f5e9; color: #1b5e20; font-weight: 600; }
.ct-inq .parsley-errors-list { list-style: none; padding: 0; margin: 4px 0 0; font-size: .78rem; color: #c0392b; }

@media (max-width: 991.98px) {
  .ct-ad { padding-top: 16px; }
  .ct-ad-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ct-ad-head-price { text-align: left; }
  .ct-ad-price-sub { justify-content: flex-start; }
  .ct-ad-layout { grid-template-columns: 1fr; gap: 8px; }
  .ct-ad-sticky { position: static; }
  .ct-facts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ct-inq { grid-template-columns: 1fr; padding: 24px 18px; gap: 20px; }
  .ct-ad-map #map_canvas { height: 280px; }
}
@media (max-width: 575.98px) {
  .ct-facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ct-facts li { padding: 12px; gap: 8px; }
  .ct-facts b { font-size: .9rem; }
  .ct-ad-gallery .row.g-2 > .col-8, .ct-ad-gallery .row.g-2 > .col-9 { flex: 0 0 100%; max-width: 100%; }
  .ct-ad-gallery .row.g-2 > .col-4, .ct-ad-gallery .row.g-2 > .col-3 { flex: 0 0 100%; max-width: 100%; }
  .ct-ad-gallery .row.g-2 > .col-4 > .row > .col-12, .ct-ad-gallery .row.g-2 > .col-3 > .row > .col-12 { flex: 0 0 33.333%; max-width: 33.333%; }
}

/* ==================================================================
   РЕЗУЛТАТИ ОТ ТЪРСЕНЕ
================================================================== */
.ct-search--page { padding: 20px 0; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.ct-search-card--page { box-shadow: none; border: 1px solid var(--line); }
.ct-search-toggle { margin-bottom: 12px; }
.ct-search-toggle .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 991.98px) {
  /* на телефон формата е скрита; #show_search я показва (custom.js) */
  .ct-search--page #filters-sidebar { display: none; }

  /* Бутонът "Редакция на търсенето" стои вътре в бялата карта, под
     табовете. Когато формата е сгъната, той е единственото в картата -
     затова няма долен отстъп, иначе под него зее празна бяла ивица.
     Разстоянието до формата идва от самата форма, щом се отвори. */
  .ct-search-card--page .ct-search-toggle { margin-bottom: 0; }
  .ct-search--page #filters-sidebar { margin-top: 12px; }
}

.ct-results { padding: 28px 12px 24px; }
.ct-results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ct-results-title h1 {
  display: inline;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing: -.02em;
  margin: 0;
}
.ct-results-reset {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  font-size: .82rem;
  color: var(--ink-3);
  vertical-align: middle;
}
.ct-results-reset .material-icons { font-size: 16px; }
.ct-results-reset:hover { color: var(--accent); text-decoration: none; }
.ct-results-count { margin: 6px 0 0; color: var(--ink-3); font-size: .9rem; }
.ct-results-count b { color: var(--ink); }

.ct-results-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-tool { display: inline-flex; align-items: center; gap: 6px; }
.ct-tool .material-icons { font-size: 18px; }
.ct-tool-360 {
  width: 38px; height: 38px; border-radius: 50%;
  justify-content: center;
  border: 1px solid var(--line); color: var(--ink-3);
}
.ct-tool-360.is-on, .ct-tool-360:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.ct-sort { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ct-sort .material-icons-outlined { color: var(--ink-3); font-size: 20px; }
.ct-sort .form-select { width: auto; border-radius: 999px; border-color: var(--line); padding: .45rem 2.2rem .45rem 1rem; font-weight: 500; }
.ct-refform { display: inline-flex; gap: 6px; }
.ct-refform .form-control { width: 110px; border-radius: 999px; border-color: var(--line); padding: .45rem .9rem; }
.ct-refform .btn { border-radius: 50%; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ct-refform .btn .material-icons-outlined { font-size: 18px; }

.ct-results-grid { padding-top: 20px; }
.ct-results-grid .ebc-img-wrap { height: 250px; }
.ct-results-empty { text-align: center; padding: 72px 0; color: var(--ink-2); }
.ct-results-empty .material-icons-outlined { font-size: 48px; color: var(--ink-3); display: block; margin-bottom: 12px; }
.ct-results-empty p { font-size: 1.1rem; margin-bottom: 18px; }

.ct-pagination nav { border: 0 !important; padding: 28px 0 8px !important; }
.ct-pagination .pagination { justify-content: center; gap: 6px; }
.ct-pagination .page-link {
  border: 1px solid var(--line);
  border-radius: 999px !important;
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  color: var(--ink);
  font-weight: 500;
}
.ct-pagination .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.ct-pagination .page-link:hover { background: var(--paper-2); color: var(--ink); }

/* ==================================================================
   ПОКАНА В КРАЯ НА РЕЗУЛТАТИТЕ

   Преди това беше тънка сива лента със сърчице и се четеше като
   системно съобщение, което окото подминава. Сега е картичка със
   снимка на брокер: човек предлага помощ, а не сайтът обявява нещо.

   Снимката е кръгла и голяма, текстът е едър, бутонът е отделен и
   ясен. Блокът работи и без снимка - тогава се подравнява наляво.
================================================================== */
.ct-results-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 28px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.ct-results-cta-photo {
  flex: 0 0 116px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 32, .1);
}
.ct-results-cta-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.ct-results-cta-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ct-results-cta-text {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
  max-width: 62ch;
}
.ct-results-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .7rem 1.4rem;
}
.ct-results-cta-btn .material-icons { font-size: 19px; }
.ct-results-cta-note {
  color: var(--ink-3);
  font-size: .86rem;
}

/* репликата е чат балон до снимката: всички деца са в една клетка и най-дългото
   определя височината, затова балонът не мени размера си, докато текстът се изписва */
.ct-results-cta-chat {
  display: grid;
  width: 100%;
  max-width: 68ch;
}
.ct-results-cta-chat > .ct-results-cta-text {
  grid-area: 1 / 1;
  max-width: none;
  padding: .8rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  font-weight: 500;
}
.ct-results-cta-chat > .ct-results-cta-size { visibility: hidden; }

/* без качена снимка картичката остава, просто без кръгчето */
.ct-results-cta--nopic { gap: 0; }

@media (max-width: 767.98px) {
  /* на телефон снимката минава отгоре и всичко се центрира - редът
     рамо до рамо смачква и снимката, и текста */
  .ct-results-cta {
    flex-direction: column;
    text-align: center;
    gap: 18px;
    padding: 24px 20px;
  }
  .ct-results-cta-photo { flex: 0 0 96px; width: 96px; height: 96px; }
  .ct-results-cta-body { align-items: center; }
  .ct-results-cta-text { font-size: 1rem; }
}

.ct-stats-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ct-stats-list li { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 2px; }
.ct-stats-list span { font-size: .82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.ct-stats-list b { font-size: 1.25rem; letter-spacing: -.02em; }
.ct-stats-list small { color: var(--ink-2); }

@media (max-width: 767.98px) {
  .ct-results-head { flex-direction: column; align-items: stretch; }
  .ct-results-tools { justify-content: space-between; }
}

/* ---------- РАЗШИРЕНО ТЪРСЕНЕ (разгъващ се панел в същата карта) ---------- */
.ct-sform-adv {
  display: none;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.ct-sform-adv.is-open { display: block; animation: ct-adv-in .25s ease-out; }
@keyframes ct-adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ct-sform-foot .adv_search_btn .ct-adv-close { display: none; }
.ct-sform-foot .adv_search_btn.is-open .ct-adv-open { display: none; }
.ct-sform-foot .adv_search_btn.is-open .ct-adv-close { display: inline; }
.ct-sform-foot .adv_search_btn.is-open { color: var(--accent); }

/* ---------- служебни класове от assets/css/custom.css (темата не го зарежда) ---------- */
/* анти-спам "капан" във формите (ads_ae, evaluate_ad): полета, които човек не вижда и не попълва */
.required_field { display: none !important; }
.flexOnlyOnPrint { display: none; }

/* ---------- търсачка със снимка за фон (системна снимка searchimg) ---------- */
.ct-search--photo {
  position: relative;
  padding: 56px 0 64px;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  border-bottom: 0;
}
.ct-search--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 16, 20, .35), rgba(10, 16, 20, .55));
}
.ct-search--photo .container { position: relative; }
.ct-search--photo .ct-search-card--page {
  border: 0;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 30px 60px -30px rgba(16, 24, 32, .6);
}
.ct-search--photo .ct-search-toggle .btn { background: #fff; }
@media (max-width: 991.98px) {
  .ct-search--photo { padding: 20px 0 28px; }
}

/* ---------- броячи върху снимка (системна снимка backgmetrica) ---------- */
.ct-counters--photo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.ct-counters--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(10, 16, 20, .82), rgba(10, 16, 20, .55));
}
.ct-counters--photo .container { position: relative; }
@media (max-width: 991.98px) {
  .ct-counters--photo { background-attachment: scroll; }
}

/* ---------- двата бутона в служебния ред ---------- */
.ct-topbar .ct-cta .btn {
  font-size: .8rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  gap: 5px;
  line-height: 1.3;
}
.ct-topbar .ct-cta .material-icons {
  font-size: 16px;
}
.ct-topbar-inner {
  flex-wrap: nowrap;
}
.ct-topbar-right {
  flex: 0 0 auto;
}

/* без луфт между точката и подменюто - иначе мишката "излиза" по пътя надолу */
.ct-nav .dropdown-menu { margin-top: 0; }

/* На по-тесен десктоп менюто се сбива постепенно, преди да се пренесе. */
@media (max-width: 1399.98px) {
  .ct-nav { margin-left: 14px; }
  .ct-nav > li > a { padding: 9px 9px; font-size: .9rem; }
}
@media (max-width: 1199.98px) {
  .ct-nav { margin-left: 10px; }
  .ct-nav > li > a { padding: 8px 7px; font-size: .85rem; }
  .ct-logo img { max-height: 38px; }
}

/* ==================================================================
   ХЕДЪР: ДВАТА БУТОНА, ЕЗИЦИТЕ, МЕСИНДЖЪРИТЕ
================================================================== */

/* Втори акцент за "Оценка на имот" - синьото от логото (#0070b0).
   Така двете действия се различават на пръв поглед:
   зелено = добави имот (основно), синьо = оценка (второстепенно). */
:root {
  --accent-2: #0070b0;
  --accent-2-dark: #00598b;
}

/* по-висока специфичност: .ct-topbar a вече задава цвят на текста и
   щеше да направи надписа сив върху синьото */
/* Бял с тъмен текст.

   Досега беше в синьо и до него стои зеленият "Добави имота си" -
   два различни наситени цвята един до друг се бореха помежду си.
   Сега зеленият е главният, а този го допълва.

   Вниманието към него идва от тихия проблясък (cta_hint.js), а не
   от цвята. */
.ct-topbar .ct-cta .ct-btn-accent2,
.ct-btn-accent2 {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.ct-topbar .ct-cta .ct-btn-accent2:hover,
.ct-topbar .ct-cta .ct-btn-accent2:focus,
.ct-btn-accent2:hover,
.ct-btn-accent2:focus {
  background: #fff;
  border-color: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
/* и зеленият бутон да не сменя цвета на текста от правилото за служебния ред */
.ct-topbar .ct-cta .btn-primary,
.ct-topbar .ct-cta .btn-primary:hover {
  color: #fff;
  text-decoration: none;
}

/* по-едри и по-забележими бутони в служебния ред */
.ct-topbar .ct-cta { gap: 10px; }
.ct-topbar .ct-cta .btn {
  font-size: .88rem;
  font-weight: 700;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  gap: 7px;
  line-height: 1.25;
  box-shadow: 0 2px 8px rgba(16, 24, 32, .14);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.ct-topbar .ct-cta .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 24, 32, .2);
}
.ct-topbar .ct-cta .material-icons { font-size: 19px; }

/* служебният ред става по-висок заради бутоните */
.ct-topbar-inner { min-height: 56px; }

/* ---------- ЕЗИЦИ: само знаменца, без код ---------- */
.ct-lang-code {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ct-langs { gap: 4px; padding: 4px; }
.ct-langs a { padding: 3px; border-radius: 8px; }
.ct-langs a img {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(16, 24, 32, .12);
  transition: transform .15s;
}
.ct-langs a:hover img { transform: scale(1.08); }
.ct-langs a.is-active {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ct-langs a.is-active img { box-shadow: none; }

/* ---------- МЕСИНДЖЪРИ: по-едри ---------- */
.ct-msg { gap: 8px; }
.ct-msg a {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

/* ---------- ЕЗИЦИ ВЪВ ФУТЪРА ---------- */
/* .ct-langs е inline-flex, затова margin:auto не го центрира сам */
.ct-footer-langs {
  display: flex;
  width: max-content;
  justify-content: center;
  margin: 0 auto 18px;
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.ct-footer-langs a.is-active {
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 1199.98px) {
  .ct-topbar .ct-cta .btn { padding: .45rem .7rem; }
}

/* Езиците без рамка и фон - само знаменцата. Активният се познава по
   плътността: останалите са леко избледнели и се избистрят при посочване. */
.ct-langs,
.ct-footer-langs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ct-langs a {
  background: transparent;
  box-shadow: none;
}
.ct-langs a img {
  opacity: .55;
  box-shadow: none;
}
.ct-langs a:hover img { opacity: 1; }
.ct-langs a.is-active {
  background: transparent;
  box-shadow: none;
}
.ct-langs a.is-active img {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent);
}

/* страничната колона на обявата вече не е под лепкав хедър */
.ct-ad-sticky { top: 16px; }

/* ==================================================================
   ЕДИН АКЦЕНТ ЗА ЦЯЛАТА ТЕМА

   Базовата тема (theme.css) идва със свой оранжев --fi-primary #fd5631
   и лилав --fi-accent. Оттам излизаха оранжевите заглавия, рамки,
   отметки и подчертавания в съдържанието на страниците.

   Тук тези променливи сочат към акцента на Clarity, така че целият
   сайт върви с един цвят. Смяната на --accent (или на --brand-accent
   в files/custom.css) пребоядисва всичко наведнъж.
================================================================== */
:root {
  --fi-primary: var(--accent);
  --fi-primary-rgb: var(--brand-accent-rgb, 200, 116, 60);
  --fi-link-color: var(--accent);
  --fi-link-hover-color: var(--accent-dark);
  --fi-accent: var(--accent);
}

/* ---------- подменютата: без оранжево и без подчертаване ---------- */
.ct-nav .dropdown-menu li:hover > .dropdown-item,
.ct-nav .dropdown-item:hover,
.ct-nav .dropdown-item:focus,
.ct-nav .dropdown-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}

/* подчертаването при посочване е за текстовите връзки в съдържанието,
   не за менюта, флагове и бутони */
.ct-nav a:hover,
.ct-langs a:hover,
.ct-footer a:hover,
.ct-drawer a:hover,
.ct-topbar a:hover,
.btn:hover,
.dropdown-item:hover {
  text-decoration: none;
}

/* ---------- знаци за доверие във футъра (GDPR / SSL) ---------- */
.ct-footer-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}
.ct-footer-badges img {
  height: 38px;
  width: auto;
  /* рисунките са тъмни - на тъмния футър ги правим бели и приглушени */
  filter: brightness(0) invert(1);
  opacity: .4;
  transition: opacity .25s;
}
.ct-footer-badges img:hover { opacity: .85; }

/* ---------- общ ред във футъра: езици вляво, знаци вдясно ---------- */
.ct-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
/* и двата блока бяха центрирани поотделно - вече ги подрежда редът */
.ct-footer-meta .ct-footer-langs {
  margin: 0;
  width: auto;
}
.ct-footer-meta .ct-footer-badges {
  margin: 0;
  justify-content: flex-end;
}
@media (max-width: 575.98px) {
  /* на тесен екран едно под друго и центрирано */
  .ct-footer-meta { justify-content: center; gap: 14px; }
  .ct-footer-meta .ct-footer-badges { justify-content: center; }
}

/* ==================================================================
   ЧАТ С БРОКЕРА (страница на имот)
   Плаващ долу вдясно; на телефон - лента долу, която се разгъва.
================================================================== */
.ct-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-sans);
}
.ct-chat.is-quiet { display: none; }

/* ---------- свитото копче ---------- */
.ct-chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 32, .1), 0 16px 32px -14px rgba(16, 24, 32, .45);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.ct-chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(16, 24, 32, .12), 0 22px 40px -16px rgba(16, 24, 32, .5);
}
.ct-chat-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.ct-chat-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* зелената точка "на линия" */
.ct-chat-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}
.ct-chat-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, .5);
  animation: ct-chat-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ct-chat-ping {
  0%   { transform: scale(.7); opacity: .9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}
.ct-chat-launcher-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ct-chat.is-open .ct-chat-launcher { display: none; }

/* ---------- балончето с репликата ---------- */
.ct-chat-peek {
  position: relative;
  max-width: 320px;
  padding: 14px 32px 14px 16px;
  border-radius: 16px 16px 4px 16px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 32, .1), 0 18px 36px -16px rgba(16, 24, 32, .5);
  cursor: pointer;
  animation: ct-chat-in .32s cubic-bezier(.16, 1, .3, 1);
}
@keyframes ct-chat-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.ct-chat-peek-name {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ct-chat-peek-text {
  margin: 0;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--ink);
}
.ct-chat-peek-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ct-chat-peek-close:hover { background: var(--paper-2); color: var(--ink); }
.ct-chat-peek-close .material-icons { font-size: 16px; }

/* точките "пише..." */
.ct-chat-peek-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ct-chat-peek-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: ct-chat-type 1.2s infinite ease-in-out;
}
.ct-chat-peek-typing i:nth-child(2) { animation-delay: .15s; }
.ct-chat-peek-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ct-chat-type {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------- отвореният панел ---------- */
.ct-chat-panel {
  width: min(360px, calc(100vw - 32px));
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 32, .1), 0 30px 60px -24px rgba(16, 24, 32, .55);
  animation: ct-chat-in .28s cubic-bezier(.16, 1, .3, 1);
}
.ct-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ink);
  color: #fff;
}
.ct-chat-head img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 42px;
}
.ct-chat-head strong { display: block; font-size: .98rem; }
.ct-chat-head small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .7); }
.ct-chat-online { color: #4ade80; }
.ct-chat-x {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ct-chat-x:hover { background: rgba(255, 255, 255, .24); }
.ct-chat-x .material-icons { font-size: 18px; }

.ct-chat-body {
  padding: 16px;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
}
.ct-chat-bubble {
  align-self: flex-start;
  max-width: 92%;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 32, .06);
  font-size: .91rem;
  line-height: 1.45;
  color: var(--ink);
}
.ct-chat-bubble--rotating:empty { display: none; }
.ct-chat-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: .78rem;
  color: var(--ink-3);
  padding-top: 2px;
}
.ct-chat-ref .material-icons-outlined { font-size: 15px; color: var(--accent); }
.ct-chat-ref b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- полетата ---------- */
.ct-chat-form { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ct-chat-cta { margin: 0 0 2px; font-size: .88rem; color: var(--ink-2); }
.ct-chat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct-chat-form .form-control {
  border-radius: 10px;
  border-color: var(--line);
  min-height: 42px;
  font-size: .92rem;
}
.ct-chat-form .form-control:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 24, 32, .06);
}
.ct-chat-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .7rem 1rem;
  margin-top: 2px;
}
.ct-chat-form .btn .material-icons { font-size: 18px; }
.ct-chat-err {
  font-size: .82rem;
  color: #c0392b;
  background: #fdecea;
  border-radius: 8px;
  padding: 7px 10px;
}
.ct-chat-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.ct-chat-note .material-icons-outlined { font-size: 14px; margin-top: 1px; }

.ct-chat-done {
  padding: 28px 20px;
  text-align: center;
}
.ct-chat-done .material-icons {
  font-size: 44px;
  color: #22c55e;
  display: block;
  margin-bottom: 10px;
}
.ct-chat-done p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- телефон ---------- */
@media (max-width: 575.98px) {
  .ct-chat { right: 12px; left: 12px; bottom: 12px; align-items: stretch; }
  .ct-chat-launcher { align-self: flex-end; }
  .ct-chat-peek { max-width: none; border-radius: 16px; }
  .ct-chat-panel { width: 100%; }
  .ct-chat-body { max-height: 150px; }
}

/* който е казал "без движение" - без подскачащи точки */
@media (prefers-reduced-motion: reduce) {
  .ct-chat-dot::after,
  .ct-chat-peek-typing i { animation: none; }
  .ct-chat-peek,
  .ct-chat-panel { animation: none; }
}

/* ==================================================================
   ЧАТ: репликата да изглежда като казана ОТ ТОЗИ ЧОВЕК
   Аватарът е залепен за балончето, с опашчица към него, както във
   всеки месинджър. Преди снимката и текстът стояха като две отделни
   неща и се четеше като "някой друг пише".
================================================================== */
.ct-chat-peek {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 360px;
  padding: 0;                      /* отстъпът минава в балончето */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* снимката до балончето */
.ct-chat-avatar--peek {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  margin-bottom: 2px;
}
.ct-chat-avatar--peek img {
  box-shadow: 0 2px 8px rgba(16, 24, 32, .25);
}

/* самото балонче - с опашчица наляво, към снимката */
.ct-chat-peek-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 30px 12px 15px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 32, .1), 0 18px 36px -16px rgba(16, 24, 32, .5);
}
.ct-chat-peek-body::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-bottom-left-radius: 3px;
}

/* докато балончето се вижда, копчето със същата снимка се скрива */
.ct-chat.has-peek .ct-chat-launcher { display: none; }

/* ---------- в отворения панел ---------- */
.ct-chat-said {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.ct-chat-said-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 2px;
}
.ct-chat-said-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ct-chat-said .ct-chat-bubble { align-self: flex-start; max-width: 100%; }
/* опашчица само на последното балонче - точно до снимката */
.ct-chat-said .ct-chat-bubble { border-radius: 14px; }
.ct-chat-said .ct-chat-bubble:last-child { border-radius: 14px 14px 14px 4px; }
.ct-chat-ref { padding-left: 38px; }

@media (max-width: 575.98px) {
  .ct-chat-peek { max-width: none; }
}

/* редът с номера на обявата да се вижда без превъртане */
.ct-chat-body { max-height: 262px; }
@media (max-width: 575.98px) { .ct-chat-body { max-height: 170px; } }

/* ==================================================================
   ЗАПИТВАНЕ: картичка на брокера вляво от формата

   Преди това снимката, текстът и контактите просто се редяха един под
   друг върху фона на секцията. Снимката беше 260 px, а текстът под нея
   се разливаше на цялата ширина на колоната - затова изглеждаше
   разместено.

   Сега е една картичка: снимката е от край до край в горната ѝ част,
   а под нея всичко е в общо поле с еднакви отстъпи. Контактите са
   отделени с тънка линия, за да се четат като група, а не като
   продължение на текста.

   Малката картичка на брокера в страничната лента отпадна, затова и
   нейният стил (.ct-ad-broker*) е махнат оттук.
================================================================== */
.ct-inq-broker {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- снимката: заема цялата ширина на картичката --- */
.ct-inq-broker-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.ct-inq-broker-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* кадърът тръгва от горния ръб - иначе при почти квадратна снимка
     4:3 изрезът отрязва темето */
  object-position: center top;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.ct-inq-broker-photo:hover img { transform: scale(1.04); }

/* --- всичко под снимката е в едно поле с еднакви отстъпи --- */
.ct-inq-broker-info {
  display: block;
  padding: 20px 22px 22px;
}
.ct-inq-broker-role {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ct-inq-broker-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.25;
}
.ct-inq-broker-name:hover { color: var(--accent); text-decoration: none; }
.ct-inq-broker-text {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 10px 0 0;
}

/* --- контактите: отделени с линия, иконките в обща колона, за да
       се подравняват номерата един под друг --- */
.ct-inq-broker-contacts {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.ct-inq-broker-contacts a {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: .96rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ct-inq-broker-contacts .material-icons,
.ct-inq-broker-contacts .material-icons-outlined {
  font-size: 18px;
  color: var(--accent);
  justify-self: center;
}
.ct-inq-broker-contacts a:hover { color: var(--accent); text-decoration: none; }

/* --- месинджъри и профили --- */
.ct-inq-broker-soc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ct-inq-broker-soc a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: #fff;
  font-size: 19px;
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.ct-inq-broker-soc a:hover {
  color: #fff;
  border-color: transparent;
  background: var(--ink);
  transform: translateY(-2px);
  text-decoration: none;
}
.ct-inq-broker-soc a.is-viber:hover     { background: #7360f2; }
.ct-inq-broker-soc a.is-whatsapp:hover  { background: #25d366; }
.ct-inq-broker-soc a.is-skype:hover     { background: #00aff0; }
.ct-inq-broker-soc a.is-messenger:hover { background: #0084ff; }

@media (max-width: 991.98px) {
  /* на таблет картичката става хоризонтална, за да не изяжда екрана:
     снимката вляво, данните вдясно */
  .ct-inq-broker { display: flex; align-items: stretch; }
  .ct-inq-broker-photo { width: 150px; flex: 0 0 150px; aspect-ratio: auto; }
  .ct-inq-broker-info { flex: 1 1 auto; min-width: 0; padding: 16px 18px; }
  .ct-inq-broker-text { display: none; }
  .ct-inq-broker-contacts { margin-top: 12px; padding-top: 12px; }
  .ct-inq-broker-soc { margin-top: 12px; padding-top: 12px; }
}
@media (max-width: 575.98px) {
  /* на телефон пак в колона - тясната снимка режеше лицето */
  .ct-inq-broker { display: block; }
  .ct-inq-broker-photo { width: 100%; aspect-ratio: 4 / 3; }
  .ct-inq-broker-info { padding: 18px 18px 20px; }
  .ct-inq-broker-text { display: block; }
}

/* ==================================================================
   МНЕНИЯ НА КЛИЕНТИ (начална страница)
   Ползва картичките .ct-quote от темата; тук са само добавките.
================================================================== */
.ct-reviews-avg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: .95rem;
  color: var(--ink-2);
}
.ct-reviews-stars { display: inline-flex; color: #f0b429; }
.ct-reviews-stars .material-icons { font-size: 20px; }
.ct-reviews-avg b { color: var(--ink); font-size: 1.05rem; }

/* Картичките са еднакво високи на ред.

   Тук стоеше align-items: start - то свива всяка картичка до нейния
   текст и редът излиза стъпаловиден, защото мненията са различно
   дълги. stretch (по подразбиране в grid) ги изравнява.

   .ct-quote вече е колонен flex, а .ct-quote-more расте (flex: 1 1 auto)
   - затова името и датата остават долепени до долния ръб на всяка
   картичка, вместо да висят веднага след текста. */
.ct-reviews-grid { align-items: stretch; }
.ct-reviews-grid .ct-quote { position: relative; }
/* името и датата се притискат надолу, дори когато мнението е кратко */
.ct-reviews-grid .ct-quote-who { margin-top: auto; padding-top: 6px; }
.ct-quote-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--ink-3);
  line-height: 1;
}
.ct-quote-edit:hover { color: var(--accent); text-decoration: none; }
.ct-quote-edit .material-icons { font-size: 18px; }

.ct-quote blockquote.ct-quote-more {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.ct-quote-img {
  width: 100%;
  border-radius: var(--radius);
  margin: 2px 0 4px;
  max-height: 170px;
  object-fit: cover;
}
.ct-quote-who small { font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
  .ct-reviews-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   ПОПРАВКА: .ct-section върху същия елемент като .container

   .ct-section задава padding: 56px 0 - съкратеният запис зануляваше
   и страничния отстъп на .container, затова картичките опираха в ръба
   на екрана. Тук отстъпът се връща.
================================================================== */
.ct-section.container {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* ==================================================================
   ЛЮБИМИ ИМОТИ

   Връзка с брояч в менюто и във футъра, блок на началната страница и
   собствена страница с отворена покана от брокера.

   Броячът се попълва от favorites.js. Докато е празен, кръгчето стои
   скрито - иначе до сърцето виси нула, която не значи нищо.
================================================================== */

/* --- връзката в менюто и футъра --- */
.ct-fav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.ct-fav-link:hover { color: var(--accent); background: var(--paper-2); text-decoration: none; }
.ct-fav-link .material-icons-outlined { font-size: 20px; }

/* с отбелязани имоти сърцето се запълва и порозовява */
.ct-fav-link.has-favorites { color: var(--accent); }
.ct-fav-link.has-favorites .material-icons-outlined {
  font-family: 'Material Icons';
  font-variation-settings: 'FILL' 1;
}

.ct-fav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ct-fav-link--footer { color: var(--ink-3); }
.ct-fav-link--footer:hover { background: transparent; }

@media (max-width: 1199.98px) {
  /* в тясна горна лента остава само сърцето с броя */
  .ct-fav-link-label { display: none; }
}

/* --- блокът на началната страница --- */
.ct-favhome .ct-section-head { align-items: flex-end; }

/* --- страницата --- */
.ct-fav-head { margin-bottom: 8px; }
.ct-fav-head .ct-section-lead { max-width: 70ch; }

.ct-fav-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.ct-fav-count { font-weight: 700; color: var(--ink); }
.ct-fav-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ct-fav-clear:hover { color: #c0392b; border-color: #c0392b; }
.ct-fav-clear .material-icons-outlined { font-size: 18px; }

.ct-fav-grid { margin-top: 26px; }

/* --- зареждане --- */
.ct-fav-loading { display: flex; justify-content: center; padding: 60px 0; }
.ct-fav-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ctFavSpin .8s linear infinite;
}
@keyframes ctFavSpin { to { transform: rotate(360deg); } }

/* --- празен списък --- */
.ct-fav-empty {
  text-align: center;
  padding: 56px 20px 64px;
}
.ct-fav-empty .material-icons-outlined {
  font-size: 56px;
  color: var(--ink-3);
  opacity: .55;
}
.ct-fav-empty h2 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  margin: 14px 0 8px;
  color: var(--ink);
}
.ct-fav-empty p {
  color: var(--ink-2);
  max-width: 48ch;
  margin: 0 auto 22px;
}
.ct-fav-empty .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ==================================================================
   ПОКАНАТА ОТ БРОКЕРА НА СТРАНИЦАТА

   Отворена форма, не изскачащ чат: човек, който е отбелязал имоти,
   вече е показал интерес и не бива да кликва още веднъж.
================================================================== */
/* В блока на началната страница картичката стои вътре в контейнера,
   затова няма своя ширина - само малко въздух над нея. */
.ct-favform--inline { margin-top: 30px; }

.ct-favform-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.ct-favform-person { display: flex; flex-direction: column; gap: 18px; }

.ct-favform-photo {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 26px rgba(16, 24, 32, .12);
}
.ct-favform-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
/* зелената точка казва "насреща има човек" */
.ct-favform-dot {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid var(--paper-2);
}

.ct-favform-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--ink);
}
.ct-favform-role { display: block; color: var(--ink-3); font-size: .8rem; margin-bottom: 12px; }
.ct-favform-online { color: #16a34a; font-weight: 600; }

.ct-favform-bubble {
  position: relative;
  margin-top: 10px;
  padding: 13px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
}
/* Сменящата се реплика. Балончето влиза плавно, а текстът вътре се
   изписва знак по знак от favorites.js - затова тук няма анимация на
   самия текст, само място за него. */
.ct-favform-bubble--rotating {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  min-height: 3em;
}
.ct-favform-bubble--rotating.is-in { opacity: 1; transform: none; }

/* курсорът след изписания текст - мига, докато човекът "пише" */
.ct-favform-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: ctFavCaret 1s steps(1) infinite;
}
@keyframes ctFavCaret { 50% { opacity: 0; } }

/* трите точки "пише..." преди самата реплика */
.ct-favform-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 1.4em;
}
.ct-favform-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: ctFavDot 1.2s ease-in-out infinite;
}
.ct-favform-typing i:nth-child(2) { animation-delay: .18s; }
.ct-favform-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes ctFavDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  /* без движение няма и курсор - текстът идва наготово */
  .ct-favform-typed::after { display: none; }
  .ct-favform-typing i { animation: none; }
}

.ct-favform-form { display: flex; flex-direction: column; gap: 12px; }
.ct-favform-lead { margin: 0 0 4px; color: var(--ink-2); line-height: 1.6; }
.ct-favform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-favform-form .form-control {
  border-radius: 10px;
  border-color: var(--line);
  background: #fff;
  min-height: 46px;
}
.ct-favform-form .form-control:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(16, 24, 32, .06);
}
.ct-favform-send {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .75rem 1.6rem;
}
.ct-favform-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: .8rem;
}
.ct-favform-note .material-icons-outlined { font-size: 15px; }
.ct-favform-err {
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecea;
  color: #c0392b;
  font-size: .86rem;
}
.ct-favform-done {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: #e8f5e9;
  color: #1b5e20;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .ct-favform-card { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .ct-favform-person { flex-direction: row; align-items: flex-start; gap: 16px; }
  .ct-favform-photo { flex: 0 0 92px; width: 92px; height: 92px; }
}
@media (max-width: 575.98px) {
  .ct-favform-row { grid-template-columns: 1fr; }
  .ct-favform-person { flex-direction: column; }
  .ct-favform-send { align-self: stretch; justify-content: center; }
}

/* ==================================================================
   СТРАНИЧНО МЕНЮ: списъци с чавки

   Чавката и текстът стояха просто един до друг. При по-дълга точка
   вторият ред се връщаше чак в ляво, под самата чавка, и списъкът
   се разпадаше. Сега иконката е отделна колона, а текстът се пренася
   подравнен сам под себе си.
================================================================== */
.sidebar .nav.flex-column > .nav-item,
aside .nav.flex-column > .nav-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}
.sidebar .nav.flex-column > .nav-item > .material-icons,
aside .nav.flex-column > .nav-item > .material-icons {
  flex: 0 0 auto;
  margin-top: 1px;
}
/* точките с връзка си остават както са - там иконката е вътре в <a> */
.sidebar .nav.flex-column > .nav-item > .nav-link,
aside .nav.flex-column > .nav-item > .nav-link {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

/* ==================================================================
   ПОКАНА ОТ КОНСУЛТАНТА ПРИ ДОБАВЯНЕ НА ИМОТ

   Същият вид като поканата в "Любими имоти": кръгла снимка вляво,
   балончета с реплики вдясно. Стои под заглавието на страницата, преди
   формата - човек първо вижда на кого ще я даде.
================================================================== */
.ct-pitch {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 26px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.ct-pitch-photo {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 32, .12);
}
.ct-pitch-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
/* зелената точка казва "насреща има човек" */
.ct-pitch-dot {
  position: absolute;
  right: 5px;
  bottom: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid var(--paper-2);
}

.ct-pitch-said { min-width: 0; flex: 1 1 auto; }
.ct-pitch-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--ink);
}
.ct-pitch-role { display: block; color: var(--ink-3); font-size: .8rem; margin-bottom: 10px; }
.ct-pitch-online { color: #16a34a; font-weight: 600; }

.ct-pitch-bubble {
  margin-top: 9px;
  padding: 12px 15px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 70ch;
}
.ct-pitch-bubble--typing {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  min-height: 3em;
}
.ct-pitch-bubble--typing.is-in { opacity: 1; transform: none; }

@media (max-width: 575.98px) {
  .ct-pitch { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .ct-pitch-bubble { border-radius: 16px; text-align: left; }
}

/* --- общи части на ефекта: ползват се и тук, и в "Любими имоти" --- */
.is-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 1.4em;
}
.is-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: ctTypeDot 1.2s ease-in-out infinite;
}
.is-typing-dots i:nth-child(2) { animation-delay: .18s; }
.is-typing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes ctTypeDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}
/* курсорът след изписания текст */
.is-typing-text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: ctTypeCaret 1s steps(1) infinite;
}
@keyframes ctTypeCaret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .is-typing-text::after { display: none; }
  .is-typing-dots i { animation: none; }
  .ct-pitch-bubble--typing { transition: none; }
}

/* ==================================================================
   ПРОЗОРЕЦ ЗА АБОНАМЕНТ: ЗА КАКВО СЕ АБОНИРА ЧОВЕКЪТ

   Критериите стояха най-долу, под формата, и то само при повече от
   четири. Точно те са смисълът на абонамента, затова сега са най-горе
   вляво, в собствено поле, което се отличава от фона.

   Прозорецът има снимка за фон, затова полето е с лек воал - иначе
   текстът се губи върху светли кадри.
================================================================== */
.ct-lead-criteria {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius, 12px);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(16, 24, 32, .08);
}

.ct-lead-criteria-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3, #6b7280);
}
.ct-lead-criteria-label .material-icons-outlined { font-size: 17px; }

.ct-lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ct-lead-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  color: var(--ink, #101820);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.ct-lead-chip .material-icons {
  font-size: 16px;
  color: #16a34a;
}

.ct-lead-criteria-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink-2, #4b5563);
}
.ct-lead-criteria-note .material-icons-outlined { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 767.98px) {
  /* в тесен прозорец полето върви по цялата ширина, преди формата */
  .ct-lead-criteria { margin-bottom: 18px; }
}

/* ==================================================================
   BOOTSTRAP КЛАСОВЕ, КОИТО ТЕМАТА НЕ ПОКРИВА

   Основните шаблони ползват bg-primary за цветни плочки: датата на
   новината, значките по кутийките. Темата си има собствена палитра и
   не дефинира този клас, затова фонът оставаше прозрачен. С text-white
   отгоре се получаваше бяло върху бяло - датата просто изчезваше.

   Тук класът получава акцентния цвят на темата, за да работи навсякъде,
   където шаблоните го очакват.
================================================================== */
.bg-primary {
  background-color: var(--accent) !important;
}
.badge.bg-primary,
.bg-primary.text-white {
  color: #fff !important;
}

/* ==================================================================
   КОНТАКТИ: централният брокер до формата

   Под оферта вляво стои брокерът на имота. На страницата за контакти
   такъв няма и колоната оставаше празна - формата висеше сама вдясно и
   изглеждаше като откъснат къс.

   Тук е лицето на агенцията: голяма кръгла снимка, телефони и
   месинджъри. Контактите и социалните профили ползват същите стилове
   като при брокера, за да не се описват два пъти.
================================================================== */
.ct-inq-central {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ct-inq-central-photo {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 32, .14);
}
.ct-inq-central-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}
.ct-inq-central-dot {
  position: absolute;
  right: 10px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  border: 3px solid var(--paper-2);
}

.ct-inq-central-name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.25;
}
.ct-inq-central-role { display: block; color: var(--ink-3); font-size: .82rem; margin-top: 2px; }
.ct-inq-central-online { color: #16a34a; font-weight: 600; }

@media (max-width: 991.98px) {
  /* в тесен екран снимката застава до текста, за да не изяжда екрана */
  .ct-inq-central { flex-direction: row; align-items: flex-start; gap: 16px; }
  .ct-inq-central-photo { flex: 0 0 104px; width: 104px; height: 104px; }
}
@media (max-width: 575.98px) {
  .ct-inq-central { flex-direction: column; }
  .ct-inq-central-photo { width: 120px; height: 120px; }
}

/* ==================================================================
   ТЪРСАЧКА: ДЪРЖАВИТЕ КАТО ТАБОВЕ

   Държавите бяха в падащо меню. Така никой не разбираше, че сайтът
   предлага имоти в пет страни - менюто изглежда като всяко друго поле
   и човек го подминава.

   Като табове стоят най-горе, виждат се наведнъж и приканват към
   кликане. Активният е плътен и леко се подава нагоре, останалите са
   прозрачни - разликата се вижда с периферно зрение.
================================================================== */
.ct-sform-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -2px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.ct-sform-tab {
  position: relative;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ct-sform-tab:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.ct-sform-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 24, 32, .18);
}
.ct-sform-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  /* на телефон се плъзгат настрани, вместо да се пренасят на три реда */
  .ct-sform-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ct-sform-tabs::-webkit-scrollbar { display: none; }
  .ct-sform-tab { padding: 8px 14px; font-size: .9rem; }
}

/* ==================================================================
   ДЪРЖАВИТЕ КАТО ТАБОВЕ НАД ТЪРСАЧКАТА

   Табовете стоят извън бялата карта и стърчат над нея, както езичетата
   на папка. Активният е бял и се слива с картата отдолу - затова долните
   му ъгли са прави, а картата започва точно под него.

   Фонът отзад е снимката на слайдъра, затова неактивните са тъмни и
   полупрозрачни: четат се и върху светъл, и върху тъмен кадър.
================================================================== */
.ct-country-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 0 10px;
  padding: 0;
}

.ct-country-tab {
  padding: 11px 22px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(10, 16, 20, .45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ct-country-tab:hover {
  background: rgba(10, 16, 20, .65);
  color: #fff;
}
/* активният е част от картата отдолу */
.ct-country-tab.is-active {
  background: #fff;
  color: var(--ink);
  backdrop-filter: none;
}
.ct-country-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  /* на телефон се плъзгат настрани, вместо да се пренасят на три реда */
  .ct-country-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 6px;
  }
  .ct-country-tabs::-webkit-scrollbar { display: none; }
  .ct-country-tab { padding: 9px 15px; font-size: .88rem; }
}

/* --- същите табове върху светлата лента на страницата с резултати ---

   Там зад тях няма снимка, а светъл фон (--paper-2). Тъмните
   полупрозрачни езичета от героя стават черни петна върху него,
   затова тук са светли с контур, а активният пак е бял и се слива
   с картата. Когато има служебна снимка за фон (.ct-search--photo),
   важат пак тъмните - правилото по-долу ги връща. */
.ct-search--page .ct-country-tab {
  background: rgba(10, 16, 20, .05);
  backdrop-filter: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.ct-search--page .ct-country-tab:hover {
  background: rgba(10, 16, 20, .09);
  color: var(--ink);
}
.ct-search--page .ct-country-tab.is-active {
  background: #fff;
  color: var(--ink);
}

/* със снимка за фон се държат както в героя */
.ct-search--photo .ct-country-tab {
  background: rgba(10, 16, 20, .45);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .82);
  border: 0;
}
.ct-search--photo .ct-country-tab:hover {
  background: rgba(10, 16, 20, .65);
  color: #fff;
}
.ct-search--photo .ct-country-tab.is-active {
  background: #fff;
  color: var(--ink);
  backdrop-filter: none;
}

/* ==================================================================
   ТЪРСАЧКА: ПОДРЕДБА

   Трите реда (къде / какво / разширено) са по четири равни колони.
   Бутонът "Търси" слезе в долната лента, за да не изяжда колона от
   ред 2 и да не свива полетата до себе си.
================================================================== */

/* --- поле "от - до" в една клетка ---
   Двете числа са един въпрос, затова делят едно заглавие и стоят в
   една рамка. Тирето между тях не е текст за четене - затова е
   aria-hidden в шаблона. */
.ct-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.ct-range-sep {
  color: var(--ink-3);
  font-size: .9rem;
  line-height: 1;
  user-select: none;
}
/* числата се четат по-лесно центрирани, когато са две едно до друго */
.ct-range .form-control {
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

/* --- долната лента ---
   Тя е Bootstrap ред (row gx-3), също като редовете с полетата: 9
   колони за връзката, 3 за бутона. Затова бутонът излиза точно колкото
   колоната "Реф. №" над него.

   Тук НЯМА gap и justify-content - те биха разместили колоните и
   бутонът нямаше да се подравни с полето отгоре. Разстоянията идват от
   решетката. */
.ct-sform-foot {
  margin-top: 16px;   /* отделя бутона от полето над него */
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.ct-sform-foot-left { display: flex; align-items: center; }
/* бутонът пълни своята колона - оттам идва ширината му */
.ct-sform-go { width: 100%; }

@media (max-width: 991.98px) {
  /* едно под друго: бутонът горе (order-1), връзката под него */
  .ct-sform-foot-left { justify-content: center; margin-top: 10px; }
}

/* Изключен инструмент в лентата с резултатите (напр. 360 без оферти).
   Остава видим, за да не "подскача" лентата, но не кани за натискане. */
.ct-tool.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: auto;
}
.ct-tool.is-disabled:hover {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* Бутонът "Търси" е малко по-нисък от полетата.

   .ct-search-card .form__submit му слага height: 48px - толкова, колкото
   са полетата. Това имаше смисъл, докато бутонът стоеше В техния ред и
   трябваше да се изравни с тях. Сега е сам на долната лента, където
   нищо не го мери отстрани, а 48px плътно зелено изглежда тежко.

   42px остава удобен за натискане, а на телефон бутонът е през целия
   ред, така че целта е голяма въпреки по-малката височина. */
.ct-search-card .ct-sform-go,
.ct-sform-go {
  height: 42px;
}

/* ==================================================================
   ЕНЕРГИЕН КЛАС

   Цветната лента е същата, която хората помнят от етикетите на
   уредите: зелено за икономично, червено за разточително. Затова се
   чете без да се обяснява какво значи "D".
================================================================== */
.ct-energy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 9px;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .01em;
}
.ct-energy--aplus { background: #0a8a3f; }
.ct-energy--a     { background: #2aa34a; }
.ct-energy--b     { background: #7cb518; }
.ct-energy--c     { background: #c2cc16; color: #1a2206; }
.ct-energy--d     { background: #f0b429; color: #2a1e00; }
.ct-energy--e     { background: #ef8a17; }
.ct-energy--f     { background: #e05a1b; }
.ct-energy--g     { background: #d12e2e; }

/* ==================================================================
   ИПОТЕЧЕН КАЛКУЛАТОР (странична лента)
================================================================== */
.ct-calc { padding: 22px 20px; }
.ct-calc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.ct-calc-title .material-icons-outlined { font-size: 20px; color: var(--accent); }
.ct-calc-lead { margin: 0 0 16px; font-size: .86rem; color: var(--ink-3); line-height: 1.5; }

.ct-calc-label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.ct-calc-label b { color: var(--accent); letter-spacing: 0; text-transform: none; font-size: .86rem; }

/* полето за цена: валутата стои вътре, вдясно */
.ct-calc-money { position: relative; margin-bottom: 18px; }
.ct-calc-money .form-control { padding-right: 46px; font-weight: 700; }
.ct-calc-cur {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: .9rem;
  pointer-events: none;
}

.ct-calc-row { margin-bottom: 16px; }

/* --- плъзгачите ---
   Стандартният вид се различава силно между браузърите, затова се
   рисува наново: тънка писта и ясно топче в акцентния цвят. */
.ct-calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(10, 16, 20, .14);
  outline: none;
  cursor: pointer;
}
.ct-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  box-shadow: 0 1px 5px rgba(10, 16, 20, .28);
  transition: transform .12s;
}
.ct-calc-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.ct-calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  cursor: grab;
  box-shadow: 0 1px 5px rgba(10, 16, 20, .28);
}
.ct-calc-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* --- резултатът --- */
.ct-calc-out {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.ct-calc-out-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ct-calc-out-main span { font-size: .86rem; color: var(--ink-3); }
.ct-calc-out-main b {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  white-space: nowrap;
}
.ct-calc-out-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Трите числа се подравняват по долния си ръб.

   Заглавията им са различно дълги - "Общо лихви" се събира на един
   ред, а "Размер на кредита" и "Общо за връщане" падат на два. Ако
   всяка двойка просто се изписва отгоре надолу, числата тръгват от
   различна височина и редът изглежда разместен.

   Затова всяка клетка е колонен flex, разпънат на пълната височина на
   реда, а числото се избутва надолу. Така заглавията може да са на
   един или на два реда - числата винаги стоят на една линия. Важно е
   и за немски, където думите са най-дълги. */
.ct-calc-out-grid > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ct-calc-out-grid dt { font-size: .72rem; color: var(--ink-3); font-weight: 500; line-height: 1.3; }
.ct-calc-out-grid dd { margin: auto 0 0; padding-top: 3px; font-size: .86rem; font-weight: 700; }

.ct-calc-note { margin: 12px 0 0; font-size: .74rem; color: var(--ink-3); line-height: 1.5; }

/* ==================================================================
   КОЛКО СПЕСТЯВАШ (голямата колона)
================================================================== */
.ct-save-title { display: flex; align-items: center; gap: 8px; }
.ct-save-title .material-icons-outlined { font-size: 22px; color: var(--accent); }
.ct-save-lead { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; }
.ct-save-lead b { color: var(--ink); }

.ct-save-label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.ct-save-money { position: relative; max-width: 260px; margin-bottom: 20px; }
.ct-save-money .form-control { padding-right: 46px; font-weight: 700; font-size: 1.05rem; }
.ct-save-cur {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

/* Петте периода. auto-fit с минимум 150px: на широко са пет в ред, а
   на тясно сами слизат на два реда, вместо числата да се пренасят
   вътре в клетката. */
.ct-save-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.ct-save-cell {
  padding: 14px 12px;
  border-radius: var(--radius);
  background: var(--paper-2);
  text-align: center;
}
.ct-save-y {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--ink-3);
}
.ct-save-sum {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  white-space: nowrap;   /* "156 960 EUR" не се чупи на два реда */
}

.ct-save-pay { margin: 0 0 10px; color: var(--ink-2); line-height: 1.6; }
.ct-save-pay b { color: var(--ink); }
.ct-save-note { margin: 0; font-size: .78rem; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 575.98px) {
  /* на телефон две в ред - пет колони стават нечетими */
  .ct-save-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-save-sum { font-size: .95rem; }
  .ct-calc-out-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ct-calc-out-grid dd { font-size: .78rem; }
}

/* ==================================================================
   АВТОМАТИЧЕН КЛИП ОТ СНИМКИТЕ

   Слоевете стоят върху главната снимка в галерията и я покриват
   изцяло. Оригиналното <img> остава отдолу - то задава височината и
   остава за търсачките и за хора без JavaScript.

   Движат се само opacity и transform. И двете се изпълняват от
   видеокартата, затова клипът върви плавно и на телефон.
================================================================== */
.gallery-main-img.has-slideshow { position: relative; overflow: hidden; }

/* снимката отдолу само държи височината */
.gallery-main-img.has-slideshow > img { visibility: hidden; }

.ct-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--paper-2);
}

.ct-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* дългото плавно изнасяне е това, което прави прехода "скъп" -
     рязкото ease-in-out изглежда като презентация от 2008 */
  transition: opacity cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}
.ct-slide.is-on { opacity: 1; }

/* --- приближаването ---
   Много бавно и съвсем малко: 6% за целия кадър. Над това започва да
   личи, че снимката се движи, и ефектът става натраплив.
   Четирите посоки се редуват от JS-а, за да не е всеки кадър еднакъв. */
@keyframes ctKenIn {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(0, 0, 0); }
}
@keyframes ctKenOut {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1)    translate3d(0, 0, 0); }
}
@keyframes ctKenInLeft {
  from { transform: scale(1)    translate3d(1.5%, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, 0, 0); }
}
@keyframes ctKenOutRight {
  from { transform: scale(1.06) translate3d(-1.5%, 0, 0); }
  to   { transform: scale(1)    translate3d(1.5%, 0, 0); }
}

.ct-slide.in-left   { animation: ctKenInLeft   linear forwards; }
.ct-slide.out-right { animation: ctKenOutRight linear forwards; }
.ct-slide.in-right  { animation: ctKenIn       linear forwards; }
.ct-slide.out-left  { animation: ctKenOut      linear forwards; }

/* --- тънката лента на времето ---
   Един светъл конец долу, който показва кога ще се смени кадърът.
   Без числа и без точки - достатъчно е да се усеща ритъмът. */
.ct-slideshow-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: rgba(255, 255, 255, .85);
  animation: ctSlideBar linear forwards;
  pointer-events: none;
}
@keyframes ctSlideBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* лек градиент долу, за да се чете лентата и върху светла снимка */
.ct-slideshow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(10, 16, 20, .35), transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* JS-ът и без това не пуска клипа при тази настройка - това е
     предпазна мрежа, ако слоевете вече са сложени */
  .ct-slide { animation: none !important; transition: none !important; }
  .ct-slideshow-bar { display: none; }
}

/* ==================================================================
   ПРЕВКЛЮЧВАТЕЛ "ИСКАМ ОГЛЕД" / "ЗАДАЙ ВЪПРОС"
================================================================== */
.ct-inq-modes {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ct-inq-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ct-inq-mode .material-icons-outlined { font-size: 18px; }
.ct-inq-mode:hover { border-color: var(--accent); color: var(--ink); }
/* Избраният е с плътен контур и леко оцветен фон, не плътно зелен -
   това е избор вътре във формата, а не бутонът за изпращане. */
.ct-inq-mode.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--ink);
}
.ct-inq-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 420px) {
  /* на тесен телефон двата бутона се събират един до друг само ако са
     през целия ред */
  .ct-inq-mode { flex: 1 1 100%; justify-content: center; }
}

/* В страничната лента "103 200 EUR" се пренасяше на два реда и
   трите числа под вноската изглеждаха разкъсани. По-дребният шрифт ги
   побира на един ред, а те и без това са второстепенни - водещото
   число е месечната вноска над тях. */
.ct-calc-out-grid dd {
  white-space: nowrap;
  font-size: .8rem;
}

/* ==================================================================
   ДЕЙСТВИЯТА НАД СНИМКИТЕ

   Бутоните стоят между заглавието и галерията - първото място, което
   погледът стига след името на имота. Затова не са през целия ред:
   широк бутон тук би изглеждал като лента, а не като предложение.
================================================================== */
.ct-ad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.ct-ad-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  font-weight: 700;
  white-space: nowrap;
}
.ct-ad-action .material-icons,
.ct-ad-action .material-icons-outlined { font-size: 20px; }

@media (max-width: 575.98px) {
  /* на телефон всеки бутон е през целия ред - два до друг стават
     толкова тесни, че текстът се пренася */
  .ct-ad-action { flex: 1 1 100%; }
}

/* ==================================================================
   "КОЛКО СПЕСТЯВАШ" В СОБСТВЕНА РАМКА

   Дотук блокът беше обикновена секция от страницата - .ct-ad-block
   има само тънка линия отгоре, затова се четеше като продължение на
   описанието, а не като нещо, с което може да се борави.

   Рамката е същата като на ипотечния калкулатор отстрани: бял фон,
   един контур и заоблени ъгли. Двата инструмента на страницата
   изглеждат като едно семейство.

   Вертикалният отстъп идва от margin, а не от padding на секцията -
   иначе празното място остава ИЗВЪН рамката и тя изглежда залепена
   за текста отгоре.
================================================================== */
.ct-save {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 26px 28px;
  margin: 28px 0;
}
/* .ct-save задава border за всички страни и така покрива
   border-top-а на .ct-ad-block - отделно правило за него не трябва. */

/* Заглавието стои по-плътно до съдържанието си, отколкото обикновено
   заглавие на секция - вътре в рамка не му трябва толкова въздух. */
.ct-save .ct-save-title { margin-bottom: 10px; }

/* Клетките с периодите са сиви върху белия фон на рамката. Така се
   виждат като част от инструмента, а не като отделни картички върху
   страницата. */
.ct-save-cell { background: var(--paper-2); }

@media (max-width: 575.98px) {
  /* на телефон рамката се свива, за да не изяжда ширината на числата */
  .ct-save { padding: 20px 16px; margin: 22px 0; }
}

/* ==================================================================
   ЗАГЛАВНАТА ЧАСТ НА ОБЯВАТА: ЕДИН РЕД ПО-МАЛКО

   Етикетът и референтният номер заемаха цял ред над заглавието за две
   кратки неща. Етикетът легна върху снимката, а номерът - накрая на
   реда с местоположението.
================================================================== */

/* --- етикетът върху снимката ---

   Етикетът се мери спрямо .ct-ad-gallery, а първата снимка вътре е
   бутната надолу от вертикалния отстъп на решетката (.row g-2 g-lg-3
   във view_ad_gallery.html). Без да се вземе предвид, етикетът излиза
   НАД снимката и изглежда залепен за ръба.

   Ако отстъпът в онзи шаблон се смени, смени се и числото тук. */
.ct-ad-gallery {
  position: relative;
  --ct-gallery-gutter: 8px;    /* g-2 */
}
@media (min-width: 992px) {
  .ct-ad-gallery { --ct-gallery-gutter: 16px; }   /* g-lg-3 */
}
.ct-ad-status--onpic {
  position: absolute;
  /* 18px навътре от истинския ъгъл на снимката - достатъчно, за да
     мине покрай заобления ръб и да изглежда положен, а не закачен */
  top: calc(var(--ct-gallery-gutter) + 18px);
  left: 18px;
  z-index: 3;
  /* Етикетът ляга върху снимка, която може да е светла или тъмна.
     Сянката го отделя от нея, без да му слага контур. */
  box-shadow: 0 2px 10px rgba(10, 16, 20, .28);
  padding: 6px 13px;
  font-size: .72rem;
  pointer-events: none;   /* под него е линкът към голямата снимка */
}

/* --- референтният номер накрая на реда с мястото --- */
.ct-ad-sub { flex-wrap: wrap; align-items: baseline; }
/* Мястото заема свободното пространство и се пренася вътре в себе си.
   Без това дългият адрес избутва номера, а иконката остава сама. */
.ct-ad-where { flex: 1 1 220px; min-width: 0; }
/* иконката не бива да се свива, иначе се сплесква при тесен ред */
.ct-ad-sub .material-icons-outlined { flex: 0 0 auto; }
.ct-ad-sub .ct-ad-ref {
  /* margin-left: auto го избутва вдясно на свободното място, а на
     тясно слиза на нов ред заедно с останалото. */
  margin-left: auto;
  padding-left: 12px;
  font-size: .85rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* На телефон адресът се пренася на два-три реда. Ако номерът остане
     вдясно, той виси на височината на първия ред, а текстът тече под
     него - чете се като две несвързани неща. Затова мястото заема
     целия ред и номерът слиза под него, подравнен вляво.

     Ширината е 100% МИНУС мястото на иконката: при чисти 100% текстът
     тръгва на нов ред и иконката остава сама горе. */
  .ct-ad-where { flex: 1 1 calc(100% - 26px); }
  .ct-ad-sub .ct-ad-ref { margin-left: 0; padding-left: 26px; }
  /* на телефон снимката е по-малка - по-малък отстъп, за да не изяжда
     от нея, но пак отделен от ръба */
  .ct-ad-status--onpic { top: calc(var(--ct-gallery-gutter) + 12px); left: 12px; }
}

/* ==================================================================
   СПРЯНА ОБЯВА

   Страницата не крие, че имотът го няма - просто не започва с това.
   Горе стоят актуалните оферти, а архивът идва след тях, в приглушен
   блок, който се чете като бележка, а не като съобщение за грешка.
================================================================== */

/* Заглавието е същото, само без цената вдясно - тя вече не значи нищо
   за посетителя и мястото ѝ е долу, при архива. */
.ct-ad-head--past { display: block; }

/* актуалните оферти тръгват веднага след заглавието */
.ct-past-alts { padding-top: 8px; }

/* --- блокът с архива --- */
.ct-past {
  margin: 36px 0 28px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.ct-past-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.ct-past-note .material-icons {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--ink-3);
}
.ct-past-note strong {
  display: block;
  font-size: 1.02rem;
  color: var(--ink);
}
.ct-past-note a {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent);
  font-weight: 600;
}

/* --- цена, номер, квадратура ---
   Числата са в нормален цвят, но без акцент: това са факти за нещо
   минало, не предложение. */
.ct-past-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 0 0 18px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.ct-past-facts dt {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.ct-past-facts dd {
  margin: 3px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- снимките ---
   Черно-бели и малки. Цветът е това, което кара една снимка да
   изглежда като актуална оферта - без него окото разбира, че гледа
   архив, още преди да е прочело думите.

   Не са връзки: няма накъде да водят. */
.ct-past-pics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-past-pics img {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  filter: grayscale(1);
  opacity: .72;
}

/* описанието остава, но по-тихо от обикновено */
.ct-past-text { color: var(--ink-2); border-top: 1px solid var(--line); }

@media (max-width: 575.98px) {
  .ct-past { padding: 18px 16px; margin: 26px 0 22px; }
  .ct-past-facts { gap: 10px 22px; }
  /* Три в ред на телефон. С решетка, а не с пресметната ширина:
     при calc() трябва да се познае колко отстъп имат всички обвивки
     наоколо и при най-малка грешка третата снимка пада на нов ред.
     Решетката дели наличното място сама. */
  .ct-past-pics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ct-past-pics img { width: 100%; height: 76px; }
}

/* --- "Принтирай" в реда с действията ---

   Същата височина и същият ритъм като двата бутона до него, но без
   рамка и в приглушен цвят. Принтирането е дребна услуга, не
   предложение - трябва да се намира, без да спори с тях. */
.ct-ad-action--quiet {
  border: 0;
  /* Останалите в реда са .btn и взимат заоблянето оттам. Този не
     е бутон, а връзка, затова си го задава сам - иначе фонът при
     посочване излиза правоъгълен между два заоблени съседа. */
  border-radius: 36px;
  background: transparent;
  color: var(--ink-3);
  font-weight: 600;
  padding: 0 14px;
}
.ct-ad-action--quiet:hover {
  background: rgba(10, 16, 20, .05);
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 575.98px) {
  /* на телефон осталите са през целия ред; този не заслужава
     толкова място и стои сам отдолу, центриран */
  .ct-ad-action--quiet { flex: 1 1 100%; }
}

/* ==================================================================
   ПРИЗИВИ ЗА ДЕЙСТВИЕ В СТРАНИЦАТА НА ОБЯВАТА

   Йерархията е нарочна: един плътен бутон, два с контур, после група
   само от икони. Четири еднакво ярки бутона се четат като нито един.
================================================================== */

/* --- телефонът с изписан номер --- */
.ct-ad-action--tel .ct-ad-tel-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* --- групата с икони ---
   Отделена е от бутоните с малко повече въздух, за да личи, че е друг
   вид действие, а не продължение на реда. */
.ct-ad-quick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.ct-ad-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
  font-size: 19px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.ct-ad-icon:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.ct-ad-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Цветът идва чак при посочване. Три цветни кръгчета в редицата биха
   дърпали окото повече от самите бутони. */
.ct-ad-icon.is-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.ct-ad-icon.is-viber:hover    { background: #7360f2; border-color: #7360f2; color: #fff; }

/* сърцето се запълва, когато имотът е отбелязан */
.ct-ad-fav .material-icons-outlined { font-size: 21px; }
.ct-ad-fav:hover { border-color: var(--accent); color: var(--accent); }
.ct-ad-fav.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (max-width: 575.98px) {
  /* Бутоните са през целия ред, но иконите остават в редица - ако и те
     се разпънат, редът става стълба от шест етажа. */
  .ct-ad-quick {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
  }
  /* на тясно номерът се чете, но не бива да чупи бутона */
  .ct-ad-action--tel .ct-ad-tel-num { font-size: .95rem; }
}

/* ==================================================================
   ДИАЛОЗИТЕ "ОБАДЕТЕ МИ СЕ" И "ИЗВЕСТЯВАЙ МЕ"
================================================================== */
.ct-modal .modal-content {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(16, 24, 32, .45);
}
.ct-modal .modal-body { padding: 30px 32px 32px; }
.ct-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; }

.ct-modal-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ct-modal-title .material-icons-outlined { font-size: 24px; color: var(--accent); }
.ct-modal-lead { margin: 0 0 18px; color: var(--ink-3); line-height: 1.55; }
.ct-modal-opt { color: var(--ink-3); font-weight: 400; }
.ct-modal-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* --- за какво точно се абонира ---
   Без този списък човек натиска "Известявай ме", без да знае какво ще
   получава. Същите критерии, с които се търсят подобните имоти. */
.ct-notify-crit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.ct-notify-crit li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: .88rem;
  font-weight: 600;
}
.ct-notify-crit .material-icons-outlined { font-size: 16px; color: var(--accent); }

/* ==================================================================
   ЛЕПКАВА ЛЕНТА НА ТЕЛЕФОН

   Бутоните отгоре остават назад още след първите снимки, а решението
   се взима някъде по средата на страницата. Лентата носи двете най-
   важни действия дотам.
================================================================== */
.ct-ad-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;          /* под модалите на Bootstrap (1055) */
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.ct-ad-bar .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  font-weight: 700;
  white-space: nowrap;
}
.ct-ad-bar .btn .material-icons { font-size: 19px; }

/* Лентата покрива долния край на страницата - толкова отстъп, колкото
   е висока, за да не скрива края на футъра. */
@media (max-width: 991.98px) {
  body:has(.ct-ad-bar) .ct-footer { padding-bottom: 76px; }
}

/* Балончето на брокера (.ct-chat) седи в същия долен десен ъгъл.
   Вдига се над лентата, вместо да се застъпват - но само в страницата
   на обявата, защото другаде лента няма. */
@media (max-width: 991.98px) {
  body:has(.ct-ad-bar) .ct-chat { bottom: 84px; }
}

/* --- вторият, тих ред с действия ---

   Горе стои онова, с което се стига до брокера сега. Тук - онова,
   което човек прави "между другото". По-дребен шрифт и по-нисък
   ръст, за да личи разликата без да се обяснява. */
.ct-ad-actions--sub {
  margin-top: -8px;
  margin-bottom: 18px;
  gap: 4px;
}
.ct-ad-actions--sub .ct-ad-action {
  height: 38px;
  font-size: .9rem;
  font-weight: 600;
}
.ct-ad-actions--sub .material-icons-outlined { font-size: 18px; }

@media (max-width: 575.98px) {
  /* на телефон се събират на един ред, защото са кратки и не
     заслужават по цял ред всеки */
  .ct-ad-actions--sub { justify-content: center; }
  .ct-ad-actions--sub .ct-ad-action { flex: 0 1 auto; padding: 0 10px; font-size: .84rem; }
}

/* ==================================================================
   СОЦИАЛНИТЕ ИКОНИ В КАРТИЧКАТА НА БРОКЕРА - В ЦВЕТОВЕТЕ НА МРЕЖИТЕ

   Досега бяха сиви кръгчета, които се оцветяваха чак при посочване.
   На мобилен устройство "посочване" няма, а и сивото не се разпознава
   отдалече - човек вижда четири еднакви кръгчета и не разбира, че
   едното е WhatsApp.

   Цветът на марката се разпознава без четене. Затова е по подразбиране,
   а при посочване кръгчето само се повдига и получава сянка в своя цвят.

   Правилата са СЛЕД базовите по-горе, за да ги надделеят.
================================================================== */
.ct-inq-broker-soc a {
  border-color: transparent;
  background: var(--ink-3);   /* резервен цвят за мрежа без свой */
}
.ct-inq-broker-soc a i { line-height: 1; }

.ct-inq-broker-soc a.is-viber     { background: #7360f2; }
.ct-inq-broker-soc a.is-whatsapp  { background: #25d366; }
.ct-inq-broker-soc a.is-messenger { background: #0084ff; }
.ct-inq-broker-soc a.is-skype     { background: #00aff0; }
.ct-inq-broker-soc a.is-facebook  { background: #1877f2; }
.ct-inq-broker-soc a.is-linkedin  { background: #0a66c2; }
.ct-inq-broker-soc a.is-google    { background: #ea4335; }
/* Instagram е с преливка - плътен цвят изглежда като чужда марка */
.ct-inq-broker-soc a.is-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* При посочване кръгчето не сменя цвят - само се повдига и хвърля
   сянка в собствения си цвят. Смяната на цвят би изглеждала като
   друг бутон. */
.ct-inq-broker-soc a:hover {
  background: inherit;
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.ct-inq-broker-soc a.is-viber:hover     { background: #7360f2; box-shadow: 0 6px 16px -4px rgba(115, 96, 242, .7); }
.ct-inq-broker-soc a.is-whatsapp:hover  { background: #25d366; box-shadow: 0 6px 16px -4px rgba(37, 211, 102, .7); }
.ct-inq-broker-soc a.is-messenger:hover { background: #0084ff; box-shadow: 0 6px 16px -4px rgba(0, 132, 255, .7); }
.ct-inq-broker-soc a.is-skype:hover     { background: #00aff0; box-shadow: 0 6px 16px -4px rgba(0, 175, 240, .7); }
.ct-inq-broker-soc a.is-facebook:hover  { background: #1877f2; box-shadow: 0 6px 16px -4px rgba(24, 119, 242, .7); }
.ct-inq-broker-soc a.is-linkedin:hover  { background: #0a66c2; box-shadow: 0 6px 16px -4px rgba(10, 102, 194, .7); }
.ct-inq-broker-soc a.is-google:hover    { background: #ea4335; box-shadow: 0 6px 16px -4px rgba(234, 67, 53, .7); }
.ct-inq-broker-soc a.is-instagram:hover { box-shadow: 0 6px 16px -4px rgba(214, 36, 159, .7); }

.ct-inq-broker-soc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 575.98px) {
  /* на телефон остават големи - там се натискат с пръст */
  .ct-inq-broker-soc { gap: 10px; }
}

/* ==================================================================
   КАПСУЛАТА ЗА ВРЪЗКА С БРОКЕРА

   Номер, WhatsApp и Viber водят до един и същ човек. Събрани в една
   рамка, те се четат като един избор с три входа, вместо като три
   конкуриращи се бутона - и спестяват около 140px от реда.
================================================================== */
.ct-ad-contact {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 6px 0 5px;
  border: 1px solid var(--line);
  border-radius: 36px;
  background: #fff;
  gap: 4px;
}

/* --- самото обаждане --- */
.ct-ad-contact-main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px 0 0;
  border-radius: 36px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s;
}
.ct-ad-contact-main:hover { color: var(--accent); text-decoration: none; }

/* Лицето казва на кого ще се звънне. Снимка до номер работи по-добре
   от икона на слушалка - човек вижда с кого ще говори. */
.ct-ad-contact-pic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  flex: 0 0 auto;
}
.ct-ad-contact .ct-ad-tel-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* --- двата месинджъра вътре в капсулата ---
   По-малки от самостоятелните икони, защото тук са придружители на
   номера, а не отделни действия. Цветът е на марката - разпознава се
   без четене. */
.ct-ad-contact-ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  transition: filter .15s, transform .12s;
}
.ct-ad-contact-ch:hover { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; }
.ct-ad-contact-ch.is-whatsapp { background: #25d366; }
.ct-ad-contact-ch.is-viber    { background: #7360f2; }
.ct-ad-contact-ch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* тънка чертичка между номера и месинджърите */
.ct-ad-contact-main + .ct-ad-contact-ch { margin-left: 2px; position: relative; }
.ct-ad-contact-main + .ct-ad-contact-ch::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--line);
}

@media (max-width: 767.98px) {
  /* На телефон капсулата е през целия ред: номерът се разпъва, а
     двете кръгчета остават вдясно. */
  .ct-ad-contact { flex: 1 1 100%; justify-content: space-between; }
  .ct-ad-contact-main { flex: 1 1 auto; }
}

/* Принтирането като тиха икона - без рамка, за да не се брои като
   още един призив до сърцето. */
.ct-ad-icon--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
}
.ct-ad-icon--quiet:hover {
  background: rgba(10, 16, 20, .05);
  color: var(--ink);
  transform: none;
}

/* По-стегнати отстъпи в реда с действията: седем контрола на
   един ред се събират само така. 20px отстрани все още стигат
   бутонът да не изглежда стиснат. */
.ct-ad-actions .ct-ad-action { padding: 0 20px; }

/* ==================================================================
   РЕДЪТ С ДЕЙСТВИЯ НА ТЕЛЕФОН: ШЕСТ РЕДА СТАВАТ ДВА

   Всеки бутон през целия ред изглежда добре сам по себе си, но шестте
   заедно избутваха снимката на имота извън екрана. Човек отваря обява,
   за да види имота - а виждаше стена от бутони.

   На телефон долу стои лепкава лента с "Обади се сега" и "Заяви оглед",
   която се вижда през цялото време. Затова същите две неща горе са
   излишни и тук отпадат - остава само онова, което лентата няма.

     ред 1   Запитване │ Обадете ми се        (по равно)
     ред 2   (W) (V) 🔔 ♡ 🖨                  (само кръгчета)

   Capsule-ът губи номера и рамката си: телефонът е в лентата долу, а
   WhatsApp и Viber остават като самостоятелни кръгчета - тях лентата
   не ги предлага.

   Което може да стане икона - става. Камбанката, сърцето и принтерът
   се разпознават без думи.

   Правилата са след базовите по-горе, за да ги надделеят. Селекторите
   са по data-атрибут, а не по nth-child: редът на бутоните в шаблона
   може да се смени, а намерението "скрий точно този" трябва да остане.
================================================================== */
@media (max-width: 575.98px) {

  /* --- това, което лентата долу вече предлага, отпада оттук ---

     Лентата се вижда през цялото време и в нея стоят телефонът,
     WhatsApp, Viber, Telegram и "Заяви оглед". Да ги дублираме и горе
     е двойно предложение на един екран.

     "Запитване" също отпада: и двата бутона водят до същата
     форма, а вътре в нея има превключвател оглед / въпрос -
     нищо не се губи. */
  .ct-ad-actions [data-inq-jump="visit"],
  .ct-ad-actions [data-inq-jump="question"],
  .ct-ad-contact { display: none; }

  /* остава един ред: "Обадете ми се" и трите кръгчета */
  .ct-ad-actions [data-bs-target="#ctCallback"] {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0 10px;
  }

  /* --- капсулата се разпада до двата месинджъра ---
     Номерът и снимката отпадат, защото обаждането е в лентата долу.
     WhatsApp и Viber обаче ги няма там, затова остават - но вече като
     обикновени кръгчета, без обща рамка. */
  .ct-ad-contact {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    gap: 8px;
    height: auto;
  }
  .ct-ad-contact-main { display: none; }
  .ct-ad-contact-main + .ct-ad-contact-ch::before { display: none; }
  .ct-ad-contact-ch {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }

  /* --- "Известявай за подобни" става камбанка ---
     font-size: 0 скрива само надписа; иконата си има собствен размер.
     Текстът остава в документа, затова екранните четци го четат. */
  .ct-ad-actions [data-bs-target="#ctNotify"] {
    flex: 0 0 46px;
    width: 46px;
    min-width: 46px;
    padding: 0;
    gap: 0;
    font-size: 0;
    border-radius: 50%;
  }
  .ct-ad-actions [data-bs-target="#ctNotify"] .material-icons-outlined { font-size: 20px; }

  /* сърцето и принтерът си остават кръгчета и не се разпъват */
  .ct-ad-actions .ct-ad-icon { flex: 0 0 46px; }
}

/* ==================================================================
   КАНАЛИТЕ В ЛЕПКАВАТА ЛЕНТА

   Вместо "Обади се сега" да отваря избор как да се свържеш, каналите
   стоят отворени. Един допир вместо два, а цветните икони се
   разпознават, без да се четат - зелено е WhatsApp, лилаво е Viber.

   Лентата е единственото място с тези бутони на телефон: горе в
   страницата същите вече не се показват.
================================================================== */
.ct-ad-bar-ch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  text-decoration: none;
  transition: filter .15s, transform .12s;
}
.ct-ad-bar-ch:hover,
.ct-ad-bar-ch:active { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; }
.ct-ad-bar-ch .material-icons { font-size: 21px; }

/* Телефонът е в цвета на темата, а не в чужд - той е "обади се на
   агенцията", не външна услуга. */
.ct-ad-bar-ch.is-phone    { background: var(--ink); }
.ct-ad-bar-ch.is-whatsapp { background: #25d366; }
.ct-ad-bar-ch.is-viber    { background: #7360f2; }
.ct-ad-bar-ch.is-telegram { background: #229ed9; }
.ct-ad-bar-ch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Главният призив заема остатъка от реда. */
.ct-ad-bar-cta { flex: 1 1 0; min-width: 0; }

@media (max-width: 400px) {
  /* На съвсем тесен екран кръгчетата се свиват, за да остане четимо
     място за надписа на бутона. */
  .ct-ad-bar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .ct-ad-bar-ch { flex: 0 0 40px; width: 40px; height: 40px; font-size: 17px; }
  .ct-ad-bar-ch .material-icons { font-size: 19px; }
  .ct-ad-bar .btn { padding: 0 10px; }
}

/* ==================================================================
   "ОБАДЕТЕ МИ СЕ" НА ТЕЛЕФОН

   На компютър бутонът е бял като "Запитване" - акцентът е запазен за
   първия призив. На телефон обаче горният ред е само този бутон и три
   кръгчета: ако и той е бял, в целия ред няма нищо цветно.

   Затова там получава плътния вид обратно. Акцентът на мобилния екран
   и без това живее в лепкавата лента долу.
================================================================== */
@media (max-width: 991.98px) {
  .ct-ad-actions [data-bs-target="#ctCallback"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
}

/* ==================================================================
   ТИХИЯТ АКЦЕНТ ВЪРХУ ПРИЗИВИТЕ

   През известно време един от белите бутони получава кратък проблясък,
   за да не остане незабелязан. Класът се слага и маха от cta_hint.js.

   Два слоя, и двата много леки:

     1. Разширяващ се пръстен в акцентния цвят - като кръг по вода.
        Започва от 22% плътност и се стопява. Не мести нищо, защото е
        box-shadow, не рамка.

     2. Светъл отблясък, който минава косо през бутона. На бял фон се
        вижда като едва доловимо преминаване на светлина.

   И двете траят 1.5s и се появяват веднъж на седем секунди. Целта е
   окото да го хване, а съзнанието - едва.
================================================================== */
.ct-cta-hint {
  position: relative;
  overflow: hidden;
  animation: ctCtaRing 1.5s cubic-bezier(.22, 1, .36, 1);
}

@keyframes ctCtaRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 22%, transparent); }
  60%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* отблясъкът */
.ct-cta-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    color-mix(in srgb, var(--accent) 16%, transparent) 50%,
    transparent 62%
  );
  transform: translateX(-130%);
  animation: ctCtaSheen 1.5s cubic-bezier(.4, 0, .2, 1);
}
@keyframes ctCtaSheen {
  to { transform: translateX(130%); }
}

/* Капсулата с номера си има собствен ::after? Няма - но има деца с
   абсолютни позиции, затова отблясъкът ѝ трябва да е най-отгоре. */
.ct-ad-contact.ct-cta-hint::after { z-index: 2; }

/* Кръгчето на сърцето е малко - пръстенът му стига по-тънък, иначе
   изглежда като ореол. */
.ct-ad-fav.ct-cta-hint { animation-name: ctCtaRingSmall; }
@keyframes ctCtaRingSmall {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 22%, transparent); }
  60%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  /* JS-ът и без това не тръгва при тази настройка - това е предпазна
     мрежа, ако класът все пак попадне върху елемент. */
  .ct-cta-hint,
  .ct-cta-hint::after { animation: none !important; }
}

/* ==================================================================
   ЛОГОТО В ГОРНАТА ЛЕНТА (topLogo)

   Лентата е ниска и служебна, затова логото е дребно и с фиксирана
   височина. Ширината се определя от самия файл - така и квадратно,
   и силно издължено лого се побират без да раздутват лентата.
================================================================== */
.ct-toplogo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 4px;
}
.ct-toplogo img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 210px;
}
/* в основния ред на телефон стои на мястото на обичайното лого,
   затова там важат мерките на .ct-logo */

/* ==================================================================
   СНИМКА НА ДЪРЖАВАТА ЗАД ТЪРСАЧКАТА

   Табовете над търсачката на началната страница сменят фона: вместо
   слайдъра застава снимката на избраната държава.

   Слоят е още един кадър на героя - ползва същите .ct-hero-img и
   .ct-hero-scrim, за да изглежда едно към едно със слайдъра. Стои
   над кадрите (z-index), за да ги покрие без да се бута в тях.

   Разметката е в index_dynamic.html, превключването е в
   themes/clarity/assets/js/hero_country.js.
================================================================== */
.ct-hero-country {
  z-index: 3;
  /* .ct-hero-slide вече е absolute/inset:0 с претопяване - тук само
     се изключва, докато не е избрана държава */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.ct-hero.is-country .ct-hero-country {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Бавното приближаване върви и тук - иначе смяната изглежда като
   залепена картинка, а не като кадър от същия герой. */
.ct-hero.is-country .ct-hero-country .ct-hero-img {
  animation: ctHeroZoom 14s ease-out forwards;
}

/* Текстът влиза плавно, със същото закъснение както при слайдъра. */
.ct-hero.is-country .ct-hero-country .ct-hero-copy > * {
  animation: ctHeroCopy .7s cubic-bezier(.16, 1, .3, 1) backwards;
}

/* Стрелките и точките са на слайдъра - докато отгоре стои снимка на
   държава, те нямат какво да превключват. */
.ct-hero.is-country .ct-hero-arrow,
.ct-hero.is-country .ct-hero-dots-wrap {
  opacity: 0 !important;
  pointer-events: none;
}

/* ==================================================================
   БАЛОНЧЕТО НА БРОКЕРА - ПО-ЕДРО НА ГОЛЕМИ ЕКРАНИ

   На 27" монитор съобщението и снимката изглеждаха като дребна
   бележка в ъгъла - човек я подминава. От 1400px нагоре балончето,
   текстът и снимката се вдигат с около една трета.

   Прагът е нарочно висок: при 1280-1366 (най-масовите лаптопи)
   балончето си остава както досега, за да не изяжда екрана. Под
   768px важи мобилното правило по-горе и то не се пипа.
================================================================== */
@media (min-width: 1400px) {

  /* снимката на брокера */
  .ct-chat-avatar--peek {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
  }

  /* самото балонче */
  .ct-chat-peek-body {
    padding: 16px 38px 16px 20px;
    border-radius: 20px 20px 20px 5px;
  }
  .ct-chat-peek { max-width: 420px; }

  /* името отгоре */
  .ct-chat-peek-name {
    font-size: .8rem;
    letter-spacing: .07em;
    margin-bottom: 6px;
  }

  /* съобщението */
  .ct-chat-peek-text {
    font-size: 1.08rem;
    line-height: 1.5;
  }

  /* точките "пише..." вървят с текста */
  .ct-chat-peek-typing { gap: 5px; }
  .ct-chat-peek-typing i { width: 9px; height: 9px; }

  /* хиксчето да не остане дребно до по-едрия текст */
  .ct-chat-peek-close { width: 28px; height: 28px; top: 8px; right: 8px; }
  .ct-chat-peek-close .material-icons { font-size: 18px; }
}

/* ==================================================================
   КРАТКИЯТ АДРЕС НА ОБЯВАТА + БУТОН "КОПИРАЙ"

   Адресът и бутонът стоят на един ред и центрирани, под иконките за
   споделяне. На тесен екран адресът се пренася, а бутонът пада отдолу.

   Разметката е в templates/modules/social.html - модулът е общ за
   двете теми, затова бутонът носи и класове на Bootstrap: в тема без
   този файл пак изглежда като бутон.
================================================================== */
.ct-copyurl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.ct-copyurl-link {
  font-size: .92rem;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
}
.ct-copyurl-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.ct-copyurl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  line-height: 1.2;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ct-copyurl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ct-copyurl-btn .material-icons { font-size: 17px; }

/* кратко потвърждение, че адресът е в клипборда */
.ct-copyurl-btn.is-done {
  border-color: #2e9e4f;
  color: #2e9e4f;
  background: rgba(46, 158, 79, .08);
}

/* ==================================================================
   КАДЪРЪТ НА ВИДЕОТО В ГАЛЕРИЯТА НА ОБЯВАТА

   Дотук клипът изглеждаше като поредната снимка и никой не се
   досещаше, че се пуска. Сега върху него стои червен кръг с
   триъгълник - познатият знак "пусни" - и кадърът леко потъмнява,
   за да изпъква бутонът.

   Правилото хваща .video-item в галерията (разметката е в
   templates/modules/item_blocks/page_galleries/view_ad_gallery.html).
   Нищо не се пипа в самата галерия: иконката е ::after на връзката.
================================================================== */
.ct-ad-gallery .video-item {
  position: relative;
  display: block;
}

/* леко затъмняване, за да изпъкне бутонът върху светъл кадър */
.ct-ad-gallery .video-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(10, 16, 20, .1), rgba(10, 16, 20, .34));
  transition: background .2s ease;
  pointer-events: none;
}

/* самият бутон "пусни" - червен кръг с бял триъгълник */
.ct-ad-gallery .video-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: #f00 no-repeat center;
  /* бял триъгълник, вграден в CSS - без допълнителен файл */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s;
  pointer-events: none;
}
.ct-ad-gallery .video-item:hover::after { transform: scale(1.08); }
.ct-ad-gallery .video-item:hover::before { background: linear-gradient(to bottom, rgba(10, 16, 20, .04), rgba(10, 16, 20, .22)); }

/* в лентата с малките кадри бутонът е съответно по-малък */
.ct-ad-gallery .gallery-item-visual.video-item::after,
.ct-ad-gallery .ct-ad-thumb.video-item::after {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-size: 19px 19px;
}


/* ==================================================================
   ГАЛЕРИЯТА НА ОБЯВАТА - РАВНИ ВИСОЧИНИ

   Какво не беше наред:

   1) Височината на блока идваше от естествения размер на снимките.
      Страничната колона рядко се получаваше точно колкото главната -
      при две странични снимки оставаше празно отдолу, при три
      изпъкваше надолу.

   2) Главната снимка е <img loading="lazy">. Докато се зареди,
      кутията ѝ е висока нула. При автоматичния клип кадрите са
      абсолютно позиционирани ВЪТРЕ в нея, тоест клипът тръгваше от
      нищо и подскачаше до пълен размер - точно "прескачането с бяло
      пространство".

   И двете се решават от едно нещо: главната снимка получава
   определено съотношение, значи и определена височина, още преди да
   е заредена каквото и да било. Оттам нататък страничната колона се
   опъва до същата височина, а кадрите на клипа запълват кутията от
   първия миг.

   Съотношението 3:2 е близко до това, което се получаваше досега -
   видът не се променя, само престава да играе.
================================================================== */

/* --- 1. главната снимка задава височината --- */
.ct-ad-gallery .row.gallery > [class*="col-"]:first-child > .gallery-item,
.ct-ad-gallery .row.gallery > [class*="col-"]:first-child > .col-12 > .gallery-item {
  aspect-ratio: 3 / 2;
  height: auto;
}

/* всички снимки в галерията запълват кутията си, вместо да я теглят */
.ct-ad-gallery .gallery-item > img,
.ct-ad-gallery .gallery-item-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  /* --- 2. страничната колона се опъва до височината на главната --- */
  .ct-ad-gallery .row.gallery > [class*="col-"]:nth-child(2) > .row {
    height: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    /* Отстъпът между кадърчетата минава от полето на Bootstrap към
       gap. Иначе всяко кадърче носи margin-top, редът е вдигнат с
       отрицателен margin, и последното оставаше с един отстъп
       по-ниско от главната снимка. */
    gap: var(--ct-gallery-gutter);
    --bs-gutter-y: 0;
    margin-top: 0;
  }
  .ct-ad-gallery .row.gallery > [class*="col-"]:nth-child(2) > .row > .col-12 {
    margin-top: 0;
  }
  /* всяко странично кадърче взема равен дял от височината: при две
     снимки - по половина, при три - по една трета */
  .ct-ad-gallery .row.gallery > [class*="col-"]:nth-child(2) > .row > .col-12 {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
  }
  .ct-ad-gallery .row.gallery > [class*="col-"]:nth-child(2) > .row > .col-12 > .gallery-item,
  .ct-ad-gallery .row.gallery > [class*="col-"]:nth-child(2) > .row > .col-12 > .gallery-item-visual {
    width: 100%;
    height: 100%;
  }
}

/* --- 3. долната лента с миниатюри: еднакви кутийки --- */
.ct-ad-gallery .gallery_thumbs .gallery-item {
  aspect-ratio: 4 / 3;
}

/* ==================================================================
   QR КОДЪТ - САМО НА ГОЛЯМ ЕКРАН

   Смисълът му е да прехвърли обявата от компютъра към телефона.
   На самия телефон е безполезен - човекът вече я гледа там, а кодът
   само заема място.

   В шаблона има и проверка $isMobile, но тя чете какъв е браузърът.
   Това правило хваща и останалите случаи: таблет, обърнат телефон,
   смален прозорец на компютър.
================================================================== */
@media (max-width: 991.98px) {
  .ct-ad-qr { display: none !important; }
}

/* ==================================================================
   БЛОКЪТ ЗА СПОДЕЛЯНЕ - БЕЗ ЧЕРТА ОТГОРЕ

   .ct-ad-block рисува тънка черта над всяка секция, за да отделя
   текстовите блокове един от друг. Над иконките за споделяне тя
   увисваше сама: отгоре стои рамкирана карта (калкулаторът), после
   празно, после черта, после празно - чертата не разделяше нищо.

   Махната е, а отстъпът отгоре е леко увеличен, за да не изглеждат
   иконките залепени за блока над тях.
================================================================== */
.ct-ad-share {
  border-top: 0;
  padding-top: 8px;
}

/* ==================================================================
   ПОКАНА ЗА РАБОТА ПОД ЕКИПА

   Хоризонтална лента: иконка, текст, бутон. Нарочно е по-спокойна от
   призивите за купувачи - това е покана към колега, не реклама.

   Разметката е в templates/list_firms.html (общ шаблон за двете теми),
   затова бутонът носи и класа .btn на Bootstrap.
================================================================== */
/* Секцията носи и класа .container, за да е точно колкото решетката
   с брокерите. margin отстрани е auto, иначе центрирането на
   контейнера се губи и блокът увисва вляво. */
.ct-career {
  margin: 40px auto 8px;
  /* Контейнерът има 12px отстрани. Решетката с брокерите добавя
     още 12px от своя gutter (gx-4), затова самите кутийки започват
     12px по-навътре. Удвоеният отстъп изравнява поканата точно с
     тях - иначе стърчи с по 12px от двете страни. */
  padding-left: 24px;
  padding-right: 24px;
}
.ct-career-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.ct-career-icon {
  flex: 0 0 auto;
  font-size: 34px;
  color: var(--accent);
}
.ct-career-copy { flex: 1 1 auto; min-width: 0; }
.ct-career-title {
  margin: 0 0 4px;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
}
.ct-career-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.ct-career-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background .2s, transform .15s;
}
.ct-career-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.ct-career-btn .material-icons { font-size: 18px; }

@media (max-width: 767.98px) {
  .ct-career-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
  }
  .ct-career-btn { width: 100%; justify-content: center; }
}

/* ==================================================================
   ПАНЕЛИТЕ НА ФОРМИТЕ ("Оцени имота", "Добави имот")

   Разметката ползва .bg-faded-primary и .border-primary от theme.css.
   Там "primary" е оранжево-червеното на рамката (#fd5631), затова
   панелът излизаше бледорозов - цвят, който в целия интерфейс значи
   "нещо не е наред". Човек, който тепърва ще си оставя данните, не
   бива да го посреща предупредителен цвят.

   Тук двете се връзват за акцента на темата при много ниска
   наситеност. Така панелът е спокоен и върви със скина: при морско
   синьо е бледосин, при бежово - бледопясъчен.

   color-mix го няма в по-стари браузъри, затова преди него стои
   обикновен неутрален фон - те виждат сивото на темата.
================================================================== */
.bg-faded-primary {
  background-color: var(--paper-2) !important;
  background-color: color-mix(in srgb, var(--accent) 7%, #ffffff) !important;
}
.border-primary {
  border-color: var(--line) !important;
  border-color: color-mix(in srgb, var(--accent) 24%, #ffffff) !important;
}

/* ==================================================================
   WHATSAPP, VIBER И ОБАЖДАНЕ В ГОРНАТА ЛЕНТА НА ТЕЛЕФОН

   Трите канала за връзка стоят като голи иконки - без рамка и без
   бял квадрат отдолу.

   Причината е място: на 360px логото, три рамкирани квадрата по 44px
   и бургерът се наблъскват един в друг и редът изглежда претъпкан.
   Рамките и без това не носят смисъл - слушалката, WhatsApp и Viber
   се разпознават сами, а познатите зелено и лилаво ги отделят
   по-добре от всякакъв кант.

   Бургерът също остава без рамка, иначе щеше да е единственото
   квадратче в реда и да изглежда като чужд елемент.
================================================================== */
@media (max-width: 991.98px) {
  .ct-phone-mobile,
  .ct-burger {
    width: 34px;
    height: 40px;
    border: 0;
    background: none;
    border-radius: 0;
  }

  /* иконките порастват - без рамка наоколо имат нужда от собствена
     тежест, за да не изглеждат изгубени до логото */
  .ct-phone-mobile { font-size: 21px; }
  .ct-chan-mobile  { font-size: 22px; }

  .ct-chan-mobile.is-whatsapp { color: #25d366; }
  .ct-chan-mobile.is-viber    { color: #7360f2; }

  /* натиснато състояние: вместо рамка - лек фон само докато пръстът
     е върху иконката */
  .ct-phone-mobile:active,
  .ct-burger:active {
    background: rgba(0, 0, 0, .06);
    border-radius: 8px;
  }

  .ct-mainbar-inner { gap: 4px; }
}

/* Групата иконки се отделя от логото. Без този отстъп слушалката
   опира в последната буква на името и двете се четат като едно. */
@media (max-width: 991.98px) {
  .ct-mainbar-inner .ct-phone-mobile:first-of-type { margin-left: 8px; }
}

/* Малки лаптопи (екран до ~820px височина): по-нисък слайдър, за да се вижда
   и търсачката под него без превъртане. */
@media (min-width: 992px) and (max-height: 820px) {
  .ct-hero { min-height: clamp(300px, 44vh, 380px); }
  .ct-hero-inner { padding-top: 48px; }
}

/* Комплекс и строител под описанието на имота. auto-fit: една карта заема
   цялата ширина, две стоят една до друга, на телефон - една под друга. */
.ct-ad-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ct-ad-info { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.ct-ad-info__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ct-ad-info__head > div { min-width: 0; }
.ct-ad-info__head small { display: block; color: var(--ink-2); font-size: .85rem; }
.ct-ad-info__pic { flex: 0 0 64px; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); color: var(--accent); }
.ct-ad-info__pic img { width: 100%; height: 100%; object-fit: cover; }
.ct-ad-info__pic .material-icons-outlined { font-size: 30px; }
.ct-ad-info__name { margin: 2px 0 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.ct-ad-info__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); font-size: .94rem; }
.ct-ad-info__facts b { color: var(--ink); font-weight: 600; }
.ct-ad-info__text { margin: 0; color: var(--ink-2); font-size: .96rem; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ct-ad-info__features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .94rem; color: var(--ink); }
.ct-ad-info__features li { display: inline-flex; align-items: center; gap: 5px; }
.ct-ad-info__features .material-icons { font-size: 17px; color: var(--accent); }