/* ==========================================================================
   Zillionaire Realty — additions on top of the Homelengo theme.
   Everything here covers components the original static site did not have
   (blog, property detail, flash messages) using the same palette and radii
   so the new pages sit flush with the old design.
   Palette: brass #b6892b · ink #161e2d · slate #5c6368 · line #e4e4e4
   ========================================================================== */

/* ---------- skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3000;
  background: #161e2d;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}

/* ---------- header call-to-action ---------- */
.header-cta-box .tf-btn {
  white-space: nowrap;
}
.header-cta-box .tf-btn .icon {
  font-size: 16px;
  vertical-align: -1px;
}

/* ---------- page title band ---------- */
.flat-title-page .band-lede {
  max-width: 640px;
  margin: 14px auto 0;
  opacity: .85;
}
.breadcrumb-light {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: 14px;
  color: #5c6368;
}
.breadcrumb-light a {
  color: #5c6368;
}
.breadcrumb-light a:hover {
  color: #b6892b;
}

/* ---------- flash messages ---------- */
.tf-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.tf-alert .icon {
  flex-shrink: 0;
  margin-top: 3px;
}
.tf-alert.is-success {
  background: #f1f7f1;
  border-color: #cfe3cf;
  color: #2f6b34;
}
.tf-alert.is-error {
  background: #fdf2f2;
  border-color: #f3d2d2;
  color: #a53131;
}

/* ---------- forms ---------- */
.form-enquiry fieldset {
  margin-bottom: 16px;
}
.form-enquiry .form-note {
  font-size: 13px;
}
.footer-field {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
}
.footer-field::placeholder {
  color: rgba(255, 255, 255, .5);
}
.footer-field:focus {
  outline: none;
  border-color: #b6892b;
}

/* ---------- empty states ---------- */
.tf-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed #e4e4e4;
  border-radius: 16px;
  background: #fcfcfc;
}
.tf-empty h5 {
  margin-bottom: 8px;
}

/* ---------- listing results: grid / list toggle ----------
   Cards render both the image-overlay locality (grid) and the inline
   locality line (list); the active layout shows only the right one. */
#propertyResults > .col-item {
  flex: 0 0 100%;
  max-width: 100%;
}
.homelengo-box.list-style-1 .images-group .bottom { display: none; }
.homelengo-box:not(.list-style-1) .archive-bottom .location { display: none; }

@media (min-width: 768px) {
  #propertyResults[data-layout="grid"] > .col-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 1200px) {
  #propertyResults[data-layout="grid"] > .col-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* ---------- filter bar ---------- */
.filter-bar {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 30px;
}
.filter-bar label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #5c6368;
  margin-bottom: 6px;
}
.filter-bar .form-control,
.filter-bar .form-select {
  height: 48px;
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
  border-color: #b6892b;
  box-shadow: none;
}
.result-count {
  font-size: 15px;
  color: #5c6368;
}
.result-count strong {
  color: #161e2d;
}

/* ---------- property detail ---------- */
.detail-gallery-main {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.detail-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-thumbs img {
  border-radius: 10px;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color .25s ease;
}
.detail-thumbs img.active,
.detail-thumbs img:hover {
  border-color: #b6892b;
}
.detail-price {
  font-size: 30px;
  font-weight: 700;
  color: #b6892b;
  line-height: 1.2;
}
.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
  font-weight: 500;
  color: #161e2d;
  background: #fff;
}
.sticky-panel {
  position: sticky;
  top: 110px;
}
@media (max-width: 991px) {
  .sticky-panel { position: static; }
}
.entry-prose {
  color: #5c6368;
  line-height: 1.75;
}
.entry-prose h2,
.entry-prose h3,
.entry-prose h4 {
  color: #161e2d;
  margin: 32px 0 14px;
}
.entry-prose h2 { font-size: 26px; }
.entry-prose h3 { font-size: 22px; }
.entry-prose h4 { font-size: 18px; }
.entry-prose p { margin-bottom: 16px; }
.entry-prose ul,
.entry-prose ol { margin: 0 0 16px 20px; }
.entry-prose li { margin-bottom: 8px; }
.entry-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 20px 0;
}
.entry-prose blockquote {
  margin: 24px 0;
  padding: 18px 24px;
  border-left: 3px solid #b6892b;
  background: #faf7f0;
  border-radius: 0 12px 12px 0;
  color: #161e2d;
}
.entry-prose a { color: #b6892b; text-decoration: underline; }
.entry-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.entry-prose th,
.entry-prose td {
  border: 1px solid #e4e4e4;
  padding: 10px 14px;
  text-align: left;
}

/* ---------- blog cards ---------- */
.blog-box {
  display: block;
  height: 100%;
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .3s ease, transform .3s ease;
}
.blog-box:hover {
  box-shadow: 0 12px 30px rgba(22, 30, 45, .08);
  transform: translateY(-4px);
}
.blog-box .image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #161e2d;
}
.blog-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.blog-box:hover .image img {
  transform: scale(1.06);
}
.blog-box .image.no-img {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b6892b;
  font-size: 42px;
  font-weight: 700;
}
.blog-box .content {
  padding: 22px;
}
.blog-box .meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #b6892b;
  margin-bottom: 10px;
}
.blog-box h6 {
  margin-bottom: 10px;
  color: #161e2d;
}
.blog-box p {
  color: #5c6368;
  font-size: 15px;
  margin-bottom: 14px;
}
.blog-box .read-more {
  font-weight: 600;
  font-size: 14px;
  color: #161e2d;
}
.blog-box:hover .read-more {
  color: #b6892b;
}

/* ---------- sidebar widgets ---------- */
.widget-box {
  border: 1px solid #e4e4e4;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  background: #fff;
}
.widget-box.is-dark {
  background: #161e2d;
  border-color: #161e2d;
  color: rgba(255, 255, 255, .75);
}
.widget-box.is-dark h5,
.widget-box.is-dark h6 {
  color: #fff;
}
.widget-box h5 {
  margin-bottom: 16px;
}
.widget-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.widget-links li + li {
  margin-top: 10px;
}
.widget-links a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #5c6368;
  font-size: 15px;
}
.widget-links a:hover,
.widget-links a.active {
  color: #b6892b;
  font-weight: 600;
}

/* ---------- share row ---------- */
.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e4e4e4;
}

/* ---------- stats strip ---------- */
.stat-box {
  text-align: center;
  padding: 24px 12px;
}
.stat-box .num {
  font-size: 40px;
  font-weight: 700;
  color: #b6892b;
  line-height: 1;
}
.stat-box .label {
  margin-top: 8px;
  font-size: 14px;
  color: #5c6368;
}

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  left: 24px;
  bottom: 28px;
  z-index: 999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
  transition: transform .25s ease;
}
.wa-float:hover {
  transform: scale(1.08);
}
@media (max-width: 767px) {
  .wa-float { left: 16px; bottom: 20px; width: 46px; height: 46px; }
}

/* ---------- misc ---------- */
.text-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.map-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e4e4e4;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- flash strip ---------- */
.flash-strip {
  padding-top: 100px;
  padding-bottom: 4px;
}
.flash-strip + .flat-title-page,
.flash-strip + section .flat-slider {
  margin-top: 0;
}