/* ===== Panel header (title + close button) ===== */
#mobile-filter-toggle {
  display: none;
}

@media (max-width: 640px) {
  #mobile-filter-toggle {
    display: inline-flex;
  }
}

/* Dimmed backdrop behind the panel.
   z-index raised above Leaflet's default control z-index (1000) so the
   map's zoom controls / "Search this area" control don't paint on top
   of the filter panel when it's open. */
#mobile-filter-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

#mobile-filter-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 2001;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px;
  transform: translateY(-100%);
  transition: transform 0.25s ease-out;
}

#mobile-filter-panel.mobile-filter-panel--open {
  transform: translateY(0);
}

.mobile-filter-panel__header {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 0.25rem;
  padding-right: 0;
  padding-bottom: 1.5rem;
  padding-top: 1rem;
  border-bottom: 1px solid #b1b4b6; /* govuk-colour("mid-grey") */
}

#mobile-filter-panel-title {
  font-weight: 700;
  font-family: "GDS Transport", arial, sans-serif;
  color: #0b0c0c; /* govuk-colour("black") */
  white-space: nowrap;
  margin: 0;
}

.mobile-filter-panel__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  color: #0b0c0c;
  background-color: #ffffff;
  padding: 10px 20px;
  border: 1px solid #0b0c0c;
  border-radius: 6px;
  cursor: pointer;
}

.mobile-filter-panel__close:hover {
  background-color: #ffdd00;
}

.mobile-filter-panel__close:active {
  background-color: #ffbf47;
}

.mobile-filter-panel__close .govuk-details__summary-text {
  font-family: "GDS Transport", arial, sans-serif;
  font-size: 16px;
}

@media (max-width: 640px) {
  .hide-form{
    display: none;
  }
  .govuk-accordion__section-content {
    padding-top: 0 !important;
  }  
}

/* Hide the wrapping accordion section's own heading + Hide/Show toggle */
#mobile-filter-panel #accordion-map-pins-section > .govuk-accordion__section-header {
  display: none;
}

/* Hide GOV.UK's auto-generated "Show all sections" link at the top */
#mobile-filter-panel .govuk-accordion__show-all {
  display: none;
}

/* All nested filter groups: gray label, black triangle, no blue link styling */
#mobile-filter-panel .govuk-details__summary-text {
  color: #505a5f;
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
}

#mobile-filter-panel .govuk-details__summary {
  padding-left: 20px;
}

#mobile-filter-panel .govuk-details__summary::before {
  border-color: transparent transparent transparent #0b0c0c;
}

#mobile-filter-panel .govuk-details[open] > .govuk-details__summary::before {
  border-color: #0b0c0c transparent transparent transparent;
}

#mobile-filter-panel #accordion-data-overlay-section,
#mobile-filter-panel #accordion-map-overlay-section,
#mobile-filter-panel #accordion-school-eval-section,
#mobile-filter-panel #accordion-ey-eval-section {
  display: none !important;
}
#mobile-filter-panel .govuk-accordion__section-content {
  padding-bottom: 0 !important;
}
#mobile-filter-panel .govuk-details {
  margin-bottom: 0;
  border-bottom: 1px solid #b1b4b6;
}

#mobile-filter-panel .govuk-details__summary {
  padding: 1rem 0 1rem 1.5625rem; /* 25px left - reserves space for the native disclosure triangle */
  position: relative;
}

#mobile-filter-panel .govuk-details__summary-text {
  color: #505a5f; /* govuk-colour("dark-grey") */
  font-weight: 700;
  font-size: 1.25rem;
}

#mobile-filter-panel .govuk-details__text {
  border-left: none;
  padding: 0 0 1.5rem 0;
  margin-left: 0;
}
#mobile-filter-panel-body > .govuk-accordion > .govuk-accordion__section:not(:has(.govuk-checkboxes, .distance-pills, select[id$="_distance"])) {
  display: none;
}
#mobile-filter-panel .govuk-accordion__section {
  border-bottom: none !important;
}

/* =====================================================================
   Checkbox grid + box/label rebuild
   GOV.UK draws the visible box via .govuk-checkboxes__label::before,
   absolutely positioned against .govuk-checkboxes__item (position:relative),
   with the real <input> invisible on top of it. Something elsewhere in
   the site CSS is knocking that positioning off once the form is moved
   into this panel, so we rebuild it explicitly here with !important so
   it can't be overridden again.
   ===================================================================== */

/* Default: 2-column grid */
#mobile-filter-panel .govuk-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1.5rem;
}

/* Childcare, SEN & Faith: 1 column, since labels are long and wrap awkwardly in 2 cols */
#mobile-filter-panel .govuk-checkboxes:has(input[name="early_child_map_fill"]),
#mobile-filter-panel .govuk-checkboxes:has(input[name="resourced_sen"]),
#mobile-filter-panel .govuk-checkboxes:has(input[name="faith_school"]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Schools: keep 2 columns, roomier rows for wrapping labels */
#mobile-filter-panel .govuk-checkboxes:has(input[name="education_phase"]) {
  row-gap: 1.5rem;
  column-gap: 1.5rem;
}

/* Focus state, so keyboard/tab users still see an outline */
#mobile-filter-panel .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
  box-shadow: 0 0 0 3px #fd0 !important;
}

/* ===== Distance pills row (built by enhanceDistanceSelect) ===== */
#mobile-filter-panel .distance-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#mobile-filter-panel .distance-pill {
  border: 2px solid #0b0c0c;
  border-radius: 999px;
  background: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}

#mobile-filter-panel .distance-pill[aria-pressed="true"] {
  background: #0b0c0c;
  color: #ffffff;
}

/* ===== Buttons row pinned sensibly at the end of the scrollable panel body ===== */
#mobile-filter-panel .govuk-button-group {
  margin-top: 1.5rem;
}

/* ===== Favourites buttons ===== */
a.favourites-btn.govuk-button,
a.favourites-btn.govuk-button--secondary {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 180px !important;
  min-height: 2.75rem !important;
  padding: 8px 14px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .favourites-btn,
  .favourites-btn.govuk-button,
  .favourites-btn.govuk-button--secondary {
    width: 160px !important;
    min-height: 2.5rem;
  }
}