/* Compact single-row bar (force override theme/plugin styles)
   NOTE: The theme may apply background/border-radius to generic divs; we override aggressively.
*/
body .mpfm-auto,
#page .mpfm-auto,
.site .mpfm-auto,
.header .mpfm-auto{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Remove blue strip above/below by neutralizing common theme wrapper spacing/background */
body .mpfm-auto{display:block !important}
body .mpfm-auto::before,
body .mpfm-auto::after{content:none !important;display:none !important}

/* If filter sits inside header/nav containers, force them transparent and remove extra spacing around the filter */
.header:has(.mpfm-auto),
#masthead:has(.mpfm-auto),
.site-header:has(.mpfm-auto),
.navbar:has(.mpfm-auto),
nav:has(.mpfm-auto){background:transparent !important}

.header :where(.mpfm-auto),
#masthead :where(.mpfm-auto),
.site-header :where(.mpfm-auto),
.navbar :where(.mpfm-auto),
nav :where(.mpfm-auto){margin-top:0 !important;margin-bottom:0 !important}

.header :where(.mpfm-bar),
#masthead :where(.mpfm-bar),
.site-header :where(.mpfm-bar),
.navbar :where(.mpfm-bar),
nav :where(.mpfm-bar){padding-top:0 !important;padding-bottom:0 !important}

/* Kill any blue wrapper background coming from theme by forcing transparency ONLY on the filter row
   (Do NOT affect results/cards/buttons) */
.header .mpfm-auto .mpfm-row,
.header .mpfm-auto .mpfm-row *,
.mpfm-bar .mpfm-row,
.mpfm-bar .mpfm-row *{background-color:transparent !important;background-image:none !important}

/* Make the bar itself flat (no rounded corners) */
body .mpfm-bar,
#page .mpfm-bar,
.site .mpfm-bar,
.header .mpfm-bar{background:transparent !important;border:0 !important;border-radius:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;outline:0 !important}

/* The visible “panel” (inputs row) — set to white, square corners */
/* Stronger selector to beat theme styles */
body .mpfm-row,
#page .mpfm-row,
.site .mpfm-row,
.header .mpfm-row{display:flex !important;flex-wrap:wrap;gap:8px;align-items:center;background:#ffffff !important;border:1px solid #e6eaf2 !important;border-radius:0 !important;box-shadow:none !important;padding:6px 8px !important}

/* Make each field compact and single-line */
.mpfm-field{display:flex;flex-direction:column;gap:3px;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.mpfm-field label{font-size:11px;color:#475569;font-weight:700;line-height:1}
body .mpfm-field select,
body .mpfm-field input{height:28px;min-width:160px;border:1px solid #cbd5e1;border-radius:0 !important;padding:0 8px;background:#fff;font-size:13px}

.mpfm-inline-hint{font-size:13px;color:#0f172a;opacity:.75;align-self:center;margin-left:6px;white-space:nowrap}

.mpfm-actions{display:flex;gap:8px;margin-left:auto;align-items:flex-end}
body .mpfm-apply,
body .mpfm-reset{height:28px;border-radius:0 !important;padding:0 12px;border:1px solid #1e3a8a;background:#0a2540;color:#fff;font-weight:800;cursor:pointer}
.mpfm-reset{background:#fff;color:#0a2540}

/* Absolute border-radius kill-switch (in case theme adds it via generic selectors) */
body .mpfm-auto,
body .mpfm-bar,
body .mpfm-row,
body .mpfm-field,
body .mpfm-field select,
body .mpfm-field input,
body .mpfm-actions,
body .mpfm-apply,
body .mpfm-reset{border-radius:0 !important}

/* Results area: no extra empty space */
.mpfm-results{margin-top:6px;min-height:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
.mpfm-loading,.mpfm-empty,.mpfm-hint{padding:8px;color:#64748b;font-size:13px}
.mpfm-results:empty{display:none !important}
.mpfm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:1200px){.mpfm-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1100px){.mpfm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:980px){.mpfm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.mpfm-inline-hint{white-space:normal;margin-left:0}}
@media(max-width:800px){.mpfm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  /* Mobile: 2-column grid like home page */
  .mpfm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  /* Make the filter bar shorter on mobile */
  body .mpfm-row,
  #page .mpfm-row,
  .site .mpfm-row,
  .header .mpfm-row{
    padding:3px 5px !important;
    gap:5px !important;
  }

  body .mpfm-field{gap:2px !important}
  body .mpfm-field label{font-size:10px !important; line-height:1 !important}
  body .mpfm-field select,
  body .mpfm-field input{height:22px !important;font-size:12px !important;padding:0 6px !important}

  /* Hint ko chota + compact */
  body .mpfm-inline-hint{font-size:11px !important; line-height:1.1 !important}

  body .mpfm-actions{gap:5px !important}
  body .mpfm-apply,
  body .mpfm-reset{height:22px !important;padding:0 8px !important; font-size:12px !important}

  /* Reduce vertical space under the buttons/hint */
  .mpfm-results{margin-top:2px !important}

  /* Mobile-only filter layout:
     Row 1: Country + Brand
     Row 2: Min Price + Max Price
     Row 3: Hint text + Filter/Reset buttons (same row)

     NOTE: We target .mpfm-bar .mpfm-row to beat theme styles.
  */
  body .mpfm-bar .mpfm-row,
  #page .mpfm-bar .mpfm-row,
  .site .mpfm-bar .mpfm-row,
  .header .mpfm-bar .mpfm-row{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-rows:auto;
    gap:5px !important;
    align-items:end;
    flex-wrap:initial !important; /* neutralize earlier flex-wrap */
  }

  /* Ensure children can shrink inside grid */
  body .mpfm-bar .mpfm-row > *{min-width:0}

  body .mpfm-bar .mpfm-field select,
  body .mpfm-bar .mpfm-field input{width:100% !important; min-width:0 !important}

  /* Place fields explicitly by order in markup */
  body .mpfm-bar .mpfm-row .mpfm-field:nth-of-type(1){grid-column:1;grid-row:1}
  body .mpfm-bar .mpfm-row .mpfm-field:nth-of-type(2){grid-column:2;grid-row:1}
  body .mpfm-bar .mpfm-row .mpfm-field:nth-of-type(3){grid-column:1;grid-row:2}
  body .mpfm-bar .mpfm-row .mpfm-field:nth-of-type(4){grid-column:2;grid-row:2}

  body .mpfm-bar .mpfm-row .mpfm-inline-hint{
    grid-column:1;
    grid-row:3;
    margin:0 !important;
    align-self:center;
    font-size:12px;
    line-height:1.2;
    white-space:normal !important;
  }

  body .mpfm-bar .mpfm-row .mpfm-actions{
    grid-column:2;
    grid-row:3;
    width:auto !important;
    justify-content:flex-end;
    margin-left:0 !important;
    align-items:center;
  }

  body .mpfm-bar .mpfm-row .mpfm-apply,
  body .mpfm-bar .mpfm-row .mpfm-reset{width:auto;min-width:72px}

  /* Fallback (if any old browser/theme breaks grid): force 2-column flex rows */
  @supports not (display: grid) {
    body .mpfm-bar .mpfm-row{display:flex !important;flex-wrap:wrap !important}
    body .mpfm-bar .mpfm-row .mpfm-field{width:calc(50% - 4px) !important}
    body .mpfm-bar .mpfm-row .mpfm-inline-hint{width:50% !important}
    body .mpfm-bar .mpfm-row .mpfm-actions{width:50% !important}
  }
}

/* Mobile tap reliability hardening: keep filter above any overlays (suggest, headers, ads) */
header.header .mpfm-auto,
header.header .mpfm-auto .mpfm-bar,
header.header .mpfm-auto .mpfm-row,
header.header .mpfm-auto .mpfm-actions,
header.header .mpfm-auto .mpfm-apply,
header.header .mpfm-auto .mpfm-reset{
  position: relative !important;
  z-index: 3000 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* If any theme overlay is visible, still let taps go to filter */
header.header .overlay,
header.header .overlay.show{
  pointer-events: none !important;
}

/* Ensure filter results container is full width and properly padded */
header.header .mpfm-auto .mpfm-results{
  width:100% !important;
  padding:6px 12px !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

/* Desktop: 6 columns for filter results grid */
header.header .mpfm-auto .mpfm-results .mpfm-grid{
  display:grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
}
header.header .mpfm-auto .mpfm-results .mpfm-grid > *{min-width:0 !important}
header.header .mpfm-auto .mpfm-results .card{width:auto !important}

/* Mobile: 2 columns for filter results grid */
@media(max-width:600px){
  header.header .mpfm-auto .mpfm-results .mpfm-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
}

/* Fix blank button: force visible white text + primary background for AJAX results */
.mpfm-results .card .cta .btn{
  background: var(--primary, #2563eb) !important;
  border-color: var(--primary, #2563eb) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}