/* featured-properties.css -- homepage "Featured Properties" card carousel.
   Scoped entirely to new fp-*featured-* classes -- the old
   .featuredBox/.forRent/.featuredSepecification/.featuredBtn/.featuredCont
   rules in master.css are intentionally left untouched, since agentDetail.php
   still uses them for its own featured-listings carousel. */
:root {
  --fp-border-soft: rgba(0, 0, 0, .07);
  --fp-divider: #e2e2e2;
  --fp-shadow-card: 0 4px 12px rgba(0, 0, 0, .10);
  --fp-radius-card: 12px;
  --fp-card-gap: 24px;
  --fp-nav-size: 56px;
  --fp-status-active: #2e7d32;
  --fp-status-closed: var(--front_primary_brand);
  --fp-status-coming-soon: #1d5fae;
  --fp-status-pending-bg: #f2b400;
  --fp-status-pending-text: #3a2900;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fp-nav svg, .fp-photo-nav svg, .fp-spec svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- CAROUSEL ROW ---------- */
/* No max-width/margin of its own -- fills its .container/.row/.col-xs-12 ancestors exactly, same as every other homepage section, instead of a second independent width that could drift from theirs at different breakpoints */
.featured-section { padding: 10px 0; }
.featured-row { display: flex; align-items: center; gap: 0; }

.fp-nav {
  flex: 0 0 auto; width: 30px; align-self: stretch; min-height: 120px;
  background: none; border: none; padding: 0; margin: 0;
  display: flex; align-items: center; cursor: pointer;
  color: var(--front_primary_brand); transition: color .15s ease, transform .15s ease;
}
.fp-nav:hover { color: var(--front_primary_brand_hover); transform: scale(1.08); }
.fp-nav svg { width: var(--fp-nav-size); height: var(--fp-nav-size); stroke: currentColor; stroke-width: 2.8; }
/* Chevron's own drawn stroke sits ~21px inset within its 56px box (viewBox padding); flex-start/-end + a matching negative margin pushes the visible arrow itself flush with the container edge, not just its invisible box */
.fp-prev { justify-content: flex-start; }
.fp-prev svg { transform: scaleX(-1); margin-left: -12px; }
.fp-next { justify-content: flex-end; }
.fp-next svg { margin-right: -12px; }
@media (max-width: 600px) { .fp-nav { width: 40px; min-height: 80px; } .fp-nav svg { width: 34px; height: 34px; } }

.featured-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 10px; touch-action: pan-y; }
.featured-track { display: flex; gap: var(--fp-card-gap); transition: transform .35s ease; }

/* ---------- CARD ---------- */
.fp-card {
  flex: 0 0 calc((100% - (var(--fp-card-gap) * 3)) / 4); min-width: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--fp-border-soft); border-radius: var(--fp-radius-card);
  box-shadow: var(--fp-shadow-card); overflow: hidden; transition: box-shadow .2s ease;
}
.fp-card:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, .34); }
@media (max-width: 1100px) { .fp-card { flex-basis: calc((100% - (var(--fp-card-gap) * 2)) / 3); } }
@media (max-width: 900px) { .fp-card { flex-basis: calc((100% - var(--fp-card-gap)) / 2); } }
@media (max-width: 600px) { .fp-card { flex-basis: 100%; } }

.fp-photo { position: relative; width: 100%; height: 195px; background: #eee; overflow: hidden; }
.fp-photo.is-domain { background: #fff; display: flex; align-items: center; justify-content: center; }
.fp-domain-icon { width: 70%; height: 70%; }
.fp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .3s ease; }
.fp-photo img.is-active { opacity: 1; }
.fp-photo img.is-muted { filter: grayscale(1) brightness(.82); }

.fp-photo-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

.fp-photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; padding: 0;
  background: rgba(0, 0, 0, .42); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease;
}
.fp-photo:hover .fp-photo-nav, .fp-photo:focus-within .fp-photo-nav { opacity: 1; pointer-events: auto; }
.fp-photo-nav.is-hidden { opacity: 0 !important; pointer-events: auto !important; cursor: default; }
.fp-photo-nav:hover { background: rgba(0, 0, 0, .65); }
.fp-photo-nav svg { width: 23px; height: 23px; stroke: #fff; stroke-width: 3; }
.fp-photo-prev { left: 8px; }
.fp-photo-prev svg { transform: scaleX(-1); }
.fp-photo-next { right: 8px; }

.fp-divider { height: 1px; width: 100%; background: var(--fp-divider); flex: 0 0 auto; }

.fp-dots {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0, 0, 0, .38); border-radius: 999px; padding: 6px 8px;
  max-width: 67px; overflow: hidden;
}
.fp-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); flex: 0 0 auto; cursor: pointer; transition: background .15s ease, width .15s ease, height .15s ease; }
.fp-dots span.is-active { width: 7px; height: 7px; background: #fff; }
.fp-dots span.is-hidden { display: none; }

.fp-status {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 5px 10px; border-radius: 999px;
}
.fp-status.is-active { background: var(--fp-status-active); color: #fff; }
.fp-status.is-closed { background: var(--fp-status-closed); color: #fff; }
.fp-status.is-coming-soon { background: var(--fp-status-coming-soon); color: #fff; }
.fp-status.is-pending { background: var(--fp-status-pending-bg); color: var(--fp-status-pending-text); }

.fp-details { display: flex; flex-direction: column; padding: 16px 18px 18px; flex: 1 1 auto; text-align: left;}

.fp-price-row { margin: 0 0 6px; }
.fp-price { font-size: 19px; font-weight: 700; color: var(--front_primary_brand); }
.fp-price.is-muted { color: #6b6b6b; }
.fp-price .price_unit { font-size: 13px; font-weight: 600; color: #6b6b6b; margin-left: 2px; }

.fp-title { margin: 0 0 2px; line-height: 1.3; }
.fp-title a { font-size: 15px; font-weight: 700; color: #333333; text-decoration: none; }
.fp-address { font-size: 12.5px; color: #6b6b6b; margin: 0 0 12px; line-height: 1.35; }

.fp-specs {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding: 14px 16px; background: #f5f5f5; border-radius: 8px;
}
.fp-spec { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fp-spec svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: var(--front_primary_brand); stroke-width: 1.6; }
.fp-spec-label { font-size: 10.5px; font-weight: 700; color: #333333; line-height: 1.15; white-space: nowrap; }

.fp-spec svg use[href="#icon-fp-bed"], .fp-spec svg use[href="#icon-fp-bath"], .fp-spec svg use[href="#icon-fp-car"] { transform-box: fill-box; transform-origin: center; }
.fp-spec svg use[href="#icon-fp-bed"], .fp-spec svg use[href="#icon-fp-car"] { transform: scale(1.2); }
.fp-spec svg use[href="#icon-fp-bath"] { transform: scale(1.1); }