/* =========================================================
   ThaiRealtyHub.com — Stylesheet
   ========================================================= */
:root{
  --navy-950:#0a1f3d;
  --navy-900:#0d2848;
  --navy-800:#12345f;
  --navy-700:#1a4a86;
  --blue-600:#1e5aa8;
  --green-600:#2f8f3c;
  --green-700:#256e30;
  --green-100:#e6f4e8;
  --blue-100:#e7eefb;
  --gray-50:#f6f8fb;
  --gray-100:#eef1f6;
  --gray-200:#e3e8ef;
  --gray-400:#9aa5b3;
  --gray-600:#6b7684;
  --text:#1c2a3a;
  --radius:10px;
  --shadow-sm:0 1px 3px rgba(15,35,70,.08);
  --shadow-md:0 8px 24px rgba(15,35,70,.10);
  --font-th:'Noto Sans Thai','IBM Plex Sans Thai',system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-th);
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;}
:focus-visible{outline:3px solid #ffb703; outline-offset:2px;}

.container-xl{max-width:1280px;}

/* ---------- Buttons ---------- */
.btn{font-weight:600; border-radius:8px;}
.btn-navy{background:var(--navy-900); color:#fff;}
.btn-navy:hover{background:var(--navy-800); color:#fff;}
.btn-green{background:var(--green-600); color:#fff; border:none;}
.btn-green:hover{background:var(--green-700); color:#fff;}
.btn-outline-navy{border:1.5px solid var(--navy-900); color:var(--navy-900); background:#fff;}
.btn-outline-navy:hover{background:var(--navy-900); color:#fff;}

/* ---------- Header ---------- */
.site-header{background:#fff; box-shadow:0 1px 0 rgba(15,35,70,.06); position:sticky; top:0; z-index:1030; transition:transform .3s ease-in-out;}
.site-header.header-hide{transform:translateY(-100%);}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.28rem; color:var(--navy-900);}
.brand .brand-icon{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg,var(--navy-900),var(--blue-600));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;
  flex:0 0 auto;
}
.brand .brand-hub{color:var(--green-600);}

.main-nav .nav-link{
  color:var(--text); font-weight:600; font-size:.95rem; padding:.5rem .9rem;
  border-bottom:2px solid transparent;
}
.main-nav .nav-link.active,
.main-nav .nav-link:hover{color:var(--green-600); border-bottom-color:var(--green-600);}

.header-actions .fav-link{
  color:var(--text); font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:.4rem;
  position:relative;
}
.header-actions .fav-link:hover{color:var(--green-600);}
.fav-badge{
  position:absolute; top:-8px; right:-14px; background:var(--green-600); color:#fff;
  font-size:.65rem; min-width:18px; height:18px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; padding:0 4px; font-weight:700;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(120deg,var(--navy-950) 0%, var(--navy-800) 55%, var(--blue-700,#1a4a86) 100%);
}
.hero-bg-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; mix-blend-mode:overlay;}
.hero-content{position:relative; z-index:2;}
.hero h1{font-weight:800; font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.25;}
.hero .brand-hub-hero{color:#7fd996;}
.hero-lead{color:#cfe0f5; font-size:1.02rem; max-width:600px;}
.hero-feature{display:flex; align-items:center; gap:.6rem;}
.hero-feature .ic{
  width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#9fe6ac;flex:0 0 auto;
}
.hero-feature small{display:block; color:#b9c9e0; font-size:.78rem;}
.hero-feature strong{display:block; font-size:.88rem;}

/* ---------- Search panel ---------- */
.search-panel{background:#fff; border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden;}
.search-tabs{display:flex; background:var(--gray-50); border-bottom:1px solid var(--gray-200);}
.search-tab{
  flex:1; border:none; background:transparent; padding:.85rem .5rem; font-weight:700; font-size:.92rem;
  color:var(--gray-600); display:flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:10px 10px 0 0; cursor:pointer;
}
.search-tab.active{background:var(--navy-900); color:#fff;}
.search-body{padding:1.25rem;}
.search-body label{font-size:.8rem; font-weight:600; color:var(--gray-600); margin-bottom:.3rem;}
.search-body .form-select, .search-body .form-control{
  border-color:var(--gray-200); border-radius:8px; font-size:.92rem;
}
.search-toggle-advanced{font-size:.85rem; font-weight:600; color:var(--blue-600); border:none; background:none;}

/* ---------- Promo banner ---------- */
.promo-banner{
  border-radius:14px; overflow:hidden; position:relative; color:#fff; min-height:150px;
  background:linear-gradient(90deg,var(--navy-950) 0%, var(--navy-800) 55%, rgba(13,40,72,.35) 100%);
  display:flex; align-items:center;
}
.promo-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.promo-banner .promo-overlay{position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,31,61,.94) 30%,rgba(10,31,61,.15) 85%); z-index:1;}
.promo-banner .promo-content{position:relative; z-index:2; padding:1.5rem 2rem;}
.promo-banner .badge-tag{background:var(--green-600); font-weight:700;}
.promo-banner h3{font-weight:800; margin:.4rem 0;}
.trh-live-banner{position:relative;display:block;overflow:hidden;min-height:110px;border-radius:14px;background:#082f5a;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(6,42,77,.12)}
.trh-live-banner img{display:block;width:100%;height:100%;min-height:110px;max-height:220px;object-fit:cover}
.trh-banner-label{position:absolute;left:12px;top:12px;background:rgba(28,117,48,.92);color:#fff;padding:.2rem .55rem;border-radius:5px;font-size:.72rem;z-index:3}

/* ---------- Category icons ---------- */
.cat-tile{
  border:1px solid var(--gray-200); border-radius:12px; text-align:center; padding:1.1rem .5rem;
  color:var(--text); transition:all .15s ease; display:block; height:100%;
}
.cat-tile:hover{border-color:var(--green-600); box-shadow:var(--shadow-sm); transform:translateY(-2px); color:var(--text);}
.cat-tile .cat-ic{font-size:1.6rem; color:var(--navy-800); margin-bottom:.4rem;}
.cat-tile span{display:block; font-size:.85rem; font-weight:600;}

/* ---------- Section heading ---------- */
.section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem;}
.section-head h2{font-weight:800; font-size:1.35rem; margin:0;}
.section-head .see-all{font-weight:700; font-size:.88rem; color:var(--navy-900);}
.section-head .see-all:hover{color:var(--green-600);}

/* ---------- Property Card ---------- */
.prop-card{
  border:1px solid var(--gray-200); border-radius:12px; overflow:hidden; background:#fff;
  transition:box-shadow .15s ease, transform .15s ease; height:100%; display:flex; flex-direction:column;
}
.prop-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.prop-card .prop-img-wrap{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--gray-100);}
.prop-card .prop-img-wrap img{width:100%; height:100%; object-fit:cover;}
.prop-tag{
  position:absolute; top:.6rem; left:.6rem; font-size:.72rem; font-weight:800; padding:.25rem .6rem;
  border-radius:5px; color:#fff; letter-spacing:.2px;
}
.prop-tag.sale{background:var(--green-600);}
.prop-tag.rent{background:var(--blue-600);}
.fav-btn{
  position:absolute; top:.55rem; right:.55rem; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
  color:#8a94a3; font-size:1rem; box-shadow:0 1px 4px rgba(0,0,0,.15); cursor:pointer;
}
.fav-btn i{pointer-events:none;}
.fav-btn.active{color:#e0384f;}
.fav-btn.active i::before{content:"\f415";} /* bi-heart-fill fallback handled via class swap in JS */

.compare-check{
  position:absolute; bottom:.55rem; left:.55rem; z-index:2; background:rgba(255,255,255,.94);
  border-radius:20px; padding:.3rem .65rem .3rem .5rem; font-size:.72rem; font-weight:700;
  display:flex; align-items:center; gap:.35rem; color:var(--navy-900); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.15); user-select:none;
}
.compare-check input{cursor:pointer;}
.compare-check:has(input:checked){background:var(--navy-900); color:#fff;}
.compare-check.active{background:var(--navy-900); color:#fff;}

.prop-body{padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1;}
.prop-title{font-weight:700; font-size:.98rem; margin:0; color:var(--text);}
.prop-title a{color:inherit;}
.prop-title a:hover{color:var(--green-600);}
.prop-loc{font-size:.8rem; color:var(--gray-600); display:flex; align-items:center; gap:.3rem;}
.prop-price{font-weight:800; color:var(--navy-900); font-size:1.05rem; margin-top:auto;}
.prop-price small{font-weight:600; color:var(--gray-600); font-size:.72rem;}
.prop-meta{display:flex; gap:.85rem; font-size:.78rem; color:var(--gray-600); flex-wrap:wrap;}
.prop-meta span{display:flex; align-items:center; gap:.3rem;}
.prop-updated{font-size:.72rem; color:var(--gray-400); margin-top:.15rem;}

/* list-view variant */
.prop-card.list-view{flex-direction:row;}
.prop-card.list-view .prop-img-wrap{width:260px; flex:0 0 260px; aspect-ratio:auto;}
.prop-card.list-view .prop-body{flex:1;}
@media(max-width:767.98px){
  .prop-card.list-view{flex-direction:column;}
  .prop-card.list-view .prop-img-wrap{width:100%; aspect-ratio:4/3;}
}

/* ---------- Articles ---------- */
.article-card{border-radius:12px; overflow:hidden; border:1px solid var(--gray-200); height:100%; background:#fff;}
.article-card img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.article-card .art-body{padding:.9rem 1rem;}
.article-card .art-date{font-size:.75rem; color:var(--green-600); font-weight:700;}
.article-card h6{font-weight:700; margin:.35rem 0 0; font-size:.94rem; line-height:1.4;}
.article-card h6 a{color:var(--text);}
.article-card h6 a:hover{color:var(--green-600);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(90deg,var(--navy-950),var(--navy-800));
  border-radius:14px; color:#fff; padding:2rem; position:relative; overflow:hidden;
}
.cta-banner h3{font-weight:800;}
.cta-banner ul{list-style:none; padding:0; margin:.6rem 0 1rem;}
.cta-banner ul li{font-size:.9rem; color:#d8e3f3; margin-bottom:.25rem;}
.cta-banner ul li i{color:var(--green-600); margin-right:.4rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950); color:#c9d5e6;}
.site-footer h6{color:#fff; font-weight:700; margin-bottom:.9rem; font-size:.95rem;}
.site-footer a{color:#c9d5e6; font-size:.87rem; line-height:2;}
.site-footer a:hover{color:#fff;}
.site-footer p{font-size:.85rem; color:#aebbd0; line-height:1.8;}
.footer-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem; font-size:1rem;
}
.footer-social a:hover{background:var(--green-600);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:#8ea0bb;}
.footer-contact li{display:flex; gap:.55rem; font-size:.85rem; margin-bottom:.65rem; color:#c9d5e6; align-items:flex-start;}
.footer-contact i{color:var(--green-600); margin-top:.15rem;}

/* ---------- Breadcrumb / page header ---------- */
.page-hero{
  position:relative; color:#fff; padding:2.2rem 0; overflow:hidden;
  background:linear-gradient(90deg,var(--navy-950) 20%, rgba(10,31,61,.35) 100%), url('') center/cover;
}
.page-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.55;}
.page-hero .overlay{position:absolute; inset:0; background:linear-gradient(90deg,var(--navy-950) 15%, rgba(10,31,61,.25) 100%); z-index:1;}
.page-hero .page-hero-content{position:relative; z-index:2;}
.page-hero h1{font-weight:800; font-size:1.9rem; margin:.2rem 0 .3rem;}
.page-hero .crumb a{color:#b9c9e0; font-size:.85rem;}
.page-hero .crumb a:hover{color:#fff;}
.page-hero .crumb .sep{color:#5f7191; margin:0 .35rem;}
.page-hero p.lead-sm{color:#cfe0f5; font-size:.92rem; margin:0;}

/* ---------- Filters sidebar ---------- */
.filter-card{border:1px solid var(--gray-200); border-radius:12px; padding:1.1rem;}
.filter-card h6{font-weight:800; font-size:.95rem;}
.filter-group{border-bottom:1px solid var(--gray-100); padding-bottom:1rem; margin-bottom:1rem;}
.filter-group:last-child{border-bottom:none; margin-bottom:0;}
.filter-group .form-check{margin-bottom:.4rem;}
.filter-group label{font-size:.87rem;}
.filter-group .count{color:var(--gray-400); font-size:.78rem; float:right;}
.clear-filters{font-size:.8rem; color:var(--blue-600); font-weight:700; border:none; background:none;}

/* ---------- Toggle view buttons ---------- */
.view-toggle .btn{width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center;}
.view-toggle .btn.active{background:var(--navy-900); color:#fff; border-color:var(--navy-900);}

/* ---------- Pagination ---------- */
.pagination .page-link{color:var(--navy-900); border-color:var(--gray-200); font-weight:600;}
.pagination .page-item.active .page-link{background:var(--navy-900); border-color:var(--navy-900);}

/* ---------- Detail Page ---------- */
.gallery-main{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:var(--gray-100);}
.gallery-main img{width:100%; height:100%; object-fit:cover;}
.gallery-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; display:flex; align-items:center; justify-content:center;
}
.gallery-nav-btn.prev{left:.7rem;} .gallery-nav-btn.next{right:.7rem;}
.gallery-counter{position:absolute; bottom:.7rem; left:.7rem; background:rgba(10,31,61,.75); color:#fff; font-size:.78rem; padding:.25rem .6rem; border-radius:6px;}
.thumb-strip{display:flex; gap:.5rem; margin-top:.6rem;}
.thumb-strip .thumb{width:96px; height:72px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; flex:0 0 auto; position:relative;}
.thumb-strip .thumb img{width:100%; height:100%; object-fit:cover;}
.thumb-strip .thumb.active{border-color:var(--green-600);}
.thumb-strip .thumb.more{background:var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;}

.stat-strip{display:flex; flex-wrap:wrap; gap:1.6rem; border:1px solid var(--gray-200); border-radius:12px; padding:1rem 1.2rem; margin-top:1rem;}
.stat-strip .stat{display:flex; align-items:center; gap:.5rem; font-size:.88rem;}
.stat-strip .stat i{color:var(--navy-800); font-size:1.15rem;}
.stat-strip .stat strong{font-weight:800;}

.detail-tabs .nav-link{color:var(--gray-600); font-weight:700; font-size:.88rem; border:none; border-bottom:3px solid transparent;}
.detail-tabs .nav-link.active{color:var(--green-600); border-color:var(--green-600); background:none;}
.amenity-pill{
  border:1px solid var(--gray-200); border-radius:10px; padding:.7rem .5rem; text-align:center; font-size:.78rem;
}
.amenity-pill i{display:block; font-size:1.3rem; margin-bottom:.35rem; color:var(--navy-800);}

.price-box{border:1px solid var(--gray-200); border-radius:12px; padding:1.1rem;}
.price-box .price-big{font-size:1.7rem; font-weight:800; color:var(--navy-900);}
.agent-box{border:1px solid var(--gray-200); border-radius:12px; padding:1.1rem; text-align:center;}
.agent-avatar{width:56px; height:56px; border-radius:12px; background:var(--blue-100); display:flex; align-items:center; justify-content:center; margin:0 auto .5rem; color:var(--navy-800); font-size:1.5rem;}

/* ---------- Compare page ---------- */
.compare-summary-card{border:1.5px solid var(--gray-200); border-radius:12px; padding:1rem; height:100%;}
.compare-summary-card .ic-badge{width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:.6rem;}
.compare-table{width:100%; border-collapse:collapse; font-size:.87rem;}
.compare-table th, .compare-table td{border:1px solid var(--gray-200); padding:.65rem .8rem; text-align:left; vertical-align:top;}
.compare-table thead th{background:var(--gray-50); font-weight:700;}
.compare-table tbody th{background:var(--gray-50); font-weight:700; white-space:nowrap;}

/* ---------- Misc ---------- */
.badge-soft-green{background:var(--green-100); color:var(--green-700); font-weight:700;}
.rounded-xl{border-radius:14px;}
.section-py{padding:2.6rem 0;}
@media(max-width:767.98px){.section-py{padding:1.8rem 0;}}
.text-muted-sm{font-size:.85rem; color:var(--gray-600);}
.form-check-input:checked{background-color:var(--green-600); border-color:var(--green-600);}
.form-range::-webkit-slider-thumb{background:var(--green-600);}

.empty-state{text-align:center; padding:3.5rem 1rem;}
.empty-state i{font-size:3rem; color:var(--gray-400);}
.empty-state h5{font-weight:700; margin-top:1rem;}

.back-to-top{position:fixed; bottom:22px; right:22px; z-index:1040; width:44px; height:44px; border-radius:50%; background:var(--navy-900); color:#fff; display:none; align-items:center; justify-content:center; box-shadow:var(--shadow-md);}
.back-to-top.show{display:flex;}

.toast-fav{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--navy-950); color:#fff; padding:.65rem 1.2rem; border-radius:30px; font-size:.85rem; z-index:2000; opacity:0; transition:opacity .25s ease; pointer-events:none;}
.toast-fav.show{opacity:1;}

@media(max-width:991.98px){
  .main-nav{background:#fff;}
}
.fav-link{position:relative;overflow:visible}
.favorite-count-badge{display:inline-grid!important;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:999px;background:#dc3545;color:#fff!important;font-size:12px;font-weight:700;line-height:1;visibility:visible!important;opacity:1!important}