/* ============================================================
   PROPERTY.CSS — Стилове за property detail страницата
   Включва: base (tokens + header), card signals,
   detail-override, + inline стилове от property.tpl
   ============================================================ */

:root {
  --color-primary:        #1563df;
  --color-primary-dark:   #0e49a6;
  --color-primary-light:  #E7F0FF;
  --color-primary-rgb:    21, 99, 223;
  --color-accent:         #00C4B3;
  --color-accent-dark:    #009e90;
  --color-accent-light:   #e0faf8;
  --color-accent-rgb:     0, 196, 179;
  --color-white:          #ffffff;
  --color-black:          #161e2d;
  --color-gray-50:        #f8f9fb;
  --color-gray-100:       #f3f4f6;
  --color-gray-200:       #e4e4e4;
  --color-text-primary:   #161e2d;
  --color-text-secondary: #5c6368;
  --color-text-muted:     #8a8aa0;
  --color-bg-surface:     #f8f9fb;
  --color-border:         #e8eaf0;
  --color-border-focus:   #1563df;
  --color-success:        #25c55b;
  --color-error:          #c72929;
  --font-family:          'Manrope', sans-serif;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --shadow-sm:   0 2px 8px rgba(22,30,45,.06);
  --shadow-md:   0 4px 16px rgba(22,30,45,.10);
  --shadow-lg:   0 8px 32px rgba(22,30,45,.12);
  --transition:  all .2s ease;

  --bs-blue: #0047AB; --bs-primary: #0047AB; --bs-link-color: #0047AB;
  --bs-btn-bg: #0047AB; --bs-btn-border-color: #0047AB;
  --bs-btn-hover-bg: #0047AB; --bs-btn-active-bg: #0047AB;
  --bs-pagination-active-bg: #0047AB; --bs-pagination-active-border-color: #0047AB;
  --bs-list-group-active-bg: #0047AB; --bs-list-group-active-border-color: #0047AB;
}

/* ── Shared utilities ── */
.btn-line { border: 1px solid #161e2d; }
.icon-fill { fill: currentColor; }
.tf-btn.primary { background-color: #0047AB; }

/* ── Header ── */
.main-header .main-menu .navigation > li > a { text-transform: none; }
.inner-header { display: flex; align-items: center; gap: 20px; }
.inner-header-right .tf-btn { min-width: 0 !important; }
.inner-header-center {
  display: flex; min-width: 0; flex: 0; overflow: hidden; opacity: 0; max-width: 0;
  justify-content: center;
  transition: flex 300ms ease, opacity 300ms ease, max-width 300ms ease;
}
.main-header.header--search-mode .inner-header-center { flex: 1; opacity: 1; max-width: 870px; overflow: visible; }
.main-header.header--search-mode #header-menu { width: 1px; height: 75px; overflow: hidden; }
.main-header.header--search-mode .logo-text,
.main-header.header--search-mode .login-text { display: none; }
.main-header.header--search-mode .inner-header-left { gap: 0 !important; }
.hd-find-select { display: flex; background-color: #fff; width: 100%; max-width: 870px; margin: 0 auto; border-radius: 999px; }
.hd-find-select .form-style,
.hd-find-select .form-control { border: none !important; line-height: 16px !important; width: 100%; }
.hd-find-select .box-btn-advanced { display: flex; gap: 10px; }
.hd-find-select .box-btn-advanced .tf-btn { min-height: 0; min-width: 0; padding: 10px 15px !important; }
.inner-header-center .inner-group {
  padding: 5px; margin: 0 auto; flex-wrap: nowrap; display: flex; gap: 20px;
  flex-grow: 1; border: 1px solid #161e2d; border-radius: 999px; width: 100%; max-width: 870px; transition: border 500ms ease;
}
#header-search-form:has(input:focus) .inner-group { border-color: transparent; }

.ai-border { position: relative; transition: box-shadow .2s ease; }
.ai-border::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  background: linear-gradient(var(--angle), rgba(0,71,171,.6), rgba(0,196,179,.6), rgba(0,71,171,.6), rgba(0,196,179,.6));
  z-index: -1; opacity: 0; transition: opacity .2s ease;
  box-shadow: 0 0 10px 2px rgba(0,196,179,.3); isolation: isolate;
}
.ai-border:has(input:focus)::before { opacity: 1; animation: 5s rotate linear infinite; }
@keyframes rotate { to { --angle: 360deg; } }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ── Detail Override ── */
.single-property-element { border-radius: var(--radius-lg) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm) !important; padding: 24px !important; margin-bottom: 16px !important; }
.badge-type, .badge-property-type { background: var(--color-primary-light) !important; color: var(--color-primary) !important; border: 1px solid rgba(21,99,223,.15) !important; border-radius: var(--radius-full) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; padding: 3px 10px !important; }
.price-1, h2.price, .header-property-detail h2 { color: var(--color-primary) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.btn-action-property { height: 40px !important; padding: 0 16px !important; border-radius: var(--radius-full) !important; border: 1px solid var(--color-border) !important; background: var(--color-white) !important; color: var(--color-text-secondary) !important; font-size: 13px !important; font-weight: 600 !important; transition: var(--transition) !important; }
.btn-action-property:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; background: var(--color-primary-light) !important; }
.box-pros { background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-radius: var(--radius-md) !important; padding: 16px !important; height: 100% !important; }
.box-pros .title { color: #16a34a !important; }
.box-pros svg { stroke: #16a34a !important; }
.box-cons { background: #fef2f2 !important; border: 1px solid #fecaca !important; border-radius: var(--radius-md) !important; padding: 16px !important; height: 100% !important; }
.box-cons .title { color: #dc2626 !important; }
.box-cons svg { stroke: #dc2626 !important; }
.single-property-layout ul { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; }
.single-property-layout ul li { padding: 6px 14px !important; border-radius: var(--radius-full) !important; background: var(--color-gray-50) !important; border: 1px solid var(--color-border) !important; font-size: 13px !important; font-weight: 500 !important; }
.single-property-feature .feature-item, .single-property-feature li { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 12px !important; border-radius: var(--radius-full) !important; background: var(--color-gray-50) !important; border: 1px solid var(--color-border) !important; font-size: 12px !important; font-weight: 500 !important; margin: 0 6px 6px 0 !important; }
.single-property-contact input, .single-property-contact textarea { border: 1px solid var(--color-border) !important; border-radius: var(--radius-md) !important; background: var(--color-bg-surface) !important; transition: var(--transition) !important; }
.single-property-contact input:focus, .single-property-contact textarea:focus { border-color: var(--color-primary) !important; background: var(--color-white) !important; outline: none !important; }
.single-property-contact .tf-btn[type=submit], .single-property-contact button[type=submit] { border-radius: var(--radius-full) !important; background: var(--color-primary) !important; font-weight: 700 !important; transition: var(--transition) !important; }
.single-property-contact .tf-btn[type=submit]:hover { background: var(--color-primary-dark) !important; box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),.35) !important; }
.listing-row { border-radius: var(--radius-md) !important; border: 1px solid var(--color-border) !important; background: var(--color-bg-surface) !important; transition: border-color .2s, background .2s !important; }
.listing-row:hover { border-color: var(--color-primary) !important; background: var(--color-primary-light) !important; }
.listing-price { color: var(--color-primary) !important; font-weight: 700 !important; }
.listing-status-badge { border-radius: var(--radius-full) !important; padding: 2px 10px !important; font-size: 11px !important; font-weight: 600 !important; }
.listing-active { background: #f0fdf4 !important; color: #16a34a !important; border: 1px solid #bbf7d0 !important; }
.listing-inactive { background: #f9fafb !important; color: #6b7280 !important; border: 1px solid var(--color-border) !important; }
.box-pros p, .box-cons p { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 6px 0 !important; border-bottom: 1px solid rgba(0,0,0,.04) !important; font-size: 13px !important; line-height: 1.45 !important; margin: 0 !important; }
.box-pros p:last-child, .box-cons p:last-child { border-bottom: none !important; }
.single-property-info .inner-box { border-bottom: 1px solid #f0f2f5 !important; padding: 10px 0 !important; }
.single-property-info .inner-box .label { font-size: 13px !important; color: var(--color-text-muted) !important; font-weight: 500 !important; }
.single-property-info .inner-box .content { font-size: 13px !important; color: var(--color-text-primary) !important; font-weight: 600 !important; }
.single-property-layout ul li:hover { background: var(--color-primary-light) !important; border-color: var(--color-primary) !important; }
.single-property-feature .feature-item:hover, .single-property-feature li:hover { background: var(--color-primary-light) !important; border-color: var(--color-primary) !important; }
.single-property-feature .feature-item svg, .single-property-feature li svg { color: var(--color-primary) !important; width: 13px !important; height: 13px !important; }
.badge-ai-label { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; padding: 2px 8px !important; border-radius: var(--radius-full) !important; background: var(--color-accent-light) !important; color: var(--color-accent-dark) !important; border: 1px solid rgba(0,196,179,.2) !important; }
.badge-ai-label::before { content: '' !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--color-accent) !important; }
.section-title-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; }
.section-title-row .title { margin: 0 !important; }

/* ── Card signal pills ── */
.homelengo-box .im-signal { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; line-height: 1.3; width: fit-content; white-space: nowrap; }
.homelengo-box .im-signal--good    { color: #15803d; background: #dcfce7; }
.homelengo-box .im-signal--bad     { color: #92400e; background: #fef3c7; }
.homelengo-box .im-signal--warn    { color: #b91c1c; background: #fee2e2; }
.homelengo-box .im-signal--neutral { color: #4b5563; background: var(--color-gray-100); }


.feature-item { flex: 0 0 calc(33.333% - 20px); }
@media (max-width: 768px) { .feature-item { flex: 0 0 calc(50% - 15px); } }

.flat-section-v4 { padding-top: 0; padding-bottom: 0; }
h1.title { width: 100%; }
h1.title::first-letter { text-transform: capitalize; }
.icon-box a:hover svg { stroke: #fff; }
.btn-imotbg { border: 1px solid #B90900; }
.img-agency { max-height: 24px; }
.flat-property-detail-v2 .single-property-element:not(:last-child) { border-bottom: none; margin-bottom: 30px; }

.quick-facts { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.quick-facts .fact-item { display: flex; align-items: center; gap: 6px; color: #5c6368; font-size: 14px; }
.quick-facts .fact-item span.fw-6 { color: #161e2d; }

.location-breadcrumb { display: flex; align-items: center; gap: 4px; color: #5c6368; font-size: 14px; margin-top: 4px; }
.location-breadcrumb svg { flex-shrink: 0; }

.badge-type { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.badge-sale { background-color: #e8f5e9; color: #2e7d32; }
.badge-rent { background-color: #e3f2fd; color: #1565c0; }
.header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.date-updated { font-size: 13px; color: #5c6368; margin-top: 4px; }

.duplicates-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff3e0; border: 1px solid #ffcc80; border-radius: 8px; color: #e65100; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.duplicates-badge:hover { background: #ffe0b2; }

.break { flex-basis: 100%; height: 0; }
.mb-n3 { margin-bottom: -2.25rem !important; }
.pt-4_5 { padding-top: 1.75rem !important; }

.box-rating svg { stroke: #161e2d; margin-right: 3px; }
.box-rating span { margin-left: 10px; margin-right: 5px; color: #5c6368; }
#price-history-button { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #e4e4e4; border-radius: 10px; }
.rating-very-bad { color: var(--bs-danger); }
.rating-bad { color: #ee6742; }
.rating-neutral { color: var(--bs-info); }
.rating-good, .rating-very-good { color: var(--bs-success); }

.single-property-info .inner-box .label { width: 50%; }
ul.list-circle li { list-style: circle; margin-left: 20px; padding-top: 5px; }
.single-property-element .title { text-transform: initial; }
.internal-link { text-decoration: underline; display: inline; padding: 5px; }
.internal-link:before { content: "• "; }

.listings-list { display: flex; flex-direction: column; gap: 12px; }
.listing-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px 16px; }
.listing-source { min-width: 80px; }
.listing-price { min-width: 100px; }
.listing-agency { flex: 1; font-size: 14px; }
.listing-dates { font-size: 13px; white-space: nowrap; }

/* ── Responsive: header ── */
@media only screen and (min-width: 1520px) { .main-header .inner-header-left { gap: 160px; } }
@media only screen and (max-width: 1520px) { .main-header .inner-header-left { gap: 50px; } }
@media only screen and (max-width: 1099px) {
  .inner-header-center .inner-group { margin: 0 auto; }
  .hd-find-select, .hd-find-select .form-style, .hd-find-select .form-control { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 38px !important; }
}
@media only screen and (max-width: 575px) {
  .hd-find-select .tf-btn { padding: 5px 20px; }
  .hd-find-select .form-control { line-height: 33px !important; }
  .main-header.header--search-mode .inner-header-left { display: none !important; }
}

/* ── Property header: 2-column layout ── */

/* Shared utilities */
.icon-box a:hover svg { stroke: #fff; }
.btn-imotbg { border: 1px solid #B90900; }
.img-agency { max-height: 24px; }
.flat-property-detail-v2 .single-property-element:not(:last-child) { border-bottom: none; margin-bottom: 30px; }

/* Badge types */
.badge-type {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.badge-sale     { background-color: #e8f5e9; color: #2e7d32; }
.badge-rent     { background-color: #e3f2fd; color: #1565c0; }
.badge-property-type { background-color: #f3e5f5; color: #7b1fa2; }

/* Quick facts */
.quick-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
}
.quick-facts .fact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5c6368;
  font-size: 14px;
}
.quick-facts .fact-item span.fw-6 { color: #161e2d; }

/* Fix Bootstrap row negative margins inside flex container */
.content-top .row {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.content-top .row > [class*="col"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.content-top .row > .col.col-lg-9 {
  padding-right: 32px !important;
}

/* H1 */
.content-top h1.title.fw-8 {
  font-size: 46px;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* Row 2: badges + address + date on one line */
.header-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.header-meta-row .badge-type {
  font-size: 11px !important;
  padding: 3px 10px !important;
  line-height: 1.4 !important;
}
.header-meta-row a.location-breadcrumba {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  color: #5c6368 !important;
  font-size: 13px !important;
  text-decoration: none !important;
}
.header-meta-row .date-updated {
  display: inline !important;
  font-size: 12px !important;
  /*color: #8a8aa0 !important;*/
  margin-top: 0 !important;
}
.header-meta-sep {
  color: #c4c9d0;
  font-size: 12px;
  line-height: 1;
}

/* Quick facts */
.content-top .quick-facts {
  margin-top: 12px !important;
  gap: 16px !important;
}
.content-top .quick-facts .fact-item {
  font-size: 13px !important;
  color: #5c6368 !important;
}
.content-top .quick-facts .fact-item .fw-6 {
  color: #161e2d !important;
}

/* Right column: price + signals — desktop */
.header-property-detail .im-price-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  gap: 3px !important;
}
/* Signal+ref group — column on desktop (stacked), row container on mobile */
.im-price-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.im-price-row .im-signal {
  font-size: 13px !important;
  padding: 4px 10px !important;
}
.im-price-row .im-market-ref {
  font-size: 11px !important;
  text-align: right !important;
  color: #8a8aa0 !important;
  margin: 0 0 6px 0 !important;
}
.im-price-row .m-4 {
  margin: 0 !important;
  text-align: right !important;
}
.im-price-row .m-4 p.fw-8.fs-1 {
  font-size: 28px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: right !important;
}
.im-price-row .m-4 p.fw-8.m-2 {
  font-size: 13px !important;
  margin: 2px 0 0 0 !important;
  text-align: right !important;
}
.im-price-row .im-yield {
  align-items: flex-end !important;
  padding-top: 8px !important;
  width: 100% !important;
  margin-top: 4px !important;
}
.im-price-row .im-yield-top {
  justify-content: flex-end !important;
}
.im-price-row .im-yield-grade {
  text-align: right !important;
  padding-left: 0 !important;
}

/* ── Responsive: detail ── */
@media (max-width: 767px) {
  .single-property-element { padding: 16px !important; }
  h2.price, .price-1 { font-size: 24px !important; }
  .single-property-pros-cons .row { flex-direction: column !important; }
  .single-property-pros-cons .col-md-6 { width: 100% !important; }
  .single-property-pros-cons .col-md-6 + .col-md-6 { margin-top: 12px !important; }
  .property-actions, .icon-box { flex-wrap: wrap !important; }
  .exposure-compass-wrap { flex-direction: column !important; align-items: flex-start !important; }

  /* Reset desktop 2-col to stacked
  .content-top .row { flex-direction: column !important; }
  .content-top .row > .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-right: 0 !important;
  } */

  /* Price block: comes FIRST (above title) — like search card.
     Same specificity as desktop: .header-property-detail .im-price-row */
  .header-property-detail .im-price-row {
    order: -1 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 12px !important;
  }

  /* Signal + market ref: left side */
  .header-property-detail .im-price-left {
    align-items: flex-start !important;
  }
  .header-property-detail .im-price-row .im-signal { font-size: 12px !important; padding: 3px 9px !important; }
  .header-property-detail .im-price-row .im-market-ref { text-align: left !important; margin: 0 !important; }

  /* Price: right side */
  .header-property-detail .im-price-row .m-4 { margin: 0 !important; text-align: right !important; }
  .header-property-detail .im-price-row .m-4 p.fw-8.fs-1 { font-size: 22px !important; line-height: 1.2 !important; margin: 0 !important; }
  .header-property-detail .im-price-row .m-4 p.fw-8.m-2 { font-size: 12px !important; margin: 1px 0 0 0 !important; }

  /* Yield: full-width row below signal+price */
  .header-property-detail .im-price-row .im-yield {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding-top: 0 !important;
    border-top: none !important;
    margin-top: 0 !important;
  }
  .header-property-detail .im-price-row .im-yield-top { justify-content: flex-start !important; }
  .header-property-detail .im-price-row .im-yield-grade { text-align: left !important; padding-left: 0 !important; }

  /* H1 */
  .content-top h1.title.fw-8 { font-size: 20px !important; line-height: 1.3 !important; }

  /* Meta row: wrap naturally, date goes inline */
  .header-meta-row { gap: 6px !important; }
  .header-meta-sep { display: none !important; }
  .header-meta-row a.location-breadcrumba,
  .header-meta-row .date-updated { font-size: 12px !important; }
}