/* EGS Motors - Light Blue on White Theme
   Light blue (#5580A3) on white, with dark blue (#215077) and black highlights */

/* Body - white background with dark text */
body {
    background-color: #ffffff !important;
    color: #212121 !important;
}

/* Header - dark blue (matches footer) */
header {
    background-color: #215077 !important;
    border-color: #215077 !important;
}

/* Header mobile secondary bar */
header .bg-gray-50 {
    background-color: #215077 !important;
    border-color: #215077 !important;
}

/* Top-level header navigation - light on dark blue */
header nav:not(#mobileNav) > a,
header nav:not(#mobileNav) > div > button {
    color: #e3eaf1 !important;
}
header nav:not(#mobileNav) > a:hover,
header nav:not(#mobileNav) > div > button:hover {
    color: #ffffff !important;
}

/* Header buttons (service trigger, mobile menu toggle) - light */
header button {
    color: #e3eaf1 !important;
}

/* Primary buttons (black/gray-800) - dark blue */
.bg-black.text-white:not(.hover\:bg-gray-800) {
    background-color: #215077 !important;
    color: #ffffff !important;
}
.bg-black.text-white:not(.hover\:bg-gray-800):hover {
    background-color: #000000 !important;
}
.hover\:bg-gray-800:hover.bg-black {
    background-color: #000000 !important;
}

/* Gray-800 backgrounds - dark blue */
.bg-gray-800 {
    background-color: #215077 !important;
    color: #ffffff !important;
}

/* Headings - dark blue */
.text-gray-900, .text-gray-800 {
    color: #215077 !important;
}

/* Body text - black/graphite */
.text-gray-700, .text-gray-600 {
    color: #212121 !important;
}
.text-gray-500 {
    color: #4b5563 !important;
}

/* Keep explicit white text white */
.text-white {
    color: #ffffff !important;
}

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

/* Borders - light blue tints */
.border-gray-100, .border-gray-200 {
    border-color: #e3eaf1 !important;
}
.border-gray-300 {
    border-color: #96ACC2 !important;
}

/* Form inputs - white with dark blue text and light blue borders */
input, textarea, select {
    background-color: #ffffff !important;
    color: #212121 !important;
    border-color: #96ACC2 !important;
}

input::placeholder, textarea::placeholder {
    color: #7390AE !important;
}

/* Green button - dark blue (Book a Service / Enquire Now) */
.bg-green-500 {
    background-color: #215077 !important;
    color: #ffffff !important;
}
.bg-green-500:hover\:bg-green-600:hover {
    background-color: #000000 !important;
}

/* Available badge - white text on dark blue background */
.bg-green-500.text-white {
    background-color: #215077 !important;
    color: #ffffff !important;
}

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

/* Orange accents - light blue */
.text-orange-500 {
    color: #5580A3 !important;
}
.text-orange-500:hover\:text-orange-600:hover {
    color: #215077 !important;
}
.bg-orange-500 {
    background-color: #215077 !important;
    color: #ffffff !important;
}
.bg-orange-500:hover\:bg-orange-600:hover {
    background-color: #000000 !important;
}

/* Stars and icons - light blue */
.text-yellow-400, svg.text-yellow-400, .flex.text-yellow-400 svg, .flex.text-yellow-400 .text-yellow-400 {
    color: #5580A3 !important;
    fill: #5580A3 !important;
}

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

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

/* Ensure star elements are always light blue */
.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: #5580A3 !important;
    fill: #5580A3 !important;
}

/* Accent color - light blue */
.text-accent-500, .accent {
    color: #5580A3 !important;
}

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

/* Blue message bar - light blue tint on white */
.bg-blue-50 {
    background-color: #eef4f9 !important;
}

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

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

/* Dark hero sections - dark blue to black gradient */
section.bg-gradient-to-br[class*="from-gray-900"] {
    background-image: linear-gradient(to bottom right, #215077 0%, #000000 100%) !important;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #215077 0%, #000000 100%) !important;
}

/* Gray-900 backgrounds - dark blue */
.bg-gray-900, .from-gray-900, .from-gray-90\.to-black {
    background-color: #215077 !important;
}

/* Text on dark sections */
.bg-gray-900 .text-gray-300, .bg-gray-900 .text-gray-400,
.bg-gradient-to-br .text-gray-300, .bg-gradient-to-br .text-gray-400 {
    color: #96ACC2 !important;
}

/* Accent color - light blue for icons (e.g. blue-600 icons) */
.text-blue-600 {
    color: #215077 !important;
}

/* Footer - dark blue band with white text */
footer.bg-gray-50 {
    background-color: #215077 !important;
}

footer h3,
footer .text-gray-900,
footer .text-gray-700,
footer .text-gray-600,
footer .text-gray-500,
footer .text-gray-400,
footer p,
footer a {
    color: #e3eaf1 !important;
}

footer a:hover {
    color: #ffffff !important;
}

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

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

/* Ensure modal overlays everything */
.fixed.inset-0.z-\\[9999\\], .z-\\[10000\\], .z-\\[10001\\] {
    z-index: 2147483647 !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;
}