/* ============================================================================
   Indore Property Alert — Custom Design System CSS (Tailwind CDN के ऊपर)
   ============================================================================ */

:root {
  --font-hi: 'Hind', 'Noto Sans Devanagari', sans-serif;
  --font-en: 'Inter', sans-serif;
}

* { font-family: var(--font-hi), var(--font-en); }

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  background: #F8FAFC;
}

/* ---- Scrollbar hide (horizontal scrollers जैसे corridor strip) ---- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Card hover lift ---- */
.card-hover {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, .18);
}

/* ---- Breaking news marquee ---- */
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 22s linear infinite;
  padding-left: 100%;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.marquee-track:hover { animation-play-state: paused; }

/* ---- Fade-in-up entrance (cards, sections दिखते वक़्त) ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeInUp .5s ease both; }
.stagger-1 { animation-delay: .05s; }
.stagger-2 { animation-delay: .1s; }
.stagger-3 { animation-delay: .15s; }
.stagger-4 { animation-delay: .2s; }
.stagger-5 { animation-delay: .25s; }
.stagger-6 { animation-delay: .3s; }

/* ---- Skeleton loading shimmer (fast-loading feel जब data आ रहा हो) ---- */
.skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #EDF1F7 37%, #E2E8F0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Page transition fade (SPA जैसा feel, बिना framework के) ---- */
.page-fade { animation: pageFade .28s ease both; }
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Bottom mobile tab bar active indicator ---- */
.tab-active { color: #1D4ED8; }
.tab-active .tab-icon-wrap {
  background: #EFF6FF;
  border-radius: 9999px;
}

/* ---- Pulse dot (breaking news / live indicators) ---- */
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  opacity: .6;
  animation: pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(.7); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---- Line clamp fallback helpers ---- */
.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; }

/* ---- Toast notification (form submit success जैसे) ---- */
.toast {
  animation: toastIn .3s ease both, toastOut .3s ease 2.7s both;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(12px); } }

/* ---- Range slider (Filter page — बजट range) ---- */
input[type="range"] {
  -webkit-appearance: none;
  height: 4px;
  border-radius: 9999px;
  background: #E2E8F0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 9999px;
  background: #1D4ED8;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
}

/* ---- Loading spinner (page-level) ---- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #E2E8F0;
  border-top-color: #1D4ED8;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Top progress bar (page-load feel) ---- */
#page-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #1D4ED8, #38BDF8);
  z-index: 9999;
  transition: width .3s ease, opacity .3s ease;
}