/* =============================================
   flat4sale — Theme Override v3
   Source: inspected from index-1CiWhRPw.css
   Hero uses: .from-primary + .bg-gradient-to-r
              --primary resolves to #F70607
   Fix: override --primary variable + all red
   ============================================= */

/* ── 1. CSS Custom Properties ── */
:root {
  --primary: 231 84% 15%;
  /* #070f43 */
  --primary-foreground: 0 0% 100%;
  --destructive: 231 84% 15%;
  --ring: 231 84% 15%;
}

.dark {
  --primary: 231 84% 15%;
  --primary-foreground: 0 0% 100%;
}

/* ── 2. THE HERO FIX ──────────────────────────────────────────
   DevTools shows the hero div has:
     .from-primary  → --tw-gradient-from: #F70607
     .to-primary/80 → --tw-gradient-to: rgb(247 6 7 / .8)
   These read from var(--primary). Overriding --primary above
   handles NEW renders, but Tailwind JIT bakes the hex at
   build time in some versions — so we also force the vars:   */
.from-primary {
  --tw-gradient-from: #070f43 var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary\/80,
.to-primary {
  --tw-gradient-to: rgb(7 15 67 / 0.8) var(--tw-gradient-to-position) !important;
}

/* Any gradient that still resolves to the red primary */
[class*="from-primary"] {
  --tw-gradient-from: #070f43 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

[class*="to-primary"] {
  --tw-gradient-to: rgb(7 15 67 / 0.8) !important;
}

/* Catch the built CSS rule directly (seen in DevTools) */
.from-primary,
div.from-primary,
section.from-primary {
  --tw-gradient-from: #070f43 var(--tw-gradient-from-position, ) !important;
}

/* ── 3. Background colours ── */
.bg-primary,
[class*="bg-primary"] {
  background-color: #070f43 !important;
}

.bg-red-50 {
  background-color: #e8eaf6 !important;
}

.bg-red-100 {
  background-color: #c5cae9 !important;
}

.bg-red-200 {
  background-color: #9fa8da !important;
}

.bg-red-300 {
  background-color: #7986cb !important;
}

.bg-red-400,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.bg-red-800,
.bg-red-900,
.bg-\[\#F70607\],
.bg-\[\#f70607\],
.bg-\[\#EF4444\],
.bg-\[\#ef4444\],
.bg-\[\#DC2626\],
.bg-\[\#dc2626\] {
  background-color: #070f43 !important;
}

/* hover */
.hover\:bg-primary:hover,
[class*="hover:bg-primary"]:hover {
  background-color: #0a1860 !important;
}

.hover\:bg-red-400:hover,
.hover\:bg-red-500:hover,
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-\[\#F70607\]:hover,
.hover\:bg-\[\#f70607\]:hover {
  background-color: #0a1860 !important;
}

/* ── 4. Text colours ── */
.text-primary,
[class*="text-primary"] {
  color: #ffffff !important;
}

.text-red-400,
.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800,
.text-\[\#F70607\],
.text-\[\#f70607\],
.text-\[\#EF4444\],
.text-\[\#ef4444\] {
  color: #070f43 !important;
}

/* ── 5. Border colours ── */
.border-primary,
[class*="border-primary"] {
  border-color: #070f43 !important;
}

.border-red-400,
.border-red-500,
.border-red-600,
.border-red-700,
.border-\[\#F70607\],
.border-\[\#f70607\] {
  border-color: #070f43 !important;
}

/* ── 6. Ring / focus ── */
.ring-primary,
.focus\:ring-primary:focus,
.ring-red-500,
.ring-red-600,
.focus\:ring-red-500:focus,
.focus\:ring-red-600:focus {
  --tw-ring-color: #070f43 !important;
}

/* ── 7. Gradients (non-primary) ── */
.from-red-400,
.from-red-500,
.from-red-600,
.from-\[\#F70607\],
.from-\[\#f70607\] {
  --tw-gradient-from: #070f43 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-red-400,
.to-red-500,
.to-red-600,
.to-\[\#F70607\],
.to-\[\#f70607\] {
  --tw-gradient-to: #070f43 !important;
}

.via-red-400,
.via-red-500,
.via-red-600 {
  --tw-gradient-via: #070f43 !important;
}

/* ── 8. Inline style overrides ── */
[style*="background:#F70607"],
[style*="background: #F70607"],
[style*="background-color:#F70607"],
[style*="background-color: #F70607"],
[style*="background:#f70607"],
[style*="background-color:#f70607"],
[style*="background:#EF4444"],
[style*="background-color:#EF4444"],
[style*="background:red"],
[style*="background-color:red"] {
  background-color: #070f43 !important;
  background: #070f43 !important;
}

[style*="color:#F70607"],
[style*="color: #F70607"],
[style*="color:#f70607"],
[style*="color:#EF4444"],
[style*="color:red"] {
  color: #070f43 !important;
}

/* ── 9. Buttons — all variants ── */
button[class*="bg-primary"],
a[class*="bg-primary"],
button[class*="bg-red"],
a[class*="bg-red"],
[role="button"][class*="primary"],
[role="button"][class*="red"] {
  background-color: #070f43 !important;
  border-color: #070f43 !important;
  color: #ffffff !important;
}

button[class*="bg-primary"]:hover,
a[class*="bg-primary"]:hover,
button[class*="bg-red"]:hover,
a[class*="bg-red"]:hover {
  background-color: #0a1860 !important;
  border-color: #0a1860 !important;
}

/* Outline / ghost with primary border+text */
button[class*="border-primary"],
a[class*="border-primary"],
button[class*="text-primary"][class*="border"],
a[class*="text-primary"][class*="border"] {
  border-color: #070f43 !important;
  color: #070f43 !important;
}

button[class*="border-red"],
a[class*="border-red"] {
  border-color: #070f43 !important;
  color: #070f43 !important;
}

/* ── 10. Percentage / tag badges ── */
span[class*="bg-red"][class*="text-red"],
div[class*="bg-red"][class*="text-red"],
.bg-red-100.text-red-600,
.bg-red-100.text-red-700 {
  background-color: #e8eaf6 !important;
  color: #070f43 !important;
}

span.bg-red-500,
span.bg-red-600,
div.bg-red-500,
div.bg-red-600 {
  background-color: #070f43 !important;
  color: #ffffff !important;
}

/* ── 11. SVG icons ── */
.text-primary svg,
.text-red-500 svg,
.text-red-600 svg {
  color: #ffffff !important;
}

[fill="#F70607"],
[fill="#f70607"],
[fill="#EF4444"],
[fill="#ef4444"],
[fill="#DC2626"],
[fill="#dc2626"] {
  fill: #070f43 !important;
}

[stroke="#F70607"],
[stroke="#f70607"],
[stroke="#EF4444"],
[stroke="#ef4444"] {
  stroke: #070f43 !important;
}

/* ── 12. Logo replacement ── */
img[alt="ClickNMove Logo"],
img[alt="clicknmove"],
img[src*="clicknmove"],
.logo img,
header img,
nav img {
  content: url('https://flat4sale.co.in/files/logo.png') !important;
  height: 48px !important;
  width: auto !important;
}

/* ── 13. Dark mode variants ── */
.dark .dark\:bg-primary,
.dark [class*="dark:bg-primary"] {
  background-color: #070f43 !important;
}

.dark .dark\:text-primary,
.dark [class*="dark:text-primary"] {
  color: #c5cae9 !important;
}