/* =====================================================================
 * SHERIDAN CONTAINERS — Premium Theme Override
 * New palette: Deep Navy + Royal Blue + Antique Gold
 * ===================================================================== */

/* ---------- Color tokens ---------- */
:root {
  --sc-navy:       #0B1426;
  --sc-navy-light: #0F1D32;
  --sc-blue:       #2563EB;
  --sc-blue-hover: #1D4ED8;
  --sc-blue-dark:  #1E3A8A;
  --sc-gold:       #D4A853;
  --sc-gold-bright:#F59E0B;
  --sc-slate:      #F0F4F8;
  --sc-white:      #FFFFFF;
  --sc-text:       #1E293B;
  --sc-text-muted: #64748B;
  --sc-border:     #E2E8F0;
  --sc-success:    #16A34A;
}

/* ---------- Dark section backgrounds (charcoal → navy) ---------- */
.bg-outback-charcoal,
[class*="bg-outback-charcoal"]:not([class*="bg-outback-charcoal/"]) {
  background-color: var(--sc-navy) !important;
}

/* ---------- Red → Blue primary accent ---------- */
.bg-outback-red {
  background-color: var(--sc-blue) !important;
}
.bg-outback-red:hover,
.hover\:bg-outback-red:hover {
  background-color: var(--sc-blue-hover) !important;
}
.text-outback-red {
  color: var(--sc-blue) !important;
}
.border-outback-red {
  border-color: var(--sc-blue) !important;
}
.hover\:text-outback-red:hover {
  color: var(--sc-blue-hover) !important;
}
.hover\:bg-red-700:hover,
.hover\:bg-red-800:hover {
  background-color: var(--sc-blue-hover) !important;
}
.bg-red-700, .bg-red-800 {
  background-color: var(--sc-blue-dark) !important;
}

/* ---------- Yellow/gold refinement ---------- */
.text-\[\#FFD500\] {
  color: var(--sc-gold) !important;
}
.fill-\[\#FFD500\] {
  fill: var(--sc-gold) !important;
}
.bg-\[\#FFD500\] {
  background-color: var(--sc-gold) !important;
}
.text-\[\#FFD500\] {
  color: var(--sc-gold) !important;
}
.border-\[\#FFD500\] {
  border-color: var(--sc-gold) !important;
}
.hover\:border-\[\#FFD500\]:hover {
  border-color: var(--sc-gold) !important;
}
.hover\:text-\[\#FFD500\]:hover {
  color: var(--sc-gold) !important;
}

/* ---------- Concrete → Slate ---------- */
.bg-outback-concrete {
  background-color: var(--sc-slate) !important;
}

/* ---------- Gradient overrides ---------- */
.from-outback-charcoal {
  --tw-gradient-from: var(--sc-navy) !important;
}
.to-outback-charcoal {
  --tw-gradient-to: var(--sc-navy) !important;
}
.via-outback-charcoal {
  --tw-gradient-via: var(--sc-navy) !important;
}

header nav, header nav.hidden,
[class*="bg-outback-charcoal"] nav {
  background-color: var(--sc-navy) !important;
}




}

/* ---------- Hero section enhancement ---------- */
section:first-of-type .bg-outback-charcoal,
.hero-section {
  background: linear-gradient(135deg, var(--sc-navy) 0%, var(--sc-navy-light) 100%) !important;
}

/* ---------- Buttons global override ---------- */
a[class*="bg-outback-red"],
button[class*="bg-outback-red"],
[class*="bg-outback-red"][class*="hover:"] {
  background-color: var(--sc-blue) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
a[class*="bg-outback-red"]:hover,
button[class*="bg-outback-red"]:hover {
  background-color: var(--sc-blue-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

/* ---------- Card polish ---------- */
.bg-white {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.group:hover .bg-white,
a:hover > .bg-white {
  box-shadow: 0 8px 30px rgba(11, 20, 38, 0.12);
}

/* ---------- Section divider refinement ---------- */
.border-outback-charcoal\/10,
.border-outback-charcoal\/12,
.border-outback-charcoal\/15,
.border-outback-charcoal\/8 {
  border-color: var(--sc-border) !important;
}

/* ---------- Typography polish ---------- */
.font-heading,
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

/* Subtle text shadow on hero headings for depth */
.bg-outback-charcoal h1,
.bg-outback-charcoal h2,
[class*="bg-outback-charcoal"] h1,
[class*="bg-outback-charcoal"] h2 {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- Stats section glow ---------- */
.bg-outback-charcoal .text-4xl,
.bg-outback-charcoal .text-5xl,
[class*="bg-outback-charcoal"] .text-4xl,
[class*="bg-outback-charcoal"] .text-5xl {
  color: var(--sc-gold) !important;
}

/* ---------- Footer enhancement ---------- */
footer, footer[class*="bg-outback-charcoal"] {
  background: linear-gradient(180deg, var(--sc-navy-light) 0%, #060D18 100%) !important;
}

/* ---------- Scroll-triggered fade-in (CSS only) ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
section {
  animation: fadeInUp 0.6s ease-out both;
}

/* ---------- Smooth scrolling ---------- */
html {
  scroll-behavior: smooth;
}

/* ---------- Selection color ---------- */
::selection {
  background: rgba(37, 99, 235, 0.2);
  color: var(--sc-text);
}

/* ---------- Badge/chip refinements ---------- */
.bg-outback-red\/10,
.bg-outback-red\/15,
.bg-outback-red\/20 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}
.text-outback-red {
  color: var(--sc-blue) !important;
}

/* ---------- Trust badge icons ---------- */
.bg-outback-red\/10 svg,
[class*="bg-outback-red"] svg {
  color: var(--sc-blue) !important;
}

/* ---------- Star ratings keep gold ---------- */
.fill-\[\#FFD500\],
[class*="fill-"][class*="FFD500"] {
  fill: var(--sc-gold-bright) !important;
}

/* ---------- Cookie banner / overlay matches ---------- */
.bg-outback-charcoal\/95,
.bg-outback-charcoal\/90 {
  background-color: rgba(11, 20, 38, 0.95) !important;
}

/* ---------- Link underline effect ---------- */
.prose a {
  color: var(--sc-blue) !important;
  text-decoration-color: rgba(37, 99, 235, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.prose a:hover {
  text-decoration-color: var(--sc-blue);
}

/* ---------- Input focus states ---------- */
input:focus, textarea:focus, select:focus {
  border-color: var(--sc-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none;
}

/* ---------- Pagination active → blue ---------- */
.osc-pagination .page-numbers.current {
  background: var(--sc-blue) !important;
  border-color: var(--sc-blue) !important;
}

/* ---------- Product tab active → blue ---------- */
.osc-product .osc-tab-active {
  color: var(--sc-blue) !important;
  border-bottom-color: var(--sc-blue) !important;
}

/* ---------- Top bar ---------- */
.bg-outback-charcoal + div,
header > div:first-child {
  background-color: var(--sc-navy) !important;
}

/* ---------- Scrollbar styling ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sc-slate); }
::-webkit-scrollbar-thumb { 
  background: #94A3B8; 
  border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { background: #64748B; }

/* ---------- Image hover zoom ---------- */
.group img,
a img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.group:hover img {
  transform: scale(1.03);
}


/* ---------- Hardcoded arbitrary red values in compiled Tailwind ---------- */
.bg-\[\#B32E2E\] { background-color: var(--sc-blue) !important; }
.hover\:bg-\[\#9a2424\]:hover { background-color: var(--sc-blue-hover) !important; }
.bg-\[\#C8102E\],
.bg-\[\#c8102e\] { background-color: var(--sc-blue) !important; }
.text-\[\#C8102E\],
.text-\[\#c8102e\] { color: var(--sc-blue) !important; }
.hover\:bg-\[\#C8102E\]:hover,
.hover\:bg-\[\#c8102e\]:hover { background-color: var(--sc-blue-hover) !important; }

/* Category filter active button (React-rendered, no class) */
button[style*="background"] {
  transition: all 0.2s ease !important;
}

/* Price text colors from compiled CSS (oklch/oklab reds) */
.text-outback-red,
[class*="text-outback-red"] {
  color: var(--sc-blue) !important;
}

/* ---------- Compiled CSS oklab red overrides ---------- */
/* The compiled Tailwind uses oklab() for outback-red colors.
   We override by targeting the semantic class patterns */
.bg-outback-red,
[class*="bg-outback-red"]:not([class*="bg-outback-red/"]) {
  background-color: var(--sc-blue) !important;
}
.bg-outback-red\/5 { background-color: rgba(37, 99, 235, 0.05) !important; }
.bg-outback-red\/10 { background-color: rgba(37, 99, 235, 0.1) !important; }
.bg-outback-red\/15 { background-color: rgba(37, 99, 235, 0.15) !important; }
.bg-outback-red\/20 { background-color: rgba(37, 99, 235, 0.2) !important; }
.bg-outback-red\/25 { background-color: rgba(37, 99, 235, 0.25) !important; }

.border-outback-red,
.border-outback-red\/20,
.border-outback-red\/30 {
  border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Hero CTA buttons */
a[class*="bg-\[#B32E2E\]"],
a[class*="bg-[#B32E2E]"] {
  background-color: var(--sc-blue) !important;
}
a[class*="bg-\[#B32E2E\]"]:hover,
a[class*="bg-[#B32E2E]"]:hover {
  background-color: var(--sc-blue-hover) !important;
}

/* Broader red color sweep: any inline-styled red buttons from React */
[style*="rgb(193, 18, 31)"],
[style*="rgb(200, 16, 46)"],
[style*="#C1121F"],
[style*="#c1121f"],
[style*="#C8102E"],
[style*="#c8102e"],
[style*="#B32E2E"],
[style*="#b32e2e"] {
  background-color: var(--sc-blue) !important;
}


/* ---------- React-rendered category filter buttons (inline styles) ---------- */
button[style*="border"][style*="rgb(193"] {
  border-color: var(--sc-blue) !important;
}
button[style*="background"][style*="rgb(193"],
button[style*="background-color"][style*="rgb(193"] {
  background-color: var(--sc-blue) !important;
}

/* ---------- Newsletter popup gold → blue accent ---------- */
[class*="newsletter"] button,
[class*="popup"] button[class*="bg-"] {
  background-color: var(--sc-blue) !important;
}


/* =====================================================================
 * HEADER FIX — text-outback-charcoal in header must be WHITE,
 * not navy, since the header background is dark navy.
 * ===================================================================== */

/* Logo "SHERIDAN" text — was text-outback-charcoal (now navy), unreadable on dark bg */
header .text-outback-charcoal,
nav .text-outback-charcoal,
header [class*="text-outback-charcoal"]:not([class*="text-outback-charcoal/"]) {
  color: #FFFFFF !important;
}

/* Logo "CONTAINERS" subtitle — blue is OK but white/gold is more readable */
header .text-outback-red,
header [class*="text-outback-red"] {
  color: var(--sc-gold) !important;
}

/* Nav link text — make white instead of blue for readability */
header a[class*="nav-underline"],
header nav a {
  color: #FFFFFF !important;
}
header a[class*="nav-underline"]:hover,
header nav a:hover {
  color: var(--sc-gold) !important;
}

/* Nav SVG icons — search, cart, hamburger — must be white */
header svg,
header button svg,
header a svg {
  color: #FFFFFF !important;
  stroke: currentColor !important;
}

/* Cart badge count */
header [class*="bg-outback-red"] {
  background-color: var(--sc-blue) !important;
}

/* Logo icon — shift hue from red/orange to blue */

/* Mobile hamburger menu icon specifically */
header button[aria-label*="menu"] svg,
header button[aria-label*="Menu"] svg,
header button:last-child svg {
  color: #FFFFFF !important;
}

/* Top utility bar icons (mail, phone) on mobile */
header > div:first-child svg,
[class*="bg-outback-charcoal"] > div:first-child svg {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Social media icons in header — keep visible */
header a[href*="facebook"] svg,
header a[href*="youtube"] svg,
header a[href*="tiktok"] svg,
header a[href*="twitter"] svg {
  color: #FFFFFF !important;
}

/* Mobile header bottom border */
header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sticky header backdrop on scroll */
header[class*="sticky"],
header[class*="fixed"] {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


/* =====================================================================
 * SHERIDAN CONTAINERS — Visibility & Layout Fixes v2
 * Fixes: header bg, blue-square icons, invisible text, subscribe popup
 * ===================================================================== */

/* ===== 1. HEADER — remove white background, make navy ===== */
header.bg-white,
header[class*="bg-white"] {
  background-color: var(--sc-navy) !important;
}
header.border-outback-charcoal,
header[class*="border-outback-charcoal"] {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Search bar below header */
header + .border-b-2.bg-white,
header ~ div.bg-white.border-b-2,
.min-h-screen > div.bg-white.border-b-2 {
  background-color: var(--sc-navy) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Search input text in dark header search bar */
header + div input,
header ~ div.border-b-2 input {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
header + div input::placeholder,
header ~ div.border-b-2 input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}


/* ===== 2. SVG ICONS — white on blue/navy backgrounds ===== */
/* Icons inside bg-outback-red (now blue) containers must be WHITE */
.bg-outback-red svg,
.bg-outback-red svg *,
[class*="bg-outback-red"]:not([class*="bg-outback-red/"]) svg,
[class*="bg-outback-red"]:not([class*="bg-outback-red/"]) svg * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}
/* Specific icon containers that have blue bg */
.bg-outback-red .text-white,
[class*="bg-outback-red"] .text-white {
  color: #FFFFFF !important;
}

/* Icons inside bg-outback-charcoal (now navy) containers */
.bg-outback-charcoal svg.text-white,
[class*="bg-outback-charcoal"] svg.text-white,
.bg-outback-charcoal svg[class*="text-white"],
[class*="bg-outback-charcoal"]:not(header):not(footer) svg[class*="text-white"] {
  color: #FFFFFF !important;
}

/* Gold-colored icons should stay gold */
.bg-outback-charcoal svg.text-\[\#FFD500\],
[class*="bg-outback-charcoal"] svg[class*="text-"][class*="FFD500"],
.text-\[\#FFD500\] svg,
svg.text-\[\#FFD500\] {
  color: var(--sc-gold) !important;
  stroke: var(--sc-gold) !important;
}

/* Icons in the feature cards on dark backgrounds */
.bg-outback-charcoal .bg-outback-red svg,
[class*="bg-outback-charcoal"] .bg-outback-red svg,
[class*="bg-outback-charcoal"] [class*="bg-outback-red"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}


/* ===== 3. TEXT VISIBILITY — dark text on dark backgrounds ===== */
/* Feature card titles on dark backgrounds */
[class*="bg-outback-charcoal"] .text-outback-charcoal,
.bg-outback-charcoal .text-outback-charcoal {
  color: #FFFFFF !important;
}
/* Muted text on dark backgrounds */
[class*="bg-outback-charcoal"] .text-outback-charcoal\/60,
[class*="bg-outback-charcoal"] .text-outback-charcoal\/70,
[class*="bg-outback-charcoal"] .text-outback-charcoal\/80,
.bg-outback-charcoal .text-muted-foreground {
  color: rgba(255, 255, 255, 0.6) !important;
}


/* ===== 4. BUTTONS — text visibility fixes ===== */
/* "Get Quote" and similar outline buttons - dark text on dark bg */
.border-outback-charcoal.text-outback-charcoal,
a.text-outback-charcoal[class*="border-outback-charcoal"],
button.text-outback-charcoal[class*="border-outback-charcoal"] {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: transparent !important;
}
.border-outback-charcoal.text-outback-charcoal:hover,
a.text-outback-charcoal[class*="border-outback-charcoal"]:hover,
button.text-outback-charcoal[class*="border-outback-charcoal"]:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #FFFFFF !important;
}

/* "Meet the Team" button */
a[class*="border-outback-charcoal"][class*="text-outback-charcoal"],
button[class*="border-outback-charcoal"][class*="text-outback-charcoal"] {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
a[class*="border-outback-charcoal"][class*="text-outback-charcoal"]:hover,
button[class*="border-outback-charcoal"][class*="text-outback-charcoal"]:hover {
  background-color: var(--sc-blue) !important;
  border-color: var(--sc-blue) !important;
  color: #FFFFFF !important;
}

/* Buttons with bg-white text-outback-charcoal (on light bg) — keep readable */
.bg-white.text-outback-charcoal,
a.bg-white[class*="text-outback-charcoal"],
button.bg-white[class*="text-outback-charcoal"] {
  color: var(--sc-navy) !important;
  background-color: #FFFFFF !important;
}

/* Wishlist/favorites button */
button[class*="text-outback-charcoal"][class*="border-outback-charcoal"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Filter tabs on white backgrounds - keep dark */
.bg-white .text-outback-charcoal,
section.bg-white .text-outback-charcoal {
  color: var(--sc-navy) !important;
}


/* ===== 5. CUSTOM CONTAINER PROJECTS — black bars with hidden text ===== */
/* The step items in the ordering cards that have dark bg hiding text */
[class*="bg-outback-charcoal"][class*="text-white"] {
  background-color: var(--sc-navy) !important;
  color: #FFFFFF !important;
}

/* Step number badges - ensure they're visible */
.bg-outback-red span,
[class*="bg-outback-red"] span {
  color: #FFFFFF !important;
}

/* Ordering card on white background */
.bg-white .text-outback-charcoal,
.bg-white h3.text-outback-charcoal {
  color: var(--sc-navy) !important;
}

/* Step descriptions on white cards */
.bg-white .text-outback-charcoal\/70 {
  color: rgba(11, 20, 38, 0.7) !important;
}


/* ===== 6. SUBSCRIBE POPUP & SECTION — hide completely ===== */
/* Subscribe popup at bottom of page */
.min-h-screen > div.bg-outback-charcoal[class*="max-w-lg"][class*="border-2"][class*="border-white"],
div[class*="max-w-lg"][class*="bg-outback-charcoal"][class*="shadow-"] {
  display: none !important;
}

/* Subscribe section in the page body (before footer) */
section[class*="bg-outback-charcoal"][class*="overflow-hidden"]:has(input[type="email"]) {
  display: none !important;
}
/* Fallback for browsers without :has() */
/* We target the subscribe section that contains "Subscribe & Save" */


/* ===== 7. LIVECHAT WIDGET ===== */
/* Chat bubble button (bottom-right, rounded circle) */
button.fixed.z-40[class*="rounded-full"][class*="right-"] {
  background-color: var(--sc-gold) !important;
}
button.fixed.z-40[class*="rounded-full"][class*="right-"] svg {
  color: var(--sc-navy) !important;
  stroke: var(--sc-navy) !important;
}

/* Back-to-top button (bottom-left) */
.fixed.z-40[class*="bottom-24"][class*="left-"] {
  background-color: var(--sc-gold) !important;
}

/* Toast/notification container — must stay transparent */
.fixed.z-\[100\] {
  background-color: transparent !important;
}


/* ===== 8. FAQ ACCORDION ICONS ===== */
/* FAQ section icons showing as blue squares */
[class*="bg-outback-charcoal"] details svg,
[class*="bg-outback-charcoal"] [class*="accordion"] svg,
[class*="bg-outback-charcoal"] button[class*="flex"] svg[class*="lucide"] {
  color: var(--sc-gold) !important;
  stroke: var(--sc-gold) !important;
}

/* FAQ question text */
[class*="bg-outback-charcoal"] button[class*="flex"] span,
[class*="bg-outback-charcoal"] [class*="accordion"] span {
  color: #FFFFFF !important;
}


/* ===== 9. STATS/ACHIEVEMENT COUNTERS ===== */
/* Counter icons */
[class*="bg-outback-charcoal"] .bg-outback-red svg,
[class*="bg-outback-charcoal"] [class*="bg-outback-red"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}


/* ===== 10. CATEGORY CARDS & FEATURE CARDS ===== */
/* Category card icons on dark backgrounds */
[class*="bg-outback-charcoal"] [class*="bg-white"] svg {
  color: var(--sc-blue) !important;
  stroke: var(--sc-blue) !important;
}

/* Category card text on dark bg */
[class*="bg-outback-charcoal"] [class*="bg-white"] .text-outback-charcoal {
  color: var(--sc-navy) !important;
}

/* Feature cards in "Why Choose" section - icons */
.bg-white [class*="bg-outback-charcoal"] svg {
  color: var(--sc-gold) !important;
  stroke: var(--sc-gold) !important;
}

/* Feature card icon containers on white bg */
.bg-white .bg-outback-charcoal {
  background-color: var(--sc-navy) !important;
}


/* ===== 11. PRODUCT CARDS — fix button visibility ===== */
/* Product "Get Quote" secondary buttons */
.bg-white a[class*="border-outback-charcoal"][class*="text-outback-charcoal"] {
  color: var(--sc-navy) !important;
  border-color: var(--sc-navy) !important;
}
.bg-white a[class*="border-outback-charcoal"][class*="text-outback-charcoal"]:hover {
  background-color: var(--sc-navy) !important;
  color: #FFFFFF !important;
}

/* Wishlist/favorite buttons on product cards */
.bg-white button[class*="text-outback-charcoal"] svg {
  color: var(--sc-navy) !important;
  stroke: var(--sc-navy) !important;
}


/* ===== 12. CERTIFICATION SECTION (footer-adjacent) ===== */
/* Certification section white bg cards on white section */
section.bg-white .bg-outback-charcoal svg {
  color: var(--sc-gold) !important;
  stroke: var(--sc-gold) !important;
}
section.bg-white .text-outback-charcoal {
  color: var(--sc-navy) !important;
}
section.bg-white .border-outback-charcoal\/10 {
  border-color: rgba(11, 20, 38, 0.1) !important;
}

/* ===== 13. INLINE SUBSCRIBE SECTION (above footer) ===== */
/* This is a section with "Subscribe & Save" that should be hidden */
section.bg-outback-charcoal:has(> div > div > h2) {
  /* Check if it's the subscribe section specifically */
}

/* Target subscribe sections by their gradient bar and structure */
section.bg-outback-charcoal > .bg-gradient-to-r:first-child + div h2 {
  /* This is likely the subscribe section */
}



/* ===== SUBSCRIBE SECTION HIDE (inline, from post content) ===== */
/* Target subscribe section specifically - it's the one with email input */
main section.bg-outback-charcoal:has(input[type="email"]),
main section.bg-outback-charcoal:has(input[placeholder*="email"]) {
  display: none !important;
}

/* ===== ADDITIONAL ICON FIXES ===== */
/* SVGs with fill="none" inside blue containers - ensure stroke is white */
.bg-outback-red svg[fill="none"],
[class*="bg-outback-red"]:not([class*="/"]) svg[fill="none"] {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Override the Trust badge icons rule that was making them blue */
.bg-outback-red .text-white svg,
.bg-outback-red svg.text-white {
  color: #FFFFFF !important;
  stroke: currentColor !important;
}

/* Step number circles */
.bg-outback-red span.text-white,
[class*="bg-outback-red"] span.text-white {
  color: #FFFFFF !important;
}

/* ===== HEADER — ensure search bar area matches ===== */
header + div.bg-white,
.min-h-screen > div.bg-white.border-b-2 {
  background-color: var(--sc-navy) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Search close button */
header + div svg,
header + div button svg {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== WHITE BACKGROUND SECTIONS — keep dark text ===== */
/* On white/light bg sections, text-outback-charcoal should be dark navy */
section.bg-white .text-outback-charcoal,
section.bg-outback-concrete .text-outback-charcoal,
div.bg-white .text-outback-charcoal,
.bg-white .text-outback-charcoal {
  color: var(--sc-navy) !important;
}

/* But override back to white for dark-bg contexts within white sections */
.bg-white [class*="bg-outback-charcoal"] .text-outback-charcoal,
section.bg-white [class*="bg-outback-charcoal"] .text-outback-charcoal {
  color: #FFFFFF !important;
}

/* ===== PRODUCT CARD BUTTON FIXES ===== */
/* "Get Quote" buttons on white bg product cards */
.bg-white a.text-outback-charcoal.border-outback-charcoal,
.bg-white a[class*="text-outback-charcoal"][class*="border-outback-charcoal"] {
  color: var(--sc-navy) !important;
  border-color: var(--sc-navy) !important;
  background-color: transparent !important;
}
.bg-white a.text-outback-charcoal.border-outback-charcoal:hover,
.bg-white a[class*="text-outback-charcoal"][class*="border-outback-charcoal"]:hover {
  background-color: var(--sc-navy) !important;
  color: #FFFFFF !important;
}

/* ===== LIVECHAT BUTTON — rebrand ===== */
button[aria-label*="chat"],
button[aria-label*="Chat"],
button.bg-outback-red.fixed,
button[class*="fixed"][class*="bg-outback-red"] {
  background-color: var(--sc-blue) !important;
}
button[aria-label*="chat"]:hover,
button[aria-label*="Chat"]:hover {
  background-color: var(--sc-blue-hover) !important;
}


/* ===== MOBILE SAFE AREA (notch/dynamic island) ===== */
/* Ensure the top bar accounts for iOS safe area */
body {
  padding-top: env(safe-area-inset-top, 0px) !important;
}
/* The sticky header needs safe area offset on mobile */
header.sticky, header[class*="sticky"] {
  top: env(safe-area-inset-top, 0px) !important;
}
/* Bottom safe area for fixed elements */
button.fixed.z-40[class*="rounded-full"][class*="right-"] {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ===== MOBILE SIDEBAR MENU ===== */
#osc-mobile-drawer nav {
  background-color: #FFFFFF !important;
}
#osc-mobile-drawer nav a {
  color: var(--sc-navy) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(11, 20, 38, 0.08) !important;
  display: block !important;
}
#osc-mobile-drawer nav a:hover,
#osc-mobile-drawer nav a:active {
  color: var(--sc-blue) !important;
}
#osc-mobile-drawer nav button[aria-label="Close menu"] {
  color: var(--sc-navy) !important;
}

/* ===== LOGO — shift from red to blue ===== */
img[src*="outback-oc-logo"],
img[alt*="SC logo"],
img[alt*="OC logo"] {
  filter: hue-rotate(210deg) saturate(1.8) brightness(1.1) !important;
}