.villa-hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(180deg,rgba(8,26,52,.30),rgba(8,26,52,.72)),
    url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1700&q=80') center 35%/cover;}
.villa-hero .container{position:relative;z-index:2;padding:42px 22px}
.villa-hero h1{font-size:clamp(30px,4.5vw,44px);font-weight:800}
.villa-hero p{color:rgba(255,255,255,.86);margin-top:6px;max-width:480px}
.hero-badges{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.hero-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);color:var(--navy);padding:9px 16px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm)}
.hero-badge .ic{color:var(--pink)}
.breadcrumb{font-size:13px;color:var(--muted);padding:16px 0 4px}
.breadcrumb a:hover{color:var(--pink)}
.breadcrumb span{color:var(--ink);font-weight:500}

/* layout */
.villa-layout{display:grid;grid-template-columns:248px 1fr 392px;gap:22px;align-items:start;padding-bottom:20px}

/* filter sidebar */
.filters{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm);position:sticky;top:88px}
.filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filters-head h3{font-size:16px;font-weight:700;color:var(--navy)}
.filters-head button{font-size:12.5px;color:var(--pink);font-weight:600}
.fgroup{border-top:1px solid var(--border-2);padding:16px 0}
.fgroup:first-of-type{border-top:none}
.fgroup>.fhead{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:12px}
.fgroup .chev{transition:transform .25s;color:var(--muted-2)}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;color:#475569;cursor:pointer}
.fopt input{width:17px;height:17px;accent-color:var(--pink);cursor:pointer}
.fopt .stars{color:var(--gold)}
.amenity-hidden{display:none}
#amenityFilterList{max-height:260px;overflow-y:auto}
.show-more{font-size:13px;color:var(--pink);font-weight:600;margin-top:6px}
.clear-all-btn{width:100%;margin-top:8px;border:1.5px solid var(--pink);color:var(--pink);border-radius:12px;padding:12px;font-weight:600;font-size:14px;background:#fff;transition:.2s}
.clear-all-btn:hover{background:var(--pink);color:#fff}

/* listing column */
.listing-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.listing-top .count{font-size:15px;font-weight:600;color:var(--navy)}
.sort-box{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.sort-box select{border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-weight:600;color:var(--navy);background:#fff;outline:none;cursor:pointer}

.vlist{display:flex;flex-direction:column;gap:18px}
.lcard{display:grid;grid-template-columns:226px 1fr;background:#fff;border:1.5px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s}
.lcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.lcard.active{border-color:var(--pink);box-shadow:0 0 0 3px rgba(236,30,99,.12),var(--shadow)}
.lcard .media{position:relative;min-height:230px;background-size:cover;background-position:center}
.lcard .media .badge-bhk{position:absolute;top:12px;left:12px}
.lcard .media .fav{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:#94a3b8;transition:.2s}
.lcard .media .fav.on,.lcard .media .fav:hover{color:var(--pink)}
.card-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(8,26,52,.5);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1;z-index:2;opacity:0;transition:opacity .2s}
.card-slider:hover .card-nav{opacity:1}
.card-nav.prev{left:8px}
.card-nav.next{right:8px}
.card-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(8,26,52,.6);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px;z-index:2}
.lcard .body{padding:16px 18px;display:flex;flex-direction:column}
.lcard h3{font-size:18px;font-weight:700;color:var(--navy)}
.lcard .loc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-top:4px}
.lcard .loc .ic{color:var(--pink)}
.lcard .rating{margin-top:8px}
.amen-row{display:flex;flex-wrap:wrap;gap:14px;color:#64748b;font-size:12.5px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-2)}
.amen-row span{display:inline-flex;align-items:center;gap:6px}
.amen-row .ic{color:#94a3b8}
.spec-row{display:flex;flex-wrap:wrap;gap:16px;color:#475569;font-size:12.5px;margin-top:10px}
.spec-row span{display:inline-flex;align-items:center;gap:6px}
.lcard .price-line{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;padding-top:14px;gap:10px;flex-wrap:wrap}
.price-big{font-size:21px;font-weight:800;color:var(--pink)}
.price-big small{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-top:-3px}
.lcard .actions{display:flex;gap:8px}
.lcard .actions .btn{padding:9px 16px;font-size:13px;border-radius:10px}

/* detail panel */
.detail{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);position:sticky;top:88px;overflow:hidden;max-height:calc(100vh - 104px);overflow-y:auto}
.detail::-webkit-scrollbar{width:6px}.detail::-webkit-scrollbar-thumb{background:#dbe2ec;border-radius:8px}
.detail-gallery{position:relative}
.detail-main{height:230px;background-size:cover;background-position:center;position:relative}
.detail-main .badge-bhk{position:absolute;top:14px;left:14px}
.detail-main .fav{position:absolute;top:14px;right:50px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--pink);z-index:2}
.detail-close{position:absolute;top:14px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:none;place-items:center;font-size:20px;color:var(--navy);z-index:6}
.detail-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(8,26,52,.55);color:#fff;border:none;display:none;place-items:center;cursor:pointer;font-size:20px;line-height:1;z-index:3}
.detail-nav.prev{left:12px}
.detail-nav.next{right:12px}
.detail-video-wrap{position:absolute;inset:0;background:#000;z-index:4}
.video-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);border:none;color:var(--navy);font-size:18px;cursor:pointer;z-index:5}
.thumbs{display:flex;gap:7px;padding:10px;flex-wrap:wrap}
.thumbs .t{flex:1;min-width:54px;height:54px;border-radius:9px;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent;transition:.2s}
.thumbs .t:hover{border-color:var(--pink)}
.thumbs .t.active{border-color:var(--pink)}
.thumbs .t.video-thumb{background:var(--navy);display:grid;place-items:center;color:#fff;flex:0 0 54px}
.thumbs .more{flex:1;height:54px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.detail-body{padding:6px 20px 22px}
.detail-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.detail-title h2{font-size:21px;font-weight:800;color:var(--navy)}
.detail-loc{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-top:3px}
.detail-loc .ic{color:var(--pink)}
.detail-price{display:flex;align-items:center;justify-content:space-between;margin:14px 0}
.detail-price .guests{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.detail-actions{display:flex;flex-direction:column;gap:10px}
.detail-actions .btn{padding:13px;font-size:15px}
.detail p.desc{font-size:13.5px;color:#475569;line-height:1.6;margin:16px 0}
.kspecs{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding:14px 0;border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
.kspecs span{display:flex;align-items:center;gap:8px;font-size:13px;color:#334155}
.kspecs .ic{color:var(--pink)}
.detail h4.sec{font-size:15px;font-weight:700;color:var(--navy);margin:18px 0 12px}
.pricing-rows{display:flex;flex-direction:column;gap:11px}
.pricing-rows .row{display:flex;justify-content:space-between;font-size:13.5px;color:#475569}
.pricing-rows .row b{color:var(--navy);font-weight:600}
.pricing-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--border);font-weight:700}
.pricing-total .amt{color:var(--pink);font-size:18px;font-weight:800}
.amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.amen-grid .a{border:1px solid var(--border);border-radius:12px;padding:12px 6px;text-align:center;font-size:11px;color:#475569;font-weight:500}
.amen-grid .a .ic{display:block;margin:0 auto 6px;color:var(--pink)}
.house-rules{list-style:none;display:flex;flex-direction:column;gap:9px}
.house-rules li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#475569}
.house-rules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);margin-top:7px;flex-shrink:0}
.need-help{background:#fff5f8;border:1px solid #ffd9e6;border-radius:14px;padding:16px;margin-top:18px}
.need-help h4{font-size:14px;color:var(--navy);font-weight:700}
.need-help p{font-size:12px;color:var(--muted);margin:2px 0 12px}
.wa-btn{display:flex;align-items:center;gap:9px;background:#25d366;color:#fff;border-radius:12px;padding:11px;font-weight:600;font-size:13.5px;justify-content:center}
.detail-phone{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:15px;margin-bottom:12px}
.detail-phone .ic{color:var(--pink)}

/* mobile filter button */
.mobile-bar{display:none;gap:10px;padding:14px 0 4px}
.mobile-bar button{flex:1;border:1.5px solid var(--border);background:#fff;border-radius:12px;padding:11px;font-weight:600;font-size:13.5px;color:var(--navy);display:flex;align-items:center;justify-content:center;gap:8px}
.mobile-bar button .ic{color:var(--pink)}

@media(max-width:1180px){
  .villa-layout{grid-template-columns:230px 1fr}
  .detail{position:fixed;top:0;right:0;height:100dvh;max-height:none;width:min(440px,94vw);border-radius:18px 0 0 18px;z-index:180;transform:translateX(105%);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg)}
  .detail.open{transform:translateX(0)}
  .detail-close{display:grid}
}
@media(max-width:820px){
  .villa-layout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;left:0;height:100dvh;width:min(330px,88vw);border-radius:0 18px 18px 0;z-index:180;transform:translateX(-105%);transition:transform .4s var(--ease);overflow-y:auto;box-shadow:var(--shadow-lg)}
  .filters.open{transform:translateX(0)}
  .mobile-bar{display:flex}
}
@media(max-width:560px){
  .lcard{grid-template-columns:1fr}
  .lcard .media{min-height:190px}
  .villa-hero .container{padding:32px 16px}
}
.sheet-backdrop{position:fixed;inset:0;background:rgba(8,26,52,.5);opacity:0;visibility:hidden;transition:.3s;z-index:170}
.sheet-backdrop.open{opacity:1;visibility:visible}