/* ============================================================
   ENHANCEMENTS.CSS — Premium layer for RealEstateMumbai.com
   ============================================================
   Drop-in on top of existing critical.css + uncritical.css.
   Zero layout changes — only visual upgrades.
   ============================================================ */

/* ── 1. GLOBAL SMOOTHNESS ── */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Better focus rings */
:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 2. HEADER UPGRADES ── */
#header-container {
  transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

#header {
  transition: background 0.3s, box-shadow 0.3s;
}

/* Sticky header glass effect on scroll */
#header.cloned {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Nav link hover glow */
#navigation a {
  transition: color 0.2s, text-shadow 0.2s;
}
#navigation > ul > li > a:hover {
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
}

/* List Property button pulse */
.header-widget .button.border {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.header-widget .button.border:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.25);
}
.header-widget .button.border::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.header-widget .button.border:hover::after {
  opacity: 1;
}

/* ── 3. HERO ENHANCEMENTS ── */
.hp-hero {
  position: relative;
}

/* Richer orb glow */
.hp-orb {
  transition: opacity 1s;
}
.hp-orb--1 {
  filter: blur(80px);
  opacity: 0.35;
}
.hp-orb--2 {
  filter: blur(80px);
  opacity: 0.3;
}

/* Hero badge shimmer */
.hp-badge {
  position: relative;
  overflow: hidden;
}
.hp-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* H1 gradient text enhancement */
.hp-hero h1 em {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 40%, #fbbf24 70%, #f97316 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ── 4. SEARCH BOX PREMIUM ── */
.hp-search {
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.hp-search:hover {
  border-color: rgba(249, 115, 22, 0.15);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(249, 115, 22, 0.08);
}
.hp-search:focus-within {
  border-color: rgba(249, 115, 22, 0.25);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.08), 0 0 30px rgba(249, 115, 22, 0.08);
  transform: translateY(-2px);
}

/* Intent tab micro-animation */
.hp-intent-tab {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-intent-tab:active {
  transform: scale(0.95);
}
.hp-intent-tab.active {
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3);
}

/* Go button ripple effect */
.hp-go-btn {
  position: relative;
  overflow: hidden;
}
.hp-go-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.hp-go-btn:hover::before {
  opacity: 1;
}

/* Example chip hover glow */
.hp-example-chip {
  transition: all 0.2s;
}
.hp-example-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
}

/* ── 5. STATS BAR GLOW ── */
.hp-stats {
  transition: box-shadow 0.3s;
}
.hp-stat a:hover .hp-stat-n {
  text-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

/* Animated count-up feel */
.hp-stat-n {
  transition: transform 0.3s, text-shadow 0.3s;
}
.hp-stat a:hover .hp-stat-n {
  transform: scale(1.05);
}

/* ── 6. PERSONA CARDS PREMIUM ── */
.hp-persona {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s;
  position: relative;
  overflow: hidden;
}

/* Gradient border on hover */
.hp-persona::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f97316, #fb923c, #fbbf24);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-persona:hover::after {
  transform: scaleX(1);
}

/* Icon background pulse on hover */
.hp-persona:hover .hp-persona-ico {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.hp-persona-ico {
  transition: transform 0.3s, box-shadow 0.3s;
}

/* CTA button slide effect */
.hp-persona-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.hp-persona-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.hp-persona-cta:hover::before {
  left: 100%;
}

/* ── 7. PROPERTY CARDS PREMIUM ── */
.hp-pcard {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Image zoom smoother */
.hp-pimg img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-pcard:hover .hp-pimg img {
  transform: scale(1.06);
}

/* Price highlight */
.hp-pprice {
  transition: color 0.2s;
}
.hp-pcard:hover .hp-pprice {
  color: #ea580c;
}

/* Badge hover glow */
.hp-pbadge {
  transition: box-shadow 0.3s;
}
.hp-pcard:hover .hp-pbadge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ── 8. CONCIERGE / MOVING TO MUMBAI ── */
.hp-conc-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.hp-conc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: rgba(249, 115, 22, 0.2);
}

/* ── 9. COMPACT LOCATION SECTION (Zone-tabbed) ── */
.hp-locations { padding-top: 30px !important; padding-bottom: 30px !important; }
.hp-locations .hp-sub { margin-bottom: 16px !important; }

/* Zone tab bar */
.hp-zone-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hp-zone-tab {
  padding: 6px 16px;
  border-radius: 100px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
}
.hp-zone-tab:hover {
  color: #f97316;
  border-color: #fdba74;
  background: #fff7ed;
}
.hp-zone-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #f97316;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.25);
}

/* Zone panels */
.hp-zone-panel { display: none; }
.hp-zone-panel.active { display: block; }

/* Location card grid v2 — compact with images */
.hp-loc-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
@media (min-width: 768px) {
  .hp-loc-grid-v2 { grid-template-columns: repeat(6, 1fr); }
}

.hp-loc-card-v2 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.hp-loc-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #f97316;
}

/* Location image thumbnail */
.hp-loc-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #e2e8f0;
  position: relative;
}
/* Gradient overlay fallback when image is missing */
.hp-loc-img::after {
  content: '📍';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #fef3c7, #fed7aa, #fecaca);
  opacity: 1;
  transition: opacity 0.3s;
}
/* Hide fallback if image loads */
.hp-loc-card-v2[data-loc] .hp-loc-img {
  background-color: #f1f5f9;
}

.hp-loc-info {
  padding: 8px 10px;
  text-align: center;
}
.hp-loc-info h4 {
  font-size: .82rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-loc-count {
  font-size: .68rem;
  color: #94a3b8;
  font-weight: 500;
}

/* Hide old zone titles (now in tabs) */
.hp-zone-title { display: none !important; }
.hp-zone { margin-bottom: 0 !important; padding: 0 !important; }

/* Dark mode */
[data-theme="dark"] .hp-zone-tab {
  border-color: #334155;
  color: #94a3b8;
  background: transparent;
}
[data-theme="dark"] .hp-zone-tab:hover {
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.08);
}
[data-theme="dark"] .hp-zone-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #f97316;
}
[data-theme="dark"] .hp-loc-card-v2 {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .hp-loc-card-v2:hover {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .hp-loc-info h4 { color: #f1f5f9; }
[data-theme="dark"] .hp-loc-count { color: #64748b; }
[data-theme="dark"] .hp-loc-img { background-color: #334155; }
[data-theme="dark"] .hp-loc-img::after {
  background: linear-gradient(135deg, #1e293b, #334155);
}

/* ── 10. CTA SECTION ── */
.hp-cta-btn {
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.hp-cta-btn:hover {
  transform: translateY(-2px);
}

/* ── 11. FOOTER ENHANCEMENTS ── */
#footer a {
  transition: color 0.2s, transform 0.2s;
}
#footer a:hover {
  transform: translateX(2px);
}
.social-icons a {
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.social-icons a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ── 12. SCROLLBAR ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ── 13. SELECTION ── */
::selection {
  background: rgba(249, 115, 22, 0.15);
  color: #1c1917;
}

/* ── 14. LISTING PAGE CARD ENHANCEMENTS ── */
.ls-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ls-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1) !important;
}
.ls-card-img img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ls-card:hover .ls-card-img img {
  transform: scale(1.06) !important;
}

/* ── 15. PROJECT CARD ENHANCEMENTS ── */
.pj-card {
  transition: transform 0.3s, box-shadow 0.3s !important;
}
.pj-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1) !important;
}

/* ── 16. ABOUT PAGE ENHANCEMENTS ── */
.ab-card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.ab-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.ab-svc-card {
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.ab-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  border-color: rgba(249, 115, 22, 0.3);
}
.ab-media-card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.ab-media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   17. DARK MODE — Full theme
   ============================================================ */
[data-theme="dark"] {
  --bg: #0f172a;
  --bg2: #1e293b;
  --text: #e2e8f0;
  --text2: #94a3b8;
  --border: #334155;
  --card: #1e293b;
}

[data-theme="dark"] body {
  background: #0f172a !important;
  color: #e2e8f0 !important;
}

/* Hero */
[data-theme="dark"] .hp-hero {
  background: #0f172a !important;
}
[data-theme="dark"] .hp-hero::before {
  background:
    radial-gradient(ellipse at 15% 50%, rgba(249, 115, 22, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(56, 189, 248, 0.1) 0%, transparent 50%) !important;
}
[data-theme="dark"] .hp-hero h1 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .hp-hero-p,
[data-theme="dark"] .hp-hero .hp-hero-sub {
  color: #94a3b8 !important;
}
[data-theme="dark"] .hp-badge {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: rgba(249, 115, 22, 0.25) !important;
}

/* Search */
[data-theme="dark"] .hp-search {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: #334155 !important;
  backdrop-filter: blur(16px) !important;
}
[data-theme="dark"] .hp-nlp-input,
[data-theme="dark"] #hp-nlp-input {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-intent-tab {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .hp-intent-tab:hover {
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}
[data-theme="dark"] .hp-intent-tab.active {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #fff !important;
}
[data-theme="dark"] .hp-example-chip {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .hp-example-chip:hover {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.3) !important;
}

/* Stats */
[data-theme="dark"] .hp-stats {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-stat-l {
  color: #64748b !important;
}

/* Persona cards */
[data-theme="dark"] .hp-personas {
  background: #0f172a !important;
}
[data-theme="dark"] .hp-persona {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-persona:hover {
  border-color: rgba(249, 115, 22, 0.3) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .hp-persona h2,
[data-theme="dark"] .hp-persona h3 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .hp-persona p {
  color: #94a3b8 !important;
}

/* Sections */
[data-theme="dark"] .hp-sec,
[data-theme="dark"] .hp-featured {
  background: #0f172a !important;
}
[data-theme="dark"] .hp-title {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .hp-sub {
  color: #64748b !important;
}

/* Property cards */
[data-theme="dark"] .hp-pcard {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-pcard:hover {
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .hp-pname {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .hp-ploc {
  color: #64748b !important;
}

/* Concierge */
[data-theme="dark"] .hp-concierge {
  background: #1e293b !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-conc-card {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: #334155 !important;
}
[data-theme="dark"] .hp-conc-card h4 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] .hp-conc-card p {
  color: #94a3b8 !important;
}

/* Location cards */
[data-theme="dark"] .hp-loc-card {
  border-color: #334155 !important;
}

/* Footer */
[data-theme="dark"] #footer,
[data-theme="dark"] footer {
  background: #0b1120 !important;
  color: #94a3b8 !important;
}

/* General dark overrides */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: #f1f5f9 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
[data-theme="dark"] a:not(.hp-persona-cta):not(.hp-go-btn):not(.hp-intent-tab):not(.button) {
  color: #60a5fa;
}
[data-theme="dark"] #header {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: #334155 !important;
}
[data-theme="dark"] #top-bar {
  background: #0b1120 !important;
}
[data-theme="dark"] #navigation a {
  color: #cbd5e1 !important;
}
[data-theme="dark"] #navigation a:hover {
  color: #fb923c !important;
}
[data-theme="dark"] #logo img {
  filter: brightness(1.8) contrast(1.1);
}

/* Dark scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] ::selection {
  background: rgba(249, 115, 22, 0.2);
  color: #f1f5f9;
}

/* ── 18. DARK MODE TOGGLE BUTTON ── */
.dm-toggle {
  position: fixed;
  bottom: 126px;
  right: 16px;
  z-index: 9998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.25s;
}
.dm-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .dm-toggle {
  background: rgba(30, 41, 59, 0.9);
  border-color: #334155;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
@media (min-width: 769px) {
  .dm-toggle {
    top: 14px;
    right: 14px;
    bottom: auto;
  }
}

/* ── 19. PAGE LOAD ANIMATIONS ── */
@media (prefers-reduced-motion: no-preference) {
  .hp-hero-inner,
  .hp-badge,
  .hp-search {
    animation: fadeSlideUp 0.6s ease-out both;
  }
  .hp-badge { animation-delay: 0.1s; }
  .hp-hero h1 { animation: fadeSlideUp 0.6s ease-out 0.2s both; }
  .hp-hero-p,
  .hp-hero .hp-hero-sub { animation: fadeSlideUp 0.6s ease-out 0.3s both; }
  .hp-search { animation-delay: 0.4s; }
  
  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}