/**
 * @file
 * SEND activities listing (View page) — GOV.UK-style layout.
 */

.send-activities-page-main {
  padding-top: 0 !important;
}

/* Wrapper: allow hero breakout; keep bottom spacing. */
.send-activities-view {
  margin-bottom: 2rem;
  width: 100%;
  max-width: 100%;
}

/*
 * Full-bleed hero (100% of the viewport width) even inside a padded/narrow
 * content region. Inner .govuk-width-container still limits text width.
 */
.send-activities-hero {
  background: #19253f;
  border-bottom: 10px solid #d53880;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 2.5rem 0 3rem;
  margin-bottom: 2rem;
  box-sizing: border-box;
}

/* Best Start variant: black hero band (matches detail + calendar). */
.best-start-listings-hero {
  background: #1b1b3d;
  border-bottom-color: #a855f7;
}
.best-start-listings-hero .send-activities-hero-cta--map {
  background: #ff00b8;
}

/* Breadcrumb inside the BSIL navy hero — white text on dark background. */
.best-start-listings-hero__breadcrumbs {
  margin-bottom: 18px;
}

.best-start-listings-hero__breadcrumbs .govuk-breadcrumbs__list-item,
.best-start-listings-hero__breadcrumbs .govuk-breadcrumbs__link,
.best-start-listings-hero__breadcrumbs .govuk-breadcrumbs__list-item::before {
  color: rgba(255, 255, 255, 0.85) !important;
}

.best-start-listings-hero__breadcrumbs .govuk-breadcrumbs__list-item[aria-current="page"] {
  color: #ffffff !important;
}

.best-start-listings-hero__breadcrumbs .govuk-breadcrumbs__link:hover {
  color: #ffffff !important;
}
}

/* Main band: GOV.UK container holds the 2/3 + 1/3 row only (not the hero). */
.send-activities-main {
  clear: both;
}

/*
 * Columns use theme GOV.UK grid (float + 66.66% / 33.33% from tablet up).
 * min-width:0 avoids overflow clipping nested grids.
 */
.send-activities-listing-column,
.send-activities-sidebar-column {
  min-width: 0;
}

.send-activities-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 48.0625em) {
  .send-activities-hero__grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 2.5rem 3rem;
  }
}

.send-activities-hero__copy {
  color: #ffffff;
  min-width: 0;
}

.best-start-listings-hero__logo {
  display: block;
  width: min(100%, 180px);
  max-width: 180px;
  height: auto;
  margin: 0 0 1rem;
}

/* Team photo replacing the logo in the BSIL hero media slot. */
.best-start-listings-hero__photo {
  display: block;
  width: min(100%, 520px);
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  margin: 0;
}

/* Both team photos side by side in the hero media slot. */
.best-start-listings-hero__media--pair {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.best-start-listings-hero__media--pair .best-start-listings-hero__photo {
  width: calc((100% - 1rem) / 2);
  max-width: 240px;
  margin: 0;
}

.best-start-listings-hero__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-height: 0;
  max-width: 100%;
  align-self: end;
  justify-self: end;
}

.best-start-listings-hero__illustration {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto;
}

.best-start-listings-hero .send-activities-hero__grid {
  align-items: center;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
}

/* Show inline logo (right side) on wide viewports. */
@media (min-width: 48.0625em) {
  .best-start-listings-hero__media {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (max-width: 48rem) {
  .best-start-listings-hero__media {
    display: none;
  }
}

/* No background image -- solid midnight-navy fills the hero. */
@media (min-width: 64em) {
  .best-start-listings-hero {
    background-image: none;
  }
}

.best-start-listings-hero__logo--hero {
  width: min(100%, 520px);
  max-width: 520px;
  margin: 0;
}

.best-start-listings-hero__logo {
  /* When used inside the right-side media cell, drop the bottom margin. */
  margin: 0;
}

/* Best Start hero text -- larger, bolder. */
.best-start-listings-hero__title {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  max-width: 20ch;
  margin: 0 0 1rem;
}

.best-start-listings-hero .send-activities-hero__lede {
  margin: 0 0 2rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  max-width: 50ch;
}

.send-activities-hero__title {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
}

.send-activities-hero__lede {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.35;
}

/* Tight “stamp” blocks: white text on GOV.UK blue. */
.send-activities-hero__line {
  display: inline-block;
  max-width: 100%;
}

.send-activities-hero__stub {
  display: inline;
  background: transparent;
  color: #ffffff;
  padding: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.send-activities-hero__stub--cta {
  padding: 0;
}

.send-activities-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 0;
}

.send-activities-hero-cta {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  border: 0;
  border-radius: 0;
  min-height: 3rem;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
}

.send-activities-hero-cta:hover,
.send-activities-hero-cta:focus {
  /* Beat sitewide a:hover / injected link colours (e.g. #009BC2). */
  text-decoration: none !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.send-activities-hero-cta:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.send-activities-hero-cta:visited {
  color: #ffffff !important;
}

.send-activities-hero-cta:focus:not(:focus-visible) {
  outline: none;
}

.send-activities-hero-cta:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.send-activities-hero-cta--map {
  background: #d53880;
  color: #ffffff !important;
}

.send-activities-hero-cta--calendar {
  background: #3b3f42;
  color: #ffffff !important;
}

.send-activities-hero-cta__label {
  display: flex;
  align-items: center;
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
}

.send-activities-hero-cta__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  border-left: 2px solid rgba(255, 255, 255, 0.35);
}

.send-activities-hero-cta--map .send-activities-hero-cta__chevron {
  border-left-color: rgba(255, 255, 255, 0.45);
}

.send-activities-hero-cta--calendar .send-activities-hero-cta__chevron {
  border-left-color: rgba(255, 255, 255, 0.25);
}

/* Polaroid collage (decorative). */
.send-activities-hero__media {
  position: relative;
  min-height: 260px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  justify-self: center;
}

@media (min-width: 48.0625em) {
  .send-activities-hero__media {
    margin: 0;
    justify-self: end;
    min-height: 320px;
    max-width: 100%;
  }
}

.send-activities-hero__polaroid {
  position: absolute;
  width: 72%;
  max-width: 320px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
}

.send-activities-hero__polaroid--back {
  right: 8%;
  top: 0;
  transform: rotate(-7deg);
  z-index: 1;
}

.send-activities-hero__polaroid--front {
  left: 0;
  bottom: 0;
  transform: rotate(6deg);
  z-index: 2;
}

.send-activities-hero__polaroid-frame {
  background: #ffffff;
  padding: 0.65rem 0.65rem 2rem;
  box-sizing: border-box;
}

.send-activities-hero__polaroid-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.send-activities-hero-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 1.5rem;
}

.send-activities-hero-filter {
  font-size: 1rem;
  padding: 1rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 5rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  color: #ffffff;
  transition: box-shadow 0.2s ease;
}

.send-activities-hero-filter:hover,
.send-activities-hero-filter:focus {
  text-decoration: none;
  color: #ffffff;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.send-activities-hero-filter:focus:not(:focus-visible) {
  outline: none;
}

.send-activities-hero-filter:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.send-activities-hero-filter[aria-pressed="true"] {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.send-activities-hero-filter[aria-pressed="true"]:hover,
.send-activities-hero-filter[aria-pressed="true"]:focus {
  box-shadow:
    inset 0 0 0 9999px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .send-activities-hero-tags {
    display: none;
  }
}

.send-activities-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.view-toggle-wrapper {
  display: flex;
  gap: 0;
  border: 2px solid #b1b4b6;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
}

.view-toggle-btn {
  background: #ffffff;
  border: none;
  color: #0b0c0c;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  transition: background-color 0.2s;
  font-family: inherit;
}

.view-toggle-btn:hover {
  background: #f3f2f1;
}

.view-toggle-btn:focus {
  outline: 3px solid #ffdd00;
  outline-offset: -2px;
}

.view-toggle-btn.active {
  background: #1d70b8;
  color: #ffffff;
  font-weight: 700;
}

.view-toggle-btn:not(:last-child) {
  border-right: 1px solid #b1b4b6;
}

.activities-listing {
  margin-top: 0;
}

.best-start-listings-view .send-activities-toolbar {
  justify-content: space-between;
  align-items: center;
}

.bsil-listing-count {
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 0;
}

@media (max-width: 768px) {
  .activities-grid {
    grid-template-columns: 1fr;
  }
}

.activities-grid.view-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activities-grid.view-rows .activity-card {
  height: auto;
}

.activities-grid.view-rows .activity-card__link {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: stretch;
}

.activities-grid.view-rows .activity-card__image-wrapper {
  width: 300px;
  min-width: 300px;
  margin: 0;
  flex-shrink: 0;
}

.activities-grid.view-rows .activity-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activities-grid.view-rows .activity-card__text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

@media (max-width: 768px) {
  .activities-grid.view-rows .activity-card__link {
    flex-direction: column;
  }

  .activities-grid.view-rows .activity-card__image-wrapper {
    width: 100%;
    min-width: 100%;
    height: 200px;
  }

  .activities-grid.view-rows .activity-card__image {
    height: 200px;
  }
}

.send-activities-dashboard-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #b1b4b6;
}

.send-activities-dashboard-links__item {
  font-weight: 700;
  font-size: 1.0625rem;
}

.send-activities-filter-heading {
  margin-top: 0;
}

.filter-aside {
  background: #f3f2f1;
  padding: 30px;
  border-radius: 4px;
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: none;
  overflow: visible;
}

@media (max-width: 768px) {
  .filter-aside {
    position: relative;
    top: 0;
    max-height: none;
    overflow: visible;
  }
}

.send-activities-pager {
  margin-top: 2rem;
}

.send-activities-pager .pager__items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.send-activities-pager .pager__item a,
.send-activities-pager .pager__item.is-active {
  display: inline-block;
  padding: 8px 12px;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #b1b4b6;
  font-size: 16px;
}

.send-activities-pager .pager__item.is-active {
  background: #1d70b8;
  color: #ffffff;
  border-color: #1d70b8;
  font-weight: 700;
}

.send-activities-pager .pager__item a {
  color: #1d70b8;
  background: #ffffff;
}

.send-activities-filters__checkboxes .form-item {
  margin-bottom: 0.75rem;
}

.filter-aside .send-activities-filters__checkboxes .form-item,
.filter-aside .form-checkboxes .form-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.filter-aside .send-activities-filters__checkboxes .form-item input[type="checkbox"],
.filter-aside .form-checkboxes .form-item input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.filter-aside .send-activities-filters__checkboxes .form-item label,
.filter-aside .form-checkboxes .form-item label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  line-height: 1.35;
}

/* SEND listing only: force checkbox rows/labels to full available width. */
.send-activities-view .filter-aside .form-checkboxes,
.send-activities-view .filter-aside .send-activities-filters__checkboxes {
  width: 100%;
}

.send-activities-view .filter-aside .form-checkboxes .form-item,
.send-activities-view .filter-aside .send-activities-filters__checkboxes .form-item,
.send-activities-view .filter-aside .govuk-checkboxes .govuk-checkboxes__item {
  width: 100%;
  max-width: none;
}

.send-activities-view .filter-aside .form-checkboxes label,
.send-activities-view .filter-aside .send-activities-filters__checkboxes label,
.send-activities-view .filter-aside .govuk-checkboxes .govuk-checkboxes__label {
  display: block;
  width: 100%;
  max-width: none;
  white-space: normal;
}

.send-activities-type-filter-group .send-activities-type-filter-item {
  margin-bottom: 0.5rem;
  position: relative;
  width: 100%;
}

.send-activities-type-filter-group {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.send-activities-type-filter-group .govuk-checkboxes__item,
.send-activities-type-filter-group .form-item {
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.send-activities-type-filter-group .send-activities-type-filter-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.send-activities-type-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  color: #fff;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.75rem;
  line-height: 1.2;
}

.send-activities-type-filter-label::before,
.send-activities-type-filter-label::after {
  display: none !important;
  content: none !important;
}

.send-activities-view .send-activities-type-filter-group .send-activities-type-filter-item:last-child {
  margin-bottom: 0;
}

.send-activities-type-filter-label.is-active {
  outline: none;
  box-shadow: inset 0 0 0 3px #ffdd00;
}

.send-activities-type-filter-item--sports .send-activities-type-filter-label {
  background: #1d70b8;
}
.send-activities-type-filter-item--arts .send-activities-type-filter-label {
  background: #912b88;
}
.send-activities-type-filter-item--social .send-activities-type-filter-label {
  background: #00703c;
}
.send-activities-type-filter-item--education .send-activities-type-filter-label {
  background: #f47738;
}

.send-activities-type-filter-icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Activity cards (teaser). */
.activity-card {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.activity-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.activity-card__link:focus-visible {
  outline: 3px solid #fd0;
  outline-offset: 2px;
}

.activity-card__link:hover .activity-card__text-container,
.activity-card__link:focus .activity-card__text-container {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);
}

/* Keep white text; block default .govuk-link hover (blue + underline). */
.activity-card__link:hover .govuk-link,
.activity-card__link:focus .govuk-link {
  color: #ffffff !important;
  text-decoration: none !important;
}

.activity-card__image-wrapper {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.activity-card__image-inner img,
.activity-card__image-wrapper img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.activity-card__image--placeholder {
  width: 100%;
  height: 150px;
  background: #b1b4b6;
}

@media (max-width: 768px) {
  .activity-card__image-inner img,
  .activity-card__image-wrapper img,
  .activity-card__image--placeholder {
    height: 120px;
  }
}

.activity-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.activity-card__tags--overlay {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 1;
  margin: 0;
}

.activity-card__tags--overlay .govuk-tag {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.activity-card__text-container {
  border: none;
  border-top: none;
  padding: 15px;
  position: relative;
  transition: box-shadow 0.2s ease;
  /* Stretch the colored text panel to fill the card height so cards with
     fewer items (e.g. no age badge) keep the same bottom edge as their
     row siblings. Parent .activity-card__link is display:flex column. */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.activity-card__footer {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
  /* Push "Find out more" to the bottom of the colored panel so cards with
     less content (no age badge) still anchor the link at the same position
     as their taller siblings. */
  margin-top: auto;
}

.activity-card .govuk-card__heading {
  margin-bottom: 15px;
}

.activity-card .govuk-card__heading .govuk-link {
  font-size: 19px;
  font-weight: 700;
}

.activity-card__dates {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.activity-card__dates li {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.95);
}

/* Pattern layout: "Weekly on Tuesdays, 10:00 – 11:00. Next: Wed 2 Sep" */
.activity-card__dates--pattern {
  margin-top: 8px;
}
.activity-card__dates--pattern li:first-child {
  font-size: 14px;
}
.activity-card__dates--pattern li:nth-child(2) {
  font-size: 13px;
  opacity: 0.92;
}
.activity-card__dates--pattern .activity-card__dates-next {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
  font-style: italic;
}

/* List layout (irregular schedules): inline list capped at 3 dates. */
.activity-card__dates--list .activity-card__dates-more {
  font-size: 12px;
  opacity: 0.85;
  font-style: italic;
}

.views-row {
  min-width: 0;
}

/**
 * Promo band + card -- gov.uk-style callout below hero.
 */
.best-start-promo-band {
  background: #f3f2f1;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.best-start-promo-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #b1b4b6;
  border-radius: 0;
  padding: 1.5rem 2rem;
  transition: box-shadow 0.2s ease;
}

.best-start-promo-card:hover,
.best-start-promo-card:focus {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.best-start-promo-card:focus:not(:focus-visible) {
  outline: none;
}

.best-start-promo-card:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.best-start-promo-card__text {
  flex: 1;
  min-width: 0;
}

.best-start-promo-card__heading {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #0b0c0c;
}

.best-start-promo-card__body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #505a5f;
  max-width: 60ch;
}

.best-start-promo-card__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  font-size: 2rem;
  font-weight: 400;
  color: #1d70b8;
  line-height: 1;
  flex-shrink: 0;
}

/* =========================================================
   Best Start in Life listing — pill filters
   ========================================================= */

/* Override the full-width SEND checkbox rules; pills wrap instead. */
.best-start-listings-view .filter-aside .form-checkboxes,
.best-start-listings-view .filter-aside .send-activities-filters__checkboxes,
.best-start-listings-view .filter-aside .govuk-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: auto;
}

.best-start-listings-view .filter-aside .form-checkboxes .form-item,
.best-start-listings-view .filter-aside .send-activities-filters__checkboxes .form-item,
.best-start-listings-view .filter-aside .govuk-checkboxes .govuk-checkboxes__item {
  position: relative;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: none;
}

/* Hide real checkbox, cover full pill area. */
.best-start-listings-view .filter-aside .govuk-checkboxes__input,
.best-start-listings-view .filter-aside .form-checkboxes input[type="checkbox"],
.best-start-listings-view .filter-aside .send-activities-filters__checkboxes input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

/* Pill label. */
.best-start-listings-view .filter-aside .govuk-checkboxes__label,
.best-start-listings-view .filter-aside .form-checkboxes label,
.best-start-listings-view .filter-aside .send-activities-filters__checkboxes label {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  padding: 0.35rem 0.85rem !important;
  background: #fff;
  border: 2px solid #1b1b3d;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

/* Hide GOV.UK checkbox square and tick pseudo-elements. */
.best-start-listings-view .filter-aside .govuk-checkboxes__label::before,
.best-start-listings-view .filter-aside .govuk-checkboxes__label::after {
  display: none !important;
}

/* Checked — age group pills: filled with category colour (falls back to navy). */
.best-start-listings-view .filter-aside .govuk-checkboxes__input:checked + .govuk-checkboxes__label,
.best-start-listings-view .filter-aside input[type="checkbox"]:checked + label {
  background: var(--type-colour, #1b1b3d);
  border-color: var(--type-colour, #1b1b3d);
  color: #fff;
}

/* Dot inverts to white when age pill is active. */
.best-start-listings-view .filter-aside .bsil-age-filter-group .govuk-checkboxes__input:checked + .govuk-checkboxes__label .bsil-pill-dot {
  background: rgba(255, 255, 255, 0.7);
  border-color: transparent;
}

/* Checked — service type pills: filled with category colour. */
.best-start-listings-view .filter-aside .bsil-category-filter-group .govuk-checkboxes__input:checked + .govuk-checkboxes__label {
  background: var(--type-colour, #1b1b3d);
  border-color: var(--type-colour, #1b1b3d);
  color: #fff;
}

/* Make label flex so dot aligns with text. */
.best-start-listings-view .filter-aside .govuk-checkboxes__label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
}

/* Category colour dot indicator (service type only). */
.bsil-pill-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--type-colour, #1b1b3d);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}

/* Dot inverts to white when pill is active. */
.best-start-listings-view .filter-aside .bsil-category-filter-group .govuk-checkboxes__input:checked + .govuk-checkboxes__label .bsil-pill-dot {
  background: rgba(255, 255, 255, 0.7);
  border-color: transparent;
}

/* Focus. */
.best-start-listings-view .filter-aside .govuk-checkboxes__input:focus-visible + .govuk-checkboxes__label,
.best-start-listings-view .filter-aside input[type="checkbox"]:focus-visible + label {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}


/* Hide Apply button — auto-submit makes it redundant on BSIL listing. */
.best-start-listings-view .filter-aside [data-drupal-selector^="edit-submit"],
.best-start-listings-view .filter-aside input[type="submit"].govuk-button:not(.govuk-button--secondary) {
  display: none !important;
}

/* ---- BSIL listing sidebar accordion ---- */

.bsil-listing-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.bsil-listing-accordion__section {
  border: 1.5px solid #b1b4b6;
  border-radius: 4px;
  transition: border-color 0.15s;
}

.bsil-listing-accordion__section.is-open {
  border-color: var(--group-colour, #1d70b8);
}

.bsil-listing-accordion__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.bsil-listing-accordion__section.is-open .bsil-listing-accordion__header {
  border-radius: 4px 4px 0 0;
}

.bsil-listing-accordion__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0b0c0c;
  min-width: 0;
}

.bsil-listing-accordion__toggle:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}

.bsil-listing-accordion__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--group-colour, #1d70b8);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}

.bsil-listing-accordion__label {
  flex: 1;
  min-width: 0;
}

.bsil-listing-accordion__chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.bsil-listing-accordion__section.is-open .bsil-listing-accordion__chevron {
  transform: rotate(180deg);
}

.bsil-listing-accordion__select-all {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--group-colour, #1d70b8);
  cursor: pointer;
}

.bsil-listing-accordion__body {
  padding: 0.4rem 0.6rem 0.6rem;
  background: #f8f8f8;
  border-top: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bsil-listing-accordion__body[hidden] {
  display: none !important;
}

.bsil-listing-accordion__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bsil-listing-accordion__cb {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--group-colour, #1d70b8);
  cursor: pointer;
  margin: 0;
}

.bsil-listing-accordion__item-label {
  font-size: 0.8125rem;
  color: #0b0c0c;
  cursor: pointer;
  line-height: 1.4;
}

/* Node add/edit form — full-width accordion, slightly more spacious */
.bsil-node-form-accordion {
  max-width: 40em;
}

.bsil-node-form-accordion .bsil-listing-accordion__item {
  padding: 6px 0;
}

.bsil-node-form-accordion .bsil-listing-accordion__cb {
  width: 18px;
  height: 18px;
}

.bsil-node-form-accordion .bsil-listing-accordion__item-label {
  font-size: 0.9375rem;
}