/* === Modul: Portal Pacjenta ==================================== */

.mod-portalpacjenta {
  width: 100%;
  display: flex;
  padding-top: 24px;
  justify-content: center;
}

.mod-pp__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 0 24px;
  gap: 20px;
  width: 700px;
  max-width: 100%;
}

.mod-pp__title-wrap {
  width: 100%;
}

.mod-pp__title {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: #283896;
}

.mod-pp__buttons {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.mod-pp__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width: 338px;
  max-width: 100%;
}

/* Primary button: Zaloguj się */
.mod-pp__btn--primary {
  background: #283896;
  color: #ffffff;
  border: none;
}

/* Hover dla pierwszego przycisku */
.mod-pp__btn--primary:hover {
  background: #DCDCDC;
  color: #989898;
}

/* Outline button: Zarejestruj się */
.mod-pp__btn--outline {
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #283896;
  color: #283896;
  gap: 10px;
}

/* Hover dla drugiego przycisku */
.mod-pp__btn--outline:hover {
  border-color: #989898;
  color: #989898;
}

/* Ikony */
.mod-pp__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px
}

.mod-pp__icon {
  display: block;
}

/* Kolory ikon (normal) */
.mod-pp__icon--arrow path {
  stroke: #ffffff;
  margin-left: 5px;
}

.mod-pp__icon--user path {
  stroke: #283896;
}

/* Kolory ikon na hover – #989898 */
.mod-pp__btn--primary:hover .mod-pp__icon--arrow path {
  stroke: #989898;
}

.mod-pp__btn--outline:hover .mod-pp__icon--user path {
  stroke: #989898;
}



/* === Moduł: Portal Pacjenta – opis (mod-portalpacjenta2) ============ */

.mod-portalpacjenta2 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-pp2__outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mod-pp2__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 0;
  gap: 12px;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.mod-pp2__title {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%; /* 29px */
  color: #283896;
}

.mod-pp2__list {
  margin: 0;
  padding-left: 18px; /* odstep dla kropek */
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 160%; /* ok. 22px */
  color: #3D3D3D;
  list-style-type: disc;
}

.mod-pp2__list-item {
  margin-bottom: 2px;
}

/* Responsywność */
@media (max-width: 768px) {
  .mod-pp2__inner {
    padding: 20px 16px;
    width: 100%;
  }
}



/* === Moduł: Portal Pacjenta 3 (bezpieczenstwo) ===================== */

.mod-portalpacjenta3 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-pp3__outer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mod-pp3__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;   /* było center */
  padding: 24px 0;
  gap: 12px;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.mod-pp3__title {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%;
  text-align: left;          /* bylo center */
  color: #283896;
}

.mod-pp3__btn-wrap {
  display: flex;
  justify-content: flex-start; /* bylo center */
  width: 100%;
}


.mod-pp3__btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  gap: 10px;
  width: 273px;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #283896;
  background: transparent;
  text-decoration: none;
  cursor: pointer;

  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  color: #283896;

  transition: border-color .2s ease, color .2s ease;
}

.mod-pp3__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-pp3__icon {
  display: block;
}

/* kolor ikony domyslny */
.mod-pp3__icon path {
  stroke: #283896;
  transition: stroke .2s ease;
}


.mod-pp3__btn:hover {
  border-color: #989898;
  color: #989898;
}

.mod-pp3__btn:hover .mod-pp3__icon path {
  stroke: #989898;
}

/* Responsywność */
@media (max-width: 768px) {
  .mod-pp3__inner {
    padding: 20px 16px;
  }

  .mod-pp3__title {
    text-align: center;
  }
}


/* === Moduł: Portal Pacjenta – FAQ (mod-portalpacjenta4) ============ */

.mod-portalpacjenta4 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-pp4__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 0;
  gap: 24px;
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.mod-pp4__heading {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%;
  color: #283896;
}

/* Karta FAQ */
.mod-pp4__faq {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  gap: 36px;
  background: #FFFFFF;
  box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1), 0px 1px 4px rgba(12, 12, 13, 0.05);
  border-radius: 36px;
}

.mod-pp4__item {
  width: 100%;
  max-width: 636px;
}


.mod-pp4__question {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mod-pp4__question-text {
  flex: 1;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  display: flex;
  align-items: center;
  color: #8849D4;
}

/* Ikona plus/minus (kółko z liniami) */
.mod-pp4__icon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 999px;

  flex-shrink: 0;
}

.mod-pp4__icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  background: #9F68E4;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.mod-pp4__icon-line--h {
  width: 60%;
  height: 2px;
}

.mod-pp4__icon-line--v {
  width: 2px;
  height: 60%;
}


.mod-pp4__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.mod-pp4__answer-inner {
  margin-top: 12px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 160%;
  color: rgba(40, 56, 150, 0.75);
}

/* Po otwarciu */
.mod-pp4__item--open .mod-pp4__answer {
  max-height: 1000px; 
}

/* Minus = pionowa kreska znika */
.mod-pp4__item--open .mod-pp4__icon-line--v {
  opacity: 0;
}

/* Linia pod pytaniem */
.mod-pp4__divider {
  width: 100%;
  max-width: 636px;
  border-bottom: 2px solid #9F68E4;
  margin-top: 12px;
}

/* Responsywno */
@media (max-width: 768px) {
  .mod-pp4__inner {
    padding: 24px 16px;
  }

  .mod-pp4__faq {
    padding: 24px 16px;
  }

  .mod-pp4__item {
    max-width: 100%;
  }
}



/* === Moduł: Portal Pacjenta – kontakt (mod-portalpacjenta5) ======== */

.mod-portalpacjenta5 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-pp5__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0 64px;
  gap: 24px;
  width: 1128px;
  max-width: 100%;
  margin: 0 auto;
}

.mod-pp5__text {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%;
  color: #283896;
}

.mod-pp5__buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 632px;
}

/* wspólna baza dla przycisków */
.mod-pp5__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;

  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  gap: 10px;

  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* primary */
.mod-pp5__btn--primary {
  background: #283896;
  color: #FFFFFF;
  border: none;
  min-width: 301px;
}

/* hover – z makiety */
.mod-pp5__btn--primary:hover {
  background: #DCDCDC;
  color: #989898;
}

/* outline */
.mod-pp5__btn--outline {
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #283896;
  color: #283896;
  min-width: 297px;
}

/* hover – outline */
.mod-pp5__btn--outline:hover {
  border-color: #989898;
  color: #989898;
}

.mod-pp5__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mod-pp5__icon {
  display: block;
}

/* kolory ikon standardowo */
.mod-pp5__icon--arrow path {
  stroke: #FFFFFF;
}

.mod-pp5__icon--file path {
  stroke: #283896;
}

/* hover: ikony #989898 */
.mod-pp5__btn--primary:hover .mod-pp5__icon--arrow path {
  stroke: #989898;
}

.mod-pp5__btn--outline:hover .mod-pp5__icon--file path {
  stroke: #989898;
}

/* RWD */
@media (max-width: 768px) {
  .mod-pp5__inner {
    padding: 24px 16px 48px;
    align-items: flex-start;
  }

  .mod-pp5__buttons {
    flex-direction: column;
    max-width: 100%;
  }

  .mod-pp5__btn {
    width: 100%;
    min-width: 0;
  }
}


/* baza przycisków */
.mod-pp5__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  gap: 10px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;

  /* DODANE: przycisk może się rozszerzyć i tekst może się zawijać */
  min-width: 0;
}

/* etykieta – pozwalamy na zawijanie */
.mod-pp5__btn-label {
  white-space: normal;      /* było odziedziczone nowrap z innych styli */
  text-align: left;
}

/* szerokość bardziej „elastyczna” zamiast sztywnej */
.mod-pp5__btn--primary {
  background: #283896;
  color: #FFFFFF;
  border: none;
  max-width: 340px;         /* zamiast min-width:301px */
}

.mod-pp5__btn--outline {
  box-sizing: border-box;
  background: transparent;
  border: 1px solid #283896;
  color: #283896;
  max-width: 340px;         /* zamiast min-width:297px */
}



/* Mod: Programy i akcje profilaktyczne
   (na podstawie Frame 45 z figmy) */
.mod-profilaktyka {
  padding: 40px 16px 24px;
  display: flex;
  justify-content: center;
}

.mod-profilaktyka__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 700px;
}

/* Tytuł – Desktop/H/H2 */
.mod-profilaktyka__title {
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: #283896;
}

/* Opis – Desktop/Body/LG */
.mod-profilaktyka__text {
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: rgba(40, 56, 150, 0.75);
}

/* Responsywka */
@media (max-width: 767px) {
  .mod-profilaktyka {
    padding: 32px 16px 16px;
  }

  .mod-profilaktyka__title {
    font-size: 26px;
  }

  .mod-profilaktyka__text {
    font-size: 15px;
  }
}



/* === Moduł: Baza dokumentów (mod-bazadokumentow) =================== */

.mod-bazadokumentow {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-bd__outer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mod-bd__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  width: 1128px;
  max-width: 100%;
}

/* środek 700px jak w makiecie */
.mod-bd__inner > * {
  width: 700px;
  max-width: 100%;
}

.mod-bd__title {
  margin: 0 0 12px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: #283896;
}

.mod-bd__desc {
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: rgba(40, 56, 150, 0.75);
}

/* RWD */
@media (max-width: 768px) {
  .mod-bd__inner {
    padding: 16px;
    align-items: flex-start;
  }

  .mod-bd__inner > * {
    width: 100%;
  }

  .mod-bd__title {
    font-size: 28px;
  }
}






/* === Moduł: Baza dokumentów – kafelki 3 (mod-bazadokumentow3) === */

.mod-bazadokumentow3 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.mojzmiany {
margin-bottom: -30px;
  
}

.mod-bd3__inner {
  width: 1128px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 0 64px;
}

/* siatka kafelków */
.mod-bd3__grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* pojedyncza karta */
.mod-bd3__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 10px;

  width: 264px;
  height: 173px;

  background: #FFFFFF;
  border: 1.4px solid #9F68E4;
  border-radius: 24px;

  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* ikona PDF u góry */
.mod-bd3__icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.mod-bd3__icon-pdf {
  display: block;
}

/* dół: tytuł + meta + strzałka */
.mod-bd3__bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 232px;
}

.mod-bd3__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 204px;
}

.mod-bd3__title {
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
  color: #283896;
}

.mod-bd3__meta {
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  color: #283896;
}

.mod-bd3__arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.mod-bd3__icon-arrow {
  display: block;
}

/* hover – delikatny efekt */
.mod-bd3__card:hover {
  border-color: #B586F0;
  box-shadow: 0 4px 12px rgba(159, 104, 228, 0.18);
  transform: translateY(-2px);
}

.mod-bd3__card:hover .mod-bd3__icon-arrow path {
  stroke: #B586F0;
}

/* RWD */
@media (max-width: 1024px) {
  .mod-bd3__card {
    width: calc(50% - 12px);
  }
}

@media (max-width: 640px) {
  .mod-bd3__inner {
    padding: 24px 16px 48px;
  }

  .mod-bd3__card {
    width: 100%;
  }

  .mod-bd3__bottom {
    width: 100%;
  }

  .mod-bd3__text {
    width: auto;
  }
}



/* === Placówki – NOWY MOD (mod-placowkinowy.php) === */

.placowki-nw {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

.placowki-nw__header {
  width: 700px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.placowki-nw__lead h2 {
  margin: 0 0 6px;
  color: #283896;
  font: 500 36px/110% 'Satoshi', sans-serif;
}

.placowki-nw__lead p {
  margin: 0;
  color: rgba(40,56,150,0.75);
  font: 400 16px/140% 'Satoshi', sans-serif;
}

/* zakładki (dynamiczne sekcje) */
.segmented-nw {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  border: 1px solid #E7DAFA;
  border-radius: 40px;
  padding: 8px;
  max-width: 700px;
}

.segmented-nw__btn {
  flex: 1;
  border: 0;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 12px 24px;
  font: 500 14px/110% 'Satoshi', sans-serif;
  color: #283896;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.segmented-nw__btn.is-active {
  background: #E7DAFA;
  border: 1.4px solid #9F68E4;
  box-shadow: 0 0 0 1px rgba(0,0,0,0);
}

/* opisy + CTA */
.placowki-nw__descriptions {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.desc-nw__text {
  max-width: 700px;
}

.placowki-nw__ctas {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 700px;
  margin: 30px 0 76px;
}

/* lokalizacje */

.placowki-nw__location {
  max-width: 1128px;
  margin: 0 auto 40px;
}

.placowki-nw__location-head h3 {
  margin: 0;
  color: #283896;
  font: 500 21px/140% 'Satoshi', sans-serif;
  text-align: center;
}

.placowki-nw__location-head .addr {
  margin: 4px 0 12px;
  color: #8849D4;
  font: 500 14px/140% 'Satoshi', sans-serif;
  text-align: center;
}

.placowki-nw__location-head hr {
  border: 0;
  border-top: 1.4px solid #E7DAFA;
  margin: 0;
}

/* siatka przycisków poradni */

.placowki-nw__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}

@media (max-width: 960px) {
  .placowki-nw__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .placowki-nw__grid { grid-template-columns: 1fr; }
}

/* “pigułki” poradni */

.clinic-pill-nw {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  height: 52px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #9F68E4;
  border-radius: 24px;
  color: #283896;
  font: 500 16px/110% 'Satoshi', sans-serif;
  cursor: pointer;
  transition: box-shadow .2s, transform .05s, background .2s;
}

.clinic-pill-nw:hover {
  box-shadow: 0 2px 10px rgba(40,56,150,0.08);
  background: #F9F6FE;
}

.clinic-pill-nw:active {
  transform: translateY(1px);
}

.clinic-pill-nw .ico {
  width: 20px;
  height: 20px;
}

/* === POPUP – NOWY === */

body.no-scroll { overflow: hidden; }

.clinic-modal-nw {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  box-sizing: border-box;
}

.clinic-modal-nw[aria-hidden="false"] {
  display: flex;                 /* centrujemy box */
  align-items: center;
  justify-content: center;
  padding: 4% 4%;                /* odstępy od brzegów w % */
}

.clinic-modal-nw__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40,56,150,0.5);
}

.clinic-modal-nw__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  max-height: 100%;
  overflow: auto;
  background: #FFFFFF;
  border-radius: 36px;
  box-shadow: 0 1px 4px rgba(12,12,13,0.1), 0 1px 4px rgba(12,12,13,0.05);
  padding: 24px;
  outline: none;
}

.clinic-modal-nw__close {
  position: absolute;
  right: 24px;
  top: 24px;
  border: 0;
  background: none;
  cursor: pointer;
}

/* treść modala */

.clinic-modal-nw__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cm-nw-head .cm-nw-title {
  margin: 0;
  color: #283896;
  font: 500 36px/110% 'Satoshi', sans-serif;
}

.cm-nw-head .cm-nw-sub {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #8849D4;
  font: 500 16px/110% 'Satoshi', sans-serif;
}

.cm-nw-head .cm-nw-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 6px;
  height: 24px;
  border: 1px solid #0CA78B;
  background: #DFF7F3;
  color: #097662;
  border-radius: 24px;
  font: 500 10px/140% 'Satoshi', sans-serif;
}

.cm-nw-cols {
  display: flex;
  gap: 24px;
}

.cm-nw-col {
  flex: 1;
}

.cm-nw-col h4 {
  margin: 0 0 6px;
  color: #283896;
  font: 500 16px/110% 'Satoshi', sans-serif;
}

.cm-nw-col h3 {
  margin: 0 0 12px;
  color: #283896;
  font: 500 21px/140% 'Satoshi', sans-serif;
}

.cm-nw-col p {
  margin: 0 0 6px;
  color: #3D3D3D;
  font: 400 12px/140% 'Satoshi', sans-serif;
  letter-spacing: .01em;
}

/* lekarze i godziny – kolory jak prosisz */

.cm-nw-doctors p {
  color: #8849D4;
}

.cm-nw-hours p {
  margin: 0 0 4px;
}

.cm-nw-hours-day {
  color: #283896;
  font-weight: 500;
  margin-right: 4px;
}

.cm-nw-hours-time {
  color: #8849D4;
}

/* kontakty */

.cm-nw-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-nw-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #283896;
  font: 500 14px/140% 'Satoshi', sans-serif;
}

.cm-nw-contact img {
  width: 16px;
  height: 16px;
}

/* przyciski w modalu */

.cm-nw-actions {
  display: flex;
  gap: 24px;
  margin-top: 8px;
}

/* RWD modala */

@media (max-width: 900px) {
  .clinic-modal-nw__dialog {
    padding: 24px;
  }
  .cm-nw-head .cm-nw-title {
    font-size: 28px;
  }
  .cm-nw-cols {
    flex-direction: column;
  }
}






/* =========================================================
   MOD 2 – Programy profilaktyczne (kafelki + popup 2/3 kolumny)
   ====================================================== */

/* ------------ SEKCJA / GRID ------------ */

.mod-profilaktyka2 {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.mod-profilaktyka2__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1120px;
  width: 100%;
  justify-content: center;
}

/* ------------ KAFELKI ------------ */

.profilaktyka2-card {
  flex: 0 0 352px;
  max-width: 352px;
  cursor: pointer;
}

.profilaktyka2-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 20px;
  gap: 16px;
  min-height: 340px;
  box-shadow: 0 1px 4px rgba(12,12,13,.1), 0 1px 4px rgba(12,12,13,.05);
  border-radius: 32px;
  border: 1px solid transparent;
  color: #ffffff;
  transition: border-color .2s ease, color .2s ease;
}

/* obrazek w kafelku */

.profilaktyka2-card__image-wrapper {
  width: 100%;
  margin: 0 0 12px;
}

.profilaktyka2-card__image {
  display: block;
  width: 53px;
  height: auto;
  border-radius: 24px;
  object-fit: cover;
}

/* ikona fallback */

.profilaktyka2-card__icon {
  width: 64px;
  height: 64px;
  color: #ffffff;
}

.profilaktyka2-card__icon svg {
  width: 100%;
  height: 100%;
}

/* tekst na kafelku */

.profilaktyka2-card__title {
  margin: 0;
  color: #fff;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
}

.profilaktyka2-card__text {
  margin: 0;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* przycisk na kafelku */

.profilaktyka2-card__button {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: transparent;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  margin-top: px
}

.profilaktyka2-card__button-icon svg {
  width: 16px;
  height: 16px;
}

/* hover kafelka wg wymagań */

.profilaktyka2-card:hover .profilaktyka2-card__inner {
  border-color: #989898;
  color: #989898;
}

.profilaktyka2-card:hover .profilaktyka2-card__button {
  border-color: #989898;
  color: #989898;
}

/* ------------ POPUP – overlay ------------ */

.profilaktyka2-popup {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
}

.profilaktyka2-popup.is-open {
  display: flex;
}

.profilaktyka2-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
}

body.profilaktyka2-popup-open {
  overflow: hidden;
}

/* ------------ POPUP – box ------------ */

.profilaktyka2-popup__box {
  position: relative;
  z-index: 1;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(12,12,13,.1), 0 1px 4px rgba(12,12,13,.05);
  border-radius: 36px;
  padding: 32px 40px 32px;
  width: min(1120px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
}

.profilaktyka2-popup__close {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  margin: -8px 0 8px auto;
  display: flex;
}

.profilaktyka2-popup__close svg {
  width: 20px;
  height: 20px;
}

.profilaktyka2-popup__layout {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #283896;
}

.profilaktyka2-popup__title {
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.1;
  color: #283896;
  margin: 0 0 16px;
}

/* wspólne nagłówki sekcji */

.profilaktyka2-popup__subtitle {
  margin: 24px 0 12px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
}

.profilaktyka2-popup__subtitle--mt {
  margin-top: 32px;
}

.profilaktyka2-popup__text {
  font-size: .8rem;
  line-height: 1.5;
  color: #3d3d3d;
}

.profilaktyka2-popup__section {
  margin-top: 16px;
}

.profilaktyka2-popup__section h3 {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 1rem;
}

/* ------------ INTRO ------------ */

.profilaktyka2-popup__intro {
  margin-bottom: 16px;
}

.profilaktyka2-popup__intro--2cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.profilaktyka2-popup__intro-col {
  flex: 1 1 280px;
}

.profilaktyka2-popup__intro h3,
.profilaktyka2-popup__intro-col h3 {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 1rem;
}

/* ------------ LAYOUT steps3 – 3 kolumny z numerami ------------ */

/* kontener na 3 kroki */

.profilaktyka2-popup__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.profilaktyka2-popup__step {
  flex: 1 1 268px;
  max-width: 368px;
}

/* górny kafelek z numerem i tytułem (jak w Figmie) */

.profilaktyka2-popup__step-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 10px;
  width: 100%;
  min-height: 111px;
  background: #283896; /* kolor nadpisywany inline z ACF */
  box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1), 0 1px 4px rgba(12, 12, 13, 0.05);
  border-radius: 24px;
}

/* numer – duży, bez kółka */

.profilaktyka2-popup__step-number {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 72px;
  line-height: 110%;
}

/* tytuł kroku */

.profilaktyka2-popup__step-title {
  display: block;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%;
}

/* dolny biały kafelek z opisem */

.profilaktyka2-popup__step-bottom {
  margin-top: 12px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1), 0 1px 4px rgba(12, 12, 13, 0.05);
  border-radius: 24px;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 140%;
  color: #283896;
}

/* ------------ LAYOUT info2 – 2 kolumny bez numerów ------------ */

.profilaktyka2-popup__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.profilaktyka2-popup__block {
  flex: 1 1 260px;
  min-width: 0;
}

.profilaktyka2-popup__block-top {
  border-radius: 24px ;
  margin-bottom: 10px;
  padding: 18px 24px;
  color: #ffffff;
  font-weight: 500;
  font-size: .9rem;
}

.profilaktyka2-popup__block-bottom {
  border-radius: 0 0 24px 24px;
  padding: 16px 18px;
  background: #ffffff;
  font-size: .8rem;
  line-height: 1.5;
  color: #3d3d3d;
  box-shadow: 0 1px 4px rgba(12,12,13,.08);
}

/* ------------ Lokacje ------------ */

.profilaktyka2-popup__locations {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profilaktyka2-popup__location {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profilaktyka2-popup__location-icon svg {
  width: 16px;
  height: 16px;
}

.profilaktyka2-popup__location-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

/* ------------ CTA w popupie ------------ */

.profilaktyka2-popup__cta {
  margin-top: 24px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 24px;
  background: #283896;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
  width: 100%;
}

.profilaktyka2-popup__cta-icon svg {
  width: 16px;
  height: 16px;
}

/* hover CTA w popupie */

.profilaktyka2-popup__cta:hover {
  background:#DCDCDC;
  color:#989898;
}

.profilaktyka2-popup__cta:hover .profilaktyka2-popup__cta-icon svg {
  color:#989898;
}

/* ------------ RWD ------------ */

@media (max-width: 767px) {
  .mod-profilaktyka2__grid {
    gap: 24px;
  }

  .profilaktyka2-card__inner {
    min-height: 0;
  }

  .profilaktyka2-popup__box {
    padding: 20px;
    border-radius: 24px;
    max-height: 92vh;
  }

  .profilaktyka2-popup__title {
    font-size: 1.6rem;
  }

  .profilaktyka2-popup__intro--2cols {
    flex-direction: column;
  }

  .profilaktyka2-popup__steps,
  .profilaktyka2-popup__blocks {
    flex-direction: column;
  }

  .profilaktyka2-popup__step,
  .profilaktyka2-popup__block {
    max-width: none;
  }
}


.mod-profilaktyka2__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1120px;
  width: 100%;
  justify-content: center;
  align-items: stretch;        /* NOWE – wszystkie kafelki tej samej wysokości */
}

/* KAFELKI */

.profilaktyka2-card {
  flex: 0 0 352px;
  max-width: 352px;
  cursor: pointer;
  display: flex;               /* NOWE – żeby inner mógł się rozciągać */
}

.profilaktyka2-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 24px 20px;
  gap: 16px;
  flex: 1 1 auto;              /* NOWE – wypełnia wysokość kafelka */
  min-height: 0;               /* min-height nie jest już potrzebny */
  box-shadow: 0 1px 4px rgba(12,12,13,.1), 0 1px 4px rgba(12,12,13,.05);
  border-radius: 32px;
  border: 1px solid transparent;
  color: #ffffff;
  transition: border-color .2s ease, color .2s ease;
}

/* przycisk na kafelku */

.profilaktyka2-card__button {
  margin-top: auto;            /* trzyma przycisk przy dole kafelka */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid #ffffff;
  background: transparent;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
  /* usuń to: margin-top: px; – był błąd składni */
}



/* =========================
   Tytuł sekcji nad opisem
   ========================= */
.desc-nw__title {
  margin: 0 0 6px;
  color: #283896;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 21px;   /* jak w Figma: Desktop/H3 140% */
  line-height: 140%;
}

/* (opcjonalnie – jeśli chcesz zawęzić szerokość jak w makiecie) */
.placowki-nw__descriptions,
.desc-nw__text {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  
}

/* =========================
   Badge w popupie
   ========================= */
/* Bazowy wygląd badge (zielony – NFZ itp.)
   Jeśli już masz podobny blok w CSS, tego nie duplikuj. */
.cm-nw-head .cm-nw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 12px 6px;
  height: 24px;

  border-radius: 24px;
  border: 1px solid #0CA78B;
  background: #DFF7F3;
  color: #097662;

  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 140%;

  flex: none;
}

/* Wariant różowy – "Usługi prywatne" (Frame 1118) */
.cm-nw-badge--private {
  background: #FEEDF9;
  border-color: #E066BD;
  color: #A53886;
}



/* Kontener na oba dymki */
.cm-nw-badges {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Baza dla wszystkich dymków */
.cm-nw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 6px;
  height: 24px;
  border-radius: 24px;

  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 140%;
  white-space: nowrap;
}

/* Zielony dymek (np. + / NFZ) */
.cm-nw-badge--green {
  background: #DFF7F3;
  border: 1px solid #0CA78B;
  color: #097662;
}

/* Czerwony dymek – Usługi prywatne */
.cm-nw-badge--private {
  background: #FEEDF9 !important;
  border: 1px solid #E066BD !important;
  color: #A53886 !important;
}


/* =========================
   1) GRID PRZYCISKÓW PORADNI
   ========================= */

.placowki-nw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
}

/* tablet: 2 kolumny */
@media (min-width: 640px) {
  .placowki-nw__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* desktop: 3 kolumny */
@media (min-width: 960px) {
  .placowki-nw__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* jeśli są dokładnie 4 przyciski:
     4-ty jest ostatni → rozciągamy go na 2 kolumny w drugim rzędzie */
  .placowki-nw__grid > .clinic-pill-nw:nth-child(4):last-child {
    grid-column: 1 / span 2;
  }
}

/* =========================
   2) POPUP: JEDNA / DWIE KOLUMNY
   ========================= */

.clinic-modal-nw__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* podstawowy układ kolumn – 1 kolumna (mobile) */
.cm-nw-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 40px;
  grid-auto-flow: row dense;
}

/* dół (Godziny / Dane kontaktowe) – zawsze 2 kolumny na desktopie */
@media (min-width: 900px) {
  .cm-nw-cols-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* wariant DWUKOLUMNOWY – główne sekcje (Zakres, Przygotowanie, Dokumenty, Lekarze) */
@media (min-width: 900px) {
  .cm-layout-two .cm-nw-cols-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* wariant JEDNOKOLUMNOWY – główne sekcje
   (dół z godzinami i kontaktem zostaje 2-kolumnowy jak w projekcie) */
.cm-layout-one .cm-nw-cols-main {
  grid-template-columns: minmax(0, 1fr);
}

/* na wszelki wypadek, żeby znikające kolumny nie zostawiały "dziur" */
.cm-nw-col[style*="display: none"] {
  visibility: hidden;
}




/* Kontener modułu */
.mod-podstawagora {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.mod-podstawagora__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1128px;
  width: 100%;
  min-height: 140px;
  padding: 0;
}

/* Tytuł – H2 */
.mod-podstawagora__title {
  max-width: 700px;
  width: 100%;
  margin: 0 0 24px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: #283896;
}

/* Wrapper na przyciski */
.mod-podstawagora__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  max-width: 700px;
  width: 100%;
}

/* Podstawowy wygląd przycisków */
.mod-podstawagora__btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  gap: 6px;
  height: 40px;
  border-radius: 24px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mod-podstawagora__btn-label {
  display: inline-block;
}

/* Ikony */
.mod-podstawagora__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

/* Button Primary (ciemnoniebieski) */
.mod-podstawagora__btn--primary {
  background: #283896;
  color: #ffffff;
  min-width: 265px;
}

/* HOVER – PRIMARY
   :hover { background:#DCDCDC; color:#989898 } + ikona też #989898 */
.mod-podstawagora__btn--primary:hover {
  background: #DCDCDC;
  color: #989898;
}

/* Button Tertiary (z obramowaniem) */
.mod-podstawagora__btn--tertiary {
  box-sizing: border-box;
  border: 1px solid #283896;
  color: #283896;
  gap: 10px;
  min-width: 411px;
}

/* HOVER – TERTIARY
   :hover { border-color:#989898; color:#989898 } + ikona również */
.mod-podstawagora__btn--tertiary:hover {
  border-color: #989898;
  color: #989898;
}

/* Responsywność – przyciski mogą się łamać pod sobą na mniejszych ekranach */
@media (max-width: 768px) {
  .mod-podstawagora__inner {
    align-items: flex-start;
  }

  .mod-podstawagora__title {
    font-size: 28px;
  }

  .mod-podstawagora__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .mod-podstawagora__btn--primary,
  .mod-podstawagora__btn--tertiary {
    min-width: 0;
    width: 100%;
  }
}


.calllyyyff {
width: 100%
}




/* === Podstawowa – nagłówki + tekst (mod-podstawanagitekst) === */

.mod-podstawanagitekst {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.mod-podstawanagitekst__inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 1128px;
  width: 100%;
}

.mod-podstawanagitekst__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  max-width: 700px;
  width: 100%;
}

/* Pojedyncza sekcja (nagłówek + tekst) */
.mod-pnt__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 12px;
  width: 100%;
}

/* H3 – jak w Figmie (Desktop/H/H3 140%) */
.mod-pnt__heading {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%;
  color: #283896;
}

/* Treść – Desktop/Body/MD */
.mod-pnt__text {
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 160%;
  color: #3D3D3D;
}

/* Standardowe odstępy dla paragrafów / list z edytora */
.mod-pnt__text p {
  margin: 0 0 1em;
}

.mod-pnt__text ul,
.mod-pnt__text ol {
  margin: 0 0 1em 1.2em;
  padding: 0;
}

/* Responsywność */
@media (max-width: 768px) {
  .mod-podstawanagitekst__inner {
    align-items: flex-start;
    padding: 0 16px;
  }

  .mod-pnt__heading {
    font-size: 18px;
  }
}


/* === mod-podjedenpodzial – obraz + treść + 2 przyciski === */

.mod-podjeden {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.mod-podjeden__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 72px;
  max-width: 1128px;
  width: 100%;
  min-height: 398px;
}

/* Obraz po lewej */
.mod-podjeden__image {
  width: 550px;
  height: 350px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
}

/* Kolumna z tekstem i przyciskami */
.mod-podjeden__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  width: 506px;
  flex: none;
}

.mod-podjeden__textwrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 12px;
  width: 100%;
}

/* Tytuł – jak w Figmie */
.mod-podjeden__title {
  margin: 0;
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  color: #283896;
}

/* Tekst – Desktop/Body/MD */
.mod-podjeden__text {
  width: 100%;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 160%;
  color: #3D3D3D;
}

.mod-podjeden__text p {
  margin: 0 0 1em;
}

.mod-podjeden__buttons {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

/* Wspólne dla obu przycisków */
.mod-podjeden__btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  gap: 6px;
  height: 40px;
  border-radius: 24px;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 110%;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mod-podjeden__btn-label {
  display: inline-block;
}

.mod-podjeden__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

/* PRIMARY */
.mod-podjeden__btn--primary {
  min-width: 265px;
  background: #283896;
  color: #FFFFFF;
}

/* Hover: background:#DCDCDC; color:#989898; ikona też #989898 */
.mod-podjeden__btn--primary:hover {
  background: #DCDCDC;
  color: #989898;
}

/* TERTIARY */
.mod-podjeden__btn--tertiary {
  min-width: 168px;
  box-sizing: border-box;
  border: 1px solid #283896;
  color: #283896;
  gap: 10px;
}

/* Hover: border-color:#989898; color:#989898; ikona też */
.mod-podjeden__btn--tertiary:hover {
  border-color: #989898;
  color: #989898;
}

/* Responsywność */
@media (max-width: 992px) {
  .mod-podjeden__inner {
    flex-direction: column;
    gap: 24px;
  }

  .mod-podjeden__image {
    width: 100%;
    max-width: 550px;
  }

  .mod-podjeden__content {
    width: 100%;
    max-width: 506px;
  }

  .mod-podjeden__buttons {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .mod-podjeden__title {
    font-size: 28px;
  }

  .mod-podjeden__btn--primary,
  .mod-podjeden__btn--tertiary {
    width: 100%;
    min-width: 0;
  }

  .mod-podjeden__buttons {
    flex-direction: column;
    align-items: stretch;
  }
}







/* === Placówki – JEDNA PLACÓWKA (mod-jednenplacowki.php) === */

/* Główny kontener sekcji – Frame 1132 */
.placowki-jp {
  max-width: 1128px;
  margin: 0 auto;
  padding: 32px 0 64px;
}

/* (opcjonalny) nagłówek całej sekcji – jeśli kiedyś użyjesz */
.placowki-jp__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  text-align: center;
}

.placowki-jp__header h2 {
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 140%;
  color: #283896;
}

.placowki-jp__header p {
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #3D3D3D;
}

/* pojedyncza lokalizacja (Osiedle gen. J. Bema, Stare Miasto) */

.placowki-jp__location {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* odstęp między kolejnymi lokalizacjami – jak w figmie (64px) */
.placowki-jp__location + .placowki-jp__location {
  padding-top: 64px;
}

/* nagłówek lokalizacji – Frame 1107 / 46 / 45 / 1139 */

.placowki-jp__location-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  gap: 12px;
}

.placowki-jp__location-head h3 {
  width: 100%;
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 21px;
  line-height: 140%; /* 29px */
  text-align: center;
  color: #283896;
}

.placowki-jp__location-head .addr {
  width: 100%;
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%; /* 22px */
  text-align: center;
  color: #8849D4;
}

/* Vector 5 */

.placowki-jp__location-head hr {
  width: 100%;
  border: 0;
  border-top: 1.4px solid #E7DAFA;
  margin: 12px 0 0;
}

/* siatka przycisków poradni – Frame 1131 / 1093 */

.placowki-jp__grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  gap: 24px;
}

/* “pigułki” poradni – Link element */

/* baza wspólna */
.clinic-pill-jp {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #9F68E4;
  border-radius: 24px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .15s;
}

/* krótkie nazwy – 3 w rzędzie (~360px) */
.clinic-pill-jp--short {
  flex: 0 0 calc((100% - 48px) / 3);  /* 3 kolumny + dwa odstępy 24px */
  max-width: calc((100% - 48px) / 3);
}

/* długie nazwy – 2 w rzędzie (~744px) */
.clinic-pill-jp--long {
  flex: 0 0 calc((100% - 24px) / 2);  /* 2 kolumny + jeden odstęp */
  max-width: calc((100% - 24px) / 2);
}

/* tablet – zawsze 2 w rzędzie */
@media (max-width: 960px) {
  .clinic-pill-jp--short,
  .clinic-pill-jp--long {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

/* telefon – 1 w rzędzie */
@media (max-width: 640px) {
  .clinic-pill-jp--short,
  .clinic-pill-jp--long {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* tekst – Poradnia psychologiczna (Frame 60 / 38) */

.clinic-pill-jp__label {
  flex: 1;
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%; /* 18px */
  color: #283896;
  text-align: left;
}

/* plus 20x20, BEZ obramowania (bez kółka) */

.clinic-pill-jp__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* chowamy okrąg ze svg, zostaje sam plus */
.clinic-pill-jp__icon svg circle {
  display: none;
}

.clinic-pill-jp__icon svg path {
  stroke: #9F68E4;
  stroke-width: 1.6667;
  stroke-linecap: round;
}

/* hover / focus */

.clinic-pill-jp:hover {
  border-color: #9F68E4;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(27, 6, 72, 0.10);
}

.clinic-pill-jp:active {
  transform: translateY(1px);
}

.clinic-pill-jp:focus-visible {
  outline: 2px solid #9F68E4;
  outline-offset: 3px;
}

/* blokowanie scrolla przy otwartym popupie */

body.no-scroll {
  overflow: hidden;
}

/* === POPUP PORADNI – JEDNA PLACÓWKA === */

.clinic-modal-jp {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  box-sizing: border-box;
}

.clinic-modal-jp[aria-hidden="false"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4% 4%;
}

.clinic-modal-jp__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 7, 32, 0.45);
  backdrop-filter: blur(4px);
}

.clinic-modal-jp__dialog {
  position: relative;
  max-width: 960px;
  width: 100%;
  max-height: min(640px, 90vh);
  margin: 0 auto;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 40px 80px rgba(15, 6, 63, 0.35);
  padding: 32px 32px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .clinic-modal-jp[aria-hidden="false"] {
    padding: 16px;
  }
  .clinic-modal-jp__dialog {
    max-height: 100vh;
    padding: 24px 20px 20px;
    border-radius: 20px;
  }
}

.clinic-modal-jp__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: #F9F6FE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color .2s, transform .1s;
}

.clinic-modal-jp__close:hover {
  background: #E7DAFA;
}

.clinic-modal-jp__close:active {
  transform: translateY(1px);
}

.clinic-modal-jp__close:focus-visible {
  outline: 2px solid #9F68E4;
  outline-offset: 2px;
}

/* zawartość popupu */

.clinic-modal-jp__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  padding-right: 6px; /* mały margines na scrollbar */
}

.cm-jp-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-jp-head .cm-jp-title {
  margin: 0;
  color: #283896;
  font: 500 32px/110% 'Satoshi', sans-serif;
}

.cm-jp-head .cm-jp-sub {
  margin: 0;
  color: Tczew, ul. 30-go Stycznia 55, Osiedle Gen. J. Bema
  font: 400 14px/140% 'Satoshi', sans-serif;
}

.cm-jp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cm-jp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 11px/140% 'Satoshi', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cm-jp-badge--green {
  background: #DFF7F3;
  color: #097662;
}

.cm-jp-badge--private {
  background: #FEEDF9;
  color: #A53886;
}

/* kolumny */

.cm-jp-cols {
  display: grid;
  gap: 20px 24px;
}

.cm-jp-cols-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cm-jp-cols-bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.cm-jp-col h4,
.cm-jp-col h3 {
  margin: 0 0 8px;
  color: #283896;
  font: 500 14px/140% 'Satoshi', sans-serif;
}

.cm-jp-col p {
  margin: 0 0 6px;
  color: #3D3D3D;
  font: 400 13px/150% 'Satoshi', sans-serif;
}

.cm-jp-col ul {
  margin: 0;
  padding-left: 18px;
  color: #3D3D3D;
  font: 400 13px/150% 'Satoshi', sans-serif;
}

.cm-jp-col li + li {
  margin-top: 3px;
}

/* warianty układu – jedna / dwie kolumny u góry */

.cm-layout-two .cm-jp-cols-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cm-layout-one .cm-jp-cols-main {
  grid-template-columns: minmax(0, 1fr);
}

/* responsive */

@media (max-width: 992px) {
  .cm-jp-cols-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .cm-jp-cols-main,
  .cm-jp-cols-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* treści specjalne */

.cm-jp-doctors p {
  color: #8849D4;
}

.cm-jp-hours p {
  margin: 0 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cm-jp-hours-day {
  font-weight: 500;
}

.cm-jp-hours-time {
  font-weight: 500;
  color: #8849D4
}

/* kontakty */

.cm-jp-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cm-jp-contact {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-jp-contact img {
  width: 16px;
  height: 16px;
}

.cm-jp-contact span {
  font: 400 13px/140% 'Satoshi', sans-serif;
  color: #3D3D3D;
}

/* przyciski na dole popupu */

.cm-jp-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.cm-jp-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, #9F68E4 0%, #E066BD 100%);
  color: #FFFFFF;
  font: 500 13px/140% 'Satoshi', sans-serif;
  transition: box-shadow .2s, transform .1s, filter .2s;
}

.cm-jp-form .hoverrroff,
.cm-jp-form .hoverrron {
  width: 16px;
  height: 16px;
}

.cm-jp-form .hoverrron {
  display: none;
}

.cm-jp-form:hover {
  box-shadow: 0 10px 30px rgba(159, 104, 228, 0.45);
  filter: brightness(1.03);
}

.cm-jp-form:hover .hoverrroff {
  display: none;
}

.cm-jp-form:hover .hoverrron {
  display: inline-block;
}

.cm-jp-form:active {
  transform: translateY(1px);
}

.cm-jp-form:focus-visible {
  outline: 2px solid #9F68E4;
  outline-offset: 3px;
}

/* ukrywanie kolumn po stronie JS (żeby nie zostawały dziury) */

.cm-jp-col[style*="display: none"] {
  visibility: hidden;
}


.clinic-pill-jp__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.clinic-pill-jp__icon svg {
  width: 100%;
  height: 100%;
}


/* siatka przycisków poradni – jak w figmie (1128px, gap 24px) */
.placowki-jp__grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 0;
}

/* baza wspólna „pigułki” */
.clinic-pill-jp {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #9F68E4;
  border-radius: 24px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s, transform .15s;
}

/* krótka nazwa – dokładnie 360px (3 w rzędzie) */
.clinic-pill-jp--short {
  flex: 0 0 360px;
  max-width: 360px;
}

/* długa nazwa – dokładnie 744px (2 w rzędzie: 360 + 24 + 744 = 1128) */
.clinic-pill-jp--long {
  flex: 0 0 744px;
  max-width: 744px;
}

/* tablet – zawsze 2 w rzędzie, po 50% szerokości */
@media (max-width: 960px) {
  .clinic-pill-jp--short,
  .clinic-pill-jp--long {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

/* telefon – 1 w rzędzie */
@media (max-width: 640px) {
  .clinic-pill-jp--short,
  .clinic-pill-jp--long {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* tekst w pigułce */
.clinic-pill-jp__label {
  flex: 1;
  font-family: 'Satoshi', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 110%; /* 18px */
  color: #283896;
  text-align: left;
}

/* plus – to co masz teraz, tylko tekstowy */
.clinic-pill-jp__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: #9F68E4;
  margin-left: 12px;
}

/* hover / active / focus */
.clinic-pill-jp:hover {
  border-color: #9F68E4;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(27, 6, 72, 0.10);
}

.clinic-pill-jp:active {
  transform: translateY(1px);
}

.clinic-pill-jp:focus-visible {
  outline: 2px solid #9F68E4;
  outline-offset: 3px;
}


/* ============================================================
   POPUP — WARSTWA ZEWNĘTRZNA
   ============================================================ */
.clinic-modal-jp {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 99999;
}

.clinic-modal-jp[aria-hidden="true"] { display: none; }

.clinic-modal-jp__dialog {
    position: relative;
    width: 900px;
    background: #fff;
    padding: 24px;
    border-radius: 36px;

    box-shadow:
        0px 1px 4px rgba(12, 12, 13, 0.10),
        0px 1px 4px rgba(12, 12, 13, 0.05);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Wysokość zależna od typu layoutu (jedna/dwie kolumny) */
.cm-layout-one .clinic-modal-jp__dialog {
    height: 621px;
}

.cm-layout-two .clinic-modal-jp__dialog {
    height: 802px;
}

/* ============================================================
   X — PRZYCISK ZAMYKANIA
   ============================================================ */
.clinic-modal-jp__close {
    width: 20px;
    height: 20px;
    margin: -30px 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.clinic-modal-jp__close svg path {
    stroke: #9F68E4;
    stroke-width: 1.66px;
}

/* ============================================================
   KONTENER GŁÓWNY
   ============================================================ */
.clinic-modal-jp__content {
    width: 852px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================================
   NAGŁÓWEK (Frame 1049 + Frame 45)
   ============================================================ */
.cm-jp-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-jp-title {
    font-family: 'Satoshi';
    font-size: 36px;
    font-weight: 500;
    color: #283896;
    line-height: 110%;
}

.cm-jp-sub {
    font-family: 'Satoshi';
    font-size: 16px;
    font-weight: 500;
    color: #8849D4;
    line-height: 110%;
}

/* BADGES (NFZ / PRYWATNE) */
.cm-jp-badges {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.cm-jp-badge {
    padding: 4px 12px 6px;
    border-radius: 24px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Satoshi';
    line-height: 14px;
}

.cm-jp-badge--green {
    background: #DFF7F3;
    border-color: #0CA78B;
    color: #097662;
}

.cm-jp-badge--private {
    background: #FEEDF9;
    border-color: #E066BD;
    color: #A53886;
}

/* ============================================================
   KOLUMNY — GÓRNY GRID
   ============================================================ */
.cm-jp-cols-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cm-jp-col h4 {
    font-family: 'Satoshi';
    font-size: 16px;
    font-weight: 500;
    color: #283896;
    line-height: 110%;
    margin-bottom: 6px;
}

.cm-jp-col p,
.cm-jp-col ul,
.cm-jp-col div {
    font-family: 'Satoshi';
    font-size: 12px;
    line-height: 140%;
    color: #3D3D3D;
}

/* ============================================================
   KOLUMNY — DOLNY GRID
   ============================================================ */
.cm-jp-cols-bottom {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
}

.cm-jp-hours p {
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #283896;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}

.cm-jp-contact img {
    width: 16px;
    height: 16px;
}

.cm-jp-contact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-jp-contact span {
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #283896;
}

/* ============================================================
   PRZYCISK WYPEŁNIJ FORMULARZ
   ============================================================ */
.cm-jp-actions {
    width: 100%;
}

.cm-jp-form {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #283896;
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    gap: 6px;
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 110%;
    width: 100%;
    text-decoration: none;
}



/* ============================================================
   POPUP — WARSTWA ZEWNĘTRZNA
   ============================================================ */
.clinic-modal-jp {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    z-index: 99999;
}

.clinic-modal-jp[aria-hidden="true"] { display: none; }

.clinic-modal-jp__dialog {
    position: relative;
    width: 900px;
    background: #fff;
    padding: 24px;
    border-radius: 36px;

    box-shadow:
        0px 1px 4px rgba(12, 12, 13, 0.10),
        0px 1px 4px rgba(12, 12, 13, 0.05);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Wysokość zależna od typu layoutu (jedna/dwie kolumny) */
.cm-layout-one .clinic-modal-jp__dialog {
    height: 621px;
}

.cm-layout-two .clinic-modal-jp__dialog {
    height: 802px;
}

/* ============================================================
   X — PRZYCISK ZAMYKANIA
   ============================================================ */
.clinic-modal-jp__close {
    width: 20px;
    height: 20px;
    margin: -30px 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.clinic-modal-jp__close svg path {
    stroke: #9F68E4;
    stroke-width: 1.66px;
}

/* ============================================================
   KONTENER GŁÓWNY
   ============================================================ */
.clinic-modal-jp__content {
    width: 852px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================================
   NAGŁÓWEK (Frame 1049 + Frame 45)
   ============================================================ */
.cm-jp-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-jp-title {
    font-family: 'Satoshi';
    font-size: 36px;
    font-weight: 500;
    color: #283896;
    line-height: 110%;
}

.cm-jp-sub {
    font-family: 'Satoshi';
    font-size: 16px;
    font-weight: 500;
    color: #8849D4;
    line-height: 110%;
}

/* BADGES (NFZ / PRYWATNE) */
.cm-jp-badges {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.cm-jp-badge {
    padding: 4px 12px 6px;
    border-radius: 24px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Satoshi';
    line-height: 14px;
}

.cm-jp-badge--green {
    background: #DFF7F3;
    border-color: #0CA78B;
    color: #097662;
}

.cm-jp-badge--private {
    background: #FEEDF9;
    border-color: #E066BD;
    color: #A53886;
}

/* ============================================================
   KOLUMNY — GÓRNY GRID
   ============================================================ */
.cm-jp-cols-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cm-jp-col h4 {
    font-family: 'Satoshi';
    font-size: 16px;
    font-weight: 500;
    color: #283896;
    line-height: 110%;
    margin-bottom: 6px;
}

.cm-jp-col p,
.cm-jp-col ul,
.cm-jp-col div {
    font-family: 'Satoshi';
    font-size: 12px;
    line-height: 140%;
    color: #3D3D3D;
}

/* ============================================================
   KOLUMNY — DOLNY GRID
   ============================================================ */
.cm-jp-cols-bottom {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
}

.cm-jp-hours p {
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #283896;
    letter-spacing: 0.01em;
    margin: 0 0 4px;
}

.cm-jp-contact img {
    width: 16px;
    height: 16px;
}

.cm-jp-contact {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cm-jp-contact span {
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #283896;
}

/* ============================================================
   PRZYCISK WYPEŁNIJ FORMULARZ
   ============================================================ */
.cm-jp-actions {
    width: 100%;
}

.cm-jp-form {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #283896;
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    gap: 6px;
    font-family: 'Satoshi';
    font-size: 14px;
    font-weight: 500;
    line-height: 110%;
    width: 100%;
    text-decoration: none;
}





/* === PODSTAWY MODALA === */

.clinic-modal-jp {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.clinic-modal-jp[aria-hidden="false"] {
  display: flex;
}

/* tło */
.clinic-modal-jp__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

/* pudełko z treścią – odpowiednik Frame 70 */
.clinic-modal-jp__dialog {
  position: relative;
  width: 900px;
  max-width: 100%;
  max-height: 700px;            /* limit wysokości okna */
  background: #FFFFFF;
  box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.1),
              0px 1px 4px rgba(12, 12, 13, 0.05);
  border-radius: 36px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;        /* jak w Figma */
  overflow: hidden;             /* scroll tylko wewnątrz contentu */
}

/* zawartość, która się scrolluje */
.clinic-modal-jp__content {
  width: 100%;
  max-height: calc(700px - 48px); /* 700 - padding góra/dół */
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

/* === PRZYCISK ZAMKNIĘCIA (X) === */

.clinic-modal-jp__close {
  position: absolute;
  top: 44px;
  right: 24px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 15;
}

.clinic-modal-jp__close svg {
  width: 20px;
  height: 20px;
}

.clinic-modal-jp__close path {
  stroke: #9F68E4;
}

/* === NAGŁÓWEK POPUPA === */

.cm-jp-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.cm-jp-title {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: #283896;
}

.cm-jp-sub {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: #8849D4;
}

/* badże NFZ / prywatne */
.cm-jp-badges {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-top: 4px;
}

.cm-jp-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 6px;
  gap: 10px;
  border-radius: 24px;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
}

.cm-jp-badge--green {
  background: #DFF7F3;
  border: 1px solid #0CA78B;
  color: #097662;
}

.cm-jp-badge--private {
  background: #FEEDF9;
  border: 1px solid #E066BD;
  color: #A53886;
}

/* === GRIDY – UKŁAD JEDNO- I DWUKOLUMNOWY === */

/* wspólny wrapper dla sekcji */
.cm-jp-cols {
  width: 100%;
}

/* domyślnie jedna kolumna – layout "one" */
.cm-layout-one .cm-jp-cols-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* layout "two" – 2 kolumny jak w Figma (2x2) */
.cm-layout-two .cm-jp-cols-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
}

.cm-jp-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* nagłówki sekcji H4 */
.cm-jp-col h4 {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: #283896;
  margin: 0;
}

/* tekst sekcji – caption */
.cm-jp-col p,
.cm-jp-col li,
.cm-jp-col div {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #3D3D3D;
}

/* listy w treści */
.cm-jp-col ul {
  padding-left: 18px;
  margin: 0;
}

/* dolny grid: Obsługa klientów + Dane kontaktowe – zawsze 2 kolumny */
.cm-jp-cols-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  margin-top: 24px;
}

/* nagłówki h3 w dolnym gridzie */
.cm-jp-cols-bottom h3 {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.4;
  color: #283896;
  margin: 0 0 12px;
}

/* godziny otwarcia */
.cm-jp-hours p {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #283896;
  margin: 0 0 4px;
}

/* kontakt – phone/email w dwóch wierszach */
.cm-jp-contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cm-jp-contact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #283896;
}

/* przycisk "Wypełnij formularz" – dolny pasek */
.cm-jp-actions {
  width: 100%;
  margin-top: 24px;
}

.cm-jp-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 24px;
  background: #283896;
  color: #ffffff;
  text-decoration: none;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
}

/* RESPONSYWNOŚĆ – poniżej ~960px modal zwęża się, ale układ zostaje */
@media (max-width: 960px) {
  .clinic-modal-jp__dialog {
    width: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 720px) {
  .cm-layout-two .cm-jp-cols-main,
  .cm-jp-cols-bottom {
    grid-template-columns: minmax(0, 1fr); /* na małych ekranach robi się jedna kolumna */
  }
}


/* --- INTRO (Charakterystyka świadczonych usług) wg Figmy --- */

.placowki-jp__header {
  max-width: 1128px;          /* szerokość ramki z Figmy */
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  justify-content: center;    /* centrum ramki */
}

/* wewnętrzna kolumna 700px – oba elementy (h2 + treść) */
.placowki-jp__header > * {
  max-width: 700px;
  width: 100%;
}

/* tytuł */
.placowki-jp__header h2 {
  margin: 0 0 12px;           /* gap 12px z Figmy */
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 21px;
  line-height: 140%;
  color: #283896;
}

/* treść pod tytułem */
.placowki-jp__intro {
  margin: 0;
  font-family: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 14px;
  line-height: 160%;
  color: #3D3D3D;
}

/* akapity i listy w treści */
.placowki-jp__intro p {
  margin: 0 0 8px;
}

.placowki-jp__intro ul {
  margin: 0 0 8px 1.2rem;
  padding-left: 1.2rem;
}

.placowki-jp__intro li {
  margin-bottom: 4px;
}

/* RWD – na mniejszych ekranach po prostu pełna szerokość */
@media (max-width: 991px) {
  .placowki-jp__header {
    padding: 24px 16px;
  }

  .placowki-jp__header > * {
    max-width: 100%;
  }
}



/* === Sekcja Poznaj / O nas – mod-poznaj1 === */

.mod-poznaj1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 0 24px;
  margin-bottom: -30px
}

.mod-poznaj1__inner {
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* wiersz: obraz + tekst */
.mod-poznaj1__row {
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
  gap: 72px;
}

/* lewa kolumna – obraz */
.mod-poznaj1__image-wrap {
  width: 550px;
  height: 350px;
  border-radius: 24px;
  overflow: hidden;
  flex: 0 0 auto;
}

.mod-poznaj1__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* prawa kolumna – tekst */
.mod-poznaj1__content {
  width: 506px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
}

.mod-poznaj1__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-top: -35px;
}

/* Nagłówek – Historia Przychodni */
.mod-poznaj1__title {
  width: 100%;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1; /* 110% */
  color: #283896;
 
}

/* Treść */
.mod-poznaj1__text {
  width: 100%;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4; /* 140% ≈ 20px */
  letter-spacing: 0.01em;
  color: #3D3D3D;
  margin-top: -30px;
}

.mod-poznaj1__text p {
  margin: 0 0 12px;
}

.mod-poznaj1__text p:last-child {
  margin-bottom: 0;
}

/* Responsywność – pod mniejsze ekrany ułóż w kolumnę */
@media (max-width: 900px) {
  .mod-poznaj1__row {
    flex-direction: column;
    gap: 24px;
  }

  .mod-poznaj1__image-wrap,
  .mod-poznaj1__content {
    width: 100%;
  }
}


/* === Sekcja Poznaj – mod-poznaj2 (Naszą misją jest...) === */

.mod-poznaj2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.mod-poznaj2__inner {
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wiersz: tekst lewo, obraz prawo */
.mod-poznaj2__row {
  width: 100%;
  max-width: 1128px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  gap: 72px;
}

/* Tekst po lewej */
.mod-poznaj2__content {
  width: 506px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
}

.mod-poznaj2__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Nagłówek */
.mod-poznaj2__title {
  width: 100%;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1; /* 110% */
  color: #283896;
  margin: 0;
}

/* Treść */
.mod-poznaj2__text {
  width: 100%;
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4; /* 140% ≈ 20px */
  letter-spacing: 0.01em;
  color: #3D3D3D;
  margin-top: -30px;
}

.mod-poznaj2__text p {
  margin: 0 0 12px;
}

.mod-poznaj2__text p:last-child {
  margin-bottom: 0;
}

/* Obraz po prawej */
.mod-poznaj2__image-wrap {
  width: 550px;
  height: 350px;
  border-radius: 24px;
  overflow: hidden;
  flex: 0 0 auto;
}

.mod-poznaj2__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsywność */
@media (max-width: 900px) {
  .mod-poznaj2__row {
    flex-direction: column;
    gap: 24px;
  }

  .mod-poznaj2__content,
  .mod-poznaj2__image-wrap {
    width: 100%;
  }
}




/* === Diagnostyka – sekcja z trzema boksami === */

.diagnostykapodzial {
  display: flex;
  justify-content: center;
  padding: 12px 0 64px;
}

.diagnostykapodzial__inner {
  width: 100%;
  max-width: 1128px;      /* szerokość z Figma */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* blok tytuł + opis */

.diagnostykapodzial__intro {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.diagnostykapodzial__title {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  color: #283896;
  margin: 0;
}

.diagnostykapodzial__desc {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(40, 56, 150, 0.75);
}

/* lista przycisków */

.diagnostykapodzial__buttons {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.diagnostykapodzial__btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  width: 100%;
  background: #ffffff;
  border: 1.4px solid #9f68e4;
  border-radius: 24px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.diagnostykapodzial__btn-inner {
  width: 100%;
  max-width: 488px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.diagnostykapodzial__btn-label {
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  color: #283896;
}

.diagnostykapodzial__btn-icon svg {
  display: block;
}

/* hover (możesz dopasować do obecnych przycisków na stronie) */
.diagnostykapodzial__btn:hover {
  background-color: #f7f2ff;
  box-shadow: 0 2px 8px rgba(12, 12, 13, 0.12);
  transform: translateY(-1px);
}

/* RWD */

@media (max-width: 767px) {
  .diagnostykapodzial {
    padding: 24px 16px 48px;
  }

  .diagnostykapodzial__inner {
    align-items: stretch;
  }

  .diagnostykapodzial__intro,
  .diagnostykapodzial__buttons {
    max-width: 100%;
  }

  .diagnostykapodzial__title {
    font-size: 28px;
  }

  .diagnostykapodzial__btn-label {
    font-size: 18px;
  }
}

.mod-podstawagora__subtext {
    max-width: 700px;
    font-family: 'Satoshi', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: rgba(40, 56, 150, 0.75);
    margin: 12px 0 28px;
}



.topnav-mobile.mobileon {
  display: none;
}