/* ===============================
   FORCE OVERRIDE — HELLO ELEMENTOR RESET
   =============================== */

/* ✅ Step 2 Date Input — width + centering */
.hero-wizard--register .wizard-step[data-step="2"] input.wizard-date {
  width: fit-content !important;
  min-width: 200px !important;
  display: inline-block !important;
}

.hero-wizard--register .wizard-step[data-step="2"] .wizard-date-input-wrapper {
  text-align: center !important;
}

/* ✅ ALL Wizard Buttons — Brand Styling */
.hero-wizard--register button,
.hero-wizard--register [type="button"],
.hero-wizard--register [type="submit"] {
  background-color: #fff !important;
  color: #ab1c2d !important;
  border: 1px solid #ab1c2d !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.hero-wizard--register button:hover,
.hero-wizard--register [type="button"]:hover,
.hero-wizard--register [type="submit"]:hover {
  background-color: #ab1c2d !important;
  color: #fff !important;
}

/* ✅ desktop List / Map buttons — top right alignment */
.hero-wizard--register .desktop-list-map-toggle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 9999 !important;
}

/* ✅ Filter sidebar — fully expanded on load */
.hero-wizard--register .filter-sidebar {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* ===============================
   CATALOGUE / SEARCH UI FIXES ONLY
   Scope: .adopet-search, .adopet-catalogue, #adopet-hero-sections
   IMPORTANT: does NOT target .hero-wizard--register (14-step registration wizard)
   =============================== */

:root {
  --adopet-catalogue-accent: #c36;
}

/* 1) Restore Continue button styling (hero lost/found search wizard steps 1-3)
   Avoid global selectors like [type=button] so we don't fight the theme reset site-wide. */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--adopet-catalogue-accent) !important;
  border: 1px solid var(--adopet-catalogue-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary:hover {
  background-color: #b82e5a !important;
  border-color: #b82e5a !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(204, 51, 102, 0.28) !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* 2) Restore Reset/Apply/Map buttons (support both the new classnames you listed
   and the existing hero-wizard filter controls used by the plugin). */
.adopet-search .adopet-reset-filters,
.adopet-catalogue .adopet-reset-filters,
#adopet-hero-sections .adopet-reset-filters,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .reset-button {
  background: transparent !important;
  border: 1px solid var(--adopet-catalogue-accent) !important;
  color: var(--adopet-catalogue-accent) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.adopet-search .adopet-filter-apply,
.adopet-catalogue .adopet-filter-apply,
#adopet-hero-sections .adopet-filter-apply,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button {
  background: var(--adopet-catalogue-accent) !important;
  border: 1px solid var(--adopet-catalogue-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.adopet-search .adopet-filter-apply:disabled,
.adopet-catalogue .adopet-filter-apply:disabled,
#adopet-hero-sections .adopet-filter-apply:disabled,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

.adopet-search .adopet-map-button,
.adopet-catalogue .adopet-map-button,
#adopet-hero-sections .adopet-map-button,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #111827 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.adopet-search .adopet-map-button:hover,
.adopet-catalogue .adopet-map-button:hover,
#adopet-hero-sections .adopet-map-button:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button:hover {
  border-color: var(--adopet-catalogue-accent) !important;
  color: var(--adopet-catalogue-accent) !important;
}

/* 3) Map display: ensure containers can't collapse due to reset.css */
.adopet-search .adopet-map-container,
.adopet-catalogue .adopet-map-container,
#adopet-hero-sections .adopet-map-container {
  display: block !important;
  min-height: 300px !important;
  height: 360px !important;
  width: 100% !important;
}

.adopet-search .adopet-map-container .leaflet-container,
.adopet-catalogue .adopet-map-container .leaflet-container,
#adopet-hero-sections .adopet-map-container .leaflet-container {
  height: 100% !important;
  width: 100% !important;
}

/* Also harden the LOST/FOUND hero wizard Google Maps canvas */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas {
  display: block !important;
  min-height: 320px !important;
}

/* 4) Microchip search container (catalogue/search only — in case the theme injects it)
   Note: does not match the 14-step wizard microchip field (Step 12), and does not
   target .hero-wizard microchip UI. */
.adopet-search .microchip-search-container,
.adopet-catalogue .microchip-search-container,
#adopet-hero-sections .adopet-search-form .microchip-search-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.adopet-search .microchip-search-container input[type="text"],
.adopet-catalogue .microchip-search-container input[type="text"],
#adopet-hero-sections .adopet-search-form .microchip-search-container input[type="text"] {
  border-radius: 999px !important;
  padding: 10px 14px !important;
  border: 1px solid #d1d5db !important;
  width: min(420px, 100%);
}

.adopet-search .microchip-search-container button,
.adopet-catalogue .microchip-search-container button,
#adopet-hero-sections .adopet-search-form .microchip-search-container button {
  background: var(--adopet-catalogue-accent) !important;
  border: 1px solid var(--adopet-catalogue-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ========== Scope: catalogue/search only (NOT the 14-step register wizard) ========== */

/* Continue button (primary) - forced brand */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions button.wizard-next.btn-primary {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

/* Ensure hover/focus keeps brand color */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary:focus {
  filter: brightness(0.92);
  color: #fff !important;
}

/* Back button style parity */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-prev.btn-secondary,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-controls .wizard-prev.btn-secondary {
  background-color: #fff !important;
  color: #ab1c2d !important;
  border: 1px solid #ab1c2d !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-prev.btn-secondary:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-controls .wizard-prev.btn-secondary:focus {
  background-color: #ab1c2d !important;
  color: #fff !important;
}

/* Buttons: Reset / Apply / Desktop toggle - brand-outline default, filled on hover */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .reset-button,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-filter-apply,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .btn-show-all,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .reset-button.btn-brand-outline,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button.btn-brand-outline,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button.btn-brand-outline,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .btn-brand-outline {
  background-color: #fff !important;
  color: #ab1c2d !important;
  border: 1px solid #ab1c2d !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .btn-brand-outline:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .btn-brand-outline:focus,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .reset-button.btn-brand-outline:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button.btn-brand-outline:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button.btn-brand-outline:hover {
  background-color: #ab1c2d !important;
  color: #fff !important;
}

/* Apply button special: ensure exact color #ab1c2d when enabled */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button.btn-brand-outline[disabled],
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-filter-apply[disabled] {
  opacity: .5;
  cursor: default;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .apply-button.btn-brand-outline:not([disabled]),
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-filter-apply:not([disabled]) {
  background-color: var(--brand-primary) !important;
  border: 1px solid var(--brand-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 800 !important;
}

/* ===== Catalogue / Search UI — Scoped fixes only ===== */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) {
  --brand-lost: #ab1c2d;
  --brand-found: #2e8b57;
  --brand-primary: var(--brand-lost);
}

/* Switch brand primary to FOUND green when in found mode */
#adopet-hero-sections .hero-wizard.found-mode:not(.hero-wizard--register),
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register)[data-mode="found"],
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register)[data-type="found"] {
  --brand-primary: var(--brand-found);
}

/* Force map layout to be row on desktop so sidebar sits left of map */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px;
  align-items: stretch;
  min-height: 380px; /* safeguard so map has space */
  position: relative;

  /* Some themes assign max-width to generic container classes like .page-container,
     which can collapse the map column to 0px. Force full width for this layout. */
  width: 100% !important;
  max-width: none !important;
}

/* Sidebar (filters) should be left column */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .filter-sidebar {
  flex: 0 0 320px;
  max-width: 340px;
  order: 0; /* left column */
}

/* Results / map column should fill remaining width */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Ensure the results step itself is not constrained by narrow theme containers */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-5 {
  width: 100% !important;
  max-width: none !important;
}

/* Ensure map wrapper doesn't collapse (some resets force height:0) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-wrapper,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-map-container,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .leaflet-container {
  min-height: 320px !important;
  height: clamp(320px, 55vh, 520px) !important;
}

/* Google Maps internal containers sometimes need explicit heights too */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas {
  /* Ensure the Google Maps root fills the canvas box */
  min-height: 320px !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas > div,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas .gm-style,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .map-canvas .gm-style > div {
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
}

/* Desktop list/map toggle: float top-right, outside the map canvas DOM
   (the markup places .desktop-list-map-toggle as a sibling of .wizard-results-map
   inside .map-container) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container {
  /* Critical: map-container was collapsing to 0 width (flex item with no flex-grow).
     This makes the map canvas invisible and causes the toggle to overlap the sidebar. */
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;

  position: relative;
}

/* Ensure the map canvas column actually fills available width */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container .wizard-results-map,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container .map-wrapper,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container .map-canvas {
  width: 100% !important;
}

/* Critical: enforce visible height on the map and its parent containers
   when map step is shown. Without this, the map column stays at 0 height. */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-5.active .wizard-map-layout .map-container {
  min-height: 420px !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-5.active .wizard-map-layout .map-container .wizard-results-map {
  display: block !important;
  visibility: visible !important;
  min-height: 420px !important;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-5.active .wizard-map-layout .map-container .wizard-results-map .map-canvas {
  min-height: 420px !important;
  display: block !important;
}

/* Desktop List/Map toggle: top-right relative to the map container */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container > .desktop-list-map-toggle {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 9999 !important;
  display: flex !important;
  padding: 0;
  /* Ensure it's above legends */
  pointer-events: all;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container > .desktop-list-map-toggle .flex,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-map-layout .map-container > .desktop-list-map-toggle .flex.items-center {
  display: flex !important;
  gap: 8px;
  align-items: center;
  flex-direction: row !important;
}

/* Keep map wrapper relative for legend positioning */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map .map-wrapper {
  position: relative;
}

/* Toggle buttons inline row */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .flex,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .flex.items-center {
  display: flex !important;
  gap: 8px;
  align-items: center;
  flex-direction: row !important;
  white-space: nowrap;
}

/* Toggle button default + active states */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

/* Active map/list style using brand colors (lost/found) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button.active {
  background: var(--brand-lost) !important; /* default to lost */
  color: #fff !important;
  border-color: var(--brand-lost) !important;
}

/* If a 'found' mode class exists we will color accordingly */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register)[data-mode="found"] .desktop-list-map-toggle .toggle-button.active,
#adopet-hero-sections .hero-wizard.found-mode:not(.hero-wizard--register) .desktop-list-map-toggle .toggle-button.active {
  background: var(--brand-found) !important;
  border-color: var(--brand-found) !important;
}

/* Lost/Found legend badges: inside map container, top-right */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map .map-controls {
  position: absolute;
  /* Keep inside map area, but avoid overlapping the List/Map toggle */
  top: 64px;
  right: 16px;
  z-index: 5000;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 8px 10px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  pointer-events: all;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map .map-controls .legend {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map .map-controls .legend-item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results-map .map-controls .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 2px #fff;
}

/* legend colours */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .legend-lost { background: var(--brand-lost); }
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .legend-found { background: var(--brand-found); }

/* Back button is moved by JS into a dedicated top-right overlay next to the map toggle */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-results-top-right-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* In overlay, the toggle should be in normal flow (container does the positioning) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-results-top-right-controls .desktop-list-map-toggle {
  position: static !important;
  top: auto !important;
  right: auto !important;
}

/* Back button hover/focus uses brand primary (lost/found) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-results-top-right-controls .wizard-prev.btn-secondary:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-results-top-right-controls .wizard-prev.btn-secondary:focus {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

/* Show All Pets + Back actions row (between map container and pet grid) */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-grid-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 12px 0 12px;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-grid-actions .adopet-back-button {
  margin-left: auto;
  display: inline-flex;
}

/* Show All Pets: bottom-left inside the pet grid wrapper */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-pets-shortcode[data-role="adopet-pets-shortcode"] .adopet-show-all-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .adopet-pets-shortcode[data-role="adopet-pets-shortcode"] .adopet-show-all-wrap .btn-show-all {
  margin: 0;
}

/* (Legacy fallback) if Show All exists inside results, keep it reasonable */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-results .btn-show-all {
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 16px;
  margin-left: 0;
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 8px;
}

/* Filter sidebar collapse/expand (STEP 4 only; control injected by JS) */
#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .adopet-filter-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 9999;
  padding: 8px 12px;
  border-radius: 999px;
}

/* Smooth horizontal collapse on desktop (avoid display:none so it can animate) */
@media (min-width: 768px) {
  #adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sidebar {
    transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, border-width 220ms ease, opacity 220ms ease;
    will-change: width, flex-basis;
  }

  #adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register).adopet-filters-collapsed .filter-sidebar {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  #adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register).adopet-filters-collapsed .filter-sidebar * {
    pointer-events: none !important;
  }

  #adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register).adopet-filters-collapsed .wizard-map-layout {
    gap: 0;
  }
}

/* STEP 4 spacing + compact filter sidebar styling */
#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .wizard-controls {
  margin: 16px 0 18px !important;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .wizard-map-layout {
  margin-top: 10px;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sections {
  margin-bottom: 14px;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .apply-button-container {
  margin-top: 14px;
  padding-top: 10px;
}

/* Reduce sidebar vertical density so its height is closer to the map column */
#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sidebar .filter-summary {
  padding: 12px 16px !important;
  font-size: 13px;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sidebar label {
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 600;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sidebar .filter-header {
  padding: 12px 16px;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .filter-sidebar .filter-title {
  font-size: 14px;
}

/* STEP 4 Back button sizing (match steps 1–3 padding) */
#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .adopet-grid-actions .wizard-prev.btn-secondary {
  padding: 10px 18px !important;
}

/* STEP 4 Microchip mode: center the panel in the map area and style inputs/buttons */
#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register).adopet-microchip-active .wizard-results-map {
  display: none !important;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register).adopet-microchip-active .microchip-search-container {
  display: flex !important;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-search-grid {
  width: min(520px, 100%);
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-input-container {
  width: fit-content;
  max-width: 90vw;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-input {
  width: 320px;
  max-width: 90vw;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-submit {
  background: var(--adopet-brand);
  border: 1px solid var(--adopet-brand);
  color: #fff;
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 700;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-submit:not(:disabled):hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

#adopet-hero-sections .hero-wizard.step-4:not(.hero-wizard--register) .microchip-submit:not(:disabled):active {
  transform: translateY(0);
}

/* Step 2 — date input fit-content and centered */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-2 .wizard-date-input-wrapper,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step[data-step="2"] .wizard-date-input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step.step-2 .wizard-date,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-step[data-step="2"] .wizard-date {
  width: fit-content !important;
  min-width: 200px !important;
  padding: .5rem 1rem !important;
}

/* Ensure hover rules from global reset don't override our brand hover for buttons */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-next.btn-primary:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .wizard-actions .wizard-prev.btn-secondary:hover,
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .btn-brand-outline:hover {
  text-decoration: none !important;
}

/* Remove the close-button inside filter-header in catalogue/search UI */
#adopet-hero-sections .hero-wizard:not(.hero-wizard--register) .filter-header .close-button {
  display: none !important;
}