/* ============================================
   RISALE - Real Estate Platform
   Dark Theme | Arabic RTL | Premium Design
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #10b981;
  --primary-glow: rgba(5, 150, 105, 0.25);
  --gold: #d97706;
  --gold-dark: #b45309;
  --gold-light: #fef3c7;
  --gold-glow: rgba(217, 119, 6, 0.2);

  /* Re-map legacy red variables to Royal Emerald for unified luxury aesthetic */
  --red: #059669;
  --red-dark: #047857;
  --red-light: #10b981;
  --red-glow: rgba(5, 150, 105, 0.25);
  --accent-red: #ef4444; /* Reserved only for delete/danger actions */

  --bg-primary: #0a0e17;
  --bg-secondary: #111827;
  --bg-card: #151f32;
  --bg-card-hover: #1e293b;
  --bg-elevated: #1e293b;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(16, 185, 129, 0.4);
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --green: #10b981;
  --yellow: #f59e0b;
  --blue: #0284c7;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-red: 0 10px 30px rgba(5, 150, 105, 0.2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Cairo', 'Tajawal', sans-serif;
}

/* ============================================================
   ☀️ VIP LIGHT THEME ENGINE (LUXURY PEARL & EMERALD PALETTE)
   ============================================================ */
html[data-theme="light"],
html.light-theme,
body.light-theme,
[data-theme="light"] {
  --bg-primary: #f8fafc !important;
  --bg-secondary: #ffffff !important;
  --bg-card: #ffffff !important;
  --bg-card-hover: #f1f5f9 !important;
  --bg-elevated: #f8fafc !important;
  --border: rgba(15, 23, 42, 0.1) !important;
  --border-hover: rgba(16, 185, 129, 0.5) !important;
  --text-primary: #0f172a !important;
  --text-secondary: #475569 !important;
  --text-muted: #64748b !important;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  --shadow-red: 0 0 30px rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="light"] body,
body.light-theme {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Light Theme Navbar */
html[data-theme="light"] .navbar,
body.light-theme .navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .nav-link,
body.light-theme .nav-link {
  color: #334155 !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active,
body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
  color: #10b981 !important;
}

/* Hero Section */
html[data-theme="light"] .hero-section,
body.light-theme .hero-section {
  background: radial-gradient(circle at 50% 15%, rgba(16, 185, 129, 0.12) 0%, #f8fafc 75%) !important;
}

html[data-theme="light"] .hero-title,
html[data-theme="light"] .hero-title-gradient,
body.light-theme .hero-title,
body.light-theme .hero-title-gradient {
  color: #0f172a !important;
}

html[data-theme="light"] .hero-sub,
body.light-theme .hero-sub {
  color: #475569 !important;
}

/* Cards & Sections */
html[data-theme="light"] .property-card,
html[data-theme="light"] .card,
html[data-theme="light"] .dash-stat-card,
html[data-theme="light"] .dash-table-card,
html[data-theme="light"] .dash-chart-card,
html[data-theme="light"] .category-card,
html[data-theme="light"] .stats-box,
body.light-theme .property-card,
body.light-theme .card,
body.light-theme .dash-stat-card,
body.light-theme .dash-table-card,
body.light-theme .dash-chart-card,
body.light-theme .category-card,
body.light-theme .stats-box {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .property-title,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
body.light-theme .property-title,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
  color: #0f172a !important;
}

html[data-theme="light"] p,
body.light-theme p {
  color: #475569 !important;
}

html[data-theme="light"] strong,
body.light-theme strong {
  color: #0f172a !important;
}

/* Footer */
html[data-theme="light"] .footer,
body.light-theme .footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
}

html[data-theme="light"] .theme-icon-btn,
body.light-theme .theme-icon-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* Light Theme Sponsored Ad Cards & Hero Details */
html[data-theme="light"] .sponsored-ad-card,
body.light-theme .sponsored-ad-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .sac-details-below,
body.light-theme .sac-details-below {
  background: #ffffff !important;
}

html[data-theme="light"] .sac-title,
body.light-theme .sac-title {
  color: #0f172a !important;
}

html[data-theme="light"] .sac-desc,
body.light-theme .sac-desc {
  color: #475569 !important;
}

html[data-theme="light"] .sac-spec-item,
body.light-theme .sac-spec-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .ssi-val,
body.light-theme .ssi-val {
  color: #0f172a !important;
}

html[data-theme="light"] .ssi-label,
body.light-theme .ssi-label {
  color: #64748b !important;
}

html[data-theme="light"] .search-bar,
html[data-theme="light"] .hero-search-wrapper,
body.light-theme .search-bar,
body.light-theme .hero-search-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
body.light-theme input:not([type="checkbox"]):not([type="radio"]),
body.light-theme select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  direction: rtl;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ========================= SCROLLBAR ========================= */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 3px;
}

/* ========================= UTILS ========================= */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-red {
  color: var(--red);
}

.text-green {
  color: var(--green);
}

.text-yellow {
  color: var(--yellow);
}

.full-width {
  width: 100%;
}

.section {
  padding: 5rem 0;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

/* ========================= BUTTONS ========================= */
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5);
}

.btn-outline {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-outline:hover {
  background: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
}

.btn-outline.small {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-ghost:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* ========================= NAVBAR ========================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 70px;
}

.navbar.scrolled {
  background: rgba(8, 8, 8, 0.98);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 0.8rem;
}

.nav-logo,
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
}

.brand-crest-svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.nav-logo:hover .brand-crest-svg,
.footer-logo:hover .brand-crest-svg,
.dash-portal-brand:hover .brand-crest-svg {
  transform: scale(1.12) rotate(-3deg);
  filter: drop-shadow(0 0 20px rgba(52, 211, 153, 0.8)) !important;
}

.nav-logo {
  transition: transform 0.25s ease;
}

.nav-logo:hover {
  transform: translateY(-1px);
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.logo-title-ar {
  font-size: 1.32rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.1;
  font-family: 'Alexandria', 'Tajawal', 'Cairo', sans-serif;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.logo-title-en,
.logo-risale-main,
.risale-outline-brand {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: transparent !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1.6px #ffffff !important;
  text-stroke: 1.6px #ffffff !important;
  paint-order: stroke fill !important;
  letter-spacing: 3px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)) !important;
  font-family: 'Outfit', 'Montserrat', 'Inter', sans-serif !important;
  transition: all 0.3s ease !important;
}

.logo-risale-sub {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #fca5a5 !important;
  letter-spacing: 0.5px !important;
  margin-top: 1px !important;
  opacity: 0.9 !important;
}

html[data-theme="light"] .logo-title-ar,
body.light-theme .logo-title-ar {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .logo-risale-sub,
body.light-theme .logo-risale-sub {
  color: #64748b !important;
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: 1.5px;
  display: inline-block;
  transition: all 0.3s ease;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 700;
  transition: var(--transition);
  white-space: nowrap;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
  background: rgba(220, 38, 38, 0.08);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nav-app-btn {
  height: 38px;
  padding: 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.btn-ghost {
  height: 38px;
  padding: 0 1rem;
  font-size: 0.86rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.btn-primary {
  height: 38px;
  padding: 0 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.hamburger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.45);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.3);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2.2px;
  background: #ffffff;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7.2px) rotate(45deg);
  background: #ef4444;
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7.2px) rotate(-45deg);
  background: #ef4444;
}

html[data-theme="light"] .hamburger {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .hamburger span {
  background: #0f172a;
}

/* ========================= HERO ========================= */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0505 50%, #0a0a0a 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dc2626' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(234, 179, 8, 0.12));
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ff8080;
  padding: 0.45rem 1.4rem;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  animation: heroBadgePulse 3s ease-in-out infinite alternate, fadeInDown 0.8s ease;
}

.hero-badge:hover {
  transform: translateY(-4px) scale(1.06);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.35), rgba(234, 179, 8, 0.25));
  border-color: rgba(220, 38, 38, 0.7);
  color: #fff;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.5), 0 0 20px rgba(234, 179, 8, 0.3);
}

@keyframes heroBadgePulse {
  0% {
    transform: translateY(0);
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.2);
  }

  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.35), 0 0 15px rgba(234, 179, 8, 0.2);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.2);
  }
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  animation: fadeInUp 0.8s ease 0.2s both;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  animation: fadeInUp 0.8s ease 0.3s both;
  line-height: 1.8;
  position: relative;
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  transition: all 0.4s ease-in-out;
  cursor: default;
}

.hero-subtitle:hover {
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  background: rgba(220, 38, 38, 0.06);
}

.hero-image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
  pointer-events: none;
}

/* ========================= SEARCH BOX ========================= */
.search-box {
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(220, 38, 38, 0.2);
  margin: 0 auto 1.5rem auto;
  max-width: 940px;
  width: 100%;
}

.search-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.search-tab {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.search-tab.active,
.search-tab:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
}

.search-inputs {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  background: var(--bg-secondary);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0.5rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.5rem 1rem;
}

.search-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.search-input,
.search-select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.95rem;
  width: 100%;
  cursor: pointer;
}

.search-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

.btn-search {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  border: 1.5px solid #34d399 !important;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45) !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-search:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.65) !important;
}

.search-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.filter-label {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.filter-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.filter-chip:hover,
.filter-chip.active {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3) !important;
}

/* ========================= HERO STATS ========================= */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  animation: fadeInUp 0.8s ease 0.6s both;
}

.stat-item {
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* ========================= SECTION HEADERS ========================= */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.section-header.centered {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.section-badge {
  display: inline-block;
  background: rgba(220, 38, 38, 0.12);
  color: var(--red-light);
  padding: 0.3rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

/* ========================= CATEGORIES ========================= */
.categories-section {
  background: var(--bg-secondary);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0;
  transition: var(--transition);
}

.category-card:hover {
  transform: translateY(-6px);
  border-color: rgba(220, 38, 38, 0.3);
  background: var(--bg-card-hover);
}

.category-card:hover::before {
  opacity: 1;
}

.category-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.category-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.category-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.category-hover-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--red);
  transition: var(--transition);
}

.category-card:hover .category-hover-line {
  left: 0;
  right: 0;
}

/* ========================= PROPERTY CARDS ========================= */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.5rem;
}

#featuredGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1200px) {
  #featuredGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #featuredGrid {
    grid-template-columns: 1fr;
  }
}

.property-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-6px);
  border-color: rgba(220, 38, 38, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card-image-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card:hover .card-image-wrap img {
  transform: scale(1.08);
}

.card-badges {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 5;
}

.badge-tag {
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-tag.new {
  background: var(--red);
  color: #fff;
}

.badge-tag.sale {
  background: rgba(34, 197, 94, 0.9);
  color: #fff;
}

.badge-tag.featured {
  background: rgba(234, 179, 8, 0.9);
  color: #000;
}

/* ============================================================
   💖 PREMIUM FAVORITES BUTTON — Color, Glow, Animations
   ============================================================ */
.card-fav,
.card-fav-btn {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 40px;
  height: 40px;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 10;
  color: #fff;
  padding: 0;
  outline: none;
}

.card-fav:hover,
.card-fav-btn:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.12);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.card-fav.active,
.card-fav-btn.active,
.mfc-fav-btn.active {
  background: rgba(220, 38, 38, 0.9) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.6) !important;
  color: #ffffff !important;
}

.card-price-overlay {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #dc2626;
  color: #ffffff !important;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  white-space: nowrap !important;
  letter-spacing: 0.2px;
  z-index: 5;
}

.card-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-location {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-specs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.card-spec {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========================= WHY RISALE ========================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

.why-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  text-align: right;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #f97316);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(220, 38, 38, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 25px rgba(220, 38, 38, 0.15);
}

.why-card:hover::before {
  opacity: 1;
}

.why-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.3rem;
  transition: transform 0.3s ease;
}

.why-card:hover .why-icon-wrap {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(220, 38, 38, 0.22);
}

.why-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.why-check-dot {
  color: #22c55e;
  font-size: 1.1rem;
  font-weight: 900;
}

.why-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0;
}

.why-partner-trust-banner {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.4);
  border-radius: 20px;
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
}

.wptb-info h4 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.2rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wptb-info p {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0;
}

.wptb-badge {
  background: #dc2626;
  color: #ffffff;
  padding: 0.55rem 1.4rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}


/* ========================= PAGE HEADER BAR ========================= */
.page-header-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 70px;
}

.page-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.breadcrumb span:first-child {
  cursor: pointer;
  color: var(--red);
}

.breadcrumb span:first-child:hover {
  text-decoration: underline;
}

.bc-sep {
  color: var(--border);
}

.bc-active {
  color: var(--text-primary);
}

/* ========================= LISTINGS ========================= */
.listings-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  align-items: start;
}

.listings-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.sidebar-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.btn-clear {
  background: none;
  border: none;
  color: var(--red);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
}

.filter-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.filter-group:last-of-type {
  border-bottom: none;
}

.filter-group-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-checks {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.check-label:hover {
  color: var(--text-primary);
}

.check-label input[type="checkbox"] {
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.check-label span:nth-child(2) {
  flex: 1;
}

.check-count {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.price-range {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.price-input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition);
}

.price-input:focus {
  border-color: var(--red);
}

.range-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-elevated);
  outline: none;
  cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5);
  cursor: pointer;
}

.room-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.room-btn {
  width: 40px;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.room-btn:hover,
.room-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Toolbar */
.listings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.results-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.results-count strong {
  color: var(--text-primary);
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
}

.view-btn {
  width: 38px;
  height: 38px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-btn:hover,
.view-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Grid / List */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.listings-grid.list-view {
  grid-template-columns: 1fr;
}

.listings-grid.list-view .property-card {
  display: flex;
}

.listings-grid.list-view .card-image-wrap {
  width: 260px;
  height: 180px;
  flex-shrink: 0;
}

.listings-grid.list-view .card-body {
  flex: 1;
}

/* Map View */
.split-layout {
  display: grid;
  grid-template-columns: 350px 1fr;
  height: 700px;
  gap: 1.5rem;
}

.split-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.split-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-placeholder {
  width: 100%;
  height: 100%;
}

.map-dark-bg {
  width: 100%;
  height: 100%;
  background: #0d1117;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.map-pins {
  position: absolute;
  inset: 0;
}

.map-pin {
  position: absolute;
  background: var(--red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
}

.map-pin::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--red);
  border-bottom: none;
}

.map-pin:hover {
  transform: translate(-50%, -55%) scale(1.1);
  z-index: 10;
}

.map-legend {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.red {
  background: var(--red);
}

.legend-dot.white {
  background: #fff;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.page-btn,
.page-next {
  width: 40px;
  height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover,
.page-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.page-next {
  width: auto;
  padding: 0 1rem;
}

.page-dots {
  color: var(--text-muted);
}

/* ========================= PROPERTY DETAIL ========================= */
#page-detail {
  padding-top: 90px;
  padding-bottom: 4rem;
}

.detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  padding: 1rem 0;
}

.detail-breadcrumb span {
  cursor: pointer;
}

.detail-breadcrumb span:hover {
  color: var(--red);
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
}

/* Gallery */
.gallery {
  margin-bottom: 1.5rem;
}

.gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 400px;
  margin-bottom: 0.8rem;
}

.main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.gallery-badges {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}

.badge-new,
.badge-360 {
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.badge-new {
  background: var(--red);
  color: #fff;
}

.badge-360 {
  background: #1c1c1c;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gallery-actions {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
}

.gal-btn {
  width: 36px;
  height: 36px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gal-btn:hover {
  background: var(--red);
  border-color: var(--red);
}

.gallery-thumbs {
  display: flex;
  gap: 0.7rem;
}

.gallery-thumb {
  flex: 1;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb.active,
.gallery-thumb:hover {
  border-color: var(--red);
}

/* Property Info Card */
.property-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.property-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tag-new {
  background: rgba(220, 38, 38, 0.15);
  color: var(--red-light);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.tag-featured {
  background: rgba(234, 179, 8, 0.15);
  color: var(--yellow);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.property-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.property-location {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.property-price-block {
  text-align: left;
}

.property-price {
  font-size: 2rem;
  font-weight: 900;
  color: var(--red);
}

.price-currency {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-right: 0.3rem;
}

/* Specs */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.spec-icon {
  font-size: 1.5rem;
}

.spec-val {
  font-size: 1.3rem;
  font-weight: 800;
}

.spec-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Detail Sections */
.detail-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.detail-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-description {
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 0.95rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.feature-item span {
  color: var(--green);
  font-weight: 700;
}

.more-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.info-key {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.info-val {
  font-size: 0.9rem;
  font-weight: 600;
}

/* ========================= DETAIL SIDEBAR ========================= */
.agent-card,
.schedule-card,
.price-card,
.map-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.agent-header {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.agent-avatar {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  flex-shrink: 0;
}

.agent-details h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.agent-details p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.agent-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.stars {
  color: var(--yellow);
  font-size: 0.8rem;
}

.rating-val {
  font-size: 0.8rem;
  font-weight: 700;
}

.agent-stats-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  text-align: center;
}

.agent-stat {
  flex: 1;
}

.agent-stat strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
}

.agent-stat span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.agent-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Schedule */
.schedule-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.date-buttons,
.time-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.date-btn,
.time-btn {
  flex: 1;
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
}

.date-btn:hover,
.date-btn.active,
.time-btn:hover,
.time-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Price Chart */
.price-card h4,
.map-mini-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.price-chart {
  margin-bottom: 0.7rem;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 80px;
}

.chart-bar {
  flex: 1;
  background: var(--bg-elevated);
  border-radius: 4px 4px 0 0;
  position: relative;
  transition: var(--transition);
}

.chart-bar.highlight {
  background: var(--red);
}

.chart-bar:hover {
  background: rgba(220, 38, 38, 0.5);
}

.bar-val {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.chart-labels {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.chart-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.price-note {
  font-size: 0.8rem;
  color: var(--green);
}

/* Map Mini */
.map-mini {
  border-radius: var(--radius);
  overflow: hidden;
  height: 140px;
}

.map-mini-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d1117, #1a1a2e);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
}

.map-mini-pin {
  font-size: 2rem;
  animation: bounce 2s infinite;
}

.map-mini-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Similar */
.similar-section {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
}

/* ========================= INVESTMENT ========================= */
.invest-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}

.invest-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
}

.invest-stat-card:hover {
  border-color: rgba(220, 38, 38, 0.3);
  transform: translateY(-3px);
}

.ist-icon {
  font-size: 2rem;
}

.ist-val {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
}

.ist-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.invest-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  margin-bottom: 4rem;
}

.invest-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Investment List Item */
.invest-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
}

.invest-item:hover {
  border-color: rgba(220, 38, 38, 0.3);
  transform: translateX(4px);
}

.invest-img {
  width: 100px;
  height: 75px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.invest-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invest-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.invest-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.invest-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
}

.invest-meta span {
  color: var(--text-secondary);
}

.invest-return {
  text-align: center;
}

.invest-return .return-pct {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--green);
}

.invest-return .return-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.invest-return .btn-primary {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

/* Calculator */
.calc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.calc-field {
  margin-bottom: 1.2rem;
}

.calc-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.calc-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  outline: none;
  transition: var(--transition);
}

.calc-input:focus {
  border-color: var(--red);
}

.rate-display {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
}

.rate-display strong {
  color: var(--red);
  font-size: 1.1rem;
}

.year-btns {
  display: flex;
  gap: 0.4rem;
}

.year-btn {
  flex: 1;
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.year-btn:hover,
.year-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.calc-result {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

.result-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.result-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex: 1;
}

.result-val {
  font-size: 1.3rem;
  font-weight: 900;
}

.result-cur {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.return-percent-bar {
  height: 6px;
  background: var(--bg-primary);
  border-radius: 3px;
  margin: 0.8rem 0;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-light));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.result-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ========================= NEIGHBORHOODS ========================= */
.city-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
}

.city-tab {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.5rem;
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.city-tab:hover,
.city-tab.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.neighborhoods-layout {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 2rem;
  align-items: start;
}

.neighborhoods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.neighborhood-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.neighborhood-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--red);
  transform: scaleY(0);
  transition: var(--transition);
}

.neighborhood-card:hover {
  transform: translateX(4px);
  border-color: rgba(220, 38, 38, 0.3);
}

.neighborhood-card:hover::before {
  transform: scaleY(1);
}

.hood-name {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.hood-city {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.hood-price {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.hood-price strong {
  color: var(--text-primary);
}

.hood-bar-wrap {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.hood-bar {
  height: 100%;
  background: var(--red);
  border-radius: 2px;
}

.hood-growth {
  font-size: 0.78rem;
  color: var(--green);
  font-weight: 700;
}

.hood-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Hood Map */
.neighborhoods-map {
  position: sticky;
  top: 90px;
}

.hood-map-bg {
  height: 500px;
  background: linear-gradient(135deg, #0d1117, #1a1a2e);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.hood-map-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(220, 38, 38, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 38, 38, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

.hood-map-title {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.hood-map-pins {
  position: absolute;
  inset: 0;
}

.hood-pin {
  position: absolute;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.hood-pin:hover {
  transform: translate(-50%, -58%) scale(1.1);
  z-index: 10;
  background: var(--red);
}

.hood-pin::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(220, 38, 38, 0.9);
  border-bottom: none;
}

/* Stats Row */
.hood-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.hood-stat {}

.hs-val {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--red);
}

.hs-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ========================= LOGIN ========================= */
.login-page {
  min-height: 100vh;
  padding-top: 70px;
}

.login-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 70px);
}

.login-brand {
  background: linear-gradient(135deg, #0a0a0a, #1a0505);
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, transparent 70%);
}

.login-logo-big {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.big-logo-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.login-logo-big span {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 3px;
}

.login-brand-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.login-brand-sub {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lf-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.lf-icon {
  color: var(--green);
  font-weight: 700;
}

.login-form-wrap {
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

.login-header {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  padding: 0.3rem;
}

.login-tab {
  flex: 1;
  padding: 0.6rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.login-tab.active {
  background: var(--red);
  color: #fff;
}

.social-btns {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.social-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.social-btn.google {
  background: #fff;
  color: #333;
  border: 1.5px solid #ddd;
}

.social-btn.apple {
  background: #1a1a1a;
  color: #fff;
  border: 1.5px solid #333;
}

.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.social-btn.google span {
  font-weight: 900;
  color: #4285f4;
  font-size: 1.1rem;
}

.divider-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.divider-or::before,
.divider-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider-or span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
  resize: vertical;
}

.form-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.forgot-link {
  position: absolute;
  left: 0;
  bottom: -1.5rem;
  background: none;
  border: none;
  color: var(--red);
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.login-terms {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
}

.login-terms a {
  color: var(--red);
  text-decoration: none;
}

/* ========================= DASHBOARD (FULL-SCREEN STANDALONE) ========================= */
#page-dashboard {
  padding-top: 0 !important;
  min-height: 100vh !important;
  background: #070b15 !important;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.dash-sidebar {
  background: linear-gradient(180deg, #0d1322 0%, #080c18 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.dash-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  flex-shrink: 0;
}

.dash-user-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
}

.dash-role {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
  position: relative;
}

.dash-nav-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.dash-nav-item.active {
  background: rgba(220, 38, 38, 0.15);
  color: var(--red-light);
}

.dash-nav-icon {
  font-size: 1rem;
}

.dash-badge {
  background: var(--red);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 50px;
  margin-right: auto;
}

.dash-logout {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  padding: 0.7rem;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 1rem;
}

.dash-logout:hover {
  border-color: var(--red);
  color: var(--red);
}

.dash-main {
  padding: 2rem;
  background: var(--bg-primary);
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.dash-title {
  font-size: 1.5rem;
  font-weight: 800;
}

.dash-date {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

.dash-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dash-notif {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
}

.notif-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dash-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
}

.dash-stat-card:hover {
  border-color: rgba(220, 38, 38, 0.3);
  transform: translateY(-3px);
}

.dsc-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.dsc-icon.red {
  background: rgba(220, 38, 38, 0.15);
}

.dsc-icon.green {
  background: rgba(34, 197, 94, 0.15);
}

.dsc-icon.blue {
  background: rgba(59, 130, 246, 0.15);
}

.dsc-icon.yellow {
  background: rgba(234, 179, 8, 0.15);
}

.dsc-info {
  flex: 1;
}

.dsc-val {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
}

.dsc-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dsc-trend {
  font-size: 0.8rem;
  font-weight: 700;
}

.dsc-trend.up {
  color: var(--green);
}

.dsc-trend.down {
  color: var(--red);
}

/* Charts */
.dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dash-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.chart-card-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.chart-period {
  display: flex;
  gap: 0.3rem;
}

.period-btn {
  padding: 0.3rem 0.7rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition);
}

.period-btn:hover,
.period-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.line-chart {}

.chart-svg {
  width: 100%;
  height: 120px;
}

.chart-x-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Donut */
.donut-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.donut-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}

.donut-seg,
.donut-seg2,
.donut-seg3 {
  transition: stroke-dasharray 0.5s ease;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: stretch;
}

.dl-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.dl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Table */
.dash-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.table-card-header h3 {
  font-size: 1rem;
  font-weight: 700;
}

.properties-table {}

.table-header-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 0.88rem;
  transition: var(--transition);
}

.table-row:hover {
  background: var(--bg-elevated);
}

.table-row:last-child {
  border-bottom: none;
}

.prop-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.prop-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.prop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prop-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.prop-type {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.status-badge {
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
}

.status-pending {
  background: rgba(234, 179, 8, 0.15);
  color: var(--yellow);
}

.status-sold {
  background: rgba(220, 38, 38, 0.15);
  color: var(--red-light);
}

.table-action-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.7rem;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition);
}

.table-action-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ========================= MODAL ========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open,
.modal-overlay.active {
  display: flex !important;
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  width: 100%;
  max-width: 450px;
  position: relative;
  animation: slideUp 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.modal-agent {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.modal-avatar {
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
}

.modal-agent h4 {
  font-size: 0.95rem;
  font-weight: 700;
}

.modal-agent p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ========================= TOAST ========================= */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-right: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 3000;
  transform: translateX(200%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 300px;
}

.toast.show {
  transform: translateX(0);
}

/* ========================= LUXURY COMPANY PROFILE FOOTER ========================= */
.footer {
  background: linear-gradient(180deg, #0a0c10 0%, #06070a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc2626, #ef4444, transparent);
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.8);
}

/* --- FOOTER PROFILE HEADER RIBBON --- */
.footer-profile-ribbon {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 20px;
  padding: 1.4rem 2rem;
  margin-bottom: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
}

.fpr-brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.fpr-logo-crest {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
  flex-shrink: 0;
}

.fpr-titles {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fpr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid rgba(220, 38, 38, 0.5);
  color: #fca5a5;
  padding: 0.2rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  width: fit-content;
}

.fpr-titles h4 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}

.fpr-titles p {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 0;
}

.fpr-slogan-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(220, 38, 38, 0.35);
  padding: 0.6rem 1.4rem;
  border-radius: 14px;
}

.fpr-slogan-main {
  font-size: 1rem;
  font-weight: 900;
  color: #f87171;
  letter-spacing: 0.5px;
}

.fpr-slogan-sub {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.btn-open-profile-modal {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border: 1px solid rgba(248, 113, 113, 0.5);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}

.btn-open-profile-modal:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.6);
}

/* --- 4 PILLARS STRIP (Slide 2) --- */
.footer-pillars-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.pillar-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* ============================================================
   🏙️ 5 EQUAL SECTORS PHOTO GALLERY SHOWCASE STRIP
   ============================================================ */
  .f-sectors-gallery-showcase {
    background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12), transparent 70%),
      linear-gradient(135deg, rgba(6, 44, 31, 0.5) 0%, rgba(2, 20, 14, 0.7) 100%);
    border: 1.5px solid rgba(52, 211, 153, 0.3);
    border-radius: 24px;
    padding: 1.8rem 2rem;
    margin-bottom: 2.2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(16, 185, 129, 0.1);
    animation: fSectorsStripFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes fSectorsStripFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .f-sectors-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .fsh-badge {
    font-size: 0.85rem;
    font-weight: 800;
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(52, 211, 153, 0.35);
    padding: 0.25rem 0.8rem;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 0.35rem;
  }

  .fsh-title-box h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
  }

  .fsh-view-all-btn {
    background: rgba(16, 185, 129, 0.12);
    border: 1.5px solid rgba(52, 211, 153, 0.35);
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
    font-family: inherit;
  }

  .fsh-view-all-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: #34d399;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  }

  /* 5 Equal Columns Grid */
  .f-sectors-5-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1.2rem;
    width: 100%;
  }

  @media (max-width: 1024px) {
    .f-sectors-5-cards-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 640px) {
    .f-sectors-5-cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 420px) {
    .f-sectors-5-cards-grid {
      grid-template-columns: 1fr !important;
    }
  }

  .f-sec-photo-card {
    background: rgba(4, 25, 18, 0.85);
    border: 1.5px solid rgba(52, 211, 153, 0.25);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }

  .f-sec-photo-card:hover {
    transform: translateY(-6px);
    border-color: #34d399;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(16, 185, 129, 0.35);
  }

  .f-sec-img-holder {
    position: relative;
    height: 180px;
    width: 100%;
    overflow: hidden;
  }

  .f-sec-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .f-sec-photo-card:hover .f-sec-img-holder img {
    transform: scale(1.1);
  }

  .f-sec-tag-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(2, 20, 14, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #d1fae5;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
  }

  .f-sec-card-caption {
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(3, 18, 13, 0.95);
    border-top: 1px solid rgba(52, 211, 153, 0.15);
  }

  .f-sec-card-caption strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
  }

  .f-sec-icon {
    font-size: 1.25rem;
  }

  /* Light Theme overrides for sectors showcase */
  html[data-theme="light"] .f-sectors-gallery-showcase,
  body.light-theme .f-sectors-gallery-showcase {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  }

  html[data-theme="light"] .fsh-title-box h4,
  body.light-theme .fsh-title-box h4 {
    color: #064e3b !important;
  }

  html[data-theme="light"] .f-sec-card-caption,
  body.light-theme .f-sec-card-caption {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
  }

  html[data-theme="light"] .f-sec-card-caption strong,
  body.light-theme .f-sec-card-caption strong {
    color: #0f172a !important;
  }

  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  width: 100% !important;
  align-items: stretch !important;
  padding-bottom: 2.5rem;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 580px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

.footer-brand,
.footer-col {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: fColFadeIn 0.5s ease-out forwards;
}

.footer-brand:hover,
.footer-col:hover {
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: rgba(16, 185, 129, 0.04) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(16, 185, 129, 0.1) !important;
  transform: translateY(-4px);
}

.footer-brand {
  animation-delay: 0.05s;
}

.footer-col#footerColServices {
  animation-delay: 0.15s;
}

.footer-col#footerColSectors {
  animation-delay: 0.25s;
}

.footer-col#footerColContact {
  animation-delay: 0.35s;
}

@keyframes fColFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer-desc {
  color: #94a3b8;
  font-size: 0.88rem;
  line-height: 1.8;
  margin: 0.6rem 0 1rem 0;
}

.footer-col h5 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1.1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  padding-bottom: 0.6rem;
}

.footer-col h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: 4px;
}

.footer-clean-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.footer-clean-links li a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.45;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
}

.footer-clean-links li a:hover {
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  transform: translateX(-4px);
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.f-contact-text-list li a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #cbd5e1;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.f-contact-text-list li a:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  transform: translateX(-4px);
  color: #ffffff;
}

.fcl-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Compact Profile Button in Column 1 */
.f-profile-cta-btn {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(4, 29, 20, 0.85) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.4);
  color: #ffffff;
  padding: 0.75rem 1.2rem;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  transition: all 0.25s ease;
  font-family: inherit;
}

.f-profile-cta-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(4, 29, 20, 0.95) 100%);
  border-color: #34d399;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

/* Clean WhatsApp Button */
.f-clean-wa-btn {
  margin-top: 0.8rem;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #ffffff;
  text-decoration: none;
  padding: 0.75rem 1.2rem;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
  transition: all 0.25s ease;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.f-clean-wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.5);
  color: #ffffff;
}

/* Light Theme High Contrast for Clean Footer */
html[data-theme="light"] .footer-clean-links li a,
body.light-theme .footer-clean-links li a {
  color: #334155 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .footer-clean-links li a:hover,
body.light-theme .footer-clean-links li a:hover {
  color: #059669 !important;
}

html[data-theme="light"] .f-contact-text-list li a,
body.light-theme .f-contact-text-list li a {
  color: #1e293b !important;
}

html[data-theme="light"] .f-profile-cta-btn,
body.light-theme .f-profile-cta-btn {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

.footer-services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.fsl-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.83rem;
  color: #cbd5e1;
  line-height: 1.45;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  transition: all 0.25s ease;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer !important;
}

.fsl-item:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.45);
  transform: translateX(-4px);
  color: #ffffff;
}

.fsl-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.fsl-text strong {
  color: #ffffff;
  font-weight: 800;
  display: inline;
}

.fsl-text span {
  color: #94a3b8;
  font-size: 0.75rem;
  display: block;
}

/* Sectors & Values Column */
.f-chips-group {
  margin-bottom: 1.2rem;
}

.fcg-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fca5a5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  display: block;
}

.f-sectors-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.f-sec-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.8rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #e2e8f0;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.f-sec-pill:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
}

.f-values-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.f-val-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  color: #e2e8f0;
  cursor: pointer !important;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.f-val-item:hover {
  background: rgba(220, 38, 38, 0.12);
  transform: translateX(-3px);
}

.f-val-num {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 900;
  color: #ef4444;
  background: rgba(220, 38, 38, 0.18);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.f-val-item span:not(.f-val-num) {
  font-weight: 700;
  color: #cbd5e1;
}

.f-why-badge-pill {
  margin-top: 1rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(15, 23, 42, 0.7));
  border: 1px solid rgba(220, 38, 38, 0.35);
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.78rem;
  color: #fca5a5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.f-why-badge-pill:hover {
  border-color: #ef4444;
  background: rgba(220, 38, 38, 0.25);
  transform: translateY(-2px);
}

/* Light theme high-contrast adjustments */
html[data-theme="light"] .f-val-item span:not(.f-val-num),
body.light-theme .f-val-item span:not(.f-val-num) {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .f-val-item,
body.light-theme .f-val-item {
  color: #0f172a !important;
}

html[data-theme="light"] .f-val-item:hover,
body.light-theme .f-val-item:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}

html[data-theme="light"] .fcg-title,
body.light-theme .fcg-title {
  color: #b91c1c !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .footer-col-sub,
body.light-theme .footer-col-sub {
  color: #475569 !important;
}

html[data-theme="light"] .f-why-badge-pill,
body.light-theme .f-why-badge-pill {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

/* Contact Column */
.f-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.fcc-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}

.fcc-item:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.45);
  transform: translateX(-4px);
}

.fcc-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.fcc-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.fcc-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.fcc-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.fcc-gold {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.fcc-info strong {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
}

.fcc-info span {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  direction: ltr;
  text-align: right;
  display: block;
}

.fcc-wa-btn {
  background: #16a34a;
  color: #ffffff !important;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35);
}

.fcc-wa-btn:hover {
  background: #22c55e;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

/* ============================================================
   ☀️ LUXURY LIGHT THEME ADAPTATIONS FOR FOOTER
   ============================================================ */
html[data-theme="light"] .footer,
body.light-theme .footer {
  background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .footer-profile-ribbon,
body.light-theme .footer-profile-ribbon {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .fpr-titles h4,
body.light-theme .fpr-titles h4 {
  color: #0f172a !important;
}

html[data-theme="light"] .fpr-titles p,
body.light-theme .fpr-titles p {
  color: #64748b !important;
}

html[data-theme="light"] .pillar-item,
body.light-theme .pillar-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .pillar-text strong,
body.light-theme .pillar-text strong {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-vm-box,
body.light-theme .footer-vm-box {
  background: #f1f5f9 !important;
}

html[data-theme="light"] .fvm-row,
body.light-theme .fvm-row {
  color: #334155 !important;
}

html[data-theme="light"] .footer-col h5,
body.light-theme .footer-col h5 {
  color: #0f172a !important;
}

html[data-theme="light"] .fsl-item,
body.light-theme .fsl-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .fsl-text strong,
body.light-theme .fsl-text strong {
  color: #0f172a !important;
}

html[data-theme="light"] .f-sec-pill,
body.light-theme .f-sec-pill {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .fcc-item,
body.light-theme .fcc-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .fcc-info span,
body.light-theme .fcc-info span {
  color: #0f172a !important;
}


/* ============================================================
   📑 MASTERPIECE LUXURY EMERALD COMPANY PROFILE PRESENTATION MODAL
   ============================================================ */
#companyProfileModal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(1, 10, 7, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 99999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: cpmOverlayFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cpmOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cpm-modal-card {
  max-width: 1320px !important;
  width: 95vw !important;
  height: 92vh !important;
  max-height: 92vh !important;
  background: radial-gradient(circle at 85% 10%, rgba(16, 185, 129, 0.25), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(5, 150, 105, 0.2), transparent 50%),
    linear-gradient(160deg, #052319 0%, #02140d 50%, #010a07 100%) !important;
  border: 2px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 30px !important;
  padding: 1.8rem 2.4rem 1.4rem 2.4rem !important;
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.95), 0 0 60px rgba(16, 185, 129, 0.28) !important;
  position: relative !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: column !important;
  color: #ffffff !important;
  overflow: hidden !important;
  animation: cpmModalPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box !important;
}

@keyframes cpmModalPop {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 🌿 Header Bar */
.cpm-modal-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  margin-bottom: 1rem !important;
  flex-shrink: 0 !important;
}

.cpm-brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
}

.cpm-brand-badge {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.8rem !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
}

.cpm-titles h3 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  margin: 0 0 0.25rem 0 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
}

.cpm-titles span {
  font-size: 0.95rem !important;
  color: #a7f3d0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* 🌿 Large Luxury Tabs Bar */
.cpm-tabs-scroll {
  display: flex !important;
  gap: 0.8rem !important;
  overflow-x: auto !important;
  padding: 0.4rem 0.4rem 1rem 0.4rem !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.2) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.5) transparent !important;
  flex-shrink: 0 !important;
}

.cpm-tabs-scroll::-webkit-scrollbar {
  height: 6px !important;
}

.cpm-tabs-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #10b981, #34d399) !important;
  border-radius: 10px !important;
}

.cpm-tab-btn {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  color: #ecfdf5 !important;
  padding: 0.85rem 1.45rem !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.cpm-tab-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #a7f3d0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

.cpm-tab-btn:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35) !important;
}

.cpm-tab-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.55), 0 0 15px rgba(52, 211, 153, 0.4) !important;
  transform: translateY(-2px) scale(1.04) !important;
}

.cpm-tab-btn.active .cpm-tab-num {
  background: #ffffff !important;
  color: #064e3b !important;
  border-color: #ffffff !important;
}

/* 🌿 Scrollable Slides Canvas (Generous Spacing & Depth) */
.cpm-slide-container {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 1.4rem 0.8rem 3rem 0.8rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.5) transparent !important;
}

.cpm-slide-container::-webkit-scrollbar {
  width: 8px !important;
}

.cpm-slide-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
  border-radius: 10px !important;
}

.cpm-slide {
  display: none;
}

.cpm-slide.active {
  display: block !important;
  animation: cpmSlideFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes cpmSlideFadeUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🌿 Typography & Tags in Slides */
.cpm-slide-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: rgba(16, 185, 129, 0.25) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
  color: #a7f3d0 !important;
  padding: 0.45rem 1.3rem !important;
  border-radius: 50px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  width: fit-content !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
  margin-bottom: 0.8rem !important;
}

.cpm-slide-title {
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0.2rem 0 1rem 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.4px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.cpm-slide-desc {
  font-size: 1.22rem !important;
  color: #ecfdf5 !important;
  line-height: 2 !important;
  font-weight: 500 !important;
  margin: 0 0 1.8rem 0 !important;
  max-width: 950px !important;
}

/* 🌿 Layout Grid Helpers */
.cpm-split-slide {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 2.6rem !important;
  align-items: start !important;
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.45) 0%, rgba(3, 25, 18, 0.75) 100%) !important;
  border: 2px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 28px !important;
  padding: 2.6rem !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 2rem !important;
}

.cpm-text-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
}

.cpm-image-side {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.75) !important;
  border: 2.5px solid rgba(52, 211, 153, 0.4) !important;
  height: 440px !important;
}

.cpm-image-side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cpm-image-side:hover img {
  transform: scale(1.05) !important;
}

/* 🌿 Grand Lux Showcase Cards */
.cpm-grand-box {
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.45) 0%, rgba(3, 25, 18, 0.75) 100%) !important;
  border: 2px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 26px !important;
  padding: 2.4rem !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 2rem !important;
  transition: all 0.3s ease !important;
}

.cpm-grand-box:hover {
  border-color: #34d399 !important;
  box-shadow: 0 20px 60px rgba(16, 185, 129, 0.25) !important;
  transform: translateY(-3px) !important;
}

/* 🌿 Metrics & Counters Grid */
.cpm-metrics-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.4rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.cpm-metric-card {
  background: rgba(4, 30, 20, 0.75) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 20px !important;
  padding: 1.5rem 1.2rem !important;
  text-align: center !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
}

.cpm-metric-card:hover {
  border-color: #10b981 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.3) !important;
}

.cpm-metric-num {
  font-size: 2.4rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  margin-bottom: 0.3rem !important;
  display: block !important;
  letter-spacing: -0.5px !important;
}

.cpm-metric-label {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ecfdf5 !important;
}

/* 🌿 Interactive Pillar & Value Cards */
.cpm-pillars-lux-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.6rem !important;
  margin-top: 1.8rem !important;
}

.cpm-card-item-lux {
  background: rgba(6, 44, 31, 0.5) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  border-radius: 22px !important;
  padding: 1.8rem 2rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.3rem !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cpm-card-item-lux:hover {
  background: rgba(6, 60, 42, 0.7) !important;
  border-color: #10b981 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 40px rgba(16, 185, 129, 0.25) !important;
}

.cpm-card-icon-box {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: rgba(16, 185, 129, 0.25) !important;
  border: 1.5px solid #34d399 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}

.cpm-card-content strong {
  color: #ffffff !important;
  font-size: 1.38rem !important;
  font-weight: 900 !important;
  display: block !important;
  margin-bottom: 0.55rem !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

.cpm-card-content p {
  color: #f1f5f9 !important;
  font-size: 1.08rem !important;
  line-height: 1.85 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* 🌿 6 Services & 5 Sectors Rich Cards */
.cpm-services-lux-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.6rem !important;
}

.cpm-sectors-lux-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 1.6rem !important;
}

.cpm-sector-card-lux {
  background: rgba(6, 44, 31, 0.55) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

.cpm-sector-card-lux:hover {
  border-color: #34d399 !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 50px rgba(16, 185, 129, 0.3) !important;
}

.cpm-sector-img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}

.cpm-sector-card-lux:hover .cpm-sector-img {
  transform: scale(1.06) !important;
}

.cpm-sector-body {
  padding: 1.5rem !important;
}

.cpm-sector-body strong {
  font-size: 1.25rem !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}

.cpm-sector-body p {
  color: #a7f3d0 !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* 🌿 Bottom Navigation Controls (Dock) */
.cpm-footer-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 1.1rem !important;
  border-top: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  margin-top: 0.6rem !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.cpm-nav-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  color: #ffffff !important;
  padding: 0.75rem 1.6rem !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.cpm-nav-btn:hover:not([disabled]) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #6ee7b7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
}

.cpm-slide-counter {
  font-size: 0.95rem !important;
  color: #a7f3d0 !important;
  font-weight: 800 !important;
  background: rgba(4, 30, 20, 0.8) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  padding: 0.45rem 1.3rem !important;
  border-radius: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Modal Close Button */
.cpm-close-circle-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.cpm-close-circle-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.08) !important;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6) !important;
}

/* Responsive */
@media (max-width: 900px) {
  .cpm-split-slide {
    grid-template-columns: 1fr !important;
  }

  .cpm-image-side {
    height: 220px !important;
  }

  .cpm-services-6-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .cpm-sectors-5-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-pillars-strip {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-pillars-strip {
    grid-template-columns: 1fr !important;
  }

  .cpm-services-6-grid {
    grid-template-columns: 1fr !important;
  }

  .cpm-sectors-5-grid {
    grid-template-columns: 1fr !important;
  }

  .cpm-modal-card {
    padding: 1.2rem !important;
  }
}

.social-links {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.social-link {
  width: 38px;
  height: 38px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link:hover {
  transform: translateY(-3px);
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  position: relative;
}

.footer-bottom-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.copyright-text {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--red);
}


/* EBS Digital Software Attribution Styling */
.ebs-signature-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(20, 20, 25, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.85rem;
  color: #cbd5e1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.ebs-signature-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.75s ease;
}

.ebs-signature-badge:hover::before {
  left: 140%;
}

.ebs-signature-badge:hover {
  border-color: rgba(230, 57, 70, 0.5);
  box-shadow: 0 8px 30px rgba(230, 57, 70, 0.3), 0 0 20px rgba(230, 57, 70, 0.15);
  transform: translateY(-2px) scale(1.02);
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(15, 15, 20, 0.8) 100%);
}

.ebs-tech-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981, 0 0 18px rgba(16, 185, 129, 0.6);
  animation: ebsPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes ebsPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px #10b981, 0 0 18px rgba(16, 185, 129, 0.6);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
    box-shadow: 0 0 4px #10b981, 0 0 8px rgba(16, 185, 129, 0.3);
  }
}

/* ========================= PARTICLES ========================= */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(220, 38, 38, 0.5);
  border-radius: 50%;
  animation: float linear infinite;
}

/* ========================= ANIMATIONS ========================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100px) rotate(720deg);
    opacity: 0;
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ========================= FEATURED SECTION OVERRIDE ========================= */
.featured-section {
  background: var(--bg-primary);
}

/* ============================================================
   ⭐ REVIEWS & TESTIMONIALS (LUXURY REDESIGN)
   ============================================================ */

.reviews-section {
  background: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.07) 0%, var(--bg-primary) 70%);
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Header & CTA Block */
.reviews-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.reviews-title-block {
  text-align: right;
  max-width: 600px;
}

.reviews-cta-block {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  padding: 0.8rem 1.4rem;
}

.reviews-overall-score {
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 1.2rem;
}

.ros-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  display: block;
}

.ros-stars {
  color: #eab308;
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin: 0.2rem 0;
}

.ros-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
}

.add-rev-btn-glow {
  padding: 0.85rem 1.6rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;
  border-radius: var(--radius) !important;
}

/* Carousel */
.reviews-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.reviews-track-outer {
  flex: 1;
  overflow: hidden;
  padding: 1rem 0;
}

.reviews-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
  will-change: transform;
}

/* Testimonial Cards */
.review-card {
  flex: 0 0 calc(33.333% - 1rem);
  background: linear-gradient(160deg, rgba(24, 24, 32, 0.95), rgba(16, 16, 22, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 2rem 1.8rem 1.6rem 1.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 290px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45);
  transition: all 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.review-card:hover {
  transform: translateY(-8px);
  border-color: rgba(220, 38, 38, 0.6);
  background: linear-gradient(160deg, rgba(32, 24, 28, 0.98), rgba(18, 14, 18, 1));
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6), 0 0 30px rgba(220, 38, 38, 0.2);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.reviewer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
  flex-shrink: 0;
  border: 2px solid rgba(220, 38, 38, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.review-card:hover .reviewer-avatar {
  transform: scale(1.1) rotate(4deg);
}

.reviewer-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.reviewer-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
}

.rev-verified-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #22c55e;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.reviewer-city {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.review-stars {
  color: #eab308;
  font-size: 1rem;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.5));
}

.review-text {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.8;
  margin-bottom: 1.4rem;
  flex-grow: 1;
}

/* Review Footer with distinct spacious rows */
.review-card-footer {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.review-tag-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.review-tag {
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #fca5a5;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.review-card:hover .review-tag {
  background: rgba(220, 38, 38, 0.25);
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.4);
}

.review-meta-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.review-date {
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.review-helpful {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 0.45rem 0.95rem;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.review-helpful:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.6);
  color: #ffffff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.review-helpful.liked {
  background: rgba(220, 38, 38, 0.25);
  border-color: #dc2626;
  color: #ffffff;
}

.helpful-count {
  background: rgba(255, 255, 255, 0.12);
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.78rem;
  color: #ffffff;
}

.new-review-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: linear-gradient(135deg, var(--red), #800);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.5);
  animation: badgeBlink 2s ease infinite alternate;
}

/* Nav Buttons & Dots */
.rev-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  flex-shrink: 0;
}

.rev-nav:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
}

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.rev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.rev-dot.active {
  width: 24px;
  border-radius: 10px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* ============================================================
   💎 LUXURY REVIEW MODAL STYLES
   ============================================================ */

.review-modal-card {
  max-width: 540px !important;
  background: linear-gradient(160deg, #151515 0%, #0d0505 100%) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(220, 38, 38, 0.15) !important;
  padding: 2rem !important;
  border-radius: var(--radius-xl) !important;
}

.review-modal-user-bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.rmu-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #800);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid rgba(220, 38, 38, 0.4);
}

.rmu-details {
  flex: 1;
  text-align: right;
}

.rmu-badge-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.rmu-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.15rem;
}

.rmu-welcome-msg {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.rmu-switch-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rmu-switch-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fff;
  border-color: var(--red);
}

.star-rating-box {
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}

.star-input-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: block;
}

.star-input {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.star-inp {
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.star-inp:hover,
.star-inp.active {
  color: #eab308;
  transform: scale(1.25) rotate(-5deg);
  filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.7));
}

.star-label-text {
  font-size: 0.88rem;
  color: #eab308;
  font-weight: 800;
  display: block;
}

.review-cats-compact {
  margin-bottom: 1rem;
}

.review-cats-compact .rev-cat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.review-cats-compact .rev-cat-tag {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  color: var(--text-secondary);
  padding: 0.35rem 0.8rem;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.review-cats-compact .rev-cat-tag:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fff;
}

.review-cats-compact .rev-cat-tag.active {
  background: rgba(220, 38, 38, 0.2);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.3);
}

.moderation-badge-note {
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  color: #facc15;
  line-height: 1.4;
  margin: 1rem 0 1.2rem;
  text-align: right;
}

.review-modal-submit-btn {
  padding: 0.95rem !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.45) !important;
}

@keyframes rscPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 25px rgba(52, 211, 153, 0.3); }
  50% { transform: scale(1.06); box-shadow: 0 0 50px rgba(52, 211, 153, 0.6); }
  100% { transform: scale(0.95); box-shadow: 0 0 25px rgba(52, 211, 153, 0.3); }
}

.celebration-review-modal {
  animation: celebrationSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes celebrationSlideUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 992px) {
  .review-card {
    flex: 0 0 calc(50% - 0.75rem);
  }

  .reviews-header-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .reviews-cta-block {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .review-card {
    flex: 0 0 calc(100% - 0px);
  }

  .reviews-cta-block {
    flex-direction: column;
    text-align: center;
  }

  .reviews-overall-score {
    border-left: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
  }

  .add-rev-btn-glow {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   NEW ELEMENTS - RISALE UPDATE V6.0
   Navbar, Sponsored Ads, Hero Map, New Categories, Maps Page, Ads Page
   ============================================================ */

/* --- LOGO: RISALE ONLY --- */
.logo-risale-main {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fca5a5 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.logo-risale-sub {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* --- COMPACT SLEEK NAVBAR BUTTONS --- */
.nav-btn-compact {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.42rem 0.85rem !important;
  border-radius: 50px !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  height: 33px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.btn-request-prop {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1px solid rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}

.btn-request-prop:hover {
  background: linear-gradient(135deg, #fbbf24, #b45309) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.5) !important;
  color: #ffffff !important;
}

.btn-nav-dashboard {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f1f5f9 !important;
}

.btn-nav-dashboard:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px) !important;
}

html[data-theme="light"] .btn-nav-dashboard,
body.light-theme .btn-nav-dashboard {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .btn-nav-dashboard:hover,
body.light-theme .btn-nav-dashboard:hover {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  color: #991b1b !important;
}

.nav-actions .btn-ghost {
  padding: 0.42rem 0.8rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  height: 33px !important;
}

.nav-actions .btn-primary {
  padding: 0.42rem 0.9rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  height: 33px !important;
}

/* --- SPONSORED VIDEO BANNER (FULL WIDTH) --- */
.hero-sponsored-video-wrapper {
  background: rgba(15, 23, 42, 0.88);
  border: 1.5px solid rgba(220, 38, 38, 0.35);
  border-radius: 24px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.8rem;
  backdrop-filter: blur(24px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 35px rgba(220, 38, 38, 0.15);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.3s ease;
}

.hero-sponsored-video-wrapper:hover {
  border-color: rgba(220, 38, 38, 0.6);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 45px rgba(220, 38, 38, 0.25);
}

.sponsored-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sponsored-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #fca5a5;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.2);
}

.sp-dot {
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
  display: inline-block;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }

  70% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.sponsored-video-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sp-sound-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.sp-sound-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.sponsored-video-frame {
  position: relative !important;
  width: 100% !important;
  height: 480px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #000 !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7) !important;
}

.sponsored-main-video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  /* Eliminates all black side bars completely! */
  object-position: center center !important;
  background: #000000 !important;
  border-radius: 18px !important;
}

@media (max-width: 768px) {
  .sponsored-main-video {
    max-height: 320px;
    min-height: 200px;
  }
}

.sponsored-video-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(10, 15, 28, 0.95) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.sv-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sv-tag {
  font-size: 0.74rem;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.3px;
}

.sv-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}

.sv-cta-group {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.sv-cta-btn {
  padding: 0.55rem 1.2rem !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
}

.sv-details-btn {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  color: #fca5a5 !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}

.sv-details-btn:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #fff !important;
}

/* Light Theme Support for Video Banner */
html[data-theme="light"] .hero-sponsored-video-wrapper,
body.light-theme .hero-sponsored-video-wrapper {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08), 0 0 25px rgba(220, 38, 38, 0.1) !important;
}

html[data-theme="light"] .sv-title,
body.light-theme .sv-title {
  color: #0f172a !important;
}

html[data-theme="light"] .sponsored-video-bottom-bar,
body.light-theme .sponsored-video-bottom-bar {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, #ffffff 100%) !important;
  border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] .sp-sound-btn,
body.light-theme .sp-sound-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* --- HERO MAP + SEARCH WRAP --- */
.hero-map-search-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 1.4rem auto;
  align-items: start;
}

@media (max-width: 768px) {
  .hero-map-search-wrap {
    grid-template-columns: 1fr;
  }
}

/* --- HERO MINI MAP --- */
.hero-mini-map {
  position: relative;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.hero-mini-map:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.hero-mini-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 20.41l2.83-2.83 1.41 1.41L1.41 22H0v-1.59zM0 2.41l2.83-2.83 1.41 1.41L1.41 4H0V2.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hmm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 20, 0.5);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  transition: all 0.3s ease;
}

.hero-mini-map:hover .hmm-overlay {
  background: rgba(10, 10, 20, 0.3);
}

.hmm-cta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.7rem 1rem;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  width: 100%;
}

.hmm-icon {
  font-size: 1.5rem;
}

.hmm-cta strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

.hmm-cta span {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
}

.hmm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hmm-pin:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.hmm-pin-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, 0.6);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* --- CATEGORIES GRID 5 --- */
.categories-grid-5 {
  grid-template-columns: repeat(5, 1fr) !important;
}

@media (max-width: 900px) {
  .categories-grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .categories-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Category Color Variants */
.category-sale .category-icon {
  background: rgba(34, 197, 94, 0.15) !important;
}

.category-sale:hover {
  border-color: rgba(34, 197, 94, 0.4) !important;
}

.category-rent .category-icon {
  background: rgba(59, 130, 246, 0.15) !important;
}

.category-rent:hover {
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.category-invest .category-icon {
  background: rgba(251, 191, 36, 0.15) !important;
}

.category-invest:hover {
  border-color: rgba(251, 191, 36, 0.4) !important;
}

.category-auction .category-icon {
  background: rgba(168, 85, 247, 0.15) !important;
}

.category-auction:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
}

.category-projects .category-icon {
  background: rgba(234, 88, 12, 0.15) !important;
}

.category-projects:hover {
  border-color: rgba(234, 88, 12, 0.4) !important;
}

/* --- FILTER CHIP MAP --- */
.filter-chip-map {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #fca5a5 !important;
}

.filter-chip-map:hover {
  background: rgba(220, 38, 38, 0.22) !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* ============================================================
   PAGE: MAPS
   ============================================================ */
.maps-page-wrapper {
  padding-bottom: 3rem;
}

.maps-type-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 70px;
  z-index: 80;
}

html[data-theme="light"] .maps-type-filter-bar,
body.light-theme .maps-type-filter-bar {
  background: #ffffff !important;
  border-bottom-color: #f1f5f9 !important;
}

.maps-type-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.map-type-tab {
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.map-type-tab:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fff;
}

.map-type-tab.active {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

html[data-theme="light"] .map-type-tab,
body.light-theme .map-type-tab {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

html[data-theme="light"] .map-type-tab.active,
body.light-theme .map-type-tab.active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

.maps-search-inline {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.maps-search-input {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.88rem;
  width: 220px;
}

.maps-city-select {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.85rem;
}

html[data-theme="light"] .maps-search-input,
html[data-theme="light"] .maps-city-select,
body.light-theme .maps-search-input,
body.light-theme .maps-city-select {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

.maps-full-canvas {
  width: 100%;
}

/* UNDER MAP CATEGORIES */
.maps-under-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .maps-under-categories {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .maps-under-categories {
    grid-template-columns: repeat(2, 1fr);
  }
}

.muc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.muc-card:hover {
  border-color: rgba(220, 38, 38, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.muc-icon {
  font-size: 1.8rem;
  margin-bottom: 0.2rem;
}

.muc-card strong {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

.muc-card span {
  font-size: 0.76rem;
  color: #64748b;
}

.muc-contact {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

.muc-contact:hover {
  background: rgba(220, 38, 38, 0.18) !important;
}

html[data-theme="light"] .muc-card,
body.light-theme .muc-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .muc-card strong,
body.light-theme .muc-card strong {
  color: #0f172a !important;
}

/* Map pins for auction and project */
.map-pin-auction .pin-marker-body {
  background: rgba(168, 85, 247, 0.9) !important;
}

.map-pin-project .pin-marker-body {
  background: rgba(234, 88, 12, 0.9) !important;
}

/* ============================================================
   PAGE: ADS
   ============================================================ */

/* ADS PACKAGES GRID */
.ads-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 800px) {
  .ads-packages-grid {
    grid-template-columns: 1fr;
  }
}

.ads-pkg-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.ads-pkg-card:hover {
  border-color: rgba(220, 38, 38, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.pkg-featured-card {
  border-color: rgba(220, 38, 38, 0.4) !important;
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.08), var(--bg-card)) !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2), 0 20px 50px rgba(220, 38, 38, 0.15) !important;
}

.pkg-popular-badge {
  position: absolute;
  top: -14px;
  right: 50%;
  transform: translateX(50%);
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.pkg-badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  align-self: flex-start;
}

.pkg-daily {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pkg-weekly {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.pkg-monthly {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.pkg-icon {
  font-size: 2.5rem;
}

.pkg-name {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
}

.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.pkg-amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: #dc2626;
}

.pkg-currency {
  font-size: 0.9rem;
  color: #94a3b8;
}

.pkg-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.pkg-features li {
  font-size: 0.88rem;
  color: #cbd5e1;
}

.pkg-btn {
  width: 100%;
  margin-top: 0.5rem;
}

html[data-theme="light"] .ads-pkg-card,
body.light-theme .ads-pkg-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .pkg-name,
body.light-theme .pkg-name {
  color: #0f172a !important;
}

html[data-theme="light"] .pkg-features li,
body.light-theme .pkg-features li {
  color: #475569 !important;
}

/* AUCTIONS GRID */
.auctions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .auctions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .auctions-grid {
    grid-template-columns: 1fr;
  }
}

.auction-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.auction-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.auction-countdown {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-label {
  font-size: 0.6rem;
  color: #94a3b8;
  font-weight: 600;
}

.countdown-timer {
  font-size: 0.82rem;
  color: #fff;
  font-weight: 900;
  direction: ltr;
}

.badge-tag.auction-badge {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c4b5fd !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.auction-bid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.current-bid {
  display: flex;
  flex-direction: column;
}

.bid-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.bid-amount {
  font-size: 1rem;
  font-weight: 900;
  color: #c4b5fd;
}

.btn-bid {
  white-space: nowrap;
  font-size: 0.85rem !important;
  padding: 0.55rem 1rem !important;
}

/* LIVE BADGE */
.auction-live-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fca5a5;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  animation: pulse 1s infinite;
  display: inline-block;
}

/* ADS CONTACT CTA */
.ads-contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  margin-top: 3rem;
}

.ads-cta-content h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.4rem;
}

.ads-cta-content p {
  font-size: 0.9rem;
  color: #94a3b8;
}

.ads-cta-btn {
  font-size: 1rem !important;
  padding: 0.85rem 2rem !important;
}

html[data-theme="light"] .ads-cta-content h3,
body.light-theme .ads-cta-content h3 {
  color: #0f172a !important;
}

/* Section Header Centered */
.section-header.centered {
  text-align: center;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* BALANCED 3-COLUMN FOOTER SYSTEM */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr !important;
  gap: 3.5rem !important;
  width: 100% !important;
  align-items: start !important;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ============================================================
   📱 ULTRA-LUXURY MOBILE NAVIGATION & DRAWER SYSTEM (V28.0)
   ============================================================ */

/* Responsive navbar - keeps RISALE -> التواصل PERMANENTLY FIXED & VISIBLE */
.nav-links {
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 1240px) {
  .nav-links {
    display: flex !important;
    gap: 0.25rem !important;
  }

  .nav-link {
    padding: 0.32rem 0.6rem !important;
    font-size: 0.8rem !important;
  }

  .nav-desktop-only {
    display: none !important;
  }

  .hamburger {
    display: none !important;
  }

  .nav-actions {
    gap: 0.35rem !important;
  }

  .nav-btn-compact {
    padding: 0.38rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  .lang-nav-pill-btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.78rem !important;
  }

  .theme-icon-btn {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: flex !important;
    gap: 0.15rem !important;
  }

  .nav-link {
    padding: 0.28rem 0.45rem !important;
    font-size: 0.74rem !important;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 0.75rem !important;
  }

  .logo-title-en {
    font-size: 1.1rem !important;
  }

  .logo-title-ar {
    font-size: 0.58rem !important;
  }

  .lang-nav-pill-btn .lnp-label {
    display: none !important;
  }

  .lang-nav-pill-btn {
    padding: 0.35rem 0.5rem !important;
  }

  .nav-btn-highlight {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.74rem !important;
  }
}



/* Drawer Header */
.mdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.2rem;
}

html[data-theme="light"] .mdc-header,
body.light-theme .mdc-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.mdc-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.mdc-close-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #fff;
  border-color: #dc2626;
  transform: rotate(90deg);
}

/* Quick Action Cards Grid (2x2) */
.mdc-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}

.mdc-action-card {
  padding: 0.85rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.mdc-action-card:hover {
  transform: translateY(-3px) scale(1.02);
}

.mdc-card-add {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(4, 120, 87, 0.35));
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.mdc-card-add .mdc-card-icon {
  background: #10b981;
  color: #fff;
}

.mdc-card-add strong {
  color: #a7f3d0;
}

.mdc-card-req {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(153, 27, 27, 0.35));
  border-color: rgba(220, 38, 38, 0.5);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2);
}

.mdc-card-req .mdc-card-icon {
  background: #dc2626;
  color: #fff;
}

.mdc-card-req strong {
  color: #fca5a5;
}

.mdc-card-dash {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(29, 78, 216, 0.25));
  border-color: rgba(59, 130, 246, 0.4);
}

.mdc-card-dash .mdc-card-icon {
  background: #3b82f6;
  color: #fff;
}

.mdc-card-dash strong {
  color: #bfdbfe;
}

.mdc-card-admin {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(126, 34, 206, 0.25));
  border-color: rgba(168, 85, 247, 0.4);
}

.mdc-card-admin .mdc-card-icon {
  background: #a855f7;
  color: #fff;
}

.mdc-card-admin strong {
  color: #e9d5ff;
}

.mdc-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.mdc-card-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.mdc-card-info strong {
  font-size: 0.82rem;
  font-weight: 800;
}

.mdc-card-info span {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* Nav Links List */
.mdc-nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.mdc-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.mdc-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mdc-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

/* Animated checkmark tick after active/selected link */
.mdc-link::after {
  content: '✓';
  position: absolute;
  left: 0.9rem;
  font-size: 0.85rem;
  font-weight: 900;
  color: #22c55e;
  opacity: 0;
  transform: scale(0.4) rotate(-30deg);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mdc-link.active::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-theme="light"] .mdc-link,
body.light-theme .mdc-link {
  color: #1e293b;
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}

.mdc-link:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
  color: #fff;
  transform: translateX(-5px) scale(1.01);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.2);
}

.mdc-link.active {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fff;
  transform: translateX(-3px);
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.25);
}

html[data-theme="light"] .mdc-link:hover,
body.light-theme .mdc-link:hover,
html[data-theme="light"] .mdc-link.active,
body.light-theme .mdc-link.active {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

.mdc-link-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mdc-link-text {
  flex-grow: 1;
}

.mdc-link-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 50px;
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* Footer Box */
.mdc-footer-box {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .mdc-footer-box,
body.light-theme .mdc-footer-box {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.mdc-login-btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
}

html[data-theme="light"] .mdc-login-btn,
body.light-theme .mdc-login-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.mdc-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.mdc-contact-btn {
  padding: 0.65rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.25s ease;
}

.mdc-wa {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.mdc-call {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

/* --- LUXURY MOBILE BOTTOM APP BAR --- */
.mobile-bottom-navbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 66px;
  background: rgba(11, 15, 25, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
}

html[data-theme="light"] .mobile-bottom-navbar,
body.light-theme .mobile-bottom-navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-top-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 768px) {
  .mobile-bottom-navbar {
    display: flex !important;
  }

  body {
    padding-bottom: 70px !important;
  }
}

.mbn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #94a3b8;
  padding: 0.35rem 0.6rem;
  border-radius: 12px;
  transition: all 0.2s ease;
  position: relative;
  flex: 1;
  text-align: center;
}

.mbn-icon {
  font-size: 1.25rem;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mbn-label {
  font-size: 0.68rem;
  font-weight: 700;
}

.mbn-item.active {
  color: #dc2626;
}

.mbn-item.active .mbn-icon {
  transform: translateY(-2px) scale(1.15);
}

/* Center Highlighted FAB */
.mbn-center-fab {
  position: relative;
  top: -14px;
}

.mbn-fab-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5), 0 0 15px rgba(16, 185, 129, 0.3);
  border: 3px solid #0b0f19;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="light"] .mbn-fab-circle,
body.light-theme .mbn-fab-circle {
  border-color: #ffffff !important;
}

.mbn-center-fab:hover .mbn-fab-circle {
  transform: scale(1.1) rotate(90deg);
}

.mbn-fab-icon {
  font-size: 1.3rem;
  font-weight: 900;
}

.mbn-center-fab .mbn-label {
  color: #10b981;
  font-weight: 800;
  margin-top: 2px;
}


/* ============================================================
   📱 PREMIUM RESPONSIVE DESIGN SYSTEM
   Breakpoints: 1200px | 992px | 768px | 480px
   ============================================================ */

/* ─── 1200px Tablet Landscape ─── */
@media (max-width: 1200px) {
  .nav-container {
    padding: 0 1rem;
    gap: 0.5rem;
  }

  .nav-links {
    gap: 0.15rem;
  }

  .nav-link {
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
  }

  .btn-ghost {
    padding: 0 0.8rem;
    font-size: 0.82rem;
    height: 36px;
  }

  .btn-primary {
    padding: 0 0.95rem;
    font-size: 0.84rem;
    height: 36px;
  }

  .nav-app-btn {
    padding: 0 0.7rem;
    font-size: 0.78rem;
    height: 36px;
  }

  .theme-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1.05rem;
  }

  .logo-text {
    font-size: 1.15rem;
  }

  .logo-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .invest-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-charts-row {
    grid-template-columns: 1fr;
  }

  .properties-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── 992px Tablet ─── */
@media (max-width: 992px) {
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Hide all desktop action buttons on tablet/mobile — Drawer handles them */
  .nav-guest-actions {
    display: none !important;
  }

  /* Also hide lang switcher text on mobile */
  .lang-nav-pill-btn .lnp-label,
  .lang-nav-pill-btn .lnp-arrow {
    display: none !important;
  }

  /* Keep only theme toggle + lang icon + hamburger in navbar */
  .nav-actions {
    gap: 0.5rem !important;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .agent-card {
    grid-column: span 2;
  }

  .listings-layout {
    grid-template-columns: 1fr;
  }

  .listings-sidebar {
    position: relative;
    top: 0;
  }

  .invest-layout {
    grid-template-columns: 1fr;
  }

  .neighborhoods-layout {
    grid-template-columns: 1fr;
  }

  .neighborhoods-map {
    position: static;
  }

  .login-layout {
    grid-template-columns: 1fr;
  }

  .login-brand {
    display: none;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dash-sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .dash-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .table-header-row,
  .table-row {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .table-header-row span:nth-child(4),
  .table-header-row span:nth-child(6),
  .table-row>div:nth-child(4),
  .table-row>div:nth-child(6) {
    display: none;
  }
}

/* ─── 768px Mobile ─── */
@media (max-width: 768px) {

  /* ── NAV: Premium Mobile Header ── */
  .navbar {
    border-bottom: 1px solid rgba(220, 38, 38, 0.15);
  }

  .nav-actions .btn-ghost {
    display: none;
  }

  .nav-actions .btn-primary {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
  }

  /* ── HERO: Full Cinematic Mobile ── */
  .hero {
    min-height: 100svh;
  }

  .hero-content {
    padding: 6rem 1.2rem 3rem;
    text-align: center;
  }

  .hero-title {
    font-size: 2.2rem;
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-badge {
    font-size: 0.78rem;
    padding: 0.35rem 1rem;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .stat-item {
    text-align: center;
    padding: 0.5rem;
  }

  .stat-num {
    font-size: 1.5rem;
  }

  .stat-divider {
    display: none;
  }

  /* ── SEARCH BOX: Compact Mobile ── */
  .search-box {
    padding: 1rem;
    border-radius: var(--radius-lg);
  }

  .search-tabs {
    gap: 0.4rem;
  }

  .search-tab {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
  }

  .search-inputs {
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
  }

  .search-field {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    transition: border-color 0.2s ease;
  }

  .search-field:focus-within {
    border-color: var(--red);
  }

  .search-divider {
    display: none;
  }

  .btn-search {
    width: 100%;
    justify-content: center;
    padding: 0.9rem;
    font-size: 1rem;
    border-radius: var(--radius);
  }

  .search-filters {
    gap: 0.4rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.3rem;
  }

  .search-filters::-webkit-scrollbar {
    display: none;
  }

  .filter-chip {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── CATEGORIES: Premium Horizontal Scroll ── */
  .categories-section .container {
    padding: 0;
  }

  .categories-section .section-header {
    padding: 0 1.2rem;
  }

  .categories-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 1.2rem 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .categories-grid::-webkit-scrollbar {
    display: none;
  }

  .category-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.25s ease;
  }

  .category-card:active {
    transform: scale(0.96);
  }

  .category-icon {
    font-size: 2rem;
  }

  .category-name {
    font-size: 0.95rem;
  }

  .category-count {
    font-size: 0.72rem;
  }

  /* ── PROPERTY CARDS: Premium Mobile Grid ── */
  .properties-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 0 1rem;
  }

  .property-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .card-image-wrap {
    height: 200px;
  }

  .card-body {
    padding: 1rem;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-specs {
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  .card-spec {
    font-size: 0.8rem;
  }

  .card-price-overlay {
    font-size: 0.88rem;
    padding: 0.35rem 0.7rem;
  }

  /* ── LISTINGS SIDEBAR: Collapsible ── */
  .listings-sidebar {
    border-radius: var(--radius-lg);
    margin: 0 1rem;
  }

  .listings-main {
    padding: 0 1rem;
  }

  .listings-toolbar {
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
  }

  .toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .sort-select {
    flex: 1;
  }

  .listings-grid {
    padding: 0;
    gap: 1rem;
  }

  /* ── WHY CARDS: Full Width Stack ── */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }

  .why-card {
    padding: 1.5rem;
    text-align: right;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .why-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
  }

  .why-card h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .why-card p {
    font-size: 0.88rem;
  }

  /* ── SECTIONS: Mobile Spacing ── */
  .section {
    padding: 2.5rem 0;
  }

  .container {
    padding: 0 1rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  .section-header {
    margin-bottom: 1.5rem;
    flex-direction: column;
    gap: 0.7rem;
  }

  .section-header .btn-outline {
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
  }

  /* ── PAGE HEADER BAR ── */
  .page-header-bar {
    padding: 2rem 1rem 1.5rem;
    margin-top: 70px;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .page-subtitle {
    font-size: 0.88rem;
  }

  /* ── PROPERTY DETAIL: Mobile ── */
  #page-detail {
    padding-top: 80px;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-sidebar {
    grid-template-columns: 1fr;
  }

  .agent-card {
    grid-column: auto;
  }

  .gallery-main {
    height: 250px;
    border-radius: var(--radius-lg);
  }

  .gallery-thumbs {
    gap: 0.4rem;
  }

  .gallery-thumb {
    height: 60px;
  }

  .property-info-card {
    padding: 1.2rem;
  }

  .info-header {
    flex-direction: column;
    gap: 0.7rem;
  }

  .property-price-block {
    text-align: right;
  }

  .property-title {
    font-size: 1.3rem;
  }

  .property-price {
    font-size: 1.7rem;
  }

  .specs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .more-info-grid {
    grid-template-columns: 1fr;
  }

  .detail-breadcrumb {
    font-size: 0.78rem;
    flex-wrap: wrap;
  }

  /* ── INVESTMENT: Mobile ── */
  .invest-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .invest-stat-card {
    padding: 1rem;
    gap: 0.7rem;
  }

  .ist-icon {
    font-size: 1.5rem;
  }

  .ist-val {
    font-size: 1.1rem;
  }

  .invest-layout {
    grid-template-columns: 1fr;
  }

  .invest-item {
    grid-template-columns: 80px 1fr;
    gap: 0.8rem;
  }

  .invest-item .invest-return {
    display: none;
  }

  .invest-img {
    width: 80px;
    height: 60px;
  }

  .invest-info h4 {
    font-size: 0.88rem;
  }

  .calc-card {
    padding: 1.2rem;
  }

  /* ── NEIGHBORHOODS: Mobile ── */
  .city-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.3rem;
    scrollbar-width: none;
  }

  .city-tabs::-webkit-scrollbar {
    display: none;
  }

  .city-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
  }

  .neighborhoods-layout {
    grid-template-columns: 1fr;
  }

  .neighborhoods-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .neighborhood-card {
    padding: 1.1rem;
  }

  .hood-name {
    font-size: 1rem;
  }

  .hood-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    padding: 1.2rem;
  }

  .hs-val {
    font-size: 1.5rem;
  }

  .hood-map-bg {
    height: 280px;
  }

  /* ── LOGIN: Mobile ── */
  .login-page {
    padding-top: 70px;
  }

  .login-layout {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 70px);
  }

  .login-brand {
    display: none;
  }

  .login-form-wrap {
    padding: 1.5rem 1rem;
    align-items: flex-start;
  }

  .login-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    max-width: 100%;
  }

  .social-btn {
    padding: 0.7rem;
    font-size: 0.88rem;
  }

  /* ── DASHBOARD: Mobile ── */
  #page-dashboard {
    padding-top: 70px;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dash-sidebar {
    position: static;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.4rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }

  .dash-sidebar::-webkit-scrollbar {
    display: none;
  }

  .dash-user {
    display: none;
  }

  .dash-nav {
    flex-direction: row;
    gap: 0.3rem;
  }

  .dash-nav-item {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dash-nav-icon {
    font-size: 1.2rem;
  }

  .dash-logout {
    display: none;
  }

  .dash-main {
    padding: 1rem;
  }

  .dash-title {
    font-size: 1.2rem;
  }

  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  .dash-stat-card {
    padding: 1rem;
    gap: 0.7rem;
  }

  .dsc-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .dsc-val {
    font-size: 1.2rem;
  }

  .dash-charts-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .dash-chart-card {
    padding: 1rem;
  }

  .table-header-row {
    display: none;
  }

  .table-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 0.6rem;
    background: var(--bg-card);
  }

  .table-row>div:nth-child(3),
  .table-row>div:nth-child(4) {
    display: none;
  }

  .prop-thumb {
    width: 40px;
    height: 40px;
  }

  .prop-name {
    font-size: 0.82rem;
  }

  /* ── FOOTER: Mobile Premium ── */
  .footer-top {
    padding: 2.5rem 0 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-brand {
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer-col {
    text-align: center;
  }

  .footer-col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
  }

  .footer-col ul li {
    margin-bottom: 0;
  }

  .contact-list {
    text-align: center;
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: 0.7rem;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
  }

  .footer-bottom::before {
    display: none;
  }

  /* ── MODAL: Full Screen on Mobile ── */
  .modal-card {
    width: 95%;
    max-width: 95%;
    margin: auto 2.5%;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
  }

  .modal-title {
    font-size: 1.1rem;
  }

  /* ── PAGINATION: Compact ── */
  .pagination {
    gap: 0.3rem;
    margin-top: 2rem;
  }

  .page-btn {
    width: 36px;
    height: 36px;
    font-size: 0.82rem;
  }

  .page-dots {
    display: none;
  }
}

/* ─── 480px Small Mobile ─── */
@media (max-width: 480px) {
  .hero-title {
    font-size: 1.85rem;
  }

  .search-box {
    padding: 0.8rem;
  }

  .invest-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .properties-grid {
    grid-template-columns: 1fr;
    padding: 0 0.5rem;
  }

  .card-specs {
    gap: 0.5rem;
  }

  .dash-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .categories-grid {
    gap: 0.7rem;
    padding: 0.5rem 0.8rem 1rem;
  }

  .category-card {
    flex: 0 0 110px;
    padding: 1.2rem 0.8rem;
  }

  .neighborhood-card {
    padding: 1rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-num {
    font-size: 1.3rem;
  }

  .agent-buttons {
    gap: 0.5rem;
  }

  .agent-buttons .btn-primary,
  .agent-buttons a {
    font-size: 0.82rem;
    padding: 0.6rem;
  }

  .why-card {
    flex-direction: column;
    text-align: center;
  }
}

/* ─── Touch Improvements ─── */
@media (hover: none) and (pointer: coarse) {
  .property-card:hover {
    transform: none;
  }

  .category-card:hover {
    transform: none;
  }

  .why-card:hover {
    transform: none;
  }

  .property-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .category-card:active {
    transform: scale(0.95);
  }

  .btn-primary:active {
    transform: scale(0.97);
  }

  .btn-outline:active {
    transform: scale(0.97);
  }
}


/* =============================================
   ✨ PREMIUM ANIMATIONS SYSTEM
   ============================================= */

/* --- Glow Pulse on Hover (Cards) --- */
.property-card:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(220, 38, 38, 0.2),
    0 0 40px rgba(220, 38, 38, 0.08);
}

/* --- Logo Spin on hover --- */
.nav-logo:hover .logo-icon {
  animation: logoSpin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes logoSpin {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(90deg) scale(1.1);
  }

  100% {
    transform: rotateY(0deg);
  }
}

/* --- Navbar link hover underline slide --- */
.nav-link:not(.active)::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.nav-link:not(.active):hover::before {
  opacity: 0.6;
  transform: scaleX(1);
}

/* --- Hero badge shimmer --- */
.hero-badge {
  background-size: 200% auto;
  background-image: linear-gradient(135deg,
      rgba(220, 38, 38, 0.15) 0%,
      rgba(220, 38, 38, 0.25) 40%,
      rgba(220, 38, 38, 0.15) 100%);
  animation: shimmerBadge 3s linear infinite;
}

@keyframes shimmerBadge {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* --- Hero title gradient animation --- */
.hero-title .text-red {
  background: linear-gradient(90deg, #dc2626, #f87171, #dc2626);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradient 3s linear infinite;
}

@keyframes textGradient {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* --- Search box entrance --- */
.search-box {
  animation: searchEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

@keyframes searchEntrance {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Search button ripple --- */
.btn-search:active::after,
.btn-primary:active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: inherit;
  animation: ripple 0.4s ease;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- Stat numbers glow --- */
.stat-num {
  text-shadow: 0 0 30px rgba(220, 38, 38, 0.4);
  animation: statPulse 2s ease-in-out infinite alternate;
}

@keyframes statPulse {
  0% {
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.2);
  }

  100% {
    text-shadow: 0 0 30px rgba(220, 38, 38, 0.6);
  }
}

/* --- Category cards stagger --- */
.category-card:nth-child(1) {
  animation: fadeSlideUp 0.5s ease 0.1s both;
}

.category-card:nth-child(2) {
  animation: fadeSlideUp 0.5s ease 0.2s both;
}

.category-card:nth-child(3) {
  animation: fadeSlideUp 0.5s ease 0.3s both;
}

.category-card:nth-child(4) {
  animation: fadeSlideUp 0.5s ease 0.4s both;
}

.category-card:nth-child(5) {
  animation: fadeSlideUp 0.5s ease 0.5s both;
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Category icon bounce on hover --- */
.category-card:hover .category-icon {
  animation: iconBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3) rotate(10deg);
  }
}

/* --- Property card image zoom + overlay --- */
.card-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.property-card:hover .card-image-wrap::after {
  opacity: 1;
}

/* --- Price badge pop on hover --- */
.card-price-overlay {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.property-card:hover .card-price-overlay {
  transform: scale(1.08);
  background: rgba(220, 38, 38, 1);
}

/* --- Fav heart beat animation --- */
.card-fav:hover {
  animation: heartBeat 0.4s ease;
}

@keyframes heartBeat {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.3);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.2);
  }
}

/* --- Section titles animated underline --- */
.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-header:hover .section-title::after,
.section-header.centered .section-title::after {
  width: 100%;
}

/* --- Why cards animated border --- */
.why-card {
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

/* --- Why icon rotate on hover --- */
.why-card:hover .why-icon {
  animation: iconRotate 0.6s ease;
}

@keyframes iconRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(20deg) scale(1.2);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

/* --- Btn primary shine sweep --- */
.btn-primary {
  background-image: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #dc2626 100%);
  background-size: 200% auto;
  transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
  background-position: right center;
}

/* --- Red glow line under active nav --- */
.nav-link.active {
  color: #fff;
}

.nav-link.active::after {
  animation: glowLine 2s ease-in-out infinite alternate;
}

@keyframes glowLine {
  0% {
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.6);
  }

  100% {
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.9), 0 0 18px rgba(220, 38, 38, 0.3);
  }
}

/* --- Dashboard stats counter animation --- */
.dsc-val {
  display: inline-block;
  animation: countUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes countUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Dashboard stat cards stagger --- */
.dash-stat-card:nth-child(1) {
  animation: slideInRight 0.4s ease 0.1s both;
}

.dash-stat-card:nth-child(2) {
  animation: slideInRight 0.4s ease 0.2s both;
}

.dash-stat-card:nth-child(3) {
  animation: slideInRight 0.4s ease 0.3s both;
}

.dash-stat-card:nth-child(4) {
  animation: slideInRight 0.4s ease 0.4s both;
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Chart SVG draw animation --- */
.chart-svg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease forwards 0.5s;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* --- Map pins bounce in --- */
.map-pin,
.hood-pin {
  animation: pinDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.map-pin:nth-child(1) {
  animation-delay: 0.1s;
}

.map-pin:nth-child(2) {
  animation-delay: 0.2s;
}

.map-pin:nth-child(3) {
  animation-delay: 0.3s;
}

.map-pin:nth-child(4) {
  animation-delay: 0.4s;
}

.map-pin:nth-child(5) {
  animation-delay: 0.5s;
}

.map-pin:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes pinDrop {
  0% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0);
  }

  60% {
    transform: translate(-50%, -45%) scale(1.2);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* --- Investment return pct counter --- */
.return-pct {
  animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Neighborhood card slide in from right --- */
.neighborhood-card {
  animation: slideFromRight 0.5s ease both;
}

.neighborhood-card:nth-child(1) {
  animation-delay: 0.05s;
}

.neighborhood-card:nth-child(2) {
  animation-delay: 0.1s;
}

.neighborhood-card:nth-child(3) {
  animation-delay: 0.15s;
}

.neighborhood-card:nth-child(4) {
  animation-delay: 0.2s;
}

.neighborhood-card:nth-child(5) {
  animation-delay: 0.25s;
}

.neighborhood-card:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes slideFromRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Hood demand bar animation --- */
.hood-bar {
  animation: growBar 1s ease both;
}

@keyframes growBar {
  0% {
    width: 0 !important;
  }

  100% {
    /* width is set inline */
  }
}

/* --- Login card float in --- */
.login-card {
  animation: floatIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes floatIn {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Social buttons hover shake --- */
.social-btn:hover {
  animation: gentleShake 0.3s ease;
}

@keyframes gentleShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

/* --- Gallery main image transition --- */
.main-img {
  animation: imageFade 0.4s ease;
}

@keyframes imageFade {
  0% {
    opacity: 0.5;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Agent card glow on hover --- */
.agent-card:hover {
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.3), 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* --- Spec items bounce in --- */
.spec-item {
  animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.spec-item:nth-child(1) {
  animation-delay: 0.1s;
}

.spec-item:nth-child(2) {
  animation-delay: 0.2s;
}

.spec-item:nth-child(3) {
  animation-delay: 0.3s;
}

.spec-item:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  80% {
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Table rows slide in --- */
.table-row {
  animation: tableRowIn 0.3s ease both;
}

.table-row:nth-child(1) {
  animation-delay: 0.05s;
}

.table-row:nth-child(2) {
  animation-delay: 0.1s;
}

.table-row:nth-child(3) {
  animation-delay: 0.15s;
}

.table-row:nth-child(4) {
  animation-delay: 0.2s;
}

@keyframes tableRowIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Toast slide with bounce --- */
.toast.show {
  animation: toastSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes toastSlide {
  0% {
    transform: translateX(200%);
  }

  100% {
    transform: translateX(0);
  }
}

/* --- Floating Red Orbs in hero --- */
.hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.06) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  animation: orbFloat 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes orbFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(60px, -40px) scale(1.1);
  }
}

/* --- Footer links animated underline --- */
.footer-col ul li a {
  position: relative;
  padding-bottom: 2px;
}

.footer-col ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.3s ease;
}

.footer-col ul li a:hover::after {
  width: 100%;
}

/* --- Search field focus glow --- */
.search-field:focus-within {
  background: rgba(220, 38, 38, 0.05);
  border-radius: var(--radius-sm);
  transition: background 0.3s ease;
}

/* --- Pagination active pulse --- */
.page-btn.active {
  animation: activePulse 2s ease infinite;
}

@keyframes activePulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
}

/* --- Scrollbar animated --- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--red-light), var(--red-dark));
  animation: scrollbarGlow 3s ease infinite alternate;
}

/* --- Loading skeleton shimmer for images --- */
.card-image-wrap img[loading="lazy"] {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* --- Invest stat cards shimmer border --- */
.invest-stat-card {
  position: relative;
  overflow: hidden;
}

.invest-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.04), transparent);
  animation: cardShimmer 4s linear infinite;
}

@keyframes cardShimmer {
  0% {
    left: -60%;
  }

  100% {
    left: 160%;
  }
}

/* --- Donut chart segments draw --- */
.donut-seg {
  stroke-dasharray: 0 283;
  animation: donutGrow1 1.2s ease 0.3s forwards;
}

.donut-seg2 {
  stroke-dasharray: 0 283;
  animation: donutGrow2 1.2s ease 0.6s forwards;
}

.donut-seg3 {
  stroke-dasharray: 0 283;
  animation: donutGrow3 1.2s ease 0.9s forwards;
}

@keyframes donutGrow1 {
  to {
    stroke-dasharray: 113 170;
  }
}

@keyframes donutGrow2 {
  to {
    stroke-dasharray: 57 226;
  }
}

@keyframes donutGrow3 {
  to {
    stroke-dasharray: 28 255;
  }
}

/* --- Filter chip ripple --- */
.filter-chip:active,
.city-tab:active,
.room-btn:active {
  transform: scale(0.95);
}

/* --- Modal backdrop animate (Crisp Solid) --- */
.modal-overlay.open {
  animation: backdropIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes backdropIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* --- Footer Bottom Clean Layout --- */
.footer-bottom {
  position: relative;
}

/* --- Input Shake (form validation) --- */
@keyframes inputShake {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-6px);
  }

  30% {
    transform: translateX(6px);
  }

  45% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(4px);
  }

  75% {
    transform: translateX(-2px);
  }
}

/* --- Section Badge --- */
.section-badge {
  display: inline-block;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red-light);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  margin-bottom: 0.8rem;
  letter-spacing: 0.5px;
  animation: badgeSlideIn 0.5s ease both;
}

@keyframes badgeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   ADMIN LOGIN PAGE
   ============================================================ */
.admin-login-page {
  display: none;
  min-height: 100vh;
  background: var(--bg-primary);
}

.admin-login-page.active {
  display: flex;
}

.admin-login-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
}

.admin-login-brand {
  position: relative;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0505 60%, #0d0d0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem;
}

.admin-brand-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(220, 38, 38, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(220, 38, 38, 0.06) 0%, transparent 50%);
}

.admin-brand-content {
  position: relative;
  z-index: 1;
  text-align: right;
}

.admin-logo-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  animation: adminSlideIn 0.6s ease both;
}

@keyframes adminSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-30px)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

.admin-brand-title {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
  animation: adminSlideIn 0.6s ease 0.1s both;
}

.admin-brand-sub {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 1rem;
  line-height: 1.7;
  animation: adminSlideIn 0.6s ease 0.2s both;
}

.admin-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.admin-feat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.admin-feat:nth-child(1) {
  animation: adminFeatIn 0.5s ease 0.3s both
}

.admin-feat:nth-child(2) {
  animation: adminFeatIn 0.5s ease 0.4s both
}

.admin-feat:nth-child(3) {
  animation: adminFeatIn 0.5s ease 0.5s both
}

.admin-feat:nth-child(4) {
  animation: adminFeatIn 0.5s ease 0.6s both
}

@keyframes adminFeatIn {
  0% {
    opacity: 0;
    transform: translateX(-20px)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

.admin-feat:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.2);
  color: var(--text-primary);
  transform: translateX(-6px);
}

.admin-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.admin-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: adminParticleFloat linear infinite;
}

@keyframes adminParticleFloat {
  0% {
    opacity: 0;
    transform: translateY(100px)
  }

  10% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translateY(-100vh)
  }
}

.admin-login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--bg-secondary);
}

.admin-login-card {
  width: 100%;
  max-width: 440px;
  animation: adminCardIn 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes adminCardIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.admin-card-top {
  text-align: center;
  margin-bottom: 2.5rem;
}

.admin-avatar-big {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  border: 3px solid rgba(220, 38, 38, 0.3);
  animation: avatarPulseGlow 3s ease-in-out infinite alternate;
}

@keyframes avatarPulseGlow {
  0% {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3)
  }

  100% {
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.6), 0 0 60px rgba(220, 38, 38, 0.2)
  }
}

.admin-greeting {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.admin-greeting-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.admin-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 0.5rem;
}

.admin-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-input-icon {
  position: absolute;
  right: 1rem;
  font-size: 1rem;
  pointer-events: none;
  z-index: 1;
}

.admin-input {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
  background: var(--bg-elevated) !important;
  border: 1.5px solid var(--border) !important;
  transition: all 0.25s ease !important;
}

.admin-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

.toggle-pass {
  position: absolute;
  left: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.toggle-pass:hover {
  opacity: 1;
}

.admin-hint-row {
  margin: 0.8rem 0 1.2rem;
}

.admin-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.15);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  display: block;
}

.admin-login-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

.admin-btn-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.admin-login-btn:hover .admin-btn-icon {
  transform: translateX(-5px);
}

.admin-back-link {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.admin-back-link:hover {
  color: var(--red);
}

.admin-login-card.shake {
  animation: inputShake 0.4s ease;
}

/* ADMIN PANEL */
.admin-panel-page {
  display: none;
  min-height: 100vh;
  background: var(--bg-primary);
  flex-direction: column;
}

.admin-panel-page.active {
  display: flex;
}

.admin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #121212;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-nav-badge {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red-light);
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  animation: badgeBlink 2s ease infinite alternate;
}

.admin-nav-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.admin-online-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  animation: onlinePulse 2s ease infinite;
}

@keyframes onlinePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4)
  }

  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0)
  }
}

.admin-nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 2px solid rgba(220, 38, 38, 0.4);
}

.admin-nav-name {
  font-size: 0.9rem;
  font-weight: 700;
}

.admin-nav-role {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.admin-logout-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red-light);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-logout-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.admin-content {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: adminStatIn 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.admin-stat-card:nth-child(1) {
  animation-delay: 0.05s
}

.admin-stat-card:nth-child(2) {
  animation-delay: 0.1s
}

.admin-stat-card:nth-child(3) {
  animation-delay: 0.15s
}

.admin-stat-card:nth-child(4) {
  animation-delay: 0.2s
}

@keyframes adminStatIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95)
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.admin-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.pending-stat {
  border-color: rgba(234, 179, 8, 0.25)
}

.approved-stat {
  border-color: rgba(34, 197, 94, 0.25)
}

.rejected-stat {
  border-color: rgba(220, 38, 38, 0.25)
}

.total-stat {
  border-color: rgba(139, 92, 246, 0.25)
}

.asc-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.asc-val {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.pending-stat .asc-val {
  color: var(--yellow)
}

.approved-stat .asc-val {
  color: #22c55e
}

.rejected-stat .asc-val {
  color: var(--red)
}

.total-stat .asc-val {
  color: #a78bfa
}

.asc-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.asc-glow {
  display: none;
}

.pending-stat .asc-glow {
  background: var(--yellow)
}

.approved-stat .asc-glow {
  background: #22c55e
}

.rejected-stat .asc-glow {
  background: var(--red)
}

.total-stat .asc-glow {
  background: #a78bfa
}

.admin-filter-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.4rem;
}

.admin-tab {
  flex: 1;
  padding: 0.7rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.admin-tab:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.admin-tab.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.tab-badge {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  min-width: 20px;
  text-align: center;
}

.admin-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.admin-queue-title {
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-action-btn {
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.approve-all-btn {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.approve-all-btn:hover {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}

.admin-review-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  transition: all 0.3s ease;
  animation: adminItemIn 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  position: relative;
}

@keyframes adminItemIn {
  0% {
    opacity: 0;
    transform: translateX(20px)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

.admin-review-item:hover {
  border-color: rgba(220, 38, 38, 0.2);
  transform: translateX(-4px);
}

.admin-review-item.status-pending {
  border-right: 3px solid var(--yellow)
}

.admin-review-item.status-approved {
  border-right: 3px solid #22c55e
}

.admin-review-item.status-rejected {
  border-right: 3px solid var(--red);
  opacity: 0.6
}

.admin-review-item.approving {
  animation: flashGreen 0.6s ease
}

.admin-review-item.rejecting {
  animation: flashRed 0.6s ease
}

@keyframes flashGreen {

  0%,
  100% {
    background: var(--bg-card)
  }

  50% {
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.3)
  }
}

@keyframes flashRed {

  0%,
  100% {
    background: var(--bg-card)
  }

  50% {
    background: rgba(220, 38, 38, 0.08);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.2)
  }
}

.admin-rev-info {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.admin-rev-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.admin-rev-name {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.2rem
}

.admin-rev-city {
  font-size: 0.75rem;
  color: var(--text-muted)
}

.admin-rev-stars {
  font-size: 0.85rem;
  color: var(--yellow);
  margin-bottom: 0.2rem
}

.admin-rev-date {
  font-size: 0.72rem;
  color: var(--text-muted)
}

.admin-rev-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 0.8rem;
  padding: 0.8rem;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  border-right: 2px solid var(--border);
}

.admin-rev-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 130px;
}

.admin-approve-btn,
.admin-reject-btn,
.admin-restore-btn {
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.admin-approve-btn {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e
}

.admin-approve-btn:hover {
  background: #22c55e;
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3)
}

.admin-reject-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--red-light)
}

.admin-reject-btn:hover {
  background: var(--red);
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3)
}

.admin-restore-btn {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #a78bfa
}

.admin-restore-btn:hover {
  background: #7c3aed;
  color: #fff;
  transform: scale(1.03)
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.status-pending .admin-status-badge {
  background: rgba(234, 179, 8, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(234, 179, 8, 0.3)
}

.status-approved .admin-status-badge {
  backg
  /* ============================================================
   👑 VIP USER GREETING & AUTH LOCK IN REVIEWS
   ============================================================ */

  .review-auth-lock {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(20, 20, 20, 0.8) 100%);
    border: 1.5px dashed rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 1rem;
    animation: authLockIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  }

  @keyframes authLockIn {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.97);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .auth-lock-icon {
    font-size: 3rem;
    margin-bottom: 0.8rem;
    animation: lockWobble 3s ease-in-out infinite;
    display: inline-block;
  }

  @keyframes lockWobble {

    0%,
    100% {
      transform: rotate(0deg) scale(1);
    }

    25% {
      transform: rotate(-8deg) scale(1.05);
    }

    75% {
      transform: rotate(8deg) scale(1.05);
    }
  }

  /* Moderation Notice */
  .moderation-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: var(--radius);
    padding: 0.85rem 1.2rem;
    margin: 1.2rem 0;
    font-size: 0.82rem;
    color: var(--yellow);
    line-height: 1.5;
  }

  .mod-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  /* Pending status pill */
  .pending-pill {
    background: var(--yellow);
    color: #000;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 0.15rem 0.45rem;
    border-radius: 50px;
    margin-right: 0.3rem;
    animation: notifPop 0.4s ease both;
  }

  /* Admin Portal Link in Footer */
  .admin-portal-link {
    color: var(--red-light) !important;
    font-weight: 700;
  }

  .admin-portal-link:hover {
    color: #fff !important;
    text-shadow: 0 0 10px var(--red);
  }

  /* Admin Login Page Box */
  .admin-page-wrap {
    display: none;
    min-height: 85vh;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.5rem 2rem;
  }

  .admin-page-wrap.active {
    display: flex;
  }

  .admin-login-box {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(220, 38, 38, 0.1);
    animation: adminBoxIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  }

  @keyframes adminBoxIn {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.95);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .admin-card-header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .admin-shield-icon {
    font-size: 3rem;
    margin-bottom: 0.6rem;
    animation: floatIcon 3s ease-in-out infinite alternate;
  }

  .admin-card-header h2 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 0.3rem;
  }

  .admin-card-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .admin-creds-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.8rem;
    margin: 0.8rem 0 1.2rem;
  }

  .admin-btn-glow {
    padding: 0.9rem !important;
    font-size: 1rem !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
  }

  /* Admin Panel Page View */
  .admin-panel-view {
    display: none;
    padding: 6rem 0 4rem;
    min-height: 90vh;
  }

  .admin-panel-view.active {
    display: block;
  }

  .admin-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.8rem 2rem;
  }

  .admin-top-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }

  .admin-badge-icon {
    width: 52px;
    height: 52px;
    background: rgba(220, 38, 38, 0.15);
    border: 1.5px solid rgba(220, 38, 38, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
  }

  .admin-main-title {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 0.2rem;
  }

  .admin-main-sub {
    color: var(--text-muted);
    font-size: 0.88rem;
  }

  .admin-top-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .admin-refresh-btn {
    padding: 0.65rem 1.2rem;
    font-size: 0.85rem;
  }

  /* Admin Stats Grid */
  .admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-bottom: 2rem;
  }

  .astat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  }

  .astat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }

  .astat-card.pending {
    border-color: rgba(234, 179, 8, 0.3);
  }

  .astat-card.pending:hover {
    border-color: var(--yellow);
  }

  .astat-card.approved {
    border-color: rgba(34, 197, 94, 0.3);
  }

  .astat-card.approved:hover {
    border-color: #22c55e;
  }

  .astat-card.rejected {
    border-color: rgba(220, 38, 38, 0.3);
  }

  .astat-card.rejected:hover {
    border-color: var(--red);
  }

  .astat-card.total {
    border-color: rgba(139, 92, 246, 0.3);
  }

  .astat-card.total:hover {
    border-color: #a78bfa;
  }

  .astat-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
  }

  .astat-num {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.3rem;
  }

  .astat-card.pending .astat-num {
    color: var(--yellow);
  }

  .astat-card.approved .astat-num {
    color: #22c55e;
  }

  .astat-card.rejected .astat-num {
    color: var(--red);
  }

  .astat-card.total .astat-num {
    color: #a78bfa;
  }

  .astat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
  }

  /* Admin Filter Bar */
  .admin-filter-bar {
    margin-bottom: 1.5rem;
  }

  .admin-filter-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.4rem;
    flex-wrap: wrap;
  }

  .admin-ftab {
    flex: 1;
    min-width: 140px;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  .admin-ftab:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }

  .admin-ftab.active {
    background: var(--red);
    color: #fff;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  }

  .aftab-badge {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 800;
  }

  /* Admin Reviews Wrap */
  .admin-reviews-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .admin-rev-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.8rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
    overflow: hidden;
    animation: adminRevIn 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  }

  @keyframes adminRevIn {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .admin-rev-card:hover {
    transform: translateX(-4px);
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .admin-rev-card.status-pending {
    border-right: 4px solid var(--yellow);
  }

  .admin-rev-card.status-approved {
    border-right: 4px solid #22c55e;
  }

  .admin-rev-card.status-rejected {
    border-right: 4px solid var(--red);
    opacity: 0.65;
  }

  .arc-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
  }

  .arc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
    border: 2px solid rgba(220, 38, 38, 0.3);
  }

  .arc-name {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
  }

  .arc-city {
    font-size: 0.78rem;
    color: var(--text-muted);
  }

  .arc-stars {
    font-size: 0.9rem;
    color: var(--yellow);
    margin-bottom: 0.2rem;
  }

  .arc-date {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  .arc-content {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.8rem;
    padding: 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border-right: 2px solid var(--border);
  }

  .arc-tag-badge {
    display: inline-block;
    background: rgba(220, 38, 38, 0.12);
    color: var(--red-light);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
  }

  .arc-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 150px;
  }

  .arc-btn-approve,
  .arc-btn-reject,
  .arc-btn-restore {
    width: 100%;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  .arc-btn-approve {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
  }

  .arc-btn-approve:hover {
    background: #22c55e;
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
  }

  .arc-btn-reject {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: var(--red-light);
  }

  .arc-btn-reject:hover {
    background: var(--red);
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
  }

  .arc-btn-restore {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
  }

  .arc-btn-restore:hover {
    background: #7c3aed;
    color: #fff;
    transform: scale(1.03);
  }

  /* Status Labels */
  .arc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
  }

  .status-pending .arc-status-badge {
    background: rgba(234, 179, 8, 0.15);
    color: var(--yellow);
    border: 1px solid rgba(234, 179, 8, 0.3);
  }

  .status-approved .arc-status-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
  }

  .status-rejected .arc-status-badge {
    background: rgba(220, 38, 38, 0.1);
    color: var(--red-light);
    border: 1px solid rgba(220, 38, 38, 0.25);
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .admin-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .admin-top-bar {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 768px) {
    .admin-stats-grid {
      grid-template-columns: 1fr 1fr;
      gap: 0.8rem;
    }

    .admin-rev-card {
      grid-template-columns: 1fr;
    }

    .arc-actions {
      flex-direction: row;
      flex-wrap: wrap;
    }

    .arc-btn-approve,
    .arc-btn-reject,
    .arc-btn-restore {
      flex: 1;
      min-width: 90px;
    }

    .user-greeting-card {
      flex-direction: column;
      text-align: center;
    }

    .ug-info {
      text-align: center;
    }

    .ug-badge-row {
      justify-content: center;
    }

    .footer-bottom-flex {
      flex-direction: column;
      justify-content: center;
      text-align: center;
      gap: 1rem;
    }
  }

  /* ===================================================

@media (max-width: 576px) {
  .ebs-signature-badge {
    padding: 0.4rem 0.8rem;
  }
  .ebs-modal-card {
    padding: 1.8rem 1.3rem 1.5rem 1.3rem;
    max-width: 92%;
    border-radius: 22px;
  }
  .ebs-modal-title { font-size: 1.3rem; }
  .ebs-modal-subtitle { font-size: 0.82rem; }
  .ebs-contact-btn { padding: 0.8rem 1rem; }
  .ebs-btn-icon-bg { width: 40px; height: 40px; font-size: 1.2rem; }
  .ebs-modal-footer { grid-template-columns: 1fr; gap: 0.55rem; }
}

@media (max-width: 380px) {
  .ebs-signature-badge {
    flex-direction: column;
    text-align: center;
    border-radius: 16px;
    width: 100%;
  }

  .ebs-quick-actions {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    margin-top: 0.3rem;
  }
}

/* ===================================================
   NAVBAR USER PILL & APP BUTTON
   =================================================== */
  .nav-app-btn {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    padding: 0.45rem 0.9rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
  }

  .nav-app-btn:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: #dc2626;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  }

  .nav-auth-group {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }

  .nav-auth-user-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .user-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.35rem 0.8rem 0.35rem 0.5rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
  }

  .user-pill-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
  }

  .user-avatar-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
  }

  .user-pill-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f1f5f9;
  }

  .user-pill-arrow {
    font-size: 0.7rem;
    color: #94a3b8;
  }

  .user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    background: rgba(20, 20, 28, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    border-radius: 18px;
    padding: 0.8rem;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    z-index: 1000;
    direction: rtl;
    animation: slideDownFade 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .user-dropdown-menu.show {
    display: flex;
  }

  .udm-header {
    padding: 0.5rem 0.6rem 0.7rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .udm-header strong {
    font-size: 0.9rem;
    color: #fff;
  }

  .udm-header span {
    font-size: 0.75rem;
    color: #94a3b8;
  }

  .udm-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .udm-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: translateX(-4px);
  }

  .udm-logout {
    color: #f87171 !important;
  }

  .udm-logout:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
  }

  .udm-divider {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.2rem 0;
  }

  /* ===================================================
   AUTHENTICATION PAGE (PAGE: LOGIN & REGISTER)
   =================================================== */
  .auth-page-wrapper {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    position: relative;
  }

  .auth-page-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }

  .auth-container {
    position: relative;
    z-index: 1;
    max-width: 520px;
    width: 100%;
  }

  .auth-card {
    background: linear-gradient(160deg, rgba(26, 26, 36, 0.95), rgba(16, 16, 24, 0.98));
    border: 1px solid rgba(220, 38, 38, 0.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(220, 38, 38, 0.1);
    border-radius: 26px;
    padding: 2.2rem 2rem;
    direction: rtl;
  }

  .auth-card-header {
    text-align: center;
    margin-bottom: 1.8rem;
  }

  .auth-logo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.3);
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .auth-logo-badge:hover {
    transform: scale(1.04);
  }

  .auth-logo-icon {
    width: 22px;
    height: 22px;
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.75rem;
  }

  .auth-logo-name {
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #fff;
  }

  .auth-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.35rem;
  }

  .auth-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
  }

  .auth-nav-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.3rem;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
  }

  .auth-tab-btn {
    background: transparent;
    border: 0;
    color: #94a3b8;
    padding: 0.65rem 0.4rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .auth-tab-btn.active {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  }

  .auth-social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.4rem;
  }

  .btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 0.6rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .btn-social:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
  }

  .auth-divider-line {
    display: flex;
    align-items: center;
    text-align: center;
    color: #64748b;
    font-size: 0.78rem;
    margin: 1.2rem 0 1.5rem 0;
  }

  .auth-divider-line::before,
  .auth-divider-line::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .auth-divider-line span {
    padding: 0 0.8rem;
  }

  .auth-form-panel {
    display: none;
  }

  .auth-form-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  .input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
  }

  .input-icon {
    position: absolute;
    right: 1rem;
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
  }

  .input-with-icon .form-input {
    padding-right: 2.8rem;
    padding-left: 2.8rem;
    width: 100%;
  }

  .toggle-pass-btn {
    position: absolute;
    left: 0.8rem;
    background: transparent;
    border: 0;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    line-height: 1;
  }

  .label-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
  }

  .forgot-pass-link {
    font-size: 0.76rem;
    color: #f87171;
    text-decoration: none;
    font-weight: 600;
  }

  .forgot-pass-link:hover {
    text-decoration: underline;
  }

  .auth-remember-row {
    margin-bottom: 1.2rem;
  }

  .remember-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
    cursor: pointer;
  }

  .pass-strength-meter {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    margin: 0.5rem 0 0.3rem 0;
    overflow: hidden;
  }

  .pass-strength-bar {
    height: 100%;
    width: 0;
    transition: all 0.3s ease;
  }

  .pass-strength-text {
    font-size: 0.72rem;
    color: #64748b;
    display: block;
  }

  /* OTP Digits Container */
  .otp-digits-container {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin: 1.5rem 0;
    direction: ltr;
  }

  .otp-digit {
    width: 54px;
    height: 60px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    transition: all 0.25s ease;
  }

  .otp-digit:focus {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    outline: none;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
  }

  .otp-instruction-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #cbd5e1;
  }

  .change-phone-btn {
    background: transparent;
    border: 0;
    color: #f87171;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
  }

  .otp-resend-row {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 1.2rem;
  }

  .btn-resend-link {
    background: transparent;
    border: 0;
    color: #f87171;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
  }

  .auth-submit-btn {
    padding: 1rem !important;
    font-size: 1rem !important;
    border-radius: 16px !important;
  }

  .auth-card-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .auth-legal-note {
    font-size: 0.72rem;
    color: #64748b;
  }

  .auth-legal-note a {
    color: #94a3b8;
    text-decoration: underline;
  }

  /* ===================================================
   MOBILE APPS SHOWCASE SECTION
   =================================================== */
  .app-showcase-section {
    padding: 4.5rem 0;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0) 0%, rgba(220, 38, 38, 0.05) 50%, rgba(10, 10, 15, 0) 100%);
  }

  .app-showcase-card {
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.9), rgba(16, 16, 24, 0.95));
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 30px;
    padding: 3.5rem 3rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem;
    align-items: center;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
  }

  .app-badge-pill {
    display: inline-flex;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fca5a5;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 1rem;
  }

  .app-showcase-title {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 1rem;
    line-height: 1.4;
  }

  .app-showcase-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.8rem;
  }

  .app-stats-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.2rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .app-stat-box {
    display: flex;
    flex-direction: column;
  }

  .asb-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, #ffffff 0%, #fca5a5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .asb-lbl {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
  }

  .app-download-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .store-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.4rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    text-decoration: none;
  }

  .store-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(220, 38, 38, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  }

  .store-btn-text {
    display: flex;
    flex-direction: column;
    text-align: right;
  }

  .store-sub {
    font-size: 0.68rem;
    color: #94a3b8;
  }

  .store-name {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
  }

  /* Phone Visual */
  .app-showcase-visual {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .phone-mockup-frame {
    width: 240px;
    height: 380px;
    background: #0a0a0f;
    border: 8px solid #272733;
    border-radius: 36px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(220, 38, 38, 0.2);
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
  }

  .phone-notch {
    width: 70px;
    height: 12px;
    background: #272733;
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .phone-screen-content {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .phone-app-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.4rem;
  }

  .phone-card-preview {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.8rem;
    text-align: center;
  }

  .pcp-img {
    font-size: 2.2rem;
    margin-bottom: 0.3rem;
  }

  .pcp-info strong {
    display: block;
    font-size: 0.78rem;
    color: #fff;
  }

  .pcp-info p {
    font-size: 0.68rem;
    color: #fca5a5;
    margin: 0.2rem 0;
  }

  .pcp-tag {
    font-size: 0.62rem;
    color: #22c55e;
    font-weight: 700;
  }

  .phone-features-pill {
    background: rgba(220, 38, 38, 0.2);
    border: 1px solid rgba(220, 38, 38, 0.4);
    border-radius: 8px;
    padding: 0.4rem;
    font-size: 0.62rem;
    color: #fff;
    text-align: center;
  }

  /* ===================================================
   STORE MODALS (APP STORE & GOOGLE PLAY)
   =================================================== */
  .store-modal-card {
    max-width: 480px !important;
    background: linear-gradient(160deg, #181824 0%, #0d0d14 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
    border-radius: 28px !important;
    padding: 2.2rem !important;
    direction: rtl;
  }

  .store-modal-head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.8rem;
  }

  .store-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
  }

  .apple-icon-bg {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .android-icon-bg {
    background: linear-gradient(135deg, #059669, #047857);
    border: 1px solid rgba(52, 211, 153, 0.3);
  }

  .store-app-title {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.2rem;
  }

  .store-app-dev {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 0.4rem;
  }

  .store-ratings-badge {
    font-size: 0.72rem;
    color: #f59e0b;
    display: flex;
    gap: 0.35rem;
  }

  .store-action-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .btn-store-install {
    background: #dc2626;
    color: #fff;
    border: 0;
    padding: 0.95rem;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
  }

  .btn-store-install:hover {
    background: #ef4444;
    transform: translateY(-2px);
  }

  .btn-store-install.installed {
    background: #16a34a !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.4) !important;
  }

  .btn-apk-download {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    padding: 0.75rem;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-apk-download:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .store-free-lbl {
    font-size: 0.72rem;
    color: #64748b;
    text-align: center;
  }

  .store-install-progress-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.9rem;
    margin-bottom: 1.4rem;
  }

  .progress-info-flex {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
  }

  .progress-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    overflow: hidden;
  }

  .progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #dc2626, #22c55e);
    border-radius: 50px;
    transition: width 0.2s linear;
  }

  .store-qr-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1rem;
  }

  .qr-code-box {
    width: 64px;
    height: 64px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 900;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  .qr-info h4 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.2rem;
  }

  .qr-info p {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.4;
    margin: 0;
  }

  /* Enhanced Toast Styling */
  .toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: rgba(18, 18, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #ffffff;
    padding: 0.85rem 1.6rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999999;
    direction: rtl;
  }

  .toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .toast-content-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .toast-icon-badge {
    font-size: 1.1rem;
  }

  @media (max-width: 768px) {
    .app-showcase-card {
      grid-template-columns: 1fr;
      padding: 2.2rem 1.5rem;
      text-align: center;
    }

    .app-stats-row {
      justify-content: center;
    }

    .app-download-buttons {
      justify-content: center;
    }

    .store-btn {
      width: 100%;
      justify-content: center;
    }

    .app-showcase-visual {
      display: none;
    }
  }

  /* ============================================================
   ✨ ULTRA-LUXURY ANIMATION & MICRO-INTERACTIONS ENGINE
   1. Seamless Staggered Page Entrance (Top & Sides)
   2. Interactive Hover Animations for ALL Elements & Features
   ============================================================ */

  /* ─── 1. CORE KEYFRAME DEFINITIONS ─── */
  @keyframes pageSlideFromTop {
    0% {
      opacity: 0;
      transform: translateY(-45px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pageSlideFromRight {
    0% {
      opacity: 0;
      transform: translateX(55px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes pageSlideFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-55px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes pageSlideFromBottom {
    0% {
      opacity: 0;
      transform: translateY(45px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pageScaleIn {
    0% {
      opacity: 0;
      transform: scale(0.94) translateY(20px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes glowBorderPulse {

    0%,
    100% {
      border-color: rgba(220, 38, 38, 0.3);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }

    50% {
      border-color: rgba(220, 38, 38, 0.8);
      box-shadow: 0 8px 30px rgba(220, 38, 38, 0.35), 0 0 20px rgba(220, 38, 38, 0.2);
    }
  }

  @keyframes shimmerBeam {
    0% {
      transform: translateX(100%) rotate(25deg);
      opacity: 0;
    }

    50% {
      opacity: 0.7;
    }

    100% {
      transform: translateX(-150%) rotate(25deg);
      opacity: 0;
    }
  }

  @keyframes iconFloatJump {

    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }

    50% {
      transform: translateY(-6px) rotate(6deg) scale(1.15);
    }
  }

  /* ─── 2. PAGE ENTRANCE ANIMATIONS (TOP & SIDES) ─── */
  .page.active {
    display: block;
    animation: pageScaleIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Elements Sliding from TOP */
  .page.active .page-header-bar,
  .page.active .section-header,
  .page.active .hero-content>.hero-badge,
  .page.active .hero-content>.hero-title,
  .page.active .hero-content>.hero-subtitle,
  .page.active .admin-top-bar,
  .page.active .dash-header,
  .page.active .detail-breadcrumb,
  .page.active .auth-card-header,
  .page.active .city-tabs {
    animation: pageSlideFromTop 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Elements Sliding from RIGHT (Primary side in RTL) */
  .page.active .search-box,
  .page.active .listings-sidebar,
  .page.active .dash-sidebar,
  .page.active .invest-calculator,
  .page.active .neighborhoods-map,
  .page.active .detail-sidebar,
  .page.active .login-brand,
  .page.active .app-showcase-content,
  .page.active .reviews-title-block {
    animation: pageSlideFromRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
  }

  /* Elements Sliding from LEFT */
  .page.active .listings-main,
  .page.active .dash-main,
  .page.active .invest-list,
  .page.active .neighborhoods-grid,
  .page.active .detail-main,
  .page.active .login-form-wrap,
  .page.active .auth-card,
  .page.active .app-showcase-visual,
  .page.active .reviews-cta-block,
  .page.active .reviews-carousel-wrap,
  .page.active .hero-stats {
    animation: pageSlideFromLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
  }

  /* Staggered Elements Sliding from BOTTOM */
  .page.active .category-card,
  .page.active .property-card,
  .page.active .why-card,
  .page.active .invest-stat-card,
  .page.active .invest-item,
  .page.active .neighborhood-card,
  .page.active .hood-stat,
  .page.active .dash-stat-card,
  .page.active .dash-chart-card,
  .page.active .dash-table-card,
  .page.active .astat-card,
  .page.active .admin-review-card,
  .page.active .review-card {
    animation: pageSlideFromBottom 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Dynamic CSS Stagger Delays for Grid Children */
  .categories-grid>*:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  .categories-grid>*:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .categories-grid>*:nth-child(3) {
    animation-delay: 0.18s !important;
  }

  .categories-grid>*:nth-child(4) {
    animation-delay: 0.24s !important;
  }

  .categories-grid>*:nth-child(5) {
    animation-delay: 0.30s !important;
  }

  .properties-grid>*:nth-child(1),
  .listings-grid>*:nth-child(1) {
    animation-delay: 0.08s !important;
  }

  .properties-grid>*:nth-child(2),
  .listings-grid>*:nth-child(2) {
    animation-delay: 0.15s !important;
  }

  .properties-grid>*:nth-child(3),
  .listings-grid>*:nth-child(3) {
    animation-delay: 0.22s !important;
  }

  .properties-grid>*:nth-child(4),
  .listings-grid>*:nth-child(4) {
    animation-delay: 0.29s !important;
  }

  .properties-grid>*:nth-child(5),
  .listings-grid>*:nth-child(5) {
    animation-delay: 0.36s !important;
  }

  .properties-grid>*:nth-child(6),
  .listings-grid>*:nth-child(6) {
    animation-delay: 0.43s !important;
  }

  .properties-grid>*:nth-child(7),
  .listings-grid>*:nth-child(7) {
    animation-delay: 0.50s !important;
  }

  .properties-grid>*:nth-child(8),
  .listings-grid>*:nth-child(8) {
    animation-delay: 0.57s !important;
  }

  .why-grid>*:nth-child(1) {
    animation-delay: 0.08s !important;
  }

  .why-grid>*:nth-child(2) {
    animation-delay: 0.16s !important;
  }

  .why-grid>*:nth-child(3) {
    animation-delay: 0.24s !important;
  }

  .why-grid>*:nth-child(4) {
    animation-delay: 0.32s !important;
  }

  .invest-stats-grid>*:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  .invest-stats-grid>*:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .invest-stats-grid>*:nth-child(3) {
    animation-delay: 0.18s !important;
  }

  .invest-stats-grid>*:nth-child(4) {
    animation-delay: 0.24s !important;
  }

  .dash-stats-grid>*:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  .dash-stats-grid>*:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .dash-stats-grid>*:nth-child(3) {
    animation-delay: 0.18s !important;
  }

  .dash-stats-grid>*:nth-child(4) {
    animation-delay: 0.24s !important;
  }

  .admin-stats-grid>*:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  .admin-stats-grid>*:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .admin-stats-grid>*:nth-child(3) {
    animation-delay: 0.18s !important;
  }

  .admin-stats-grid>*:nth-child(4) {
    animation-delay: 0.24s !important;
  }

  .hood-stats-row>*:nth-child(1) {
    animation-delay: 0.06s !important;
  }

  .hood-stats-row>*:nth-child(2) {
    animation-delay: 0.12s !important;
  }

  .hood-stats-row>*:nth-child(3) {
    animation-delay: 0.18s !important;
  }

  .hood-stats-row>*:nth-child(4) {
    animation-delay: 0.24s !important;
  }

  /* ─── 3. INTERACTIVE HOVER ANIMATIONS FOR ALL ELEMENTS & FEATURES ─── */

  /* --- A. FEATURES & WHY US CARDS (فيتشرز ومميزات الموقع) --- */
  .why-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer;
  }

  .why-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
    transform: translateX(100%) rotate(25deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .why-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    background: linear-gradient(160deg, #1c1c24 0%, #12121a 100%) !important;
    border-color: rgba(220, 38, 38, 0.7) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }

  .why-card:hover::after {
    opacity: 1;
    animation: shimmerBeam 1s ease forwards;
  }

  .why-card .why-icon {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .why-card:hover .why-icon {
    transform: scale(1.35) rotate(-10deg) translateY(-4px) !important;
    filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.8)) !important;
  }

  .why-card:hover h3 {
    color: #fff !important;
    text-shadow: 0 0 15px rgba(220, 38, 38, 0.5) !important;
  }

  .why-card:hover p {
    color: #e2e8f0 !important;
  }

  /* --- B. CATEGORY CARDS (كروت التصنيفات) --- */
  .category-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .category-card:hover {
    transform: translateY(-9px) scale(1.04) !important;
    background: linear-gradient(160deg, #1c1c26 0%, #121218 100%) !important;
    border-color: rgba(220, 38, 38, 0.65) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.3) !important;
  }

  .category-card .category-icon {
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .category-card:hover .category-icon {
    transform: scale(1.3) translateY(-6px) rotate(8deg) !important;
    filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.7)) !important;
  }

  .category-card:hover .category-name {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important;
  }

  .category-card:hover .category-count {
    color: #fca5a5 !important;
  }

  /* --- C. PROPERTY CARDS (كروت العقارات الفاخرة) --- */
  .property-card {
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .property-card:hover {
    transform: translateY(-10px) scale(1.018) !important;
    border-color: rgba(220, 38, 38, 0.6) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(220, 38, 38, 0.25) !important;
  }

  .property-card .card-image-wrap img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .property-card:hover .card-image-wrap img {
    transform: scale(1.1) rotate(0.6deg) !important;
  }

  .property-card .card-price-overlay {
    transition: all 0.35s ease !important;
  }

  .property-card:hover .card-price-overlay {
    transform: scale(1.08) translateY(-2px) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.8), 0 8px 25px rgba(0, 0, 0, 0.6) !important;
  }

  .property-card .card-fav {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .property-card:hover .card-fav {
    transform: scale(1.1) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
  }

  .property-card:hover .card-title {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  }

  .property-card .card-spec {
    transition: transform 0.3s ease !important;
  }

  .property-card:hover .card-spec span {
    display: inline-block;
    transform: scale(1.25) translateY(-2px) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* --- D. INVESTMENT ITEMS & CARDS (عناصر كروت الاستثمار) --- */
  .invest-stat-card,
  .dash-stat-card,
  .astat-card,
  .hood-stat,
  .app-stat-box {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer;
  }

  .invest-stat-card:hover,
  .dash-stat-card:hover,
  .astat-card:hover,
  .hood-stat:hover {
    transform: translateY(-7px) scale(1.03) !important;
    border-color: rgba(220, 38, 38, 0.6) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.25) !important;
    background: linear-gradient(150deg, #1a1a24 0%, #101018 100%) !important;
  }

  .invest-stat-card:hover .ist-icon,
  .dash-stat-card:hover .dsc-icon,
  .astat-card:hover .astat-icon {
    transform: scale(1.25) rotate(8deg) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .invest-item {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .invest-item:hover {
    transform: translateX(-8px) scale(1.015) !important;
    border-color: rgba(220, 38, 38, 0.6) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.2) !important;
    background: linear-gradient(150deg, #181822 0%, #111118 100%) !important;
  }

  .invest-item:hover .invest-img img {
    transform: scale(1.12) !important;
    transition: transform 0.4s ease !important;
  }

  .invest-item:hover .return-pct {
    transform: scale(1.1) !important;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.6) !important;
    transition: all 0.3s ease !important;
  }

  /* --- E. NEIGHBORHOOD CARDS (كروت الأحياء) --- */
  .neighborhood-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .neighborhood-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(220, 38, 38, 0.65) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.25) !important;
    background: linear-gradient(150deg, #1a1a24 0%, #121218 100%) !important;
  }

  .neighborhood-card:hover .hood-name {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(220, 38, 38, 0.5) !important;
  }

  .neighborhood-card:hover .hood-bar {
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.8) !important;
  }

  /* --- F. TESTIMONIAL & REVIEW CARDS (كروت التقييمات) --- */
  .review-card,
  .admin-review-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .review-card:hover,
  .admin-review-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(220, 38, 38, 0.6) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(220, 38, 38, 0.25) !important;
    background: linear-gradient(160deg, #1a1a26 0%, #111118 100%) !important;
  }

  .review-card:hover .rc-avatar,
  .admin-review-card:hover .arc-avatar {
    transform: scale(1.15) rotate(6deg) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.8) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .review-card:hover .rc-stars {
    letter-spacing: 2px !important;
    text-shadow: 0 0 12px rgba(234, 179, 8, 0.7) !important;
    transition: all 0.3s ease !important;
  }

  /* --- G. BUTTONS & CALL-TO-ACTIONS (الأزرار والتفاعلات) --- */
  .btn-primary,
  .btn-outline,
  .btn-ghost,
  .btn-search,
  .store-btn,
  .auth-submit-btn,
  .btn-social,
  .nav-app-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .btn-primary:hover,
  .btn-search:hover,
  .auth-submit-btn:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.6), 0 0 20px rgba(220, 38, 38, 0.3) !important;
  }

  .btn-primary:active,
  .btn-search:active,
  .auth-submit-btn:active {
    transform: translateY(0) scale(0.98) !important;
  }

  .btn-outline:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;
  }

  .btn-ghost:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
  }

  /* --- H. FILTER CHIPS & TABS (الفلاتر والتبويبات) --- */
  .filter-chip,
  .search-tab,
  .city-tab,
  .auth-tab-btn,
  .room-btn,
  .date-btn,
  .time-btn,
  .year-btn,
  .period-btn,
  .admin-ftab,
  .view-btn,
  .page-btn {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .filter-chip:hover,
  .search-tab:hover,
  .city-tab:hover,
  .auth-tab-btn:hover,
  .room-btn:hover,
  .date-btn:hover,
  .time-btn:hover,
  .year-btn:hover,
  .period-btn:hover,
  .admin-ftab:hover,
  .view-btn:hover,
  .page-btn:hover {
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35) !important;
  }

  /* --- I. FORM INPUTS & SELECTS (حقول الإدخال والبحث) --- */
  .form-input,
  .search-input,
  .search-select,
  .calc-input,
  .price-input,
  .form-select {
    transition: all 0.3s ease !important;
  }

  .form-input:hover,
  .search-field:hover,
  .calc-input:hover,
  .price-input:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.15) !important;
  }

  .form-input:focus,
  .search-field:focus-within,
  .calc-input:focus,
  .price-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.35), 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
    transform: translateY(-1px) !important;
  }

  /* --- J. TABLE ROWS & DASHBOARD CARDS (صفوف الجداول ولوحة التحكم) --- */
  .table-row {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: var(--radius-sm);
  }

  .table-row:hover {
    transform: translateX(-6px) !important;
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  }

  .table-row:hover .prop-thumb img {
    transform: scale(1.15) !important;
    transition: transform 0.3s ease !important;
  }

  /* --- K. FEATURE LIST ITEMS & CHECKMARKS --- */
  .feature-item,
  .lf-item,
  .spec-item,
  .agent-stat {
    transition: all 0.3s ease !important;
    cursor: default;
  }

  .feature-item:hover,
  .lf-item:hover {
    transform: translateX(-5px) !important;
    color: #fff !important;
  }

  .feature-item:hover span,
  .lf-item:hover .lf-icon {
    display: inline-block;
    transform: scale(1.3) !important;
    color: #22c55e !important;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .spec-item:hover {
    transform: translateY(-4px) scale(1.08) !important;
  }

  .spec-item:hover .spec-icon {
    animation: iconFloatJump 0.6s ease;
  }

  /* --- L. SIDEBAR CARDS & ACTIONS --- */
  .agent-card,
  .schedule-card,
  .price-card,
  .map-mini-card,
  .dash-chart-card,
  .dash-table-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .agent-card:hover,
  .schedule-card:hover,
  .price-card:hover,
  .map-mini-card:hover,
  .dash-chart-card:hover,
  .dash-table-card:hover {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(220, 38, 38, 0.2) !important;
  }

  .agent-card:hover .agent-avatar {
    transform: scale(1.12) rotate(6deg) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.8) !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  /* --- M. APP SHOWCASE PHONE MOCKUP (المجسم ثلاثي الأبعاد للتطبيق) --- */
  .phone-mockup-frame {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .app-showcase-card:hover .phone-mockup-frame {
    transform: translateY(-12px) rotate(-2deg) scale(1.04) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(220, 38, 38, 0.3) !important;
  }

  .phone-card-preview {
    transition: all 0.3s ease !important;
  }

  .app-showcase-card:hover .phone-card-preview {
    transform: scale(1.05) !important;
    background: rgba(220, 38, 38, 0.15) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
  }

  /* --- N. MAP PINS HOVER (دبابيس الخريطة) --- */
  .map-pin,
  .hood-pin {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .map-pin:hover,
  .hood-pin:hover {
    transform: translate(-50%, -65%) scale(1.25) !important;
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.9), 0 0 15px rgba(255, 255, 255, 0.4) !important;
    z-index: 100 !important;
  }

  /* ============================================================
   💬 INTERACTIVE CLICK PHRASES & FLOATING MICRO-ANIMATIONS
   ============================================================ */
  @keyframes clickFloatUp {
    0% {
      opacity: 0;
      transform: translate(-50%, 5px) scale(0.5) rotate(-4deg);
    }

    25% {
      opacity: 1;
      transform: translate(-50%, -18px) scale(1.1) rotate(2deg);
    }

    70% {
      opacity: 0.95;
      transform: translate(-50%, -35px) scale(1) rotate(0deg);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -55px) scale(0.85) rotate(-2deg);
    }
  }

  @keyframes clickRippleWave {
    0% {
      width: 0px;
      height: 0px;
      opacity: 0.9;
    }

    100% {
      width: 140px;
      height: 140px;
      opacity: 0;
    }
  }

  .floating-click-badge {
    position: fixed;
    z-index: 99999999;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(153, 27, 27, 0.98));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(220, 38, 38, 0.5);
    color: #ffffff;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    direction: rtl;
    animation: clickFloatUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .click-ripple-circle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.6) 0%, rgba(220, 38, 38, 0) 70%);
    border: 1.5px solid rgba(220, 38, 38, 0.7);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999999;
    animation: clickRippleWave 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ============================================================
   ☀️ LUXURY WHITE & LIGHT THEME — COMPLETE DESIGN SYSTEM
   Covers: All pages, Admin, Login, Dashboard, Footer, Modals
   ============================================================ */

  /* ─── ☀️🌙 Luxury Circular Vector SVG Theme Button ─── */
  .theme-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    outline: none;
    user-select: none;
    position: relative;
  }

  .theme-icon-btn:hover {
    transform: translateY(-2px) scale(1.12);
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 4px 18px rgba(251, 191, 36, 0.35);
    color: #f59e0b;
  }

  .theme-icon-btn .tib-svg {
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  }

  .theme-icon-btn:hover .tib-svg {
    transform: rotate(25deg) scale(1.15);
  }

  /* Default (Dark Mode): Show sun SVG, hide moon SVG */
  .theme-icon-btn .svg-sun {
    display: block !important;
  }

  .theme-icon-btn .svg-moon {
    display: none !important;
  }

  /* Light Mode: Show moon SVG, hide sun SVG */
  html[data-theme="light"] .theme-icon-btn,
  body.light-theme .theme-icon-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .theme-icon-btn:hover,
  body.light-theme .theme-icon-btn:hover {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.25) !important;
  }

  html[data-theme="light"] .theme-icon-btn .svg-sun,
  body.light-theme .theme-icon-btn .svg-sun {
    display: none !important;
  }

  html[data-theme="light"] .theme-icon-btn .svg-moon,
  body.light-theme .theme-icon-btn .svg-moon {
    display: block !important;
  }





  /* ─── Theme Change Splash Overlay ─── */
  @keyframes themeSplashIn {
    0% {
      transform: scale(0);
      opacity: 0.9;
    }

    60% {
      transform: scale(3.5);
      opacity: 0.7;
    }

    100% {
      transform: scale(6);
      opacity: 0;
    }
  }

  @keyframes themeToastSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px) scale(0.85);
    }

    60% {
      transform: translateY(-6px) scale(1.04);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes themeToastSlideOut {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    100% {
      opacity: 0;
      transform: translateY(-20px) scale(0.9);
    }
  }

  .theme-change-splash {
    position: fixed;
    z-index: 9999998;
    pointer-events: none;
    border-radius: 50%;
    animation: themeSplashIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
  }

  .theme-change-toast {
    position: fixed;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(30px) scale(0.85);
    z-index: 9999999;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(220, 38, 38, 0.25);
    border-radius: 60px;
    padding: 1rem 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 30px rgba(220, 38, 38, 0.12);
    animation: themeToastSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    direction: rtl;
  }

  .theme-change-toast.dark-toast {
    background: rgba(12, 12, 18, 0.97);
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(220, 38, 38, 0.2);
  }

  .theme-change-toast .tct-icon {
    font-size: 2rem;
    animation: iconFloatJump 0.6s ease;
  }

  .theme-change-toast .tct-label {
    font-size: 1.05rem;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 0.2px;
  }

  .theme-change-toast.dark-toast .tct-label {
    color: #ffffff;
  }

  .theme-change-toast .tct-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.1rem;
  }

  .theme-change-toast.dark-toast .tct-sub {
    color: #94a3b8;
  }

  .theme-change-toast.exiting {
    animation: themeToastSlideOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ─── Page Transition Fade ─── */
  body {
    transition: background-color 0.5s ease, color 0.5s ease;
  }

  /* ===================================================
   ROOT VARIABLES FOR LIGHT THEME
   =================================================== */
  :root[data-theme="light"],
  html[data-theme="light"],
  body[data-theme="light"],
  body.light-theme {
    --bg-primary: #f6f8fc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5fb;
    --bg-elevated: #eef2f9;
    --border: rgba(15, 23, 42, 0.08);
    --border-hover: rgba(220, 38, 38, 0.5);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --shadow: 0 4px 20px rgba(15, 23, 42, 0.07);
    --shadow-red: 0 8px 30px rgba(220, 38, 38, 0.15);
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }

  html[data-theme="light"] body,
  body.light-theme {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
  }

  /* ─── Scrollbar ─── */
  html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  /* ─── Navbar ─── */
  html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: 0 4px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 6px 30px rgba(15, 23, 42, 0.09) !important;
  }

  html[data-theme="light"] .logo-text {
    color: #0f172a !important;
  }

  html[data-theme="light"] .nav-link {
    color: #475569 !important;
  }

  html[data-theme="light"] .nav-link:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.07) !important;
  }

  html[data-theme="light"] .nav-link.active {
    color: #dc2626 !important;
  }

  html[data-theme="light"] .theme-toggle-btn {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .btn-ghost {
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .btn-ghost:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
  }

  html[data-theme="light"] .hamburger span {
    background: #0f172a !important;
  }

  html[data-theme="light"] .user-pill-btn,
  body.light-theme .user-pill-btn,
  [data-theme="light"] .user-pill-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  html[data-theme="light"] .user-pill-name,
  body.light-theme .user-pill-name,
  [data-theme="light"] .user-pill-name {
    color: #0f172a !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .user-pill-arrow,
  body.light-theme .user-pill-arrow,
  [data-theme="light"] .user-pill-arrow {
    color: #334155 !important;
    font-weight: 900 !important;
  }

  html[data-theme="light"] .user-dropdown-menu {
    background: rgba(255, 255, 255, 0.99) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12) !important;
  }

  html[data-theme="light"] .udm-header {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .udm-header strong {
    color: #0f172a !important;
  }

  html[data-theme="light"] .udm-header span {
    color: #64748b !important;
  }

  html[data-theme="light"] .udm-item {
    color: #334155 !important;
  }

  html[data-theme="light"] .udm-item:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .udm-divider {
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  /* ─── Hero ─── */
  html[data-theme="light"] .hero {
    background: linear-gradient(160deg, #ffffff 0%, #fff1f2 50%, #f6f8fc 100%) !important;
  }

  html[data-theme="light"] .hero::before {
    background:
      radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(220, 38, 38, 0.04) 0%, transparent 50%) !important;
  }

  html[data-theme="light"] .hero-badge {
    background: rgba(220, 38, 38, 0.09) !important;
    border-color: rgba(220, 38, 38, 0.28) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .hero-title {
    color: #0f172a !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] .hero-title .text-red {
    color: #dc2626 !important;
  }

  html[data-theme="light"] .hero-subtitle {
    color: #475569 !important;
  }

  html[data-theme="light"] .hero-subtitle:hover {
    color: #0f172a !important;
    background: rgba(220, 38, 38, 0.05) !important;
  }

  html[data-theme="light"] .hero-image-overlay {
    background: linear-gradient(to top, #f6f8fc 0%, transparent 70%) !important;
  }

  html[data-theme="light"] .hero-stats {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07) !important;
  }

  html[data-theme="light"] .stat-num {
    color: #0f172a !important;
  }

  html[data-theme="light"] .stat-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .stat-divider {
    background: rgba(15, 23, 42, 0.1) !important;
  }

  /* ─── Search Box ─── */
  html[data-theme="light"] .search-box {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(220, 38, 38, 0.1) !important;
  }

  html[data-theme="light"] .search-tabs {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .search-tab {
    color: #64748b !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }

  html[data-theme="light"] .search-tab.active {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
  }

  html[data-theme="light"] .search-inputs {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .search-field label,
  html[data-theme="light"] .sf-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .search-input,
  html[data-theme="light"] .search-select {
    color: #0f172a !important;
    background: transparent !important;
  }

  html[data-theme="light"] .search-divider {
    background: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .filter-chips {
    border-top-color: rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .filter-chip {
    background: #eef2f9 !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .filter-chip:hover,
  html[data-theme="light"] .filter-chip.active {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  /* ─── Section Headers ─── */
  html[data-theme="light"] .section-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .section-subtitle {
    color: #64748b !important;
  }

  html[data-theme="light"] .section-title .text-red {
    color: #dc2626 !important;
  }

  /* ─── Categories ─── */
  html[data-theme="light"] .categories-section {
    background: #eef2f9 !important;
  }

  html[data-theme="light"] .category-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .category-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 18px 40px rgba(220, 38, 38, 0.12), 0 8px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .category-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .category-count {
    color: #64748b !important;
  }

  /* ─── Property Cards ─── */
  html[data-theme="light"] .property-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.07) !important;
  }

  html[data-theme="light"] .property-card:hover {
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 22px 55px rgba(220, 38, 38, 0.14), 0 10px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .property-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .card-location {
    color: #64748b !important;
  }

  html[data-theme="light"] .card-spec {
    color: #475569 !important;
  }

  html[data-theme="light"] .card-spec .spec-divider {
    background: rgba(15, 23, 42, 0.12) !important;
  }

  html[data-theme="light"] .listing-type-badge {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .card-agent-name {
    color: #334155 !important;
  }

  /* ─── Why Us / Features ─── */
  html[data-theme="light"] .why-section {
    background: #f6f8fc !important;
  }

  html[data-theme="light"] .why-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .why-card:hover {
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 22px 50px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .why-card h3 {
    color: #0f172a !important;
  }

  html[data-theme="light"] .why-card p {
    color: #475569 !important;
  }

  /* ─── Reviews Section ─── */
  html[data-theme="light"] .reviews-section {
    background: #eef2f9 !important;
  }

  html[data-theme="light"] .review-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .review-card:hover {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 22px 50px rgba(220, 38, 38, 0.14) !important;
  }

  html[data-theme="light"] .reviewer-name {
    color: #020617 !important;
    font-weight: 900 !important;
  }

  html[data-theme="light"] .reviewer-city {
    color: #1e293b !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .review-text {
    color: #0f172a !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
  }

  html[data-theme="light"] .review-card-footer {
    border-top-color: rgba(15, 23, 42, 0.12) !important;
  }

  html[data-theme="light"] .review-tag {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .review-date {
    color: #334155 !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .review-helpful {
    background: #f8fafc !important;
    border: 1.5px solid #94a3b8 !important;
    color: #020617 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .review-helpful span {
    color: #020617 !important;
    -webkit-text-fill-color: #020617 !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .helpful-count {
    background: #dcfce7 !important;
    color: #15803d !important;
    -webkit-text-fill-color: #15803d !important;
    border: 1.5px solid #86efac !important;
    font-weight: 900 !important;
  }

  html[data-theme="light"] .reviews-overall-score {
    border-color: #cbd5e1 !important;
  }

  html[data-theme="light"] .ros-num {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    text-shadow: none !important;
    font-weight: 900 !important;
  }

  html[data-theme="light"] .ros-count {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    font-weight: 700 !important;
  }

  html[data-theme="light"] .rev-nav {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  /* ─── Listings Page ─── */
  html[data-theme="light"] .page-header-bar {
    background: #ffffff !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .page-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .bc-sep {
    color: #64748b !important;
  }

  html[data-theme="light"] .bc-active {
    color: #0f172a !important;
  }

  html[data-theme="light"] .listings-sidebar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .filter-title {
    color: #0f172a !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .filter-group-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .filter-select,
  html[data-theme="light"] .filter-input {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .filter-select:focus,
  html[data-theme="light"] .filter-input:focus {
    border-color: #dc2626 !important;
  }

  html[data-theme="light"] .room-btn,
  html[data-theme="light"] .date-btn {
    background: #eef2f9 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .room-btn.active,
  html[data-theme="light"] .date-btn.active {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .listings-toolbar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .results-count {
    color: #64748b !important;
  }

  html[data-theme="light"] .sort-select {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .view-btn {
    background: #eef2f9 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .view-btn.active {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  /* ─── Property Detail Page ─── */
  html[data-theme="light"] .property-info-card,
  html[data-theme="light"] .detail-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .detail-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .detail-description {
    color: #475569 !important;
  }

  html[data-theme="light"] .spec-item {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .spec-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .spec-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .lf-item {
    color: #475569 !important;
  }

  html[data-theme="light"] .agent-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .agent-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .agent-badge {
    color: #64748b !important;
  }

  html[data-theme="light"] .agent-stat-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .agent-stat-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .price-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .price-card-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .schedule-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .schedule-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .date-picker-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .map-mini-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  /* ─── Investment Page ─── */
  html[data-theme="light"] .invest-hero {
    background: linear-gradient(160deg, #ffffff 0%, #fff1f2 50%, #f6f8fc 100%) !important;
  }

  html[data-theme="light"] .invest-hero-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .invest-hero-sub {
    color: #475569 !important;
  }

  html[data-theme="light"] .invest-stat-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .invest-stat-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 20px 45px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .ist-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .ist-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .invest-item {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .invest-item:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
  }

  html[data-theme="light"] .invest-info h4 {
    color: #0f172a !important;
  }

  html[data-theme="light"] .invest-info p {
    color: #64748b !important;
  }

  html[data-theme="light"] .calc-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .calc-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .calc-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .calc-input {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .calc-result-box {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
  }

  html[data-theme="light"] .calc-result-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .calc-result-val {
    color: #0f172a !important;
  }

  /* ─── Neighborhoods Page ─── */
  html[data-theme="light"] .neighborhoods-hero {
    background: linear-gradient(160deg, #ffffff 0%, #fff1f2 50%, #f6f8fc 100%) !important;
  }

  html[data-theme="light"] .neighborhoods-hero-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .neighborhoods-hero-sub {
    color: #475569 !important;
  }

  html[data-theme="light"] .city-tab {
    background: #eef2f9 !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .city-tab.active {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
  }

  html[data-theme="light"] .neighborhood-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .neighborhood-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 22px 50px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .hood-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .hood-city {
    color: #64748b !important;
  }

  html[data-theme="light"] .hood-stats-row {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .hs-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .hs-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .demand-bar-bg {
    background: rgba(15, 23, 42, 0.08) !important;
  }

  /* ─── Dashboard / لوحة التحكم ─── */
  html[data-theme="light"] .dashboard-layout {
    background: #f6f8fc !important;
  }

  html[data-theme="light"] .dash-sidebar {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07) !important;
  }

  html[data-theme="light"] .dash-nav-btn {
    color: #475569 !important;
  }

  html[data-theme="light"] .dash-nav-btn:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .dash-nav-btn.active {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #dc2626 !important;
    border-right-color: #dc2626 !important;
  }

  html[data-theme="light"] .dash-section-label {
    color: #94a3b8 !important;
  }

  html[data-theme="light"] .dash-stat-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .dash-stat-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 18px 40px rgba(220, 38, 38, 0.1) !important;
  }

  html[data-theme="light"] .dsc-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .dsc-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .dsc-trend {
    color: #64748b !important;
  }

  html[data-theme="light"] .dash-chart-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .dash-card-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .dash-table-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .dash-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .table-header-row {
    background: #f6f8fc !important;
    color: #64748b !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .table-row {
    border-color: rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .table-row:hover {
    background: #f6f8fc !important;
  }

  html[data-theme="light"] .prop-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .prop-location {
    color: #64748b !important;
  }

  html[data-theme="light"] .dash-mod-tab {
    color: #64748b !important;
    border-bottom-color: rgba(15, 23, 42, 0.1) !important;
  }

  html[data-theme="light"] .dash-mod-tab.active {
    color: #dc2626 !important;
    border-bottom-color: #dc2626 !important;
  }

  /* ─── Admin Panel ─── */
  html[data-theme="light"] .admin-topbar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .admin-main-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .admin-subtitle {
    color: #64748b !important;
  }

  html[data-theme="light"] .astat-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .astat-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .astat-val {
    color: #0f172a !important;
  }

  html[data-theme="light"] .admin-filter-tabs {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .admin-tab {
    color: #64748b !important;
  }

  html[data-theme="light"] .admin-tab.active {
    color: #dc2626 !important;
    border-bottom-color: #dc2626 !important;
  }

  html[data-theme="light"] .admin-review-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
  }

  html[data-theme="light"] .admin-review-card:hover {
    border-color: rgba(220, 38, 38, 0.4) !important;
  }

  html[data-theme="light"] .arc-text {
    color: #334155 !important;
  }

  html[data-theme="light"] .arc-user {
    color: #0f172a !important;
  }

  html[data-theme="light"] .arc-city {
    color: #64748b !important;
  }

  html[data-theme="light"] .arc-date {
    color: #94a3b8 !important;
  }

  /* ─── Login / Auth Page ─── */
  html[data-theme="light"] .login-brand {
    background: linear-gradient(160deg, #0f172a 0%, #dc2626 100%) !important;
  }

  html[data-theme="light"] .auth-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12) !important;
  }

  html[data-theme="light"] .auth-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .auth-subtitle {
    color: #64748b !important;
  }

  html[data-theme="light"] .auth-tab-btn {
    color: #64748b !important;
    border-bottom-color: transparent !important;
  }

  html[data-theme="light"] .auth-tab-btn.active {
    color: #dc2626 !important;
    border-bottom-color: #dc2626 !important;
  }

  html[data-theme="light"] .form-label {
    color: #334155 !important;
  }

  html[data-theme="light"] .form-input {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .form-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .form-input::placeholder {
    color: #94a3b8 !important;
  }

  html[data-theme="light"] .social-login-divider span {
    color: #94a3b8 !important;
  }

  html[data-theme="light"] .social-login-divider::before,
  html[data-theme="light"] .social-login-divider::after {
    background: rgba(15, 23, 42, 0.12) !important;
  }

  html[data-theme="light"] .social-btn {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .auth-switch {
    color: #64748b !important;
  }

  html[data-theme="light"] .auth-switch a {
    color: #dc2626 !important;
  }

  html[data-theme="light"] .otp-note {
    color: #64748b !important;
  }

  /* ─── App Download Section ─── */
  html[data-theme="light"] .app-showcase-card {
    background: linear-gradient(160deg, #ffffff 0%, #fff1f2 100%) !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
    box-shadow: 0 20px 50px rgba(220, 38, 38, 0.08), 0 10px 30px rgba(15, 23, 42, 0.05) !important;
  }

  html[data-theme="light"] .app-showcase-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .app-showcase-desc {
    color: #475569 !important;
  }

  html[data-theme="light"] .asb-num {
    background: linear-gradient(135deg, #0f172a, #dc2626) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  html[data-theme="light"] .asb-lbl {
    color: #64748b !important;
  }

  html[data-theme="light"] .store-btn {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06) !important;
  }

  html[data-theme="light"] .store-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .store-sub {
    color: #64748b !important;
  }

  html[data-theme="light"] .phone-card-preview {
    background: rgba(220, 38, 38, 0.06) !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
  }

  html[data-theme="light"] .pcp-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .pcp-price {
    color: #dc2626 !important;
  }

  /* ─── Footer ─── */
  html[data-theme="light"] .footer {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%) !important;
  }

  /* ─── Modals ─── */
  html[data-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.4) !important;
  }

  html[data-theme="light"] .modal-card,
  html[data-theme="light"] .review-modal-card,
  html[data-theme="light"] .store-modal-card,
  html[data-theme="light"] .add-property-modal .modal-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.15) !important;
  }

  html[data-theme="light"] .modal-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .modal-close {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .modal-close:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .store-app-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .store-app-desc {
    color: #64748b !important;
  }

  html[data-theme="light"] .review-modal-user-bar {
    background: rgba(220, 38, 38, 0.05) !important;
    border-color: rgba(220, 38, 38, 0.15) !important;
  }

  html[data-theme="light"] .rmu-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .rmu-welcome-msg {
    color: #64748b !important;
  }

  html[data-theme="light"] .star-rating-box {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
  }

  html[data-theme="light"] .star-input-label {
    color: #64748b !important;
  }

  html[data-theme="light"] .moderation-badge-note {
    background: rgba(234, 179, 8, 0.08) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
  }

  html[data-theme="light"] .rev-cat-tag {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .rev-cat-tag.active {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .modal-textarea {
    background: #f6f8fc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .modal-textarea:focus {
    border-color: #dc2626 !important;
  }

  /* ─── EBS / Toast in light mode ─── */
  html[data-theme="light"] #toast {
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.18) !important;
  }

  /* ─── Floating click badge in light mode ─── */
  html[data-theme="light"] .floating-click-badge {
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2), 0 0 15px rgba(220, 38, 38, 0.4) !important;
  }

  /* ─── Mobile nav sidebar ─── */
  html[data-theme="light"] .nav-links {
    background: rgba(255, 255, 255, 0.99) !important;
    border-left-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: -10px 0 40px rgba(15, 23, 42, 0.12) !important;
  }



  /* Theme Toggle Button */
  .theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    padding: 0.42rem 0.95rem;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
  }

  .theme-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(220, 38, 38, 0.2);
    border-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
  }

  .theme-icon {
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.4s ease;
  }

  .theme-toggle-btn:hover .theme-icon {
    transform: rotate(20deg) scale(1.2);
  }

  /* ─── LIGHT MODE ROOT VARIABLES ─── */
  html[data-theme="light"],
  body.light-theme {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-elevated: #f1f5f9;
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(220, 38, 38, 0.45);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-red: 0 8px 30px rgba(220, 38, 38, 0.15);
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  /* Navbar in Light Mode */
  html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04) !important;
  }

  html[data-theme="light"] .navbar.scrolled {
    background: #ffffff !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08) !important;
  }

  html[data-theme="light"] .logo-text {
    color: #0f172a !important;
  }

  html[data-theme="light"] .nav-link {
    color: #475569 !important;
  }

  html[data-theme="light"] .nav-link:hover,
  html[data-theme="light"] .nav-link.active {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.06) !important;
  }

  html[data-theme="light"] .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .btn-ghost {
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #334155 !important;
  }

  html[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
  }

  html[data-theme="light"] .user-pill-btn,
  body.light-theme .user-pill-btn,
  [data-theme="light"] .user-pill-btn {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
  }

  html[data-theme="light"] .user-pill-name,
  body.light-theme .user-pill-name,
  [data-theme="light"] .user-pill-name {
    color: #0f172a !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] .user-dropdown-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
  }

  html[data-theme="light"] .udm-header strong {
    color: #0f172a !important;
  }

  html[data-theme="light"] .udm-item {
    color: #334155 !important;
  }

  html[data-theme="light"] .udm-item:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
  }

  /* Hero Section in Light Mode */
  html[data-theme="light"] .hero {
    background: linear-gradient(135deg, #ffffff 0%, #fff1f2 45%, #f8fafc 100%) !important;
  }

  html[data-theme="light"] .hero::before {
    background-image:
      radial-gradient(ellipse at 20% 50%, rgba(220, 38, 38, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, rgba(220, 38, 38, 0.04) 0%, transparent 50%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dc2626' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  }

  html[data-theme="light"] .hero-title {
    color: #0f172a !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] .hero-subtitle {
    color: #475569 !important;
  }

  html[data-theme="light"] .hero-subtitle:hover {
    color: #0f172a !important;
    background: rgba(220, 38, 38, 0.05) !important;
  }

  html[data-theme="light"] .hero-badge {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .hero-image-overlay {
    background: linear-gradient(to top, #f8fafc, transparent) !important;
  }

  /* Search Box in Light Mode */
  html[data-theme="light"] .search-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .search-inputs {
    background: #f8fafc !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
  }

  html[data-theme="light"] .search-input,
  html[data-theme="light"] .search-select {
    color: #0f172a !important;
  }

  html[data-theme="light"] .search-select option {
    background: #ffffff !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .search-tab {
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .search-tab.active {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
  }

  html[data-theme="light"] .filter-chip {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #475569 !important;
  }

  html[data-theme="light"] .filter-chip:hover,
  html[data-theme="light"] .filter-chip.active {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .hero-stats {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  }

  html[data-theme="light"] .stat-num {
    color: #0f172a !important;
  }

  html[data-theme="light"] .stat-label {
    color: #64748b !important;
  }

  /* Sections & Headers in Light Mode */
  html[data-theme="light"] .categories-section {
    background: #f1f5f9 !important;
  }

  html[data-theme="light"] .section-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .section-subtitle {
    color: #64748b !important;
  }

  html[data-theme="light"] .page-header-bar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  html[data-theme="light"] .page-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .bc-active {
    color: #0f172a !important;
  }

  /* Cards in Light Mode */
  html[data-theme="light"] .category-card,
  html[data-theme="light"] .property-card,
  html[data-theme="light"] .why-card,
  html[data-theme="light"] .invest-stat-card,
  html[data-theme="light"] .invest-item,
  html[data-theme="light"] .neighborhood-card,
  html[data-theme="light"] .calc-card,
  html[data-theme="light"] .dash-stat-card,
  html[data-theme="light"] .dash-chart-card,
  html[data-theme="light"] .dash-table-card,
  html[data-theme="light"] .property-info-card,
  html[data-theme="light"] .agent-card,
  html[data-theme="light"] .schedule-card,
  html[data-theme="light"] .price-card,
  html[data-theme="light"] .map-mini-card,
  html[data-theme="light"] .astat-card,
  html[data-theme="light"] .admin-review-card,
  html[data-theme="light"] .listings-sidebar,
  html[data-theme="light"] .listings-toolbar,
  html[data-theme="light"] .hood-stats-row {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  }

  html[data-theme="light"] .category-card:hover,
  html[data-theme="light"] .property-card:hover,
  html[data-theme="light"] .why-card:hover,
  html[data-theme="light"] .invest-stat-card:hover,
  html[data-theme="light"] .invest-item:hover,
  html[data-theme="light"] .neighborhood-card:hover,
  html[data-theme="light"] .dash-stat-card:hover {
    background: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    box-shadow: 0 20px 45px rgba(220, 38, 38, 0.12), 0 10px 25px rgba(0, 0, 0, 0.05) !important;
  }

  html[data-theme="light"] .card-title,
  html[data-theme="light"] .category-name,
  html[data-theme="light"] .hood-name,
  html[data-theme="light"] .property-title,
  html[data-theme="light"] .dash-title,
  html[data-theme="light"] .admin-main-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .why-card h3 {
    color: #0f172a !important;
  }

  html[data-theme="light"] .why-card p {
    color: #475569 !important;
  }

  html[data-theme="light"] .card-location,
  html[data-theme="light"] .card-spec,
  html[data-theme="light"] .detail-description,
  html[data-theme="light"] .hood-city,
  html[data-theme="light"] .invest-info p {
    color: #64748b !important;
  }

  /* Reviews in Light Mode */
  html[data-theme="light"] .review-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  }

  html[data-theme="light"] .review-card:hover {
    background: #ffffff !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 20px 45px rgba(220, 38, 38, 0.12) !important;
  }

  html[data-theme="light"] .reviewer-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .review-text {
    color: #334155 !important;
  }

  html[data-theme="light"] .ros-num {
    color: #0f172a !important;
  }

  html[data-theme="light"] .review-helpful {
    background: #f1f5f9 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #334155 !important;
  }

  html[data-theme="light"] .helpful-count {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
  }

  /* Tables & Inputs in Light Mode */
  html[data-theme="light"] .table-header-row {
    background: #f8fafc !important;
    color: #64748b !important;
  }

  html[data-theme="light"] .table-row {
    border-color: rgba(0, 0, 0, 0.06) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .table-row:hover {
    background: #f8fafc !important;
  }

  html[data-theme="light"] .prop-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .form-input,
  html[data-theme="light"] .calc-input,
  html[data-theme="light"] .price-input {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .form-input:focus,
  html[data-theme="light"] .calc-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
  }

  /* Modals in Light Mode */
  html[data-theme="light"] .modal-card,
  html[data-theme="light"] .review-modal-card,
  html[data-theme="light"] .store-modal-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
  }

  html[data-theme="light"] .modal-close {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #64748b !important;
  }

  html[data-theme="light"] .modal-close:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
  }

  html[data-theme="light"] .modal-title,
  html[data-theme="light"] .store-app-title,
  html[data-theme="light"] .rmu-name {
    color: #0f172a !important;
  }

  html[data-theme="light"] .review-modal-user-bar {
    background: rgba(220, 38, 38, 0.05) !important;
  }

  /* App Showcase Card in Light Mode */
  html[data-theme="light"] .app-showcase-card {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    box-shadow: 0 20px 50px rgba(220, 38, 38, 0.08), 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  }

  html[data-theme="light"] .app-showcase-title {
    color: #0f172a !important;
  }

  html[data-theme="light"] .app-showcase-desc {
    color: #475569 !important;
  }

  html[data-theme="light"] .asb-num {
    background: linear-gradient(135deg, #0f172a 0%, #dc2626 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  html[data-theme="light"] .store-btn {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #0f172a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  }

  html[data-theme="light"] .store-name {
    color: #0f172a !important;
  }

  /* ============================================================
   🏛️ LUXURY ENTERPRISE FOOTER SYSTEM (DARK & LIGHT THEMES)
   ============================================================ */
  .footer {
    background: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, 0.12) 0%, transparent 65%), linear-gradient(180deg, #11141f 0%, #0b0d14 50%, #06070a 100%) !important;
    border-top: 1.5px solid rgba(220, 38, 38, 0.25) !important;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1;
    padding: 0;
    margin-top: 4rem;
    width: 100%;
    position: relative;
    z-index: 10;
    display: block;
  }

  .footer-top {
    padding: 4.5rem 0 3rem 0;
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 3.5rem !important;
    width: 100% !important;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
  }

  .footer-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.8;
    max-width: 380px;
  }

  .social-links {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
  }

  .social-link {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .social-link:hover {
    transform: translateY(-3px) scale(1.1);
    background: rgba(220, 38, 38, 0.2);
    border-color: #dc2626;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
  }

  .footer-col h5 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1.5rem;
    position: relative;
  }

  .footer-col h5::after {
    content: '';
    position: absolute;
    bottom: -0.4rem;
    right: 0;
    width: 25px;
    height: 2px;
    background: #dc2626;
    border-radius: 2px;
  }

  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .footer-col ul li a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.25s ease;
    display: inline-block;
  }

  .footer-col ul li a:hover {
    color: #dc2626;
    transform: translateX(-4px);
  }

  .contact-list li {
    color: #94a3b8;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.6;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.8rem 0;
    background: rgba(0, 0, 0, 0.25);
  }

  .footer-bottom-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .copyright-text {
    color: #64748b;
    font-size: 0.88rem;
    margin: 0;
  }

  .footer-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .footer-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
  }

  .footer-links a:hover {
    color: #dc2626;
  }

  /* ============================================================
   🗺️ LUXURY INTERACTIVE FULL MAP SYSTEM (MATCHES IMAGE 1)
   ============================================================ */
  .interactive-map-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
  }

  .map-top-bar {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1rem 1.2rem;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }

  .map-search-box {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.4rem 0.8rem;
  }

  .map-search-icon {
    font-size: 1.1rem;
    color: #94a3b8;
  }

  .map-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
  }

  .map-search-input::placeholder {
    color: #64748b;
  }

  .map-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .map-filter-btn:hover {
    background: #dc2626;
    color: #ffffff;
  }

  .map-filter-chips {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
    scrollbar-width: thin;
  }

  .map-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 0.4rem 0.85rem;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .map-chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-2px);
  }

  .map-chip.active {
    background: #dc2626;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  }

  .map-chip.special {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
  }

  .map-chip.special:hover {
    background: rgba(251, 191, 36, 0.25);
  }

  /* Luxury Map Canvas */
  .luxury-map-canvas {
    position: relative;
    width: 100%;
    height: 620px;
    background: radial-gradient(circle at 40% 40%, #131a2a 0%, #0a0d16 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  }

  .map-vector-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .pulse-polygon {
    animation: polygonGlow 3s ease-in-out infinite alternate;
  }

  @keyframes polygonGlow {
    0% {
      stroke-opacity: 0.6;
      fill-opacity: 0.6;
    }

    100% {
      stroke-opacity: 1;
      fill-opacity: 0.9;
    }
  }

  /* Map Price Pins */
  .map-pins-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .map-price-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .pin-marker-body {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(17, 24, 39, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .map-price-pin:hover .pin-marker-body {
    transform: scale(1.15);
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.9);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.5);
  }

  .map-price-pin.active {
    z-index: 25;
    transform: translate(-50%, -50%) scale(1.15);
  }

  .map-price-pin.active .pin-marker-body {
    background: #dc2626;
    border-color: #ffffff;
    color: #ffffff;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.8), 0 8px 25px rgba(0, 0, 0, 0.7);
  }

  .pin-pulse-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50px;
    border: 2px solid #dc2626;
    animation: pinPulseRing 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    pointer-events: none;
  }

  @keyframes pinPulseRing {
    0% {
      transform: scale(0.9);
      opacity: 0.9;
    }

    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }

  /* Floating Bottom Property Card - Ultra-Compact Luxury */
  .map-floating-card {
    position: absolute !important;
    bottom: 1.2rem !important;
    left: 1.2rem !important;
    width: 420px !important;
    max-width: calc(100% - 2.4rem) !important;
    height: auto !important;
    max-height: 135px !important;
    background: rgba(13, 17, 27, 0.96) !important;
    border: 1.5px solid rgba(220, 38, 38, 0.5) !important;
    border-radius: 18px !important;
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0.85rem !important;
    align-items: center !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(220, 38, 38, 0.25) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    z-index: 999 !important;
    cursor: pointer !important;
    animation: mfcSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
  }

  .map-floating-card:hover {
    transform: translateY(-3px) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 35px rgba(220, 38, 38, 0.4) !important;
  }

  @keyframes mfcSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .mfc-img-wrap {
    position: relative;
    width: 120px;
    height: 110px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mfc-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .map-floating-card:hover .mfc-img-wrap img {
    transform: scale(1.08);
  }

  .mfc-badge-status {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(34, 197, 94, 0.9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
  }

  .mfc-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.35rem;
  }

  .mfc-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mfc-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
  }

  .mfc-fav-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 0.8rem;
    transition: all 0.2s ease;
  }

  .mfc-fav-btn:hover {
    background: #dc2626;
    border-color: #dc2626;
    transform: scale(1.15);
  }

  .mfc-specs {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0;
  }

  .mfc-price-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3rem;
  }

  .mfc-price-box {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
  }

  .mfc-price-val {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
  }

  .mfc-price-curr {
    font-size: 0.75rem;
    color: #94a3b8;
  }

  .mfc-action-btn {
    padding: 0.45rem 0.9rem !important;
    font-size: 0.82rem !important;
    border-radius: 12px !important;
  }

  /* Floating Controls */
  .map-floating-controls {
    position: absolute;
    top: 1.8rem;
    right: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 20;
  }

  .mfc-btn {
    width: 42px;
    height: 42px;
    background: rgba(17, 24, 39, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mfc-btn:hover {
    background: #dc2626;
    border-color: #ef4444;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.5);
  }

  /* ============================================================
   🖼️ PROPERTY DETAIL ENHANCEMENTS (MATCHES IMAGE 2 TOP)
   ============================================================ */
  .gallery-media-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  .gmt-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 0.45rem 1rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .gmt-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .gmt-tab.active {
    background: #dc2626;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35);
  }

  .badge-count {
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
  }

  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 0.8rem;
  }

  .g-thumb {
    height: 85px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .g-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .g-thumb:hover img {
    transform: scale(1.1);
  }

  .g-thumb.active {
    border-color: #dc2626;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
    transform: scale(1.04);
  }

  /* Neighborhood Info Card */
  .neighborhood-info-card {
    background: linear-gradient(160deg, rgba(26, 26, 36, 0.95), rgba(16, 16, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 1.8rem;
    margin-top: 1.5rem;
  }

  .nic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
  }

  .nic-header h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
  }

  .nic-badge {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .nic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .nic-stat-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .nic-stat-box:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    transform: translateY(-3px);
  }

  .nic-icon {
    font-size: 1.6rem;
  }

  .nic-stat-info {
    display: flex;
    flex-direction: column;
  }

  .nic-stat-info strong {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
  }

  .nic-stat-info span {
    font-size: 0.75rem;
    color: #94a3b8;
  }

  .agent-quick-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
  }

  .btn-agent-wa {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    padding: 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.25s ease;
  }

  .btn-agent-wa:hover {
    background: #22c55e;
    color: #ffffff;
    transform: translateY(-2px);
  }

  .btn-agent-call {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #3b82f6;
    padding: 0.75rem;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.25s ease;
  }

  .btn-agent-call:hover {
    background: #3b82f6;
    color: #ffffff;
    transform: translateY(-2px);
  }

  /* ============================================================
   📊 DASHBOARD RECENT INQUIRIES & ANIMATED CHARTS (MATCHES IMAGE 2 BOTTOM)
   ============================================================ */
  .recent-requests-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.8rem;
  }

  .rrl-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .rrl-item:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    transform: translateX(-4px);
  }

  .rrl-img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .rrl-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.15rem;
  }

  .rrl-info strong {
    font-size: 0.92rem;
    color: #ffffff;
  }

  .rrl-info span {
    font-size: 0.78rem;
    color: #94a3b8;
  }

  .rrl-info small {
    font-size: 0.7rem;
    color: #fca5a5;
  }

  .rrl-badge {
    padding: 0.25rem 0.65rem;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 800;
  }

  .rrl-badge.pending {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
  }

  .rrl-badge.inq {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
  }

  .rrl-badge.offer {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
  }

  .table-prop-cell {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .tp-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
  }

  .tp-price {
    font-weight: 800;
    color: #ffffff;
  }

  .tp-views {
    font-size: 0.85rem;
    color: #94a3b8;
  }

  .status-badge.published {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22c55e;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
  }

  /* Animations */
  .chart-animated-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawLineChart 2s ease-out forwards;
  }

  @keyframes drawLineChart {
    to {
      stroke-dashoffset: 0;
    }
  }

  @media (max-width: 992px) {
    .nic-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .luxury-map-canvas {
      height: 500px;
    }

    .map-floating-card {
      width: calc(100% - 3.6rem);
    }
  }

  @media (max-width: 600px) {
    .nic-grid {
      grid-template-columns: 1fr;
    }

    .map-floating-card {
      flex-direction: column;
      align-items: stretch;
    }

    .mfc-img-wrap {
      width: 100%;
      height: 130px;
    }
  }

  /* ============================================================
   🌐 GLOBAL LANGUAGE SWITCHER & LTR STYLING (TOP 10 LANGUAGES)
   ============================================================ */
  .lang-switcher-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .lang-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 0.45rem 0.85rem;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .lang-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }

  .lang-flag {
    font-size: 1.15rem;
    line-height: 1;
  }

  .lang-code-text {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.5px;
  }

  .lang-arrow {
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.25s ease;
  }

  .lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    width: 290px;
    background: linear-gradient(160deg, rgba(17, 24, 39, 0.98), rgba(11, 15, 25, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 0.8rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(220, 38, 38, 0.15);
    backdrop-filter: blur(24px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .lang-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .lang-menu-header {
    font-size: 0.8rem;
    font-weight: 800;
    color: #94a3b8;
    padding: 0.4rem 0.6rem 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .lang-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 0.2rem;
    scrollbar-width: thin;
  }

  .lang-opt-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    color: #e2e8f0;
    font-family: inherit;
    cursor: pointer;
    text-align: right;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  html[dir="ltr"] .lang-opt-btn {
    text-align: left;
  }

  .lang-opt-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(-3px);
    color: #ffffff;
  }

  html[dir="ltr"] .lang-opt-btn:hover {
    transform: translateX(3px);
  }

  .lang-opt-btn.active {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.5);
    color: #ffffff;
  }

  .l-flag {
    font-size: 1.25rem;
  }

  .l-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    line-height: 1.2;
  }

  .l-name {
    font-size: 0.9rem;
    font-weight: 800;
  }

  .l-sub {
    font-size: 0.72rem;
    color: #94a3b8;
  }

  .l-check {
    font-size: 0.85rem;
    color: #22c55e;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
  }

  .lang-opt-btn.active .l-check {
    opacity: 1;
    transform: scale(1);
  }

  /* Luxury Circular Ripple Transition */
  .lang-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, rgba(220, 38, 38, 0.25) 0%, rgba(10, 15, 25, 0.85) 100%);
    backdrop-filter: blur(12px);
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .lang-transition-overlay.active {
    opacity: 1;
  }

  /* LTR Mode Fine Tuning */
  html[dir="ltr"] {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  html[dir="ltr"] .nav-links {
    margin-right: 0;
    margin-left: 2rem;
  }

  html[dir="ltr"] .lang-dropdown-menu {
    left: auto;
    right: 0;
  }

  /* ==========================================================================
   LUXURY MOBILE & TABLET DRAWER & BOTTOM APP NAVIGATION BAR (VIP EDITION)
   ========================================================================== */

  /* Drawer is available at ALL screen sizes - always accessible via hamburger */
  .mobile-drawer-backdrop {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    justify-content: flex-end;
  }

  .mobile-drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-bottom-navbar {
    display: none !important;
  }

  /* Drawer card - Centered Royal Modal */
  .mobile-drawer-card {
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: 86vh;
    margin: auto;
    background: linear-gradient(165deg, #111524 0%, #0c0f1b 50%, #070912 100%);
    border: 1.5px solid rgba(220, 38, 38, 0.4);
    border-radius: 28px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(220, 38, 38, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92) translateY(24px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    direction: rtl;
  }

  html[dir="ltr"] .mobile-drawer-card {
    direction: ltr;
    transform: scale(0.92) translateY(24px);
  }

  .mobile-drawer-backdrop.active .mobile-drawer-card {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  @media (max-width: 1240px) {
    .mobile-drawer-backdrop {
      display: flex !important;
      position: fixed !important;
      inset: 0 !important;
      background: rgba(3, 6, 15, 0.82) !important;
      backdrop-filter: blur(24px) !important;
      -webkit-backdrop-filter: blur(24px) !important;
      z-index: 99999999 !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
      justify-content: center !important;
      align-items: center !important;
      padding: 1.2rem !important;
    }

    .mobile-drawer-backdrop.active {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    .mobile-drawer-card {
      width: 100% !important;
      max-width: 520px !important;
      height: auto !important;
      max-height: 86vh !important;
      margin: auto !important;
      background: linear-gradient(165deg, #111524 0%, #0c0f1b 50%, #070912 100%) !important;
      border: 1.5px solid rgba(220, 38, 38, 0.4) !important;
      border-radius: 28px !important;
      box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(220, 38, 38, 0.2) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      transform: scale(0.92) translateY(24px) !important;
      opacity: 0 !important;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
      direction: rtl !important;
    }

    html[dir="ltr"] .mobile-drawer-card {
      direction: ltr !important;
      transform: scale(0.92) translateY(24px) !important;
    }

    .mobile-drawer-backdrop.active .mobile-drawer-card {
      transform: scale(1) translateY(0) !important;
      opacity: 1 !important;
    }
  }

  @media (max-width: 768px) {

    /* --- MOBILE BOTTOM APP BAR --- */
    .mobile-bottom-navbar {
      display: flex !important;
      position: fixed !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 68px !important;
      background: rgba(15, 23, 42, 0.94) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5) !important;
      z-index: 9999 !important;
      justify-content: space-around !important;
      align-items: center !important;
      padding: 0 0.5rem !important;
      padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    html[data-theme="light"] .mobile-bottom-navbar,
    body.light-theme .mobile-bottom-navbar {
      background: rgba(255, 255, 255, 0.94) !important;
      border-top-color: rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    .mbn-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-decoration: none !important;
      color: #94a3b8 !important;
      font-size: 0.72rem !important;
      font-weight: 700 !important;
      transition: all 0.25s ease !important;
      padding: 0.4rem 0.6rem !important;
      border-radius: 12px !important;
      flex: 1 !important;
      max-width: 75px !important;
    }

    .mbn-item:hover,
    .mbn-item.active {
      color: #ef4444 !important;
    }

    .mbn-icon {
      font-size: 1.25rem !important;
      margin-bottom: 2px !important;
      transition: transform 0.25s ease !important;
    }

    .mbn-item:active .mbn-icon {
      transform: scale(1.2) !important;
    }

    .mbn-center-fab {
      position: relative !important;
      top: -14px !important;
      color: #ffffff !important;
    }

    .mbn-fab-circle {
      width: 48px !important;
      height: 48px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
      border: 3px solid #0f172a !important;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    html[data-theme="light"] .mbn-fab-circle,
    body.light-theme .mbn-fab-circle {
      border-color: #ffffff !important;
    }

    .mbn-fab-icon {
      font-size: 1.3rem !important;
      color: #ffffff !important;
    }

    .mbn-center-fab:hover .mbn-fab-circle,
    .mbn-center-fab:active .mbn-fab-circle {
      transform: scale(1.1) rotate(90deg) !important;
    }

    body {
      padding-bottom: 75px !important;
    }
  }

  .mdc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 1.2rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 1.2rem !important;
  }

  .mdc-close-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f1f5f9 !important;
    font-size: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
    transition: all 0.25s ease !important;
  }

  .mdc-close-btn:hover {
    background: rgba(220, 38, 38, 0.25) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: rotate(90deg) scale(1.08) !important;
  }

  .mdc-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1.4rem !important;
  }

  .mdc-action-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
  }

  .mdc-action-card:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    transform: translateY(-2px) !important;
  }

  .mdc-card-icon {
    font-size: 1.4rem !important;
  }

  .mdc-card-info strong {
    display: block !important;
    font-size: 0.82rem !important;
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .mdc-card-info span {
    font-size: 0.68rem !important;
    color: #94a3b8 !important;
  }

  .mdc-nav-section {
    flex: 1 !important;
    margin-bottom: 1.5rem !important;
  }

  .mdc-section-label {
    display: block !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 0.8rem !important;
  }

  .mdc-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  .mdc-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.75rem 1rem !important;
    border-radius: 14px !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
  }

  .mdc-link:hover,
  .mdc-link.active {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    color: #ffffff !important;
  }

  .mdc-link-icon {
    font-size: 1.1rem !important;
  }

  .mdc-link-text {
    flex: 1 !important;
  }

  .mdc-link-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 50px !important;
    background: rgba(220, 38, 38, 0.2) !important;
    color: #fca5a5 !important;
    font-weight: 800 !important;
  }

  .mdc-footer-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mdc-login-btn {
    width: 100% !important;
    padding: 0.85rem !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .mdc-contact-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }

  .mdc-contact-btn {
    padding: 0.7rem !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    border: 1px solid transparent !important;
  }

  .mdc-wa {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
  }

  .mdc-call {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }
}

/* ============================================================
   👑 ULTRA-LUXURY VIP REQUEST PROPERTY MODAL & ROYAL CONFIRMATION (AQAR STYLE)
   ============================================================ */

.luxury-vip-request-modal {
  max-width: 820px !important;
  width: 95% !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  background: linear-gradient(170deg, #111422 0%, #0a0b12 50%, #06070a 100%) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.35) !important;
  border-radius: 28px !important;
  padding: 0 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(220, 38, 38, 0.2) !important;
  direction: rtl !important;
  position: relative !important;
}

html[data-theme="light"] .luxury-vip-request-modal,
body.light-theme .luxury-vip-request-modal {
  background: linear-gradient(170deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18) !important;
}

/* Modal Top Bar */
.vrm-modal-header {
  padding: 1.6rem 2rem !important;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  backdrop-filter: blur(16px) !important;
}

html[data-theme="light"] .vrm-modal-header,
body.light-theme .vrm-modal-header {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, #f1f5f9 100%) !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.vrm-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.vrm-crown-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
  flex-shrink: 0 !important;
}

.vrm-top-badge {
  display: inline-block !important;
  background: rgba(220, 38, 38, 0.2) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 50px !important;
  margin-bottom: 0.3rem !important;
}

html[data-theme="light"] .vrm-top-badge,
body.light-theme .vrm-top-badge {
  color: #b91c1c !important;
}

.vrm-title {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .vrm-title,
body.light-theme .vrm-title {
  color: #0f172a !important;
}

.vrm-subtitle {
  margin: 0.25rem 0 0 0 !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}

.vrm-close-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.vrm-close-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* Form Container */
.vrm-form-body {
  padding: 1.8rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

/* Section Box Card */
.vrm-section-box {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 1.4rem !important;
  transition: all 0.3s ease !important;
}

.vrm-section-box:hover {
  border-color: rgba(220, 38, 38, 0.3) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

html[data-theme="light"] .vrm-section-box,
body.light-theme .vrm-section-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.vrm-sec-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  margin-bottom: 1.1rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="light"] .vrm-sec-title,
body.light-theme .vrm-sec-title {
  border-bottom-color: #f1f5f9 !important;
}

.vrm-step-num {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #dc2626 !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vrm-sec-title h4 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] .vrm-sec-title h4,
body.light-theme .vrm-sec-title h4 {
  color: #0f172a !important;
}

/* Purpose Tabs */
.vrm-purpose-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.6rem !important;
  background: rgba(0, 0, 0, 0.25) !important;
  padding: 0.35rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .vrm-purpose-tabs,
body.light-theme .vrm-purpose-tabs {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.vrm-ptab {
  padding: 0.75rem !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vrm-ptab.active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4) !important;
  transform: scale(1.02) !important;
}

/* Form Inputs Grid */
.vrm-inputs-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

@media (max-width: 600px) {
  .vrm-inputs-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

.vrm-label {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  margin-bottom: 0.4rem !important;
}

html[data-theme="light"] .vrm-label,
body.light-theme .vrm-label {
  color: #475569 !important;
}

.vrm-select,
.vrm-input {
  width: 100% !important;
  padding: 0.78rem 1rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  outline: none !important;
  transition: all 0.25s ease !important;
}

.vrm-select option {
  background: #0f172a !important;
  color: #ffffff !important;
}

html[data-theme="light"] .vrm-select,
html[data-theme="light"] .vrm-input,
body.light-theme .vrm-select,
body.light-theme .vrm-input {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .vrm-select option,
body.light-theme .vrm-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

.vrm-select:focus,
.vrm-input:focus {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

.vrm-input-addon-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.vrm-input-addon-wrap .vrm-input {
  padding-left: 3rem !important;
}

.vrm-addon {
  position: absolute !important;
  left: 0.9rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ef4444 !important;
  pointer-events: none !important;
}

/* Payment Pills */
.vrm-payment-pills {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.vrm-pill-opt {
  padding: 0.55rem 1rem !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

html[data-theme="light"] .vrm-pill-opt,
body.light-theme .vrm-pill-opt {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.vrm-pill-opt:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #fff !important;
}

.vrm-pill-opt.active {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
}

/* Counter Group (Bedrooms / Baths) */
.vrm-counter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.vrm-cg-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.vrm-cg-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

html[data-theme="light"] .vrm-cg-label,
body.light-theme .vrm-cg-label {
  color: #475569 !important;
}

.vrm-cg-val {
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
  background: rgba(220, 38, 38, 0.15) !important;
  padding: 0.15rem 0.6rem !important;
  border-radius: 50px !important;
}

.vrm-num-pills {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0.45rem !important;
}

@media (max-width: 500px) {
  .vrm-num-pills {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.vrm-np {
  padding: 0.65rem 0.2rem !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #e2e8f0 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .vrm-np,
body.light-theme .vrm-np {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}

.vrm-np:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: #dc2626 !important;
  transform: translateY(-2px) !important;
}

.vrm-np.active {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4) !important;
  transform: scale(1.04) !important;
}

/* Features Grid Checkboxes (10 Features) */
.vrm-features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.65rem !important;
}

@media (max-width: 550px) {
  .vrm-features-grid {
    grid-template-columns: 1fr !important;
  }
}

.vrm-feat-card {
  position: relative !important;
  cursor: pointer !important;
  display: block !important;
}

.vrm-feat-card input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.vrm-fc-box {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.75rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease !important;
}

html[data-theme="light"] .vrm-fc-box,
body.light-theme .vrm-fc-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.vrm-feat-card:hover .vrm-fc-box {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  transform: translateX(-3px) !important;
}

.vrm-feat-card input:checked+.vrm-fc-box {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
}

.vrm-fc-icon {
  font-size: 1.15rem !important;
}

.vrm-fc-text {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
}

html[data-theme="light"] .vrm-fc-text,
body.light-theme .vrm-fc-text {
  color: #1e293b !important;
}

.vrm-feat-card input:checked+.vrm-fc-box .vrm-fc-text {
  color: #ffffff !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .vrm-feat-card input:checked+.vrm-fc-box .vrm-fc-text {
  color: #dc2626 !important;
}

/* Mini Map Preview Box */
.vrm-mini-map-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #090c14 !important;
}

.vrm-mm-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.6rem 0.9rem !important;
  background: rgba(15, 23, 42, 0.8) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.vrm-mm-city-tag {
  color: #34d399 !important;
  font-weight: 800 !important;
}

.vrm-mm-canvas {
  height: 120px !important;
  position: relative !important;
  background:
    radial-gradient(circle at center, rgba(34, 197, 94, 0.15) 0%, transparent 70%),
    linear-gradient(135deg, #091220 0%, #060b14 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  overflow: hidden !important;
}

.vrm-mm-radar-ring {
  position: absolute !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  border: 2px dashed rgba(34, 197, 94, 0.4) !important;
  animation: vrmRadarSpin 6s linear infinite !important;
}

@keyframes vrmRadarSpin {
  from {
    transform: rotate(0deg) scale(0.9);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  to {
    transform: rotate(360deg) scale(0.9);
  }
}

.vrm-mm-pin {
  font-size: 1.8rem !important;
  animation: ebsBounce 2s infinite !important;
  z-index: 2 !important;
}

.vrm-mm-desc {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  margin-top: 0.4rem !important;
  z-index: 2 !important;
  text-align: center !important;
}

/* Toggles */
.vrm-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.8rem 1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}

html[data-theme="light"] .vrm-toggle-row,
body.light-theme .vrm-toggle-row {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.vrm-tr-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

.vrm-tr-text strong {
  font-size: 0.85rem !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] .vrm-tr-text strong,
body.light-theme .vrm-tr-text strong {
  color: #0f172a !important;
}

.vrm-tr-text small {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
}

.vrm-switch-checkbox {
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.vrm-switch-checkbox::before {
  content: '' !important;
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

.vrm-switch-checkbox:checked {
  background: #10b981 !important;
}

.vrm-switch-checkbox:checked::before {
  transform: translateX(-20px) !important;
}

/* Submit Bar */
.vrm-submit-bar {
  display: flex !important;
  gap: 0.8rem !important;
  align-items: center !important;
}

.vrm-main-submit-btn {
  flex-grow: 1 !important;
  padding: 1.1rem 1.8rem !important;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vrm-main-submit-btn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 15px 40px rgba(220, 38, 38, 0.6) !important;
}

/* ============================================================
   🎉 ROYAL CONFIRMATION DIALOG (رسالة النجاح الملكية الفخمة)
   ============================================================ */

.royal-success-card {
  max-width: 580px !important;
  width: 92% !important;
  background: linear-gradient(165deg, #0d121f 0%, #150909 50%, #080a10 100%) !important;
  border: 2px solid rgba(220, 38, 38, 0.5) !important;
  border-radius: 30px !important;
  padding: 2.6rem 2.2rem !important;
  text-align: center !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(220, 38, 38, 0.3) !important;
  direction: rtl !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] .royal-success-card,
body.light-theme .royal-success-card {
  background: linear-gradient(165deg, #ffffff 0%, #fff1f2 60%, #f8fafc 100%) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25) !important;
}

.rsc-glow-aura {
  position: absolute !important;
  top: -80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 250px !important;
  height: 250px !important;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.3) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.rsc-emblem-wrap {
  position: relative !important;
  width: 86px !important;
  height: 86px !important;
  margin: 0 auto 1.4rem auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rsc-emblem-outer-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 2px dashed #ef4444 !important;
  animation: vrmRadarSpin 8s linear infinite !important;
}

.rsc-emblem-icon {
  width: 68px !important;
  height: 68px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  color: #fff !important;
  font-size: 2.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.6) !important;
  z-index: 2 !important;
}

.rsc-check-badge {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2.5px solid #0f172a !important;
  z-index: 3 !important;
}

.rsc-badge-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(220, 38, 38, 0.15) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.8rem !important;
}

.rsc-dot-live {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 10px #22c55e !important;
  animation: hudPulse 1.5s infinite !important;
}

.rsc-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 1.2rem 0 !important;
  line-height: 1.35 !important;
}

html[data-theme="light"] .rsc-title,
body.light-theme .rsc-title {
  color: #0f172a !important;
}

/* Tracking Code Box */
.rsc-tracking-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px dashed rgba(220, 38, 38, 0.45) !important;
  border-radius: 16px !important;
  padding: 0.85rem 1.2rem !important;
  margin-bottom: 1.4rem !important;
}

html[data-theme="light"] .rsc-tracking-box,
body.light-theme .rsc-tracking-box {
  background: #ffffff !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.08) !important;
}

.rsc-tb-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.15rem !important;
}

.rsc-tb-info small {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.rsc-tb-info strong {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 1px !important;
}

.rsc-copy-btn {
  padding: 0.45rem 0.9rem !important;
  border-radius: 10px !important;
  background: rgba(220, 38, 38, 0.2) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.rsc-copy-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Notice Card */
.rsc-notice-card {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 1.2rem !important;
  text-align: right !important;
  margin-bottom: 1.2rem !important;
}

html[data-theme="light"] .rsc-notice-card,
body.light-theme .rsc-notice-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.rsc-nc-head {
  display: flex !important;
  gap: 0.8rem !important;
  align-items: flex-start !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.rsc-nc-icon {
  font-size: 1.6rem !important;
  flex-shrink: 0 !important;
}

.rsc-nc-head strong {
  display: block !important;
  font-size: 0.95rem !important;
  color: #fbbf24 !important;
  margin-bottom: 0.35rem !important;
}

.rsc-nc-head p {
  margin: 0 !important;
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
}

html[data-theme="light"] .rsc-nc-head p,
body.light-theme .rsc-nc-head p {
  color: #475569 !important;
}

/* Summary Grid */
.rsc-summary-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
}

.rsc-sum-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
}

html[data-theme="light"] .rsc-sum-item,
body.light-theme .rsc-sum-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.rsc-sum-item small {
  font-size: 0.7rem !important;
  color: #94a3b8 !important;
}

.rsc-sum-item strong {
  font-size: 0.85rem !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] .rsc-sum-item strong,
body.light-theme .rsc-sum-item strong {
  color: #0f172a !important;
}

.rsc-contact-promise {
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  margin: 0 0 1.4rem 0 !important;
  line-height: 1.5 !important;
}

/* Action Buttons */
.rsc-action-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

.rsc-btn-wa {
  padding: 0.95rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.25s ease !important;
}

.rsc-btn-wa:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.55) !important;
}

.rsc-btn-map {
  padding: 0.85rem !important;
  border-radius: 14px !important;
  background: rgba(220, 38, 38, 0.15) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.rsc-btn-map:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.rsc-btn-close {
  padding: 0.75rem !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.rsc-btn-close:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   👑 ULTRA ROYAL VIP PROPERTY REQUEST PAGE ENHANCEMENTS
   ========================================================================== */

/* Living Rooms & Segmented Choice Cards */
.vrm-choice-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  outline: none !important;
}

.vrm-choice-card:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.vrm-choice-card.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(29, 78, 216, 0.15) 100%) !important;
  border: 1.5px solid #3b82f6 !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35), 0 0 15px rgba(59, 130, 246, 0.2) !important;
  transform: scale(1.02) !important;
}

/* Preset Budget Buttons */
.vrm-preset-btn {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #fef08a !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vrm-preset-btn:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  transform: translateY(-2px) !important;
}

.vrm-preset-btn.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}

/* City Selection Chips */
.vrm-city-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 0.65rem 1.15rem !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vrm-city-chip:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.vrm-city-chip.active {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border-color: #818cf8 !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
  transform: scale(1.03) !important;
}

/* Urgency Tier Buttons */
.vrm-urgency-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  font-family: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 0.5rem !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.25rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.vrm-urgency-btn:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #ffffff !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}

.vrm-urgency-btn.active {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(185, 28, 28, 0.2) 100%) !important;
  border: 1.5px solid #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
  transform: scale(1.02) !important;
}

/* Mini Badges for Shortcuts */
.vrm-mini-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.vrm-mini-badge:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.vrm-mini-badge.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  font-weight: 800 !important;
}

/* Ultra Royal Submit Button */
.vrm-ultra-submit-btn {
  width: 100% !important;
  padding: 1.6rem 2.2rem !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 45%, #991b1b 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.4) !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px rgba(220, 38, 38, 0.55), 0 0 40px rgba(245, 158, 11, 0.25) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vrm-ultra-submit-btn:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 30px 80px rgba(220, 38, 38, 0.75), 0 0 60px rgba(245, 158, 11, 0.45) !important;
  border-color: #fbbf24 !important;
}

.vrm-btn-glow {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%) !important;
  pointer-events: none !important;
}





/* ==========================================================================
   ✨ CRISP MULTI-COLOR THEMED CARDS (NO BLUR, SHARP & VIBRANT)
   ========================================================================== */

/* ─── 1. CATEGORY CARDS (5 DISTINCT CRISP COLORS) ─── */
.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.25rem !important;
}

@media (max-width: 992px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.category-card {
  position: relative !important;
  background: #111422 !important;
  border-radius: 22px !important;
  padding: 2.2rem 1.2rem 1.8rem !important;
  text-align: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.category-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  opacity: 0.9 !important;
  transition: height 0.3s ease !important;
}

.category-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 1.2rem auto !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.3rem !important;
  animation: floatingBob 3.5s ease-in-out infinite !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s ease !important;
  backdrop-filter: none !important;
}

.category-name {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.55rem 0 !important;
}

.category-count {
  display: inline-block !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

/* Card 1: فلل - Emerald Green 🟢 */
.category-card:nth-child(1) {
  border: 2px solid rgba(16, 185, 129, 0.35) !important;
}

.category-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
}

.category-card:nth-child(1) .category-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid #10b981 !important;
  animation-delay: 0s !important;
}

.category-card:nth-child(1) .category-count {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
}

.category-card:nth-child(1):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #10b981 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(16, 185, 129, 0.4) !important;
}

.category-card:nth-child(1):hover .category-icon {
  transform: scale(1.25) rotate(6deg) !important;
  background: rgba(16, 185, 129, 0.3) !important;
}

.category-card:nth-child(1):hover .category-count {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* Card 2: شقق - Sapphire Blue 🔵 */
.category-card:nth-child(2) {
  border: 2px solid rgba(59, 130, 246, 0.35) !important;
}

.category-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, #3b82f6, transparent) !important;
}

.category-card:nth-child(2) .category-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1.5px solid #3b82f6 !important;
  animation-delay: 0.5s !important;
}

.category-card:nth-child(2) .category-count {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  color: #93c5fd !important;
}

.category-card:nth-child(2):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(59, 130, 246, 0.4) !important;
}

.category-card:nth-child(2):hover .category-icon {
  transform: scale(1.25) rotate(6deg) !important;
  background: rgba(59, 130, 246, 0.3) !important;
}

.category-card:nth-child(2):hover .category-count {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Card 3: أراضي - Amber Gold 🟡 */
.category-card:nth-child(3) {
  border: 2px solid rgba(245, 158, 11, 0.35) !important;
}

.category-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
}

.category-card:nth-child(3) .category-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #f59e0b !important;
  animation-delay: 1s !important;
}

.category-card:nth-child(3) .category-count {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fde68a !important;
}

.category-card:nth-child(3):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(245, 158, 11, 0.4) !important;
}

.category-card:nth-child(3):hover .category-icon {
  transform: scale(1.25) rotate(6deg) !important;
  background: rgba(245, 158, 11, 0.3) !important;
}

.category-card:nth-child(3):hover .category-count {
  background: #f59e0b !important;
  color: #000000 !important;
}

/* Card 4: مكاتب - Amethyst Purple 🟣 */
.category-card:nth-child(4) {
  border: 2px solid rgba(168, 85, 247, 0.35) !important;
}

.category-card:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, #a855f7, transparent) !important;
}

.category-card:nth-child(4) .category-icon {
  background: rgba(168, 85, 247, 0.15) !important;
  border: 1.5px solid #a855f7 !important;
  animation-delay: 1.5s !important;
}

.category-card:nth-child(4) .category-count {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #d8b4fe !important;
}

.category-card:nth-child(4):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(168, 85, 247, 0.4) !important;
}

.category-card:nth-child(4):hover .category-icon {
  transform: scale(1.25) rotate(6deg) !important;
  background: rgba(168, 85, 247, 0.3) !important;
}

.category-card:nth-child(4):hover .category-count {
  background: #a855f7 !important;
  color: #ffffff !important;
}

/* Card 5: تجاري - Crimson Ruby 🔴 */
.category-card:nth-child(5) {
  border: 2px solid rgba(239, 68, 68, 0.35) !important;
}

.category-card:nth-child(5)::before {
  background: linear-gradient(90deg, transparent, #ef4444, transparent) !important;
}

.category-card:nth-child(5) .category-icon {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid #ef4444 !important;
  animation-delay: 2s !important;
}

.category-card:nth-child(5) .category-count {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}

.category-card:nth-child(5):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.4) !important;
}

.category-card:nth-child(5):hover .category-icon {
  transform: scale(1.25) rotate(6deg) !important;
  background: rgba(239, 68, 68, 0.3) !important;
}

.category-card:nth-child(5):hover .category-count {
  background: #ef4444 !important;
  color: #ffffff !important;
}


/* ─── 2. WHY RISALE CARDS (4 DISTINCT CRISP COLORS) ─── */
.why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.4rem !important;
}

@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 580px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
}

.why-card {
  position: relative !important;
  background: #111422 !important;
  border-radius: 24px !important;
  padding: 2.4rem 1.6rem !important;
  text-align: center !important;
  overflow: hidden !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
}

.why-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  opacity: 0.9 !important;
}

.why-icon {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 1.4rem auto !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.4rem !important;
  animation: floatingBob 3.6s ease-in-out infinite !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.35s ease !important;
  backdrop-filter: none !important;
}

.why-card h3 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.75rem 0 !important;
}

.why-card p {
  color: #cbd5e1 !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* Why Card 1: أمان وموثوقية - Emerald Green 🟢 */
.why-card:nth-child(1) {
  border: 2px solid rgba(34, 197, 94, 0.35) !important;
}

.why-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, #22c55e, transparent) !important;
}

.why-card:nth-child(1) .why-icon {
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1.5px solid #22c55e !important;
  animation-delay: 0s !important;
}

.why-card:nth-child(1):hover {
  transform: translateY(-10px) scale(1.03) !important;
  border-color: #22c55e !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(34, 197, 94, 0.4) !important;
}

.why-card:nth-child(1):hover .why-icon {
  transform: scale(1.25) rotate(-6deg) !important;
  background: rgba(34, 197, 94, 0.3) !important;
}

/* Why Card 2: أفضل الأسعار - Cyan / Diamond 🔵 */
.why-card:nth-child(2) {
  border: 2px solid rgba(6, 182, 212, 0.35) !important;
}

.why-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, #06b6d4, transparent) !important;
}

.why-card:nth-child(2) .why-icon {
  background: rgba(6, 182, 212, 0.15) !important;
  border: 1.5px solid #06b6d4 !important;
  animation-delay: 0.6s !important;
}

.why-card:nth-child(2):hover {
  transform: translateY(-10px) scale(1.03) !important;
  border-color: #06b6d4 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(6, 182, 212, 0.4) !important;
}

.why-card:nth-child(2):hover .why-icon {
  transform: scale(1.25) rotate(-6deg) !important;
  background: rgba(6, 182, 212, 0.3) !important;
}

/* Why Card 3: وكلاء محترفون - Amber Gold 🟡 */
.why-card:nth-child(3) {
  border: 2px solid rgba(245, 158, 11, 0.35) !important;
}

.why-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
}

.why-card:nth-child(3) .why-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #f59e0b !important;
  animation-delay: 1.2s !important;
}

.why-card:nth-child(3):hover {
  transform: translateY(-10px) scale(1.03) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(245, 158, 11, 0.4) !important;
}

.why-card:nth-child(3):hover .why-icon {
  transform: scale(1.25) rotate(-6deg) !important;
  background: rgba(245, 158, 11, 0.3) !important;
}

/* Why Card 4: تحليل السوق - Crimson Ruby 🔴 */
.why-card:nth-child(4) {
  border: 2px solid rgba(239, 68, 68, 0.35) !important;
}

.why-card:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, #ef4444, transparent) !important;
}

.why-card:nth-child(4) .why-icon {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid #ef4444 !important;
  animation-delay: 1.8s !important;
}

.why-card:nth-child(4):hover {
  transform: translateY(-10px) scale(1.03) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75), 0 0 30px rgba(239, 68, 68, 0.4) !important;
}

.why-card:nth-child(4):hover .why-icon {
  transform: scale(1.25) rotate(-6deg) !important;
  background: rgba(239, 68, 68, 0.3) !important;
}

/* ─── 3. SHARP LEVITATION KEYFRAME ─── */
@keyframes floatingBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

/* ─── 4. WHY RISALE ANIMATED HEADER & SPACED QUESTION MARK ─── */
.why-header-box {
  margin-bottom: 2.8rem !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.why-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(220, 38, 38, 0.15) !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  color: #fca5a5 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 1.1rem !important;
  border-radius: 50px !important;
  margin-bottom: 0.8rem !important;
  animation: hudPulse 2.5s infinite !important;
}

.why-animated-title {
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.why-brand-glow {
  color: #ef4444 !important;
  background: linear-gradient(135deg, #ffffff 0%, #fca5a5 35%, #ef4444 75%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 950 !important;
  letter-spacing: 0.8px !important;
  filter: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6)) !important;
  display: inline-block !important;
  animation: brandBreath 3.5s ease-in-out infinite !important;
}

/* Properly Spaced & Animated Question Mark */
.why-title-qmark {
  color: #fbbf24 !important;
  font-size: 1.15em !important;
  font-weight: 900 !important;
  margin-inline-start: 0.65rem !important;
  /* Proper breathing room away from the text */
  margin-right: 0.65rem !important;
  display: inline-block !important;
  animation: qmarkBounce 2.5s ease-in-out infinite !important;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.65)) !important;
}

.why-title-underline {
  width: 90px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, transparent, #ef4444, #fbbf24, #ef4444, transparent) !important;
  background-size: 200% 100% !important;
  animation: vrmBeamSlide 3s linear infinite !important;
  margin: 0.9rem auto 0.7rem auto !important;
}

/* Light Theme High Contrast for Why RISALE Header */
html[data-theme="light"] .why-badge-pill,
body.light-theme .why-badge-pill {
  background: #fee2e2 !important;
  border: 1.5px solid #f87171 !important;
  color: #991b1b !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12) !important;
}

html[data-theme="light"] .why-animated-title,
body.light-theme .why-animated-title,
html[data-theme="light"] .why-animated-title span,
body.light-theme .why-animated-title span {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .why-brand-glow,
body.light-theme .why-brand-glow {
  color: #dc2626 !important;
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #ef4444 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 8px rgba(220, 38, 38, 0.25)) !important;
}

html[data-theme="light"] .why-title-qmark,
body.light-theme .why-title-qmark {
  color: #d97706 !important;
  filter: drop-shadow(0 2px 6px rgba(217, 119, 6, 0.35)) !important;
}

html[data-theme="light"] .why-title-underline,
body.light-theme .why-title-underline {
  background: linear-gradient(90deg, transparent, #dc2626, #d97706, #dc2626, transparent) !important;
}

@keyframes qmarkBounce {

  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) scale(1.18) rotate(-8deg);
  }
}

@keyframes brandBreath {

  0%,
  100% {
    filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 30px rgba(220, 38, 38, 0.9));
  }
}



/* ==========================================================================
   🚨 UNIVERSAL FLAWLESS SCROLLING FOR ALL MODALS & REVIEW MODAL
   ========================================================================== */

.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.88) !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 2.5rem 1rem !important;
  display: none;
  align-items: flex-start !important;
  justify-content: center !important;
}

.modal-overlay.open,
.modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.modal-card {
  margin: auto !important;
  max-height: calc(100vh - 5rem) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, 0.25) transparent !important;
}

.modal-card::-webkit-scrollbar {
  width: 6px !important;
}

.modal-card::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 10px !important;
}

.modal-card::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.25) !important;
  border-radius: 10px !important;
}

.modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.45) !important;
}

.review-modal-card {
  max-width: 560px !important;
  width: 100% !important;
  margin: auto !important;
  max-height: calc(100vh - 4rem) !important;
  overflow-y: auto !important;
}


/* ==========================================================================
   💎 ROYAL EMERALD GREEN THEME FOR EBS DIGITAL SOFTWARE MODAL
   ========================================================================== */

#ebsContactModal .ebs-modal-card {
  background: linear-gradient(160deg, #062b1a 0%, #031c11 50%, #010d08 100%) !important;
  border: 2px solid rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 70px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#ebsContactModal .ebs-modal-icon-wrap {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, rgba(5, 150, 105, 0.15) 70%) !important;
  border: 1.8px solid rgba(16, 185, 129, 0.65) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.35) !important;
}

#ebsContactModal .ebs-modal-title {
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.4) !important;
}

#ebsContactModal .ebs-modal-subtitle {
  color: #a7f3d0 !important;
}

#ebsContactModal .ebs-contact-btn.ebs-btn-whatsapp {
  background: rgba(34, 197, 94, 0.14) !important;
  border: 1.2px solid rgba(34, 197, 94, 0.35) !important;
}

#ebsContactModal .ebs-contact-btn.ebs-btn-phone {
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1.2px solid rgba(16, 185, 129, 0.35) !important;
}

#ebsContactModal .ebs-contact-btn.ebs-btn-email {
  background: rgba(5, 150, 105, 0.14) !important;
  border: 1.2px solid rgba(5, 150, 105, 0.35) !important;
}

#ebsContactModal .ebs-action-copy-btn {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #a7f3d0 !important;
}

#ebsContactModal .ebs-action-copy-btn:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   🌐 CRYSTAL CLEAR HIGH-CONTRAST LANGUAGE SWITCHER BUTTON
   ========================================================================== */

.lang-nav-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.45rem 0.95rem !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  border-radius: 50px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.lang-nav-pill-btn .lnp-flag {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

.lang-nav-pill-btn .lnp-label {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px !important;
  display: inline-block !important;
}

.lang-nav-pill-btn .lnp-arrow {
  color: #fca5a5 !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  transition: transform 0.25s ease !important;
}

.lang-nav-pill-btn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
}

.lang-nav-pill-btn:hover .lnp-label,
.lang-nav-pill-btn:hover .lnp-arrow {
  color: #ffffff !important;
}

/* Light Theme Contrast */
html[data-theme="light"] .lang-nav-pill-btn,
body.light-theme .lang-nav-pill-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(220, 38, 38, 0.5) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.15) !important;
}

html[data-theme="light"] .lang-nav-pill-btn .lnp-label,
body.light-theme .lang-nav-pill-btn .lnp-label {
  color: #0f172a !important;
  /* Deep dark text on light background */
  font-weight: 900 !important;
}

html[data-theme="light"] .lang-nav-pill-btn .lnp-arrow,
body.light-theme .lang-nav-pill-btn .lnp-arrow {
  color: #dc2626 !important;
}

html[data-theme="light"] .lang-nav-pill-btn:hover,
body.light-theme .lang-nav-pill-btn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

html[data-theme="light"] .lang-nav-pill-btn:hover .lnp-label,
body.light-theme .lang-nav-pill-btn:hover .lnp-label,
html[data-theme="light"] .lang-nav-pill-btn:hover .lnp-arrow,
body.light-theme .lang-nav-pill-btn:hover .lnp-arrow {
  color: #ffffff !important;
}


/* ==========================================================================
   🎯 HIGH-CONTRAST ULTRA-READABLE CATEGORY COUNT BADGES (DARK & LIGHT MODES)
   ========================================================================== */

.category-card .category-count {
  display: inline-block !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  padding: 0.35rem 0.95rem !important;
  border-radius: 50px !important;
  letter-spacing: 0.3px !important;
}

/* 🟢 Card 1: فلل */
.category-card:nth-child(1) .category-count {
  background: rgba(16, 185, 129, 0.22) !important;
  border: 1.5px solid #10b981 !important;
  color: #34d399 !important;
}

/* 🔵 Card 2: شقق */
.category-card:nth-child(2) .category-count {
  background: rgba(59, 130, 246, 0.22) !important;
  border: 1.5px solid #3b82f6 !important;
  color: #60a5fa !important;
}

/* 🟡 Card 3: أراضي */
.category-card:nth-child(3) .category-count {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1.5px solid #f59e0b !important;
  color: #fbbf24 !important;
}

/* 🟣 Card 4: مكاتب */
.category-card:nth-child(4) .category-count {
  background: rgba(168, 85, 247, 0.22) !important;
  border: 1.5px solid #a855f7 !important;
  color: #c084fc !important;
}

/* 🔴 Card 5: تجاري */
.category-card:nth-child(5) .category-count {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1.5px solid #ef4444 !important;
  color: #f87171 !important;
}

/* ─── LIGHT MODE HIGH CONTRAST (SOLID VIBRANT PILLS WITH BOLD WHITE TEXT) ─── */
html[data-theme="light"] .category-card:nth-child(1) .category-count,
body.light-theme .category-card:nth-child(1) .category-count {
  background: #059669 !important;
  /* Rich Green */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

html[data-theme="light"] .category-card:nth-child(2) .category-count,
body.light-theme .category-card:nth-child(2) .category-count {
  background: #2563eb !important;
  /* Rich Blue */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

html[data-theme="light"] .category-card:nth-child(3) .category-count,
body.light-theme .category-card:nth-child(3) .category-count {
  background: #d97706 !important;
  /* Rich Gold */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3) !important;
}

html[data-theme="light"] .category-card:nth-child(4) .category-count,
body.light-theme .category-card:nth-child(4) .category-count {
  background: #7c3aed !important;
  /* Rich Purple */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3) !important;
}

html[data-theme="light"] .category-card:nth-child(5) .category-count,
body.light-theme .category-card:nth-child(5) .category-count {
  background: #dc2626 !important;
  /* Rich Red */
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
}

/* Light Mode Card Text & Borders */
html[data-theme="light"] .category-card,
body.light-theme .category-card {
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .category-name,
body.light-theme .category-name {
  color: #0f172a !important;
  /* Dark bold font */
  font-weight: 900 !important;
}


/* ==========================================================================
   🏛️ ULTRA HIGH-CONTRAST READABLE FOOTER (LIGHT & DARK THEMES)
   ========================================================================== */

/* ─── LIGHT THEME FOOTER (CRYSTAL CLEAR HIGH-CONTRAST DEEP COLORS) ─── */
html[data-theme="light"] .footer,
body.light-theme .footer {
  background: #f8fafc !important;
  border-top: 2px solid rgba(15, 23, 42, 0.08) !important;
  color: #1e293b !important;
}

html[data-theme="light"] .footer-desc,
body.light-theme .footer-desc {
  color: #334155 !important;
  /* High-contrast slate */
  font-weight: 600 !important;
  line-height: 1.85 !important;
}

html[data-theme="light"] .footer-col h4,
body.light-theme .footer-col h4,
html[data-theme="light"] .footer-col-title,
body.light-theme .footer-col-title {
  color: #0f172a !important;
  /* Deep black/slate */
  font-weight: 900 !important;
  font-size: 1.15rem !important;
}

html[data-theme="light"] .footer-col ul li a,
body.light-theme .footer-col ul li a {
  color: #334155 !important;
  /* Crisp dark slate */
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

html[data-theme="light"] .footer-col ul li a:hover,
body.light-theme .footer-col ul li a:hover {
  color: #dc2626 !important;
  transform: translateX(-4px) !important;
}

html[data-theme="light"] .footer-contact-item,
body.light-theme .footer-contact-item,
html[data-theme="light"] .footer-contact-item span,
body.light-theme .footer-contact-item span,
html[data-theme="light"] .footer-contact-item a,
body.light-theme .footer-contact-item a {
  color: #1e293b !important;
  /* Sharp and readable */
  font-weight: 700 !important;
  font-size: 0.92rem !important;
}

html[data-theme="light"] .footer-contact-item a:hover,
body.light-theme .footer-contact-item a:hover {
  color: #dc2626 !important;
}

html[data-theme="light"] .footer-social-link,
body.light-theme .footer-social-link,
html[data-theme="light"] .footer-social a,
body.light-theme .footer-social a {
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .footer-social-link:hover,
body.light-theme .footer-social-link:hover,
html[data-theme="light"] .footer-social a:hover,
body.light-theme .footer-social a:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .footer-bottom,
body.light-theme .footer-bottom {
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html[data-theme="light"] .footer-copy,
body.light-theme .footer-copy {
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
}

html[data-theme="light"] .footer-links a,
body.light-theme .footer-links a {
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
}

html[data-theme="light"] .footer-links a:hover,
body.light-theme .footer-links a:hover {
  color: #dc2626 !important;
}

html[data-theme="light"] .fcol-contact-icon,
body.light-theme .fcol-contact-icon {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}


/* ==========================================================================
   🚀 ULTRA LUXURY SCROLL-TO-TOP BUTTON (CRISP EMERALD & GOLD ACCENT)
   ========================================================================== */

#scrollToTopBtn {
  position: fixed !important;
  bottom: 2.2rem !important;
  left: 2.2rem !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  z-index: 9999999 !important;
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(120px) scale(0.7) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease,
    background 0.3s ease,
    box-shadow 0.3s ease !important;
  outline: none !important;
}

#scrollToTopBtn.stt-visible {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#scrollToTopBtn:hover {
  transform: translateY(-5px) scale(1.08) !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: rgba(110, 231, 183, 0.8) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5), 0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

#scrollToTopBtn:active {
  transform: translateY(-1px) scale(0.96) !important;
}

/* Arrow Icon */
.stt-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.stt-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #ffffff !important;
}

/* Small Label */
.stt-label {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Remove Distracting Blurry Orbital Rings */
.stt-ring {
  display: none !important;
}

/* Light Theme Variant */
html[data-theme="light"] #scrollToTopBtn,
body.light-theme #scrollToTopBtn {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile */
@media (max-width: 580px) {
  #scrollToTopBtn {
    width: 46px !important;
    height: 46px !important;
    bottom: 1.2rem !important;
    left: 1.2rem !important;
  }

  .stt-label {
    display: none !important;
  }
}




/* ==========================================================================
   🔥 FINAL DEFINITIVE LOGO FIX — ARABIC + ENGLISH BOTH VISIBLE
   ========================================================================== */
.nav-logo .logo-title-ar {
  display: block !important;
  font-size: 1.32rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
  font-family: 'Cairo', 'Tajawal', 'Alexandria', sans-serif !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-logo .logo-title-en {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #ef4444 !important;
  letter-spacing: 2px !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Remove gradient so it shows a solid color */
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ef4444 !important;
  filter: none !important;
}

html[data-theme="light"] .nav-logo .logo-title-ar,
body.light-theme .nav-logo .logo-title-ar {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .nav-logo .logo-title-en,
body.light-theme .nav-logo .logo-title-en {
  background: linear-gradient(135deg, #e50027 0%, #ff1744 45%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #e50027 !important;
}




/* ==========================================================================
   CRITICAL FIX: DASHBOARD SIDEBAR ALWAYS VISIBLE - LIGHT & DARK THEMES
   ========================================================================== */

.dashboard-layout {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 0 !important;
  min-height: calc(100vh - 70px) !important;
  align-items: stretch !important;
}

.dash-sidebar {
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 70px !important;
  height: calc(100vh - 70px) !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #0f1117 0%, #0a0c12 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] .dash-sidebar,
body.light-theme .dash-sidebar {
  background: #f8fafc !important;
  border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: -2px 0 20px rgba(15, 23, 42, 0.06) !important;
}

.dash-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.8rem 1.2rem !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  margin: 0.15rem 0.6rem !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dash-nav-item:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #ffffff !important;
  transform: translateX(-3px) !important;
}

.dash-nav-item.active {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #ffffff !important;
  border-right: 3px solid #dc2626 !important;
}

html[data-theme="light"] .dash-nav-item,
body.light-theme .dash-nav-item {
  color: #334155 !important;
}

html[data-theme="light"] .dash-nav-item:hover,
body.light-theme .dash-nav-item:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .dash-nav-item.active,
body.light-theme .dash-nav-item.active {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #dc2626 !important;
}

html[data-theme="light"] .dash-title,
body.light-theme .dash-title {
  color: #0f172a !important;
}

html[data-theme="light"] .dash-date,
body.light-theme .dash-date {
  color: #64748b !important;
}

html[data-theme="light"] .dash-user h4,
body.light-theme .dash-user h4 {
  color: #0f172a !important;
}

@media (max-width: 768px) {
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .dash-sidebar {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .dash-nav {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }
}


/* ==========================================================================
   LOGO: ENGLISH ONLY — RESALE (NO ARABIC)
   ========================================================================== */

.logo-title-ar {
  display: none !important;
}

.logo-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.logo-title-en {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none !important;
  line-height: 1.1 !important;
}

html[data-theme="light"] .logo-title-en,
body.light-theme .logo-title-en {
  background: linear-gradient(135deg, #e50027 0%, #ff1744 45%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #e50027 !important;
}


/* ==========================================================================
   👑 MASTERCLASS ROYAL ANIMATED HERO STATS CAPSULE
   ========================================================================== */

.master-stats-capsule {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
  margin: 3.5rem auto 1.5rem auto !important;
  max-width: 1280px !important;
  width: 96% !important;
  padding: 1.8rem 2rem !important;
  border-radius: 28px !important;
  background: linear-gradient(165deg, rgba(20, 24, 40, 0.92) 0%, rgba(10, 12, 20, 0.97) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(220, 38, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  overflow: visible !important;
  animation: fadeInUp 0.8s ease 0.3s both !important;
  z-index: 10 !important;
}

/* Moving Neon Beam around Capsule */
.msc-beam-line {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 28px 28px 0 0 !important;
  background: linear-gradient(90deg, transparent, #dc2626, #fbbf24, #22c55e, #3b82f6, transparent) !important;
  background-size: 300% 100% !important;
  animation: vrmBeamSlide 5s linear infinite !important;
}

/* Individual Stat Cards */
.msc-item {
  display: flex !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.25rem 1.4rem !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  text-align: right !important;
  position: relative !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.msc-item:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Colored Themes for each item */
.stat-item-properties:hover {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(239, 68, 68, 0.35) !important;
}

.stat-item-agents:hover {
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(59, 130, 246, 0.35) !important;
}

.stat-item-cities:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.35) !important;
}

.stat-item-satisfaction:hover {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(34, 197, 94, 0.35) !important;
}

/* Icon Wrap with Floating Orb */
.msc-icon-wrap {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 16px !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.7rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.msc-item:hover .msc-icon-wrap {
  transform: scale(1.15) rotate(6deg) !important;
}

.stat-item-properties .msc-icon-wrap {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.stat-item-agents .msc-icon-wrap {
  border-color: rgba(59, 130, 246, 0.4) !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

.stat-item-cities .msc-icon-wrap {
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

.stat-item-satisfaction .msc-icon-wrap {
  border-color: rgba(34, 197, 94, 0.4) !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

/* Pulse Dots */
.msc-pulse-dot {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  border: 2px solid #0d0f1e !important;
}

.dot-red {
  background: #ef4444 !important;
  box-shadow: 0 0 10px #ef4444 !important;
  animation: hudPulse 2s infinite !important;
}

.dot-blue {
  background: #3b82f6 !important;
  box-shadow: 0 0 10px #3b82f6 !important;
  animation: hudPulse 2.2s infinite !important;
}

.dot-gold {
  background: #f59e0b !important;
  box-shadow: 0 0 10px #f59e0b !important;
  animation: hudPulse 2.4s infinite !important;
}

.dot-green {
  background: #22c55e !important;
  box-shadow: 0 0 10px #22c55e !important;
  animation: hudPulse 1.8s infinite !important;
}

/* Numbers and Labels */
.msc-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.msc-number-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  line-height: 1 !important;
}

.msc-val {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
}

.msc-plus-badge {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #f87171 !important;
  line-height: 1 !important;
}

.stat-item-agents .msc-plus-badge {
  color: #60a5fa !important;
}

.stat-item-cities .msc-plus-badge {
  color: #fbbf24 !important;
}

.stat-item-satisfaction .msc-plus-badge {
  color: #4ade80 !important;
}

.msc-label {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.msc-trend-tag {
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  color: #cbd5e1 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 0.22rem 0.65rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  width: fit-content !important;
  margin-top: 0.25rem !important;
  white-space: nowrap !important;
}

.msc-divider {
  display: none !important;
}

/* ─── LIGHT THEME MASTER STATS CAPSULE ─── */
html[data-theme="light"] .master-stats-capsule,
body.light-theme .master-stats-capsule {
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

html[data-theme="light"] .msc-item,
body.light-theme .msc-item {
  background: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

html[data-theme="light"] .msc-item:hover,
body.light-theme .msc-item:hover {
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .msc-val,
body.light-theme .msc-val {
  color: #0f172a !important;
  /* Deep bold black */
}

html[data-theme="light"] .msc-label,
body.light-theme .msc-label {
  color: #475569 !important;
  /* Sharp readable slate */
}

html[data-theme="light"] .msc-trend-tag,
body.light-theme .msc-trend-tag {
  background: #edf2f7 !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

html[data-theme="light"] .stat-item-properties .msc-icon-wrap {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

html[data-theme="light"] .stat-item-agents .msc-icon-wrap {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="light"] .stat-item-cities .msc-icon-wrap {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

html[data-theme="light"] .stat-item-satisfaction .msc-icon-wrap {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.2) !important;
}

/* Responsive Grid for Tablets and Mobile */
@media (max-width: 1180px) {
  .master-stats-capsule {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.1rem !important;
    padding: 1.4rem !important;
  }
}

@media (max-width: 580px) {
  .master-stats-capsule {
    grid-template-columns: 1fr !important;
    padding: 1.1rem !important;
    gap: 0.9rem !important;
  }
}


/* ==========================================================================
   🎯 EXACT MATCH NAVBAR & BUTTONS (MATCHING CLIENT SCREENSHOT 100%)
   ========================================================================== */

/* 1. Logo Styling */
.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
}

.logo-icon {
  width: 36px !important;
  height: 36px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.3rem !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
}

.logo-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1 !important;
  gap: 2px !important;
}

.logo-title-en {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #dc2626 !important;
  /* Bold Red RISALE */
  -webkit-text-fill-color: #dc2626 !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  display: block !important;
}

.logo-sub-tag {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  display: block !important;
}

html[data-theme="light"] .logo-sub-tag,
body.light-theme .logo-sub-tag {
  color: #475569 !important;
}

/* 2. Active Nav Link Pill */
.nav-link.active {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #dc2626 !important;
  border-radius: 8px !important;
  padding: 0.45rem 1rem !important;
  font-weight: 800 !important;
  position: relative !important;
}

.nav-link.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 20% !important;
  right: 20% !important;
  height: 3px !important;
  background: #dc2626 !important;
  border-radius: 4px !important;
}

/* 3. Action Pill Buttons */
.nav-btn-pill {
  padding: 0.42rem 0.95rem !important;
  border-radius: 50px !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  outline: none !important;
}

/* تسجيل الدخول */
.btn-nav-login {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-nav-login,
body.light-theme .btn-nav-login {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}

.btn-nav-login:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* أضف عقارك - Solid Red */
.btn-nav-add {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
}

.btn-nav-add:hover {
  background: #b91c1c !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6) !important;
}

/* اطلب عقارك - Solid Orange / Gold */
.btn-nav-request {
  background: #ea580c !important;
  border: 1px solid #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4) !important;
}

.btn-nav-request:hover {
  background: #c2410c !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.6) !important;
}

/* لوحة التحكم */
.btn-nav-dash {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .btn-nav-dash,
body.light-theme .btn-nav-dash {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}

.btn-nav-dash:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}


/* ==========================================================================
   🗺️ LUXURY CITIES FILTER STRIP & LEAFLET MAP CITY BADGES (CLIENT DESIGN)
   ========================================================================== */

.maps-cities-strip-wrapper {
  margin-top: 0.85rem;
  margin-bottom: 0.2rem;
  position: relative;
  width: 100%;
}

.maps-cities-strip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.4) transparent;
  -webkit-overflow-scrolling: touch;
}

.maps-cities-strip::-webkit-scrollbar {
  height: 5px;
}

.maps-cities-strip::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.35);
  border-radius: 10px;
}

.city-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.65) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  color: #f8fafc;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.city-pill-btn:hover {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(2, 132, 199, 0.85) 100%);
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45);
  color: #ffffff;
}

.city-pill-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.65), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px);
}

.city-pill-btn .cpb-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.city-pill-btn .cpb-name {
  font-weight: 800;
}

.city-pill-btn .cpb-count {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #38bdf8;
  padding: 0.1rem 0.5rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.city-pill-btn.active .cpb-count {
  background: #ffffff !important;
  color: #0369a1 !important;
  border-color: #ffffff !important;
}

/* Light theme support */
html[data-theme="light"] .city-pill-btn,
body.light-theme .city-pill-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .city-pill-btn.active,
body.light-theme .city-pill-btn.active {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

html[data-theme="light"] .city-pill-btn .cpb-count,
body.light-theme .city-pill-btn .cpb-count {
  background: #f1f5f9;
  color: #0284c7;
  border-color: #cbd5e1;
}

html[data-theme="light"] .city-pill-btn.active .cpb-count,
body.light-theme .city-pill-btn.active .cpb-count {
  background: #ffffff !important;
  color: #0369a1 !important;
}

.custom-leaflet-icon,
.custom-leaflet-icon-royal {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  z-index: 1000 !important;
}

/* 👑 ROYAL SAUDI LUXURY CITY BADGES (100% MATCHING CLIENT DESIGN) */
.leaflet-city-badge-royal,
.leaflet-city-badge {
  background: linear-gradient(135deg, #091e3a 0%, #173b75 60%, #1e40af 100%) !important;
  border: 1.8px solid #38bdf8 !important;
  border-radius: 50px !important;
  height: 36px !important;
  padding: 0 0.85rem !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 20px rgba(56, 189, 248, 0.65) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  user-select: none !important;
  animation: lcbr-float 3s ease-in-out infinite !important;
}

@keyframes lcbr-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

.leaflet-city-badge-royal:hover,
.leaflet-city-badge:hover {
  transform: translateY(-4px) scale(1.12) !important;
  border-color: #67e8f9 !important;
  background: linear-gradient(135deg, #0f2b57 0%, #1d4ed8 100%) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 30px rgba(56, 189, 248, 0.9) !important;
}

.leaflet-city-badge-royal .lcbr-icon {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
}

.leaflet-city-badge-royal .lcbr-name {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}

.leaflet-city-badge-royal .lcbr-count,
.leaflet-city-badge .lcb-count {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 0.12rem 0.6rem !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* Cyan count pill inside city badge */
.leaflet-city-badge .lcb-count {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 0.1rem 0.55rem !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
}

/* Price Pin */
.leaflet-price-pin {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1.2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 50px !important;
  height: 24px !important;
  padding: 0 0.55rem !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.leaflet-price-pin.pin-blue {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
}

.leaflet-price-pin:hover,
.leaflet-price-pin.active {
  transform: translateY(-2px) scale(1.1) !important;
  border-color: #34d399 !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
  z-index: 9999 !important;
}


/* ==========================================================================
   🌍 GLOBAL MAP CITY SEARCH BAR & HIGH CONTRAST HEADINGS
   ========================================================================== */

/* Dark Mode Headings */
.map-explore-title {
  color: #ffffff !important;
}

.map-explore-sub {
  color: #94a3b8 !important;
}

/* ─── LIGHT MODE HIGH CONTRAST (ZERO WASHOUT) ─── */
html[data-theme="light"] .map-explore-title,
body.light-theme .map-explore-title {
  color: #0f172a !important;
  /* Deep bold black - 100% visible */
  font-weight: 900 !important;
}

html[data-theme="light"] .map-explore-sub,
body.light-theme .map-explore-sub {
  color: #334155 !important;
  /* Sharp slate text */
  font-weight: 700 !important;
}

html[data-theme="light"] .map-search-bar-wrap>div,
body.light-theme .map-search-bar-wrap>div {
  background: #ffffff !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] #globalCityMapSearchInput,
body.light-theme #globalCityMapSearchInput {
  color: #0f172a !important;
}

html[data-theme="light"] #globalCityMapSearchInput::placeholder,
body.light-theme #globalCityMapSearchInput::placeholder {
  color: #64748b !important;
}

/* Quick City Chips */
.map-quick-city-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.map-quick-city-chip:hover {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .map-quick-city-chip,
body.light-theme .map-quick-city-chip {
  background: #ffffff !important;
  border: 1.5px solid rgba(15, 23, 42, 0.15) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .map-quick-city-chip:hover,
body.light-theme .map-quick-city-chip:hover {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* City Card in Light Mode */
html[data-theme="light"] .city-map-card,
body.light-theme .city-map-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] .city-map-card strong,
body.light-theme .city-map-card strong {
  color: #0f172a !important;
}

html[data-theme="light"] .city-map-card small,
body.light-theme .city-map-card small {
  color: #475569 !important;
}


/* ==========================================================================
   📱 ROYAL EMERALD GREEN GRADIENT PROPERTY REQUEST (طلباتي)
   ========================================================================== */

@keyframes aqarGreenEntrance {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.92);
    filter: blur(8px);
  }

  60% {
    transform: translateY(-4px) scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.page-request-view {
  background: radial-gradient(circle at 50% 15%, #065f46 0%, #04382c 45%, #022019 100%) !important;
}

.aqar-request-container {
  background: linear-gradient(165deg, rgba(6, 46, 36, 0.94) 0%, rgba(3, 28, 22, 0.98) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.25) !important;
  animation: aqarGreenEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.aqar-pill-btn {
  padding: 0.65rem 0.5rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  background: rgba(4, 40, 31, 0.7) !important;
  color: #cbd5e1 !important;
  transition: all 0.25s ease !important;
  outline: none !important;
}

.aqar-pill-btn:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.aqar-pill-btn.active {
  border-color: #34d399 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
}

.aqar-num-btn {
  padding: 0.65rem 0.3rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  background: rgba(4, 40, 31, 0.7) !important;
  color: #cbd5e1 !important;
  transition: all 0.25s ease !important;
  outline: none !important;
}

.aqar-num-btn:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.aqar-num-btn.active {
  border-color: #34d399 !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
}

.aqar-submit-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5) !important;
  font-weight: 900 !important;
  font-family: inherit !important;
}

.aqar-submit-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.7) !important;
}

/* ==========================================================================
   🗺️ LUXURY MAP FLOATING WIDGETS & ACTIVE CITY ADS (EXACT CLIENT MATCH)
   ========================================================================== */

/* Top-Right Floating Info Cards */
.map-floating-top-widgets {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.mft-widget {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 0.55rem 0.9rem;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.mft-widget:hover {
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
}

.mft-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.mft-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.mft-info strong {
  font-size: 0.82rem;
  color: #ffffff;
  font-weight: 800;
}

.mft-info span {
  font-size: 0.68rem;
  color: #94a3b8;
}

/* Top-Center Active City Pill Banner */
.map-active-city-pill {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(135deg, #0b132b, #1e293b);
  border: 1.5px solid #3b82f6;
  border-radius: 50px;
  padding: 0.45rem 1.1rem;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.4);
  animation: pillPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pillPop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.mcb-close-btn {
  background: rgba(220, 38, 38, 0.25);
  border: 1px solid rgba(220, 38, 38, 0.5);
  color: #fca5a5;
  border-radius: 50px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mcb-close-btn:hover {
  background: #dc2626;
  color: #ffffff;
}

/* Bottom Explore Cities Floating Pill */
.map-explore-cities-pill {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 0.45rem 1.2rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.map-explore-cities-pill:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  transform: translateX(-50%) translateY(-2px);
}

/* City Ads Cards Grid below Map */
.city-ads-section {
  margin-top: 2.5rem;
}

.city-ads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.city-ads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

@media (max-width: 1024px) {
  .city-ads-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .city-ads-grid {
    grid-template-columns: 1fr;
  }

  .map-floating-top-widgets {
    display: none;
  }
}

/* ============================================================
   👑 ULTRA-LUXURY ACTIVE CITY ADS SHOWCASE (EMERALD JADE V40.0)
   ============================================================ */
.city-ads-section {
  margin-top: 3.5rem !important;
  margin-bottom: 3rem !important;
  padding: 2.5rem 2rem !important;
  border-radius: 28px !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(6, 78, 59, 0.4) 0%, rgba(2, 28, 22, 0.98) 60%, rgba(1, 15, 12, 0.99) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 45px rgba(16, 185, 129, 0.22) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .city-ads-section,
body.light-theme .city-ads-section {
  background: radial-gradient(ellipse at 50% 0%, #ecfdf5 0%, #f0fdf4 60%, #ffffff 100%) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 20px 60px rgba(4, 120, 87, 0.14) !important;
}

.city-ads-header {
  margin-bottom: 2rem !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}

html[data-theme="light"] .city-ads-header,
body.light-theme .city-ads-header {
  border-bottom-color: rgba(16, 185, 129, 0.2) !important;
}

#mapActiveCityAdsTitle {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem 0 !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.35) !important;
}

html[data-theme="light"] #mapActiveCityAdsTitle,
body.light-theme #mapActiveCityAdsTitle {
  color: #064e3b !important;
  text-shadow: none !important;
}

.city-ads-header p {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #a7f3d0 !important;
  margin: 0 !important;
}

html[data-theme="light"] .city-ads-header p,
body.light-theme .city-ads-header p {
  color: #047857 !important;
}

.city-ads-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.6rem !important;
}

@media (max-width: 1080px) {
  .city-ads-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .city-ads-grid {
    grid-template-columns: 1fr !important;
  }

  .city-ads-section {
    padding: 1.8rem 1.2rem !important;
  }
}

/* Card Cascading Entrance Animation */
@keyframes emeraldCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.city-ad-card {
  background: linear-gradient(160deg, rgba(6, 44, 34, 0.96) 0%, rgba(2, 24, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 25px rgba(16, 185, 129, 0.16) !important;
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
  animation: emeraldCardEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  position: relative !important;
}

.city-ad-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #34d399 !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.45) !important;
}

html[data-theme="light"] .city-ad-card,
body.light-theme .city-ad-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 12px 35px rgba(4, 120, 87, 0.1) !important;
}

html[data-theme="light"] .city-ad-card:hover,
body.light-theme .city-ad-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 20px 45px rgba(4, 120, 87, 0.2), 0 0 25px rgba(16, 185, 129, 0.25) !important;
}

.city-ad-card.highlighted-map-target {
  border-color: #34d399 !important;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.5), 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.8) !important;
  transform: translateY(-10px) scale(1.03) !important;
  z-index: 10 !important;
  animation: cardTargetPulse 2s ease infinite alternate !important;
}

@keyframes cardTargetPulse {
  0% {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.4), 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(16, 185, 129, 0.6);
  }

  100% {
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.8), 0 28px 75px rgba(0, 0, 0, 0.95), 0 0 60px rgba(52, 211, 153, 0.95);
  }
}

html[data-theme="light"] .city-ad-card.highlighted-map-target,
body.light-theme .city-ad-card.highlighted-map-target {
  border-color: #059669 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5), 0 25px 60px rgba(4, 120, 87, 0.3), 0 0 40px rgba(16, 185, 129, 0.5) !important;
}

.cac-img-wrap {
  position: relative !important;
  height: 210px !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #022019 !important;
}

.cac-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.city-ad-card:hover .cac-img-wrap img {
  transform: scale(1.08) !important;
}

.cac-badge {
  position: absolute !important;
  top: 0.85rem !important;
  right: 0.85rem !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  z-index: 2 !important;
}

.cac-city-tag {
  position: absolute !important;
  bottom: 0.85rem !important;
  right: 0.85rem !important;
  background: rgba(1, 20, 15, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  color: #6ee7b7 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.25rem 0.7rem !important;
  border-radius: 50px !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  z-index: 2 !important;
}

.cac-body {
  padding: 1.3rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 0.45rem !important;
}

.city-ad-card .cac-title {
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.city-ad-card:hover .cac-title {
  color: #34d399 !important;
}

html[data-theme="light"] .city-ad-card .cac-title,
body.light-theme .city-ad-card .cac-title {
  color: #064e3b !important;
}

html[data-theme="light"] .city-ad-card:hover .cac-title,
body.light-theme .city-ad-card:hover .cac-title {
  color: #059669 !important;
}

.city-ad-card .cac-specs {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #a7f3d0 !important;
  margin: 0 !important;
}

html[data-theme="light"] .city-ad-card .cac-specs,
body.light-theme .city-ad-card .cac-specs {
  color: #047857 !important;
}

.city-ad-card .cac-price-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(52, 211, 153, 0.25) !important;
}

html[data-theme="light"] .city-ad-card .cac-price-row,
body.light-theme .city-ad-card .cac-price-row {
  border-top-color: rgba(16, 185, 129, 0.2) !important;
}

.city-ad-card .cac-price {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.45) !important;
}

html[data-theme="light"] .city-ad-card .cac-price,
body.light-theme .city-ad-card .cac-price {
  color: #059669 !important;
  text-shadow: none !important;
}

.cac-actions {
  display: flex !important;
  gap: 0.45rem !important;
  align-items: center !important;
}

.cac-btn-view {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 0.45rem 0.95rem !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
  transition: all 0.2s ease !important;
}

.cac-btn-view:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.5) !important;
}

.cac-btn-wa {
  background: #22c55e !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.35) !important;
  transition: all 0.2s ease !important;
}

.cac-btn-wa:hover {
  background: #16a34a !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.55) !important;
}

/* ===== COMPACT MAP FILTER BAR (LUXURY EMERALD JADE) ===== */
.maps-compact-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.85rem !important;
  background: linear-gradient(135deg, rgba(6, 44, 34, 0.94) 0%, rgba(2, 24, 18, 0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 20px !important;
  padding: 0.65rem 1rem !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(16, 185, 129, 0.2) !important;
  margin-top: 1.2rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .maps-compact-bar,
body.light-theme .maps-compact-bar {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 10px 30px rgba(4, 120, 87, 0.12) !important;
}

.maps-compact-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
}

.mct-btn {
  padding: 0.38rem 0.9rem !important;
  border-radius: 50px !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  background: rgba(16, 185, 129, 0.08) !important;
  color: #a7f3d0 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
}

.mct-btn:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  transform: translateY(-1px) !important;
}

.mct-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
}

html[data-theme="light"] .mct-btn,
body.light-theme .mct-btn {
  background: #f0fdf4 !important;
  color: #064e3b !important;
  border-color: #a7f3d0 !important;
}

html[data-theme="light"] .mct-btn.active,
body.light-theme .mct-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

.maps-compact-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
}

.mct-search {
  padding: 0.4rem 0.9rem !important;
  border-radius: 14px !important;
  background: rgba(1, 20, 15, 0.75) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  outline: none !important;
  font-family: inherit !important;
  width: 170px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.mct-search:focus {
  border-color: #34d399 !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.35) !important;
}

.mct-search::placeholder {
  color: rgba(167, 243, 208, 0.6) !important;
  font-size: 0.78rem !important;
}

html[data-theme="light"] .mct-search,
body.light-theme .mct-search {
  background: #ffffff !important;
  border-color: #a7f3d0 !important;
  color: #064e3b !important;
}

.mct-purpose {
  display: inline-flex !important;
  gap: 0.25rem !important;
  background: rgba(16, 185, 129, 0.1) !important;
  padding: 3px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(52, 211, 153, 0.28) !important;
}

.mct-purpose-btn {
  padding: 0.3rem 0.85rem !important;
  border-radius: 50px !important;
  border: 0 !important;
  background: transparent !important;
  color: #a7f3d0 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}

.mct-purpose-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
}

html[data-theme="light"] .mct-purpose,
body.light-theme .mct-purpose {
  background: #f0fdf4 !important;
  border-color: #a7f3d0 !important;
}

html[data-theme="light"] .mct-purpose-btn,
body.light-theme .mct-purpose-btn {
  color: #047857 !important;
}

html[data-theme="light"] .mct-purpose-btn.active,
body.light-theme .mct-purpose-btn.active {
  color: #ffffff !important;
}

.mct-layer-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #ecfdf5 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}

.mct-layer-btn:hover {
  background: rgba(16, 185, 129, 0.3) !important;
  border-color: #34d399 !important;
  transform: scale(1.08) !important;
}

.mct-count {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 50px !important;
  white-space: nowrap !important;
}

/* Explicitly clear the 70px fixed navbar for maps page */
.maps-page {
  padding-top: 75px !important;
  padding-bottom: 5rem !important;
}

.maps-page-wrapper {
  padding-top: 0 !important;
}

/* ============================================================
   👑 ULTRA-LUXURY ROYAL MOBILE BOTTOM NAVIGATION BAR (5 ITEMS)
   ============================================================ */
.mobile-bottom-nav,
.mobile-bottom-navbar {
  display: none !important;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px !important;
  }

  .mobile-bottom-nav,
  .mobile-bottom-navbar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    background: rgba(10, 15, 26, 0.97) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.6) !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 0.5rem calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    direction: rtl !important;
  }
}

html[data-theme="light"] .mobile-bottom-nav,
html[data-theme="light"] .mobile-bottom-navbar,
body.light-theme .mobile-bottom-nav,
body.light-theme .mobile-bottom-navbar {
  background: rgba(255, 255, 255, 0.97) !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.08) !important;
}

.mbn-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  padding: 0.35rem 0.2rem !important;
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  text-decoration: none !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.mbn-item .mbn-icon {
  font-size: 1.3rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.mbn-item .mbn-text {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  transition: color 0.2s ease, font-weight 0.2s ease !important;
}

.mbn-item:hover,
.mbn-item.active {
  color: #ef4444 !important;
}

.mbn-item.active .mbn-icon {
  transform: scale(1.18) translateY(-2px) !important;
}

.mbn-item.active .mbn-text {
  color: #ef4444 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}

/* ============================================================
   👑 ELEVATED CENTER ➕ "ADD PROPERTY" BUTTON
   ============================================================ */
.mbn-item-add {
  position: relative !important;
  padding: 0 !important;
  overflow: visible !important;
}

.mbn-item-add .mbn-add-circle {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6), 0 0 0 4px rgba(13, 17, 27, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-16px) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  margin: 0 auto !important;
}

html[data-theme="light"] .mbn-item-add .mbn-add-circle,
body.light-theme .mbn-item-add .mbn-add-circle {
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5), 0 0 0 4px #ffffff !important;
}

.mbn-item-add:hover .mbn-add-circle,
.mbn-item-add.active .mbn-add-circle {
  transform: translateY(-20px) scale(1.1) !important;
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.8), 0 0 0 5px rgba(13, 17, 27, 0.95) !important;
}

.mbn-item-add .mbn-icon {
  font-size: 1.45rem !important;
  color: #ffffff !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mbn-item-add .mbn-add-label {
  position: absolute !important;
  bottom: 6px !important;
  font-size: 0.62rem !important;
  color: #f87171 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ============================================================
   ?? ROYAL FEATURED SPONSORED VIDEO AD SECTION
   ============================================================ */
.hero-sponsored-section {
  padding: 2.5rem 0 1.5rem 0;
  position: relative;
  z-index: 2;
}

.sponsored-ad-card-wrap {
  background: linear-gradient(165deg, rgba(17, 24, 39, 0.95) 0%, rgba(30, 15, 15, 0.92) 50%, rgba(10, 15, 30, 0.95) 100%);
  border: 2px solid rgba(220, 38, 38, 0.4);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(220, 38, 38, 0.2);
  border-radius: 28px;
  padding: 1.4rem 1.6rem 1.6rem 1.6rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .sponsored-ad-card-wrap,
body.light-theme .sponsored-ad-card-wrap {
  background: linear-gradient(165deg, #ffffff 0%, #fef2f2 50%, #f8fafc 100%) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 20px 60px rgba(220, 38, 38, 0.15) !important;
}

/* Header Top Controls Bar */
.sac-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .sac-top-bar,
body.light-theme .sac-top-bar {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.sac-badge-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sac-badge-vip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(234, 88, 12, 0.25) 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.5);
  color: #fca5a5;
  padding: 0.4rem 1.1rem;
  border-radius: 50px;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2);
}

.sac-badge-exclusive {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #ef4444;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
}

.sac-actions-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sac-btn-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sac-btn-ctrl:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fff;
  transform: translateY(-2px);
}

.sac-btn-add-sponsored {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 0.84rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sac-btn-add-sponsored:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Main Grid Layout */
.sac-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.6rem;
  align-items: center;
}

@media (max-width: 900px) {
  .sac-main-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

/* Video Frame */
.sac-video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
  aspect-ratio: 16 / 9;
  width: 100%;
}

.sac-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Info Details Column */
.sac-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: right;
}

.sac-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
}

html[data-theme="light"] .sac-title,
body.light-theme .sac-title {
  color: #0f172a !important;
}

.sac-desc {
  font-size: 0.88rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* 6-Grid Specs */
.sac-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}

@media (max-width: 500px) {
  .sac-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sac-spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sac-spec-label {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
}

.sac-spec-val {
  font-size: 0.85rem;
  color: #f1f5f9;
  font-weight: 800;
}

.sac-spec-val.price {
  color: #ef4444;
  font-weight: 900;
}

.sac-spec-val.host {
  color: #fbbf24;
}

/* Action Buttons Row */
.sac-buttons-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.sac-btn-call {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  border: none;
  font-size: 0.88rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sac-btn-call:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(220, 38, 38, 0.6);
}

.sac-btn-whatsapp {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  border: none;
  font-size: 0.88rem;
  font-weight: 900;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sac-btn-whatsapp:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.6);
}

/* ============================================================
   ?? ULTRA-LUXURY STAGGERED DRAWER SYSTEM WITH CLASSY PHRASES
   ============================================================ */
.mdc-luxury-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mdc-luxury-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #f1f5f9;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.mdc-luxury-item:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0%, rgba(15, 23, 42, 0.6) 100%);
  border-color: rgba(220, 38, 38, 0.45);
  transform: translateX(-6px) scale(1.015);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.25);
}

.mdc-lux-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s ease;
}

.mdc-luxury-item:hover .mdc-lux-icon-box {
  transform: scale(1.15) rotate(5deg);
  background: #dc2626;
  color: #fff;
  border-color: #ef4444;
}

.mdc-lux-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
  text-align: right;
}

.mdc-lux-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

html[data-theme="light"] .mdc-lux-title,
body.light-theme .mdc-lux-title {
  color: #0f172a !important;
}

.mdc-lux-phrase {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.4;
}

html[data-theme="light"] .mdc-lux-phrase,
body.light-theme .mdc-lux-phrase {
  color: #64748b !important;
}

.mdc-lux-badge {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
}

.mdc-lux-arrow {
  font-size: 0.85rem;
  color: #64748b;
  transition: transform 0.25s ease, color 0.25s ease;
}

.mdc-luxury-item:hover .mdc-lux-arrow {
  color: #fca5a5;
  transform: translateX(-4px);
}

/* Stagger Animation */
.mobile-drawer-backdrop.active .mdc-luxury-item {
  animation: mdcItemSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mdcItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   ?? SEAMLESS RESPONSIVE NAVBAR & DRAWER SWITCHING SYSTEM
   ============================================================ */
.nav-desktop-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-btn-pill {
  height: 38px;
  padding: 0 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: inherit;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.nav-btn-pill.btn-nav-login {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}

.nav-btn-pill.btn-nav-login:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.nav-btn-pill.btn-nav-add {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.nav-btn-pill.btn-nav-add:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6);
}

.nav-btn-pill.btn-nav-request {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.nav-btn-pill.btn-nav-request:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.nav-btn-pill.btn-nav-dash {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

.nav-btn-pill.btn-nav-dash:hover {
  background: #2563eb;
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================================
   👑 BULLETPROOF RESPONSIVE NAVBAR & DRAWER SWITCHING SYSTEM
   ============================================================ */

/* Base Hamburger Button: ALWAYS VISIBLE & LUXURIOUS ON ALL SCREENS */
.hamburger {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  user-select: none !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
}

.hamburger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #ef4444 !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
}

.hamburger span {
  display: block !important;
  width: 22px !important;
  height: 2.5px !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg) !important;
  background: #ef4444 !important;
}

.hamburger.open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg) !important;
  background: #ef4444 !important;
}

html[data-theme="light"] .hamburger,
body.light-theme .hamburger {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .hamburger span,
body.light-theme .hamburger span {
  background: #0f172a !important;
}

html[data-theme="light"] .hamburger:hover span,
body.light-theme .hamburger:hover span {
  background: #ffffff !important;
}

/* 1. Large Desktop (>= 1201px): Full Navbar with Action Buttons + Hamburger */
@media (min-width: 1201px) {
  .nav-guest-actions,
  .nav-desktop-actions {
    display: inline-flex !important;
  }

  .nav-links {
    display: flex !important;
  }

  .hamburger {
    display: inline-flex !important;
  }
}

/* 2. Responsive Medium / Tablet Screens (<= 1200px) */
@media (max-width: 1200px) {
  .nav-guest-actions,
  .nav-desktop-actions,
  #navGuestActions {
    display: none !important;
  }

  .nav-links {
    display: none !important;
  }

  .hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .lang-nav-pill-btn {
    display: inline-flex !important;
  }

  .theme-icon-btn {
    display: inline-flex !important;
  }

  .nav-fav-icon-btn {
    display: inline-flex !important;
  }
}

/* 3. Small Tablets & Mobile (<= 880px) */
@media (max-width: 880px) {
  .nav-links {
    display: none !important;
  }

  .nav-guest-actions,
  .nav-desktop-actions,
  #navGuestActions {
    display: none !important;
  }

  .hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* 4. Compact Mobile Tuning (<= 520px) */
@media (max-width: 520px) {
  .nav-container {
    padding: 0 0.85rem !important;
    justify-content: space-between !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar {
    height: 58px !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }

  .nav-guest-actions,
  #navGuestActions {
    display: none !important;
  }

  .hamburger {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .nav-logo {
    gap: 0.4rem !important;
  }

  .logo-title-en {
    font-size: 1.15rem !important;
  }

  .logo-sub-tag {
    display: none !important;
  }

  .lang-nav-pill-btn .lnp-label {
    display: none !important;
  }

  .lang-nav-pill-btn {
    padding: 0.35rem 0.6rem !important;
  }

  .theme-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
}

/* ============================================================
   👑 ULTRA-LUXURY SAUDI SIDE NAVIGATION DRAWER (SLIDING SIDEBAR)
   ============================================================ */
.mobile-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(5, 8, 14, 0.75) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  z-index: 9999999 !important;
  display: none !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.mobile-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.2rem !important;
  background: rgba(3, 6, 15, 0.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.mobile-drawer-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mobile-drawer-card {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 520px !important;
  height: 90vh !important;
  max-height: 90vh !important;
  margin: auto !important;
  background: linear-gradient(165deg, #111524 0%, #0c0f1b 50%, #070912 100%) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  border-radius: 28px !important;
  box-shadow: 0 35px 95px rgba(0, 0, 0, 0.95), 0 0 60px rgba(220, 38, 38, 0.3) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  transform: scale(0.9) translateY(36px) !important;
  opacity: 0 !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10000000 !important;
}

html[dir="ltr"] .mobile-drawer-card {
  direction: ltr !important;
  transform: scale(0.9) translateY(36px) !important;
}

.mobile-drawer-backdrop.active .mobile-drawer-card {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
  animation: drawerCardSpringIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Light Theme Support */
html[data-theme="light"] .mobile-drawer-backdrop,
body.light-theme .mobile-drawer-backdrop {
  background: rgba(15, 23, 42, 0.55) !important;
}

html[data-theme="light"] .mobile-drawer-card,
body.light-theme .mobile-drawer-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2) !important;
}

/* Single Smooth Scrollable Body with Unified Fluid Scroll */
.mdc-body-scrollable {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  padding: 1.25rem 1.6rem 2.8rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(220, 38, 38, 0.5) rgba(255, 255, 255, 0.03) !important;
}

.mdc-body-scrollable::-webkit-scrollbar {
  width: 6px !important;
}

.mdc-body-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 10px !important;
  margin: 8px 0 !important;
}

.mdc-body-scrollable::-webkit-scrollbar-thumb {
  background: rgba(220, 38, 38, 0.4) !important;
  border-radius: 10px !important;
}

/* 1. Header */
.mdc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 0.8rem !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .mdc-header,
body.light-theme .mdc-header {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.mdc-close-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.mdc-close-btn:hover {
  background: rgba(220, 38, 38, 0.3) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.4) !important;
  transform: rotate(90deg) scale(1.1) !important;
}

html[data-theme="light"] .mdc-close-btn,
body.light-theme .mdc-close-btn {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* 2. Top Primary Quick Action Cards in Side Drawer */
.mdc-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.65rem !important;
  margin-bottom: 0.5rem !important;
}

.mdc-action-card {
  padding: 0.85rem 0.8rem !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  border: 1.5px solid transparent !important;
}

.mdc-action-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* Card 1: أضف عقارك */
.mdc-card-add {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.2) 0%, rgba(153, 27, 27, 0.4) 100%) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
}

.mdc-card-add .mdc-card-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4) !important;
}

.mdc-card-add strong {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

.mdc-card-add span {
  color: #fca5a5 !important;
}

/* Card 2: اطلب عقارك */
.mdc-card-req {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(180, 83, 9, 0.4) 100%) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2) !important;
}

.mdc-card-req .mdc-card-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4) !important;
}

.mdc-card-req strong {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

.mdc-card-req span {
  color: #fde68a !important;
}

/* Card 3: لوحة التحكم */
.mdc-card-dash {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(30, 64, 175, 0.4) 100%) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2) !important;
}

.mdc-card-dash .mdc-card-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4) !important;
}

.mdc-card-dash strong {
  color: #ffffff !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
}

.mdc-card-dash span {
  color: #bfdbfe !important;
}

.mdc-card-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.mdc-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  min-width: 0 !important;
}

.mdc-card-info strong {
  font-size: 0.86rem !important;
  white-space: nowrap !important;
}

.mdc-card-info span {
  font-size: 0.68rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 3. Main Navigation List in Side Drawer */
.mdc-nav-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.mdc-section-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #ef4444 !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 0.3rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.mdc-section-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: #ef4444 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #ef4444 !important;
}

html[data-theme="light"] .mdc-section-label,
body.light-theme .mdc-section-label {
  color: #dc2626 !important;
}

.mdc-luxury-nav-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.mdc-luxury-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.8rem 0.95rem !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  position: relative !important;
}

.mdc-luxury-item:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(220, 38, 38, 0.2) !important;
}

html[dir="ltr"] .mdc-luxury-item:hover {
  transform: translateX(4px) !important;
}

html[data-theme="light"] .mdc-luxury-item,
body.light-theme .mdc-luxury-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] .mdc-luxury-item:hover,
body.light-theme .mdc-luxury-item:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
}

.mdc-lux-icon-box {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.mdc-luxury-item:hover .mdc-lux-icon-box {
  background: rgba(220, 38, 38, 0.3) !important;
  border-color: #ef4444 !important;
  transform: scale(1.1) !important;
}

html[data-theme="light"] .mdc-lux-icon-box,
body.light-theme .mdc-lux-icon-box {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

.mdc-lux-content {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  gap: 0.15rem !important;
  min-width: 0 !important;
}

.mdc-lux-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.mdc-lux-title span:first-child {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .mdc-lux-title span:first-child,
body.light-theme .mdc-lux-title span:first-child {
  color: #0f172a !important;
}

.mdc-lux-badge {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 50px !important;
  background: rgba(220, 38, 38, 0.2) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
}

html[data-theme="light"] .mdc-lux-badge,
body.light-theme .mdc-lux-badge {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

.mdc-lux-phrase {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="light"] .mdc-lux-phrase,
body.light-theme .mdc-lux-phrase {
  color: #64748b !important;
}

.mdc-lux-arrow {
  font-size: 1rem !important;
  color: #64748b !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
}

.mdc-luxury-item:hover .mdc-lux-arrow {
  transform: translateX(-4px) !important;
  color: #ef4444 !important;
}

html[dir="ltr"] .mdc-luxury-item:hover .mdc-lux-arrow {
  transform: translateX(4px) !important;
}

/* 4. Bottom Controls Bar in Side Drawer */
.mdc-footer-box {
  padding-top: 1.2rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 0.8rem !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .mdc-footer-box,
body.light-theme .mdc-footer-box {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.mdc-footer-capsule-row {
  display: flex !important;
  gap: 0.6rem !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mdc-lang-btn {
  flex: 1 !important;
  padding: 0.7rem 0.8rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.25s ease !important;
}

.mdc-lang-btn:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: #ef4444 !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] .mdc-lang-btn,
body.light-theme .mdc-lang-btn {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.mdc-theme-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  background: rgba(220, 38, 38, 0.12) !important;
  color: #ef4444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.mdc-theme-btn:hover {
  background: rgba(220, 38, 38, 0.25) !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.4) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

html[data-theme="light"] .mdc-theme-btn,
body.light-theme .mdc-theme-btn {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fca5a5 !important;
}

.mdc-login-btn-vip {
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-family: inherit !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45), 0 0 15px rgba(52, 211, 153, 0.3) !important;
  transition: all 0.25s ease !important;
}

.mdc-login-btn-vip:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.65), 0 0 25px rgba(52, 211, 153, 0.5) !important;
}

/* ── Guest Action Buttons in Royal Drawer Footer ── */
.btn-drawer-login {
  width: 100% !important;
  padding: 1rem 1.4rem !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  font-family: inherit !important;
}

.btn-drawer-login:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

.btn-drawer-add {
  width: 100% !important;
  padding: 0.95rem 1rem !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1.5px solid #f87171 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
  transition: all 0.25s ease !important;
  font-family: inherit !important;
}

.btn-drawer-add:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.6) !important;
}

.btn-drawer-req {
  width: 100% !important;
  padding: 0.95rem 1rem !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%) !important;
  border: 1.5px solid #f59e0b !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25) !important;
  transition: all 0.25s ease !important;
  font-family: inherit !important;
}

.btn-drawer-req:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.45) !important;
}

/* Light Theme Drawer Action Buttons */
html[data-theme="light"] .btn-drawer-login,
body.light-theme .btn-drawer-login {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .btn-drawer-req,
body.light-theme .btn-drawer-req {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #b45309 !important;
}

/* Responsive Breakpoints for Centered Modal Hub */
@media (max-width: 768px) {
  .mobile-drawer-card {
    padding: 0 !important;
    max-height: 90vh !important;
  }

  .mdc-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .mdc-luxury-nav-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .mdc-luxury-item {
    grid-column: span 1 !important;
    padding: 0.95rem 1.1rem !important;
  }

  .mdc-footer-capsule-row {
    flex-wrap: wrap !important;
  }

  .mdc-login-btn-vip {
    width: 100% !important;
    flex: none !important;
  }
}


/* ============================================================
   ?? ULTRA-PREMIUM SPONSORED VIDEO AD BANNER (V35.0)
   ============================================================ */
.sponsored-ad-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem 0 !important;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.sac-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(145deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 14, 23, 0.98) 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.4);
  border-radius: 26px;
  padding: 1.8rem 2.2rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 45px rgba(220, 38, 38, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}

.sac-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #dc2626, #f59e0b, transparent);
}

/* --- TOP BAR --- */
.sac-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.sac-badge-vip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(185, 28, 28, 0.4) 100%);
  border: 1.5px solid #dc2626;
  color: #ffffff;
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-weight: 900;
  font-size: 0.88rem;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
  letter-spacing: 0.2px;
}

.sac-vip-icon {
  font-size: 1.1rem;
}

.sac-controls-group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sac-live-dot-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  padding: 0.4rem 0.85rem;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 800;
}

.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444;
  animation: pulseLiveDot 1.5s infinite;
}

@keyframes pulseLiveDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(1.3);
  }
}

.sac-ctrl-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  padding: 0.45rem 0.95rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.sac-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

.sac-add-ad-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000 !important;
  border: none;
  padding: 0.45rem 1.15rem;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sac-add-ad-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6);
}

/* --- MAIN GRID --- */
.sac-main-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.2rem;
  align-items: center;
  text-align: right;
  direction: rtl;
}

/* --- VIDEO FRAME --- */
.sac-video-col {
  width: 100%;
}

.sac-video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(220, 38, 38, 0.35);
  aspect-ratio: 16 / 9;
  background: #000000;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(220, 38, 38, 0.15);
}

.sac-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sac-video-overlay-badges {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}

.sv-verified-badge {
  background: rgba(16, 185, 129, 0.9);
  color: #ffffff;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.sv-tag-badge {
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fbbf24;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

/* --- DETAILS COLUMN --- */
.sac-details-col {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.sac-cat-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.sac-category-tag {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 800;
}

.sac-price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.sac-price-val {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.3px;
}

.sac-price-curr {
  font-size: 0.78rem;
  color: #cbd5e1;
  font-weight: 700;
}

.sac-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.45;
  margin: 0 0 0.5rem 0;
}

.sac-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 1.2rem 0;
}

/* --- 6 SPECS GRID --- */
.sac-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.9rem;
  margin-bottom: 1.3rem;
}

.sac-spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: right;
}

.ssi-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.ssi-info {
  display: flex;
  flex-direction: column;
}

.ssi-label {
  font-size: 0.68rem;
  color: #94a3b8;
  font-weight: 600;
}

.ssi-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
}

/* --- ACTIONS ROW --- */
.sac-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sac-btn-wa {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
}

.sac-btn-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.5);
}

.sac-btn-call {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff !important;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
  transition: all 0.2s ease;
}

.sac-btn-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.5);
}

.sac-btn-details {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  padding: 0.65rem 1.15rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.sac-btn-details:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

/* --- RESPONSIVE FOR SPONSORED BANNER --- */
@media (max-width: 900px) {
  .sac-main-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .sac-wrapper {
    padding: 1.2rem;
  }

  .sac-title {
    font-size: 1.15rem;
  }

  .sac-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   ?? MATCHING PIXEL-PERFECT SPONSORED BANNER (FULL WIDTH ON TOP)
   ============================================================ */
.sac-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  width: 100% !important;
  margin-bottom: 1.2rem !important;
  padding-bottom: 0.8rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-wrap: wrap !important;
}

.sac-top-badges {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex-wrap: wrap !important;
}

.sac-badge-vip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(220, 38, 38, 0.2) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.6) !important;
  color: #ffffff !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.3) !important;
}

.sac-live-dot-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
  padding: 0.42rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

.sac-controls-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
}

.sac-ctrl-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  padding: 0.45rem 1rem !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.2s ease !important;
}

.sac-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

.sac-add-ad-btn {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1.5px solid #f59e0b !important;
  color: #fbbf24 !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2) !important;
}

.sac-add-ad-btn:hover {
  background: #f59e0b !important;
  color: #000000 !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5) !important;
}

.sac-video-frame.full-width {
  width: 100% !important;
  max-height: 520px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  margin-bottom: 1.6rem !important;
  border: 2px solid rgba(220, 38, 38, 0.35) !important;
  background: #000000 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(220, 38, 38, 0.18) !important;
}

.sac-details-below {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  direction: rtl !important;
  width: 100% !important;
}

/* ============================================================
   ?? SPONSORED BANNER PIXEL-PERFECT DATA CARD & BUTTONS (V36.0)
   ============================================================ */
.sac-details-below {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  direction: rtl !important;
  width: 100% !important;
}

.sac-cat-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.4rem !important;
}

.sac-category-tag {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

.sac-price-box {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.4rem !important;
}

.sac-price-val {
  color: #fbbf24 !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}

.sac-price-curr {
  color: #cbd5e1 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.sac-title {
  color: #ffffff !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  margin: 0.2rem 0 0.5rem 0 !important;
}

.sac-desc {
  color: #94a3b8 !important;
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  margin: 0 0 1.2rem 0 !important;
}

.sac-specs-grid {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  padding: 1.2rem 1.5rem !important;
  margin-bottom: 1.4rem !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.2rem 1rem !important;
}

.sac-spec-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.25rem !important;
}

.ssi-icon {
  font-size: 1.4rem !important;
  margin-bottom: 2px !important;
}

.ssi-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.ssi-label {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.ssi-val {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.sac-actions-row {
  display: grid !important;
  grid-template-columns: 200px 1fr 180px !important;
  gap: 1rem !important;
  align-items: center !important;
  width: 100% !important;
}

.sac-btn-wa {
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.2s ease !important;
}

.sac-btn-wa:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.55) !important;
}

.sac-btn-call {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  height: 48px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.45) !important;
  transition: all 0.2s ease !important;
}

.sac-btn-call:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(220, 38, 38, 0.6) !important;
}

.sac-btn-details {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.2s ease !important;
}

.sac-btn-details:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
  .sac-actions-row {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  .sac-specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 1rem !important;
  }
}

/* ============================================================
   ?? EMERALD GREEN GRADIENT MODAL & STAGGERED ENTRANCE ANIMATIONS
   ============================================================ */
.modal-emerald-card {
  max-width: 660px !important;
  width: 94% !important;
  padding: 2.4rem 2.2rem !important;
  border-radius: 28px !important;
  background: linear-gradient(165deg, #052c1e 0%, #031e15 45%, #01120c 100%) !important;
  border: 2px solid rgba(16, 185, 129, 0.48) !important;
  box-shadow: 0 35px 110px rgba(0, 0, 0, 0.95), 0 0 70px rgba(16, 185, 129, 0.3) !important;
  position: relative !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  animation: emeraldModalPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes emeraldModalPop {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.92);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.emerald-close-btn {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

.emerald-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.1) !important;
}

.emerald-modal-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 0.8rem auto !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45) !important;
}

.emerald-badge-pill {
  display: inline-block !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
  padding: 0.28rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.5rem !important;
}

.emerald-modal-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.3rem 0 !important;
}

.text-emerald-glow {
  color: #34d399 !important;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.5) !important;
}

.emerald-modal-subtitle {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.emerald-form-label {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #a7f3d0 !important;
  margin-bottom: 0.4rem !important;
}

.emerald-form-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.emerald-form-input:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.35) !important;
  background: rgba(0, 0, 0, 0.65) !important;
}

.emerald-select {
  background: #021a12 !important;
}

.emerald-video-upload-box {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1.5px dashed rgba(16, 185, 129, 0.45) !important;
  border-radius: 18px !important;
  padding: 1.2rem !important;
  text-align: center !important;
}

.emerald-upload-title {
  display: block !important;
  color: #34d399 !important;
  font-size: 0.92rem !important;
  margin-bottom: 0.3rem !important;
}

.emerald-upload-subtitle {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  margin-bottom: 0.8rem !important;
}

.emerald-file-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.65rem 1.5rem !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  margin-bottom: 0.7rem !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
  transition: transform 0.2s ease !important;
}

.emerald-file-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

.emerald-url-input {
  width: 100% !important;
  padding: 0.65rem 1rem !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  text-align: center !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.emerald-submit-btn {
  width: 100% !important;
  padding: 0.95rem !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  margin-top: 0.4rem !important;
}

.emerald-submit-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 14px 40px rgba(16, 185, 129, 0.65) !important;
}

/* --- 👑 MAJESTIC SLOW & SMOOTH STAGGER ENTRANCE ANIMATIONS --- */
@keyframes emeraldModalPop {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fieldSlideInRightSmooth {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.96);
    filter: blur(4px);
  }

  60% {
    opacity: 0.9;
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fieldSlideInDownSmooth {
  0% {
    opacity: 0;
    transform: translateY(-30px) scale(0.92);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes emeraldDiamondFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 18px 45px rgba(16, 185, 129, 0.75);
  }
}

@keyframes textGlowShimmer {

  0%,
  100% {
    text-shadow: 0 0 15px rgba(52, 211, 153, 0.4);
  }

  50% {
    text-shadow: 0 0 35px rgba(52, 211, 153, 0.9), 0 0 50px rgba(16, 185, 129, 0.6);
  }
}

.emerald-modal-icon {
  animation: emeraldDiamondFloat 3.5s ease-in-out infinite !important;
}

.text-emerald-glow {
  color: #34d399 !important;
  display: inline-block !important;
  animation: textGlowShimmer 2.5s ease-in-out infinite !important;
}

.modal-anim-item {
  opacity: 1 !important;
  animation: fieldSlideInRightSmooth 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-step-1 {
  animation: fieldSlideInDownSmooth 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.anim-step-2 {
  animation-delay: 0.12s;
}

.anim-step-3 {
  animation-delay: 0.20s;
}

.anim-step-4 {
  animation-delay: 0.28s;
}

.anim-step-5 {
  animation-delay: 0.36s;
}

.anim-step-6 {
  animation-delay: 0.44s;
}

.anim-step-7 {
  animation-delay: 0.52s;
}

.anim-step-8 {
  animation-delay: 0.60s;
}

.anim-step-9 {
  animation-delay: 0.68s;
}



/* ============================================================
/* ============================================================
   👑 LUXURY ANIMATED VIP AUTH MASTERPIECE (RICH AESTHETICS & SLOW STAGGERED MOTION)
   ============================================================ */
.auth-screenshot-wrapper {
  position: relative !important;
  min-height: 100vh !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1.2rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #06080e !important;
}

/* 1. Cinematic Ken-Burns Villa Background */
.auth-villa-bg {
  position: absolute !important;
  inset: -30px !important;
  background: linear-gradient(180deg, rgba(8, 11, 20, 0.78) 0%, rgba(6, 8, 15, 0.92) 100%),
    url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&q=85') center/cover no-repeat !important;
  z-index: 1 !important;
  filter: brightness(0.85) contrast(1.08) !important;
  animation: authKenBurnsSlow 28s ease-in-out infinite alternate !important;
  pointer-events: none !important;
}

@keyframes authKenBurnsSlow {
  0% {
    transform: scale(1) translate(0, 0);
  }

  50% {
    transform: scale(1.08) translate(-15px, -10px);
  }

  100% {
    transform: scale(1.04) translate(10px, 8px);
  }
}

/* Ambient Glowing Orbs */
.auth-orb-glow {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0.55 !important;
  animation: authOrbPulse 8s ease-in-out infinite alternate !important;
}

.auth-orb-glow-1 {
  width: 480px !important;
  height: 480px !important;
  top: -100px !important;
  right: -80px !important;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.05) 70%, transparent 100%) !important;
}

.auth-orb-glow-2 {
  width: 420px !important;
  height: 420px !important;
  bottom: -120px !important;
  left: -60px !important;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.05) 70%, transparent 100%) !important;
  animation-delay: -4s !important;
}

@keyframes authOrbPulse {
  0% {
    transform: scale(0.9) translate(0, 0);
    opacity: 0.4;
  }

  100% {
    transform: scale(1.15) translate(20px, -20px);
    opacity: 0.7;
  }
}

/* 2. Floating Circular Glass Return Button */
.auth-floating-back {
  position: absolute !important;
  top: 26px !important;
  left: 26px !important;
  z-index: 20 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1.2rem !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

.auth-floating-back:hover {
  background: #10b981 !important;
  border-color: #34d399 !important;
  transform: rotate(90deg) scale(1.12) !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.7) !important;
}

/* 3. Deep Emerald Onyx Frosted Glass Card */
.auth-card-pixel {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 480px !important;
  background: linear-gradient(165deg, rgba(12, 23, 38, 0.96) 0%, rgba(6, 15, 26, 0.99) 100%) !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 32px !important;
  padding: 2.8rem 2.4rem !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.95), 0 0 60px rgba(16, 185, 129, 0.25) !important;
  text-align: center !important;
  direction: rtl !important;
  animation: authCardSlowTopEntrance 0.95s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  overflow: visible !important;
}

@keyframes authCardSlowTopEntrance {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered Cascading Elements Motion - Slow Luxury Slide from Top */
.auth-anim-item {
  animation: authItemSlowSlide 0.85s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes authItemSlowSlide {
  0% {
    opacity: 0;
    transform: translateY(-28px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-anim-step-1 {
  animation-delay: 0.10s !important;
}

.auth-anim-step-2 {
  animation-delay: 0.18s !important;
}

.auth-anim-step-3 {
  animation-delay: 0.26s !important;
}

.auth-anim-step-4 {
  animation-delay: 0.34s !important;
}

.auth-anim-step-5 {
  animation-delay: 0.42s !important;
}

.auth-anim-step-6 {
  animation-delay: 0.50s !important;
}

.auth-anim-step-7 {
  animation-delay: 0.58s !important;
}

.auth-anim-step-8 {
  animation-delay: 0.66s !important;
}

.auth-anim-step-9 {
  animation-delay: 0.74s !important;
}

/* 4. Brand Centered Header */
.auth-brand-center {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-bottom: 0.85rem !important;
  transition: transform 0.25s ease !important;
}

.auth-brand-center:hover {
  transform: scale(1.04) !important;
}

.auth-unified-brand-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
}

.auth-logo-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.auth-brand-text-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.auth-brand-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0 !important;
  display: inline-block !important;
}

.auth-screen-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.35rem 0 !important;
  letter-spacing: -0.3px !important;
}

.auth-screen-sub {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  margin: 0 0 1.5rem 0 !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

/* 5. 3-Tab Sliding Mode Switcher */
.auth-mode-pill-tabs {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 50px !important;
  padding: 0.3rem !important;
  margin-bottom: 1.5rem !important;
  backdrop-filter: blur(10px) !important;
}

.auth-mpt-btn {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  color: #cbd5e1 !important;
  padding: 0.65rem 0.5rem !important;
  border-radius: 50px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-mpt-btn:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}

.auth-mpt-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.5) !important;
}

/* 6. Form Groups & Luxury Input Boxes */
.auth-field-group {
  display: flex !important;
  flex-direction: column !important;
  text-align: right !important;
  margin-bottom: 1.15rem !important;
  position: relative !important;
}

.auth-input-label {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  margin-bottom: 0.45rem !important;
}

.auth-phone-input-wrap {
  position: relative !important;
  display: flex !important;
  gap: 0.6rem !important;
  align-items: stretch !important;
  height: 52px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.auth-country-pill-btn {
  background: rgba(14, 25, 40, 0.95) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 16px !important;
  padding: 0 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  transition: all 0.22s ease !important;
  height: 52px !important;
  box-sizing: border-box !important;
  direction: rtl !important;
  user-select: none !important;
}

.auth-country-pill-btn:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}

.auth-country-pill-btn.open {
  border-color: #34d399 !important;
  background: rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
}

.country-pill-flag {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.country-pill-dial {
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  direction: ltr !important;
  font-family: 'Outfit', sans-serif !important;
  color: #34d399 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.country-pill-arrow {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  transition: transform 0.25s ease !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.auth-country-pill-btn.open .country-pill-arrow {
  transform: rotate(180deg) !important;
  color: #34d399 !important;
}

/* Floating Dropdown Panel */
.auth-country-dropdown-panel {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-height: 310px !important;
  background: #08111e !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.98), 0 0 35px rgba(16, 185, 129, 0.25) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  padding: 0.8rem !important;
  z-index: 99999999 !important;
  box-sizing: border-box !important;
  animation: countryPopAnim 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes countryPopAnim {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.country-search-wrap {
  position: relative !important;
  margin-bottom: 0.65rem !important;
  display: flex !important;
  align-items: center !important;
}

.country-search-icon {
  position: absolute !important;
  right: 0.75rem !important;
  font-size: 0.85rem !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
}

#countrySearchInput {
  width: 100% !important;
  padding: 0.6rem 2.2rem 0.6rem 2rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-family: inherit !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#countrySearchInput:focus {
  border-color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
  background: rgba(0, 0, 0, 0.85) !important;
}

.country-search-clear {
  position: absolute !important;
  left: 0.6rem !important;
  background: none !important;
  border: none !important;
  color: #64748b !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  padding: 0.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.country-search-clear:hover {
  color: #34d399 !important;
}

.country-items-scrollbox {
  max-height: 220px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  padding-left: 0.2rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(52, 211, 153, 0.3) transparent !important;
}

.country-items-scrollbox::-webkit-scrollbar {
  width: 5px !important;
}

.country-items-scrollbox::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.3) !important;
  border-radius: 10px !important;
}

/* Individual Country Item */
.auth-country-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.6rem 0.85rem !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.18s ease !important;
  direction: rtl !important;
  box-sizing: border-box !important;
  gap: 0.6rem !important;
}

.auth-country-item:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  transform: translateX(-2px) !important;
}

.auth-country-item.selected {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
}

.auth-ci-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.auth-ci-flag {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.auth-ci-name {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: right !important;
}

.auth-ci-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

.auth-ci-code {
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  font-family: 'Outfit', sans-serif !important;
  direction: ltr !important;
  background: rgba(16, 185, 129, 0.15) !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  display: inline-block !important;
}

.auth-ci-check {
  color: #34d399 !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
}

.auth-input-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 16px !important;
  height: 54px !important;
  padding: 0 0.85rem !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: text !important;
}

.auth-input-box:hover {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

.auth-input-box:focus-within {
  background: rgba(10, 18, 30, 0.98) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25), 0 8px 30px -4px rgba(16, 185, 129, 0.35) !important;
  transform: translateY(-1.5px) !important;
}

.auth-input-box.has-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45) !important;
  animation: authFieldShake 0.45s ease-in-out !important;
}

.auth-input-box.is-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35) !important;
}

@keyframes authFieldShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Luxury Inline Field Error Message */
.auth-field-error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  color: #f87171 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-top: 0.38rem !important;
  text-align: right !important;
  line-height: 1.3 !important;
}

.auth-field-error.show {
  display: flex !important;
  animation: authErrorSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes authErrorSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Icon Badge Inside Field */
.auth-box-icon-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-left: 0.8rem !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  color: #34d399 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-input-box:focus-within .auth-box-icon-wrap {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
  transform: scale(1.08) !important;
}

.auth-box-svg-icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
}

.auth-field-control,
input.auth-field-control,
select.auth-field-control {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-style: none !important;
  outline: none !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  text-align: right !important;
  padding: 0 0.2rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Seamless Browser Autofill Background Blend (Dark Mode Only) */
body:not(.light-theme) .auth-field-control:-webkit-autofill,
body:not(.light-theme) .auth-field-control:-webkit-autofill:hover,
body:not(.light-theme) .auth-field-control:-webkit-autofill:focus,
body:not(.light-theme) .auth-field-control:-webkit-autofill:active,
html:not([data-theme="light"]) .auth-field-control:-webkit-autofill,
html:not([data-theme="light"]) .auth-field-control:-webkit-autofill:hover,
html:not([data-theme="light"]) .auth-field-control:-webkit-autofill:focus,
html:not([data-theme="light"]) .auth-field-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #091322 inset !important;
  box-shadow: 0 0 0 1000px #091322 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #34d399 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: transparent !important;
  color: #ffffff !important;
}

.auth-field-control::placeholder {
  color: #64748b !important;
}

.auth-box-eye {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin-right: 0.15rem !important;
}

.auth-box-eye:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10b981 !important;
  transform: scale(1.12) !important;
}

.auth-box-eye:active {
  transform: scale(0.95) !important;
}

.auth-eye-svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
}

/* 7. Forgot Password & Remember Me */
.auth-forgot-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: -0.2rem 0 1.4rem 0 !important;
  font-size: 0.82rem !important;
}

.auth-remember-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
}

.auth-remember-check input {
  accent-color: #10b981 !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.auth-forgot-link {
  color: #34d399 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.auth-forgot-link:hover {
  color: #6ee7b7 !important;
  text-decoration: underline !important;
}

/* 8. Shimmering Royal Emerald Submit Button */
.auth-emerald-btn,
.auth-red-btn {
  position: relative !important;
  width: 100% !important;
  height: 52px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.02rem !important;
  border-radius: 16px !important;
  border: 1.5px solid #34d399 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45), 0 0 20px rgba(52, 211, 153, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  font-family: inherit !important;
  overflow: hidden !important;
  margin-bottom: 1.4rem !important;
}

.auth-emerald-btn:hover,
.auth-red-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.65), 0 0 30px rgba(52, 211, 153, 0.45) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
}

.auth-emerald-btn .arb-arrow,
.auth-red-btn .arb-arrow {
  font-size: 1.15rem !important;
  transition: transform 0.25s ease !important;
}

.auth-emerald-btn:hover .arb-arrow,
.auth-red-btn:hover .arb-arrow {
  transform: translateX(-4px) !important;
}

/* Shimmer Sweep Animation */
.arb-shimmer {
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transform: skewX(-20deg) !important;
  animation: arbShimmerSweep 3.2s infinite ease-in-out !important;
}

@keyframes arbShimmerSweep {
  0% {
    left: -100%;
  }

  40%,
  100% {
    left: 200%;
  }
}

/* 9. Social Divider & Pills */
.auth-social-divider {
  position: relative !important;
  text-align: center !important;
  margin-bottom: 1.2rem !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
}

.auth-social-divider::before,
.auth-social-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.auth-social-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.9rem !important;
  margin-bottom: 1.6rem !important;
}

.auth-social-pill {
  height: 50px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  backdrop-filter: blur(10px) !important;
}

.auth-social-pill:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

/* 10. Footer Prompt */
.auth-footer-prompt {
  font-size: 0.88rem !important;
  color: #94a3b8 !important;
  margin-top: 0.4rem !important;
}

.auth-emerald-link,
.auth-red-link {
  color: #34d399 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  margin-right: 0.35rem !important;
  transition: color 0.2s ease !important;
}

.auth-emerald-link:hover,
.auth-red-link:hover {
  color: #6ee7b7 !important;
  text-decoration: underline !important;
}

.auth-admin-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.2px solid rgba(52, 211, 153, 0.35) !important;
  padding: 0.55rem 1.3rem !important;
  border-radius: 50px !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.auth-admin-pill-btn:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
}

/* ============================================================
   🔐 LUXURY PASSWORD RESET MODAL STYLES (VIP GLASSMORPHISM)
   ============================================================ */
.auth-reset-modal-card {
  max-width: 460px !important;
  width: 92% !important;
  background: linear-gradient(165deg, rgba(12, 23, 38, 0.98) 0%, rgba(6, 15, 26, 0.99) 100%) !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 28px !important;
  padding: 2.4rem 2rem !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.25) !important;
  direction: rtl !important;
  text-align: right !important;
  box-sizing: border-box !important;
  position: relative !important;
  animation: authCardSlowTopEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.auth-reset-header {
  text-align: center !important;
  margin-bottom: 1.6rem !important;
}

.auth-reset-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.12)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 0.8rem auto !important;
  font-size: 1.5rem !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35) !important;
}

.auth-reset-title {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.3rem 0 !important;
  background: linear-gradient(135deg, #ffffff 30%, #34d399 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.auth-reset-subtitle {
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Stepper Indicator */
.auth-reset-stepper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0.5rem 0.8rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 50px !important;
}

.reset-step-dot {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #64748b !important;
  transition: all 0.25s ease !important;
}

.reset-step-dot span {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

.reset-step-dot.active {
  color: #34d399 !important;
}

.reset-step-dot.active span {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

.reset-step-dot.completed span {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
}

.reset-step-line {
  flex: 1 !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  max-width: 25px !important;
  transition: background 0.25s ease !important;
}

.reset-step-line.active {
  background: #10b981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

/* Light Theme for Password Reset Modal */
body.light-theme .auth-reset-modal-card,
html[data-theme="light"] .auth-reset-modal-card {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15), 0 0 40px rgba(16, 185, 129, 0.15) !important;
}

body.light-theme .auth-reset-title,
html[data-theme="light"] .auth-reset-title {
  color: #0f172a !important;
}

body.light-theme .auth-reset-subtitle,
html[data-theme="light"] .auth-reset-subtitle {
  color: #64748b !important;
}

body.light-theme .auth-reset-stepper,
html[data-theme="light"] .auth-reset-stepper {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

/* Light Theme Support for Auth Card */
body.light-theme .auth-card-pixel,
html[data-theme="light"] .auth-card-pixel,
[data-theme="light"] .auth-card-pixel {
  background: #ffffff !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.12), 0 0 35px rgba(16, 185, 129, 0.1) !important;
}

body.light-theme .auth-brand-name,
html[data-theme="light"] .auth-brand-name,
[data-theme="light"] .auth-brand-name {
  background: linear-gradient(135deg, #e50027 0%, #ff1744 45%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #e50027 !important;
  filter: drop-shadow(0 2px 10px rgba(229, 0, 39, 0.35)) !important;
  font-weight: 900 !important;
}

body.light-theme .auth-brand-arabic,
html[data-theme="light"] .auth-brand-arabic,
[data-theme="light"] .auth-brand-arabic {
  display: none !important;
}

body.light-theme .auth-screen-title,
html[data-theme="light"] .auth-screen-title,
[data-theme="light"] .auth-screen-title {
  color: #064e3b !important;
  background: linear-gradient(135deg, #064e3b 0%, #059669 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

body.light-theme .auth-screen-sub,
html[data-theme="light"] .auth-screen-sub,
[data-theme="light"] .auth-screen-sub {
  color: #047857 !important;
  font-weight: 700 !important;
}

body.light-theme .auth-input-box,
html[data-theme="light"] .auth-input-box,
[data-theme="light"] .auth-input-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03), inset 0 1px 1px #ffffff !important;
}

body.light-theme .auth-input-box:hover,
html[data-theme="light"] .auth-input-box:hover,
[data-theme="light"] .auth-input-box:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(-1px) !important;
}

body.light-theme .auth-input-box:focus-within,
html[data-theme="light"] .auth-input-box:focus-within,
[data-theme="light"] .auth-input-box:focus-within {
  background: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18), 0 8px 25px -4px rgba(16, 185, 129, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

body.light-theme .auth-box-icon-wrap,
html[data-theme="light"] .auth-box-icon-wrap,
[data-theme="light"] .auth-box-icon-wrap {
  background: #ecfdf5 !important;
  border: 1px solid #d1fae5 !important;
  color: #059669 !important;
}

body.light-theme .auth-field-control,
html[data-theme="light"] .auth-field-control,
[data-theme="light"] .auth-field-control {
  color: #0f172a !important;
  font-weight: 700 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.light-theme .auth-field-control:-webkit-autofill,
body.light-theme .auth-field-control:-webkit-autofill:hover,
body.light-theme .auth-field-control:-webkit-autofill:focus,
body.light-theme .auth-field-control:-webkit-autofill:active,
html[data-theme="light"] .auth-field-control:-webkit-autofill,
html[data-theme="light"] .auth-field-control:-webkit-autofill:hover,
html[data-theme="light"] .auth-field-control:-webkit-autofill:focus,
html[data-theme="light"] .auth-field-control:-webkit-autofill:active,
[data-theme="light"] .auth-field-control:-webkit-autofill,
[data-theme="light"] .auth-field-control:-webkit-autofill:hover,
[data-theme="light"] .auth-field-control:-webkit-autofill:focus,
[data-theme="light"] .auth-field-control:-webkit-autofill:active,
body.light-theme input:-webkit-autofill,
body.light-theme input:-webkit-autofill:hover,
body.light-theme input:-webkit-autofill:focus,
body.light-theme input:-webkit-autofill:active,
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] input:-webkit-autofill:active,
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #064e3b !important;
  caret-color: #10b981 !important;
  background-color: #ffffff !important;
  color: #064e3b !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

body.light-theme .auth-field-control::placeholder,
html[data-theme="light"] .auth-field-control::placeholder,
[data-theme="light"] .auth-field-control::placeholder {
  color: #94a3b8 !important;
}

body.light-theme .auth-box-icon,
html[data-theme="light"] .auth-box-icon,
[data-theme="light"] .auth-box-icon {
  color: #059669 !important;
}

body.light-theme .auth-box-eye,
html[data-theme="light"] .auth-box-eye,
[data-theme="light"] .auth-box-eye {
  color: #059669 !important;
}

body.light-theme .auth-input-label,
html[data-theme="light"] .auth-input-label,
[data-theme="light"] .auth-input-label {
  color: #064e3b !important;
  font-weight: 800 !important;
}

body.light-theme .auth-forgot-link,
body.light-theme .auth-emerald-link,
html[data-theme="light"] .auth-forgot-link,
html[data-theme="light"] .auth-emerald-link,
[data-theme="light"] .auth-forgot-link,
[data-theme="light"] .auth-emerald-link {
  color: #047857 !important;
  font-weight: 800 !important;
}

body.light-theme .auth-remember-check,
html[data-theme="light"] .auth-remember-check,
[data-theme="light"] .auth-remember-check {
  color: #1e293b !important;
  font-weight: 700 !important;
}

body.light-theme .auth-mode-pill-tabs,
html[data-theme="light"] .auth-mode-pill-tabs,
[data-theme="light"] .auth-mode-pill-tabs {
  background: #e2e8f0 !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .auth-mpt-btn,
html[data-theme="light"] .auth-mpt-btn,
[data-theme="light"] .auth-mpt-btn {
  color: #334155 !important;
  font-weight: 800 !important;
}

body.light-theme .auth-mpt-btn.active,
html[data-theme="light"] .auth-mpt-btn.active,
[data-theme="light"] .auth-mpt-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

body.light-theme .auth-social-divider,
html[data-theme="light"] .auth-social-divider,
[data-theme="light"] .auth-social-divider {
  color: #334155 !important;
  font-weight: 800 !important;
}

body.light-theme .auth-social-divider span,
html[data-theme="light"] .auth-social-divider span,
[data-theme="light"] .auth-social-divider span {
  color: #334155 !important;
  font-weight: 800 !important;
  background: #ffffff !important;
  padding: 0 1rem !important;
}

body.light-theme .auth-social-divider::before,
body.light-theme .auth-social-divider::after,
html[data-theme="light"] .auth-social-divider::before,
html[data-theme="light"] .auth-social-divider::after,
[data-theme="light"] .auth-social-divider::before,
[data-theme="light"] .auth-social-divider::after {
  background: #cbd5e1 !important;
}

body.light-theme .auth-social-pill,
html[data-theme="light"] .auth-social-pill,
[data-theme="light"] .auth-social-pill {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .auth-social-pill:hover,
html[data-theme="light"] .auth-social-pill:hover,
[data-theme="light"] .auth-social-pill:hover {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .auth-social-apple .apple-icon-svg,
html[data-theme="light"] .auth-social-apple .apple-icon-svg,
[data-theme="light"] .auth-social-apple .apple-icon-svg {
  fill: #000000 !important;
  color: #000000 !important;
}

body.light-theme .auth-admin-pill-btn,
html[data-theme="light"] .auth-admin-pill-btn,
[data-theme="light"] .auth-admin-pill-btn {
  background: #ecfdf5 !important;
  border: 1.5px solid #059669 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.12) !important;
}

body.light-theme .auth-admin-pill-btn:hover,
html[data-theme="light"] .auth-admin-pill-btn:hover,
[data-theme="light"] .auth-admin-pill-btn:hover {
  background: #059669 !important;
  color: #ffffff !important;
}

body.light-theme .auth-country-dropdown-panel,
html[data-theme="light"] .auth-country-dropdown-panel {
  background: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 0 35px rgba(16, 185, 129, 0.15) !important;
}

body.light-theme #countrySearchInput,
html[data-theme="light"] #countrySearchInput {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .auth-country-item,
html[data-theme="light"] .auth-country-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

body.light-theme .auth-ci-name,
html[data-theme="light"] .auth-ci-name {
  color: #0f172a !important;
}

body.light-theme .auth-country-item:hover,
html[data-theme="light"] .auth-country-item:hover {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

body.light-theme .auth-country-item.selected,
html[data-theme="light"] .auth-country-item.selected {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #10b981 !important;
}

/* ============================================================
   📱 RESPONSIVE AUTH CARD — ALL SCREEN SIZES SHOW ALL ELEMENTS
   ============================================================ */

/* ≤ 520px — Small phones & large phones */
@media (max-width: 520px) {
  .auth-screenshot-wrapper {
    padding: 1.5rem 0.8rem !important;
    align-items: flex-start !important;
    padding-top: 4rem !important;
    overflow-y: auto !important;
    min-height: 100dvh !important;
  }

  .auth-card-pixel {
    padding: 2rem 1.4rem !important;
    border-radius: 22px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .auth-logo-r-wrap {
    width: 52px !important;
    height: 52px !important;
  }

  .auth-brand-name {
    font-size: 1.35rem !important;
    letter-spacing: 4px !important;
  }

  .auth-screen-title {
    font-size: 1.1rem !important;
  }

  .auth-screen-sub {
    font-size: 0.78rem !important;
    margin-bottom: 1rem !important;
  }

  .auth-mode-pill-tabs {
    margin-bottom: 1.2rem !important;
  }

  .auth-mpt-btn {
    font-size: 0.82rem !important;
    padding: 0.55rem 0.4rem !important;
  }

  .auth-field-group {
    margin-bottom: 0.9rem !important;
  }

  .auth-input-box {
    height: 48px !important;
    border-radius: 12px !important;
    padding: 0 0.85rem !important;
  }

  .auth-input-label {
    font-size: 0.8rem !important;
    margin-bottom: 0.35rem !important;
  }

  .auth-field-control {
    font-size: 0.88rem !important;
  }

  .auth-forgot-row {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.5rem !important;
    margin: 0.1rem 0 1.1rem 0 !important;
  }

  .auth-red-btn {
    height: 48px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    margin-bottom: 1.1rem !important;
  }

  .auth-social-grid {
    gap: 0.7rem !important;
    margin-bottom: 1.2rem !important;
  }

  .auth-social-pill {
    height: 46px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }

  .auth-footer-prompt {
    font-size: 0.82rem !important;
  }

  .auth-floating-back {
    top: 16px !important;
    left: 16px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .auth-orb-glow-1 {
    width: 280px !important;
    height: 280px !important;
    top: -60px !important;
    right: -40px !important;
  }

  .auth-orb-glow-2 {
    width: 240px !important;
    height: 240px !important;
    bottom: -60px !important;
    left: -30px !important;
  }
}

/* ≤ 400px — Very small phones */
@media (max-width: 400px) {
  .auth-screenshot-wrapper {
    padding: 3.5rem 0.6rem 1.2rem !important;
  }

  .auth-card-pixel {
    padding: 1.6rem 1.1rem !important;
    border-radius: 18px !important;
  }

  .auth-logo-r-wrap {
    width: 46px !important;
    height: 46px !important;
  }

  .auth-brand-name {
    font-size: 1.2rem !important;
    letter-spacing: 3px !important;
  }

  .auth-screen-title {
    font-size: 1rem !important;
  }

  .auth-screen-sub {
    display: none !important;
  }

  .auth-mpt-btn {
    font-size: 0.78rem !important;
    padding: 0.5rem 0.3rem !important;
  }

  .auth-input-box {
    height: 44px !important;
    border-radius: 10px !important;
  }

  .auth-red-btn {
    height: 46px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
  }

  .auth-social-pill {
    height: 42px !important;
    font-size: 0.8rem !important;
    gap: 0.4rem !important;
    border-radius: 10px !important;
  }

  .auth-remember-check span {
    font-size: 0.75rem !important;
  }
}

/* 521px–768px — tablets (portrait) */
@media (min-width: 521px) and (max-width: 768px) {
  .auth-screenshot-wrapper {
    padding: 2rem 1.5rem !important;
    align-items: center !important;
    overflow-y: auto !important;
    min-height: 100dvh !important;
  }

  .auth-card-pixel {
    padding: 2.4rem 2rem !important;
    max-width: 480px !important;
  }

  .auth-screen-sub {
    font-size: 0.82rem !important;
  }
}

/* Landscape phone + short screens */
@media (max-height: 680px) {
  .auth-screenshot-wrapper {
    align-items: flex-start !important;
    padding-top: 4rem !important;
    overflow-y: auto !important;
    min-height: 100dvh !important;
  }

  .auth-brand-center {
    margin-bottom: 0.3rem !important;
  }

  .auth-logo-r-wrap {
    width: 44px !important;
    height: 44px !important;
  }

  .auth-screen-sub {
    display: none !important;
  }

  .auth-field-group {
    margin-bottom: 0.75rem !important;
  }

  .auth-mode-pill-tabs {
    margin-bottom: 1rem !important;
  }

  .auth-red-btn {
    margin-bottom: 0.9rem !important;
  }

  .auth-social-grid {
    margin-bottom: 0.9rem !important;
  }

  .auth-card-pixel {
    padding: 1.6rem 1.8rem !important;
  }
}


/* ============================================================
   LUXURY LIGHT THEME STYLES (FULL WEBSITE OVERHAUL)
   ============================================================ */

/* ============================================================
   ?? LUXURY LIGHT THEME STYLES (FULL WEBSITE OVERHAUL)
   ============================================================ */
.theme-icon-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.75) !important;
  color: #ef4444 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.25) !important;
}

.theme-icon-btn:hover {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: #ef4444 !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.45) !important;
}

body.light-theme {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

body.light-theme .navbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .nav-link {
  color: #1e293b !important;
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
  color: #dc2626 !important;
}

body.light-theme .hero-section {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

body.light-theme .hero-title,
body.light-theme .hero-subtitle,
body.light-theme .section-title,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
  color: #0f172a !important;
}

body.light-theme .search-box {
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .search-field {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .search-input,
body.light-theme .search-select {
  color: #0f172a !important;
}

body.light-theme .master-stats-capsule {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .msc-val {
  color: #0f172a !important;
}

body.light-theme .msc-label {
  color: #64748b !important;
}

body.light-theme .property-card,
body.light-theme .category-card,
body.light-theme .dash-stat-card,
body.light-theme .dash-chart-card,
body.light-theme .admin-table-card,
body.light-theme .rrl-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

body.light-theme .card-body strong,
body.light-theme .property-title,
body.light-theme .category-name {
  color: #0f172a !important;
}

body.light-theme .category-count,
body.light-theme .property-location,
body.light-theme .section-subtitle {
  color: #64748b !important;
}

body.light-theme .section {
  background-color: #f8fafc !important;
}

body.light-theme .footer {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

body.light-theme .mobile-drawer-card {
  background: #ffffff !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

body.light-theme .md-curated-link {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}

body.light-theme .md-link-label {
  color: #0f172a !important;
}

/* ============================================================
   ?? ROYAL CONTACT MODAL (SPACIOUS LUXURY & SLOW SMOOTH CASCADE)
   ============================================================ */
.royal-contact-card {
  max-width: 630px !important;
  width: 95% !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  padding: 2.6rem 2.2rem !important;
  border-radius: 28px !important;
  background: linear-gradient(165deg, #151a2d 0%, #0d1020 50%, #090b16 100%) !important;
  border: 2px solid rgba(220, 38, 38, 0.45) !important;
  box-shadow: 0 35px 110px rgba(0, 0, 0, 0.95), 0 0 70px rgba(220, 38, 38, 0.25) !important;
  position: relative !important;
  animation: contactModalPopSmooth 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes contactModalPopSmooth {
  0% {
    opacity: 0;
    transform: translateY(-45px) scale(0.92);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.contact-close-btn {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

.contact-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.1) !important;
}

.contact-modal-icon {
  width: 66px !important;
  height: 66px !important;
  margin: 0 auto 0.9rem auto !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.2rem !important;
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.5) !important;
  animation: contactPhoneFloat 3.5s ease-in-out infinite !important;
}

@keyframes contactPhoneFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.45);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 18px 45px rgba(220, 38, 38, 0.75);
  }
}

.contact-badge-pill {
  display: inline-block !important;
  background: rgba(34, 197, 94, 0.15) !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  color: #86efac !important;
  padding: 0.28rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.6rem !important;
}

.contact-modal-title {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem 0 !important;
}

.text-ruby-glow {
  color: #ef4444 !important;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5) !important;
}

.contact-modal-subtitle {
  font-size: 0.86rem !important;
  color: #94a3b8 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.contact-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
  margin-bottom: 1.4rem !important;
}

.contact-action-card {
  text-decoration: none !important;
  border-radius: 20px !important;
  padding: 1.1rem 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.contact-action-card:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

.card-blue {
  background: rgba(59, 130, 246, 0.07) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.38) !important;
}

.card-green {
  background: rgba(34, 197, 94, 0.07) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.38) !important;
}

.card-red {
  background: rgba(239, 68, 68, 0.07) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.38) !important;
}

.card-gold {
  background: rgba(245, 158, 11, 0.07) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.38) !important;
}

.cac-icon-wrap {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
}

.icon-blue {
  background: rgba(59, 130, 246, 0.22) !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
}

.icon-green {
  background: rgba(34, 197, 94, 0.22) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
}

.icon-red {
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

.icon-gold {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

.cac-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}

.cac-title {
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  display: block !important;
}

.cac-val {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

.val-blue {
  color: #60a5fa !important;
  direction: ltr !important;
}

.val-green {
  color: #4ade80 !important;
  direction: ltr !important;
}

.val-red {
  color: #f87171 !important;
}

.val-gold {
  color: #fbbf24 !important;
}

.contact-inquiry-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  padding: 1.4rem !important;
  margin-bottom: 1.2rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.contact-inquiry-label {
  display: block !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  margin-bottom: 0.5rem !important;
}

.contact-inquiry-input {
  width: 100% !important;
  padding: 0.9rem 1.2rem !important;
  background: rgba(2, 6, 23, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  outline: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.contact-inquiry-input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.35) !important;
  background: rgba(2, 6, 23, 0.95) !important;
}

.contact-inquiry-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.btn-primary-send-wa {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  height: 50px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary-send-wa:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.6) !important;
}

.btn-primary-send-email {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  height: 50px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary-send-email:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.6) !important;
}

.contact-hours-footer {
  text-align: center !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

/* Light Theme for Royal Contact Modal */
html[data-theme="light"] .royal-contact-card,
body.light-theme .royal-contact-card {
  background: #ffffff !important;
  border: 1.5px solid #ef4444 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .contact-modal-title,
body.light-theme .contact-modal-title {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .contact-modal-subtitle,
body.light-theme .contact-modal-subtitle {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .contact-action-card,
body.light-theme .contact-action-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .cac-title,
body.light-theme .cac-title {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .contact-inquiry-box,
body.light-theme .contact-inquiry-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .contact-inquiry-label,
body.light-theme .contact-inquiry-label {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .contact-inquiry-input,
body.light-theme .contact-inquiry-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .contact-inquiry-input::placeholder,
body.light-theme .contact-inquiry-input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="light"] .contact-hours-footer,
body.light-theme .contact-hours-footer {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* --- STAGGER CONTACT ANIMATIONS --- */
@keyframes contactSlideRightSmooth {
  0% {
    opacity: 0;
    transform: translateX(45px) scale(0.96);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes contactSlideDownSmooth {
  0% {
    opacity: 0;
    transform: translateY(-25px) scale(0.94);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.contact-anim-item {
  opacity: 1 !important;
  animation: contactSlideRightSmooth 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.contact-step-1 {
  animation: contactSlideDownSmooth 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
}

.contact-step-2 {
  animation-delay: 0.12s !important;
}

.contact-step-3 {
  animation-delay: 0.20s !important;
}

.contact-step-4 {
  animation-delay: 0.28s !important;
}

.contact-step-5 {
  animation-delay: 0.36s !important;
}

.contact-step-6 {
  animation-delay: 0.44s !important;
}

.contact-step-7 {
  animation-delay: 0.52s !important;
}

@media (max-width: 600px) {
  .contact-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ?? RESPONSIVE FOOTER POLISH & LUXURY LIGHT THEME FIXES
   ============================================================ */
.footer {
  background: #0d0f17 !important;
  color: #e2e8f0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .footer {
  background: #ffffff !important;
  color: #0f172a !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .footer-desc,
body.light-theme .footer-col ul li a,
body.light-theme .contact-list li,
body.light-theme .copyright-text,
body.light-theme .footer-links a {
  color: #475569 !important;
}

body.light-theme .footer-col h5 {
  color: #0f172a !important;
}

body.light-theme .footer-col ul li a:hover,
body.light-theme .footer-links a:hover {
  color: #dc2626 !important;
}

body.light-theme .social-link {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.light-theme .social-link:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* Footer Grid Responsive */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 2.5rem;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-logo {
    justify-content: center !important;
  }

  .social-links {
    justify-content: center !important;
  }

  .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .footer-col ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .contact-list {
    align-items: center !important;
  }

  .footer-bottom-flex {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
    align-items: center !important;
  }

  .footer-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }
}

/* ============================================================
   ?? DEFINITIVE FIX: LANGUAGE PILL BUTTON (DARK & LIGHT THEMES)
   ============================================================ */
.lang-nav-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 0.5rem 1rem !important;
  height: 42px !important;
  border-radius: 50px !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.75) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: inherit !important;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.25) !important;
}

.lang-nav-pill-btn:hover {
  background: rgba(220, 38, 38, 0.25) !important;
  border-color: #ef4444 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.45) !important;
}

.lnp-flag {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.lnp-label {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.lnp-arrow {
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  display: inline-block !important;
}

/* Light Theme: High Contrast Black Text & Crisp Flag */
body.light-theme .lang-nav-pill-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(220, 38, 38, 0.8) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
}

body.light-theme .lang-nav-pill-btn .lnp-flag {
  font-size: 1.25rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.light-theme .lang-nav-pill-btn .lnp-label {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.light-theme .lang-nav-pill-btn .lnp-arrow {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

/* ============================================================
   ?? GLOBAL LANGUAGE MODAL (100% CARBON ONYX BLACK & CRISP WHITE TEXT)
   ============================================================ */
.lang-modal-backdrop {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.lang-modal-card {
  background: linear-gradient(165deg, #111111 0%, #0a0a0a 50%, #050505 100%) !important;
  border: 2px solid rgba(220, 38, 38, 0.6) !important;
  border-radius: 28px !important;
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.98), 0 0 80px rgba(220, 38, 38, 0.35) !important;
  color: #ffffff !important;
}

/* Force White Text on Modal Headers in BOTH Light & Dark Modes */
.lang-modal-card h3,
.lang-modal-card .lmc-title-box h3,
body.light-theme .lang-modal-card h3,
body.light-theme .lang-modal-card .lmc-title-box h3 {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
  margin: 0 0 0.25rem 0 !important;
}

.lang-modal-card p,
.lang-modal-card .lmc-title-box p,
body.light-theme .lang-modal-card p,
body.light-theme .lang-modal-card .lmc-title-box p {
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  margin: 0 !important;
}

.lmc-opt-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.lmc-opt-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
}

.lmc-opt-card.active {
  background: rgba(220, 38, 38, 0.16) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 30px rgba(220, 38, 38, 0.4) !important;
}

.lmc-opt-card strong,
body.light-theme .lmc-opt-card strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.lmc-opt-card small,
body.light-theme .lmc-opt-card small {
  color: #94a3b8 !important;
}

.lmc-close-btn,
body.light-theme .lmc-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.lmc-close-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
}

/* ============================================================
   ?? BULLETPROOF LIGHT & DARK THEME LANGUAGE BUTTON CONTRAST
   ============================================================ */
/* LIGHT THEME PILL TEXT MUST BE SOLID BLACK/DARK SLATE */
body.light-theme .lang-nav-pill-btn,
html[data-theme="light"] .lang-nav-pill-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(220, 38, 38, 0.8) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.2) !important;
}

body.light-theme .lang-nav-pill-btn *,
html[data-theme="light"] .lang-nav-pill-btn *,
body.light-theme .lnp-flag,
body.light-theme .lnp-label,
html[data-theme="light"] .lnp-flag,
html[data-theme="light"] .lnp-label {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

body.light-theme .lnp-arrow,
html[data-theme="light"] .lnp-arrow {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* DARK THEME PILL TEXT MUST BE SOLID WHITE */
body.dark-theme .lang-nav-pill-btn,
body:not(.light-theme) .lang-nav-pill-btn,
html:not([data-theme="light"]) .lang-nav-pill-btn {
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.75) !important;
  color: #ffffff !important;
}

body.dark-theme .lang-nav-pill-btn *,
body:not(.light-theme) .lang-nav-pill-btn *,
html:not([data-theme="light"]) .lang-nav-pill-btn *,
body.dark-theme .lnp-flag,
body.dark-theme .lnp-label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* ============================================================
   👑 ULTRA-LUXURY STANDALONE SAAS DASHBOARD & CONTROL PANEL
   ============================================================ */

body.is-standalone-view .navbar,
body.is-standalone-view header,
body.is-standalone-view .footer,
body.is-standalone-view footer,
body.is-standalone-view .mobile-bottom-nav,
body.is-standalone-view #scrollToTopBtn {
  display: none !important;
}

#page-dashboard {
  background: radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(5, 150, 105, 0.1) 0%, transparent 45%),
    #050b11 !important;
  min-height: 100vh !important;
  padding: 2.5rem 1.5rem 3.5rem !important;
  color: #ffffff !important;
  direction: rtl !important;
  animation: dashPageFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#page-admin-panel {
  background: radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    #050b11 !important;
  min-height: 100vh !important;
  padding: 2.5rem 1.5rem 4rem !important;
  color: #ffffff !important;
  direction: rtl !important;
  animation: dashPageFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes dashPageFadeIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 1.8rem !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  align-items: start !important;
}

/* 1. Glassmorphic Sidebar */
.dash-sidebar {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.9) 0%, rgba(8, 18, 16, 0.96) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 24px !important;
  padding: 1.8rem 1.2rem !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(16, 185, 129, 0.12) !important;
  position: sticky !important;
  top: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
  animation: dashCardSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.dash-user {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding-bottom: 1.2rem !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.15) !important;
}

.dash-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.55) !important;
  border: 2px solid rgba(110, 231, 183, 0.4) !important;
  flex-shrink: 0 !important;
}

.dash-user-info h4 {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 0.2rem 0 !important;
}

.dash-role {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  display: inline-block !important;
}

.dash-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}

.dash-nav-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1rem !important;
  border-radius: 14px !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  transition: all 0.25s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.dash-nav-item:hover {
  color: #ffffff !important;
  background: rgba(52, 211, 153, 0.08) !important;
  border-color: rgba(52, 211, 153, 0.2) !important;
  transform: translateX(-4px) !important;
}

.dash-nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.24) 0%, rgba(5, 150, 105, 0.12) 100%) !important;
  border-color: rgba(52, 211, 153, 0.65) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25) !important;
}

.dash-nav-icon {
  margin-left: 0.6rem !important;
  font-size: 1.1rem !important;
}

.dash-badge {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 12px !important;
  line-height: 1.2 !important;
  background: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.4) !important;
}

.dash-logout {
  margin-top: 0.8rem !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  color: #34d399 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 14px !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.25s ease !important;
}

.dash-logout:hover {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* 2. Dashboard Main Container */
.dash-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.8rem !important;
  min-width: 0 !important;
}

.dash-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.85) 0%, rgba(8, 18, 16, 0.94) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.2) !important;
  border-radius: 24px !important;
  padding: 1.4rem 1.8rem !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
  animation: dashCardSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.dash-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.2rem 0 !important;
  letter-spacing: -0.3px !important;
}

.dash-date {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #a7f3d0 !important;
  margin: 0 !important;
}

.dash-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
}

.dash-header-actions .btn-primary {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
  color: #ffffff !important;
  padding: 0.65rem 1.2rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.dash-header-actions .btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.6) !important;
}

.dash-header-actions .btn-outline {
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: #a7f3d0 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.dash-header-actions .btn-outline:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
}

.dash-notif {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.dash-notif:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  transform: scale(1.06) !important;
}

.notif-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8) !important;
}

/* 3. KPI Stats Grid */
.dash-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.2rem !important;
}

.dash-stat-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.85) 0%, rgba(8, 18, 16, 0.94) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.18) !important;
  border-radius: 20px !important;
  padding: 1.4rem 1.2rem !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  animation: dashCardSlideIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.dash-stat-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(16, 185, 129, 0.25) !important;
}

.dsc-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  flex-shrink: 0 !important;
}

.dsc-icon.blue {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dsc-icon.green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.dsc-icon.red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dsc-icon.yellow {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dsc-info {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 0.6rem !important;
  flex: 1 !important;
}

.dsc-val {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  font-family: 'Outfit', 'Cairo', sans-serif !important;
}

.dsc-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-top: 0.15rem !important;
}

.dsc-trend {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
}

.dsc-trend.up {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* 4. Charts & Inquiries Row */
.dash-charts-row {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 1.4rem !important;
}

.dash-chart-card,
.dash-table-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.85) 0%, rgba(8, 18, 16, 0.94) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.18) !important;
  border-radius: 24px !important;
  padding: 1.6rem 1.6rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  animation: dashCardSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.chart-card-header,
.table-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.2rem !important;
}

.chart-card-header h3,
.table-card-header h3 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.chart-period {
  display: flex !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
  border-radius: 12px !important;
  padding: 0.2rem !important;
}

.period-btn {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.period-btn.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
}

.badge-tag.new {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 8px !important;
  padding: 0.2rem 0.6rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
}

/* SVG Line Chart Styling */
.chart-svg {
  width: 100% !important;
  height: 140px !important;
  overflow: visible !important;
}

.chart-animated-path {
  stroke-dasharray: 600 !important;
  stroke-dashoffset: 600 !important;
  animation: dashDrawPath 2s ease forwards !important;
}

@keyframes dashDrawPath {
  to {
    stroke-dashoffset: 0;
  }
}

.chart-x-labels {
  display: flex !important;
  justify-content: space-between !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  margin-top: 0.6rem !important;
}

/* Recent Inquiries List */
.recent-requests-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}

.rrl-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 0.75rem !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.rrl-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: translateX(-4px) !important;
}

.rrl-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.rrl-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.rrl-info strong {
  font-size: 0.88rem !important;
  color: #ffffff !important;
}

.rrl-info span {
  font-size: 0.74rem !important;
  color: #94a3b8 !important;
}

.rrl-info small {
  font-size: 0.68rem !important;
  color: #64748b !important;
}

.rrl-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 8px !important;
}

.rrl-badge.pending {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
}

.rrl-badge.inq {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

.rrl-badge.offer {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

/* 5. Properties Performance Table */
.properties-table {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}

.table-header-row {
  display: grid !important;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr 1fr 1.2fr !important;
  padding: 0.75rem 1rem !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.table-row {
  display: grid !important;
  grid-template-columns: 2.2fr 1.2fr 1fr 1fr 1fr 1.2fr !important;
  align-items: center !important;
  padding: 0.85rem 1rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.table-row:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  transform: translateY(-2px) !important;
}

.table-prop-cell {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
}

.tp-img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

.tp-price {
  font-weight: 800 !important;
  color: #34d399 !important;
}

.tp-views {
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

.status-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  width: fit-content !important;
}

.status-badge.published {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

@keyframes dashCardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-36px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered Element Delays for Cascade from Top */
.dash-sidebar {
  animation: dashCardSlideIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.05s !important;
}

.dash-header {
  animation: dashCardSlideIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  animation-delay: 0.10s !important;
}

.dash-stat-card:nth-child(1) {
  animation-delay: 0.14s !important;
}

.dash-stat-card:nth-child(2) {
  animation-delay: 0.20s !important;
}

.dash-stat-card:nth-child(3) {
  animation-delay: 0.26s !important;
}

.dash-stat-card:nth-child(4) {
  animation-delay: 0.32s !important;
}

.dash-charts-row>div:nth-child(1) {
  animation-delay: 0.38s !important;
}

.dash-charts-row>div:nth-child(2) {
  animation-delay: 0.44s !important;
}

.dash-table-card {
  animation-delay: 0.50s !important;
}

/* Responsive */
@media (max-width: 1080px) {
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }

  .dash-sidebar {
    position: static !important;
  }

  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dash-charts-row {
    grid-template-columns: 1fr !important;
  }

  .table-header-row,
  .table-row {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .dash-stats-grid {
    grid-template-columns: 1fr !important;
  }

  #page-dashboard {
    padding: 4.5rem 0.8rem 2rem !important;
  }

  .dash-header {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
}

/* ============================================================
   💎 ADMIN MODERATION & ADS SUITE LUXURY STYLING
   ============================================================ */

.admin-filter-bar {
  margin-bottom: 1.8rem !important;
}

.admin-filter-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  background: rgba(16, 28, 25, 0.9) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 16px !important;
  padding: 0.45rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.admin-ftab {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0.6rem 1.1rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.25s ease !important;
}

.admin-ftab:hover {
  color: #ffffff !important;
  background: rgba(52, 211, 153, 0.1) !important;
}

.admin-ftab.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.admin-ads-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 1.5rem !important;
}

@media (max-width: 768px) {
  .admin-ads-grid {
    grid-template-columns: 1fr !important;
  }
}

.admin-s-ad-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.9) 0%, rgba(8, 18, 16, 0.96) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 20px !important;
  padding: 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: dashCardSlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.admin-s-ad-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(16, 185, 129, 0.15) !important;
}

/* Review Cards Suite */
.admin-reviews-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.2rem !important;
}

.admin-rev-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.9) 0%, rgba(8, 18, 16, 0.96) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.22) !important;
  border-radius: 20px !important;
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  animation: dashCardSlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.arc-header {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.arc-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
}

.arc-status-badge {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 12px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.admin-rev-card.status-approved .arc-status-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.arc-name {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-top: 0.2rem !important;
}

.arc-city {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
}

.arc-content {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
  font-size: 0.9rem !important;
  color: #e2e8f0 !important;
  line-height: 1.6 !important;
  font-style: italic !important;
}

.arc-actions {
  display: flex !important;
  gap: 0.7rem !important;
  align-items: center !important;
}

.arc-btn-approve {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.65rem 1.2rem !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
}

.arc-btn-reject {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  padding: 0.65rem 1.2rem !important;
  border-radius: 12px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ============================================================
   🏡 LUXURY PROPERTY DETAILS PAGE RESPONSIVE SPACING & SUITE
   ============================================================ */

#page-detail {
  padding-top: 7rem !important;
  padding-bottom: 5rem !important;
  min-height: 100vh !important;
  color: #ffffff !important;
  animation: dashPageFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.detail-top-action-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.9) 0%, rgba(8, 18, 16, 0.96) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 20px !important;
  padding: 1.1rem 1.5rem !important;
  margin-bottom: 1.8rem !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}

.detail-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

.detail-breadcrumb span {
  cursor: pointer !important;
  transition: color 0.2s ease !important;
}

.detail-breadcrumb span:hover {
  color: #34d399 !important;
}

.bc-active {
  color: #34d399 !important;
  font-weight: 900 !important;
  cursor: default !important;
}

.detail-share-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
}

.dsa-btn {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #a7f3d0 !important;
  padding: 0.55rem 1rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.dsa-btn:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.detail-layout {
  display: grid !important;
  grid-template-columns: 1fr 370px !important;
  gap: 2rem !important;
  align-items: start !important;
}

.gallery-top-controls-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
  margin-bottom: 1.2rem !important;
}

.gallery-media-tabs {
  display: flex !important;
  gap: 0.5rem !important;
  background: rgba(16, 28, 25, 0.9) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 16px !important;
  padding: 0.4rem !important;
}

.gmt-tab {
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0.55rem 1rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.gmt-tab:hover {
  color: #ffffff !important;
  background: rgba(52, 211, 153, 0.1) !important;
}

.gmt-tab.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

.gallery-quick-tools {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.gqt-btn {
  background: rgba(16, 28, 25, 0.85) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  color: #a7f3d0 !important;
  padding: 0.55rem 0.95rem !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.gqt-btn:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #ffffff !important;
}

.main-photo-frame {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  height: 480px !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
}

.main-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.main-photo-frame:hover .main-img {
  transform: scale(1.03) !important;
}

.property-info-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.9) 0%, rgba(8, 18, 16, 0.96) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 24px !important;
  padding: 2rem !important;
  margin-top: 1.8rem !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
}

.specs-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin: 1.8rem 0 !important;
}

.spec-item {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(52, 211, 153, 0.2) !important;
  border-radius: 16px !important;
  padding: 1.2rem 1rem !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

.spec-val {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  font-family: 'Outfit', 'Cairo', sans-serif !important;
}

.spec-label {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.detail-sidebar {
  position: sticky !important;
  top: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.agent-contact-card {
  background: linear-gradient(165deg, rgba(16, 28, 25, 0.92) 0%, rgba(8, 18, 16, 0.98) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 24px !important;
  padding: 1.8rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

@media (max-width: 1080px) {
  .detail-layout {
    grid-template-columns: 1fr !important;
  }

  .detail-sidebar {
    position: static !important;
  }
}

@media (max-width: 768px) {
  #page-detail {
    padding-top: 5.8rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .main-photo-frame {
    height: 300px !important;
  }

  .specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   👑 ULTIMATE COMPANY PROFILE PRESENTATION MODAL COLOR & SIZE OVERRIDES
   ============================================================ */
#companyProfileModal,
#companyProfileModal .cpm-modal-card {
  color: #ffffff !important;
}

#companyProfileModal h2,
#companyProfileModal h3,
#companyProfileModal h4,
#companyProfileModal h5,
#companyProfileModal .cpm-slide-title,
#companyProfileModal .cpm-titles h3,
#companyProfileModal .cpm-vm-header span,
#companyProfileModal .cpm-mod-pillar-card strong,
#companyProfileModal .cpm-val-card-mod strong,
#companyProfileModal .cpm-srv-card-mod strong,
#companyProfileModal .cpm-sec-info-box strong {
  color: #ffffff !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7) !important;
}

#companyProfileModal .cpm-titles h3 {
  font-size: 1.6rem !important;
}

#companyProfileModal .cpm-slide-title {
  font-size: 2.2rem !important;
  line-height: 1.35 !important;
}

#companyProfileModal p,
#companyProfileModal .cpm-slide-desc,
#companyProfileModal .cpm-vm-grand-card p,
#companyProfileModal .cpm-srv-card-mod p {
  color: #f1f5f9 !important;
  font-size: 1.1rem !important;
  line-height: 1.85 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

#companyProfileModal .cpm-titles span,
#companyProfileModal .cpm-sec-info-box span,
#companyProfileModal .cpm-slide-counter {
  color: #a7f3d0 !important;
  font-size: 0.95rem !important;
}

#companyProfileModal .cpm-tab-btn {
  color: #d1fae5 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  font-size: 1rem !important;
  padding: 0.75rem 1.4rem !important;
  font-weight: 800 !important;
}

#companyProfileModal .cpm-tab-btn:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
}

#companyProfileModal .cpm-tab-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #6ee7b7 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
}

/* Slide 8 & 9 Exact Layout Polish */
#cpm-slide-8 .cpm-split-slide {
  padding: 0 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  background: #ffffff !important;
}

#cpm-slide-8 .cpm-text-side {
  padding: 2.2rem 2rem !important;
  background: #ffffff !important;
}

#cpm-slide-8 h2 {
  color: #0f172a !important;
  text-shadow: none !important;
}

#cpm-slide-9>div {
  min-height: auto !important;
  padding: 2.2rem 2rem !important;
}

#cpm-slide-9 h2 {
  font-size: 2.3rem !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
}

/* ============================================================
   👑 LUXURY COPY INTERACTION, TOAST & MICRO-ANIMATIONS
   ============================================================ */
.cpm-copy-trigger {
  position: relative;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cpm-copy-trigger:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.cpm-copy-trigger:active {
  transform: scale(0.97);
}

.cpm-copied-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.8);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  white-space: nowrap;
}

.cpm-copied-badge.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px) scale(1);
}

.copied-pulse-glow {
  animation: copyPulseGlowAnim 0.6s ease-out;
}

@keyframes copyPulseGlowAnim {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Floating Luxury Toast */
.cpm-luxury-copy-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px) scale(0.92);
  background: rgba(10, 25, 20, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  padding: 1.2rem 1.6rem 1rem 1.6rem;
  max-width: 520px;
  width: 90%;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  direction: rtl;
  color: #ffffff;
  overflow: hidden;
}

.cpm-luxury-copy-toast.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.clct-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.clct-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.1));
  border: 1px solid rgba(52, 211, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.clct-text-box {
  flex: 1;
}

.clct-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: #a7f3d0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clct-msg {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #f1f5f9;
}

.clct-msg strong {
  color: #34d399;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.clct-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.clct-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.clct-footer {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}

.clct-cta-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  padding: 0.45rem 1.1rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
}

.clct-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(16, 185, 129, 0.5);
}

.clct-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: rgba(255, 255, 255, 0.1);
}

.clct-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #6ee7b7);
  animation: clctProgressAnim 4.2s linear forwards;
}

@keyframes clctProgressAnim {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}



/* ==========================================================================
   ✨ ROYAL CATEGORY CARDS & ENTRANCE ANIMATIONS (PREMIUM HIGH-TECH FINISH)
   ========================================================================== */

@keyframes categoryEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    filter: blur(8px);
  }

  60% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes luxuryGlowPulse {

  0%,
  100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  }

  50% {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  }
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}

.categories-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1.25rem !important;
  perspective: 1000px !important;
  margin-top: 1.5rem !important;
}

@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.9rem !important;
  }
}

.category-card {
  position: relative !important;
  background: linear-gradient(170deg, #161726 0%, #0d0e1a 100%) !important;
  border-radius: 22px !important;
  padding: 1.8rem 1.2rem !important;
  text-align: center !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  animation: categoryEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.category-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  opacity: 0.85 !important;
  transition: all 0.35s ease !important;
}

.category-icon {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 1.1rem !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  animation: iconFloat 4s ease-in-out infinite !important;
}

.category-icon svg {
  transition: transform 0.35s ease, filter 0.35s ease !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)) !important;
}

.category-name {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.5rem 0 !important;
  letter-spacing: -0.3px !important;
}

.category-count {
  display: inline-block !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 0.95rem !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
}

/* 1. Villas - Emerald Green */
.cat-card-villas,
.category-card:nth-child(1) {
  border-color: rgba(16, 185, 129, 0.35) !important;
  animation-delay: 0.1s !important;
}

.cat-card-villas::before,
.category-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent) !important;
}

.cat-icon-villas,
.category-card:nth-child(1) .category-icon {
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2) !important;
  animation-delay: 0s !important;
}

.cat-card-villas .category-count,
.category-card:nth-child(1) .category-count {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

.cat-card-villas:hover,
.category-card:nth-child(1):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #10b981 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(16, 185, 129, 0.4) !important;
}

.cat-card-villas:hover .category-icon,
.category-card:nth-child(1):hover .category-icon {
  transform: scale(1.18) rotate(6deg) !important;
  background: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5) !important;
}

.cat-card-villas:hover .category-count,
.category-card:nth-child(1):hover .category-count {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* 2. Apartments - Sapphire Blue */
.cat-card-apartments,
.category-card:nth-child(2) {
  border-color: rgba(59, 130, 246, 0.35) !important;
  animation-delay: 0.2s !important;
}

.cat-card-apartments::before,
.category-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, #3b82f6, transparent) !important;
}

.cat-icon-apartments,
.category-card:nth-child(2) .category-icon {
  background: rgba(59, 130, 246, 0.14) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2) !important;
  animation-delay: 0.5s !important;
}

.cat-card-apartments .category-count,
.category-card:nth-child(2) .category-count {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #93c5fd !important;
}

.cat-card-apartments:hover,
.category-card:nth-child(2):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(59, 130, 246, 0.4) !important;
}

.cat-card-apartments:hover .category-icon,
.category-card:nth-child(2):hover .category-icon {
  transform: scale(1.18) rotate(-6deg) !important;
  background: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5) !important;
}

.cat-card-apartments:hover .category-count,
.category-card:nth-child(2):hover .category-count {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* 3. Lands - Amber Gold */
.cat-card-lands,
.category-card:nth-child(3) {
  border-color: rgba(245, 158, 11, 0.35) !important;
  animation-delay: 0.3s !important;
}

.cat-card-lands::before,
.category-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent) !important;
}

.cat-icon-lands,
.category-card:nth-child(3) .category-icon {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.2) !important;
  animation-delay: 1s !important;
}

.cat-card-lands .category-count,
.category-card:nth-child(3) .category-count {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fde68a !important;
}

.cat-card-lands:hover,
.category-card:nth-child(3):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(245, 158, 11, 0.4) !important;
}

.cat-card-lands:hover .category-icon,
.category-card:nth-child(3):hover .category-icon {
  transform: scale(1.18) rotate(6deg) !important;
  background: rgba(245, 158, 11, 0.3) !important;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.5) !important;
}

.cat-card-lands:hover .category-count,
.category-card:nth-child(3):hover .category-count {
  background: #f59e0b !important;
  color: #000000 !important;
}

/* 4. Offices - Amethyst Purple */
.cat-card-offices,
.category-card:nth-child(4) {
  border-color: rgba(168, 85, 247, 0.35) !important;
  animation-delay: 0.4s !important;
}

.cat-card-offices::before,
.category-card:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, #a855f7, transparent) !important;
}

.cat-icon-offices,
.category-card:nth-child(4) .category-icon {
  background: rgba(168, 85, 247, 0.14) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.2) !important;
  animation-delay: 1.5s !important;
}

.cat-card-offices .category-count,
.category-card:nth-child(4) .category-count {
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #d8b4fe !important;
}

.cat-card-offices:hover,
.category-card:nth-child(4):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(168, 85, 247, 0.4) !important;
}

.cat-card-offices:hover .category-icon,
.category-card:nth-child(4):hover .category-icon {
  transform: scale(1.18) rotate(-6deg) !important;
  background: rgba(168, 85, 247, 0.3) !important;
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.5) !important;
}

.cat-card-offices:hover .category-count,
.category-card:nth-child(4):hover .category-count {
  background: #a855f7 !important;
  color: #ffffff !important;
}

/* 5. Commercial - Crimson Ruby */
.cat-card-commercial,
.category-card:nth-child(5) {
  border-color: rgba(239, 68, 68, 0.35) !important;
  animation-delay: 0.5s !important;
}

.cat-card-commercial::before,
.category-card:nth-child(5)::before {
  background: linear-gradient(90deg, transparent, #ef4444, transparent) !important;
}

.cat-icon-commercial,
.category-card:nth-child(5) .category-icon {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.2) !important;
  animation-delay: 2s !important;
}

.cat-card-commercial .category-count,
.category-card:nth-child(5) .category-count {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

.cat-card-commercial:hover,
.category-card:nth-child(5):hover {
  transform: translateY(-10px) scale(1.04) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(239, 68, 68, 0.4) !important;
}

.cat-card-commercial:hover .category-icon,
.category-card:nth-child(5):hover .category-icon {
  transform: scale(1.18) rotate(6deg) !important;
  background: rgba(239, 68, 68, 0.3) !important;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.5) !important;
}

.cat-card-commercial:hover .category-count,
.category-card:nth-child(5):hover .category-count {
  background: #ef4444 !important;
  color: #ffffff !important;
}


/* ==========================================================================
   ✨ ULTRA LUXURY COMPANY PROFILE MODAL & SPACIOUS TABS BAR DESIGN
   ========================================================================== */

#companyProfileModal .cpm-modal-card {
  max-width: 1180px !important;
  width: 95% !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: radial-gradient(circle at 50% 0%, #064e3b 0%, #062b1f 40%, #041812 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  border-radius: 28px !important;
  padding: 1.8rem 2.2rem 2.2rem 2.2rem !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(16, 185, 129, 0.25) !important;
  backdrop-filter: blur(30px) !important;
  overflow: hidden !important;
  animation: cpmModalFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes cpmModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cpm-modal-top-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 1.1rem !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.18) !important;
  margin-bottom: 1.3rem !important;
}

.cpm-brand-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.cpm-brand-badge {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.cpm-titles h3 {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  margin: 0 0 0.2rem 0 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
}

.cpm-titles span {
  font-size: 0.82rem !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 2px !important;
}

/* 🌿 LUXURY FLOATING SPACIOUS TABS BAR */
.cpm-tabs-scroll {
  display: flex !important;
  gap: 1rem !important;
  overflow-x: auto !important;
  padding: 0.75rem 1rem 1.1rem 1rem !important;
  margin-bottom: 1.8rem !important;
  background: rgba(4, 28, 19, 0.55) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.18) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(52, 211, 153, 0.35) transparent !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.cpm-tabs-scroll::-webkit-scrollbar {
  height: 6px !important;
}

.cpm-tabs-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.cpm-tabs-scroll::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.35) !important;
  border-radius: 10px !important;
}

.cpm-tabs-scroll::-webkit-scrollbar-thumb:hover {
  background: #10b981 !important;
}

/* 💎 Individual Luxury Tab Button */
.cpm-tab-btn,
#companyProfileModal .cpm-tab-btn {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.22) !important;
  color: #e2e8f0 !important;
  padding: 0.8rem 1.5rem !important;
  border-radius: 16px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
}

.cpm-tab-btn .cpm-tab-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 26px !important;
  padding: 0 0.45rem !important;
  background: rgba(52, 211, 153, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all 0.25s ease !important;
}

.cpm-tab-btn .cpm-tab-label {
  color: #e2e8f0 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.2px !important;
  transition: color 0.25s ease !important;
}

/* Hover State */
.cpm-tab-btn:hover,
#companyProfileModal .cpm-tab-btn:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
}

.cpm-tab-btn:hover .cpm-tab-num {
  background: rgba(52, 211, 153, 0.3) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
}

.cpm-tab-btn:hover .cpm-tab-label {
  color: #ffffff !important;
}

/* Active State */
.cpm-tab-btn.active,
#companyProfileModal .cpm-tab-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.55), 0 0 16px rgba(110, 231, 183, 0.35) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

.cpm-tab-btn.active .cpm-tab-num {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.cpm-tab-btn.active .cpm-tab-label {
  color: #ffffff !important;
}

/* 🌿 Slide Container & Animation */
.cpm-slide-container {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  padding: 0.5rem 0.5rem 1rem 0.5rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.35) transparent !important;
}

.cpm-slide-container::-webkit-scrollbar {
  width: 6px !important;
}

.cpm-slide-container::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.35) !important;
  border-radius: 10px !important;
}

.cpm-slide {
  display: none;
}

.cpm-slide.active {
  display: block !important;
  animation: cpmSlideFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes cpmSlideFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  #companyProfileModal .cpm-modal-card {
    padding: 1.2rem 1rem 1.4rem 1rem !important;
    border-radius: 20px !important;
  }

  .cpm-tabs-scroll {
    gap: 0.75rem !important;
    padding: 0.6rem 0.8rem 0.9rem 0.8rem !important;
    margin-bottom: 1.2rem !important;
  }

  .cpm-tab-btn,
  #companyProfileModal .cpm-tab-btn {
    padding: 0.65rem 1.1rem !important;
    font-size: 0.88rem !important;
    gap: 0.55rem !important;
  }
}


/* ==========================================================================
   💎 ULTRA RESPONSIVE & FLAWLESS MOBILE PERFECTION (COMPANY PROFILE MODAL)
   ========================================================================== */

/* Universal Layout & Scroll Container */
#companyProfileModal {
  padding: 10px !important;
  box-sizing: border-box !important;
}

#companyProfileModal .cpm-modal-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1100px !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: radial-gradient(circle at 50% 0%, #064e3b 0%, #062b1f 50%, #021811 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 24px !important;
  padding: 1.5rem 1.8rem 1.8rem 1.8rem !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.25) !important;
  overflow: hidden !important;
}

/* Hide native scrollbars on tabs bar for ultra-clean mobile swipe */
.cpm-tabs-scroll {
  display: flex !important;
  gap: 0.85rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE/Edge */
  padding: 0.5rem 0.6rem !important;
  margin-bottom: 1.4rem !important;
  background: rgba(4, 28, 19, 0.6) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.cpm-tabs-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.cpm-tab-btn {
  flex-shrink: 0 !important;
  padding: 0.7rem 1.3rem !important;
  border-radius: 14px !important;
  font-size: 0.92rem !important;
  gap: 0.6rem !important;
}

/* Split slides default 2 columns */
.cpm-split-slide {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 1.5rem !important;
  align-items: center !important;
}

.cpm-image-side {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1.5px solid rgba(52, 211, 153, 0.25) !important;
}

.cpm-image-side img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.cpm-slide-tag {
  display: inline-block !important;
  padding: 0.35rem 1rem !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #34d399 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  margin-bottom: 0.75rem !important;
}

.cpm-slide-title {
  font-size: 1.85rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.6rem 0 !important;
  line-height: 1.3 !important;
}

.cpm-slide-desc {
  font-size: 1.02rem !important;
  color: #cbd5e1 !important;
  line-height: 1.7 !important;
  margin: 0 0 1rem 0 !important;
}

/* ==========================================================================
   📱 TABLET RESPONSIVE (max-width: 900px)
   ========================================================================== */
@media (max-width: 900px) {
  #companyProfileModal .cpm-modal-card {
    padding: 1.2rem 1.4rem 1.4rem 1.4rem !important;
    border-radius: 20px !important;
    max-height: 94vh !important;
  }

  .cpm-split-slide {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .cpm-image-side {
    min-height: 220px !important;
    max-height: 260px !important;
  }

  #cpm-slide-3>div {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #cpm-slide-5>div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   📱 MOBILE RESPONSIVE (max-width: 650px) - ULTRA POLISHED & READABLE
   ========================================================================== */
@media (max-width: 650px) {
  #companyProfileModal {
    padding: 6px !important;
  }

  #companyProfileModal .cpm-modal-card {
    width: 100% !important;
    padding: 1rem 0.85rem 1.2rem 0.85rem !important;
    border-radius: 18px !important;
    max-height: 96vh !important;
  }

  /* Header */
  .cpm-modal-top-bar {
    padding-bottom: 0.75rem !important;
    margin-bottom: 0.9rem !important;
  }

  .cpm-brand-wrap {
    gap: 0.65rem !important;
  }

  .cpm-brand-badge {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.2rem !important;
    border-radius: 10px !important;
  }

  .cpm-titles h3 {
    font-size: 1.12rem !important;
    margin: 0 0 0.1rem 0 !important;
  }

  .cpm-titles span {
    font-size: 0.72rem !important;
    letter-spacing: 1px !important;
  }

  /* Mobile Tabs */
  .cpm-tabs-scroll {
    gap: 0.55rem !important;
    padding: 0.4rem 0.5rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
  }

  .cpm-tab-btn,
  #companyProfileModal .cpm-tab-btn {
    padding: 0.55rem 0.95rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
    gap: 0.45rem !important;
  }

  .cpm-tab-btn .cpm-tab-num {
    min-width: 24px !important;
    height: 22px !important;
    font-size: 0.72rem !important;
    padding: 0 0.3rem !important;
    border-radius: 6px !important;
  }

  .cpm-tab-btn .cpm-tab-label {
    font-size: 0.82rem !important;
  }

  /* Typography */
  .cpm-slide-title {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
  }

  .cpm-slide-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  /* Slide 1 Cover Mobile */
  #cpm-slide-1 h1 {
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
  }

  #cpm-slide-1 p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.2rem !important;
  }

  #cpm-slide-1 .btn-primary,
  #cpm-slide-1 .btn-secondary {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.75rem 1.2rem !important;
  }

  /* Slide 2 About Mobile */
  .cpm-pillars-mod-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Slide 3 Vision & Mission Mobile (STACKED 100% FULL WIDTH) */
  #cpm-slide-3>div {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.9rem !important;
  }

  .cpm-vm-grand-card {
    padding: 1.3rem 1.1rem !important;
    border-radius: 16px !important;
  }

  .cpm-vm-grand-card h3 {
    font-size: 1.25rem !important;
  }

  .cpm-vm-grand-card p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
  }

  /* Slide 4 Values Mobile */
  #cpm-slide-4>div:last-child {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Slide 5 Services Mobile (STACKED 100% FULL WIDTH) */
  #cpm-slide-5>div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.8rem !important;
  }

  /* Slide 6 Why RISALE Mobile */
  #cpm-slide-6 .cpm-text-side>div:last-child {
    grid-template-columns: 1fr !important;
    gap: 0.7rem !important;
  }

  /* Slide 7 Sectors Mobile */
  #cpm-slide-7>div:last-child {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  #cpm-slide-7 img {
    height: 120px !important;
  }

  /* Slide 8 Contact Mobile */
  #cpm-slide-8>div {
    padding: 1.2rem 1rem !important;
    border-radius: 16px !important;
  }

  #cpm-slide-8>div>div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Slide 9 Outro Mobile */
  #cpm-slide-9>div {
    padding: 2rem 1.1rem !important;
    border-radius: 18px !important;
  }

  #cpm-slide-9 h2 {
    font-size: 1.4rem !important;
    line-height: 1.35 !important;
  }

  #cpm-slide-9 a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}


/* ==========================================================================
   🛡️ BULLETPROOF RESPONSIVE FILTERS & INPUT BOXES OVERFLOW SHIELD
   ========================================================================== */

/* Universal Box Sizing & Input Bounds */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

input,
select,
textarea {
  max-width: 100% !important;
}

/* Standalone Listings Header */
.listings-standalone-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1.2rem !important;
  padding: 1.1rem 1.8rem !important;
  background: linear-gradient(135deg, rgba(11, 35, 26, 0.95) 0%, rgba(6, 22, 16, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 24px !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 15px 45px rgba(0,0,0,0.6), 0 0 35px rgba(16, 185, 129, 0.15) !important;
}

.lsh-left {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  flex-wrap: wrap !important;
}

.lsh-brand {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

.lsh-logo-icon {
  width: 44px !important;
  height: 44px !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.lsh-title {
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  letter-spacing: 0.3px !important;
}

.lsh-tag {
  font-size: 0.76rem !important;
  background: rgba(16,185,129,0.25) !important;
  color: #34d399 !important;
  border: 1.5px solid #10b981 !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 15px rgba(16,185,129,0.3) !important;
}

.lsh-desc {
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.lsh-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.lsh-btn-back {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  color: #6ee7b7 !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 14px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.lsh-btn-back:hover {
  background: rgba(16,185,129,0.3) !important;
  transform: translateY(-2px) !important;
}

.lsh-btn-maps {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  color: #a7f3d0 !important;
  padding: 0.6rem 1.3rem !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}

.lsh-btn-maps:hover {
  background: rgba(16,185,129,0.35) !important;
  transform: translateY(-2px) !important;
}

.lsh-btn-add {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(16,185,129,0.45) !important;
  transition: all 0.25s !important;
}

.lsh-btn-add:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.lsh-btn-req {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  color: #f1f5f9 !important;
  padding: 0.6rem 1.3rem !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
}

.lsh-btn-req:hover {
  border-color: rgba(16,185,129,0.6) !important;
  color: #6ee7b7 !important;
  transform: translateY(-2px) !important;
}

/* Listings Layout Grid */
.listings-layout {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  gap: 2.2rem !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .listings-layout {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
  }
}

/* Listings Sidebar */
.listings-sidebar {
  background: linear-gradient(170deg, rgba(8, 28, 20, 0.95) 0%, rgba(3, 15, 10, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 26px !important;
  padding: 1.8rem 1.6rem !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(16, 185, 129, 0.15) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.listings-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, #34d399, transparent);
}

.sidebar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 1.1rem !important;
  margin-bottom: 1.4rem !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.sidebar-header h3 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  letter-spacing: 0.3px !important;
}

.sidebar-header h3::before {
  content: '⚙️';
  font-size: 1.1rem;
}

.btn-clear {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  padding: 0.4rem 0.9rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-clear:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
}

/* Filter Groups */
.filter-group {
  margin-bottom: 1.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.filter-group-title {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  margin: 0 0 0.85rem 0 !important;
  letter-spacing: 0.3px !important;
}

/* Price & Search Inputs */
.price-range {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.price-inputs {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.9rem !important;
}

.price-inputs .price-input,
.price-input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 14px !important;
  padding: 0.75rem 1rem !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: right !important;
  font-family: inherit !important;
  transition: all 0.25s ease !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4) !important;
}

.price-inputs .price-input:focus,
.price-input:focus {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
}

.price-inputs span {
  color: #34d399 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

/* Range Slider */
.range-slider {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  accent-color: #10b981 !important;
  cursor: pointer !important;
  height: 6px !important;
  border-radius: 4px !important;
}

/* Room Buttons */
.room-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.room-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0.6rem 0.3rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: #cbd5e1 !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  font-family: inherit !important;
}

.room-btn:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.room-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Filter Checkboxes */
.filter-checks {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.check-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  color: #cbd5e1 !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 0.35rem 0.5rem !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.check-label:hover {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #ffffff !important;
}

.check-label input[type="checkbox"] {
  accent-color: #10b981 !important;
  width: 19px !important;
  height: 19px !important;
  cursor: pointer !important;
}

.check-count {
  margin-right: auto !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  padding: 0.15rem 0.6rem !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
}

/* Listings Main Section & Toolbar */
.listings-main {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.listings-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.2rem !important;
  padding: 1.1rem 1.6rem !important;
  background: linear-gradient(135deg, rgba(8, 28, 20, 0.9) 0%, rgba(3, 16, 11, 0.95) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 22px !important;
  margin-bottom: 2rem !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  flex-wrap: wrap !important;
}

.results-count {
  color: #34d399 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.sort-select {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 0.55rem 1.2rem !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  font-family: inherit !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.sort-select:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

.sort-select option {
  background: #0d1512 !important;
  color: #fff !important;
}

.view-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.view-btn:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.view-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.45) !important;
}

/* Listings Grid */
.listings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)) !important;
  gap: 2rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ultra-Luxury Emerald Property Card */
.property-card {
  background: linear-gradient(160deg, rgba(11, 35, 26, 0.95) 0%, rgba(4, 18, 13, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(16, 185, 129, 0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

.property-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  border-color: #10b981 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), 0 0 45px rgba(16, 185, 129, 0.35) !important;
}

.card-image-wrap {
  position: relative !important;
  overflow: hidden !important;
  height: 230px !important;
}

.card-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.property-card:hover .card-image-wrap img {
  transform: scale(1.08) !important;
}

.card-image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 18, 13, 0.85) 100%);
  pointer-events: none;
}

.card-fav-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(4, 18, 13, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 10 !important;
}

.card-fav-btn:hover {
  background: rgba(220, 38, 38, 0.4) !important;
  border-color: #ef4444 !important;
  transform: scale(1.15) !important;
}

.card-price-overlay {
  position: absolute !important;
  bottom: 0.85rem !important;
  left: 0.85rem !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
  padding: 0.4rem 0.95rem !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45) !important;
  z-index: 5 !important;
  letter-spacing: 0.3px !important;
}

.card-body {
  padding: 1.3rem 1.4rem 1.4rem !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.card-title {
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.45rem 0 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.property-card:hover .card-title {
  color: #34d399 !important;
}

.card-location {
  font-size: 0.86rem !important;
  color: #94a3b8 !important;
  margin: 0 0 1rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.card-specs {
  display: flex !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.2rem !important;
}

.card-spec {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 10px !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #a7f3d0 !important;
}


/* ==========================================================================
   🏰 ROYAL 4-COLUMN MASTER FOOTER STYLES (FLAWLESS DESKTOP & MOBILE)
   ========================================================================== */

.main-footer {
  background: #080911 !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  padding: 4.5rem 0 2.2rem 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1.15fr 1.25fr !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

.footer-col-title {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  margin: 0 0 1.2rem 0 !important;
  position: relative !important;
  padding-bottom: 0.6rem !important;
}

.footer-col-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 42px !important;
  height: 3px !important;
  background: #dc2626 !important;
  border-radius: 4px !important;
}

.footer-clean-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}

.footer-clean-links li a {
  color: #cbd5e1 !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  transition: all 0.22s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.footer-clean-links li a:hover {
  color: #ffffff !important;
  transform: translateX(-4px) !important;
}

.footer-contact-box-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
}

.f-contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  padding: 0.75rem 1rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #cbd5e1 !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
}

.f-contact-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.f-soc-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.05rem !important;
  transition: all 0.2s ease !important;
}

.f-soc-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  transform: translateY(-3px) !important;
}

.f-profile-cta-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.95)) !important;
  border-color: #34d399 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35) !important;
}


.footer-dev-pill:hover {
  border-color: #34d399 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4), 0 0 15px rgba(52, 211, 153, 0.3) !important;
}


/* ==========================================================================
   📦 EXACT 4-CARD BOXED LUXURY FOOTER (MATCHING SCREENSHOT 100%)
   ========================================================================== */

.footer-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
}

.footer-col {
  background: #0d0f18 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 22px !important;
  padding: 2.2rem 1.8rem !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.footer-col:hover {
  border-color: rgba(220, 38, 38, 0.35) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(220, 38, 38, 0.15) !important;
}


/* ==========================================================================
   🚨 GUARANTEED FIXED MODAL OVERLAY FOR COMPANY PROFILE (Z-INDEX 99999999)
   ========================================================================== */

#companyProfileModal,
.cpm-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(1, 10, 7, 0.9) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  z-index: 99999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

#companyProfileModal.open,
#companyProfileModal.active {
  display: flex !important;
}


/* ==========================================================================
   🛡️ SPACING FIX FOR FOOTER DEV PILL AND SCROLL-TO-TOP BUTTON
   ========================================================================== */

.footer-bottom-bar {
  padding-bottom: 5rem !important;
  position: relative !important;
}


/* ==========================================================================
   ✨ ROYAL SCROLL-DRIVEN LUXURY REVEAL ANIMATIONS ENGINE (CRISP & ACCESSIBLE)
   ========================================================================== */

.scroll-reveal,
.scroll-reveal-luxury {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal.revealed,
.scroll-reveal.is-revealed,
.scroll-reveal-luxury.revealed,
.scroll-reveal-luxury.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-35px) translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal-left.revealed,
.scroll-reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(35px) translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal-right.revealed,
.scroll-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}

.scroll-reveal-scale.revealed,
.scroll-reveal-scale.is-revealed {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

.footer-dev-pill {
  margin: 0.6rem auto 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
}

#scrollToTopBtn {
  left: 2rem !important;
  bottom: 2.2rem !important;
  z-index: 99999 !important;
}

@media (max-width: 768px) {
  #scrollToTopBtn {
    bottom: 5.5rem !important;
    left: 1.2rem !important;
    width: 46px !important;
    height: 46px !important;
  }
}


/* ==========================================================================
   ✨ ROYAL SCROLL-DRIVEN LUXURY REVEAL ANIMATIONS ENGINE
   ========================================================================== */

.scroll-reveal {
  opacity: 0 !important;
  transform: translateY(45px) scale(0.98) !important;
  filter: blur(5px) !important;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform, filter !important;
}

.scroll-reveal.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0px) !important;
}

.scroll-reveal-left {
  opacity: 0 !important;
  transform: translateX(-50px) translateY(10px) !important;
  filter: blur(5px) !important;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scroll-reveal-left.revealed,
.scroll-reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
  filter: blur(0px) !important;
}

.scroll-reveal-right {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scroll-reveal-right.revealed,
.scroll-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) !important;
  filter: blur(0px) !important;
}

.scroll-reveal-scale {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scroll-reveal-scale.revealed,
.scroll-reveal-scale.is-revealed {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  filter: blur(0px) !important;
}


/* ==========================================================================
   🗺️ BULLETPROOF LEAFLET MAP PINS & RESIZING SHIELD
   ========================================================================== */

.custom-leaflet-icon,
.custom-price-pin-icon {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.leaflet-city-badge {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 58, 138, 0.92) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.75) !important;
  border-radius: 50px !important;
  height: 32px !important;
  padding: 0 0.75rem !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.leaflet-city-badge:hover {
  transform: translateY(-3px) scale(1.1) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.7) !important;
}

.leaflet-city-badge .lcb-count {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 0.1rem 0.55rem !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
}


/* ===== NAVBAR CLEAN: hide old desktop action buttons, show only clean nav ===== */
#navDesktopActions,
.nav-desktop-actions {
  display: none !important;
}

/* Compact navbar actions gap */
.nav-actions {
  gap: 0.55rem !important;
}

/* Drawer logout btn */
#drawerLogoutBtn {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}

/* User pill in navbar */
.user-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}


/* ===== NAV GUEST ACTIONS: shown before login ===== */
#navGuestActions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

#navGuestActions.hidden-when-loggedin {
  display: none !important;
}


/* ==============================================================================
   ⭐ ULTRA-LUXURY RESPONSIVE REVIEWS & TESTIMONIALS SYSTEM (RISALE 2026)
   ============================================================================== */
.reviews-carousel-wrap {
  position: relative;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.reviews-track-outer {
  flex: 1;
  overflow: hidden;
  padding: 1.2rem 0.4rem;
  width: 100%;
}

.reviews-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  width: 100%;
}

/* Individual Review Card */
.review-card {
  flex: 0 0 calc(33.333% - 1rem);
  box-sizing: border-box;
  background: linear-gradient(165deg, rgba(22, 25, 37, 0.95) 0%, rgba(13, 14, 21, 0.98) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 1.6rem 1.6rem 1.4rem !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 280px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.review-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  border-color: rgba(220, 38, 38, 0.5) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(220, 38, 38, 0.18) !important;
  background: linear-gradient(165deg, rgba(28, 30, 44, 0.98) 0%, rgba(16, 17, 26, 1) 100%) !important;
}

/* Top Header */
.review-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.8rem !important;
  margin-bottom: 1.1rem !important;
  width: 100% !important;
}

.reviewer-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.reviewer-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .reviewer-avatar,
body.light-theme .reviewer-avatar {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.35) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.review-card:hover .reviewer-avatar {
  transform: scale(1.1) rotate(4deg) !important;
  border-color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.65) !important;
}

.reviewer-details-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.reviewer-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-wrap: wrap !important;
}

.reviewer-name {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.rev-verified-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 17px !important;
  height: 17px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
  flex-shrink: 0 !important;
}

/* 5. Interactive Sliding Mode Switcher (3 Tabs) */
.auth-mode-pill-tabs {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50px !important;
  padding: 0.25rem !important;
  margin-bottom: 1.4rem !important;
  backdrop-filter: blur(10px) !important;
  gap: 0.35rem !important;
}

.auth-mpt-btn {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0.6rem 0.3rem !important;
  border-radius: 50px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.auth-mpt-btn:hover {
  color: #ffffff !important;
}

.auth-mpt-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.5) !important;
}

.reviewer-city {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.review-stars {
  color: #eab308 !important;
  font-size: 0.95rem !important;
  letter-spacing: 2px !important;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.6)) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Review Text */
.review-text {
  font-size: 0.92rem !important;
  color: #e2e8f0 !important;
  line-height: 1.75 !important;
  margin-bottom: 1.2rem !important;
  flex-grow: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.15px !important;
}

/* Footer Section */
.review-card-footer {
  margin-top: auto !important;
  padding-top: 0.9rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.review-tag {
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  color: #fca5a5 !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 50px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  white-space: nowrap !important;
}

.review-meta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.review-date {
  color: #94a3b8 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.review-helpful {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.review-helpful:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Nav Buttons (Carousel arrows) */
.rev-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(22, 25, 37, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
  flex-shrink: 0;
  z-index: 10;
}

.rev-nav:hover {
  background: #dc2626;
  border-color: #ef4444;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
  transform: scale(1.1);
}

/* Dots */
.reviews-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.rev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.rev-dot.active {
  width: 28px;
  border-radius: 10px;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.6);
}

/* ==============================================================================
   📱 ADVANCED RESPONSIVE MEDIA QUERIES (TABLET & MOBILE)
   ============================================================================== */
@media (max-width: 1099px) {
  .review-card {
    flex: 0 0 calc(50% - 0.75rem) !important;
  }
}

@media (max-width: 768px) {
  .reviews-carousel-wrap {
    gap: 0.4rem;
  }

  .review-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    padding: 1.4rem 1.2rem 1.2rem !important;
    border-radius: 20px !important;
  }

  .reviewer-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }

  .reviewer-name {
    font-size: 0.95rem !important;
  }

  .review-text {
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
  }

  .rev-nav {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .review-card {
    padding: 1.2rem 1rem 1rem !important;
  }

  .review-card-footer {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .review-tag {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.6rem !important;
  }
}


/* ==============================================================================
   📱 ULTRA-CLEAN LUXURY RESPONSIVE NAVBAR & DRAWER ENGINE (RISALE)
   ============================================================================== */
@media (max-width: 991px) {
  .navbar {
    padding: 0 0.8rem !important;
    height: 64px !important;
  }

  .nav-container {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .nav-logo {
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  .logo-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.15rem !important;
    border-radius: 12px !important;
  }

  .logo-title-en {
    font-size: 1.15rem !important;
  }

  .logo-sub-tag {
    display: none !important;
  }

  /* Hide center desktop links */
  .nav-links {
    display: none !important;
  }

  /* Hide desktop-only buttons from top navbar on mobile */
  .nav-guest-actions {
    display: none !important;
  }

  .lang-nav-pill-btn {
    display: none !important;
  }

  .nav-auth-user-dropdown .user-pill-name,
  .nav-auth-user-dropdown .user-pill-arrow {
    display: none !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Hamburger Menu Button: Always Visible & Highlighted on Mobile */
  .hamburger {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(220, 38, 38, 0.08)) !important;
    border: 1.5px solid rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.25) !important;
    cursor: pointer !important;
    z-index: 100 !important;
  }

  .hamburger span {
    background: #ffffff !important;
    width: 20px !important;
    height: 2.2px !important;
  }

  .theme-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ============================================================
   👑 ULTRA-LUXURY ROYAL MOBILE BOTTOM NAVIGATION BAR & ADMIN UI
   ============================================================ */
.mobile-bottom-nav,
.mobile-bottom-navbar {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px !important;
  }

  .mobile-bottom-nav,
  .mobile-bottom-navbar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 64px !important;
    height: 64px !important;
    background: rgba(10, 15, 26, 0.98) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8) !important;
    z-index: 1000 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 2px 0.5rem calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    margin: 0 !important;
    direction: rtl !important;
    transform: translateZ(0) !important;
  }

  html[data-theme="light"] .mobile-bottom-nav,
  html[data-theme="light"] .mobile-bottom-navbar,
  body.light-theme .mobile-bottom-nav,
  body.light-theme .mobile-bottom-navbar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.08) !important;
  }
}

  .mbn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-decoration: none !important;
    color: #94a3b8 !important;
    flex: 1 !important;
    height: 100% !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    font-family: inherit !important;
    background: transparent !important;
    border: none !important;
  }

  html[data-theme="light"] .mbn-item,
  body.light-theme .mbn-item {
    color: #64748b !important;
  }

  .mbn-icon {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  .mbn-text {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
  }

  /* Active States matching Screenshot */
  #mbn-home.active {
    color: #ef4444 !important;
  }

  #mbn-home.active .mbn-text {
    color: #ef4444 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
  }

  #mbn-home.active .mbn-icon {
    transform: translateY(-2px) scale(1.15) !important;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6)) !important;
  }

  #mbn-maps.active {
    color: #38bdf8 !important;
  }

  #mbn-maps.active .mbn-text {
    color: #38bdf8 !important;
    font-weight: 900 !important;
  }

  #mbn-maps.active .mbn-icon {
    transform: translateY(-2px) scale(1.15) !important;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6)) !important;
  }

  #mbn-request.active {
    color: #fbbf24 !important;
  }

  #mbn-request.active .mbn-text {
    color: #fbbf24 !important;
    font-weight: 900 !important;
  }

  #mbn-request.active .mbn-icon {
    transform: translateY(-2px) scale(1.15) !important;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) !important;
  }

  #mbn-more.active,
  #mbn-dashboard.active {
    color: #ffffff !important;
  }

  #mbn-more.active .mbn-text,
  #mbn-dashboard.active .mbn-text {
    color: #ffffff !important;
    font-weight: 900 !important;
  }

  /* 🌟 Neon Cyan Glow Floating FAB (أضف عقارك) */
  .mbn-item-add {
    position: relative !important;
    top: -14px !important;
    overflow: visible !important;
  }

  .mbn-add-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.9), 0 0 50px rgba(6, 182, 212, 0.5), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    border: 3.5px solid #0a1224 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
  }

  /* Pulsing cyan neon aura behind circle */
  .mbn-add-circle::before {
    content: '' !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.45) 0%, transparent 70%) !important;
    z-index: -1 !important;
    animation: neonCyanPulse 2.5s ease-in-out infinite !important;
  }

  @keyframes neonCyanPulse {

    0%,
    100% {
      transform: scale(1);
      opacity: 0.7;
    }

    50% {
      transform: scale(1.25);
      opacity: 1;
    }
  }

  html[data-theme="light"] .mbn-add-circle,
  body.light-theme .mbn-add-circle {
    border-color: #ffffff !important;
  }

  .mbn-item-add:hover .mbn-add-circle,
  .mbn-item-add:active .mbn-add-circle {
    transform: scale(1.12) translateY(-2px) !important;
    box-shadow: 0 0 35px rgba(6, 182, 212, 1), 0 0 65px rgba(6, 182, 212, 0.6) !important;
  }

  .mbn-add-circle .mbn-icon {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)) !important;
  }

  .mbn-add-label {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    color: #38bdf8 !important;
    margin-top: 3px !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  }

  html[data-theme="light"] .mbn-add-label,
  body.light-theme .mbn-add-label {
    color: #0284c7 !important;
  }
}

/* --- Royal Admin Button & Badge --- */
.btn-nav-dashboard {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  border-radius: 50px !important;
  padding: 0.42rem 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.btn-nav-dashboard:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1.5px) !important;
}

html[data-theme="light"] .btn-nav-dashboard,
body.light-theme .btn-nav-dashboard {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

html[data-theme="light"] .btn-nav-dashboard:hover,
body.light-theme .btn-nav-dashboard:hover {
  background: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

/* ============================================================
   👑 ULTRA-LUXURY SPONSORED VIDEO AD SECTION & CAROUSEL STYLING
   ============================================================ */
.sponsored-ad-container {
  width: 100%;
  max-width: 1300px;
  margin: 2rem auto 2.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.sac-wrapper {
  background: linear-gradient(165deg, rgba(17, 24, 39, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.4);
  border-radius: 28px;
  padding: 1.4rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(220, 38, 38, 0.2);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.sac-wrapper:hover {
  border-color: rgba(220, 38, 38, 0.65);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.9), 0 0 45px rgba(220, 38, 38, 0.3);
}

/* Top Bar */
.sac-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.9rem;
}

.sac-top-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sac-badge-vip {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(153, 27, 27, 0.35) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  font-weight: 900;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}

.sac-live-dot-tag {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sac-live-dot-tag .live-dot-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: neonCyanPulse 1.5s infinite;
}

.sac-ad-counter-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Controls */
.sac-controls-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sac-ctrl-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
  font-family: inherit;
}

.sac-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.sac-add-ad-btn {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.5);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: inherit;
}

.sac-add-ad-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.7);
}

/* Video Frame - Responsive 16:9 */
.sac-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

#sponsoredVideoPlayer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video Overlay Badges */
.sac-video-overlay-badges {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
}

.sv-verified-badge {
  background: rgba(16, 185, 129, 0.9);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 0.35rem 0.8rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5);
}

.sv-tag-badge {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  padding: 0.3rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Multi-Ad Arrows */
.sac-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.22s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.sac-nav-arrow:hover {
  background: rgba(220, 38, 38, 0.9);
  border-color: #ef4444;
  transform: translateY(-50%) scale(1.1);
}

.sac-nav-prev {
  right: 14px;
}

.sac-nav-next {
  left: 14px;
}

/* Dots */
.sac-dots-row {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.75rem;
  border-radius: 50px;
  z-index: 10;
}

.sac-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
}

.sac-dot.active {
  width: 24px;
  border-radius: 10px;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* Details Below */
.sac-details-below {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sac-cat-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.sac-category-tag {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.82rem;
}

.sac-price-box {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.sac-price-val {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.sac-price-curr {
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 700;
}

.sac-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.35rem;
  line-height: 1.35;
}

.sac-desc {
  font-size: 0.92rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.6;
}

/* Specs Grid - Fully Responsive */
.sac-specs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
}

.sac-spec-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.75rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s ease;
}

.sac-spec-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

  .ssi-icon-box {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
  }

  .ssi-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
    text-align: right;
  }

  .ssi-label {
    font-size: 0.76rem;
    color: #94a3b8;
    font-weight: 700;
    letter-spacing: -0.1px;
  }

  .ssi-val {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 900;
    line-height: 1.3;
    word-break: break-word;
  }

  /* Actions Row */
  .sac-actions-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 0.8rem;
    margin-top: 0.3rem;
  }

  .sac-btn-wa {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.2rem;
    border-radius: 14px;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45);
    transition: all 0.22s ease;
    font-family: inherit;
  }

  .sac-btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.65);
  }

  .sac-btn-call {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #ffffff;
    border: none;
    padding: 0.85rem 1.2rem;
    border-radius: 14px;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    transition: all 0.22s ease;
    font-family: inherit;
  }

  .sac-btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.65);
  }

  .sac-btn-details {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    padding: 0.85rem 1.2rem;
    border-radius: 14px;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: all 0.22s ease;
    font-family: inherit;
  }

  .sac-btn-details:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
  }

  /* ============================================================
   📜 HOME LEGAL SECTION (PRIVACY & TERMS) RESPONSIVE STYLING
   ============================================================ */
  .home-legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }

  .home-legal-card {
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%);
    border-radius: 24px;
    padding: 2.2rem 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    transition: all 0.3s ease;
    direction: rtl;
    text-align: right;
  }

  .home-legal-card.card-privacy {
    border: 1.5px solid rgba(56, 189, 248, 0.3);
  }

  .home-legal-card.card-privacy:hover {
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 20px 50px rgba(56, 189, 248, 0.15);
  }

  .home-legal-card.card-terms {
    border: 1.5px solid rgba(251, 191, 36, 0.3);
  }

  .home-legal-card.card-terms:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 20px 50px rgba(251, 191, 36, 0.15);
  }

  .hlc-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .hlc-icon-box {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  }

  .hlc-title {
    font-size: 1.28rem;
    font-weight: 900;
    margin: 0 0 0.25rem;
    line-height: 1.3;
  }

  .hlc-subtitle {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 700;
    display: block;
  }

  .hlc-desc {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.85;
    margin: 0;
  }

  .home-legal-btn {
    width: 100%;
    padding: 0.85rem 1.4rem;
    border-radius: 14px;
    font-weight: 900;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  .home-legal-btn.btn-privacy {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(2, 132, 199, 0.3) 100%);
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
  }

  .home-legal-btn.btn-privacy:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border-color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.45);
  }

  .home-legal-btn.btn-terms {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(217, 119, 6, 0.3) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.45);
    color: #fde68a;
  }

  .home-legal-btn.btn-terms:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(217, 119, 6, 0.45);
  }

  /* ============================================================
   📱 ADVANCED RESPONSIVE BREAKPOINTS (MOBILE & TABLET EXCELLENCE)
   ============================================================ */
  @media (max-width: 991px) {
    .sac-specs-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.8rem;
    }

    .home-legal-grid {
      grid-template-columns: 1fr !important;
      gap: 1.3rem !important;
    }

    .sac-actions-row {
      grid-template-columns: 1fr 1fr;
    }

    .sac-actions-row .sac-btn-details {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 640px) {
    .sponsored-ad-container {
      padding: 0 0.5rem;
      margin: 1.2rem auto 1.8rem;
    }

    .sac-wrapper {
      padding: 1.1rem;
      border-radius: 20px;
      gap: 1rem;
    }

    .sac-top-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 0.7rem;
    }

    .sac-controls-group {
      justify-content: space-between;
    }

    .sac-video-frame {
      aspect-ratio: 16 / 10;
      max-height: 280px;
      border-radius: 16px;
    }

    .sac-nav-arrow {
      width: 36px;
      height: 36px;
      font-size: 1.4rem;
    }

    .sac-title {
      font-size: 1.2rem;
      line-height: 1.4;
    }

    .sac-desc {
      font-size: 0.88rem;
      line-height: 1.6;
    }

    .sac-specs-grid {
      grid-template-columns: 1fr !important;
      gap: 0.7rem !important;
    }

    .sac-spec-item {
      padding: 0.8rem 1rem !important;
    }

    .ssi-icon-box {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      font-size: 1.35rem !important;
    }

    .sac-actions-row {
      grid-template-columns: 1fr;
      gap: 0.7rem;
    }

    .home-legal-card {
      padding: 1.6rem 1.3rem !important;
      border-radius: 20px !important;
    }

    .hlc-desc {
      font-size: 0.9rem !important;
      line-height: 1.75 !important;
    }

    /* Header Navbar on Mobile */
    .nav-container {
      padding: 0 0.6rem !important;
      gap: 0.4rem !important;
    }

    .nav-actions {
      gap: 0.35rem !important;
    }

    .lang-nav-pill-btn {
      padding: 0.35rem 0.6rem !important;
      font-size: 0.8rem !important;
    }

    .theme-icon-btn {
      width: 36px !important;
      height: 36px !important;
    }

    /* ============================================================
   🚪 LUXURY LOGOUT CONFIRMATION MODAL ANIMATIONS & STYLES
   ============================================================ */
    @keyframes logoutModalPop {
      0% {
        opacity: 0;
        transform: scale(0.82) translateY(25px);
      }

      60% {
        transform: scale(1.03) translateY(-4px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    @keyframes logoutRingPulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 0.5;
      }

      50% {
        transform: scale(1.35);
        opacity: 0.15;
      }
    }

    @keyframes logoutIconFloat {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-6px) rotate(-4deg);
      }
    }

    .logout-modal-box {
      will-change: transform, opacity;
      transform-origin: center center;
    }

    /* ============================================================
   🌍 LUXURY COUNTRY CODE PICKER & PHONE AUTH STYLES
   ============================================================ */
    @keyframes countryPop {
      0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .auth-country-pill-btn:hover {
      background: rgba(30, 41, 59, 0.95) !important;
      border-color: rgba(56, 189, 248, 0.5) !important;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);
    }

    .auth-country-dropdown-panel::-webkit-scrollbar {
      width: 5px;
    }

    .auth-country-dropdown-panel::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }

    /* ============================================================
   🌟 ULTRA HIGH-CONTRAST & THEME HARMONY ENGINE (LIGHT & DARK)
   ============================================================ */

    /* 1. MEGA PROJECTS CARDS THEME HARMONY */
    .project-royal-card {
      background: linear-gradient(165deg, #0d1527 0%, #080d1a 100%) !important;
      border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
    }

    .project-royal-card .prc-dev {
      color: #38bdf8 !important;
    }

    .project-royal-card .prc-title,
    .project-royal-card h3 {
      color: #ffffff !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    }

    .project-royal-card .prc-desc,
    .project-royal-card p {
      color: #cbd5e1 !important;
    }

    .project-royal-card .prc-prog-wrap {
      background: rgba(255, 255, 255, 0.06) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .project-royal-card .prc-prog-label {
      color: #e2e8f0 !important;
    }

    .project-royal-card .prc-price {
      color: #38bdf8 !important;
    }

    /* Light Theme for Projects Cards */
    body.light-theme .project-royal-card,
    html[data-theme="light"] .project-royal-card {
      background: #ffffff !important;
      border: 1.5px solid rgba(2, 132, 199, 0.22) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07) !important;
    }

    body.light-theme .project-royal-card .prc-dev,
    html[data-theme="light"] .project-royal-card .prc-dev {
      color: #0284c7 !important;
      font-weight: 800 !important;
    }

    body.light-theme .project-royal-card .prc-title,
    body.light-theme .project-royal-card h3,
    html[data-theme="light"] .project-royal-card .prc-title,
    html[data-theme="light"] .project-royal-card h3 {
      color: #0f172a !important;
      text-shadow: none !important;
    }

    body.light-theme .project-royal-card .prc-desc,
    body.light-theme .project-royal-card p,
    html[data-theme="light"] .project-royal-card .prc-desc,
    html[data-theme="light"] .project-royal-card p {
      color: #475569 !important;
    }

    body.light-theme .project-royal-card .prc-prog-wrap,
    html[data-theme="light"] .project-royal-card .prc-prog-wrap {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
    }

    body.light-theme .project-royal-card .prc-prog-label,
    html[data-theme="light"] .project-royal-card .prc-prog-label {
      color: #1e293b !important;
      font-weight: 800 !important;
    }

    body.light-theme .project-royal-card .prc-price,
    html[data-theme="light"] .project-royal-card .prc-price {
      color: #0284c7 !important;
    }

    /* 2. REAL ESTATE AUCTIONS CARDS THEME HARMONY */
    .auction-royal-card {
      background: linear-gradient(165deg, #180d1e 0%, #0d0612 100%) !important;
      border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
    }

    .auction-royal-card .arc-title,
    .auction-royal-card h3 {
      color: #ffffff !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    }

    .auction-royal-card .arc-specs,
    .auction-royal-card .arc-specs span {
      color: #cbd5e1 !important;
    }

    .auction-royal-card .arc-court-bar {
      background: rgba(15, 7, 20, 0.88) !important;
      border: 1px solid rgba(239, 68, 68, 0.3) !important;
      color: #fca5a5 !important;
    }

    .auction-royal-card .arc-court-bar span {
      color: #fca5a5 !important;
    }

    .auction-royal-card .arc-timer-box {
      background: rgba(239, 68, 68, 0.12) !important;
      border: 1px solid rgba(239, 68, 68, 0.35) !important;
    }

    .auction-royal-card .arc-timer-title {
      color: #fca5a5 !important;
    }

    .auction-royal-card .arc-timer-digits {
      color: #ffffff !important;
    }

    .auction-royal-card .arc-price {
      color: #f87171 !important;
    }

    /* Light Theme for Auction Cards */
    body.light-theme .auction-royal-card,
    html[data-theme="light"] .auction-royal-card {
      background: #ffffff !important;
      border: 1.5px solid rgba(220, 38, 38, 0.22) !important;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07) !important;
    }

    body.light-theme .auction-royal-card .arc-title,
    body.light-theme .auction-royal-card h3,
    html[data-theme="light"] .auction-royal-card .arc-title,
    html[data-theme="light"] .auction-royal-card h3 {
      color: #0f172a !important;
      text-shadow: none !important;
    }

    body.light-theme .auction-royal-card .arc-specs,
    body.light-theme .auction-royal-card .arc-specs span,
    html[data-theme="light"] .auction-royal-card .arc-specs,
    html[data-theme="light"] .auction-royal-card .arc-specs span {
      color: #475569 !important;
      font-weight: 700 !important;
    }

    body.light-theme .auction-royal-card .arc-court-bar,
    html[data-theme="light"] .auction-royal-card .arc-court-bar {
      background: #fff1f2 !important;
      border: 1px solid rgba(220, 38, 38, 0.2) !important;
      color: #b91c1c !important;
    }

    body.light-theme .auction-royal-card .arc-court-bar span,
    html[data-theme="light"] .auction-royal-card .arc-court-bar span {
      color: #991b1b !important;
      font-weight: 800 !important;
    }

    body.light-theme .auction-royal-card .arc-timer-box,
    html[data-theme="light"] .auction-royal-card .arc-timer-box {
      background: #fff5f5 !important;
      border: 1px solid rgba(220, 38, 38, 0.25) !important;
    }

    body.light-theme .auction-royal-card .arc-timer-title,
    html[data-theme="light"] .auction-royal-card .arc-timer-title {
      color: #b91c1c !important;
      font-weight: 800 !important;
    }

    body.light-theme .auction-royal-card .arc-timer-digits,
    html[data-theme="light"] .auction-royal-card .arc-timer-digits {
      color: #0f172a !important;
    }

    body.light-theme .auction-royal-card .arc-price,
    html[data-theme="light"] .auction-royal-card .arc-price {
      color: #dc2626 !important;
    }

    /* 3. ADMIN ENTRANCE PILL IN LOGIN SCREEN */
    .auth-admin-pill-btn {
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      padding: 0.6rem 1.3rem !important;
      border-radius: 14px !important;
      font-size: 0.88rem !important;
      font-weight: 800 !important;
      text-decoration: none !important;
      transition: all 0.25s ease !important;
      background: rgba(16, 185, 129, 0.15) !important;
      border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
      color: #34d399 !important;
    }

    .auth-admin-pill-btn:hover {
      background: rgba(16, 185, 129, 0.25) !important;
      border-color: #10b981 !important;
      color: #ffffff !important;
      box-shadow: 0 0 20px rgba(16, 185, 129, 0.3) !important;
    }

    body.light-theme .auth-admin-pill-btn,
    html[data-theme="light"] .auth-admin-pill-btn {
      background: #ecfdf5 !important;
      border: 1.5px solid #059669 !important;
      color: #065f46 !important;
      box-shadow: 0 4px 15px rgba(5, 150, 105, 0.15) !important;
    }

    body.light-theme .auth-admin-pill-btn:hover,
    html[data-theme="light"] .auth-admin-pill-btn:hover {
      background: #059669 !important;
      color: #ffffff !important;
    }

    /* 4. DASHBOARD HEADER & STAT CARDS */
    .dash-header {
      background: linear-gradient(135deg, #064e3b 0%, #022c22 100%) !important;
      border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
      border-radius: 20px !important;
      padding: 1.5rem 1.8rem !important;
      margin-bottom: 2rem !important;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    }

    .dash-header .dash-title {
      color: #ffffff !important;
      font-size: 1.6rem !important;
      font-weight: 900 !important;
      margin: 0 !important;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    .dash-header .dash-date {
      color: #a7f3d0 !important;
      font-size: 0.88rem !important;
      font-weight: 700 !important;
      margin-top: 0.35rem !important;
    }

    body.light-theme .dash-header,
    html[data-theme="light"] .dash-header {
      background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
      border: 1.5px solid rgba(5, 150, 105, 0.4) !important;
      box-shadow: 0 12px 35px rgba(5, 150, 105, 0.2) !important;
    }

    body.light-theme .dash-header .dash-title,
    html[data-theme="light"] .dash-header .dash-title {
      color: #ffffff !important;
    }

    body.light-theme .dash-header .dash-date,
    html[data-theme="light"] .dash-header .dash-date {
      color: #ecfdf5 !important;
    }

    /* Dashboard Stat Cards */
    .dash-stat-card {
      background: #0d1527 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 18px !important;
    }

    .dash-stat-card .dsc-val {
      color: #ffffff !important;
      font-size: 1.6rem !important;
      font-weight: 900 !important;
    }

    .dash-stat-card .dsc-label {
      color: #94a3b8 !important;
      font-size: 0.84rem !important;
      font-weight: 700 !important;
    }

    body.light-theme .dash-stat-card,
    html[data-theme="light"] .dash-stat-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
    }

    body.light-theme .dash-stat-card .dsc-val,
    html[data-theme="light"] .dash-stat-card .dsc-val {
      color: #0f172a !important;
    }

    body.light-theme .dash-stat-card .dsc-label,
    html[data-theme="light"] .dash-stat-card .dsc-label {
      color: #64748b !important;
    }

    /* 5. PROPERTY DETAIL BREADCRUMB & TOP ACTION BAR */
    .detail-top-action-bar {
      background: linear-gradient(165deg, rgba(16, 28, 25, 0.95) 0%, rgba(8, 18, 16, 0.98) 100%) !important;
      border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
    }

    .detail-breadcrumb span {
      color: #cbd5e1 !important;
      font-weight: 700 !important;
    }

    .detail-breadcrumb .bc-sep {
      color: #64748b !important;
    }

    .detail-breadcrumb .bc-active {
      color: #34d399 !important;
      font-weight: 900 !important;
    }

    .detail-share-actions .dsa-btn {
      background: rgba(16, 185, 129, 0.15) !important;
      border: 1px solid rgba(52, 211, 153, 0.4) !important;
      color: #6ee7b7 !important;
      font-weight: 800 !important;
    }

    body.light-theme .detail-top-action-bar,
    html[data-theme="light"] .detail-top-action-bar {
      background: #ffffff !important;
      border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
    }

    body.light-theme .detail-breadcrumb span,
    html[data-theme="light"] .detail-breadcrumb span {
      color: #1e293b !important;
      font-weight: 800 !important;
    }

    body.light-theme .detail-breadcrumb .bc-sep,
    html[data-theme="light"] .detail-breadcrumb .bc-sep {
      color: #94a3b8 !important;
    }

    body.light-theme .detail-breadcrumb .bc-active,
    html[data-theme="light"] .detail-breadcrumb .bc-active {
      color: #059669 !important;
      font-weight: 900 !important;
    }

    body.light-theme .detail-share-actions .dsa-btn,
    html[data-theme="light"] .detail-share-actions .dsa-btn {
      background: #f0fdf4 !important;
      border: 1px solid #86efac !important;
      color: #065f46 !important;
      font-weight: 800 !important;
    }

    /* ============================================================
   🔥 6. UNIVERSAL ACTIVE BUTTONS & TABS WHITE TEXT FIX
   ============================================================ */
    .tour-type-btn.active,
    .tour-type-btn.active *,
    .tdm-tab.active,
    .tdm-tab.active *,
    .gmt-tab.active,
    .gmt-tab.active *,
    .gallery-media-tabs button.active,
    .gallery-media-tabs button.active *,
    .booking-switch-btn.active,
    .booking-switch-btn.active *,
    .detail-cta-btn.active,
    .detail-cta-btn.active *,
    .filter-pill.active,
    .filter-pill.active *,
    .auth-mpt-btn.active,
    .auth-mpt-btn.active *,
    .btn-primary,
    .btn-primary *,
    .auth-red-btn,
    .auth-red-btn * {
      color: #ffffff !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    }

    .tour-type-btn {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: #94a3b8 !important;
      border-radius: 12px !important;
      padding: 0.65rem 1.1rem !important;
      font-family: inherit !important;
      font-size: 0.88rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }

    .tour-type-btn:hover {
      color: #ffffff !important;
      background: rgba(255, 255, 255, 0.14) !important;
    }

    .tour-type-btn.active {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(239, 68, 68, 0.45) !important;
    }

    body.light-theme .tour-type-btn,
    html[data-theme="light"] .tour-type-btn {
      background: #f1f5f9 !important;
      border: 1px solid #cbd5e1 !important;
      color: #334155 !important;
    }

    body.light-theme .tour-type-btn.active,
    html[data-theme="light"] .tour-type-btn.active {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
      border-color: #ef4444 !important;
      color: #ffffff !important;
    }

    /* ============================================================
   🏛️ 7. FOOTER TITLES & CONTACT BOXES HIGH-CONTRAST FIX
   ============================================================ */
    .main-footer .footer-col-title,
    .main-footer h4,
    .main-footer h5,
    .footer-col-title,
    .footer-col h4,
    .footer-col h5,
    body.light-theme .main-footer .footer-col-title,
    body.light-theme .footer-col-title,
    body.light-theme .footer-col h4,
    body.light-theme .footer-col h5,
    html[data-theme="light"] .footer-col-title {
      color: #ffffff !important;
      font-weight: 900 !important;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    }

    .f-contact-card,
    body.light-theme .f-contact-card,
    html[data-theme="light"] .f-contact-card {
      background: rgba(20, 28, 45, 0.85) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
    }

    .f-contact-card .fcc-text,
    .f-contact-card .fcc-text strong,
    .f-contact-card .fcc-text span,
    body.light-theme .f-contact-card .fcc-text,
    body.light-theme .f-contact-card .fcc-text strong,
    body.light-theme .f-contact-card .fcc-text span,
    html[data-theme="light"] .f-contact-card .fcc-text span {
      color: #ffffff !important;
    }

    .f-contact-card:hover {
      background: rgba(30, 42, 68, 0.95) !important;
      border-color: rgba(239, 68, 68, 0.5) !important;
      transform: translateY(-2px) !important;
    }

    /* ============================================================
   🗺️ 8. MAPS COMPACT FILTER BAR HIGH-CONTRAST IN LIGHT MODE
   ============================================================ */
    body.light-theme .maps-compact-bar,
    html[data-theme="light"] .maps-compact-bar {
      background: #ffffff !important;
      border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    body.light-theme .mct-btn,
    html[data-theme="light"] .mct-btn {
      background: #f8fafc !important;
      border: 1px solid #cbd5e1 !important;
      color: #1e293b !important;
      font-weight: 800 !important;
    }

    body.light-theme .mct-btn.active,
    html[data-theme="light"] .mct-btn.active {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border-color: #10b981 !important;
      color: #ffffff !important;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35) !important;
    }

    body.light-theme .mct-search,
    html[data-theme="light"] .mct-search {
      background: #ffffff !important;
      border: 1.5px solid #cbd5e1 !important;
      color: #0f172a !important;
    }

    body.light-theme .mct-search::placeholder,
    html[data-theme="light"] .mct-search::placeholder {
      color: #94a3b8 !important;
    }

    body.light-theme .mct-purpose-btn,
    html[data-theme="light"] .mct-purpose-btn {
      background: #f1f5f9 !important;
      border: 1px solid #cbd5e1 !important;
      color: #334155 !important;
      font-weight: 800 !important;
    }

    body.light-theme .mct-purpose-btn.active,
    html[data-theme="light"] .mct-purpose-btn.active {
      background: #059669 !important;
      color: #ffffff !important;
      border-color: #059669 !important;
    }

    body.light-theme .mct-count,
    html[data-theme="light"] .mct-count {
      background: #f0fdf4 !important;
      border: 1px solid #86efac !important;
      color: #047857 !important;
      font-weight: 900 !important;
    }

    /* ============================================================
   ✨ LUXURY AUTHENTICATION BUTTON & NAVBAR ANIMATIONS
   ============================================================ */
    @keyframes authSpin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .auth-btn-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #ffffff;
      border-radius: 50%;
      animation: authSpin 0.65s linear infinite;
      margin-left: 0.5rem;
      vertical-align: middle;
    }

    .auth-red-btn.auth-btn-loading {
      opacity: 0.92;
      cursor: wait !important;
      background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%) !important;
      box-shadow: 0 0 20px rgba(220, 38, 38, 0.5) !important;
    }

    .auth-red-btn.auth-btn-success {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border-color: #10b981 !important;
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.6) !important;
      animation: authSuccessPulse 0.5s ease-out;
    }

    @keyframes authSuccessPulse {
      0% {
        transform: scale(0.97);
      }

      50% {
        transform: scale(1.03);
      }

      100% {
        transform: scale(1);
      }
    }

    /* 🌟 Top Navbar User Avatar Glowing Pop Animation */
    @keyframes navUserGlowPopAnim {
      0% {
        transform: scale(0.85);
        opacity: 0;
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
      }

      50% {
        transform: scale(1.08);
        opacity: 1;
        box-shadow: 0 0 25px rgba(16, 185, 129, 0.8), 0 0 10px rgba(255, 255, 255, 0.9);
      }

      100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
      }
    }

    .nav-user-glow-pop {
      animation: navUserGlowPopAnim 0.85s cubic-bezier(0.16, 1, 0.3, 1) both !important;
      border: 1.5px solid #10b981 !important;
    }

    /* ============================================================
   🗺️ STANDALONE FULL-SCREEN MAPS & LISTINGS PAGES
   ============================================================ */
    body.is-standalone-view .maps-page,
    body.is-standalone-view #page-maps,
    body.is-standalone-view #page-listings {
      padding-top: 1.2rem !important;
      padding-bottom: 3rem !important;
      min-height: 100vh !important;
    }

    body.is-standalone-view .maps-page-wrapper,
    body.is-standalone-view .listings-container {
      padding-top: 0 !important;
    }

  }

/* ============================================================
   🛡️ LUXURY EMERALD LEGAL COMPLIANCE & PRIVACY MODAL SYSTEM
   ============================================================ */
.legal-modal-backdrop,
#legalComplianceModal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(4, 8, 16, 0.88) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  z-index: 9999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.2rem !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.legal-modal-backdrop.active,
#legalComplianceModal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 3D Spring Glide & Zoom Entrance Animation */
@keyframes legalModal3dEntrance {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(-45px) perspective(1200px) rotateX(12deg);
    filter: blur(10px);
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
  }

  65% {
    opacity: 1;
    transform: scale(1.02) translateY(6px) perspective(1200px) rotateX(-2deg);
    filter: blur(0);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 60px rgba(16, 185, 129, 0.45);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0) perspective(1200px) rotateX(0deg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(16, 185, 129, 0.3);
  }
}

.legal-modal-card {
  max-width: 820px !important;
  width: 94% !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  background: linear-gradient(145deg, rgba(11, 23, 38, 0.98), rgba(6, 15, 26, 0.99)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 28px !important;
  padding: 2.2rem !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95), 0 0 40px rgba(16, 185, 129, 0.3) !important;
  backdrop-filter: blur(35px) !important;
  -webkit-backdrop-filter: blur(35px) !important;
  color: #ffffff !important;
  margin: auto !important;
  animation: legalModal3dEntrance 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Custom Scrollbar for Legal Modal Card */
.legal-modal-card::-webkit-scrollbar {
  width: 6px;
}

.legal-modal-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.legal-modal-card::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.4);
  border-radius: 10px;
}

.legal-modal-card::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 211, 153, 0.8);
}

/* Modal Header */
.legal-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.2) !important;
  padding-bottom: 1.4rem !important;
  margin-bottom: 1.4rem !important;
  gap: 1rem !important;
}

.legal-modal-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.legal-header-icon-box {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35) !important;
}

.legal-header-icon {
  font-size: 1.6rem !important;
  z-index: 2 !important;
}

@keyframes pulseRingEmerald {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 0;
  }

  100% {
    transform: scale(0.95);
    opacity: 0;
  }
}

.legal-pulse-ring {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 18px !important;
  border: 1.5px solid #10b981 !important;
  animation: pulseRingEmerald 2s ease-out infinite !important;
  pointer-events: none !important;
}

.legal-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  color: #34d399 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.65rem !important;
  border-radius: 50px !important;
  margin-bottom: 0.35rem !important;
}

.legal-header-title {
  margin: 0 0 0.2rem 0 !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}

.legal-header-subtitle {
  margin: 0 !important;
  font-size: 0.84rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.legal-close-icon-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.legal-close-icon-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.1) !important;
}

/* Tabs Navigation */
.legal-tabs-nav {
  display: flex !important;
  gap: 0.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.6rem !important;
  flex-wrap: wrap !important;
}

.legal-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

.legal-tab-btn:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  color: #6ee7b7 !important;
  transform: translateY(-2px) !important;
}

.legal-tab-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Highlight Box */
.legal-box-highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 78, 59, 0.25)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 20px !important;
  padding: 1.4rem !important;
  margin-bottom: 1.4rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.highlight-privacy {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(6, 95, 70, 0.25)) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
}

.highlight-terms {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(180, 83, 9, 0.2)) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}

.highlight-fal {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(4, 120, 87, 0.3)) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
}

.lbh-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}

.lbh-icon {
  font-size: 1.3rem !important;
}

.lbh-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
}

.highlight-terms .lbh-title {
  color: #fbbf24 !important;
}

.highlight-fal .lbh-title {
  color: #4ade80 !important;
}

.lbh-desc {
  color: #ecfdf5 !important;
  font-size: 0.92rem !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* Points List */
.legal-points-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
}

.legal-point-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.8rem !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 0.9rem 1.1rem !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  color: #cbd5e1 !important;
}

.lpi-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  margin-top: 0.15rem !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
}

.legal-point-item strong {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Actions */
.legal-modal-actions {
  text-align: center !important;
  margin-top: 2rem !important;
  border-top: 1px solid rgba(52, 211, 153, 0.2) !important;
  padding-top: 1.4rem !important;
}

.legal-modal-emerald-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1.5px solid #34d399 !important;
  color: #ffffff !important;
  padding: 0.75rem 2.8rem !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.45), 0 0 20px rgba(52, 211, 153, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.legal-modal-emerald-btn:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6), 0 0 30px rgba(52, 211, 153, 0.5) !important;
  background: linear-gradient(135deg, #34d399, #059669) !important;
}

/* Smooth Tab Pane Switch & Staggered Points Animation */
@keyframes legalPaneEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.legal-tab-pane {
  animation: legalPaneEntrance 0.38s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes legalPointStagger {
  0% {
    opacity: 0;
    transform: translateX(15px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.legal-point-item:nth-child(1) {
  animation: legalPointStagger 0.3s 0.05s ease both !important;
}

.legal-point-item:nth-child(2) {
  animation: legalPointStagger 0.3s 0.12s ease both !important;
}

.legal-point-item:nth-child(3) {
  animation: legalPointStagger 0.3s 0.18s ease both !important;
}

/* Continuous Smooth Scroll Reveal Transitions */
.scroll-reveal,
.property-card,
.category-card,
.feature-card,
.benefit-card,
.auction-card,
.stat-item {
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  will-change: transform, opacity;
}

/* Footer Bottom Legal Pill Links */
.footer-legal-pill-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #6ee7b7 !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 50px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-legal-pill-link:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* ========================= 🏆 CELEBRATION AD SUBMISSION & NOTIFICATIONS ========================= */
.celebration-ad-modal {
  animation: modalCelebrationZoom 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  background: linear-gradient(165deg, #091a13 0%, #030a07 100%) !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 35px 120px rgba(0,0,0,0.95), 0 0 70px rgba(16,185,129,0.35) !important;
  color: #ffffff !important;
}

.celebration-ad-modal p {
  color: #e2e8f0 !important;
}

@keyframes modalCelebrationZoom {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.cas-icon-orb {
  animation: casIconPulse 2.5s ease-in-out infinite alternate !important;
}

@keyframes casIconPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.35);
  }

  100% {
    transform: scale(1.08);
    box-shadow: 0 0 50px rgba(52, 211, 153, 0.7);
  }
}

.nav-notif-btn:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.45) !important;
  transform: scale(1.05) !important;
}

.notif-items-list::-webkit-scrollbar {
  width: 5px;
}

.notif-items-list::-webkit-scrollbar-thumb {
  background: rgba(52, 211, 153, 0.3);
  border-radius: 10px;
}

/* ========================= 👑 VIP GENERAL MANAGER LOGIN KEYFRAMES ========================= */
@keyframes vipAuraFlash {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  30% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

@keyframes vipSparklePop {
  0% {
    opacity: 0;
    transform: scale(0) translateY(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.4) translateY(-20px);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) translateY(-45px);
  }
}

/* ========================= 🚪 LUXURY LOGOUT MODAL ANIMATIONS ========================= */
@keyframes logoutModalPop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(24px);
  }

  60% {
    opacity: 1;
    transform: scale(1.03) translateY(-4px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes logoutRingPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }

  100% {
    transform: scale(0.92);
    opacity: 0.35;
  }
}

@keyframes logoutIconFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}

/* ==========================================================================
   ☀️ ULTRA-LUXURY GLOBAL LIGHT THEME ENGINE (100% COMPREHENSIVE COVERAGE)
   ========================================================================== */

html[data-theme="light"],
body.light-theme {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Navbar in Light Theme */
html[data-theme="light"] .navbar,
body.light-theme .navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .nav-link,
body.light-theme .nav-link {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active,
body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
  color: #059669 !important;
  background: #ecfdf5 !important;
}

html[data-theme="light"] .logo-title-en,
body.light-theme .logo-title-en {
  background: linear-gradient(135deg, #e50027 0%, #ff1744 45%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #e50027 !important;
}

html[data-theme="light"] .logo-sub-tag,
body.light-theme .logo-sub-tag {
  color: #059669 !important;
}

/* Listings Page in Light Theme */
html[data-theme="light"] #page-listings,
body.light-theme #page-listings {
  background: radial-gradient(circle at 50% 0%, #ecfdf5 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}

html[data-theme="light"] .listings-standalone-header,
body.light-theme .listings-standalone-header {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06), 0 0 25px rgba(16, 185, 129, 0.1) !important;
}

html[data-theme="light"] .listings-standalone-header h3,
body.light-theme .listings-standalone-header h3 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .listings-standalone-header span,
body.light-theme .listings-standalone-header span {
  color: #334155 !important;
}

html[data-theme="light"] .listings-standalone-header button,
body.light-theme .listings-standalone-header button {
  color: #0f172a !important;
}

html[data-theme="light"] .listings-standalone-header button:first-child,
body.light-theme .listings-standalone-header button:first-child {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .listings-standalone-header button[onclick*="maps"],
body.light-theme .listings-standalone-header button[onclick*="maps"] {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .listings-standalone-header button[onclick*="request"],
body.light-theme .listings-standalone-header button[onclick*="request"] {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .listings-standalone-header button[onclick*="add-property"],
body.light-theme .listings-standalone-header button[onclick*="add-property"] {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.4) !important;
}

/* Sidebar in Light Theme */
html[data-theme="light"] .listings-sidebar,
body.light-theme .listings-sidebar {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .sidebar-header,
body.light-theme .sidebar-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

html[data-theme="light"] .sidebar-header h3,
body.light-theme .sidebar-header h3 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .btn-clear,
body.light-theme .btn-clear {
  background: #fee2e2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .filter-group-title,
body.light-theme .filter-group-title {
  color: #047857 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .price-inputs .price-input,
html[data-theme="light"] .price-input,
body.light-theme .price-inputs .price-input,
body.light-theme .price-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .price-inputs .price-input:focus,
html[data-theme="light"] .price-input:focus,
body.light-theme .price-inputs .price-input:focus,
body.light-theme .price-input:focus {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="light"] .price-input::placeholder,
body.light-theme .price-input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .price-inputs span,
body.light-theme .price-inputs span {
  color: #047857 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .check-label,
body.light-theme .check-label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .check-label:hover,
body.light-theme .check-label:hover {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

html[data-theme="light"] .check-count,
body.light-theme .check-count {
  background: #d1fae5 !important;
  color: #047857 !important;
  border: 1px solid #6ee7b7 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .room-btn,
body.light-theme .room-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .room-btn:hover,
body.light-theme .room-btn:hover {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}

html[data-theme="light"] .room-btn.active,
body.light-theme .room-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* Toolbar in Light Theme */
html[data-theme="light"] .listings-toolbar,
body.light-theme .listings-toolbar {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .results-count,
body.light-theme .results-count {
  color: #047857 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .sort-select,
body.light-theme .sort-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .sort-select option,
body.light-theme .sort-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .view-btn,
body.light-theme .view-btn {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}

html[data-theme="light"] .view-btn:hover,
body.light-theme .view-btn:hover {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
}

html[data-theme="light"] .view-btn.active,
body.light-theme .view-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}

/* Property Cards in Light Theme */
html[data-theme="light"] .property-card,
body.light-theme .property-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .property-card:hover,
body.light-theme .property-card:hover {
  border-color: #10b981 !important;
  box-shadow: 0 22px 50px rgba(16, 185, 129, 0.22) !important;
}

html[data-theme="light"] .card-title,
body.light-theme .card-title {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .card-location,
body.light-theme .card-location {
  color: #475569 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .card-spec,
body.light-theme .card-spec {
  background: #ecfdf5 !important;
  border: 1.5px solid #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .card-body button,
body.light-theme .card-body button {
  font-family: inherit !important;
}

/* Detail Button inside Card in Light Theme */
html[data-theme="light"] .property-card .card-body button[onclick*="openProperty"],
body.light-theme .property-card .card-body button[onclick*="openProperty"] {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .property-card .card-body button[onclick*="openProperty"]:hover,
body.light-theme .property-card .card-body button[onclick*="openProperty"]:hover {
  border-color: #10b981 !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
}

/* Footer in Light Theme */
html[data-theme="light"] .main-footer,
body.light-theme .main-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .footer-col-title,
body.light-theme .footer-col-title {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-clean-links li a,
body.light-theme .footer-clean-links li a {
  color: #334155 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .footer-clean-links li a:hover,
body.light-theme .footer-clean-links li a:hover {
  color: #059669 !important;
}

html[data-theme="light"] .f-contact-card,
body.light-theme .f-contact-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .f-contact-card:hover,
body.light-theme .f-contact-card:hover {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}

/* ==========================================================================
   📋 LUXURY LIST VIEW MODE (.listings-grid.list-view)
   ========================================================================== */

.listings-grid.list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.6rem !important;
}

.listings-grid.list-view .property-card {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  flex-direction: row !important;
  min-height: 230px !important;
}

@media (max-width: 850px) {
  .listings-grid.list-view .property-card {
    grid-template-columns: 1fr !important;
  }
}

.listings-grid.list-view .card-image-wrap {
  height: 100% !important;
  min-height: 230px !important;
}

/* ==========================================================================
   🛡️ HIGH-CONTRAST LEGAL MODAL TYPOGRAPHY (CRISP & READABLE IN ALL THEMES)
   ========================================================================== */

.legal-modal-card {
  background: linear-gradient(145deg, #091522 0%, #040a12 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.95), 0 0 45px rgba(16, 185, 129, 0.35) !important;
}

.legal-header-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  text-shadow: none !important;
}

.legal-header-subtitle {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.legal-tab-btn {
  color: #cbd5e1 !important;
  font-weight: 800 !important;
}

.legal-tab-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
}

.legal-box-highlight {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
}

.highlight-terms {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.45) !important;
}

.highlight-fal {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
}

.lbh-title {
  color: #34d399 !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
}

.highlight-terms .lbh-title {
  color: #fbbf24 !important;
}

.highlight-fal .lbh-title {
  color: #4ade80 !important;
}

.lbh-desc {
  color: #ffffff !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
}

.legal-point-item {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.94rem !important;
  line-height: 1.7 !important;
  font-weight: 600 !important;
}

.legal-point-item strong {
  color: #34d399 !important;
  font-weight: 900 !important;
}

.highlight-terms ~ .legal-points-list .legal-point-item strong {
  color: #fbbf24 !important;
}

.highlight-fal ~ .legal-points-list .legal-point-item strong {
  color: #4ade80 !important;
}

/* ==========================================================================
   ⚖️ AUCTION CARD COURT BAR (CRISP OVERLAY ON IMAGES)
   ========================================================================== */

.arc-court-bar {
  background: rgba(3, 10, 18, 0.88) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.arc-court-bar span {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
}

.arc-title {
  color: #ffffff !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .auction-royal-card,
body.light-theme .auction-royal-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .arc-title,
body.light-theme .arc-title {
  color: #0f172a !important;
}

html[data-theme="light"] .arc-specs span,
body.light-theme .arc-specs span {
  color: #475569 !important;
}

/* ==========================================================================
   🏗️ PROJECT RESERVATION & INQUIRY MODAL (100% CONTRAST)
   ========================================================================== */

#projectReserveModal .modal-card {
  background: linear-gradient(165deg, #091522 0%, #03080e 100%) !important;
  border: 1.5px solid #0284c7 !important;
  color: #ffffff !important;
}

#projectReserveModal label {
  color: #e2e8f0 !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
}

#projectReserveModal input,
#projectReserveModal select {
  background: rgba(2, 6, 23, 0.85) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: inherit !important;
}

#projectReserveModal input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

#projectReserveModal select option {
  background: #091522 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   🌟 COMPREHENSIVE LIGHT THEME OVERHAUL (100% CONTRAST & READABILITY)
   ========================================================================== */

/* 1. RISALE Logo in Light Theme */
html[data-theme="light"] .logo-title-en,
body.light-theme .logo-title-en,
html[data-theme="light"] .logo-risale-main,
body.light-theme .logo-risale-main,
html[data-theme="light"] .nav-logo .logo-title-en,
body.light-theme .nav-logo .logo-title-en,
html[data-theme="light"] .footer-brand-name,
body.light-theme .footer-brand-name {
  background: linear-gradient(135deg, #e50027 0%, #ff1744 45%, #dc2626 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #e50027 !important;
  filter: drop-shadow(0 2px 8px rgba(229, 0, 39, 0.35)) !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

/* 2. Standalone Listings Header Buttons in Light Theme */
html[data-theme="light"] .lsh-btn-back,
body.light-theme .lsh-btn-back {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .lsh-btn-maps,
body.light-theme .lsh-btn-maps {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

html[data-theme="light"] .lsh-btn-req,
body.light-theme .lsh-btn-req {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .lsh-title,
body.light-theme .lsh-title {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .lsh-desc,
body.light-theme .lsh-desc {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* 3. Tour Booking Modal in Light Theme */
html[data-theme="light"] #tourBookingInputModal .modal-card,
body.light-theme #tourBookingInputModal .modal-card {
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] #tourBookingInputModal h3,
body.light-theme #tourBookingInputModal h3 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #tourBookingInputModal span,
body.light-theme #tourBookingInputModal span {
  color: #334155 !important;
}

html[data-theme="light"] #tbiPropPreviewCard,
body.light-theme #tbiPropPreviewCard {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] #tbiPropTitle,
body.light-theme #tbiPropTitle {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #tbiPropLocation,
body.light-theme #tbiPropLocation {
  color: #475569 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] #tbiPropPrice,
body.light-theme #tbiPropPrice {
  color: #047857 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #tbiPublisherBadge,
body.light-theme #tbiPublisherBadge {
  background: #ecfdf5 !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #065f46 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] #tourBookingInputModal label,
body.light-theme #tourBookingInputModal label {
  color: #064e3b !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #tourBookingInputModal input,
html[data-theme="light"] #tourBookingInputModal select,
html[data-theme="light"] #tourBookingInputModal textarea,
body.light-theme #tourBookingInputModal input,
body.light-theme #tourBookingInputModal select,
body.light-theme #tourBookingInputModal textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] #tourBookingInputModal input:focus,
html[data-theme="light"] #tourBookingInputModal select:focus,
html[data-theme="light"] #tourBookingInputModal textarea:focus,
body.light-theme #tourBookingInputModal input:focus,
body.light-theme #tourBookingInputModal select:focus,
body.light-theme #tourBookingInputModal textarea:focus {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
}

html[data-theme="light"] #tourBookingInputModal .aqar-pill-btn,
body.light-theme #tourBookingInputModal .aqar-pill-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 800 !important;
}

html[data-theme="light"] #tourBookingInputModal .aqar-pill-btn.active,
body.light-theme #tourBookingInputModal .aqar-pill-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

/* 4. Footer Columns & Brand Cards in Light Theme */
html[data-theme="light"] .main-footer,
body.light-theme .main-footer {
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

html[data-theme="light"] .footer-brand-box,
html[data-theme="light"] .footer-col,
body.light-theme .footer-brand-box,
body.light-theme .footer-col {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .footer-brand-name,
body.light-theme .footer-brand-name {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-brand-sub,
body.light-theme .footer-brand-sub {
  color: #059669 !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .footer-brand-desc,
body.light-theme .footer-brand-desc {
  color: #334155 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .footer-col-title,
body.light-theme .footer-col-title {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .footer-clean-links li a,
body.light-theme .footer-clean-links li a {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .footer-clean-links li a:hover,
body.light-theme .footer-clean-links li a:hover {
  color: #059669 !important;
}

html[data-theme="light"] .f-profile-cta-btn,
body.light-theme .f-profile-cta-btn {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .f-profile-cta-btn:hover,
body.light-theme .f-profile-cta-btn:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .f-soc-btn,
body.light-theme .f-soc-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* 5. Testimonial Cards in Light Theme */
html[data-theme="light"] .testimonial-card,
body.light-theme .testimonial-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .testi-avatar,
body.light-theme .testi-avatar {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .testi-name,
body.light-theme .testi-name {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .testi-role,
body.light-theme .testi-role {
  color: #475569 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .testi-quote,
body.light-theme .testi-quote {
  color: #334155 !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
}

/* ==========================================================================
   🗺️ INTERACTIVE MAP PAGE & FLOATING WIDGETS CONTRAST (ALL THEMES)
   ========================================================================== */

/* Map Standalone Header */
.maps-standalone-header {
  background: linear-gradient(135deg, rgba(11, 35, 26, 0.95) 0%, rgba(6, 22, 16, 0.98) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 24px !important;
  box-shadow: 0 15px 45px rgba(0,0,0,0.6), 0 0 35px rgba(16, 185, 129, 0.15) !important;
}

.maps-standalone-header h3 {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.maps-standalone-header span {
  color: #94a3b8 !important;
}

/* Floating Widgets on Map */
.mft-widget {
  background: rgba(9, 21, 34, 0.95) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(16, 185, 129, 0.25) !important;
  border-radius: 16px !important;
  padding: 0.75rem 1rem !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.mft-widget .mft-info strong {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  display: block !important;
}

.mft-widget .mft-info span {
  color: #34d399 !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  display: block !important;
}

/* Maps in Light Theme */
html[data-theme="light"] #page-maps,
body.light-theme #page-maps {
  background: radial-gradient(circle at 50% 0%, #ecfdf5 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
}

html[data-theme="light"] .maps-standalone-header,
body.light-theme .maps-standalone-header {
  background: #ffffff !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06), 0 0 25px rgba(16, 185, 129, 0.1) !important;
}

html[data-theme="light"] .maps-standalone-header h3,
body.light-theme .maps-standalone-header h3 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .maps-standalone-header span,
body.light-theme .maps-standalone-header span {
  color: #334155 !important;
}

html[data-theme="light"] .mft-widget,
body.light-theme .mft-widget {
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

html[data-theme="light"] .mft-widget .mft-info strong,
body.light-theme .mft-widget .mft-info strong {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .mft-widget .mft-info span,
body.light-theme .mft-widget .mft-info span {
  color: #047857 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   📞 ACTION BUTTONS ROW SPACING & LUXURY BREATHING ROOM
   ========================================================================== */

.sac-actions-row {
  display: flex !important;
  gap: 1.2rem !important;
  margin: 1.4rem 0 0.6rem 0 !important;
  padding: 0 0.5rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.sac-btn-wa,
.sac-btn-call,
.sac-btn-details {
  flex: 1 1 200px !important;
  min-height: 52px !important;
  padding: 0.9rem 1.4rem !important;
  border-radius: 16px !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.sac-btn-wa:hover,
.sac-btn-call:hover,
.sac-btn-details:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* ==========================================================================
   ✨ INPUT FIELDS CLEAN STYLING (NO UGLY OUTLINE RINGS)
   ========================================================================== */

input,
select,
textarea,
button,
.auth-field-control,
.search-input,
.price-input {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

input:focus,
select:focus,
textarea:focus,
.auth-field-control:focus,
.search-input:focus,
.price-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   🛡️ FOOTER LEGAL PILLS & AVATARS HIGH-CONTRAST FIXES
   ========================================================================== */

/* Footer Legal Pills */
.footer-legal-pill-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.45rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}

html[data-theme="light"] .footer-legal-pill-link,
body.light-theme .footer-legal-pill-link {
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12) !important;
}

html[data-theme="light"] .footer-legal-pill-link:hover,
body.light-theme .footer-legal-pill-link:hover {
  background: #10b981 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Testimonial User Avatar */
html[data-theme="light"] .testi-avatar,
body.light-theme .testi-avatar,
.testi-avatar {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1.5px solid #f87171 !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Company Profile CTA in Light Theme */
html[data-theme="light"] .f-profile-cta-btn,
body.light-theme .f-profile-cta-btn {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .f-profile-cta-btn span,
body.light-theme .f-profile-cta-btn span {
  color: #064e3b !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   🔨 AUCTION BIDDING MODAL HIGH CONTRAST (LIGHT & DARK THEMES)
   ========================================================================== */

#auctionBidModal .modal-card {
  max-width: 540px !important;
  width: 95% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  border-radius: 28px !important;
}

html[data-theme="light"] #auctionBidModal .modal-card,
body.light-theme #auctionBidModal .modal-card {
  background: #ffffff !important;
  border: 1.5px solid #ef4444 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="light"] #abmAuctionTitle,
body.light-theme #abmAuctionTitle {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #auctionBidModal label,
body.light-theme #auctionBidModal label {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #auctionBidModal input,
body.light-theme #auctionBidModal input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html[data-theme="light"] #auctionBidModal input::placeholder,
body.light-theme #auctionBidModal input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

html[data-theme="light"] #abmCurrentBidVal,
body.light-theme #abmCurrentBidVal {
  color: #dc2626 !important;
  font-weight: 900 !important;
}

html[data-theme="light"] #abmMinIncrementVal,
body.light-theme #abmMinIncrementVal {
  color: #b91c1c !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   ⚖️ HOME AUCTIONS SECTION BADGE & TITLE HIGH-CONTRAST (ALL THEMES)
   ========================================================================== */

.section-badge-auctions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  font-weight: 900 !important;
  font-size: 0.92rem !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: 50px !important;
  margin-bottom: 0.9rem !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2) !important;
}

.pulse-dot {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  box-shadow: 0 0 12px #ef4444 !important;
  animation: pulse-dot-red 1.5s infinite !important;
  flex-shrink: 0 !important;
}

@keyframes pulse-dot-red {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 18px #ef4444; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.section-title-white {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.6rem !important;
}

.section-subtitle-light {
  color: #cbd5e1 !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* Light Theme overrides for Home Auctions Header */
html[data-theme="light"] .home-auctions-section,
body.light-theme .home-auctions-section {
  background: #ffffff !important;
  border-top: 1.5px solid #fecaca !important;
  border-bottom: 1.5px solid #fecaca !important;
}

html[data-theme="light"] .section-badge-auctions,
body.light-theme .section-badge-auctions {
  background: #fef2f2 !important;
  border: 1.5px solid #ef4444 !important;
  color: #b91c1c !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .section-title-white,
body.light-theme .section-title-white {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html[data-theme="light"] .section-subtitle-light,
body.light-theme .section-subtitle-light {
  color: #334155 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   🛡️ LEGAL COMPLIANCE MODAL BACKDROP & CARD (FIX FOR OPENING ON CLICK)
   ========================================================================== */

.legal-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(3, 8, 18, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  z-index: 99999999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem !important;
}

.legal-modal-backdrop.active,
.legal-modal-backdrop.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.legal-modal-card {
  max-width: 780px !important;
  width: 95% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  background: linear-gradient(165deg, #0d121f 0%, #080c14 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 28px !important;
  padding: 2.2rem !important;
  box-shadow: 0 35px 90px rgba(0,0,0,0.9), 0 0 50px rgba(16,185,129,0.2) !important;
  color: #ffffff !important;
  position: relative !important;
  animation: modalScaleUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="light"] .legal-modal-card,
body.light-theme .legal-modal-card {
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   🏰 👑 ULTRA-LUXURY CRISP OBSIDIAN & EMERALD FOOTER (CLEAN NO-BLUR DESIGN)
   ========================================================================== */

.main-footer {
  background: #06090e !important;
  border-top: 1px solid rgba(52, 211, 153, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  padding: 3.5rem 0 1.2rem 0 !important;
}

.main-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, #34d399, transparent) !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.45) !important;
}

.footer-col,
.footer-brand-box {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.f-profile-cta-btn {
  background: linear-gradient(135deg, #059669, #047857) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3) !important;
}

.f-profile-cta-btn:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #a7f3d0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
}

.footer-legal-pill-link {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  color: #a7f3d0 !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.footer-legal-pill-link:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.footer-dev-pill {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(6, 10, 18, 0.98)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  color: #e2e8f0 !important;
}

.footer-bottom-bar {
  margin-top: 1.2rem !important;
  padding-top: 1rem !important;
  padding-bottom: 0.8rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
}

/* Light Theme Footer Override */
html[data-theme="light"] .main-footer,
body.light-theme .main-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .main-footer::before,
body.light-theme .main-footer::before {
  display: none !important;
}

html[data-theme="light"] .footer-legal-pill-link,
body.light-theme .footer-legal-pill-link {
  background: #ffffff !important;
  border: 1.5px solid #10b981 !important;
  color: #064e3b !important;
}

html[data-theme="light"] .f-profile-cta-btn,
body.light-theme .f-profile-cta-btn {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 1.5px solid #34d399 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   📱 👑 FLAWLESS RESPONSIVE APP BAR & DRAWER ENGINE (ALL SCREENS)
   ========================================================================== */

/* 1. Desktop Mode (min-width: 993px): Hide hamburger, show elegant center links */
@media (min-width: 993px) {
  .hamburger {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }
  .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
  }
  .nav-guest-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

/* 2. Tablet & Mobile Mode (max-width: 992px): Show hamburger, hide inline links */
@media (max-width: 992px) {
  .nav-links {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }
  .nav-container {
    padding: 0 1rem !important;
    gap: 0.5rem !important;
  }
  .nav-actions {
    gap: 0.4rem !important;
  }
  .btn-nav-request {
    display: none !important;
  }
}

/* 3. Small Mobile Mode (max-width: 576px): Compact navbar */
@media (max-width: 576px) {
  .btn-nav-login {
    display: none !important;
  }
  .logo-sub-tag {
    display: none !important;
  }
  .logo-title-en {
    font-size: 1.25rem !important;
  }
  .nav-btn-pill {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   ✨ 🎬 LUXURY STAGGERED AUTHENTICATION ENTRY & TAB SWITCH ANIMATIONS
   ========================================================================== */

@keyframes authTextFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authCascadeIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  60% {
    transform: translateY(-2px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes authCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.94);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.auth-card-pixel {
  animation: authCardEntrance 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.auth-mpt-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.auth-mpt-btn.active {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   👑 🏰 LUXURY CRIMSON-THEMED FULLSCREEN SIDE DRAWER (ZERO CLUTTER, SPACIOUS)
   ========================================================================== */

.mobile-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 99999999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
}

.mobile-drawer-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-drawer-card {
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  max-height: 86vh !important;
  margin: auto !important;
  background: linear-gradient(165deg, #111524 0%, #0c0f1b 50%, #070912 100%) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.4) !important;
  border-radius: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(220, 38, 38, 0.2) !important;
  transform: scale(0.92) translateY(24px) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

.mobile-drawer-backdrop.active .mobile-drawer-card {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

.mdc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.6rem 1.6rem 1.2rem 1.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mdc-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.mdc-close-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.1) !important;
}

.mdc-body-scrollable {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 1.4rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
}

.mdc-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.9rem !important;
}

.mdc-action-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  padding: 1rem 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.mdc-card-add {
  border-color: rgba(220, 38, 38, 0.4) !important;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.04)) !important;
}

.mdc-card-req {
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.04)) !important;
}

.mdc-card-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  flex-shrink: 0 !important;
}

.mdc-card-add .mdc-card-icon {
  background: #dc2626 !important;
  color: #fff !important;
}

.mdc-card-req .mdc-card-icon {
  background: #f59e0b !important;
  color: #fff !important;
}

.mdc-card-info strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  margin-bottom: 2px !important;
}

.mdc-card-info span {
  color: #94a3b8 !important;
  font-size: 0.74rem !important;
}

.mdc-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.85rem !important;
}

.mdc-luxury-nav-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.7rem !important;
}

.mdc-luxury-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 0.85rem 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.mdc-luxury-item:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  transform: translateX(-4px) !important;
}

.mdc-lux-icon-box {
  width: 40px !important;
  height: 40px !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.mdc-lux-content {
  flex: 1 !important;
}

.mdc-lux-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
}

.mdc-lux-badge {
  font-size: 0.7rem !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 20px !important;
  background: rgba(220, 38, 38, 0.2) !important;
  color: #fca5a5 !important;
  font-weight: 700 !important;
}

.mdc-lux-phrase {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 0.74rem !important;
  margin-top: 2px !important;
}

.mdc-lux-arrow {
  color: #ef4444 !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
}

.mdc-footer-box {
  padding: 1.2rem 1.6rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

.mdc-footer-capsule-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.mdc-lang-btn,
.mdc-login-btn-vip {
  flex: 1 !important;
  padding: 0.75rem 0.9rem !important;
  border-radius: 14px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.mdc-login-btn-vip {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border-color: #f87171 !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
}

.mdc-theme-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

@keyframes drawerItemSlideIn {
  0% {
    opacity: 0;
    transform: translateX(25px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ==========================================================================
   🎉 👑 AUTH SUCCESS CELEBRATION & SOCIAL BUTTONS ENGINE
   ========================================================================== */

.auth-social-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 1.4rem 0 1rem 0 !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

.auth-social-divider::before,
.auth-social-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important;
}

.auth-social-divider span {
  padding: 0 0.85rem !important;
}

.auth-social-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.85rem !important;
  margin-bottom: 0.6rem !important;
}

.auth-social-pill {
  height: 46px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  position: relative !important;
}

.auth-social-pill:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

.auth-social-apple {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.auth-social-apple:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

.auth-social-apple:hover svg {
  fill: #000000 !important;
}

/* ==================== GOOGLE & APPLE ACCOUNT SELECTOR STYLES ==================== */
#googleAccountPickerModal.active,
#appleAccountPickerModal.active,
#googleAccountPickerModal.open,
#appleAccountPickerModal.open {
  z-index: 99999999 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: auto !important;
}

.google-picker-card,
.apple-picker-card {
  max-width: 460px !important;
  width: 92% !important;
  border-radius: 26px !important;
  padding: 2rem !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.google-picker-card {
  background: linear-gradient(160deg, #101524 0%, #0a0d16 100%) !important;
  border: 1px solid rgba(66, 133, 244, 0.35) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.85), 0 0 50px rgba(66, 133, 244, 0.2) !important;
}

.apple-picker-card {
  background: linear-gradient(160deg, #0d0e12 0%, #050608 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 255, 255, 0.08) !important;
}

.google-picker-header,
.apple-picker-header {
  text-align: center !important;
  margin-bottom: 1.4rem !important;
}

.google-picker-logo {
  margin-bottom: 0.75rem !important;
  filter: drop-shadow(0 4px 12px rgba(66, 133, 244, 0.3)) !important;
}

.apple-logo-wrap {
  width: 54px !important;
  height: 54px !important;
  margin: 0 auto 0.75rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.google-picker-title,
.apple-picker-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem !important;
}

.google-picker-sub,
.apple-picker-sub {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.google-picker-sub strong,
.apple-picker-sub strong {
  color: #38bdf8 !important;
}

.apple-faceid-sensor {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  padding: 0.65rem 1rem !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px dashed rgba(56, 189, 248, 0.35) !important;
  border-radius: 14px !important;
  margin-bottom: 1.2rem !important;
}

.apple-faceid-sensor svg {
  animation: pulseFaceId 2s infinite ease-in-out !important;
}

@keyframes pulseFaceId {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 8px #38bdf8); }
}

.apple-faceid-text {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
}

.google-accounts-list,
.apple-accounts-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  margin-bottom: 1rem !important;
}

.google-account-item,
.apple-account-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 0.85rem 1rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.google-account-item:hover {
  background: rgba(66, 133, 244, 0.12) !important;
  border-color: rgba(66, 133, 244, 0.45) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 4px 18px rgba(66, 133, 244, 0.2) !important;
}

.apple-account-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateX(-4px) !important;
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.15) !important;
}

.google-acc-avatar,
.apple-acc-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.apple-acc-avatar {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-size: 1.25rem !important;
}

.custom-acc-avatar {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px dashed rgba(255, 255, 255, 0.25) !important;
  font-size: 1.4rem !important;
  color: #38bdf8 !important;
}

.google-acc-info,
.apple-acc-info {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: right !important;
}

.google-acc-name,
.apple-acc-name {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.google-acc-email,
.apple-acc-email {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  direction: ltr !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 0.15rem !important;
}

.apple-acc-device {
  font-size: 0.72rem !important;
  color: #38bdf8 !important;
  margin-top: 0.2rem !important;
}

.google-acc-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

.apple-acc-chevron {
  font-size: 1.2rem !important;
  color: #64748b !important;
  margin-right: 0.3rem !important;
  font-weight: bold !important;
}

.social-custom-input-box {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  animation: slideDownCustomBox 0.3s ease forwards !important;
}

@keyframes slideDownCustomBox {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.social-input-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  text-align: right !important;
}

.social-input-row label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
}

.social-input-row .form-input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  padding: 0.6rem 0.85rem !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
}

.google-picker-footer {
  font-size: 0.74rem !important;
  color: #64748b !important;
  text-align: center !important;
  line-height: 1.5 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 0.9rem !important;
}

.apple-picker-privacy {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 0.9rem !important;
}

.apple-privacy-toggle {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  margin-bottom: 0.65rem !important;
}

.apple-check-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-size: 0.8rem !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
}

.apple-check-wrap input {
  accent-color: #38bdf8 !important;
}

.apple-privacy-note {
  font-size: 0.72rem !important;
  color: #64748b !important;
  text-align: center !important;
}

/* Flying Success Celebration Badge */
.auth-flying-success-badge {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.7) !important;
  opacity: 0;
  z-index: 99999999 !important;
  background: linear-gradient(135deg, rgba(13, 18, 31, 0.98), rgba(8, 12, 20, 0.98)) !important;
  border: 2px solid #34d399 !important;
  border-radius: 24px !important;
  padding: 1.4rem 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  color: #ffffff !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(52, 211, 153, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  animation: authSuccessFlyIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  pointer-events: none !important;
}

.auth-flying-success-badge.afsb-fly-out {
  animation: authSuccessFlyOut 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.afsb-icon {
  font-size: 2.2rem !important;
  animation: bounceCelebration 0.6s infinite alternate ease-in-out !important;
}

.afsb-info strong {
  display: block !important;
  font-size: 1.1rem !important;
  color: #34d399 !important;
  margin-bottom: 2px !important;
}

.afsb-info span {
  font-size: 0.85rem !important;
  color: #e2e8f0 !important;
}

.afsb-sparkles {
  font-size: 1.5rem !important;
  animation: spinSparkles 2s linear infinite !important;
}

@keyframes authSuccessFlyIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%) scale(0.6) rotate(-4deg);
  }
  60% {
    transform: translate(-50%, -55%) scale(1.05) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes authSuccessFlyOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(0.8) rotate(5deg);
  }
}

@keyframes bounceCelebration {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1.15); }
}

@keyframes spinSparkles {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   🏰 👑 GLOBAL DARK THEME COLOR HARMONY (WARM ONYX & CRIMSON, ZERO BLUE TINTS)
   ========================================================================== */

/* 1. Master Footer & Links Color Unification */
.footer-clean-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.footer-clean-links li a {
  color: #f1f5f9 !important; /* Crisp high-contrast text */
  font-size: 0.94rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

.footer-clean-links li a:hover {
  color: #ef4444 !important;
  transform: translateX(-5px) !important;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

.footer-col-title {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  margin-bottom: 1.3rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  position: relative !important;
}

.footer-col-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: -6px !important;
  right: 0 !important;
  width: 42px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #dc2626, #ef4444) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

.footer-brand-desc {
  color: #e2e8f0 !important;
  font-size: 0.92rem !important;
  line-height: 1.8 !important;
}

.footer-col-contact .f-contact-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  border-radius: 14px !important;
  padding: 0.75rem 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.footer-col-contact .f-contact-card:hover {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: #ef4444 !important;
  transform: translateX(-4px) !important;
}

.footer-col-contact .fcc-text {
  color: #f1f5f9 !important;
  font-size: 0.88rem !important;
}

.footer-col-contact .fcc-text strong {
  color: #ffffff !important;
}

/* 2. Top Sections & Cards Background Pure Luxury Obsidian (Dark Theme) */
:root:not([data-theme="light"]) body:not(.light-theme) .hero-section {
  background: radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.15) 0%, #080d14 50%, #030712 100%) !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .hero-subtitle,
:root:not([data-theme="light"]) body:not(.light-theme) .section-subtitle,
:root:not([data-theme="light"]) body:not(.light-theme) .why-desc,
:root:not([data-theme="light"]) body:not(.light-theme) .category-desc,
:root:not([data-theme="light"]) body:not(.light-theme) .stat-label,
:root:not([data-theme="light"]) body:not(.light-theme) .live-auction-subtitle {
  color: #e2e8f0 !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .category-card,
:root:not([data-theme="light"]) body:not(.light-theme) .why-card,
:root:not([data-theme="light"]) body:not(.light-theme) .featured-card,
:root:not([data-theme="light"]) body:not(.light-theme) .auction-card-luxury,
:root:not([data-theme="light"]) body:not(.light-theme) .stats-counter-card {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .category-card:hover,
:root:not([data-theme="light"]) body:not(.light-theme) .why-card:hover,
:root:not([data-theme="light"]) body:not(.light-theme) .featured-card:hover,
:root:not([data-theme="light"]) body:not(.light-theme) .auction-card-luxury:hover {
  border-color: rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.15) !important;
}

/* Light Theme High Contrast for Subtitles, Headers & Section Content */
html[data-theme="light"] .hero-subtitle,
body.light-theme .hero-subtitle,
html[data-theme="light"] .section-subtitle,
body.light-theme .section-subtitle,
html[data-theme="light"] .why-desc,
body.light-theme .why-desc,
html[data-theme="light"] .category-desc,
body.light-theme .category-desc,
html[data-theme="light"] .stat-label,
body.light-theme .stat-label,
html[data-theme="light"] .live-auction-subtitle,
body.light-theme .live-auction-subtitle {
  color: #334155 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

html[data-theme="light"] .category-card,
body.light-theme .category-card,
html[data-theme="light"] .why-card,
body.light-theme .why-card,
html[data-theme="light"] .featured-card,
body.light-theme .featured-card,
html[data-theme="light"] .auction-card-luxury,
body.light-theme .auction-card-luxury,
html[data-theme="light"] .stats-counter-card,
body.light-theme .stats-counter-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

/* 3. Light Theme Overrides */
html[data-theme="light"] .footer-clean-links li a,
body.light-theme .footer-clean-links li a {
  color: #334155 !important;
}

html[data-theme="light"] .footer-clean-links li a:hover,
body.light-theme .footer-clean-links li a:hover {
  color: #dc2626 !important;
}

html[data-theme="light"] .footer-col-title,
body.light-theme .footer-col-title {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-brand-desc,
body.light-theme .footer-brand-desc {
  color: #475569 !important;
}

html[data-theme="light"] .footer-col-contact .f-contact-card,
body.light-theme .footer-col-contact .f-contact-card {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .footer-col-contact .fcc-text,
body.light-theme .footer-col-contact .fcc-text {
  color: #334155 !important;
}

/* ==========================================================================
   💎 👑 LUXURY PROPERTY SPEC PILLS & TESTIMONIAL AVATARS (CLEAN & HIGH CONTRAST)
   ========================================================================== */

/* Property Card Spec Badges (Clean, Crisp, Zero Muddy Grey) */
.card-specs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 0.8rem 0 !important;
}

.spec-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

.spec-item .spec-icon {
  font-size: 0.9rem !important;
}

.spec-item:hover {
  border-color: rgba(220, 38, 38, 0.4) !important;
  background: rgba(220, 38, 38, 0.12) !important;
}

/* Light Theme Spec Pills (Crisp White + Slate Border + Dark Text) */
html[data-theme="light"] .spec-item,
body.light-theme .spec-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .spec-item:hover,
body.light-theme .spec-item:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
}

/* Testimonial Avatar High Contrast Fix */
.testi-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  border: 2px solid #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
}

html[data-theme="light"] .testi-avatar,
body.light-theme .testi-avatar {
  background: #fee2e2 !important;
  border: 2px solid #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.2) !important;
}

/* Top Navbar Guest Actions & Request Button */
.nav-guest-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.nav-btn-pill {
  padding: 0.45rem 0.9rem !important;
  border-radius: 50px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
}

.btn-nav-login {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.btn-nav-login:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
}

.btn-nav-add {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 1px solid #f87171 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35) !important;
}

.btn-nav-add:hover {
  background: linear-gradient(135deg, #f87171, #ef4444) !important;
  box-shadow: 0 5px 18px rgba(220, 38, 38, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-nav-request {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2)) !important;
  border: 1.5px solid #f59e0b !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.25) !important;
}

.btn-nav-request:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 18px rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-2px) !important;
}

/* Light Theme Navbar Buttons */
html[data-theme="light"] .btn-nav-login,
body.light-theme .btn-nav-login {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .btn-nav-request,
body.light-theme .btn-nav-request {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #b45309 !important;
}

/* ==========================================================================
   💖 LUXURY ROYAL FAVORITES & PROJECTS GRID STYLING
   ========================================================================== */

@keyframes favIconPulse {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes favPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-10deg); }
  80% { transform: scale(0.9) rotate(5deg); }
  100% { transform: scale(1); }
}

@keyframes favShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.fav-pop {
  animation: favPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fav-shake {
  animation: favShake 0.4s ease !important;
}

.nav-fav-icon-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35) !important;
}

/* Light Theme Favorites & Projects Adjustments */
html[data-theme="light"] .page-favorites-view,
body.light-theme .page-favorites-view {
  background: radial-gradient(circle at 50% 5%, rgba(220, 38, 38, 0.08) 0%, #f8fafc 45%, #ffffff 100%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .page-favorites-view h1,
body.light-theme .page-favorites-view h1 {
  color: #0f172a !important;
}

html[data-theme="light"] .fav-item-card,
body.light-theme .fav-item-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] .fav-item-card .card-title,
body.light-theme .fav-item-card .card-title {
  color: #0f172a !important;
}

html[data-theme="light"] .fav-item-card .card-specs,
body.light-theme .fav-item-card .card-specs {
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

/* Project Royal Cards Luxury Grid & Borders */
.project-royal-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

#homeProjectsCardsGrid,
#projectsCardsGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 2.2rem !important;
}

html[data-theme="light"] .home-projects-section,
body.light-theme .home-projects-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%) !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .home-projects-section h2,
body.light-theme .home-projects-section h2 {
  color: #0f172a !important;
}

html[data-theme="light"] .project-royal-card,
body.light-theme .project-royal-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .project-royal-card .prc-title,
body.light-theme .project-royal-card .prc-title {
  color: #0f172a !important;
}

html[data-theme="light"] .project-royal-card .prc-desc,
body.light-theme .project-royal-card .prc-desc {
  color: #475569 !important;
}

html[data-theme="light"] .project-royal-card .prc-dev,
body.light-theme .project-royal-card .prc-dev {
  color: #0284c7 !important;
}

html[data-theme="light"] .project-royal-card .prc-prog-wrap,
body.light-theme .project-royal-card .prc-prog-wrap {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

html[data-theme="light"] .project-royal-card .prc-prog-label,
body.light-theme .project-royal-card .prc-prog-label {
  color: #0369a1 !important;
}

html[data-theme="light"] .project-royal-card .prc-price,
body.light-theme .project-royal-card .prc-price {
  color: #0284c7 !important;
}

/* ==========================================================================
   👑 ROYAL STANDALONE FAVORITES LUXURY STYLING & ANIMATIONS
   ========================================================================== */

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.15); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 40px) scale(1.2); }
}

@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 50px) scale(0.9); }
}

@keyframes neonHeartPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { transform: scale(1.06); box-shadow: 0 0 25px 8px rgba(239, 68, 68, 0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes favCardReveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fav-orb-1 {
  position: absolute;
  top: -100px;
  right: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.18) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  animation: orbFloat1 12s ease-in-out infinite;
  z-index: 0;
}

.fav-orb-2 {
  position: absolute;
  top: 300px;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: orbFloat2 15s ease-in-out infinite;
  z-index: 0;
}

.fav-orb-3 {
  position: absolute;
  bottom: 100px;
  right: 30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  animation: orbFloat3 14s ease-in-out infinite;
  z-index: 0;
}

.fav-page-standalone {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.fav-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.6rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  position: sticky;
  top: 1rem;
  z-index: 1000;
  margin-bottom: 2.5rem;
}

.fav-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.3rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.fav-back-btn:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.fav-card-anim {
  animation: favCardReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Light Theme Standalone Favorites */
html[data-theme="light"] .fav-top-bar,
body.light-theme .fav-top-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .fav-back-btn,
body.light-theme .fav-back-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .fav-back-btn:hover,
body.light-theme .fav-back-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

/* ============================================================
   🎙️ ULTRA-LUXURY RISALE MULTI-LANGUAGE VOICE GREETING HUD
   ============================================================ */
.risale-voice-welcome-hud {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: linear-gradient(135deg, rgba(10, 15, 29, 0.96) 0%, rgba(6, 44, 34, 0.98) 100%);
  border: 1.5px solid rgba(52, 211, 153, 0.7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50px;
  padding: 0.85rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 999999999;
  color: #ffffff;
  max-width: 90vw;
  width: auto;
  opacity: 0;
  pointer-events: auto;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.risale-voice-welcome-hud.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.rvw-equalizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.rvw-bar {
  width: 3.5px;
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  border-radius: 4px;
  animation: rvwEqWave 0.85s ease-in-out infinite alternate;
}
.rvw-bar:nth-child(1) { height: 8px; animation-delay: 0.1s; }
.rvw-bar:nth-child(2) { height: 18px; animation-delay: 0.3s; }
.rvw-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.rvw-bar:nth-child(4) { height: 16px; animation-delay: 0.4s; }

@keyframes rvwEqWave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.3); }
}

.rvw-text-box {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.rvw-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rvw-msg {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  max-width: 600px;
  white-space: normal;
}

.rvw-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.rvw-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: #ef4444;
}

/* ==========================================================================
   👥 👑 ADMIN USERS REGISTRY & PLATFORM THEME MANAGER STYLES
   ========================================================================== */
.admin-users-table th,
.admin-users-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.adm-theme-swatch:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.adm-theme-swatch.active {
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
}

html[data-theme="light"] .admin-users-table tr:hover,
body.light-theme .admin-users-table tr:hover {
  background: rgba(16, 185, 129, 0.05) !important;
}

html[data-theme="light"] .admin-users-table th,
body.light-theme .admin-users-table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .admin-users-table td,
body.light-theme .admin-users-table td {
  color: #1e293b !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   🌑 LUXURY DARK THEME ENFORCEMENT & HIGH-CONTRAST ENGINE
   ========================================================================== */
:root:not([data-theme="light"]) body:not(.light-theme),
html[data-theme="dark"] body,
body.dark-theme {
  background-color: #070a12 !important;
  color: #ffffff !important;
}

/* ── Why RISALE Section (Dark Theme) ── */
:root:not([data-theme="light"]) .why-section,
body:not(.light-theme) .why-section,
html[data-theme="dark"] .why-section,
body.dark-theme .why-section {
  background: linear-gradient(180deg, #070a12 0%, #0c121e 50%, #070a12 100%) !important;
  position: relative !important;
}

:root:not([data-theme="light"]) .why-header-box .why-animated-title,
body:not(.light-theme) .why-header-box .why-animated-title,
html[data-theme="dark"] .why-header-box .why-animated-title,
body.dark-theme .why-header-box .why-animated-title {
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
}

:root:not([data-theme="light"]) .why-header-box .why-animated-title span,
body:not(.light-theme) .why-header-box .why-animated-title span,
html[data-theme="dark"] .why-header-box .why-animated-title span,
body.dark-theme .why-header-box .why-animated-title span {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .why-header-box .section-subtitle,
body:not(.light-theme) .why-header-box .section-subtitle,
html[data-theme="dark"] .why-header-box .section-subtitle,
body.dark-theme .why-header-box .section-subtitle {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

:root:not([data-theme="light"]) .why-badge-pill,
body:not(.light-theme) .why-badge-pill,
html[data-theme="dark"] .why-badge-pill,
body.dark-theme .why-badge-pill {
  background: rgba(220, 38, 38, 0.18) !important;
  border: 1.5px solid rgba(220, 38, 38, 0.45) !important;
  color: #fca5a5 !important;
}

:root:not([data-theme="light"]) .why-card,
body:not(.light-theme) .why-card,
html[data-theme="dark"] .why-card,
body.dark-theme .why-card {
  background: linear-gradient(145deg, #111827 0%, #0f172a 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

:root:not([data-theme="light"]) .why-card:hover,
body:not(.light-theme) .why-card:hover,
html[data-theme="dark"] .why-card:hover,
body.dark-theme .why-card:hover {
  border-color: rgba(220, 38, 38, 0.5) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(220, 38, 38, 0.25) !important;
}

:root:not([data-theme="light"]) .why-card h3,
body:not(.light-theme) .why-card h3,
html[data-theme="dark"] .why-card h3,
body.dark-theme .why-card h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

:root:not([data-theme="light"]) .why-card p,
body:not(.light-theme) .why-card p,
html[data-theme="dark"] .why-card p,
body.dark-theme .why-card p {
  color: #94a3b8 !important;
  line-height: 1.7 !important;
}

/* ── Reviews & Testimonials Section (Dark Theme) ── */
:root:not([data-theme="light"]) .reviews-section,
body:not(.light-theme) .reviews-section,
html[data-theme="dark"] .reviews-section,
body.dark-theme .reviews-section {
  background: linear-gradient(180deg, #070a12 0%, #0a0e1a 50%, #070a12 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

:root:not([data-theme="light"]) .reviews-title-block .section-title,
body:not(.light-theme) .reviews-title-block .section-title,
html[data-theme="dark"] .reviews-title-block .section-title,
body.dark-theme .reviews-title-block .section-title {
  color: #ffffff !important;
}

:root:not([data-theme="light"]) .reviews-title-block .section-subtitle,
body:not(.light-theme) .reviews-title-block .section-subtitle,
html[data-theme="dark"] .reviews-title-block .section-subtitle,
body.dark-theme .reviews-title-block .section-subtitle {
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .reviews-cta-block,
body:not(.light-theme) .reviews-cta-block,
html[data-theme="dark"] .reviews-cta-block,
body.dark-theme .reviews-cta-block {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

:root:not([data-theme="light"]) .ros-num,
body:not(.light-theme) .ros-num,
html[data-theme="dark"] .ros-num,
body.dark-theme .ros-num {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:root:not([data-theme="light"]) .ros-count,
body:not(.light-theme) .ros-count,
html[data-theme="dark"] .ros-count,
body.dark-theme .ros-count {
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .review-card,
body:not(.light-theme) .review-card,
html[data-theme="dark"] .review-card,
body.dark-theme .review-card {
  background: linear-gradient(145deg, #111827 0%, #0f172a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

:root:not([data-theme="light"]) .reviewer-name,
body:not(.light-theme) .reviewer-name,
html[data-theme="dark"] .reviewer-name,
body.dark-theme .reviewer-name {
  color: #ffffff !important;
  font-weight: 800 !important;
}

:root:not([data-theme="light"]) .reviewer-city,
body:not(.light-theme) .reviewer-city,
html[data-theme="dark"] .reviewer-city,
body.dark-theme .reviewer-city {
  color: #94a3b8 !important;
}

:root:not([data-theme="light"]) .review-text,
body:not(.light-theme) .review-text,
html[data-theme="dark"] .review-text,
body.dark-theme .review-text {
  color: #cbd5e1 !important;
  line-height: 1.8 !important;
}

:root:not([data-theme="light"]) .review-date,
body:not(.light-theme) .review-date,
html[data-theme="dark"] .review-date,
body.dark-theme .review-date {
  color: #64748b !important;
}

:root:not([data-theme="light"]) .review-helpful,
body:not(.light-theme) .review-helpful,
html[data-theme="dark"] .review-helpful,
body.dark-theme .review-helpful {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

:root:not([data-theme="light"]) .review-helpful span,
body:not(.light-theme) .review-helpful span,
html[data-theme="dark"] .review-helpful span,
body.dark-theme .review-helpful span {
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}

:root:not([data-theme="light"]) .helpful-count,
body:not(.light-theme) .helpful-count,
html[data-theme="dark"] .helpful-count,
body.dark-theme .helpful-count {
  background: rgba(220, 38, 38, 0.2) !important;
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
}

:root:not([data-theme="light"]) .reviews-dots .rev-dot,
body:not(.light-theme) .reviews-dots .rev-dot,
html[data-theme="dark"] .reviews-dots .rev-dot,
body.dark-theme .reviews-dots .rev-dot {
  background: rgba(255, 255, 255, 0.2) !important;
}

:root:not([data-theme="light"]) .reviews-dots .rev-dot.active,
body:not(.light-theme) .reviews-dots .rev-dot.active,
html[data-theme="dark"] .reviews-dots .rev-dot.active,
body.dark-theme .reviews-dots .rev-dot.active {
  background: #dc2626 !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.8) !important;
}

/* ==========================================================================
   💎 👑 ULTRA-LUXURY CATEGORIES & AUCTION CARDS: BORDERS, BACKGROUNDS & HOVER ANIMATIONS
   ========================================================================== */

/* 1. Categories Section Background & Titles */
:root:not([data-theme="light"]) .categories-section,
body:not(.light-theme) .categories-section,
html[data-theme="dark"] .categories-section,
body.dark-theme .categories-section {
  background: radial-gradient(circle at 50% 15%, #11172b 0%, #090e1a 50%, #04060c 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 4.5rem 0 !important;
  position: relative !important;
}

:root:not([data-theme="light"]) .categories-section .section-title,
body:not(.light-theme) .categories-section .section-title,
html[data-theme="dark"] .categories-section .section-title,
body.dark-theme .categories-section .section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
}

:root:not([data-theme="light"]) .categories-section .section-subtitle,
body:not(.light-theme) .categories-section .section-subtitle,
html[data-theme="dark"] .categories-section .section-subtitle,
body.dark-theme .categories-section .section-subtitle {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-weight: 600 !important;
}

/* 2. Categories Cards: Crystal Separating Borders & Hover Animations */
:root:not([data-theme="light"]) .category-card,
body:not(.light-theme) .category-card,
html[data-theme="dark"] .category-card,
body.dark-theme .category-card {
  background: linear-gradient(165deg, rgba(24, 31, 52, 0.92) 0%, rgba(12, 16, 28, 0.98) 100%) !important;
  border: 1.8px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

:root:not([data-theme="light"]) .category-card:nth-child(1),
body:not(.light-theme) .category-card:nth-child(1) {
  border-color: rgba(16, 185, 129, 0.45) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(2),
body:not(.light-theme) .category-card:nth-child(2) {
  border-color: rgba(59, 130, 246, 0.45) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(3),
body:not(.light-theme) .category-card:nth-child(3) {
  border-color: rgba(245, 158, 11, 0.45) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(4),
body:not(.light-theme) .category-card:nth-child(4) {
  border-color: rgba(168, 85, 247, 0.45) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(5),
body:not(.light-theme) .category-card:nth-child(5) {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

:root:not([data-theme="light"]) .category-card:hover,
body:not(.light-theme) .category-card:hover,
html[data-theme="dark"] .category-card:hover,
body.dark-theme .category-card:hover {
  transform: translateY(-12px) scale(1.05) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.15) !important;
}

:root:not([data-theme="light"]) .category-card:nth-child(1):hover,
body:not(.light-theme) .category-card:nth-child(1):hover {
  border-color: #10b981 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(16, 185, 129, 0.5) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(2):hover,
body:not(.light-theme) .category-card:nth-child(2):hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(59, 130, 246, 0.5) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(3):hover,
body:not(.light-theme) .category-card:nth-child(3):hover {
  border-color: #f59e0b !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.5) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(4):hover,
body:not(.light-theme) .category-card:nth-child(4):hover {
  border-color: #a855f7 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.5) !important;
}
:root:not([data-theme="light"]) .category-card:nth-child(5):hover,
body:not(.light-theme) .category-card:nth-child(5):hover {
  border-color: #ef4444 !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.85), 0 0 35px rgba(239, 68, 68, 0.5) !important;
}

:root:not([data-theme="light"]) .category-card:hover .category-icon,
body:not(.light-theme) .category-card:hover .category-icon {
  transform: scale(1.18) rotate(6deg) !important;
}

/* 3. Real Estate Auctions Section & Royal Cards: Separating Borders & Motion */
:root:not([data-theme="light"]) .home-auctions-section,
body:not(.light-theme) .home-auctions-section,
html[data-theme="dark"] .home-auctions-section,
body.dark-theme .home-auctions-section {
  background: radial-gradient(circle at 50% 10%, rgba(220, 38, 38, 0.14) 0%, #0f0714 50%, #060209 100%) !important;
  border-top: 1.5px solid rgba(239, 68, 68, 0.25) !important;
  border-bottom: 1.5px solid rgba(239, 68, 68, 0.25) !important;
}

:root:not([data-theme="light"]) .auction-royal-card,
body:not(.light-theme) .auction-royal-card,
html[data-theme="dark"] .auction-royal-card,
body.dark-theme .auction-royal-card,
:root:not([data-theme="light"]) .auction-card-luxury,
body:not(.light-theme) .auction-card-luxury {
  background: linear-gradient(165deg, rgba(28, 14, 34, 0.95) 0%, rgba(14, 6, 17, 0.98) 100%) !important;
  border: 1.8px solid rgba(239, 68, 68, 0.42) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 20px rgba(220, 38, 38, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

:root:not([data-theme="light"]) .auction-royal-card:hover,
body:not(.light-theme) .auction-royal-card:hover,
html[data-theme="dark"] .auction-royal-card:hover,
body.dark-theme .auction-royal-card:hover,
:root:not([data-theme="light"]) .auction-card-luxury:hover,
body:not(.light-theme) .auction-card-luxury:hover {
  transform: translateY(-12px) scale(1.025) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.9), 0 0 40px rgba(239, 68, 68, 0.5) !important;
}

:root:not([data-theme="light"]) .auction-royal-card img,
body:not(.light-theme) .auction-royal-card img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

:root:not([data-theme="light"]) .auction-royal-card:hover img,
body:not(.light-theme) .auction-royal-card:hover img {
  transform: scale(1.08) !important;
}

/* Auction card interior separating borders */
:root:not([data-theme="light"]) .auction-royal-card .arc-court-bar,
body:not(.light-theme) .auction-royal-card .arc-court-bar {
  background: rgba(8, 3, 10, 0.92) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
}

:root:not([data-theme="light"]) .auction-royal-card .arc-timer-box,
body:not(.light-theme) .auction-royal-card .arc-timer-box {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 16px !important;
}

:root:not([data-theme="light"]) .auction-royal-card .arc-price,
body:not(.light-theme) .auction-royal-card .arc-price {
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   🌑 100% PURE DARK LUXURY BACKGROUND FOR ALL HOME & APP SECTIONS (ZERO WHITE BG IN DARK THEME)
   ========================================================================== */
:root:not([data-theme="light"]) body:not(.light-theme) .section,
:root:not([data-theme="light"]) body:not(.light-theme) .featured-section,
:root:not([data-theme="light"]) body:not(.light-theme) .why-section,
:root:not([data-theme="light"]) body:not(.light-theme) .city-explore-section,
:root:not([data-theme="light"]) body:not(.light-theme) .reviews-section,
:root:not([data-theme="light"]) body:not(.light-theme) .home-vip-requests-section,
:root:not([data-theme="light"]) body:not(.light-theme) .stats-counter-section,
:root:not([data-theme="light"]) body:not(.light-theme) .newsletter-section,
html[data-theme="dark"] .section,
html[data-theme="dark"] .featured-section,
html[data-theme="dark"] .why-section,
html[data-theme="dark"] .city-explore-section,
html[data-theme="dark"] .reviews-section,
html[data-theme="dark"] .home-vip-requests-section,
html[data-theme="dark"] .stats-counter-section,
html[data-theme="dark"] .newsletter-section {
  background: radial-gradient(circle at 50% 10%, #0d1222 0%, #080c16 55%, #04060c 100%) !important;
  color: #ffffff !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .featured-section,
html[data-theme="dark"] .featured-section {
  background: radial-gradient(circle at 50% 15%, #0e1526 0%, #090e1a 50%, #05070f 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 4.5rem 0 !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .featured-section .section-title,
html[data-theme="dark"] .featured-section .section-title,
:root:not([data-theme="light"]) body:not(.light-theme) .section-title,
html[data-theme="dark"] .section-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .section-badge,
html[data-theme="dark"] .section-badge {
  background: rgba(220, 38, 38, 0.18) !important;
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
  padding: 0.4rem 1rem !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
  display: inline-block !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .featured-section .btn-outline,
html[data-theme="dark"] .featured-section .btn-outline {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding: 0.6rem 1.4rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all 0.25s ease !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .featured-section .btn-outline:hover,
html[data-theme="dark"] .featured-section .btn-outline:hover {
  background: rgba(220, 38, 38, 0.2) !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Property cards in Featured Section & Listings */
:root:not([data-theme="light"]) body:not(.light-theme) .property-card,
html[data-theme="dark"] .property-card {
  background: linear-gradient(165deg, rgba(24, 31, 52, 0.92) 0%, rgba(12, 16, 28, 0.98) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .property-card:hover,
html[data-theme="dark"] .property-card:hover {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.85), 0 0 30px rgba(16, 185, 129, 0.3) !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .property-card .card-title,
html[data-theme="dark"] .property-card .card-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
}

:root:not([data-theme="light"]) body:not(.light-theme) .property-card .card-location,
html[data-theme="dark"] .property-card .card-location {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

/* ==========================================================================
   🔍 👑 HERO SEARCH PURPOSE TABS (LARGE FONT, HIGH CONTRAST & SENIOR-FRIENDLY)
   ========================================================================== */
.search-tabs {
  display: flex !important;
  gap: 0.75rem !important;
  margin-bottom: 1.4rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.search-tab {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  padding: 0.75rem 1.8rem !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  letter-spacing: 0.3px !important;
}

/* Inactive Tabs in Dark Theme - Crisp, Bright, High-Contrast */
:root:not([data-theme="light"]) .search-tab,
body:not(.light-theme) .search-tab,
html[data-theme="dark"] .search-tab,
body.dark-theme .search-tab {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.8px solid rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Hover state in Dark Theme */
:root:not([data-theme="light"]) .search-tab:hover,
body:not(.light-theme) .search-tab:hover,
html[data-theme="dark"] .search-tab:hover,
body.dark-theme .search-tab:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
  -webkit-text-fill-color: #34d399 !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
}

/* Active Selected Tab - Emerald Green Glowing */
:root:not([data-theme="light"]) .search-tab.active,
body:not(.light-theme) .search-tab.active,
html[data-theme="dark"] .search-tab.active,
body.dark-theme .search-tab.active,
.search-tab.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.6), 0 0 15px rgba(16, 185, 129, 0.3) !important;
  transform: scale(1.06) !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Map page purpose buttons (synced) */
.mct-purpose-btn {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 0.65rem 1.4rem !important;
  border-radius: 14px !important;
}
:root:not([data-theme="light"]) .mct-purpose-btn,
body:not(.light-theme) .mct-purpose-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
:root:not([data-theme="light"]) .mct-purpose-btn.active,
body:not(.light-theme) .mct-purpose-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ==========================================================================
   💖 👑 LUXURY STANDALONE FAVORITES PAGE (ANIMATIONS, ORBS & 3D HOVER)
   ========================================================================== */
.fav-page-standalone {
  min-height: 100vh !important;
  position: relative !important;
  background: radial-gradient(circle at 50% 8%, rgba(220, 38, 38, 0.18) 0%, rgba(15, 23, 42, 0.98) 45%, #060911 100%) !important;
  color: #ffffff !important;
  overflow-x: hidden !important;
  animation: favPageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes favPageFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ambient Glowing Background Orbs */
.fav-orb-1, .fav-orb-2, .fav-orb-3 {
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.5 !important;
}

.fav-orb-1 {
  top: -100px;
  right: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, transparent 70%);
  animation: orbFloat1 8s ease-in-out infinite alternate;
}

.fav-orb-2 {
  top: 30%;
  left: -100px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
  animation: orbFloat2 10s ease-in-out infinite alternate;
}

.fav-orb-3 {
  bottom: 10%;
  right: -50px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite alternate;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 40px) scale(1.15); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-30px, -40px) scale(0.9); }
}

@keyframes neonHeartPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 35px rgba(239, 68, 68, 0.65);
  }
}

/* Staggered Entrance Animation for Favorite Cards */
.luxury-fav-card {
  animation: favCardEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

@keyframes favCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 3D Hover on Favorite Cards */
.luxury-fav-card:hover {
  transform: translateY(-12px) scale(1.03) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.9), 0 0 35px rgba(220, 38, 38, 0.45) !important;
}

.luxury-fav-card:hover img {
  transform: scale(1.08) !important;
}

/* Standalone view: ensure body and html are cleanly styled */
body.is-standalone-view #page-favorites {
  padding-top: 2rem !important;
}

body.is-standalone-view #page-notifications {
  padding-top: 2rem !important;
}

/* ==========================================================================
   👵 👴 SENIOR-FRIENDLY & HIGH-CONTRAST ACCESSIBILITY ENGINE (WCAG AAA)
   ========================================================================== */
/* Enhanced contrast on all badges and tags */
.card-badges .badge-tag,
.badge-tag,
.badge-tag.sale,
.badge-tag.new,
.badge-tag.featured,
.badge-tag.auction-badge {
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 8px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Green tags / verified badges / "معتمد من الإدارة" / "معلن معتمد" */
.badge-tag.sale,
.badge-tag.verified-badge,
[class*="verified"],
.agent-badge,
.card-agent,
.why-badge-pill {
  background: #047857 !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid #34d399 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.badge-tag.new {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid #f87171 !important;
}

.badge-tag.featured {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid #fbbf24 !important;
}

/* High contrast text across cards and sections for older people */
.card-location,
.card-specs,
.card-spec,
.property-card p,
.auction-card p,
.feature-card p,
.notif-msg,
.notif-stat-lbl,
.stat-label,
.section-subtitle,
.ros-count {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.card-title,
.property-card h3,
.auction-card h3,
.feature-card h3,
.notif-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  line-height: 1.4 !important;
}

.card-price-overlay {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  background: rgba(15, 23, 42, 0.92) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* ==============================================================================
   👑 RISALE MASTER LUXURY REAL ESTATE DESIGN SYSTEM (HARMONIZED PALETTE)
   Ultra-Prestigious Saudi Brokerage Identity (Royal Emerald & Warm Champagne Gold)
   ============================================================================== */

/* ─── 1. GLOBAL SCROLLBAR HARMONIZATION (Zero Harsh Red) ─── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, 0.3) transparent !important;
}
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.3) !important;
  border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5) !important;
}

/* ─── 2. NAVBAR ACTIVE INDICATOR & LINKS ─── */
.nav-link.active,
.nav-item.active .nav-link,
.mobile-nav-link.active {
  color: #059669 !important;
}
.nav-link.active::after,
.nav-item.active::after {
  background: #059669 !important;
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.5) !important;
}

/* ─── 3. STANDALONE ADD PROPERTY PAGE (#page-add-property) ─── */
#page-add-property.page-add-property-view {
  min-height: 100vh !important;
  padding: 2.5rem 1.2rem 5rem !important;
  position: relative !important;
  background: #f8fafc !important;
}
html[data-theme="dark"] #page-add-property.page-add-property-view,
body:not(.light-theme) #page-add-property.page-add-property-view {
  background: #090d16 !important;
}

.add-property-form-card {
  max-width: 820px !important;
  margin: 0 auto 3.5rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 28px !important;
  padding: 2.8rem 2.4rem !important;
  box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}
html[data-theme="dark"] .add-property-form-card,
body:not(.light-theme) .add-property-form-card {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6) !important;
}

.add-prop-header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 2rem !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding-bottom: 1.2rem !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
}
html[data-theme="dark"] .add-prop-header-nav,
body:not(.light-theme) .add-prop-header-nav {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-outline-back {
  background: rgba(5, 150, 105, 0.08) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
  padding: 0.6rem 1.2rem !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #059669 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-outline-back:hover {
  background: #059669 !important;
  color: #ffffff !important;
}

.btn-outline-browse {
  background: rgba(15, 23, 42, 0.05) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  padding: 0.6rem 1.1rem !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
html[data-theme="dark"] .btn-outline-browse,
body:not(.light-theme) .btn-outline-browse {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.add-prop-verified-badge {
  display: inline-block !important;
  background: rgba(5, 150, 105, 0.1) !important;
  color: #059669 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 0.2rem 0.8rem !important;
  border-radius: 50px !important;
  margin-bottom: 0.3rem !important;
  border: 1px solid rgba(5, 150, 105, 0.2) !important;
}

.add-prop-main-title {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin: 0 !important;
}
html[data-theme="dark"] .add-prop-main-title,
body:not(.light-theme) .add-prop-main-title {
  color: #ffffff !important;
}

.add-prop-notice-box {
  background: rgba(5, 150, 105, 0.05) !important;
  border: 1px solid rgba(5, 150, 105, 0.2) !important;
  border-radius: 16px !important;
  padding: 1rem 1.4rem !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  color: #334155 !important;
}
html[data-theme="dark"] .add-prop-notice-box,
body:not(.light-theme) .add-prop-notice-box {
  background: rgba(5, 150, 105, 0.1) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
  color: #cbd5e1 !important;
}
.add-prop-notice-box strong {
  color: #059669 !important;
}

/* Form Inputs within Add Property */
.add-property-form-card label {
  color: #334155 !important;
  font-weight: 800 !important;
}
html[data-theme="dark"] .add-property-form-card label,
body:not(.light-theme) .add-property-form-card label {
  color: #94a3b8 !important;
}

.add-property-form-card input,
.add-property-form-card select,
.add-property-form-card textarea {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  transition: all 0.2s ease !important;
}
.add-property-form-card input:focus,
.add-property-form-card select:focus,
.add-property-form-card textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
  outline: none !important;
}
html[data-theme="dark"] .add-property-form-card input,
html[data-theme="dark"] .add-property-form-card select,
html[data-theme="dark"] .add-property-form-card textarea,
body:not(.light-theme) .add-property-form-card input,
body:not(.light-theme) .add-property-form-card select,
body:not(.light-theme) .add-property-form-card textarea {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* ─── 4. HARMONIZED LUXURY AGENT CARD ON DETAIL PAGE ─── */
.agent-master-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 24px !important;
  padding: 1.8rem !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
}
html[data-theme="dark"] .agent-master-card,
body:not(.light-theme) .agent-master-card {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
}

.agent-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.3rem !important;
}
html[data-theme="dark"] .agent-card-header,
body:not(.light-theme) .agent-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.agent-verified-pill {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #059669 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.agent-license-pill {
  font-size: 0.78rem !important;
  background: rgba(5, 150, 105, 0.1) !important;
  color: #059669 !important;
  padding: 0.25rem 0.7rem !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}

.agent-avatar {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
  flex-shrink: 0 !important;
}

.agent-details h4 {
  color: #0f172a !important;
  font-weight: 900 !important;
}
html[data-theme="dark"] .agent-details h4,
body:not(.light-theme) .agent-details h4 {
  color: #ffffff !important;
}
.agent-details p {
  color: #64748b !important;
}

.agent-actions-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Tour Booking Button - Primary Luxury Button */
.btn-royal-tour {
  padding: 0.95rem !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3) !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}
.btn-royal-tour:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(5, 150, 105, 0.4) !important;
  color: #ffffff !important;
}

/* WhatsApp Button - Clean Elegant Action */
.btn-royal-wa {
  padding: 0.85rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #059669 !important;
  color: #059669 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.25s ease !important;
}
.btn-royal-wa:hover {
  background: #059669 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .btn-royal-wa,
body:not(.light-theme) .btn-royal-wa {
  background: rgba(5, 150, 105, 0.12) !important;
  border-color: #059669 !important;
  color: #34d399 !important;
}

/* Phone Call Button - Slate Luxury Action */
.btn-royal-call {
  padding: 0.85rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all 0.25s ease !important;
}
.btn-royal-call:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}
html[data-theme="dark"] .btn-royal-call,
body:not(.light-theme) .btn-royal-call {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Favorite Button - Minimalist Luxury */
.btn-royal-fav {
  padding: 0.8rem !important;
  border-radius: 14px !important;
  border: 1px solid #cbd5e1 !important;
  background: transparent !important;
  color: #475569 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
}
.btn-royal-fav:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}
html[data-theme="dark"] .btn-royal-fav,
body:not(.light-theme) .btn-royal-fav {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94a3b8 !important;
}

/* ─── 5. PROPERTY CARDS PRICE OVERLAYS & BADGES (Screenshot 3 Fix) ─── */
.card-price-overlay,
.property-price-tag {
  background: rgba(15, 23, 42, 0.82) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #34d399 !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Property Spec Badges (Bedrooms, Bathrooms, Area) */
.card-specs span,
.prop-spec-pill,
.property-feature-pill {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .card-specs span,
html[data-theme="dark"] .prop-spec-pill,
html[data-theme="dark"] .property-feature-pill,
body:not(.light-theme) .card-specs span,
body:not(.light-theme) .prop-spec-pill,
body:not(.light-theme) .property-feature-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

/* Light Theme Card Titles and Typography Contrast */
html[data-theme="light"] .property-card h3,
html[data-theme="light"] .property-card .card-title,
body.light-theme .property-card h3,
body.light-theme .property-card .card-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

html[data-theme="light"] .property-card p,
html[data-theme="light"] .property-card .card-location,
body.light-theme .property-card p,
body.light-theme .property-card .card-location {
  color: #475569 !important;
  text-shadow: none !important;
}

/* ─── 6. REVIEWS & TESTIMONIALS (Screenshot 4 Fix) ─── */
.testimonial-card .avatar-box,
.testimonial-avatar,
.review-user-avatar,
.testimonial-card .t-avatar,
.testimonial-card .avatar {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}

.btn-add-review-hero {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.35) !important;
  transition: all 0.25s ease !important;
}
.btn-add-review-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(5, 150, 105, 0.45) !important;
}

/* Carousel indicators */
.carousel-dot.active,
.review-dot.active {
  background: #059669 !important;
  width: 24px !important;
  border-radius: 10px !important;
}

/* ─── 7. MODALS & POPUPS (Screenshot 5 Fix) ─── */
.modal-card {
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}
html[data-theme="light"] .modal-card,
body.light-theme .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 25px 80px -10px rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="dark"] .modal-card,
body:not(.light-theme) .modal-card {
  background: #111827 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7) !important;
}

.review-modal-user-bar {
  background: rgba(5, 150, 105, 0.05) !important;
  border: 1px solid rgba(5, 150, 105, 0.2) !important;
  border-radius: 16px !important;
  padding: 0.9rem 1.2rem !important;
  margin-bottom: 1.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.rmu-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
}

.ug-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border: 1px solid rgba(5, 150, 105, 0.3) !important;
  color: #059669 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.15rem 0.6rem !important;
  border-radius: 20px !important;
}

.rmu-switch-btn {
  background: rgba(100, 116, 139, 0.1) !important;
  border: 1px solid rgba(100, 116, 139, 0.2) !important;
  color: #64748b !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.rmu-switch-btn:hover {
  background: rgba(100, 116, 139, 0.2) !important;
  color: #0f172a !important;
}

.star-rating-box {
  background: rgba(5, 150, 105, 0.03) !important;
  border: 1px solid rgba(5, 150, 105, 0.15) !important;
  border-radius: 16px !important;
  padding: 1.2rem !important;
  text-align: center !important;
  margin-bottom: 1.2rem !important;
}
.star-input-label {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  margin-bottom: 0.5rem !important;
}
html[data-theme="dark"] .star-input-label,
body:not(.light-theme) .star-input-label {
  color: #cbd5e1 !important;
}

.star-inp {
  color: #f59e0b !important;
  cursor: pointer !important;
  transition: transform 0.2s !important;
}
.star-label-text {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #059669 !important;
  margin-top: 0.4rem !important;
}

.rev-cat-tag {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 50px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.rev-cat-tag.active {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .rev-cat-tag,
body:not(.light-theme) .rev-cat-tag {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

.moderation-badge-note {
  background: rgba(217, 119, 6, 0.08) !important;
  border: 1px solid rgba(217, 119, 6, 0.25) !important;
  border-radius: 12px !important;
  padding: 0.7rem 0.9rem !important;
  font-size: 0.82rem !important;
  color: #b45309 !important;
  line-height: 1.5 !important;
  margin-bottom: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
html[data-theme="dark"] .moderation-badge-note,
body:not(.light-theme) .moderation-badge-note {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}

/* ==============================================================================
   🌟 MASTER IN-PAGE FORM VALIDATION & IN-VIEWPORT NOTIFICATIONS SYSTEM
   ============================================================================== */

/* ─── 1. IN-VIEWPORT CENTERED LUXURY TOAST (NEVER CUT OFF) ─── */
.toast,
#toast {
  position: fixed !important;
  top: 2rem !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(-24px) scale(0.96) !important;
  max-width: min(520px, 92vw) !important;
  width: max-content !important;
  min-width: 290px !important;
  z-index: 99999999 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(5, 150, 105, 0.35) !important;
  border-radius: 18px !important;
  padding: 0.95rem 1.6rem !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  direction: rtl !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 auto !important;
}

.toast.show,
#toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.toast-content-inner {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  justify-content: center !important;
  width: 100% !important;
}

.toast-icon-badge {
  font-size: 1.25rem !important;
  flex-shrink: 0 !important;
}

.toast-msg-text {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: inherit !important;
  line-height: 1.4 !important;
}

/* Toast error state (in-page, ultra-clear) */
.toast.toast-error,
#toast.toast-error {
  background: #fff5f5 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 20px 50px -10px rgba(239, 68, 68, 0.22) !important;
}
.toast.toast-error .toast-icon-badge {
  background: rgba(239, 68, 68, 0.12) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Toast success state */
.toast.toast-success,
#toast.toast-success {
  background: #f0fdf4 !important;
  border-color: #059669 !important;
  color: #065f46 !important;
  box-shadow: 0 20px 50px -10px rgba(5, 150, 105, 0.22) !important;
}
.toast.toast-success .toast-icon-badge {
  background: rgba(5, 150, 105, 0.12) !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Toast Dark Theme */
html[data-theme="dark"] .toast,
html[data-theme="dark"] #toast,
body:not(.light-theme) .toast,
body:not(.light-theme) #toast {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
}
html[data-theme="dark"] .toast.toast-error,
html[data-theme="dark"] #toast.toast-error,
body:not(.light-theme) .toast.toast-error,
body:not(.light-theme) #toast.toast-error {
  background: #1c1317 !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .toast.toast-success,
html[data-theme="dark"] #toast.toast-success,
body:not(.light-theme) .toast.toast-success,
body:not(.light-theme) #toast.toast-success {
  background: #0d1a16 !important;
  border-color: #10b981 !important;
  color: #a7f3d0 !important;
}

/* ─── 2. IN-PAGE INLINE FIELD ERROR BADGE ─── */
.risale-field-error {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1.5px solid #f87171 !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.9rem !important;
  margin-top: 0.45rem !important;
  animation: risaleErrorSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  direction: rtl !important;
}

.risale-field-error.visible {
  display: flex !important;
}

html[data-theme="dark"] .risale-field-error,
body:not(.light-theme) .risale-field-error {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

.input-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
  background-color: #fffafb !important;
}

html[data-theme="dark"] .input-invalid,
body:not(.light-theme) .input-invalid {
  background-color: rgba(239, 68, 68, 0.08) !important;
}

@keyframes risaleInputShake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

@keyframes risaleErrorSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── 3. PAGE ENTRANCE MICRO-ANIMATIONS ─── */
.page-enter-animate {
  animation: risalePageEntrance 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes risalePageEntrance {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── 4. LIGHT MODE STARK HIGH-CONTRAST ENGINE (ZERO MURKY COLORS) ─── */
html[data-theme="light"],
body.light-theme {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border: #e2e8f0;
}

html[data-theme="light"] body,
body.light-theme {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

html[data-theme="light"] label,
body.light-theme label {
  color: #1e293b !important;
  font-weight: 800 !important;
}

html[data-theme="light"] .form-input,
body.light-theme .form-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .section-title,
body.light-theme .section-title {
  color: #0f172a !important;
}

html[data-theme="light"] .section-subtitle,
body.light-theme .section-subtitle {
  color: #475569 !important;
}

/* ==============================================================================
   📱 MASTER RESPONSIVE LUXURY DESIGN ENGINE & MODAL BEAUTY POLISH
   ============================================================================== */

/* ─── 1. MODAL LAYOUT & USER BAR BEAUTY FIX ─── */
.modal-overlay {
  display: none !important;
}
.modal-overlay.active,
.modal-overlay.open {
  display: flex !important;
}
.modal-overlay.active:not(#reviewModal),
.modal-overlay.open:not(#reviewModal) {
  z-index: 100000 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.65) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

.modal-card {
  width: min(540px, 94vw) !important;
  max-width: 540px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  padding: 1.6rem 1.8rem !important;
  margin: auto !important;
  box-sizing: border-box !important;
  box-shadow: 0 25px 80px -10px rgba(0, 0, 0, 0.45) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .modal-card,
body:not(.light-theme) .modal-card {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* User bar inside review modal */
.review-modal-user-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 0.8rem 1rem !important;
  margin-bottom: 1.4rem !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .review-modal-user-bar,
body:not(.light-theme) .review-modal-user-bar {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.rmu-user-flex {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.rmu-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

.rmu-details {
  min-width: 0 !important;
  flex: 1 !important;
  text-align: right !important;
}

.rmu-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.2rem !important;
}

.ug-badge {
  background: rgba(5, 150, 105, 0.1) !important;
  border: 1px solid rgba(5, 150, 105, 0.25) !important;
  color: #059669 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.12rem 0.55rem !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  white-space: nowrap !important;
}

.ug-role {
  background: none !important;
  border: none !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] .ug-role,
body:not(.light-theme) .ug-role {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
}

.rmu-name {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="dark"] .rmu-name,
body:not(.light-theme) .rmu-name {
  color: #ffffff !important;
}

.rmu-switch-btn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.rmu-switch-btn:hover {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  background: #fff5f5 !important;
}

html[data-theme="dark"] .rmu-switch-btn,
body:not(.light-theme) .rmu-switch-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}

/* Star rating box inside modal */
.star-rating-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 1.2rem 1rem !important;
  text-align: center !important;
  margin-bottom: 1.2rem !important;
}

html[data-theme="dark"] .star-rating-box,
body:not(.light-theme) .star-rating-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.star-input-label {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0.5rem !important;
}

html[data-theme="dark"] .star-input-label,
body:not(.light-theme) .star-input-label {
  color: #ffffff !important;
}

/* ─── 2. FLOATING BUTTONS FIX (NEVER OVERLAP OPEN MODALS) ─── */
#scrollToTopBtn {
  z-index: 900 !important;
}

body.modal-open #scrollToTopBtn,
body:has(.modal-overlay.open) #scrollToTopBtn,
body:has(.modal-overlay.active) #scrollToTopBtn,
body:has(.modal-overlay:not([style*="none"])) #scrollToTopBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── 3. ULTRA-RESPONSIVE POLISH ACROSS ALL PAGES (< 768px) ─── */
@media (max-width: 768px) {
  /* Navbar Compact & Sleek */
  .navbar {
    padding: 0.5rem 0 !important;
  }

  .nav-container {
    padding: 0 0.85rem !important;
    gap: 0.4rem !important;
  }

  .logo-icon-wrap {
    width: 38px !important;
    height: 38px !important;
  }

  .logo-icon-wrap svg {
    width: 38px !important;
    height: 38px !important;
  }

  .logo-title-row {
    white-space: nowrap !important;
    gap: 0.3rem !important;
  }

  .logo-title-en {
    font-size: 1.15rem !important;
    letter-spacing: 1px !important;
  }

  .logo-title-ar {
    font-size: 1.1rem !important;
  }

  .logo-sub-tag {
    display: none !important;
  }

  .lang-nav-pill-btn {
    padding: 0.35rem 0.5rem !important;
    gap: 0.2rem !important;
  }

  .lnp-label,
  .lnp-arrow {
    display: none !important;
  }

  .nav-actions {
    gap: 0.35rem !important;
  }

  /* Modals in Mobile */
  .modal-card {
    padding: 1.25rem 1rem !important;
    border-radius: 20px !important;
    width: 95vw !important;
  }

  .review-modal-user-bar {
    padding: 0.65rem 0.8rem !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
  }

  .rmu-avatar {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  .rmu-name {
    font-size: 0.86rem !important;
  }

  .ug-badge {
    font-size: 0.68rem !important;
    padding: 0.1rem 0.45rem !important;
  }

  .ug-role {
    font-size: 0.7rem !important;
  }

  .rmu-switch-btn {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.72rem !important;
  }

  .star-input .star-inp {
    font-size: 2rem !important;
    padding: 0 0.2rem !important;
  }

  /* Universal Form Responsive Styling */
  .form-grid-2,
  .form-grid-3,
  .add-prop-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .add-property-form-card {
    padding: 1.25rem 1rem !important;
    border-radius: 20px !important;
    margin: 1rem auto !important;
    width: 100% !important;
  }

  /* General Page Padding */
  .page {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ==============================================================================
   🏛️ MASTER 4-COLUMN EQUAL FOOTER ENGINE & SHARP BRAND POLISH
   ============================================================================== */

/* ─── 1. ALL 4 FOOTER COLUMNS IN ONE SINGLE ROW WITH EQUAL WIDTHS ─── */
.main-footer {
  width: 100% !important;
  box-sizing: border-box !important;
}

.main-footer .container {
  max-width: 1440px !important;
  width: 95% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) and (min-width: 681px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.2rem !important;
  }
}

@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }
}

/* ─── 2. EQUAL LUXURY CARDS FOR ALL 4 COLUMNS ─── */
.footer-col,
.footer-col-brand,
.footer-brand-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 1.5rem 1.25rem !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 100% !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  width: 100% !important;
  max-width: 100% !important;
}

.footer-col:hover,
.footer-col-brand:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px -8px rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

html[data-theme="dark"] .footer-col,
html[data-theme="dark"] .footer-col-brand,
html[data-theme="dark"] .footer-brand-box,
body:not(.light-theme) .footer-col,
body:not(.light-theme) .footer-col-brand,
body:not(.light-theme) .footer-brand-box {
  background: #0d121d !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
}

/* ─── 3. SHARP RESALE BRAND NAME (ZERO BLUR / ZERO WASH-OUT) ─── */
.footer-brand-name {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  background: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.footer-brand-ar {
  font-family: 'Tajawal', 'Cairo', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .footer-brand-name,
body:not(.light-theme) .footer-brand-name {
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
}

html[data-theme="dark"] .footer-brand-ar,
body:not(.light-theme) .footer-brand-ar {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ─── 4. CARD TITLES WITH ACCENT LINES ─── */
.footer-col-title {
  color: #0f172a !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  margin: 0 0 1.1rem 0 !important;
  padding-bottom: 0.55rem !important;
  position: relative !important;
  display: block !important;
}

.footer-col-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 2.5px !important;
  background: #ef4444 !important;
  border-radius: 2px !important;
}

html[data-theme="dark"] .footer-col-title,
body:not(.light-theme) .footer-col-title {
  color: #ffffff !important;
}

/* ─── 5. CLEAN LIST ITEMS ─── */
.footer-clean-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

.footer-clean-links li a {
  color: #334155 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  transition: all 0.2s ease !important;
}

.footer-clean-links li a:hover {
  color: #059669 !important;
  transform: translateX(-4px) !important;
}

html[data-theme="dark"] .footer-clean-links li a,
body:not(.light-theme) .footer-clean-links li a {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .footer-clean-links li a:hover,
body:not(.light-theme) .footer-clean-links li a:hover {
  color: #34d399 !important;
}

/* ─── 6. PROFILE CTA BUTTON & SOCIAL ICONS ─── */
.f-profile-cta-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
  transition: all 0.25s ease !important;
  margin-top: 0.5rem !important;
  box-sizing: border-box !important;
}

.f-profile-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4) !important;
}

.footer-social-icons {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  margin-top: 0.85rem !important;
}

.f-soc-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
}

.f-soc-btn:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

html[data-theme="dark"] .f-soc-btn,
body:not(.light-theme) .f-soc-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ─── 7. COLUMN 4: CONTACT BOX LIST (PROPORTIONAL & REFINED) ─── */
.footer-contact-box-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.f-contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.6rem 0.85rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-size: 0.82rem !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.f-contact-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="dark"] .f-contact-card,
body:not(.light-theme) .f-contact-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

.fcc-icon {
  font-size: 1.05rem !important;
  flex-shrink: 0 !important;
}

.fcc-text {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  color: inherit !important;
}

.f-clean-wa-btn {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
  transition: all 0.25s ease !important;
  margin-top: 0.8rem !important;
  box-sizing: border-box !important;
}

.f-clean-wa-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.45) !important;
}

/* ==========================================================================
   👑 ULTRA LUXURY SPACIOUS RESPONSIVE REVIEW MODAL (RESALE 2026)
   ========================================================================== */

#reviewModal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(1, 10, 7, 0.85) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  z-index: 99999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.2rem !important;
  box-sizing: border-box !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#reviewModal.open,
#reviewModal.active,
#reviewModal[style*="flex"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.review-modal-card-lux {
  width: min(800px, 95vw) !important;
  max-width: 800px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  background: radial-gradient(circle at 90% 10%, rgba(16, 185, 129, 0.25), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(5, 150, 105, 0.2), transparent 45%),
    linear-gradient(165deg, #06261c 0%, #031610 50%, #010c08 100%) !important;
  border: 2px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 32px !important;
  padding: 2.8rem 3.2rem !important;
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.95), 0 0 80px rgba(16, 185, 129, 0.3) !important;
  position: relative !important;
  direction: rtl !important;
  color: #ffffff !important;
  animation: rmModalPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.5) transparent !important;
}

.review-modal-card-lux::-webkit-scrollbar {
  width: 8px !important;
}

.review-modal-card-lux::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
}

.review-modal-card-lux::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #10b981 0%, #047857 100%) !important;
  border-radius: 10px !important;
}

@keyframes rmModalPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Close Button */
.rm-close-btn {
  position: absolute !important;
  top: 1.6rem !important;
  left: 1.6rem !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  z-index: 10 !important;
}

.rm-close-btn:hover {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 0 25px rgba(220, 38, 38, 0.6) !important;
}

/* Grand Header */
.rm-header-lux {
  display: flex !important;
  align-items: center !important;
  gap: 1.4rem !important;
  margin-bottom: 2.2rem !important;
  padding-bottom: 1.6rem !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.25) !important;
}

.rm-badge-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2.4rem !important;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.55) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  flex-shrink: 0 !important;
}

.rm-title-box {
  flex: 1 !important;
  min-width: 0 !important;
}

.rm-title-box h3 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 0.45rem 0 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.3px !important;
}

.rm-title-box p {
  font-size: 1rem !important;
  color: #a7f3d0 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
}

/* User Identification Status Box */
.rm-user-status-box {
  margin-bottom: 2rem !important;
}

.rm-user-flex-card {
  background: rgba(6, 44, 31, 0.7) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 22px !important;
  padding: 1.3rem 1.8rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.rm-user-flex-card .rmu-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 2px solid #34d399 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
  flex-shrink: 0 !important;
}

.rm-user-flex-card .rmu-switch-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #cbd5e1 !important;
  padding: 0.6rem 1.1rem !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.rm-user-flex-card .rmu-switch-btn:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}

.rm-guest-status-banner {
  background: linear-gradient(135deg, rgba(6, 44, 31, 0.65) 0%, rgba(3, 25, 18, 0.85) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 22px !important;
  padding: 1.2rem 1.7rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Star Rating Section */
.star-rating-lux-box {
  background: rgba(4, 30, 20, 0.8) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 26px !important;
  padding: 1.8rem 2rem !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}

.star-input-lux {
  display: flex !important;
  justify-content: center !important;
  gap: 1.2rem !important;
  font-size: 3.4rem !important;
  cursor: pointer !important;
  margin: 0.6rem 0 0.8rem !important;
  user-select: none !important;
}

.star-input-lux .star-inp {
  color: #475569;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-block !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.star-input-lux .star-inp.active,
.star-input-lux .star-inp.hover {
  color: #fbbf24 !important;
  transform: scale(1.18) translateY(-3px) !important;
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.85) !important;
}

.star-label-pill {
  display: inline-block !important;
  background: rgba(16, 185, 129, 0.22) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  color: #a7f3d0 !important;
  padding: 0.55rem 1.8rem !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  font-size: 1.08rem !important;
  margin-top: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3) !important;
  letter-spacing: -0.2px !important;
}

/* Guest Info Grid */
.rm-guest-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important;
  background: rgba(6, 44, 31, 0.45) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.3) !important;
  border-radius: 24px !important;
  padding: 1.8rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
}

.rm-field-label {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #ecfdf5 !important;
  display: block !important;
  margin-bottom: 0.6rem !important;
  letter-spacing: -0.2px !important;
}

.rm-section-label {
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 0.95rem !important;
  letter-spacing: -0.3px !important;
}

/* Inputs & Textareas */
.rm-input-lux,
.rm-textarea-lux {
  background: rgba(3, 20, 14, 0.9) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  padding: 1rem 1.4rem !important;
  font-size: 1.05rem !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.rm-input-lux {
  height: 54px !important;
}

.rm-input-lux:focus,
.rm-textarea-lux:focus {
  border-color: #34d399 !important;
  box-shadow: 0 0 28px rgba(52, 211, 153, 0.5) !important;
  background: rgba(5, 32, 22, 0.95) !important;
  outline: none !important;
}

.rm-textarea-lux {
  line-height: 1.85 !important;
  resize: vertical !important;
  min-height: 135px !important;
}

/* Category Highlight Tags */
.rm-tags-box {
  margin-bottom: 2rem !important;
}

.rev-cat-tags-lux {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.9rem !important;
}

.rev-cat-tags-lux .rev-cat-tag {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  color: #ecfdf5 !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  line-height: 1.3 !important;
}

.rev-cat-tags-lux .rev-cat-tag:hover {
  border-color: #34d399 !important;
  transform: translateY(-2px) !important;
  background: rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
}

.rev-cat-tags-lux .rev-cat-tag.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #6ee7b7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* Trust Banner */
.rm-trust-banner {
  background: rgba(6, 44, 31, 0.6) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  border-radius: 20px !important;
  padding: 1.3rem 1.7rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem !important;
  margin-bottom: 2.2rem !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.rm-trust-banner p {
  color: #a7f3d0 !important;
  font-size: 0.96rem !important;
  margin: 0 !important;
  line-height: 1.75 !important;
  font-weight: 600 !important;
}

/* Giant Submit Action Button */
.rm-submit-btn-lux {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  border: 2px solid #34d399 !important;
  color: #ffffff !important;
  padding: 1.2rem 2.6rem !important;
  border-radius: 50px !important;
  font-size: 1.22rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.6) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  font-family: inherit !important;
  height: 62px !important;
  box-sizing: border-box !important;
}

.rm-submit-btn-lux:hover {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 18px 55px rgba(16, 185, 129, 0.75) !important;
}

/* ========================= RESPONSIVE BREAKPOINTS FOR ALL SIZES ========================= */

/* Tablet (768px - 1024px) */
@media (max-width: 900px) {
  .review-modal-card-lux {
    padding: 2.2rem 2.2rem !important;
    max-height: 90vh !important;
  }
  
  .rm-header-lux {
    gap: 1.1rem !important;
    margin-bottom: 1.8rem !important;
    padding-bottom: 1.2rem !important;
  }

  .rm-badge-icon {
    width: 54px !important;
    height: 54px !important;
    font-size: 2rem !important;
  }

  .rm-title-box h3 {
    font-size: 1.4rem !important;
  }

  .star-input-lux {
    font-size: 3rem !important;
    gap: 0.9rem !important;
  }
}

/* Mobile (<= 640px) */
@media (max-width: 640px) {
  #reviewModal.modal-overlay {
    padding: 0.75rem !important;
  }

  .review-modal-card-lux {
    padding: 1.8rem 1.4rem !important;
    border-radius: 26px !important;
    max-height: 94vh !important;
    width: 100% !important;
  }

  .rm-close-btn {
    top: 1rem !important;
    left: 1rem !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  .rm-header-lux {
    gap: 0.9rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.2rem !important;
  }

  .rm-badge-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.8rem !important;
    border-radius: 14px !important;
  }

  .rm-title-box h3 {
    font-size: 1.22rem !important;
  }

  .rm-title-box p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  .rm-user-status-box {
    margin-bottom: 1.4rem !important;
  }

  .rm-user-flex-card,
  .rm-guest-status-banner {
    padding: 1rem 1.2rem !important;
    border-radius: 18px !important;
  }

  .star-rating-lux-box {
    padding: 1.3rem 1.1rem !important;
    margin-bottom: 1.4rem !important;
    border-radius: 20px !important;
  }

  .star-input-lux {
    font-size: 2.6rem !important;
    gap: 0.6rem !important;
  }

  .star-label-pill {
    font-size: 0.92rem !important;
    padding: 0.45rem 1.2rem !important;
  }

  .rm-guest-grid {
    grid-template-columns: 1fr !important;
    padding: 1.2rem !important;
    gap: 1.1rem !important;
    margin-bottom: 1.4rem !important;
    border-radius: 20px !important;
  }

  .rm-tags-box {
    margin-bottom: 1.4rem !important;
  }

  .rev-cat-tags-lux {
    gap: 0.65rem !important;
  }

  .rev-cat-tags-lux .rev-cat-tag {
    padding: 0.7rem 1.15rem !important;
    font-size: 0.9rem !important;
    border-radius: 12px !important;
  }

  .rm-trust-banner {
    padding: 1rem 1.2rem !important;
    gap: 0.9rem !important;
    margin-bottom: 1.6rem !important;
    border-radius: 16px !important;
  }

  .rm-trust-banner p {
    font-size: 0.86rem !important;
  }

  .rm-submit-btn-lux {
    font-size: 1.08rem !important;
    height: 56px !important;
    padding: 1rem 1.6rem !important;
  }
}

/* Extra Small Screens (<= 380px) */
@media (max-width: 380px) {
  .review-modal-card-lux {
    padding: 1.4rem 1rem !important;
  }

  .star-input-lux {
    font-size: 2.2rem !important;
    gap: 0.4rem !important;
  }

  .rm-title-box h3 {
    font-size: 1.1rem !important;
  }

  .rm-submit-btn-lux {
    font-size: 0.98rem !important;
    padding: 0.85rem 1.2rem !important;
  }
}

/* Light Theme Support */
html[data-theme="light"] .review-modal-card-lux,
body.light-theme .review-modal-card-lux {
  background: radial-gradient(circle at 90% 10%, rgba(16, 185, 129, 0.15), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(5, 150, 105, 0.1), transparent 45%),
    linear-gradient(165deg, #f0fdf4 0%, #ffffff 50%, #f8fafc 100%) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #0f172a !important;
  box-shadow: 0 40px 140px rgba(0, 0, 0, 0.35), 0 0 60px rgba(16, 185, 129, 0.2) !important;
}

html[data-theme="light"] .rm-title-box h3,
body.light-theme .rm-title-box h3 {
  color: #064e3b !important;
}

html[data-theme="light"] .rm-title-box p,
body.light-theme .rm-title-box p {
  color: #047857 !important;
}

html[data-theme="light"] .rm-section-label,
body.light-theme .rm-section-label {
  color: #064e3b !important;
}

html[data-theme="light"] .rm-field-label,
body.light-theme .rm-field-label {
  color: #0f172a !important;
}

html[data-theme="light"] .rm-input-lux,
html[data-theme="light"] .rm-textarea-lux,
body.light-theme .rm-input-lux,
body.light-theme .rm-textarea-lux {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .rm-input-lux:focus,
html[data-theme="light"] .rm-textarea-lux:focus,
body.light-theme .rm-input-lux:focus,
body.light-theme .rm-textarea-lux:focus {
  border-color: #10b981 !important;
  background: #ffffff !important;
}

html[data-theme="light"] .star-rating-lux-box,
body.light-theme .star-rating-lux-box {
  background: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] .rm-guest-grid,
body.light-theme .rm-guest-grid {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .rev-cat-tags-lux .rev-cat-tag,
body.light-theme .rev-cat-tags-lux .rev-cat-tag {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html[data-theme="light"] .rev-cat-tags-lux .rev-cat-tag.active,
body.light-theme .rev-cat-tags-lux .rev-cat-tag.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .rm-trust-banner,
body.light-theme .rm-trust-banner {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

html[data-theme="light"] .rm-trust-banner p,
body.light-theme .rm-trust-banner p {
  color: #065f46 !important;
}

html[data-theme="light"] .rm-close-btn,
body.light-theme .rm-close-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   🔒 FINAL DEFINITIVE REVIEW MODAL OVERRIDE — beats ALL earlier rules
   ========================================================================== */

#reviewModal {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(2, 12, 8, 0.88) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  z-index: 99999999 !important;
  padding: 1.2rem !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
}

#reviewModal.open,
#reviewModal.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#reviewModal[style*="flex"] {
  align-items: center !important;
  justify-content: center !important;
}

.review-modal-card-lux {
  width: min(800px, 96vw) !important;
  max-width: 800px !important;
  min-width: 0 !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  background: radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.22), transparent 48%),
              radial-gradient(circle at 15% 85%, rgba(5, 150, 105, 0.18), transparent 42%),
              linear-gradient(165deg, #06261c 0%, #031610 50%, #010c08 100%) !important;
  border: 2px solid rgba(52, 211, 153, 0.45) !important;
  border-radius: 28px !important;
  padding: 2.6rem 3rem !important;
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.96), 0 0 70px rgba(16, 185, 129, 0.28) !important;
  position: relative !important;
  direction: rtl !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.5) transparent !important;
  flex-shrink: 0 !important;
}

@media (max-width: 900px) {
  .review-modal-card-lux {
    padding: 2rem 2rem !important;
    max-height: 92vh !important;
  }
  .rm-title-box h3 { font-size: 1.35rem !important; }
  .rm-badge-icon   { width: 52px !important; height: 52px !important; font-size: 1.9rem !important; }
  .star-input-lux  { font-size: 2.9rem !important; gap: 0.85rem !important; }
}

@media (max-width: 640px) {
  #reviewModal { padding: 0.6rem !important; }

  .review-modal-card-lux {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.6rem 1.2rem !important;
    border-radius: 22px !important;
    max-height: 96vh !important;
  }

  .rm-close-btn {
    top: 0.85rem !important;
    left: 0.85rem !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .rm-header-lux {
    gap: 0.8rem !important;
    margin-bottom: 1.3rem !important;
    padding-bottom: 1rem !important;
  }

  .rm-badge-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.6rem !important;
    border-radius: 12px !important;
  }

  .rm-title-box h3 {
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
  }

  .rm-title-box p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  .rm-user-flex-card,
  .rm-guest-status-banner {
    padding: 0.9rem 1.1rem !important;
    border-radius: 16px !important;
  }

  .star-rating-lux-box {
    padding: 1.2rem 1rem !important;
    border-radius: 18px !important;
    margin-bottom: 1.2rem !important;
  }

  .star-input-lux {
    font-size: 2.4rem !important;
    gap: 0.5rem !important;
    margin: 0.5rem 0 0.6rem !important;
  }

  .star-label-pill {
    font-size: 0.88rem !important;
    padding: 0.4rem 1.1rem !important;
  }

  .rm-guest-grid {
    grid-template-columns: 1fr !important;
    padding: 1.1rem !important;
    gap: 1rem !important;
    margin-bottom: 1.2rem !important;
    border-radius: 18px !important;
  }

  .rm-input-lux {
    height: 50px !important;
    font-size: 0.98rem !important;
  }

  .rm-textarea-lux {
    min-height: 110px !important;
    font-size: 0.98rem !important;
  }

  .rm-tags-box { margin-bottom: 1.2rem !important; }

  .rev-cat-tags-lux { gap: 0.55rem !important; }

  .rev-cat-tags-lux .rev-cat-tag {
    padding: 0.65rem 1rem !important;
    font-size: 0.87rem !important;
    border-radius: 11px !important;
  }

  .rm-trust-banner {
    padding: 0.9rem 1.1rem !important;
    gap: 0.8rem !important;
    margin-bottom: 1.4rem !important;
    border-radius: 14px !important;
  }

  .rm-trust-banner p { font-size: 0.83rem !important; }

  .rm-submit-btn-lux {
    font-size: 1rem !important;
    height: 54px !important;
    padding: 0.9rem 1.4rem !important;
    border-radius: 40px !important;
  }

  .rm-section-label { font-size: 1.05rem !important; }
  .rm-field-label   { font-size: 0.92rem !important; }
}

@media (max-width: 400px) {
  .review-modal-card-lux {
    padding: 1.3rem 0.95rem !important;
    border-radius: 18px !important;
  }

  .star-input-lux {
    font-size: 2rem !important;
    gap: 0.35rem !important;
  }

  .rm-title-box h3   { font-size: 1rem !important; }
  .rm-submit-btn-lux { font-size: 0.93rem !important; }

  .rev-cat-tags-lux .rev-cat-tag {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.82rem !important;
  }
}

/* ==========================================================================
   🏰 MASTER LUXURY FOOTER 2026 — 100% BULLETPROOF RESPONSIVE SYSTEM
   • No vertical squishing • No text overflow • Generous breathing room
   • Seamless Dark / Light Theme • Adaptive 4-Col -> 2-Col -> 1-Col Grid
   ========================================================================== */

/* ─── 1. CONTAINER & GRID BASE ─── */
footer#mainPlatformFooter {
  width: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: #060d19 !important;
  color: #f1f5f9 !important;
}

html[data-theme="light"] footer#mainPlatformFooter,
body.light-theme footer#mainPlatformFooter {
  background: #f8fafc !important;
  color: #0f172a !important;
}

footer#mainPlatformFooter .container {
  max-width: 1400px !important;
  width: 95% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}

footer#mainPlatformFooter .footer-grid {
  display: grid !important;
  grid-template-columns: 1.55fr 1fr 1fr 1.35fr !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── 2. EQUAL LUXURY CARDS (NO NESTING BUGS) ─── */
footer#mainPlatformFooter .footer-col,
footer#mainPlatformFooter .footer-col-brand {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 1.6rem 1.4rem !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  width: 100% !important;
}

footer#mainPlatformFooter .footer-col:hover,
footer#mainPlatformFooter .footer-col-brand:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px -8px rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
}

/* Fix nested brand box */
footer#mainPlatformFooter .footer-brand-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Dark Theme Cards */
html[data-theme="dark"] footer#mainPlatformFooter .footer-col,
html[data-theme="dark"] footer#mainPlatformFooter .footer-col-brand,
body:not(.light-theme) footer#mainPlatformFooter .footer-col,
body:not(.light-theme) footer#mainPlatformFooter .footer-col-brand {
  background: #0d1527 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ─── 3. BRAND IDENTITY TYPOGRAPHY ─── */
footer#mainPlatformFooter .footer-brand-name {
  font-family: 'Outfit', -apple-system, sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
}

footer#mainPlatformFooter .footer-brand-ar {
  font-family: 'Tajawal', 'Cairo', sans-serif !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .footer-brand-ar,
body:not(.light-theme) footer#mainPlatformFooter .footer-brand-ar {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

footer#mainPlatformFooter .footer-brand-desc {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: #64748b !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .footer-brand-desc,
body:not(.light-theme) footer#mainPlatformFooter .footer-brand-desc {
  color: #94a3b8 !important;
}

/* ─── 4. CARD TITLES WITH ACCENT LINES ─── */
footer#mainPlatformFooter .footer-col-title {
  color: #0f172a !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin: 0 0 1.2rem 0 !important;
  padding-bottom: 0.6rem !important;
  position: relative !important;
  display: block !important;
}

footer#mainPlatformFooter .footer-col-title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 36px !important;
  height: 3px !important;
  background: #10b981 !important;
  border-radius: 2px !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .footer-col-title,
body:not(.light-theme) footer#mainPlatformFooter .footer-col-title {
  color: #ffffff !important;
}

/* ─── 5. CLEAN LINKS (SERVICES & SECTORS) ─── */
footer#mainPlatformFooter .footer-clean-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

footer#mainPlatformFooter .footer-clean-links li a {
  color: #334155 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease !important;
}

footer#mainPlatformFooter .footer-clean-links li a:hover {
  color: #059669 !important;
  transform: translateX(-4px) !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .footer-clean-links li a,
body:not(.light-theme) footer#mainPlatformFooter .footer-clean-links li a {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .footer-clean-links li a:hover,
body:not(.light-theme) footer#mainPlatformFooter .footer-clean-links li a:hover {
  color: #34d399 !important;
}

/* ─── 6. PROFILE CTA & SOCIALS ─── */
footer#mainPlatformFooter .f-profile-cta-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
  transition: all 0.25s ease !important;
  margin-top: 0.5rem !important;
  box-sizing: border-box !important;
}

footer#mainPlatformFooter .f-profile-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4) !important;
}

footer#mainPlatformFooter .footer-social-icons {
  display: flex !important;
  gap: 0.6rem !important;
  justify-content: flex-start !important;
  margin-top: 1.1rem !important;
  flex-wrap: wrap !important;
}

footer#mainPlatformFooter .f-soc-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 0.95rem !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
}

footer#mainPlatformFooter .f-soc-btn:hover {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .f-soc-btn,
body:not(.light-theme) footer#mainPlatformFooter .f-soc-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ─── 7. CONTACT CARDS (ZERO OVERFLOW & 2-LINE ELEGANT DESIGN) ─── */
footer#mainPlatformFooter .footer-contact-box-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

footer#mainPlatformFooter .f-contact-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.65rem 0.9rem !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

footer#mainPlatformFooter .f-contact-card:hover {
  background: #f1f5f9 !important;
  border-color: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1) !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .f-contact-card,
body:not(.light-theme) footer#mainPlatformFooter .f-contact-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

footer#mainPlatformFooter .fcc-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

footer#mainPlatformFooter .fcc-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  min-width: 0 !important;
  flex: 1 !important;
}

footer#mainPlatformFooter .fcc-label {
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .fcc-label,
body:not(.light-theme) footer#mainPlatformFooter .fcc-label {
  color: #94a3b8 !important;
}

footer#mainPlatformFooter .fcc-val {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

html[data-theme="dark"] footer#mainPlatformFooter .fcc-val,
body:not(.light-theme) footer#mainPlatformFooter .fcc-val {
  color: #ffffff !important;
}

footer#mainPlatformFooter .fcc-val.email-val {
  font-size: 0.8rem !important;
  font-family: 'Outfit', monospace !important;
  word-break: break-all !important;
}

footer#mainPlatformFooter .f-clean-wa-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
  transition: all 0.25s ease !important;
  margin-top: 0.8rem !important;
  box-sizing: border-box !important;
}

footer#mainPlatformFooter .f-clean-wa-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.45) !important;
}

/* ─── 8. RESPONSIVE BREAKPOINTS (THE MASTER BULLETPROOF RULES) ─── */

/* [Desktop Small / Tablet Landscape / 1250px down to 861px] → 2x2 Grid with Full Room */
@media (max-width: 1250px) {
  footer#mainPlatformFooter .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }

  footer#mainPlatformFooter .footer-col,
  footer#mainPlatformFooter .footer-col-brand {
    padding: 1.6rem 1.4rem !important;
  }
}

/* [Tablet Portrait / Mobile Wide / 860px down to 541px] → Clean 2-column or Full-width Stack */
@media (max-width: 860px) {
  footer#mainPlatformFooter .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  footer#mainPlatformFooter .footer-col,
  footer#mainPlatformFooter .footer-col-brand {
    padding: 1.4rem 1.25rem !important;
    border-radius: 18px !important;
  }

  footer#mainPlatformFooter .footer-contact-box-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }
}

/* [Mobile Phones / Under 540px] → 100% 1-Column Native App Style */
@media (max-width: 540px) {
  footer#mainPlatformFooter .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.1rem !important;
  }

  footer#mainPlatformFooter .footer-col,
  footer#mainPlatformFooter .footer-col-brand {
    padding: 1.25rem 1.1rem !important;
    border-radius: 16px !important;
  }

  footer#mainPlatformFooter .footer-contact-box-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
  }

  footer#mainPlatformFooter .footer-bottom-bar > div:first-child {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.8rem !important;
  }

  footer#mainPlatformFooter .footer-bottom-bar > div:first-child > div {
    justify-content: center !important;
  }

  footer#mainPlatformFooter .f-profile-cta-btn {
    font-size: 0.82rem !important;
    padding: 0.7rem 0.85rem !important;
  }
}

/* ==================== 👑 LUXURY WHITE-OUTLINE BRAND LOGO SYSTEM (ICON LEFT, OUTLINE TEXT) ==================== */
.nav-logo,
.footer-logo,
.auth-brand-center,
.footer-brand-box .footer-logo,
.dash-portal-brand > div:first-child {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
}

.logo-icon-wrap,
.footer-logo-badge,
.auth-logo-r-wrap {
  order: 1 !important;
  flex-shrink: 0 !important;
}

.logo-text-group,
.auth-brand-center > div:last-child,
.footer-brand-box .footer-logo > div:last-child {
  order: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.logo-title-en,
.logo-risale-main,
.auth-brand-name,
.footer-brand-name,
.risale-outline-brand,
.dash-portal-brand h3 {
  font-family: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  -webkit-text-stroke: 1.6px #ffffff !important;
  text-stroke: 1.6px #ffffff !important;
  paint-order: stroke fill !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4), 0 2px 10px rgba(0, 0, 0, 0.7) !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.nav-logo:hover .logo-title-en,
.footer-logo:hover .footer-brand-name,
.auth-brand-center:hover .auth-brand-name {
  -webkit-text-stroke: 1.8px #ffffff !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 0 24px rgba(229, 0, 39, 0.35) !important;
}

.logo-sub-tag,
.footer-brand-sub {
  direction: rtl !important;
  text-align: right !important;
}