:root {
  --facebook-blue: #1565C0;
}

/* Facebook Marketplace-style product card overrides */

/* Price and bold text */
[class*="price"],
.card-price,
.product-price,
.card h5,
.card-body h5,
b,
strong {
  color: #050505 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Product title and links */
[class*="title"],
.card-title,
.product-title,
.card-body a {
  color: #050505 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Location and time / muted meta text */
[class*="location"],
[class*="time"],
.card-text,
.card-body p,
.product-meta {
  color: #65676B !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Card background / border / shadow: completely removed for flat look */
.card,
[class*="product-card"],
.grid-item {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0px !important;
}

/* Image corners */
.card img,
[class*="product-card"] img {
  border-radius: 8px !important;
}

/* Showing ads / results count headings */
[class*="showing-ads"],
[class*="results-count"],
h3,
h4,
.main-content h5 {
  color: #050505 !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Grid gap: tighter spacing between cards */
.grid,
[class*="grid-container"],
[class*="product-layout"] {
  gap: 16px !important;
  row-gap: 24px !important;
}

/* Card body text alignment */
.card-body,
[class*="card-content"] {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Page background: light gray */
body,
html,
.main-body,
#wrapper,
.content-wrapper {
  background-color: #F0F2F5 !important;
}

/* Main content / grid container background */
.main-content,
[class*="container"],
[class*="grid-container"] {
  background-color: #F0F2F5 !important;
}

/* Product cards: transparent to blend with gray background */
.card,
[class*="product-card"] {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   Facebook Marketplace–style sidebar overrides
   ========================================================= */

/* Sidebar shell: white bg, no heavy card border/shadow */
aside,
.sidebar,
[class*="left-panel"] {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 12px !important;
  border-radius: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Section headings inside sidebar */
aside h3,
aside label,
.sidebar h3,
.sidebar label,
[class*="left-panel"] h3,
[class*="left-panel"] label {
  color: #050505 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 6px !important;
}

/* Divider lines between sections — Facebook uses hairline 1px #e4e6eb with 12px gap */
aside .border-t,
.sidebar .border-t,
[class*="left-panel"] .border-t,
aside [class*="border-t"],
.sidebar [class*="border-t"],
aside hr,
.sidebar hr,
[class*="left-panel"] hr,
aside [class*="divider"],
.sidebar [class*="divider"],
[class*="left-panel"] [class*="divider"] {
  border-top: 1px solid #e4e6eb !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
  border-bottom: none !important;
}

/* Sidebar text items */
aside button,
aside li,
aside span,
.sidebar button,
.sidebar li,
.sidebar span,
[class*="left-panel"] button,
[class*="left-panel"] li,
[class*="left-panel"] span {
  color: #050505 !important;
  font-size: 14px !important;
}

/* Muted helper text inside sidebar (counts, hints) */
aside .text-muted-foreground,
.sidebar .text-muted-foreground,
[class*="left-panel"] .text-muted-foreground {
  color: #65676B !important;
}

/* Primary accent links / active items — darker accessible blue (WCAG AA 4.5:1 on white) */
aside .text-primary,
.sidebar .text-primary,
[class*="left-panel"] .text-primary {
  color: var(--facebook-blue) !important;
  font-weight: 600 !important;
}

/* Inputs, selects, and text fields inside sidebar */
aside select,
aside input[type="text"],
aside input[type="number"],
aside input[type="search"],
.sidebar select,
.sidebar input[type="text"],
.sidebar input[type="number"],
.sidebar input[type="search"],
[class*="left-panel"] select,
[class*="left-panel"] input[type="text"],
[class*="left-panel"] input[type="number"],
[class*="left-panel"] input[type="search"] {
  background-color: #F0F2F5 !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 6px !important;
  color: #050505 !important;
  font-size: 14px !important;
  padding: 7px 10px !important;
  min-height: 36px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Hover: slightly lighter background */
aside select:hover,
aside input[type="text"]:hover,
aside input[type="number"]:hover,
aside input[type="search"]:hover,
.sidebar select:hover,
.sidebar input[type="text"]:hover,
.sidebar input[type="number"]:hover,
.sidebar input[type="search"]:hover,
[class*="left-panel"] select:hover,
[class*="left-panel"] input[type="text"]:hover,
[class*="left-panel"] input[type="number"]:hover,
[class*="left-panel"] input[type="search"]:hover {
  background-color: #E4E6EB !important;
  border-color: #CED0D4 !important;
}

/* Focus: white background + darker accessible blue ring */
aside select:focus,
aside input[type="text"]:focus,
aside input[type="number"]:focus,
aside input[type="search"]:focus,
.sidebar select:focus,
.sidebar input[type="text"]:focus,
.sidebar input[type="number"]:focus,
.sidebar input[type="search"]:focus,
[class*="left-panel"] select:focus,
[class*="left-panel"] input[type="text"]:focus,
[class*="left-panel"] input[type="number"]:focus,
[class*="left-panel"] input[type="search"]:focus {
  background-color: #ffffff !important;
  border-color: var(--facebook-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--facebook-blue) 25%, transparent) !important;
}

/* Checkboxes — match Facebook size, spacing, and accent color */
aside input[type="checkbox"],
.sidebar input[type="checkbox"],
[class*="left-panel"] input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  accent-color: var(--facebook-blue) !important;
  cursor: pointer !important;
}

/* Checkbox wrapper rows (label + checkbox) */
aside label,
.sidebar label,
[class*="left-panel"] label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  cursor: pointer !important;
  color: #050505 !important;
  font-size: 14px !important;
  line-height: 1.34 !important;
}

/* Sub-category tree border-left inside sidebar */
aside ul ul,
.sidebar ul ul,
[class*="left-panel"] ul ul {
  border-left-color: #e4e6eb !important;
}

/* Hover states: very subtle grey highlight */
aside button:hover,
.sidebar button:hover,
[class*="left-panel"] button:hover {
  background-color: #F0F2F5 !important;
}

/* Small-screen bump for sidebar filter readability */
@media (max-width: 640px) {
  aside label,
  .sidebar label,
  [class*="left-panel"] label {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  aside select,
  aside input[type="text"],
  aside input[type="number"],
  aside input[type="search"],
  .sidebar select,
  .sidebar input[type="text"],
  .sidebar input[type="number"],
  .sidebar input[type="search"],
  [class*="left-panel"] select,
  [class*="left-panel"] input[type="text"],
  [class*="left-panel"] input[type="number"],
  [class*="left-panel"] input[type="search"] {
    font-size: 15px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
  }

  aside h3,
  aside label,
  .sidebar h3,
  .sidebar label,
  [class*="left-panel"] h3,
  [class*="left-panel"] label {
    font-size: 17px !important;
  }
}

/* ==========================================================================
   FACEBOOK MARKETPLACE EXACT MATCH CLONE
   ========================================================================== */

/* 1. Light-grey page background (Facebook's official surface color) */
body,
html,
.main-body,
.main-content,
#wrapper,
[class*="container"] {
  background-color: #F0F2F5 !important;
  background: #F0F2F5 !important;
}

/* 2. Remove white wrapper around product grid area (Today's Picks) */
.main-content-inner,
[class*="product-list"],
[class*="grid-container"] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Product cards — kill white background, border, shadow, padding */
.card,
[class*="product-card"],
.grid-item,
.card-body,
[class*="card-content"] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. Card typography — Facebook-style dark text & muted grey meta */
[class*="price"],
.card-price,
b,
strong,
h5 {
  color: #050505 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
}

.card-title,
[class*="title"],
.card-body a {
  color: #050505 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

[class*="location"],
[class*="time"],
.card-text,
p {
  color: #65676B !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* 5. Rounded card images (Facebook uses 8px radius) */
.card img,
[class*="product-card"] img {
  border-radius: 8px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* 6. Grid gaps — Facebook-style spacing between cards */
.grid,
[class*="grid-container"] {
  gap: 16px !important;
  row-gap: 24px !important;
}