/* Filtr kursów. Kolory z palety motywu Yachtly (złoty --theme-color1, grafit --theme-color2). */
.m16-filtr {
  --m16-filtr-akcent: var(--theme-color1, #c8964b);
  width: 100%;
}
/* Stała szerokość: w kontenerze z wyśrodkowaniem (align-items: center) Elementor zwęża widget do treści,
   więc po odfiltrowaniu do 1–2 kursów sekcja się kurczyła. */
.e-con > .elementor-widget-m16-otss-kursy-filtr,
.e-con-inner > .elementor-widget-m16-otss-kursy-filtr {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}
.m16-filtr__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: 40px;
  padding: 28px 32px;
  background: #f7f5f1;
  border-left: 3px solid var(--m16-filtr-akcent);
}
.m16-filtr__grupa {
  min-width: 0;
}
.m16-filtr .m16-filtr__pytanie {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--theme-color2, #111);
}
.m16-filtr__opcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.m16-filtr .m16-filtr__opcja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 20px 10px 14px;
  border: 1px solid #d8d2c8;
  border-radius: 999px;
  background: #fff;
  color: var(--theme-color2, #111);
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
/* Kropka jak w polu wyboru: pusta = niewybrane, wypełniona = wybrane. */
.m16-filtr .m16-filtr__opcja::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid #b9b1a4;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #fff;
  transition: background-color .2s, border-color .2s;
}
.m16-filtr .m16-filtr__opcja:hover {
  border-color: var(--m16-filtr-akcent);
}
.m16-filtr .m16-filtr__opcja[aria-pressed="true"] {
  border-color: var(--m16-filtr-akcent);
  background: var(--m16-filtr-akcent);
  color: #fff;
}
.m16-filtr .m16-filtr__opcja[aria-pressed="true"]::before {
  border-color: #fff;
  background: var(--theme-color2, #111);
}
.m16-filtr .m16-filtr__opcja:focus-visible,
.m16-filtr .m16-filtr__wyczysc:focus-visible {
  outline: 2px solid var(--theme-color2, #111) !important;
  outline-offset: 2px;
}
.m16-filtr__stopka {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding-bottom: 10px;
}
.m16-filtr .m16-filtr__licznik {
  margin: 0;
  font-size: 15px;
  white-space: nowrap;
}
.m16-filtr .m16-filtr__wyczysc {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-color2, #111);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.m16-filtr .m16-filtr__wyczysc:hover {
  color: var(--m16-filtr-akcent);
}
.m16-filtr [hidden] {
  display: none !important;
}

/* Karuzela: --m16-filtr-karty kart w rzędzie (kontrolka „Widoczne karty”), reszta za strzałkami. */
.m16-filtr__karuzela {
  position: relative;
}
.m16-filtr__siatka {
  --m16-filtr-karty: 4;
  --m16-filtr-odstep: 30px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--m16-filtr-karty) - 1) * var(--m16-filtr-odstep)) / var(--m16-filtr-karty));
  gap: var(--m16-filtr-odstep);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Własna warstwa: z-index treści karty z motywu nie wychodzi ponad strzałki. */
  position: relative;
  z-index: 1;
  /* Zapas na cień karty, który overflow by uciął. */
  padding: 6px 0 14px;
  margin: -6px 0 -14px;
}
.m16-filtr__siatka::-webkit-scrollbar {
  display: none;
}
.m16-filtr__kurs {
  min-width: 0;
  scroll-snap-align: start;
}
.m16-filtr__kurs > .service-block {
  height: 100%;
}
/* Karty w rzędzie mają wysokość najwyższej — nadmiar idzie nad przycisk, a nie pod niego (przycisk przy dolnej ramce). */
.m16-filtr__kurs > .service-block,
.m16-filtr__kurs > .service-block > .inner-block,
.m16-filtr__kurs .content-block {
  display: flex;
  flex-direction: column;
}
.m16-filtr__kurs > .service-block > .inner-block,
.m16-filtr__kurs .content-block,
.m16-filtr__kurs .content-block > .content {
  flex: 1 1 auto;
}

.m16-filtr .m16-filtr__strzalka {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -24px 0 0;
  padding: 0;
  border: 1px solid #d8d2c8;
  border-radius: 50%;
  background: #fff;
  color: var(--theme-color2, #111);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.m16-filtr .m16-filtr__strzalka--wstecz {
  left: -24px;
}
.m16-filtr .m16-filtr__strzalka--dalej {
  right: -24px;
}
.m16-filtr .m16-filtr__strzalka:hover:not(:disabled) {
  border-color: var(--m16-filtr-akcent);
  background: var(--m16-filtr-akcent);
  color: #111;
}
.m16-filtr .m16-filtr__strzalka:disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none;
}
.m16-filtr .m16-filtr__strzalka:focus-visible {
  outline: 2px solid var(--theme-color2, #111) !important;
  outline-offset: 2px;
}
/* Wszystkie karty mieszczą się w rzędzie — strzałki niepotrzebne. */
.m16-filtr__karuzela--bez-strzalek .m16-filtr__strzalka {
  display: none;
}

@media (max-width: 1280px) {
  .m16-filtr .m16-filtr__strzalka--wstecz {
    left: -12px;
  }
  .m16-filtr .m16-filtr__strzalka--dalej {
    right: -12px;
  }
}
@media (max-width: 1024px) {
  .m16-filtr__siatka {
    --m16-filtr-karty: 2;
  }
}
@media (max-width: 767px) {
  .m16-filtr__siatka {
    --m16-filtr-karty: 1;
  }
  .m16-filtr .m16-filtr__strzalka {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
  .m16-filtr .m16-filtr__strzalka--wstecz {
    left: -8px;
  }
  .m16-filtr .m16-filtr__strzalka--dalej {
    right: -8px;
  }
}

.m16-filtr__brak {
  padding: 40px 24px;
  text-align: center;
  background: #f7f5f1;
}
.m16-filtr__brak p {
  max-width: 560px;
  margin: 0 auto 14px;
}

@media (max-width: 767px) {
  .m16-filtr__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 22px 18px;
  }
  .m16-filtr__stopka {
    margin-left: 0;
    padding-bottom: 0;
    justify-content: space-between;
  }
}