/* Mobile Filter Overlay – Professional Marketplace */
/* ===================================================================
   Purpose: Full-screen mobile filter interface with smooth animations,
            accessibility support, dark mode, reduced motion, and
            consistent theming.
   Dependencies: Relies on existing filter markup cloned from sidebar.
   Author: Auto-generated
   =================================================================== */

/* Colors now managed by central theme.css */
:root {
  --mfz-radius: 22px;
}
/* Dark mode colors now managed by central theme.css */

/* Overlay Root */
#marketplace-mobile-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: linear-gradient(115deg,var(--z-overlay),var(--z-glass) 40%,var(--z-overlay));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s;
  display: flex;
  align-items: flex-end;
  padding: clamp(0.75rem,2vw,1.5rem);
}
body.mobile-filters-open { overflow:hidden; }
body.mobile-filters-open #marketplace-mobile-filter-overlay { touch-action:none; }

#marketplace-mobile-filter-overlay.active { opacity:1; visibility:visible; }

/* Panel */
#marketplace-mobile-filter-content {
  background: var(--mfz-bg-panel);
  border: 1px solid var(--mfz-border);
  border-radius: var(--mfz-radius);
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--mfz-shadow);
  display: flex;
  flex-direction: column;
  max-height: min(88vh,900px);
  transform: translateY(32px) scale(.96);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,.84,.34,1),opacity .55s;
  position: relative;
  overflow: hidden;
}
#marketplace-mobile-filter-overlay.active #marketplace-mobile-filter-content { transform: translateY(0) scale(1); opacity:1; }

/* Header */
#marketplace-mobile-filter-header { position:relative; padding:1.1rem 1.25rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
#marketplace-mobile-filter-header::after { content:''; position:absolute; left:1rem; right:1rem; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--mfz-border),transparent); }
#marketplace-mobile-filter-title { font:600 1rem 'Inter',system-ui,sans-serif; letter-spacing:.5px; color:var(--mfz-text); display:flex; align-items:center; gap:.6rem; }
#marketplace-mobile-filter-title::before { content:'\f0b0'; font-family:'Font Awesome 5 Free'; font-weight:900; color:var(--mfz-accent); font-size:.95rem; }
#marketplace-mobile-close-btn { all:unset; cursor:pointer; width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--mfz-text-dim); background:linear-gradient(145deg,rgba(0,0,0,0.04),rgba(0,0,0,0.02)); position:relative; transition:.3s; }
#marketplace-mobile-close-btn::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(145deg,var(--mfz-accent),transparent); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; }
#marketplace-mobile-close-btn:hover { color:var(--mfz-text); background:linear-gradient(145deg,rgba(0,0,0,0.06),rgba(0,0,0,0.02)); }
#marketplace-mobile-close-btn:active { transform:translateY(1px); }

/* Body */
#marketplace-mobile-filter-body { flex:1; overflow-y:auto; padding:1rem 1.25rem 1.5rem; position:relative; scroll-behavior:smooth; }
#marketplace-mobile-filter-body::-webkit-scrollbar { width:10px; }
#marketplace-mobile-filter-body::-webkit-scrollbar-track { background:transparent; }
#marketplace-mobile-filter-body::-webkit-scrollbar-thumb { background:linear-gradient(145deg,rgba(99,102,241,0.3),rgba(99,102,241,0.15)); border-radius:20px; }
#marketplace-mobile-filter-body::-webkit-scrollbar-thumb:hover { background:linear-gradient(145deg,rgba(99,102,241,0.5),rgba(99,102,241,0.25)); }

/* Individual filter sections inside overlay adopt desktop card look */
#marketplace-mobile-filter-body .filter-section { margin:0 0 1rem; background:linear-gradient(145deg,rgba(255,255,255,0.55),rgba(255,255,255,0.25)); border:1px solid var(--mfz-border); border-radius:18px; padding:.85rem 1rem 1rem; position:relative; backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%); box-shadow:0 4px 12px -3px rgba(0,0,0,0.15); }
body.marketplace-professional-theme.dark #marketplace-mobile-filter-body .filter-section { background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02)); }
#marketplace-mobile-filter-body .filter-section:last-child { margin-bottom:0; }

/* Footer */
#marketplace-mobile-filter-footer { padding:1rem 1.25rem 1.25rem; position:relative; display:flex; gap:.85rem; flex-wrap:wrap; justify-content:space-between; align-items:center; background:linear-gradient(145deg,rgba(255,255,255,0.65),rgba(255,255,255,0.3)); border-top:1px solid var(--mfz-border); }
body.marketplace-professional-theme.dark #marketplace-mobile-filter-footer { background:linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02)); }
#marketplace-mobile-filter-footer::before { content:''; position:absolute; left:1rem; right:1rem; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--mfz-border),transparent); }

#marketplace-mobile-reset-btn,#marketplace-mobile-apply-btn { position:relative; border:none; cursor:pointer; font:600 .8rem 'Inter',system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase; padding:.85rem 1.15rem; border-radius:14px; display:inline-flex; align-items:center; gap:.55rem; transition:.35s; }
#marketplace-mobile-reset-btn { background:linear-gradient(145deg,var(--z-text),var(--z-text)); color:var(--z-text-muted); box-shadow:0 2px 4px rgba(0,0,0,0.08); }
#marketplace-mobile-reset-btn::before { content:'\f0e2'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:.75rem; }
#marketplace-mobile-reset-btn:hover { background:linear-gradient(145deg,var(--z-text),var(--z-text-sec)); color:var(--z-surface-1); }
body.marketplace-professional-theme.dark #marketplace-mobile-reset-btn { background:linear-gradient(145deg,#343b48,#2a303b); color:var(--z-text-sec); }
body.marketplace-professional-theme.dark #marketplace-mobile-reset-btn:hover { background:linear-gradient(145deg,#3d4654,#343b48); color:var(--z-text); }

#marketplace-mobile-apply-btn { background:var(--mfz-accent-grad); color:#fff; box-shadow:0 4px 14px -3px rgba(99,102,241,0.55); flex:1; justify-content:center; }
#marketplace-mobile-apply-btn::before { content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:.75rem; }
#marketplace-mobile-apply-btn:hover { filter:brightness(1.07); box-shadow:0 6px 18px -4px rgba(99,102,241,0.55); transform:translateY(-2px); }
#marketplace-mobile-apply-btn:active { transform:translateY(0); }

/* Enter / Leave Animations (section fade up) */
@keyframes mfzSectionFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
#marketplace-mobile-filter-body .filter-section { animation:mfzSectionFadeUp .45s ease both; }
#marketplace-mobile-filter-body .filter-section:nth-child(1){animation-delay:.05s}
#marketplace-mobile-filter-body .filter-section:nth-child(2){animation-delay:.1s}
#marketplace-mobile-filter-body .filter-section:nth-child(3){animation-delay:.15s}
#marketplace-mobile-filter-body .filter-section:nth-child(4){animation-delay:.2s}

/* Focus & Accessibility */
#marketplace-mobile-filter-overlay :focus-visible { outline: none; box-shadow: var(--mfz-focus); }

/* High Contrast */
@media (prefers-contrast: high) {
  #marketplace-mobile-filter-content { box-shadow:0 0 0 3px #000; }
  #marketplace-mobile-filter-footer { background:#fff; }
  body.marketplace-professional-theme.dark #marketplace-mobile-filter-footer { background:#000; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #marketplace-mobile-filter-overlay, #marketplace-mobile-filter-content, #marketplace-mobile-filter-body .filter-section { transition:none !important; animation:none !important; }
}

/* Dark Mode Specific Tweaks */
@media (prefers-color-scheme: dark) {
  body.marketplace-professional-theme:not(.force-light) #marketplace-mobile-filter-body::-webkit-scrollbar-thumb { background:linear-gradient(145deg,rgba(99,102,241,0.4),rgba(99,102,241,0.2)); }
}

/* Utility: hidden label for assistive tech */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Toast integration shift when overlay open (avoid overlap) */
body.mobile-filters-open #marketplace-notification-toast { transform:translateY(-10px); }