/* ============================================================
   PRAVESH ESTATES — Global Styles
   ============================================================ */

/* --- Glass Nav --- */
.glass-nav {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-nav.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* --- Material Icons --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* --- Cards --- */
.property-card-shadow {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.property-card-shadow:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

/* --- Line clamp --- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Skeleton loading --- */
.skeleton {
  background: linear-gradient(90deg, #f0f0f7 25%, #e8e8f2 50%, #f0f0f7 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Carousel --- */
.carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* --- Hero overlay gradient --- */
.hero-gradient {
  background: linear-gradient(to right, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.1));
}

/* --- Stats bar --- */
.stats-bar {
  background: #305cde;
}

/* --- Scroll animation --- */
.fade-up {
  opacity: 1;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Blue CTA section --- */
.cta-section {
  background: linear-gradient(135deg, #1a3ab8 0%, #305cde 50%, #2352d5 100%);
}

/* --- Pagination button --- */
.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e2e1ed;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.page-btn:hover { background: #f0f0f7; }
.page-btn.active { background: #305cde; color: white; border-color: #305cde; }

/* --- Form focus ring --- */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #305cde !important;
  box-shadow: 0 0 0 3px rgba(48, 92, 222, 0.12);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0f7; }
::-webkit-scrollbar-thumb { background: #c4c5d7; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #305cde; }

/* --- Map placeholder --- */
.map-placeholder {
  background: #2a2a3e;
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 39px, rgba(255,255,255,0.04) 39px, rgba(255,255,255,0.04) 40px
  );
}

/* --- Tag chip --- */
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 9999px;
  background: #f0f0f7;
  color: #434654;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.tag-chip:hover, .tag-chip.active {
  background: #305cde;
  color: white;
}

/* --- Timeline dot --- */
.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #305cde;
  border: 2px solid white;
  box-shadow: 0 0 0 3px #305cde;
  flex-shrink: 0;
}

/* --- Image lazy load fade-in --- */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}