/* Malek Deals premium background fix - visible page backgrounds */
html, body, #root { min-height: 100%; }
body[data-page-bg="home"], html[data-page-bg="home"] { --malek-bg-img: url("bg-home-hero.webp"); --malek-bg-pos: center top; }
body[data-page-bg="providers"], html[data-page-bg="providers"] { --malek-bg-img: url("bg-providers.webp"); --malek-bg-pos: center center; }
body[data-page-bg="bill"], html[data-page-bg="bill"] { --malek-bg-img: url("bg-bill-help.webp"); --malek-bg-pos: center center; }
body[data-page-bg], html[data-page-bg] body {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222 47% 10%;
  --card-foreground: 210 40% 98%;
  --popover: 222 47% 10%;
  --popover-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 78%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --border: 217.2 32.6% 25%;
  --input: 217.2 32.6% 25%;
}
body[data-page-bg] #root > div.min-h-screen,
html[data-page-bg] body #root > div.min-h-screen {
  background-color: #020617 !important;
  background-image: linear-gradient(180deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.64) 38%, rgba(2,6,23,.92) 100%), var(--malek-bg-img) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: var(--malek-bg-pos) !important;
  background-attachment: fixed !important;
}
/* Keep the original clean white header while the page background is premium/dark */
body[data-page-bg] header,
html[data-page-bg] body header {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
  backdrop-filter: blur(14px);
}
body[data-page-bg] header *,
html[data-page-bg] body header * { color: #111827 !important; }
body[data-page-bg] header .text-primary,
html[data-page-bg] body header .text-primary { color: #1e4f9f !important; }
body[data-page-bg] header .bg-primary,
body[data-page-bg] header .bg-primary *,
html[data-page-bg] body header .bg-primary,
html[data-page-bg] body header .bg-primary * { color: #fff !important; }
/* Premium transparent cards and sections so the background image is actually visible */
body[data-page-bg] .bg-background,
html[data-page-bg] body .bg-background { background-color: transparent !important; }
body[data-page-bg] .bg-card,
body[data-page-bg] [class*="bg-card"],
html[data-page-bg] body .bg-card,
html[data-page-bg] body [class*="bg-card"] {
  background: rgba(15,23,42,.82) !important;
  border-color: rgba(96,165,250,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px);
}
body[data-page-bg] .bg-primary\/5,
html[data-page-bg] body .bg-primary\/5 { background: rgba(30,79,159,.18) !important; }
body[data-page-bg] .border-primary\/20,
html[data-page-bg] body .border-primary\/20 { border-color: rgba(96,165,250,.30) !important; }
body[data-page-bg] input,
body[data-page-bg] textarea,
body[data-page-bg] select,
html[data-page-bg] body input,
html[data-page-bg] body textarea,
html[data-page-bg] body select {
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  border-color: rgba(148,163,184,.55) !important;
}
body[data-page-bg] input::placeholder,
body[data-page-bg] textarea::placeholder,
html[data-page-bg] body input::placeholder,
html[data-page-bg] body textarea::placeholder { color: #64748b !important; }
body[data-page-bg] .text-muted-foreground,
html[data-page-bg] body .text-muted-foreground { color: rgba(226,232,240,.82) !important; }
body[data-page-bg] .text-foreground,
html[data-page-bg] body .text-foreground { color: #f8fafc !important; }
/* Give the first page content breathing room over the background */
body[data-page-bg] #root > div.min-h-screen > .container,
html[data-page-bg] body #root > div.min-h-screen > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  body[data-page-bg] #root > div.min-h-screen,
  html[data-page-bg] body #root > div.min-h-screen { background-attachment: scroll !important; background-position: center top !important; }
}