/* =========================================================
   KEYS99 - PROJECT CARDS
   The project card (createPropertyCard in js/home.js) and the
   sideways-scrolling row that holds cards (.property-scroll),
   shared by every page that shows cards: home, city/locality/
   developer hubs, search, saved, compare and the Similar
   Projects row on project pages. Loaded after index.css (or
   property-details.css), so one card looks the same everywhere.

   The card carries its own colours and type sizes, so it matches
   the homepage even on project pages, whose stylesheet uses a
   slightly different green.
========================================================= */

.property-card,
.property-scroll{
  --green:#006b5b;
  --green-dark:#004f45;
  --green-soft:#eaf7f3;
  --gold:#e1a400;
  --gold-dark:#bd8300;
  --ink:#092c3d;
  --muted:#6c7d86;
  --line:#e7eceb;
  --shadow:0 12px 35px rgba(8,45,56,.09);
  --fs-label:12px;
  --fs-small:13px;
  --fs-ui:14px;
  --fs-body:15px;
  --fs-lead:16px;
}

/* The base the card was designed on (css/index.css's reset), applied
   to the card itself so it looks the same on pages with a different
   base, such as project pages. Card rules below override it. */
.property-card{
  font-family:"DM Sans",sans-serif;
  color:var(--ink);
  line-height:1.5;
}

/* :where() keeps these at zero specificity, so every card rule
   below wins over them. */
:where(.property-card) *{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:where(.property-card) a{
  color:inherit;
  text-decoration:none;
}

:where(.property-card) button{
  font:inherit;
  cursor:pointer;
}

/* =========================================================
   PROPERTY CARDS
========================================================= */

.property-scroll{
  display:grid;

  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:16px;
}

.property-card{
  min-width:0;

  border:1px solid var(--line);

  border-radius:17px;

  overflow:hidden;

  background:#fff;

  box-shadow:0 5px 20px rgba(0,0,0,.03);

  transition:.3s;
}

.property-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.property-image{
  height:155px;

  position:relative;

  overflow:hidden;
}

.property-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:.45s;
}

.property-card:hover .property-image img{
  transform:scale(1.05);
}

.badge{
  position:absolute;

  top:7px;
  left:7px;

  border-radius:5px;

  padding:1px 6px;

  color:#fff;

  background:var(--green);

  font-size:10.5px;
  line-height:1.5;
  font-weight:700;
}

.badge.rent{
  background:#1559b7;
}

.badge.new{
  background:var(--gold);
  color:#092c3d;
}

/* Project status tags - one colour each. Same palette on the
   project page (css/project-extra.css). */
.badge.st-upcoming{ background:#6b4fd8; }

.badge.st-new-launch{ background:var(--gold); color:#092c3d; }

.badge.st-under-construction{ background:#1f6fd1; }

.badge.st-ready-to-move{ background:var(--green); }

.badge.st-completed{ background:#3d5361; }

.badge.st-resale{ background:#c2416b; }

.fav{
  position:absolute;

  top:7px;
  right:7px;

  width:24px;
  height:24px;

  border:0;

  border-radius:50%;

  background:#fff;

  display:grid;
  place-items:center;

  /* The heart is drawn by ::before (below), so it is centred exactly
     whatever font the phone has; the ♡ / ♥ text stays for scripts. */
  font-size:0;
  line-height:0;

  color:#163944;

  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.fav::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  transform:translate(-50%, -50%);
  background:currentColor;
  -webkit-mask:var(--heart-outline) center / contain no-repeat;
  mask:var(--heart-outline) center / contain no-repeat;
  --heart-outline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.8s-8.2-5-9.8-10.4C1 6.2 3.5 3.2 6.9 3.2c2 0 3.8 1.1 5.1 3 1.3-1.9 3.1-3 5.1-3 3.4 0 5.9 3 4.7 7.2-1.6 5.4-9.8 10.4-9.8 10.4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --heart-filled:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.8s-8.2-5-9.8-10.4C1 6.2 3.5 3.2 6.9 3.2c2 0 3.8 1.1 5.1 3 1.3-1.9 3.1-3 5.1-3 3.4 0 5.9 3 4.7 7.2-1.6 5.4-9.8 10.4-9.8 10.4z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fav.active{
  color:#d53d49;
}

.fav.active::before{
  -webkit-mask-image:var(--heart-filled);
  mask-image:var(--heart-filled);
}

.property-body{
  padding:13px;
}

.property-body h3{
  font-size:var(--fs-lead);
  line-height:1.3;
  margin-bottom:5px;
}

/* Project name on the left, RERA badge in the right corner. */
.card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin-bottom:5px;
}

.card-title-row h3{
  flex:1;
  min-width:0;
  margin-bottom:0;
}

.card-title-row .rera-badge{
  flex:none;
  margin-top:1px;
  white-space:nowrap;
}

.property-card .location,
.property-card .developer{
  font-size:var(--fs-small);
  color:var(--muted);

  margin:4px 0;
}

.rera-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;

  background:var(--green-soft);
  color:var(--green-dark);

  font-size:var(--fs-label);
  font-weight:700;

  padding:3px 9px;

  border-radius:20px;

  margin-top:2px;
}

/* BHK CONFIGURATION - vertically scrollable list. Each row
   (config / area / price / status) stays on one line; the
   list of rows scrolls vertically when a property has many
   configs, so title/location/developer stay put above it. */

/* Starting price + BHK rows, pinned to the bottom of the card. */
.card-bottom{
  margin-top:auto;
  padding-top:10px;
}

.card-price{
  margin:0;
  font-size:var(--fs-small);
  color:var(--muted);
}

.card-price strong{
  font-size:15px;
  color:var(--green-dark);
}

.bhk-wrap{
  position:relative;
  padding-top:11px;
}

/* Cards in a row stretch to the tallest one; keep the BHK row at the
   bottom so rows line up across cards instead of leaving a gap. */
#propertyList .property-card,
#featuredList .property-card,
#newLaunchesList .property-card,
#recentlyViewedList .property-card,
#similarList .property-card{
  display:flex;
  flex-direction:column;
}

#propertyList .property-body,
#featuredList .property-body,
#newLaunchesList .property-body,
#recentlyViewedList .property-body,
#similarList .property-body{
  flex:1;
  display:flex;
  flex-direction:column;
}

#propertyList .property-body > *,
#featuredList .property-body > *,
#newLaunchesList .property-body > *,
#recentlyViewedList .property-body > *,
#similarList .property-body > *{
  align-self:flex-start;
  max-width:100%;
}

#propertyList .property-body > .bhk-wrap,
#featuredList .property-body > .bhk-wrap,
#newLaunchesList .property-body > .bhk-wrap,
#recentlyViewedList .property-body > .bhk-wrap,
#propertyList .property-body > .card-title-row,
#featuredList .property-body > .card-title-row,
#newLaunchesList .property-body > .card-title-row,
#recentlyViewedList .property-body > .card-title-row,
#propertyList .property-body > .card-bottom,
#featuredList .property-body > .card-bottom,
#newLaunchesList .property-body > .card-bottom,
#recentlyViewedList .property-body > .card-bottom,
#similarList .property-body > .bhk-wrap,
#similarList .property-body > .card-title-row,
#similarList .property-body > .card-bottom{
  align-self:stretch;
}

/* One BHK row visible; the rest scroll vertically, snapping a row
   at a time. max-height is set from the first row by
   fitBhkScrolls() in index.html (row height varies by screen);
   the value here only applies before that runs. */
.bhk-scroll{
  display:flex;
  flex-direction:column;

  max-height:66px;
  overflow-y:auto;
  overscroll-behavior:contain;

  scroll-snap-type:y mandatory;

  gap:8px;

  scrollbar-width:none;
}

.bhk-scroll::-webkit-scrollbar{
  display:none;
}

.bhk-scroll > .bhk-chip{
  scroll-snap-align:start;
}

/* Custom scroller beside the BHK row when there is more than one
   configuration (thumb sized and moved by fitBhkScrolls). */
.bhk-wrap.has-more{
  padding-right:9px;
}

/* Labels and values on one line each, so every BHK row is the
   same single height. */
.bhk-stat span{
  white-space:nowrap;
  letter-spacing:.2px;
}

.bhk-stat strong{
  white-space:nowrap;
}

.bhk-stat{
  padding-left:4px;
  padding-right:4px;
}

.bhk-track{
  position:absolute;
  top:13px;
  right:1px;
  bottom:2px;
  width:4px;

  border-radius:4px;
  background:var(--line);
  overflow:hidden;
}

.bhk-thumb{
  display:block;
  width:100%;
  border-radius:4px;
  background:var(--green);
  transition:transform .15s ease-out;
}

/* A soft fade at the bottom edge hints that more rows follow. */
.bhk-wrap.has-more:not(.at-end) .bhk-scroll{
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.35));
          mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.35));
}

.bhk-count{
  position:absolute;
  top:-2px;
  right:16px;
  z-index:1;

  padding:1px 7px;

  border-radius:999px;
  background:var(--green);
  color:#fff;

  font-size:var(--fs-label);
  font-weight:700;
  line-height:16px;

  pointer-events:none;
}

.bhk-chip{
  flex:0 0 auto;

  display:flex;

  align-items:stretch;

  border:1px solid var(--line);

  border-radius:12px;

  overflow:hidden;

  background:#fafdfc;
}

.bhk-stat{
  flex:1;
  min-width:0;

  padding:8px 6px;

  text-align:center;

  border-right:1px solid var(--line);
}

.bhk-stat:last-child{
  border-right:0;
}

.bhk-stat strong{
  display:block;
  font-size:11px;
  color:var(--ink);
}

.bhk-stat span{
  display:block;

  font-size:10px;

  color:var(--muted);

  text-transform:uppercase;

  letter-spacing:.4px;

  margin-bottom:2px;
}

.bhk-stat.price-stat strong{
  color:var(--green);
}

.bhk-stat.status-stat.status-available strong{
  color:var(--green);
}

.bhk-stat.status-stat.status-limited strong{
  color:var(--gold-dark);
}

.bhk-stat.status-stat.status-sold strong{
  color:#b3403a;
}

/* HIDDEN PROPERTY */

.property-card.hidden-property{
  display:none;
}

@media(max-width:900px){
  /* PROPERTY HORIZONTAL */

  .property-scroll{
    display:flex;

    overflow-x:auto;

    gap:13px;

    padding:2px 2px 14px;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    overscroll-behavior-x:contain;
  }
  .property-scroll::-webkit-scrollbar{
    display:none;
  }
  .property-card{
    flex:0 0 82%;

    scroll-snap-align:start;
  }
  /* Shorter cards on phones: a lower picture and tighter spacing
     between the lines of text. */
  .property-image{
    height:150px;
  }
  .property-body{
    padding-top:10px;
  }
  .property-card .location,
  .property-card .developer{
    margin:2px 0;
  }
  .card-bottom{
    padding-top:6px;
  }
  .bhk-wrap{
    padding-top:8px;
  }
}

@media(max-width:420px){
  .property-card{
    flex-basis:86%;
  }
}

/* =========================================================
   VIEW ALL ANIMATION
========================================================= */

.property-card.reveal{
  animation:propertyReveal .35s ease;
}

/* =========================================================
   PROPERTY CARD REFINEMENTS
   - clearer border
   - BHK rows run the full width of the card, edge to edge at
     the bottom; the scroller sits over their right edge
   - starting price the same size as the project name
   - smaller BHK values so they never crowd their cell
========================================================= */

.property-card{
  border:1px solid #d3e0dc;
}

.property-card:hover{
  border-color:#b9d3cb;
}

.card-price strong{
  font-size:17px;
}

#propertyList .card-bottom,
#featuredList .card-bottom,
#newLaunchesList .card-bottom,
#recentlyViewedList .card-bottom,
#similarList .card-bottom{
  margin-left:-13px;
  margin-right:-13px;
  margin-bottom:-13px;
  max-width:none;
}

.card-bottom .card-price{
  padding:0 13px;
}

.card-bottom .bhk-wrap,
.card-bottom .bhk-wrap.has-more{
  padding-right:0;
}

.card-bottom .bhk-scroll{
  gap:0;
}

.card-bottom .bhk-chip{
  border:0;
  border-top:1px solid #d3e0dc;
  border-radius:0;
  background:#f6faf9;
}

.card-bottom .bhk-stat:last-child{
  padding-right:9px;
}

.card-bottom .bhk-track{
  top:13px;
  right:3px;
  bottom:3px;
  width:3px;
}

.card-bottom .bhk-count{
  right:13px;
}

.bhk-stat strong{
  font-size:12px;
}

/* Columns share the row by content, not equally, so a long value
   ("1,250 Sq.Ft", "On Request") borrows room from a short one
   ("2 BHK") instead of overflowing its cell. */
.card-bottom .bhk-stat{
  flex:1 1 auto;
  padding-left:3px;
  padding-right:3px;
}

.card-bottom .bhk-stat span{
  letter-spacing:.2px;
}

@media (max-width:359px){
  .card-bottom .bhk-stat strong{ font-size:11px; }
  .card-bottom .bhk-stat span{ font-size:9px; letter-spacing:0; }
}

/* ---------- Compare button on cards (js/compare-tray.js) ---------- */

.compare-toggle{
  position:absolute;
  right:7px;
  bottom:7px;
  padding:2px 7px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#082d38;
  font:inherit;
  font-size:10px;
  font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
  cursor:pointer;
}

.compare-toggle:hover{ background:#fff; }

.compare-toggle.is-compared{
  background:#e1a400;
  color:#082d38;
}

/* ---------- Project cards: defined border + soft shadow ----------
   A crisp edge plus a two-layer shadow (tight contact shadow + wide
   soft one) so cards lift off the page; deeper on hover. */

.property-card{
  border:1px solid #cad9d4;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(8,45,56,.06), 0 6px 18px rgba(8,45,56,.08);
}

.property-card:hover{
  border-color:#a9c8be;
  box-shadow:0 2px 4px rgba(8,45,56,.08), 0 16px 34px rgba(8,45,56,.14);
}

@media (max-width:900px){
  .property-scroll{
    padding:8px 8px 24px;
    margin:-8px -8px -14px;
    scroll-padding-left:8px;
  }
}