/* ============================================================
   HOMEFINDER — MODERN FRONTEND LAYER  v3.0
   Loaded AFTER style.css + responsive.css. Targets the THEME's
   real classes (.product-default, .banner-filter-form,
   .section-title, .header-area …) so the refresh is visible, not
   subtle. Aesthetic-only; revert by removing the <link>.
   ============================================================ */

/* ---------- 1. Design tokens ------------------------------- */
:root {
  --color-primary: #F57F4B;
  --color-primary-rgb: 245, 127, 75;
  --color-primary-hover: #ec6a31;
  --color-secondary: #255056;
  --color-secondary-rgb: 37, 80, 86;
  --hf-ink: #0f172a;
  --hf-body: #334155;
  --hf-muted: #64748b;
  --hf-line: #e9edf3;
  --hf-bg-soft: #f6f8fb;
  --font-family-base: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --hf-radius: 16px;
  --hf-radius-sm: 11px;
  --hf-radius-pill: 999px;
  --hf-shadow-sm: 0 2px 12px rgba(15,23,42,.06);
  --hf-shadow: 0 10px 30px rgba(15,23,42,.09);
  --hf-shadow-lg: 0 22px 50px rgba(15,23,42,.16);
  --hf-ease: cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base typography ----------------------------- */
body { font-family: var(--font-body); color: var(--hf-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,h4,h5,h6,.title { font-family: var(--font-family-base); color: var(--hf-ink); font-weight: 700; letter-spacing: -.015em; }
p { line-height: 1.7; }
a { transition: color .15s var(--hf-ease); }

/* ---------- 3. Section headings ---------------------------- */
.section-title .title, .content-title h2 { font-weight: 800; letter-spacing: -.02em; }
.section-title .title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); position: relative; }
.content-title .subtitle { color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.content-title .subtitle .line { background: var(--color-primary); }
.color-primary { color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }

/* ---------- 4. HERO --------------------------------------- */
.home-banner-1 { position: relative; }
.home-banner-1 .bg-img { filter: saturate(1.03); }
.home-banner-1 .content .title { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem); font-weight: 800; line-height: 1.1; text-shadow: 0 1px 2px rgba(255,255,255,.35); }
.home-banner-1 .content .text { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); font-weight: 500; }

/* ---------- 5. HERO SEARCH CARD --------------------------- */
/* The theme already renders the white card on the INNER .form-wrapper; only
   refine THAT — do NOT add a second card on the outer .banner-filter-form
   (that created the empty dead space). Keep the outer wrapper transparent. */
.home-banner .banner-filter-form .tab-content,
.home-banner .banner-filter-form .form-wrapper {
  border: 1px solid var(--hf-line) !important;
  border-radius: var(--hf-radius) !important;
  box-shadow: var(--hf-shadow) !important;
}
.banner-filter-form .nav .nav-link { border-radius: var(--hf-radius-pill); font-weight: 700; }
.banner-filter-form .nav .nav-link:is(.active, :hover) { box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), .30); }
.banner-filter-form .form-group label { font-weight: 600; color: var(--hf-body); font-size: 13px; }
.banner-filter-form .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15) !important; }

/* ---------- 6. BUTTONS ------------------------------------ */
.btn, .theme-btn, .btn-primary, button[type=submit].btn {
  border-radius: var(--hf-radius-sm); font-weight: 700; letter-spacing: .01em; transition: transform .16s var(--hf-ease), box-shadow .16s var(--hf-ease), background-color .16s var(--hf-ease);
}
.btn-primary, .theme-btn { background-color: var(--color-primary); border-color: var(--color-primary); color:#fff; }
.btn-primary:hover, .theme-btn:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--color-primary-rgb),.34); color:#fff; }
.btn:active, .theme-btn:active { transform: translateY(0); }

/* ---------- 7. PROPERTY CARD (.product-default) ----------- */
.product-default {
  background:#fff;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius) !important;
  box-shadow: var(--hf-shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--hf-ease), box-shadow .25s var(--hf-ease), border-color .25s var(--hf-ease);
}
.product-default:hover { transform: translateY(-6px); box-shadow: var(--hf-shadow-lg); border-color: transparent; }
.product-default .product-img { overflow: hidden; }
.product-default .product-img img { transition: transform .5s var(--hf-ease); width:100%; height:100%; object-fit: cover; }
.product-default:hover .product-img img { transform: scale(1.06); }
.product-default .product-details { padding: 16px 18px 18px; }
.product-default .product-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.product-default .product-title a { color: var(--hf-ink); }
.product-default .product-title a:hover { color: var(--color-primary); }
.product-default .product-location { color: var(--hf-muted); font-size: 13.5px; }
.product-default .product-category { background: rgba(var(--color-secondary-rgb),.08); color: var(--color-secondary); border-radius: var(--hf-radius-pill); padding: 4px 12px; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.product-default .product-price .new-price { color: var(--color-primary); font-weight: 800; font-size: 18px; }
.product-default .product-info { gap: 14px; margin-top: 12px; padding-top: 12px !important; border-top: 1px solid var(--hf-line); }
.product-default .product-info li { color: var(--hf-body); font-weight: 600; font-size: 13px; }
.product-default .product-info i { color: var(--color-primary); }
.product-default .label {
  background: var(--color-primary); color:#fff; border-radius: var(--hf-radius-pill);
  font-weight: 700; font-size: 11.5px; letter-spacing: .03em; padding: 5px 14px;
  box-shadow: 0 6px 16px rgba(var(--color-primary-rgb),.35);
}
.product-default .author span { color: var(--hf-muted); font-size: 12.5px; font-weight: 600; }
.product-default .author img { border-radius: 999px; width: 26px; height: 26px; object-fit: cover; }

/* ---------- 8. HEADER / NAV (cosmetic only) --------------- */
/* The theme has its OWN sticky-header + .header-next offset logic in script.js
   (.is-sticky). Do NOT add a second sticky implementation here — it conflicts
   and breaks the inner-page content offset. Cosmetic accent only below. */
.header-area .nav-link:hover, .header-area .navbar-nav .nav-item:hover > .nav-link { color: var(--color-primary); }
.header-area .menu-dropdown { border-radius: var(--hf-radius-sm); box-shadow: var(--hf-shadow); border: 1px solid var(--hf-line); overflow: hidden; }

/* ---------- 9. AGENT / CITY / GALLERY cards -------------- */
.agent-area .agent-card, .choose-area .choose-card, .gallery-area .gallery-item, .product-default.agent {
  border-radius: var(--hf-radius); overflow: hidden; transition: transform .25s var(--hf-ease), box-shadow .25s var(--hf-ease);
}
.agent-area .agent-card:hover, .gallery-area .gallery-item:hover { transform: translateY(-5px); box-shadow: var(--hf-shadow); }

/* ---------- 10. Testimonials / newsletter ---------------- */
.testimonial-area .testimonial-card, .testimonial-item { border-radius: var(--hf-radius); box-shadow: var(--hf-shadow-sm); }
.newsletter-area .form-control { border-radius: var(--hf-radius-pill); height: 54px; padding-left: 22px; }

/* ---------- 11. Footer ----------------------------------- */
footer, .footer-area { background: var(--color-secondary); }
.footer-area a:hover, footer a:hover { color: var(--color-primary); }

/* ---------- 12. Forms / inputs (global) ------------------ */
.form-control, .custom-select { border-radius: var(--hf-radius-sm); transition: border-color .15s var(--hf-ease), box-shadow .15s var(--hf-ease); }
.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),.15); }

/* ---------- 13. Badges / pagination ---------------------- */
.badge { border-radius: var(--hf-radius-pill); font-weight: 700; }
.pagination .page-item.active .page-link, .pagination .active a { background-color: var(--color-primary); border-color: var(--color-primary); }
.pagination .page-link, .pagination a { border-radius: var(--hf-radius-sm); color: var(--hf-body); }

/* ---------- 14. Accessibility & motion ------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb),.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

/* ---------- 15. Modern scrollbar ------------------------- */
@media (pointer:fine){ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:#cbd3df; border-radius:999px; } ::-webkit-scrollbar-thumb:hover{ background:#aeb8c7; } }

/* ---------- 16. Skeleton helper -------------------------- */
.hf-skeleton{ background:linear-gradient(90deg,#eef1f6 25%,#e2e7ef 37%,#eef1f6 63%); background-size:400% 100%; animation:hf-shimmer 1.3s ease infinite; border-radius:var(--hf-radius-sm); }
@keyframes hf-shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* ---------- 18. Broker logo on card INFO side (top-right) - */
.product-details.hf-has-logo { position: relative; }
/* reserve right space so the author/type row doesn't slide under the logo */
.product-details.hf-has-logo > .d-flex.justify-content-between.mb-10 { padding-right: 108px; }
.hf-broker-logo {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: flex-end;
  width: 92px; height: 44px;
}
.hf-broker-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.list-view .hf-broker-logo { width: 104px; height: 48px; }

/* ---------- 17. PROPERTY DETAIL page --------------------- */
.product-single-gallery, .product-single-slider, .product-single-slider img,
.product-single-gallery img, .lightbox-single img { border-radius: var(--hf-radius); overflow: hidden; }
.product-single-details .product-title, .product-single-details h1, .product-single-details h2 { font-weight: 800; letter-spacing: -.02em; }
.product-single-details .product-price .new-price { color: var(--color-primary); font-weight: 800; font-size: clamp(20px, 1rem + 1vw, 28px); }
/* amenities as a clean responsive grid of chips */
.product-featured .featured-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.product-featured .featured-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--hf-line); border-radius: var(--hf-radius-sm);
  background: #fff; font-weight: 600; color: var(--hf-body); font-size: 14px;
}
.product-featured .featured-list li i { color: var(--color-primary); font-size: 16px; }
/* sticky contact / booking widget */
.sidebar-widget-area { position: sticky; top: 100px; }
.sidebar-widget-area .widget {
  border: 1px solid var(--hf-line); border-radius: var(--hf-radius);
  box-shadow: var(--hf-shadow-sm); background: #fff;
}
.sidebar-widget-area .widget.widget-form { box-shadow: var(--hf-shadow); }
.sidebar-widget-area .widget-recent .product-details { padding: 0 0 0 12px; }
.sidebar-widget-area .widget-recent .new-price { color: var(--color-primary); font-weight: 700; }