/* ===== FIXES v3 (combined) =====
   Covers:
   - Desktop sidebar (products page) — solid theme-correct background,
     rounded corners, border, padding, shadow. Works in light AND dark mode.
   - Mobile Sheet/Drawer — solid background, dark overlay, blur.
   - Small-screen product card overflow.
   - Small-screen search bar sizing.
   - Header transparency fallback (when backdrop-filter unsupported).
   - Long product names — allow wrapping on mobile.
   - Force sticky positioning to behave nicely with the sidebar.
   - Ensure all Radix dialog content is opaque (no see-through panels).
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   FIX 1: Desktop Sidebar (Products page)
   ───────────────────────────────────────────── */
/* The aside itself — solid card background in both modes */
aside.w-64,
aside.shrink-0,
.w-64.shrink-0,
.flex.lg\:flex-row .w-64.shrink-0,
.flex.lg\:flex-row > div[class*="w-64"] {
  background-color: hsl(var(--card)) !important;
  border-radius: 0.75rem !important;
  border: 1px solid hsl(var(--border)) !important;
  padding: 1.25rem !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08) !important;
  min-height: 1px;
}

/* Inner sticky wrapper must NOT have its own opaque bg — let the aside do it */
.sticky.top-24 {
  background-color: transparent !important;
}

/* Category checkbox rows: nice hover, padding */
.space-y-2 > div,
.space-y-3 > div {
  padding: 0.375rem 0.5rem !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.15s ease !important;
}
.space-y-2 > div:hover,
.space-y-3 > div:hover {
  background-color: hsl(var(--accent) / 0.4) !important;
}

/* ─────────────────────────────────────────────
   FIX 2: Mobile Sheet / Drawer / Dialog
   ───────────────────────────────────────────── */
/* Opaque dialog content */
[data-radix-dialog-content][class*="fixed"][class*="bg-background"],
[data-radix-dialog-content].fixed.z-50,
.fixed.z-50[class*="bg-background"],
.fixed.z-50.bg-background {
  background-color: hsl(var(--background)) !important;
}

/* Solid dark overlay */
[data-radix-dialog-overlay],
.fixed.inset-0.z-50[class*="bg-black"],
.fixed.inset-0.z-50.bg-black\/80 {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* Make sure the mobile drawer content (Sheet) is fully opaque */
[data-state="open"].fixed.z-50,
.fixed.z-50[data-state="open"] {
  background-color: hsl(var(--background)) !important;
  box-shadow: -10px 0 30px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ─────────────────────────────────────────────
   FIX 3: Header Transparency Fallback
   The header uses bg-background/80 with backdrop-blur. In some browsers
   / contexts the blur may not render, leaving the header too transparent.
   Add a fallback solid-ish background.
   ───────────────────────────────────────────── */
header.sticky.top-0,
header[class*="bg-background\\/80"],
header[class*="bg-background\\/60"] {
  background-color: hsl(var(--background) / 0.92) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}
@supports (backdrop-filter: blur(12px)) {
  header.sticky.top-0,
  header[class*="bg-background\\/80"],
  header[class*="bg-background\\/60"] {
    background-color: hsl(var(--background) / 0.78) !important;
  }
}

/* ─────────────────────────────────────────────
   FIX 4: Small-screen Product Card Overflow
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

.group.block.h-full {
  min-width: 0;
}

@media (max-width: 480px) {
  .aspect-square {
    aspect-ratio: 1 / 1 !important;
  }
  .group.block.h-full .overflow-hidden {
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  .grid.grid-cols-2 > * {
    min-width: 0;
    overflow: hidden;
  }
  .grid.grid-cols-2 .text-xl,
  .grid.grid-cols-2 .text-2xl {
    font-size: 1rem !important;
  }
  .grid.grid-cols-2 [class*="Badge"] {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.35rem !important;
  }
  /* Allow product names to wrap on small screens instead of overflowing */
  .grid.grid-cols-2 h3,
  .grid.grid-cols-2 .line-clamp-2 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

.grid.grid-cols-2.gap-4 {
  gap: 0.5rem !important;
}
@media (max-width: 640px) {
  .grid.grid-cols-2.gap-4 {
    gap: 0.5rem !important;
  }
}

/* ─────────────────────────────────────────────
   FIX 5: Mobile Search Bar Sizing
   ───────────────────────────────────────────── */
@media (max-width: 380px) {
  header .w-36 input,
  header [class*="w-36"] input {
    font-size: 0.75rem !important;
    height: 2.25rem !important;
    padding-right: 2rem !important;
  }
  header .w-36 button,
  header [class*="w-36"] button {
    display: none !important;
  }
}

@media (max-width: 480px) {
  header form input[type="search"] {
    height: 2.25rem !important;
    font-size: 0.8rem !important;
    border-radius: 9999px !important;
  }
}

/* ─────────────────────────────────────────────
   FIX 6: Long product names — line clamp
   ───────────────────────────────────────────── */
h3.line-clamp-2,
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   FIX 7: Force RTL awareness for the Sheet slide-in
   In RTL, the Sheet should slide from the LEFT, not the right.
   ───────────────────────────────────────────── */
html[dir="rtl"] .fixed.z-50[class*="data-\\[state=closed\\]:duration-300"] {
  right: auto !important;
  left: 0 !important;
}

/* ─────────────────────────────────────────────
   FIX 8: Make sure sticky sidebar doesn't get hidden behind header
   ───────────────────────────────────────────── */
.sticky.top-24 {
  top: 6rem !important;
  max-height: calc(100vh - 7rem) !important;
  overflow-y: auto !important;
}

/* ─────────────────────────────────────────────
   FIX 9: Toast / Notification region — give it some breathing room
   ───────────────────────────────────────────── */
[data-sonner-toaster] {
  z-index: 9999 !important;
}

/* ─────────────────────────────────────────────
   FIX 10: Make the mobile filter "فلترة" button obvious
   ───────────────────────────────────────────── */
button {
  cursor: pointer !important;
}

/* Make sure focus is visible for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--primary)) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────────
   FIX 11 (v4): Semi-transparent heart/favorite buttons
   The product card heart buttons use `bg-background/50 backdrop-blur-sm`
   which makes them see-through and hard to read over product images.
   Make them SOLID so they're always visible.
   ───────────────────────────────────────────── */
button.absolute.top-2[class*="bg-background\\/50"],
button.absolute[class*="bg-background\\/50"],
button[class*="bg-background\\/50"][class*="backdrop-blur"],
button.rounded-full.backdrop-blur-sm[class*="bg-background"],
button[class*="absolute"][class*="rounded-full"][class*="backdrop-blur"] {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
}
/* Hover state - slightly accent */
button.absolute.top-2[class*="bg-background\\/50"]:hover,
button.absolute[class*="bg-background\\/50"]:hover,
button[class*="bg-background\\/50"][class*="backdrop-blur"]:hover {
  background-color: hsl(var(--accent)) !important;
}

/* ─────────────────────────────────────────────
   FIX 12 (v4): Header transparency - make it more opaque
   The header uses bg-background/80 which can look transparent
   Make it 95% opaque for better readability
   ───────────────────────────────────────────── */
header.sticky.top-0,
header[class*="bg-background\\/80"],
header[class*="bg-background\\/60"] {
  background-color: hsl(var(--background) / 0.95) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
}

/* ─────────────────────────────────────────────
   FIX 13 (v4): Product detail page - semi-transparent ring
   ───────────────────────────────────────────── */
.ring-offset-background[class*="focus-visible:ring-2"],
[class*="bg-background\\/30"],
[class*="bg-background\\/40"],
[class*="bg-background\\/50"]:not(button):not([class*="absolute"]) {
  background-color: hsl(var(--background)) !important;
}

/* ─────────────────────────────────────────────
   FIX 14 (v4): General rule - any UI control over product images
   should be SOLID, not transparent
   ───────────────────────────────────────────── */
.group.relative button[class*="absolute"],
.group button[class*="absolute"][class*="top-"],
.product-card button[class*="absolute"] {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

/* ─────────────────────────────────────────────
   FIX 15 (v4): Discount badges - make them solid too
   ───────────────────────────────────────────── */
[class*="bg-primary\\/90"],
[class*="bg-primary\\/80"],
[class*="bg-destructive\\/90"],
[class*="bg-destructive\\/80"],
.badge[class*="bg-"] {
  opacity: 1 !important;
}

/* ─────────────────────────────────────────────
   FIX 16 (v4): Image overlay buttons (zoom, gallery nav, etc.)
   ───────────────────────────────────────────── */
button[class*="absolute"][class*="rounded-full"]:not([class*="bg-primary"]):not([class*="bg-destructive"]):not([class*="bg-accent"]) {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* ─────────────────────────────────────────────
   FIX 17 (v4): UNIVERSAL - Any fixed/absolute panel with transparent bg
   This catches ANY sidebar/drawer/modal that has no solid background.
   Only applies to panels with z-index >= 30 (real overlays, not decorations).
   ───────────────────────────────────────────── */

/* Target ALL fixed/absolute panels with high z-index that might be transparent */
[data-state="open"].fixed,
[data-state="open"][class*="fixed"],
[data-state="open"][class*="absolute"],
.fixed.z-40[class*="bg-background"],
.fixed.z-50[class*="bg-background"],
.fixed.z-50:not([class*="bg-black"]),
.fixed.z-40:not([class*="bg-black"]),
.absolute.z-40[class*="bg-background"],
.absolute.z-50[class*="bg-background"],
aside.fixed,
aside[class*="fixed"],
nav.fixed[class*="bg-background"],
nav[class*="fixed"][class*="bg-background"],
[class*="sidebar"][class*="fixed"],
[class*="drawer"][class*="fixed"],
[class*="filter"][class*="fixed"],
[class*="filter-panel"],
[class*="side-panel"],
[class*="side-menu"] {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Ensure side panels have a visible border + shadow for separation */
.fixed.z-50:not([class*="bg-black"]):not([class*="inset-0"]),
.fixed.z-40:not([class*="bg-black"]):not([class*="inset-0"]):not(header) {
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Header should be more opaque (95% instead of 80%) */
header.sticky.top-0,
header[class*="backdrop-blur"] {
  background-color: hsl(var(--background) / 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Any button inside a panel that's semi-transparent should be solid */
[data-state="open"] button[class*="bg-background\\/50"],
[data-state="open"] button[class*="bg-background\\/40"],
[data-state="open"] button[class*="bg-background\\/30"],
[data-state="open"] button[class*="backdrop-blur"],
.fixed button[class*="bg-background\\/50"],
.fixed button[class*="bg-background\\/40"],
.fixed button[class*="bg-background\\/30"],
.fixed button[class*="backdrop-blur"] {
  background-color: hsl(var(--card)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
  opacity: 1 !important;
}

/* Dark mode adjustments */
html.dark [data-state="open"].fixed,
html.dark .fixed.z-50:not([class*="bg-black"]),
html.dark aside.fixed {
  background-color: hsl(var(--background)) !important;
  border-color: hsl(var(--border)) !important;
}

/* Specifically target the filter sidebar pattern from the screenshot */
/* A panel with: X close button, title text, list of categories */
.fixed[class*="z-50"]:has(button[class*="absolute"]):has(h2):has(ul),
.fixed[class*="z-50"]:has(button[class*="absolute"]):has(h3):has(ul),
.fixed[class*="z-40"]:has(button[class*="absolute"]):has(h2):has(ul) {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15) !important;
}