/* ============================================================
   Price & Specs component
   Extracted from parent style.css
   ============================================================ */

/* Ensure component uses theme font */
.nc-main-info-panel {
  font-family: 'Manrope', sans-serif;
  font-size: 16px; /* base size for better readability */
  line-height: 1.45;
  color: #0f172a;
  padding: 18px;
  background: #ffffff; /* panel background */
  border: 1px solid #e6eef6; /* clear light border */
  box-shadow: 0 8px 28px rgba(15,23,42,0.06); /* subtle depth */
  border-radius: 12px;
  margin-bottom: 20px; 
  margin-top: 32px;/* separate from following content */
}

/* Expose gallery height and section gap on all novogradnja pages so
   the featured image and spacing stay consistent even if gallery CSS
   is not conditionally enqueued. */
.single-novogradnja {
  --nc-gallery-slide-height: 400px;
  --nc-section-gap: 20px;
}

@media (max-width: 600px) {
  .single-novogradnja {
    --nc-gallery-slide-height: 300px;
    --nc-section-gap: 14px;
  }
}


/* Price header row */
.nc-price-row {
  display: block;
}

.nc-price-box .nc-label-small {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #334155;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.nc-price-val {
  font-size: 3.8rem;
  font-weight: 900;
  color: #0f172a;
  margin: 6px 0 10px;
  line-height: 1.02;
}

/* small unit */
.nc-price-unit {
  font-size: 1.15rem;
  font-weight: 900;
  color: #334155;
  margin-left: 8px;
  white-space: nowrap;
}

/* "sa PDV-om" */
.nc-price-pdv {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  margin-left: 8px;
  white-space: nowrap;
}

/* badges row under price (PDV + Finansiranje) */
.nc-price-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.nc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
  border: 1px solid transparent;
  line-height: 1.1;
}

.nc-badge i {
  font-size: 1.05rem;
}

/* PDV badge variants */
.nc-badge.vat-yes {
  background: #e0f2fe;
  color: #075985;
  border-color: #7dd3fc;
}

.nc-badge.vat-no {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Finance badge variants */
.nc-badge.fin-yes {
  background: #dcfce7;
  color: #14532d;
  border-color: #86efac;
}

.nc-badge.fin-no {
  background: #fff7ed;
  color: #7c2d12;
  border-color: #fdba74;
}

/* Specs grid */
.nc-specs-grid-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 26px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #edf2f7;
}

.nc-spec-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.nc-spec-item i {
  font-size: 1.75rem;
  margin-top: 2px;
  opacity: 1;
  flex: 0 0 auto;
}

.nc-spec-item span {
  font-size: 0.95rem;
  text-transform: uppercase;
  color: #334155;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: block;
}

.nc-spec-item strong {
  font-size: 1.4rem;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
}

/* Color icons by meaning */
.nc-spec-item i.fa-vector-square {
  color: #334155;
}

/* Struktura */
.nc-spec-item i.fa-ruler-combined {
  color: #b45309;
}

/* Površina */
.nc-spec-item i.fa-layer-group {
  color: #0f766e;
}

/* Spratnost */
.nc-spec-item i.fa-leaf {
  color: #16a34a;
}

/* Energetski */
.nc-spec-item i.fa-car {
  color: #2563eb;
}

/* Parking */
.nc-spec-item i.fa-calendar-check {
  color: #7c3aed;
}

/* Useljenje */
.nc-spec-item i.fa-fire-burner {
  color: #ea580c;
}

/* Grejanje */
.nc-spec-item i.fa-window-maximize {
  color: #0891b2;
}

/* Highlight eco grade value */
.nc-spec-item i.fa-leaf+div strong {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #14532d;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Responsive adjustments moved from parent stylesheet */
@media (max-width: 991px) {
  .nc-main-info-panel {
    padding: 26px;
  }

  .nc-price-val {
    font-size: 3rem;
  }

  .nc-specs-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nc-spec-item strong {
    font-size: 1.15rem;
  }
  /* Tech grid rules moved to css/components/tech.css */
}

@media (max-width: 640px) {
  .nc-main-info-panel {
    padding: 20px;
  }

  .nc-price-val {
    font-size: 2.25rem;
    line-height: 1.05;
  }

  .nc-price-unit,
  .nc-price-pdv {
    display: block;
    margin-left: 0;
    margin-top: 6px;
    font-size: 0.95rem;
    color: #334155;
  }

  .nc-price-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .nc-badge {
    width: 100%;
    justify-content: flex-start;
  }

  /* Specs: uvek 1 kolona na malom mobilnom */
  .nc-specs-grid-main {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .nc-spec-item i {
    font-size: 1.4rem;
  }

  .nc-spec-item span {
    font-size: 0.82rem;
  }

  .nc-spec-item strong {
    font-size: 1.12rem;
  }
}

/* Inactive property visual state -------------------------------------------------- */
/* Targeted dimming: apply opacity/grayscale only to specific
   content elements (featured image, galleries, map, and content
   images) rather than to large containers. This lets us exclude
   widgets/footers reliably. */
/* Prefer dimming content inside the property wrapper produced by the
   `nekretnina_layout` shortcode. This targets images, galleries and
   the map inside the article while avoiding widgets and footer areas. */
body.nc-property-inactive .nc-property-wrapper .nc-article-text img,
body.nc-property-inactive .nc-property-wrapper .nc-article-text .ngg-gallery,
body.nc-property-inactive .nc-property-wrapper .nc-article-text .ngg-gallery img,
body.nc-property-inactive .nc-property-wrapper .nc-article-text .nc-gallery-wrapper,
body.nc-property-inactive .nc-property-wrapper .nc-article-text .nc-map-wrapper,
/* Featured image (outside the property wrapper) */
body.nc-property-inactive .entry-thumb,
body.nc-property-inactive .entry-thumb img,
body.nc-property-inactive .nc-property-wrapper .entry-thumb .post-thumbnail,
body.nc-property-inactive .nc-property-wrapper .entry-thumb .post-thumbnail img,
/* Also dim these blocks explicitly */
body.nc-property-inactive .nc-main-info-panel,
body.nc-property-inactive .nc-map-wrapper,
body.nc-property-inactive #nc-report-trigger,
body.nc-property-inactive .nc-infrastructure,
/* Also include sidebar gallery/map placements used on single novogradnja pages */
body.nc-property-inactive .single-novogradnja .sidebar .ngg-galleryoverview,
body.nc-property-inactive .single-novogradnja .sidebar .ngg-gallery,
body.nc-property-inactive .single-novogradnja .sidebar .ngg-gallery img,
body.nc-property-inactive .single-novogradnja .sidebar .ngg-gallerybox,
body.nc-property-inactive .single-novogradnja .sidebar .ngg-gallerybox img,
body.nc-property-inactive .single-novogradnja .sidebar .ngg-galleryoverview.ngg-slideshow,
body.nc-property-inactive .single-novogradnja .sidebar .nc-gallery-wrapper,
body.nc-property-inactive .single-novogradnja .sidebar .nc-map-wrapper {
  opacity: 0.75 !important;
  -webkit-filter: grayscale(40%) !important;
  filter: grayscale(40%) !important;
}

/* Ensure main info panel stays readable */
/* Allow the main info panel to be dimmed by the targeted inactive-state rule above. */

/* Offer a small sold badge if present */
.property-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ef4444;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 800;
  z-index: 120;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  pointer-events: none;
}

.nc-property-wrapper { position: relative; }
.nc-property-wrapper .property-badge { pointer-events: auto; }

/* If the badge is moved into the featured image, ensure it's positioned
  correctly inside that container. Also make the featured image a
  positioning context when present. */
.entry-thumb { position: relative; }
.entry-thumb .property-badge { top: 14px; right: 14px; left: auto; }

/* Hide custom widgets/elements on password-protected novogradnja posts */
body.nc-password-protected .nc-property-wrapper,
body.nc-password-protected .nc-main-info-panel,
body.nc-password-protected .nc-article-text,
body.nc-password-protected .nc-map-wrapper,
body.nc-password-protected #nc-investor-widget,
body.nc-password-protected #nc-report-trigger,
body.nc-password-protected .nc-infrastructure,
body.nc-password-protected .nc-gallery-wrapper,
body.nc-password-protected .entry-thumb,
/* NextGEN and common gallery classes */
body.nc-password-protected .ngg-gallery,
body.nc-password-protected .ngg-galleryoverview,
body.nc-password-protected .ngg-gallerybox,
body.nc-password-protected .ngg-gallery img,
body.nc-password-protected .ngg-galleryoverview.ngg-slideshow,
body.nc-password-protected .gallery,
body.nc-password-protected .wp-block-gallery,
body.nc-password-protected .slick-slider,
body.nc-password-protected .ngg-gallery-thumbnail {
  display: none !important;
  visibility: hidden !important;
}

/* Keep the investor widget visually active when the rest of the
   page is dimmed by the inactive state. Only the real selector
   present in the theme is targeted here. */
body.nc-property-inactive #nc-investor-widget,
body.nc-property-inactive aside.sidebar #nc-investor-widget {
  opacity: 1 !important;
  -webkit-filter: none !important;
  filter: none !important;
}