/* NewProjectsOnline shared public listing design system.
   Loaded only by listing/discovery pages. Money page page.php does not load this file. */


/* Shared typography: deliberately scoped to known listing shells/classes. */
.projects-listing-page,
.listing-page,
.location-listing-page,
.bhk-listing-page,
.ready-to-move-page,
.under-construction-page,
.commercial-listing-page,
.plots-listing-page,
.builder-listing-page {
  color: var(--npo-text);
  font-family: var(--npo-font-body);
  background: var(--npo-surface);
}

.projects-listing-page h1,.projects-listing-page h2,.projects-listing-page h3,
.listing-page h1,.listing-page h2,.listing-page h3,
.location-listing-page h1,.location-listing-page h2,.location-listing-page h3,
.bhk-listing-page h1,.bhk-listing-page h2,.bhk-listing-page h3,
.ready-to-move-page h1,.ready-to-move-page h2,.ready-to-move-page h3,
.under-construction-page h1,.under-construction-page h2,.under-construction-page h3,
.commercial-listing-page h1,.commercial-listing-page h2,.commercial-listing-page h3,
.plots-listing-page h1,.plots-listing-page h2,.plots-listing-page h3,
.builder-listing-page h1,.builder-listing-page h2,.builder-listing-page h3 {
  color: var(--npo-ink);
  font-family: var(--npo-font-heading);
}

/* Canonical card contract. Applies to the existing card classes across families. */
.project-card {
  background: var(--npo-surface);
  border: 1px solid var(--npo-line);
  border-radius: var(--npo-radius-lg);
  overflow: hidden;
  box-shadow: var(--npo-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.project-card:hover { transform: translateY(-2px); box-shadow: var(--npo-shadow); border-color: #cbd5e1; }
.project-card .card-image,
.project-card .card-img,
.project-card .card-img-top,
.project-card .project-image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--npo-card-image-ratio);
  overflow: hidden;
  background: var(--npo-surface-soft);
}
.project-card .card-image img,
.project-card .card-img img,
.project-card img.card-img-top,
.project-card .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-card .card-content,
.project-card .card-body,
.project-card .project-info { padding: .9rem 1rem; }
.project-card .project-title,
.project-card .card-title { margin: 0 0 .35rem; font: 700 1rem/1.35 var(--npo-font-heading); color: var(--npo-ink); }
.project-card .project-title a,
.project-card .card-title a { color: inherit; text-decoration: none; }
.project-card .project-title a:hover,
.project-card .card-title a:hover { color: var(--npo-brand-dark); }
.project-card .project-location,
.project-card .location-text { color: var(--npo-muted); font-size: .84rem; line-height: 1.4; }
.project-card .project-builder { color: var(--npo-text); font-size: .82rem; }
.project-card .project-price { color: var(--npo-brand-dark); font-weight: 700; }
.project-card .config-badge,
.project-card .project-type {
  display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .55rem;
  border-radius: 999px; background: var(--npo-surface-soft); border: 1px solid var(--npo-line);
  color: var(--npo-text); font-size: .75rem; line-height: 1.2;
}
.project-card .price-badge {
  position: absolute; left: .65rem; bottom: .65rem; z-index: 2;
  background: rgba(15,23,42,.90); color: #fff; border-radius: 999px;
  padding: .28rem .65rem; font-size: .78rem; font-weight: 700;
}
.project-card .card-footer {
  margin-top: auto; border-top: 1px solid var(--npo-line); background: transparent;
  padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.project-card .action-btn { min-width: 36px; min-height: 36px; }
.project-card .btn-detail,
.project-card .btn-wa,
.project-card .btn-primary,
.project-card .btn-outline-primary {
  min-height: var(--npo-tap); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--npo-radius-sm); font-weight: 600; text-decoration: none;
}

/* Shared filter controls across legacy + modern listing pages. */
.filter-container,
.filter-drawer,
.sidebar-sticky .card,
.search-wrapper {
  border-color: var(--npo-line) !important;
  border-radius: var(--npo-radius) !important;
}
.filter-container { background: var(--npo-surface-soft) !important; }
.filter-container input,.filter-container select,
.filter-drawer input,.filter-drawer select,
#filterForm input,#filterForm select {
  min-height: var(--npo-tap); border-radius: var(--npo-radius-sm); border-color: #cbd5e1;
  font-family: var(--npo-font-body);
}
.filter-container button,.filter-drawer button,#filterForm button,
.filter-pill { min-height: var(--npo-tap); }
.filter-pill.active,.btn-search,.project-card .btn-detail {
  background: var(--npo-brand) !important; border-color: var(--npo-brand) !important; color: #fff !important;
}
.filter-pill:hover,.btn-search:hover,.project-card .btn-detail:hover { background: var(--npo-brand-dark) !important; }

/* Contextual internal-link block. */
[aria-label="Related property pages"] .card { border: 1px solid var(--npo-line) !important; border-radius: var(--npo-radius-lg); }
[aria-label="Related property pages"] a { min-height: 36px; display: inline-flex; align-items: center; }

/* Mobile-first contract */
@media (max-width: 767.98px) {
  .project-card { border-radius: var(--npo-radius); }
  .project-card:hover { transform: none; }
  .project-card .card-content,.project-card .card-body,.project-card .project-info { padding: .8rem .85rem; }
  .project-card .card-footer { padding: .65rem .85rem; flex-wrap: wrap; }
  .project-card .card-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .project-card .btn-detail,.project-card .btn-wa { width: 100%; }
  .filter-container { padding: .85rem !important; }
  .filter-search { gap: .55rem !important; }
  .filter-search > li { width: 100%; }
  .filter-search select,.filter-search input,.filter-search .btn { width: 100%; }
  .search-wrapper { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,.project-card * { transition: none !important; scroll-behavior: auto !important; }
}


/* Unified modular listing card */
.npo-project-card .npo-card-image { display:block; color:inherit; text-decoration:none; }
.npo-project-card .npo-card-badges { position:absolute; top:.65rem; left:.65rem; right:.65rem; display:flex; gap:.4rem; flex-wrap:wrap; z-index:2; }
.npo-project-card .npo-card-badge { background:rgba(255,255,255,.94); color:var(--npo-ink); border:1px solid rgba(226,232,240,.95); border-radius:999px; padding:.25rem .55rem; font-size:.72rem; font-weight:700; backdrop-filter:blur(4px); }
.npo-project-card .npo-card-badge-status { margin-left:auto; background:rgba(15,23,42,.88); color:#fff; border-color:transparent; }
.npo-project-card .project-builder { margin-top:.35rem; }
.npo-project-card .project-configs { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.65rem; }
.npo-project-card .npo-card-meta { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.7rem; }
.npo-project-card .project-price { margin:0; }
.npo-project-card .npo-rera-badge { max-width:52%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:999px; padding:.2rem .45rem; background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; font-size:.68rem; font-weight:700; }
.npo-project-card .project-rating { margin-top:.55rem; color:var(--npo-muted); font-size:.8rem; }
.npo-project-card .project-rating .bi-star-fill { color:#f59e0b; }
.npo-project-card .npo-card-actions { display:flex; gap:.45rem; align-items:center; }
.npo-project-card .btn-detail,.npo-project-card .btn-wa { flex:1 1 0; padding:.55rem .7rem; }
.npo-project-card .btn-wa { background:#128c4a; color:#fff; border:1px solid #128c4a; }
.npo-project-card .btn-wa:hover { background:#0f7a40; color:#fff; }
.npo-project-card .compare-checkbox,.npo-project-card .btn-emi { min-height:36px; display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; background:transparent; border:1px solid var(--npo-line); border-radius:var(--npo-radius-sm); padding:.35rem .5rem; color:var(--npo-text); }
@media (max-width:767.98px) {
  .npo-project-card .npo-card-actions { display:grid; grid-template-columns:1fr 1fr; }
  .npo-project-card .action-btn,.npo-project-card .compare-checkbox,.npo-project-card .btn-emi { width:100%; justify-content:center; }
  .npo-project-card .npo-card-meta { align-items:flex-start; flex-direction:column; }
  .npo-project-card .npo-rera-badge { max-width:100%; }
}

.npo-project-card .npo-card-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; margin-top:.65rem; }
.npo-project-card .npo-card-fact { min-width:0; background:var(--npo-surface-soft); border:1px solid var(--npo-line); border-radius:var(--npo-radius-sm); padding:.4rem .5rem; }
.npo-project-card .npo-card-fact span { display:block; color:var(--npo-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; }
.npo-project-card .npo-card-fact strong { display:block; margin-top:.1rem; color:var(--npo-ink); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; }
.projects-grid > .npo-project-card { min-width:0; }
@media (max-width:575.98px) { .npo-project-card .npo-card-facts { grid-template-columns:1fr; } }

/* ==========================================================
   Unified listing shell contract
   Active discovery pages keep their route-specific content,
   but cards, filters, pagination and contextual links share
   one visual/mobile system here.
   ========================================================== */
.npo-listing-page,
.plots-city-page,
.builder-city-page,
.builder-plots-page,
.commercial-listing-page,
.bhk-listing-page,
.ready-to-move-page,
.under-construction-page,
.location-listing-page,
.projects-listing-page {
  font-family: var(--npo-font-body);
  color: var(--npo-text);
}

/* Legacy cards are normalized to the canonical card contract. */
.property-card,
.card.project-card,
.npo-project-card {
  background: var(--npo-surface);
  border: 1px solid var(--npo-line) !important;
  border-radius: var(--npo-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--npo-shadow-sm) !important;
  height: 100%;
}
.property-card:hover,
.card.project-card:hover,
.npo-project-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--npo-shadow) !important;
}
.property-card .property-img,
.property-card .project-img,
.npo-project-card .npo-card-image,
.card.project-card .card-img-top {
  aspect-ratio: var(--npo-card-image-ratio);
  overflow: hidden;
  background: var(--npo-surface-soft);
}
.property-card .property-img img,
.property-card .project-img img,
.npo-project-card .npo-card-image img,
.card.project-card img.card-img-top {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.property-card .property-info,
.npo-project-card .project-info,
.card.project-card .card-body { padding: .9rem 1rem; }

/* Consistent result grids. */
.projects-grid,
.npo-project-grid { gap: 1rem; }
@media (min-width: 768px) {
  .projects-grid,
  .npo-project-grid { gap: 1.25rem; }
}

/* Unified filters/search shells. */
.filter-container,
.filter-drawer,
.sidebar-card,
.sidebar-sticky .card,
.search-section .container > div,
.plots-city-page aside .card,
.builder-plots-page aside .card {
  background: var(--npo-surface);
  border: 1px solid var(--npo-line) !important;
  border-radius: var(--npo-radius) !important;
  box-shadow: var(--npo-shadow-sm);
}
.filter-container label,
.filter-drawer label,
.sidebar-card label,
.plots-city-page aside label,
.builder-plots-page aside label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--npo-text);
}
.filter-container input,.filter-container select,
.filter-drawer input,.filter-drawer select,
.sidebar-card input,.sidebar-card select,
.plots-city-page aside input,.plots-city-page aside select,
.builder-plots-page aside input,.builder-plots-page aside select {
  min-height: var(--npo-tap);
  border-radius: var(--npo-radius-sm) !important;
  border-color: #cbd5e1 !important;
}

/* One pagination treatment everywhere. */
.pagination { gap: .25rem; flex-wrap: wrap; }
.pagination .page-link {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem !important;
  border-color: var(--npo-line);
  color: var(--npo-brand-dark);
}
.pagination .page-item.active .page-link {
  background: var(--npo-brand) !important;
  border-color: var(--npo-brand) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link { color: #94a3b8; }

/* Standard visible internal-link treatment. */
.internal-links-section,
.internal-links-box,
.npo-internal-links,
[aria-label="Related property pages"] {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.internal-links-section .link-group,
.internal-links-box,
.npo-internal-links,
[aria-label="Related property pages"] .card {
  background: var(--npo-surface-soft) !important;
  border: 1px solid var(--npo-line) !important;
  border-radius: var(--npo-radius) !important;
  box-shadow: none !important;
}
.internal-links-section a,
.internal-links-box a,
.npo-internal-links a,
[aria-label="Related property pages"] a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
}

/* Mobile-first reading order and tap targets. */
@media (max-width: 767.98px) {
  .plots-city-page,
  .builder-city-page,
  .builder-plots-page,
  .commercial-listing-page,
  .bhk-listing-page,
  .ready-to-move-page,
  .under-construction-page,
  .location-listing-page,
  .projects-listing-page { padding-top: .75rem !important; }

  .plots-city-page h1,
  .builder-city-page h1,
  .builder-plots-page h1,
  .commercial-listing-page h1,
  .bhk-listing-page h1,
  .ready-to-move-page h1,
  .under-construction-page h1,
  .location-listing-page h1,
  .projects-listing-page h1 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.18;
  }

  .property-card:hover,
  .card.project-card:hover,
  .npo-project-card:hover { transform: none; }

  .pagination .page-link { min-width: 44px; min-height: 44px; }

  .internal-links-section,
  .internal-links-box,
  .npo-internal-links,
  [aria-label="Related property pages"] { margin-top: 1rem; margin-bottom: 1rem; }

  .internal-links-section .d-flex,
  .internal-links-box .d-flex,
  .npo-internal-links .d-flex { gap: .45rem !important; }
}

/* Location/listing layout integrity */
.npo-internal-links > .container { width:100%; max-width:1280px; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }
.npo-internal-links .row { min-width:0; }
.npo-internal-links [class*="col-"] { min-width:0; }
.npo-card-image.is-fallback { position:relative; background:linear-gradient(135deg,#f8fafc,#eef2f7); }
.npo-card-image.is-fallback::after { content:"Project image not available"; position:absolute; inset:auto .75rem .75rem .75rem; z-index:3; padding:.38rem .55rem; border-radius:.55rem; background:rgba(255,255,255,.9); color:#64748b; font-size:.72rem; font-weight:600; text-align:center; pointer-events:none; }
@media (max-width:575.98px){
  .npo-internal-links > .container { padding-left:.9rem; padding-right:.9rem; }
  .npo-internal-links .card-body { padding:.9rem; }
  .npo-internal-links .row { --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
  .npo-internal-links h2 { font-size:1.15rem; line-height:1.3; }
  .npo-internal-links h3 { font-size:.9rem; }
  .npo-internal-links a { font-size:.76rem; padding:.35rem .55rem; }
}


/* Shared listing sidebar: developer, configuration and completion-stage views. */
.npo-shell .sidebar-card{background:#fff;border:1px solid #e1e7ee;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 4px 16px rgba(20,43,67,.04)}
.npo-shell .sidebar-card h3,.npo-shell .sidebar-card h4{font-size:1.05rem;line-height:1.5;font-weight:700;color:#142b43;margin:0 0 16px;border:0;padding:0}
.npo-shell .sidebar-card ul{list-style:none;margin:0;padding:0}.npo-shell .sidebar-card li+li{border-top:1px solid #edf0f4}.npo-shell .sidebar-card li a{display:block;padding:11px 0;text-decoration:none;color:#243e58;line-height:1.5;overflow-wrap:anywhere}.npo-shell .sidebar-card li a:hover{color:#d94f13;text-decoration:underline}.npo-shell .sidebar-card li a:focus-visible{outline:2px solid #e45c21;outline-offset:3px}
.npo-shell .sidebar-card .sidebar-logo{width:100%;max-width:120px;max-height:100px;object-fit:contain}.npo-shell .sidebar-card p{font-size:.94rem;color:#5c6d7c;line-height:1.65}.npo-shell .sidebar-column{min-width:0}
@media(min-width:992px){.npo-shell .two-columns{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:28px}.npo-shell .two-columns .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:991px){.npo-shell .two-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.npo-shell .two-columns .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.npo-shell .two-columns .projects-grid{grid-template-columns:minmax(0,1fr)}.npo-shell .sidebar-card{padding:20px}.npo-shell .builder-info h1{font-size:1.7rem}.npo-shell .builder-hero-grid{gap:20px}}

.npo-shell .npo-builder-about summary{cursor:pointer;color:#435a70;font-size:.95rem;padding:10px 0;font-weight:600}.npo-shell .npo-builder-about p{margin:8px 0 18px;max-width:75ch}
.npo-shell .npo-listing-pages{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0}.npo-shell .npo-listing-pages a{display:inline-flex;padding:10px 16px;background:#fff;border:1px solid #dce4ec;border-radius:10px;color:#223d55;text-decoration:none;font-weight:600}
.npo-shell .npo-project-card .price-badge{z-index:4;background:#142b43!important;color:#fff!important;backdrop-filter:none}.npo-shell .npo-card-image.is-fallback::after{bottom:3.25rem}

.npo-locality-directory{padding-top:40px;padding-bottom:48px}.npo-directory-intro{margin-bottom:32px}.npo-directory-intro h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:750;color:#142b43}.npo-directory-intro p{color:#586f83;line-height:1.7}.npo-directory-switch{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.npo-directory-switch a{padding:10px 14px;border:1px solid #dce4ec;background:white;border-radius:24px;text-decoration:none;color:#243e58}.npo-directory-switch a[aria-current=page]{background:#142b43;color:white}.npo-directory-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}.npo-locality-grid,.npo-directory-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.npo-locality-tile{padding:22px;background:white;border:1px solid #e1e7ee;border-radius:14px;text-decoration:none;color:#243e58}.npo-locality-tile:hover{border-color:#f06425}.npo-locality-tile h3{font-size:1.1rem;margin:0 0 12px}.npo-locality-tile p{font-size:.9rem;color:#64748b}.npo-locality-tile span{font-size:.85rem;font-weight:700;color:#cc5018}.npo-directory-featured{margin-top:40px}.npo-directory-projects{margin:24px 0}.npo-locality-directory h2{font-size:1.4rem;margin-bottom:24px}
@media(max-width:991px){.npo-directory-layout{grid-template-columns:minmax(0,1fr)}.npo-locality-grid,.npo-directory-projects{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:575px){.npo-locality-grid,.npo-directory-projects{grid-template-columns:minmax(0,1fr)}.npo-locality-directory{padding-top:28px}}

.npo-project-card .btn-wa,.npo-shell .btn-whatsapp,.npo-shell .whatsapp-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px!important}.npo-project-card .btn-wa i,.npo-shell .btn-whatsapp i,.npo-shell .whatsapp-btn i{flex-shrink:0;margin:0!important}