/* White, Red & Black Theme */

/* Body - white background */
body {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Header - black background with red border - override Tailwind */
header.bg-white,
header[class*="bg-white"],
body header,
html body header {
    background-color: #000000 !important;
    border-color: #dc2626 !important;
}

/* Navigation links - white with red hover - override Tailwind */
nav a,
header nav a,
header nav a.text-gray-700,
header nav a[class*="text-gray"] {
    color: #ffffff !important;
}
nav a:hover,
header nav a:hover {
    color: #dc2626 !important;
}

/* Header specific text colors - white - override all Tailwind text colors */
header .text-gray-900,
header .text-gray-800,
header .text-gray-700,
header .text-gray-600,
header .text-gray-500,
header [class*="text-gray"] {
    color: #ffffff !important;
}

/* Mobile menu button and hamburger icon */
header button.text-gray-700,
header button svg,
header .text-gray-700 svg {
    color: #ffffff !important;
}

/* Header buttons - keep red styling */
header button,
header .bg-black {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Buttons - red styling with white text */
.bg-black.text-white:not(.hover\:bg-gray-800) {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
.bg-black.text-white:not(.hover\:bg-gray-800):hover {
    background-color: #b91c1c !important;
}
.hover\:bg-gray-800:hover.bg-black {
    background-color: #dc2626 !important;
}

/* White backgrounds - stay white */
.bg-white {
    background-color: #ffffff !important;
}

/* Gray backgrounds - light gray shades */
.bg-gray-50 {
    background-color: #f9fafb !important;
}
.bg-gray-100 {
    background-color: #f3f4f6 !important;
}
.bg-gray-900, .from-gray-90\.to-black {
    background-color: #111827 !important;
}
.to-black {
    background-color: #000000 !important;
}

/* Gray-800 backgrounds - red */
.bg-gray-800 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Text colors - black scheme with red accents */
.text-gray-900, .text-gray-800 {
    color: #000000 !important;
}
.text-gray-700, .text-gray-600 {
    color: #374151 !important;
}
.text-gray-500 {
    color: #6b7280 !important;
}

/* Text white - stays white */
.text-white {
    color: #ffffff !important;
}

/* Hover states */
.text-gray-700:hover\:text-gray-900:hover {
    color: #dc2626 !important;
}

/* Borders - red */
.border-gray-100, .border-gray-200 {
    border-color: #e5e7eb !important;
}
.border-gray-300 {
    border-color: #d1d5db !important;
}

/* Form inputs - white background with black text */
input, textarea, select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #d1d5db !important;
}

input::placeholder, textarea::placeholder {
    color: #9ca3af !important;
}

.input, textarea, select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Green button - change to red */
.bg-green-500 {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
.bg-green-500:hover\:bg-green-600:hover {
    background-color: #b91c1c !important;
}

/* Available badge - red background with white text */
.bg-green-500.text-white {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Mobile nav - white */
#mobileNav {
    background-color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Shadow colors - subtle gray */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Keep gradient backgrounds as-is (for hero sections with images) */
/* Don't override .bg-gradient-to-br globally - it breaks background images */

/* Hero sections with dark backgrounds - ensure white text */
section.bg-gradient-to-br[class*="from-gray-900"],
section.bg-gradient-to-br[class*="from-gray-900"] *,
.bg-gradient-to-br.from-gray-900,
.bg-gradient-to-br.from-gray-900 *,
section[class*="from-gray-900"] h1,
section[class*="from-gray-900"] h2,
section[class*="from-gray-900"] h3,
section[class*="from-gray-900"] p,
section[class*="from-gray-900"] span,
section[class*="from-gray-900"] div {
    color: #ffffff !important;
}

/* Ensure text-white elements stay white */
.text-white,
.text-white *,
[class*="text-white"] {
    color: #ffffff !important;
}

/* Dark gradient sections specifically */
[class*="from-gray-900"][class*="to-black"],
[class*="from-gray-900"][class*="to-black"] * {
    color: #ffffff !important;
}

/* Specific pages with background images - black text on hero sections */
/* Index page (homepage) */
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] h1,
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] h2,
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] h3,
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] p,
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] span,
body.page-index section.bg-gradient-to-br[class*="from-gray-900"] div,
body.page-index section[class*="from-gray-900"] h1,
body.page-index section[class*="from-gray-900"] h2,
body.page-index section[class*="from-gray-900"] h3,
body.page-index section[class*="from-gray-900"] p,
body.page-index section[class*="from-gray-900"] span,
body.page-index section[class*="from-gray-900"] div {
    color: #000000 !important;
}

/* Sell Your Car page */
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] h1,
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] h2,
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] h3,
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] p,
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] span,
body.page-sell-your-car section.bg-gradient-to-br[class*="from-gray-900"] div,
body.page-sell-your-car section[class*="from-gray-900"] h1,
body.page-sell-your-car section[class*="from-gray-900"] h2,
body.page-sell-your-car section[class*="from-gray-900"] h3,
body.page-sell-your-car section[class*="from-gray-900"] p,
body.page-sell-your-car section[class*="from-gray-900"] span,
body.page-sell-your-car section[class*="from-gray-900"] div {
    color: #000000 !important;
}

/* Fix buttons in hero sections on index and sell-your-car pages - ensure black text */
body.page-index section[class*="from-gray-900"] a.bg-white,
body.page-index section[class*="from-gray-900"] button.bg-white,
body.page-sell-your-car section[class*="from-gray-900"] a.bg-white,
body.page-sell-your-car section[class*="from-gray-900"] button.bg-white,
body.page-index section[class*="from-gray-900"] .bg-white,
body.page-sell-your-car section[class*="from-gray-900"] .bg-white {
    color: #000000 !important;
}

body.page-index section[class*="from-gray-900"] a.bg-white *,
body.page-index section[class*="from-gray-900"] button.bg-white *,
body.page-sell-your-car section[class*="from-gray-900"] a.bg-white *,
body.page-sell-your-car section[class*="from-gray-900"] button.bg-white *,
body.page-index section[class*="from-gray-900"] .bg-white *,
body.page-sell-your-car section[class*="from-gray-900"] .bg-white * {
    color: #000000 !important;
}

/* Stars and icons - red */
.text-yellow-400, svg.text-yellow-400, .flex.text-yellow-400 svg, .flex.text-yellow-400 .text-yellow-400 {
    color: #dc2626 !important;
    fill: #dc2626 !important;
}

/* All star icons in reviews */
.flex.text-yellow-400 svg path {
    fill: #dc2626 !important;
}

/* Specific rating star styling */
svg[fill="currentColor"] {
    color: #dc2626 !important;
    fill: #dc2626 !important;
}

/* Ensure star elements are always red */
.bg-white.rounded-2xl .flex.text-yellow-400 svg,
.bg-gray-50.rounded-2xl .flex.text-yellow-400 svg,
.bg-white .flex.text-yellow-400 svg {
    color: #dc2626 !important;
    fill: #dc2626 !important;
}

/* Accent color - red */
.text-accent-500, .accent {
    color: #dc2626 !important;
}

/* Star icons - ensure red in all contexts */
.star-rating, .rating-stars svg {
    color: #dc2626 !important;
    fill: #dc2626 !important;
}

/* Light blue message bar - light red theme */
.bg-blue-50 {
    background-color: #fef2f2 !important;
}

.bg-blue-50 p.text-blue-900, .bg-blue-50 .text-blue-900 {
    color: #991b1b !important;
}

.bg-blue-50.border-blue-100 {
    border-color: #fecaca !important;
}

/* All blue backgrounds - change to light tones */
.bg-blue-100, .bg-green-100, .bg-purple-100, .bg-yellow-100, .bg-orange-100,
.bg-red-100, .bg-indigo-100, .bg-teal-100 {
    background-color: #fef2f2 !important;
}

/* Blue text on light backgrounds - dark red */
.text-blue-900 {
    color: #991b1b !important;
}

/* Border colors */
.border-blue-100, .border-green-100, .border-purple-100, .border-yellow-100 {
    border-color: #fecaca !important;
}

/* Modal overlay - dark with opacity */
.fixed.inset-0.z-50, .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Modal content - white */
.bg-white.max-w-2xl.shadow-xl.rounded-2xl {
    background-color: #ffffff !important;
}

/* Footer - light gray */
footer.bg-gray-50 {
    background-color: #f9fafb !important;
}

/* Ensure modal overlays everything */
.fixed.inset-0.z-\\[9999\\], .z-\\[10000\\], .z-\\[10001\\] {
    z-index: 2147483647 !important;
}

/* Vehicle description and content containers - white */
.bg-white\/95.backdrop-blur-xl, .bg-white\/80.backdrop-blur-sm {
    background-color: #ffffff !important;
}

/* Ensure all text within background containers is readable */
.bg-white p, .bg-gray-50 p, [class*="bg-white"] p,
.bg-white div, .bg-gray-50 div, [class*="bg-white"] div {
    color: inherit !important;
}

/* Force override for text colors - black/dark gray */
.text-gray-600, p.text-gray-600, div.text-gray-600, span.text-gray-600 {
    color: #4b5563 !important;
}

/* Card backgrounds - white */
.bg-white\/95 {
    background-color: #ffffff !important;
}

/* Gradient overlays on images */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
}

/* Backdrop blur elements */
.backdrop-blur-xl, .backdrop-blur-sm {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Content wrappers with mixed backgrounds - white */
.bg-white\/95 {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Fix for inline text content - dark gray */
.text-gray-600 {
    color: #4b5563 !important;
}

/* Ensure descriptions are visible - dark gray */
p.text-gray-600[style*="color"], p[style*="color"].text-gray-600 {
    color: #4b5563 !important;
}

/* Override any inline styles for text color - black */
p, div, span, h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
}

/* Finance modal - ensure it's on top */
#financeModal {
    position: fixed !important;
    z-index: 2147483647 !important;
}

#financeModal > div {
    position: relative !important;
    z-index: 2147483648 !important;
}

/* Override any stacking context issues */
div.relative.z-10, div[class*="z-"][class*="relative"] {
    z-index: auto !important;
}

/* Ensure modals appear above all content */
.modal-overlay, .fixed.inset-0[class*="Modal"] {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Specific fix for finance modal visibility */
#financeModal {
    z-index: 999999 !important;
    position: fixed !important;
    transform: none !important;
}

#financeModal iframe {
    position: relative !important;
    z-index: 1000000 !important;
}

/* Any modal overlay */
[class*="Modal"], .modal-overlay {
    position: fixed !important;
    z-index: 2147483646 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Modal content */
[class*="Modal"] > div, .modal-overlay > div {
    position: relative !important;
    z-index: 2147483647 !important;
}

/* Force disable stacking context creation */
.backdrop-blur-xl, .backdrop-blur-sm {
    transform: none !important;
    perspective: none !important;
    filter: none !important;
    -webkit-filter: blur(0px) !important;
    filter: blur(0px) !important;
}

/* Ensure modals are directly on body */
body > #financeModal {
    position: fixed !important;
    z-index: 2147483647 !important;
}

/* Override any stacking context from transforms */
div.transform, div[class*="backdrop"] {
    transform: none !important;
}

/* Status badges - ensure proper contrast */
.bg-green-100, .bg-green-500 {
    background-color: #dc2626 !important;
}

.text-green-800, .text-green-600 {
    color: #ffffff !important;
}

/* Green icon backgrounds */
.bg-green-100 svg, .text-green-600 svg {
    color: #ffffff !important;
}

/* Fix any inline white text on red backgrounds */
[class*="bg-green-500"] [class*="text-white"],
.bg-green-500.text-white {
    color: #ffffff !important;
}

/* Links - red color */
a {
    color: #dc2626 !important;
}
a:hover {
    color: #b91c1c !important;
}

/* Primary buttons */
button.bg-black, .bg-black {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}
button.bg-black:hover, .bg-black:hover {
    background-color: #b91c1c !important;
}