/* ---------- PAGE HEADER ---------- */
.prop-header{
  padding:calc(clamp(3.5rem, 8vw, 6.5rem) + 4rem) clamp(2rem, 9vw, 11rem) 1.5rem;
}
.prop-header h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  color:var(--white);
}
.prop-header p{
  margin-top:0.6rem;
  color:var(--text-muted);
  font-size:clamp(0.95rem, 1.2vw, 1.1rem);
}

/* ---------- FILTER BAR ---------- */
.filter-bar{
  padding:1rem clamp(2rem, 9vw, 11rem) 1.5rem;
  border-bottom:1px solid var(--line);
}
.filter-row{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:1.25rem;
}
.filter-control{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  min-width:140px;
}
.filter-control label{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
}
.filter-control select,
.filter-control input{
  background:#161616;
  border:1px solid var(--line);
  color:var(--white);
  border-radius:6px;
  padding:0.7rem 0.9rem;
  font-family:var(--font-body);
  font-size:0.9rem;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  cursor:pointer;
}
.filter-control input{cursor:text;}
.filter-control select:hover,
.filter-control input:hover{border-color:rgba(196,165,148,0.5);}
.filter-control select{
  background-color:#161616;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a58375' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
  min-width:140px;
}
.filter-control select:focus,
.filter-control input:focus{
  outline:none;
  border-color:var(--accent-light);
  box-shadow:0 0 0 3px rgba(165,131,117,0.18);
}
.price-control{min-width:230px;}
.name-control{min-width:220px;flex:1 1 220px;}
.price-inputs{display:flex;align-items:center;gap:0.5rem;}
.price-inputs input{width:100px;}
.price-sep{color:var(--text-muted);}

.clear-filters{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text-muted);
  border-radius:6px;
  padding:0.7rem 1.1rem;
  font-size:0.9rem;
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.clear-filters:hover{border-color:var(--accent-light);color:var(--white);background:rgba(165,131,117,0.08);}

/* ---------- MORE FILTERS (mobile) ----------
   Desktop: the group is `display:contents` so its children (bedrooms,
   emirate, type, category, price, listing, developer, status) sit directly
   in .filter-row exactly as before — no layout change on desktop.
   Mobile: the group collapses behind a toggle button, leaving only Search,
   Clear filters, and Sort visible by default. */
.more-filters-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  background:transparent;
  border:1px solid var(--line);
  color:var(--white);
  border-radius:6px;
  padding:0.7rem 1.1rem;
  font-size:0.9rem;
  font-family:var(--font-body);
  cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.more-filters-toggle svg{flex-shrink:0;width:16px;height:16px;}
.more-filters-toggle:hover{border-color:var(--accent-light);background:rgba(165,131,117,0.08);}
.more-filters-toggle[aria-expanded="true"]{border-color:var(--accent-light);color:var(--accent-light);}
.more-filters-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--accent-light);
  color:#0c0c0c;
  font-size:0.72rem;
  font-weight:700;
  line-height:1;
}

.filter-more-group{display:contents;}

@media(max-width:640px){
  .more-filters-toggle{display:inline-flex;width:100%;}

  .filter-more-group{
    display:none;
    width:100%;
    flex-direction:column;
    gap:0.85rem;
  }
  .filter-more-group.open{display:flex;}
}

.sort-control{margin-left:auto;}
@media(max-width:700px){
  .sort-control{margin-left:0;}
}

@media(max-width:640px){
  .filter-row{gap:0.85rem;}
  .filter-control,
  .price-control,
  .name-control{
    min-width:0;
    flex:1 1 100%;
  }
  .filter-control select,
  .filter-control input{
    width:100%;
    padding:0.85rem 0.9rem;
    padding-right:36px;
    font-size:1rem;
  }
  .price-inputs input{width:100%;}
  .clear-filters{width:100%;justify-content:center;text-align:center;padding:0.85rem 1.1rem;}
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-top:1.1rem;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:rgba(165,131,117,0.16);
  border:1px solid var(--accent);
  color:var(--white);
  border-radius:20px;
  padding:0.35rem 0.5rem 0.35rem 0.9rem;
  font-size:0.85rem;
  animation:chipIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes chipIn{
  from{opacity:0;transform:scale(0.85);}
  to{opacity:1;transform:scale(1);}
}
@media(prefers-reduced-motion: reduce){
  .chip{animation:none;}
}
.chip button{
  background:none;
  border:none;
  color:var(--white);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
  padding:0 0.3rem;
}

/* ---------- RESULTS COUNT ---------- */
.results-count{
  padding:1.25rem clamp(2rem, 9vw, 11rem) 0;
  color:var(--text-muted);
  font-size:0.9rem;
}

/* ---------- PROPERTY GRID ---------- */
.property-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  padding:1.25rem clamp(2rem, 9vw, 11rem) clamp(3.5rem, 8vw, 6.5rem);
}
@media(min-width:640px){
  .property-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1000px){
  .property-grid{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1380px){
  .property-grid{grid-template-columns:repeat(4,1fr);}
}

.property-card{
  background:#101010;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
  display:flex;
  flex-direction:column;
  animation:cardIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay:calc(var(--card-index, 0) * 60ms);
}
.property-card:hover{
  border-color:var(--accent-light);
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,0.4);
}
.property-card:hover .card-image-wrap img{transform:scale(1.06);}

@keyframes cardIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
@media(prefers-reduced-motion: reduce){
  .property-card{animation:none;}
}
.property-card:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px;}

.card-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#1a1a1a;
  overflow:hidden;
}
.card-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);}

.card-badges{
  position:absolute;
  top:0.7rem;left:0.7rem;right:0.7rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0.5rem;
  pointer-events:none;
}
/* Left column — type, tag, discount stack vertically */
.card-badges-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.35rem;
}
/* Right column — status sits top-right */
.card-badges-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.35rem;
}

/* Shared pill base */
.badge-pill{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:600;
  padding:0.28rem 0.6rem;
  border-radius:3px;
  backdrop-filter:blur(6px);
  line-height:1.3;
  white-space:nowrap;
}

/* Type — neutral dark */
.badge-type{
  background:rgba(0,0,0,0.6);
  color:var(--white);
  border:1px solid rgba(255,255,255,0.18);
}

/* Listing tag — Buy / Rent / Off Plan */
.badge-tag-buy{
  background:rgba(14,50,90,0.88);
  color:#7ec8f7;
  border:1px solid rgba(126,200,247,0.4);
}
.badge-tag-rent{
  background:rgba(55,20,80,0.88);
  color:#d4a0f7;
  border:1px solid rgba(212,160,247,0.4);
}
.badge-tag-offplan{
  background:rgba(10,55,40,0.88);
  color:#6fe0b8;
  border:1px solid rgba(111,224,184,0.4);
}
.badge-tag-ready{
  background:rgba(70,55,10,0.88);
  color:#f2d479;
  border:1px solid rgba(242,212,121,0.4);
}

/* Discount */
.badge-discount{
  background:rgba(80,45,0,0.88);
  color:#ffd166;
  border:1px solid rgba(255,209,102,0.45);
}

/* Status */
.badge-status{
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.6px;
  font-weight:600;
  padding:0.28rem 0.6rem;
  border-radius:3px;
  backdrop-filter:blur(6px);
}
.badge-available{background:rgba(20,40,20,0.88);color:#9ee6a0;border:1px solid rgba(158,230,160,0.5);}
.badge-sale{background:rgba(14,50,90,0.88);color:#7ec8f7;border:1px solid rgba(126,200,247,0.5);}
.badge-sold{background:rgba(45,15,15,0.88);color:#f29e96;border:1px solid rgba(242,158,150,0.5);}
.badge-rented{background:rgba(45,32,10,0.88);color:#f2c876;border:1px solid rgba(242,200,118,0.5);}

.card-body{
  padding:1.1rem 1.2rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  flex:1;
}
.card-location{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--white);
}
.card-subtitle{
  font-size:0.85rem;
  color:var(--text-muted);
  margin-top:-0.2rem;
}
.card-meta{
  font-size:0.85rem;
  color:var(--text-muted);
}
.card-subtitle-stack{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-size:0.92rem;
  color:var(--text-muted);
}
.card-price-block{
  margin-top:auto;
  padding-top:0.6rem;
  display:flex;
  flex-direction:column;
  gap:0.2rem;
}
.card-price-label{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--text-muted);
}
.card-price{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--accent-light);
}

.card-contact-row{
  display:flex;
  gap:0.6rem;
  margin-top:0.9rem;
}
.card-contact-btn{
  flex:1;
  text-align:center;
  background:var(--accent);
  color:var(--white);
  font-size:0.85rem;
  padding:0.55rem 0.5rem;
  border-radius:3px;
  transition:background 0.2s ease;
}
.card-contact-btn:hover{background:var(--accent-light);}

/* ---------- SKELETON CARDS (loading state) ---------- */
.skeleton-card{animation:none;cursor:default;}
.skeleton-card:hover{transform:none;box-shadow:none;border-color:var(--line);}
.skeleton-card .card-image-wrap{background:#161616;}
.skeleton-card .skeleton-line.sk-title{width:70%;height:1.1rem;}
.skeleton-card .skeleton-line.sk-subtitle{width:55%;height:0.8rem;}
.skeleton-card .skeleton-line.sk-meta{width:42%;height:0.8rem;}
.skeleton-card .skeleton-line.sk-price{width:38%;height:1.15rem;margin-top:auto;padding-top:0.55rem;}
.skeleton-results{width:150px;height:0.9rem;border-radius:4px;}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  text-align:center;
  padding:4rem 2rem 6rem;
  color:var(--text-muted);
}
.loading-state{
  grid-column:1/-1;
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-muted);
  font-size:0.95rem;
}
.empty-state p{margin-bottom:1rem;font-size:1.05rem;}
.empty-state button{
  background:var(--accent);
  color:var(--white);
  border:none;
  padding:0.7rem 1.6rem;
  border-radius:3px;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:0.9rem;
  transition:background 0.2s ease;
}
.empty-state button:hover{background:var(--accent-light);}

/* ---------- DETAIL MODAL ---------- */
.modal-scrim{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.7);
  z-index:300;
  opacity:0;visibility:hidden;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}
.modal-scrim.open{opacity:1;visibility:visible;}

.detail-modal{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-48%) scale(0.96);
  width:min(900px, 92vw);
  max-height:88vh;
  overflow-y:auto;
  background:#0c0c0c;
  border:1px solid var(--line);
  border-radius:8px;
  z-index:310;
  opacity:0;visibility:hidden;
  transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1), visibility 0.35s, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.detail-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}

.modal-close{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;
  border-radius:4px;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--white);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  z-index:5;
  transition:background 0.2s ease;
}
.modal-close:hover{background:var(--accent-light);}

.modal-content{padding:0;}

.modal-gallery{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#1a1a1a;
  overflow:hidden;
}
.modal-gallery img{
  position:absolute;
  inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;
  transition:opacity 0.5s ease;
}
.modal-gallery img.active{opacity:1;}
.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.3);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  font-size:1.1rem;
}
.gallery-prev{left:1rem;}
.gallery-next{right:1rem;}
.gallery-dots{
  position:absolute;bottom:0.9rem;left:0;right:0;
  display:flex;justify-content:center;gap:0.4rem;
}
.gallery-dots span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.4);
}
.gallery-dots span.active{background:var(--white);}

.modal-body{padding:1.75rem clamp(1.5rem, 4vw, 2.5rem) 2.25rem;}
.modal-top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}
.modal-location{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  color:var(--white);
}
.modal-price{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  color:var(--accent-light);
  white-space:nowrap;
}
.modal-badges{display:flex;gap:0.5rem;margin-top:0.6rem;}
.modal-meta-row{
  display:flex;
  gap:1.75rem;
  margin-top:1.25rem;
  padding:1rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.modal-meta-item{display:flex;flex-direction:column;gap:0.25rem;}
.modal-meta-item .label{font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);}
.modal-meta-item .value{font-family:var(--font-display);font-size:1.15rem;color:var(--white);}
.modal-description{
  margin-top:1.25rem;
  color:var(--text-muted);
  line-height:1.75;
  font-size:0.98rem;
}
.modal-contact-row{
  display:flex;
  gap:0.75rem;
  margin-top:1.75rem;
  flex-wrap:wrap;
}
.modal-contact-row a{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  background:var(--accent);
  color:var(--white);
  padding:0.75rem 1.4rem;
  border-radius:3px;
  font-size:0.95rem;
  transition:background 0.2s ease;
}
.modal-contact-row a:hover{background:var(--accent-light);}
.modal-contact-row a.outline{
  background:transparent;
  border:1px solid var(--line);
}
.modal-contact-row a.outline:hover{border-color:var(--accent-light);background:transparent;}

@media(prefers-reduced-motion: reduce){
  .detail-modal,.modal-scrim{transition:none;}
}