@import "reset.css";
@import "editor.css";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

body {
  --main-theme-color: #003b95;
  --main-theme-color-light: #3379e3;
  --secondary-theme-color: #b69d75;
  --base-font-color: var(--main-theme-color);
  --section-background: #d7e3f7;
  --radius: 8px;
  /* Single source of truth for card inner padding + corner radius. Every card
     (home sliders, search results) references these so they never drift.
     Overridden once for mobile in the 768px block. */
  --card-pad: 22px;
  --card-radius: 18px;
  --font: "Poppins", sans-serif;
  --white-filter: brightness(0) invert(1);
  --main-theme-color-filter: brightness(0) saturate(100%) invert(10%) sepia(93%) saturate(3945%) hue-rotate(210deg) brightness(103%) contrast(103%);
  --secondary-theme-color-filter: brightness(0) saturate(100%) invert(72%) sepia(16%) saturate(692%) hue-rotate(358deg) brightness(86%) contrast(87%);
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  font-family: var(--font);
  font-weight: 400;
  color: var(--base-font-color);
}

button {
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.wrapper {
  width: 96%;
  padding: 0 2%;
  max-width: 1400px;
  margin: 0 auto;
  clear: both;
}

/* Static / CMS content: roomier reading line-height, tight heading-to-body
   spacing, larger gaps at the bottom of each section. */
.ed {
  line-height: 1.7;
}

.ed p,
.ed li {
  margin-bottom: 15px;
  line-height: 1.7;
}

.ed h1,
.ed h2,
.ed h3,
.ed h4 {
  line-height: 1.25;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.ed h1:first-child,
.ed h2:first-child,
.ed h3:first-child {
  margin-top: 0;
}

a {
  color: var(--main-theme-color);
}

* {
  line-height: 1.25em;
}

.hidden {
  display: none !important;
}

/* header */

header {
  padding: 25px 0;
  background: var(--main-theme-color);
  margin-bottom: 75px;
}

header,
header a {
  color: #fff;
}

header>.wrapper {
  display: grid;
  grid-template-areas: "logo ctalinks helpbox userbox menu";
  grid-template-columns: 1fr auto auto auto auto auto;
  grid-auto-columns: min-content;
  gap: 10px;
  align-items: center;
}

.logo {
  grid-area: logo;
}

/* Desktop logo at its natural size (the global img{max-width:100%} otherwise
   shrinks it inside its grid cell). Mobile header uses its own logo. */
.logo img {
  max-width: none;
  height: 39px;
  width: auto;
}

.cta-links {
  grid-area: ctalinks;
  padding-right: 24px;
  display: flex;
  gap: 22px;
}

.cta-links>a,
.cta-links button {
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.cta-links>a:hover {
  color: var(--secondary-theme-color);
}

.cta-links button::after {
  content: "";
  background: url(img/bullet.svg) no-repeat center center;
  background-size: 100% 100%;
  margin-left: 13px;
  width: 12px;
  height: 6px;
  display: inline-block;
  vertical-align: middle;
  filter: var(--secondary-theme-color-filter);
  transition: transform 0.2s ease;
}

.cta-links button:hover,
.cta-links .popup-menu.open button {
  color: var(--secondary-theme-color);
}

.cta-links .popup-menu.open button::after {
  transform: rotate(180deg);
}

.cta-links .popup-menu {
  position: relative;
}

.cta-links .user-menu {
  min-width: 180px;
}

.cta-box button,
.user-box button {
  padding: 0 26px !important;
}

header button {
  white-space: nowrap;
}

.popup-menu {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: -14px;
}

.user-box {
  position: relative;
}

.user-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -8px);
  background: var(--main-theme-color-light);
  padding: 20px 25px;
  color: #fff;
  z-index: 60;
  border-radius: 20px;
  font-size: 1em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.user-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--main-theme-color-light);
  border-radius: 3px;
  transform: rotate(45deg);
}

.popup-menu.open .user-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.user-box .user-menu {
  left: auto;
  right: 0;
  transform: translateY(-8px);
}

.user-box .user-menu::before {
  left: auto;
  right: 24px;
  margin-left: 0;
}

.user-box .popup-menu.open .user-menu {
  transform: translateY(0);
}

.user-menu div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  grid-auto-columns: min-content;
  align-items: center;
  margin-bottom: 20px;
}

.user-menu img,
.user-menu .avatar-placeholder {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf1fb;
  color: var(--secondary-theme-color);
  box-sizing: border-box;
}

.avatar-placeholder svg {
  width: 60%;
  height: 60%;
}

.user-menu span {
  font-weight: bold;
  line-height: 15px;
}

.user-menu li {
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
  margin-bottom: 10px;
}

.user-menu li:last-child {
  padding-bottom: 0;
  border-bottom: 0 none;
  margin-bottom: 0;
}

.user-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.user-box-button {
  position: relative;
  display: inline-block;
}

.user-box-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}

.menu button {
  display: flex;
  width: 35px;
  height: 35px;
  justify-content: center;
  align-items: center;
  background: var(--secondary-theme-color);
  border-radius: 50%;
}

.menu button img {
  width: 16px;
  height: 16px;
}

/*header end */

/* footer */

footer {
  background: var(--main-theme-color);
  margin-top: 80px;
  padding: 70px 0;
}

footer>.wrapper {
  display: flex;
  gap: 40px 105px;
  justify-content: space-between;
}

footer,
footer a {
  color: #fff;
}

footer section li {
  margin-bottom: 15px;
  font-size: 0.875em;
}

/* Keep all four column headings ("Menu"/"Serwis" vs "Kontakt"/"Dane spółki")
   the same size — the menu headings sit at the footer's 1em base while the
   contact headings inherit the box's 0.875em, so pin an absolute size.
   Module classes are hashed (_section-headline_x), so match via [class*=]. */
footer [class*="section-headline"] {
  font-size: 1.5rem !important;
}

/* Match the contact column's line rhythm to the menu columns (same interline
   + same 0.875em body): the .ed defaults to line-height 1.7, menu links 1.25. */
footer section li,
footer .ed,
footer .ed p,
footer .ed li {
  line-height: 1.5;
}

.contact-box {
  padding-left: 60px;
  border-left: 1px solid #1e61c6;
  display: grid;
  grid-template-areas:
    "heading heading2 blank"
    "content content2 content3"
    "socials socials notice";
  gap: 20px 50px;
  font-size: 0.875em;
}

.contact-box>p:first-of-type {
  grid-area: heading;
  margin-bottom: 15px;
}

.contact-box>p:nth-of-type(2) {
  grid-area: heading2;
  margin-bottom: 15px;
}

.contact-box div:first-of-type {
  grid-area: content;
}

.contact-box div:nth-of-type(2) {
  grid-area: content2;
}

.contact-box div:nth-of-type(3) {
  grid-area: content3;
}

.socials {
  grid-area: socials;
}

.contact-box div:nth-of-type(5) {
  grid-area: notice;
  max-width: 200px;
}

.copyrights {
  padding: 30px 0;
  font-size: 0.75em;
  display: flex;
  justify-content: space-between;
}

/* footer end */

/* form */

.std-form,
.grid-form {
  max-width: 710px;
  display: block;
  width: 96%;
  padding: 0 2%;
  margin: 0 auto;
}

.placeholder-form .std-form {
  width: 100%;
  padding: 0;
  max-width: 100%;
}

.std-form>li {
  margin-bottom: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  position: relative;
}

.std-form>li>label {
  text-align: right;
  height: 100%;
  font-size: 0.875em;
  width: 31%;
  margin-right: 10px;
  line-height: 35px;
}

.placeholder-form .std-form>li>label {
  display: none;
}

.placeholder-form .std-form>li.starrating>label {
  display: inline-block;
  width: auto;
  text-align: left;
}

.std-form>.hourrange>label {
  line-height: 18px;
}

.std-form .field-container {
  width: calc(69% - 10px);
  position: relative;
}

.std-form input[type="checkbox"],
.std-form input[type="radio"] {
  display: none;
}

.std-form input[type="checkbox"]+label,
.std-form input[type="radio"]+label {
  float: left;
  line-height: 18px;
  padding: 8px 0;
  position: relative;
  font-size: 0.75em;
}

.std-form input[type="radio"]+label {
  line-height: 35px;
  padding: 0;
}

/* Agreement checkboxes ("Zapoznałem się…"): lay the box and the label text
   as two columns so long consent text wraps in its own column to the right
   of the toggle instead of flowing underneath it. */
.std-form input[type="checkbox"]+label {
  display: flex;
  align-items: flex-start;
  float: none;
  width: 100%;
}

.std-form input[type="checkbox"]+label::before {
  flex-shrink: 0;
}

.std-form input[type="checkbox"]+label::before,
.std-form input[type="radio"]+label::before {
  content: "";
  background: var(--section-background);
  width: 18px;
  height: 18px;
  position: relative;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  box-sizing: border-box;
}

.std-form input[type="checkbox"]+label::before {
  border: 2px solid var(--main-theme-color);
  border-radius: 4px;
  background: #fff;
}

.std-form input[type="radio"]:checked+label::after {
  content: "";
  position: absolute;
  background: var(--main-theme-color);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 13px;
  left: 4px;
  z-index: 1;
}

.std-form input[type="checkbox"]:checked+label::before {
  background: var(--main-theme-color);
}

.std-form input[type="checkbox"]:checked+label::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 5px;
  width: 8px;
  height: 4px;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  z-index: 1;
}

.std-form label+input[type="radio"]+label {
  margin-left: 10px;
}

.placeholder-form .std-form .starrating .field-container {
  width: auto;
  padding-top: 10px;
}

.placeholder-form .std-form .field-container {
  width: 100%;
}

.std-form input[type="text"],
.std-form input[type="password"],
.std-form input[type="date"],
.std-form select,
.std-form textarea {
  background: var(--section-background);
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 5px;
  color: var(--base-font-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.std-form input[type="text"]:focus,
.std-form input[type="password"]:focus,
.std-form input[type="date"]:focus,
.std-form select:focus,
.std-form textarea:focus {
  outline: none;
  border-color: var(--main-theme-color);
  box-shadow: 0 0 0 3px rgba(0, 59, 149, 0.12);
}

.std-form input.invalid,
.login-form input.invalid {
  border-color: #bf0000;
  background-color: #fdf0f0;
}

.std-form input.invalid:focus,
.login-form input.invalid:focus {
  box-shadow: 0 0 0 3px rgba(191, 0, 0, 0.12);
}

.std-form input.valid {
  border-color: #5ba500;
}

.std-form input.valid:focus {
  box-shadow: 0 0 0 3px rgba(91, 165, 0, 0.12);
}

.password-field {
  position: relative;
  display: inline-block;
}

.login-form li:nth-child(2) .password-field {
  display: block;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  padding-right: 36px;
}

.toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0 none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--main-theme-color);
  opacity: 0.6;
}

.toggle-password:hover {
  opacity: 1;
}

.std-form textarea {
  width: 100%;
  height: 150px;
  padding: 5px 10px;
}

.std-form input[type="text"],
.std-form input[type="password"],
.std-form input[type="date"],
.std-form select {
  width: 310px;
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
}

.std-form select.day,
.std-form select.year {
  width: 85px;
}

.std-form select.month {
  width: 140px;
}

.std-form select.day,
.std-form select.month {
  margin-right: 8px;
}

.std-form .submit-box {
  padding-left: calc(31% + 10px);
}

.placeholder-form .std-form .submit-box {
  padding-left: 0;
}

.std-form .submit-box button {
  font-weight: 600;
  color: #fff;
  border-radius: 20px;
  height: 35px;
  line-height: 35px;
  background: var(--secondary-theme-color);
  display: inline-block;
  width: auto;
  padding: 0 20px;
}

.std-form .submit-box button::after {
  content: "";
  width: 10px;
  height: 5px;
  background: url("img/bullet.svg") no-repeat center center;
  background-size: 100%;
  display: inline-block;
  margin-left: 10px;
  transform: rotate(270deg);
  filter: var(--white-filter);
  vertical-align: middle;
}

.std-form .hourrange span {
  background: var(--section-background);
  float: left;
  position: relative;
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border-radius: 5px 0 0 5px;
  margin-right: -10px;
  font-size: 0.6875em;
}

.std-form .hourrange select {
  width: 75px !important;
  margin-right: 10px;
  float: left;
}

.button-label {
  background: var(--secondary-theme-color);
  color: #fff;
  border-radius: 20px;
  padding: 0 20px;
  line-height: 35px;
  height: 35px;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.button-label+input {
  display: none;
}

.filter-form {
  margin-bottom: 50px;
}

.filter-form .std-form {
  display: flex;
  justify-content: space-between;
  max-width: none;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}

.filter-form .std-form li {
  display: flex;
}

.filter-form .std-form label,
.filter-form .field-container {
  display: inline-block;
  width: auto;
}

.filter-form .std-form input[type="text"],
.filter-form .std-form select {
  max-width: 200px;
  width: auto;
}

.filter-form .std-form input[type="date"] {
  width: 120px;
}

.filter-form .std-form .submit-box {
  margin-left: auto;
}

.filter-form .daterange span {
  margin: 0 5px;
  line-height: 35px;
}

.filter-form .std-form .submit-box .button {
  height: 30px;
  line-height: 30px;
  font-size: 0.75em;
}

.filter-form .std-form .submit-box .button::after {
  display: none;
}

.grid-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-columns: min-content;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}

.grid-form div {
  text-align: center;
}

.grid-form label {
  display: block;
  text-align: right;
}

.grid-form+.submit-box {
  text-align: center;
}

.autocomplete-suggestions {
  position: absolute;
  background: #fff;
  width: 100%;
  z-index: 20;
  font-size: 0.8em;
  color: var(--base-font-color);
  top: 38px;
  border: 1px solid #d4d9e0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.autocomplete-suggestions span {
  display: block;
  cursor: pointer;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f2f5;
}

.autocomplete-suggestions span:last-child {
  border-bottom: none;
}

.autocomplete-suggestions span:hover {
  background: var(--section-background);
}

.button-label+.bordered-section {
  margin-top: 5px;
}

.bordered-section {
  padding: 15px 20px 15px 120px;
  border: 1px solid var(--secondary-theme-color);
  border-radius: 10px;
}

.facilityselection .std-form {
  margin-bottom: 0;
}

.facilityselection .std-form .submit-box {
  padding-left: 0;
}

.facilityselection .std-form label {
  width: 90px;
  margin-left: -100px;
}

.facilityselection .bordered-section p {
  margin: 20px 0 10px;
  font-size: 0.875em;
  font-weight: 500;
}

.suggested-facility {
  background: var(--main-theme-color);
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  display: block;
  margin-right: 1%;
  margin-bottom: 20px;
  cursor: pointer;
}

.facility-item {
  border-radius: 10px;
  border: 2px solid var(--main-theme-color);
  display: block;
  margin-top: 20px;
  position: relative;
}

.button+.facility-item {
  clear: both;
}

.facility-item p {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.facility-item p * {
  padding: 10px;
}

.facility-item p:first-of-type * {
  padding-top: 20px;
}

.facility-item p:last-of-type * {
  padding-bottom: 20px;
}

.facility-item p strong {
  background: var(--main-theme-color);
  color: #fff;
  font-size: 0.75em;
  text-align: right;
}

.facility-item p span {
  font-size: 0.875em;
}

.facility-item button {
  cursor: pointer;
  border: 0 none;
  padding: 5px;
  margin: 0;
  position: absolute;
  top: 5px;
  right: 5px;
}

.facility-item button::before {
  content: "x";
  color: #666;
}

.facility-item .logo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  overflow: hidden;
}

.facility-item .logo img,
.facility-item .logo .avatar-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facility-item .logo .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--section-background);
  color: var(--main-theme-color);
  box-sizing: border-box;
  padding: 6px;
}

.searchable-select {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--section-background);
  border-radius: 5px;
}

.searchable-select>span {
  padding: 3px 15px;
  color: #fff;
  background: var(--main-theme-color);
  border-radius: 20px;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 19px;
}

.searchable-select>span label {
  display: inline;
}

.searchable-select>span button {
  display: inline;
  border: 0 none;
  background: none;
  color: #fff;
  padding: 0;
  margin: 0 0 0 10px;
}

.searchable-select>span button::before {
  content: "x";
}

.searchable-select input {
  border: 0 none !important;
  padding: 0 !important;
  outline: none;
  height: 25px !important;
  line-height: 25px !important;
  width: auto !important;
}

/* --- Chip option list (specializations / services) --- */
.chip-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.chip-select-filter {
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #d4d9e0;
  border-radius: 6px;
  background: #fff;
  outline: none;
}

.chip-select-filter:focus {
  border-color: var(--secondary-theme-color);
}

.chip-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid #d4d9e0;
  border-radius: 20px;
  background: #fff;
  color: #374151;
  font-size: 0.78em;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chip:hover {
  border-color: var(--secondary-theme-color);
}

.chip.selected {
  background: var(--main-theme-color);
  border-color: var(--main-theme-color);
  color: #fff;
}

.chip.selected::before {
  content: "\2713";
  margin-right: 6px;
  font-weight: 700;
}

.dateselect select {
  display: inline-block;
  margin-right: 5px;
}

.dateselect .day {
  width: 55px !important;
}

.dateselect .month {
  width: 110px !important;
}

.dateselect .year {
  width: 70px !important;
}

.multiupload .images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 2%;
  margin-bottom: 20px;
}

.multiupload .images div {
  position: relative;
  width: 23.5%;
}

.multiupload .images div:not(.dragged) img,
.multiupload .images div:not(.dragged) input {
  position: relative;
  z-index: 1;
}

.multiupload .images div img {
  display: block;
  width: 100%;
  margin-bottom: 5px;
}

.multiupload .uploads {
  clear: both;
}

.multiupload .uploads>div {
  float: left;
  margin-bottom: 10px;
  width: 100%;
}

.multiupload .uploads div span {
  padding: 2px 0;
  width: 30%;
  margin-right: 20px;
  float: left;
  line-height: 20px;
}

.progress-bar {
  width: 100%;
  max-width: 300px;
  background: #eaeaea;
  border-radius: 6px;
  overflow: hidden;
  height: 12px;
  margin: 10px 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar>div {
  height: 100%;
  background-color: var(--main-theme-color);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: progress-stripes 1s linear infinite;
  border-radius: 6px;
  color: transparent;
  font-size: 0;
  transition: width 0.3s ease;
}

@keyframes progress-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.file-close {
  display: inline-block;
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 15px;
  transition: all 0.2s;
}

.file-close:hover {
  background: #f5f5f5;
  border-color: #999;
}

.multiupload .progress-bar {
  float: left;
  width: calc(70% - 20px);
}

.multiupload .title-toggle {
  border: 0 none;
  padding: 0;
  margin-top: 10px;
  display: inline;
  font-weight: bold;
  color: var(--main-color);
}

.multiupload .close {
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 2px;
  color: var(--main-color);
  box-shadow: 3px 3px 13px 0px #000;
  width: 20px;
  height: 20px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  line-height: 20px !important;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.multiupload .close::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("img/close.svg") no-repeat center center;
  background-size: 100%;
  filter: var(--main-theme-color-filter);
}

.checklist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 2%;
}

.checklist li {
  width: 49%;
}

/* form end */

/* slider */

.arrow-slider {
  position: relative;
  padding: 0 112px;
}

.arrow-slider .nav button {
  position: absolute;
  background: var(--secondary-theme-color);
  width: 54px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.arrow-slider .nav button:first-child {
  left: -10px;
}

.arrow-slider .nav button:last-child {
  right: -10px;
}

.arrow-slider .nav button::before {
  width: 12px;
  height: 7px;
  content: "";
  background: url("img/bullet.svg") no-repeat center center;
  filter: var(--white-filter);
}

.arrow-slider .nav button:first-child::before {
  transform: rotate(90deg);
}

.arrow-slider .nav button:last-child::before {
  transform: rotate(270deg);
}

/* slider end */

/* home */

.welcome-screen {
  margin-top: -75px;
  margin-bottom: 60px;
  position: relative;
}

/* Breadcrumbs band --------------------------------------------------
   The breadcrumb is main's first child. When it is immediately followed
   by a blue PageSection it sits on the same section background and tucks
   under the header / sticky search bar (it took over the section's old
   :first-child tuck). On pages with no following section it stays
   transparent on the white page background. */
.breadcrumbs-bar:has(+ section),
.breadcrumbs-bar:has(+ .register-card) {
  background: var(--section-background);
}

/* Tuck the breadcrumb up flush under the search bar on every page (cancels the
   bar's bottom margin). Tuck matches the bar margin per breakpoint so the crumb
   touches the bar exactly. The crumb's own symmetric 24px padding then gives an
   equal gap above and below the text. */
.sticky-search-bar + main > .breadcrumbs-bar:first-child {
  margin-top: -30px;
}

header + main > .breadcrumbs-bar:first-child {
  margin-top: -75px;
}

/* The blue wrapper drops its own tuck + top padding; the crumb's bottom padding
   supplies the gap down to its content. */
.breadcrumbs-bar + section,
.breadcrumbs-bar + .register-card {
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 1280px) {
  .sticky-search-bar + main > .breadcrumbs-bar:first-child {
    margin-top: -20px;
  }
}

.top-banner {
  position: relative;
}

.top-banner>img {
  display: block;
  object-position: center;
  object-fit: cover;
  width: 100%;
  max-height: 535px;
}

.top-banner .wrapper div {
  position: absolute;
  z-index: 1;
  padding-left: 20px;
  top: 90px;
}

.top-banner .wrapper div p {
  font-weight: 200;
  font-size: 2.375em;
  margin-bottom: 5px;
  color: #fff;
  margin-bottom: 10px;
  margin-left: 75px;
}

.top-banner a {
  margin-left: 75px;
}

.home-sections section {
  padding: 40px 0;
}

.home-sections section:nth-child(odd) {
  background: var(--section-background);
}

.infographics {
  display: flex;
  justify-content: space-between;
}

.infographics li {
  text-align: center;
}

.infographics img {
  display: inline-block;
  margin-bottom: 30px;
  width: 80px;
}

.infographics span {
  display: block;
  font-weight: bold;
}

/* home end */

/* search */

.search-container {
  background: rgba(0, 59, 149, 0.8);
  position: absolute;
  top: 245px;
  z-index: 1;
  padding: 25px 20px;
  border-radius: 15px;
  box-sizing: border-box;
  width: 51%;
  margin-left: 75px;
}

.search-container form ul {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-auto-columns: min-content;
  gap: 1px;
}

.search-container form li {
  position: relative;
}

.search-container input {
  background: #fff;
  color: var(--main-theme-color);
  height: 47px;
  line-height: 47px;
  padding: 0 20px;
  border: 0 none;
  width: 100%;
  box-sizing: border-box;
}

.search-container input::placeholder {
  color: var(--main-theme-color);
}

.search-container form li:first-child input {
  border-radius: 15px 0 0 15px;
}

.search-container form li:nth-child(2) input {
  border-radius: 0 15px 15px 0;
}

.search-container .submit-box {
  padding-left: 9px;
}

.search-container button {
  background: var(--secondary-theme-color);
  color: #fff;
  font-weight: 500;
  padding: 0 30px;
  border-radius: 15px;
  height: 47px;
  font-size: 1.125em;
}

.search-container .autocomplete-suggestions {
  top: 47px;
  background: #fff;
}

.search-container .autocomplete-suggestions span {
  padding: 10px 20px;
}

/* search end */

.contact {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.contact .std-form label {
  display: block;
  width: 100%;
  text-align: left;
}

.contact .std-form .field-container {
  width: 100%;
}

.contact .std-form input,
.contact .std-form select {
  width: 100%;
  box-sizing: border-box;
}

.contact .std-form .submit-box {
  padding-left: 0;
}

.contact {
  margin-bottom: 20px;
}

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

.menu .content {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  width: 400px;
  height: 100vh;
  overflow: auto;
  top: 0;
  right: 0;
  background: var(--main-theme-color);
  padding: 20px 30px;
  transform: translate(100%, 0);
  transition: transform 0.4s ease;
  border-left: 1px solid #fff;
}

.menu .content.open {
  transform: none;
}

.menu .content>span {
  font-size: 1.5em;
  display: block;
  margin-bottom: 30px;
}

.menu .content button {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
}

.menu li {
  margin-bottom: 10px;
  font-size: 1.25em;
}

/* login */

.login-form {
  display: flex;
  padding: 10px 0;
}

.login-form li {
  width: 200px;
  margin-right: 1px;
}

.login-form .submit-box {
  width: auto;
  margin-left: 9px;
  margin-right: 0;
}

.login-form input {
  background: #fff;
  color: var(--main-theme-color);
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  border: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.login-form input::placeholder {
  color: var(--main-theme-color);
}

.login-form li:first-child input {
  border-radius: 15px 0 0 15px;
}

.login-form li:nth-child(2) input {
  border-radius: 0 15px 15px 0;
  margin: 0 10px 0 1px;
}

.login-form+p {
  font-size: 0.75em;
  color: #fff;
  padding-left: 10px;
}

.login-form+p a {
  margin-right: 10px;
  color: var(--main-theme-color-light);
}

/* login end */

/* =====================================================================
   RESPONSIVE FOUNDATION (Phase 0)
   Breakpoints: tablet <=1024px, mobile <=768px, phone <=480px
   Kept in sync with frontsrc/hooks/useBreakpoint.js
   Desktop-first: rules below layer on top via max-width queries.
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .wrapper {
    width: 100%;
    padding: 0 24px;
  }
}

/* Mobile header (fixed) + bottom tab bar are used down from 1240px */
@media (max-width: 1280px) {
  html {
    /* clip (not hidden) so overflow-y stays `visible`; `hidden` would make
       overflow-y compute to `auto`, turning these into scroll containers that
       trap touch gestures on iOS (page only scrolled when touching the footer
       / empty background, not over content). */
    overflow-x: clip;
  }

  .welcome-screen {
    margin-top: 0;
  }

  .app-main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    overflow-x: clip;
  }
}

@media (max-width: 768px) {
  body {
    font-size: 15px;
    --card-pad: 18px;
    --card-radius: 16px;
  }

  .wrapper {
    padding: 0 16px;
  }

  /* Tighter shell spacing on phones/tablets */
  header {
    padding: 14px 0;
    margin-bottom: 28px;
  }

  /* Fluid headings */
  h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  h2 {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
  }

  /* Lighter, more modern typography on mobile (desktop weights unchanged).
     Component CSS loads after this file and sets bold on many headings, so
     !important is used to normalise weight site-wide on small screens. */
  h1,
  h2,
  h3,
  h4,
  h5,
  [class*="headline"],
  [class*="heading"],
  b,
  strong {
    font-weight: 600 !important;
  }

  [class*="headline"] {
    font-weight: 500 !important;
  }

  input,
  select,
  textarea,
  label {
    font-weight: 400 !important;
  }

  /* iOS Safari auto-zooms any focused field whose font-size is < 16px and then
     stays zoomed, so the whole layout looks blown up / cropped on the right.
     Floor every text field at 16px to stop the zoom (checkboxes/radios are
     styled as toggles above and don't trigger it). Module CSS loads after this
     file, so !important is required to win. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  .button,
  [class*="button"] {
    font-weight: 500 !important;
  }
}

@media (max-width: 480px) {
  .wrapper {
    padding: 0 14px;
  }
}

/* =====================================================================
   MOBILE APP SHELL & NAV (Phase 1)
   Mobile uses a dedicated <MobileHeader> + <Drawer> (module CSS); the
   desktop grid header is not rendered on mobile, so it needs no overrides.
   ===================================================================== */

@media (max-width: 768px) {

  /* Hard guard against horizontal scroll on phones: clip overflow at the
     root so a stray wide child can't widen the layout viewport (which would
     push the fixed bottom bar / header beyond the screen). The mobile header
     is position:fixed (not sticky), so the body clip doesn't break it. */
  html,
  body {
    /* clip, not hidden — see note in the 1280px block: `hidden` forces
       overflow-y to `auto`, creating a scroll container that swallows touch
       scroll over content on iOS. */
    overflow-x: clip;
    max-width: 100%;
  }

  /* Desktop pulls the home banner up 75px under the desktop header's
     bottom margin; the mobile header is shorter, so drop the offset.
     Also trim the oversized bottom gap so the first section sits closer. */
  .welcome-screen {
    margin-top: 0;
    margin-bottom: 20px;
  }

  /* Clip stray horizontal overflow so the page stays viewport-width. The fixed
     bottom-bar clearance lives on the copyrights row (the actual last element),
     so app-main needs no bottom padding — that only added a white gap before
     the footer. */
  .app-main {
    padding-bottom: 0;
    overflow-x: clip;
  }

  /* Footer sits straight under the last (now 2-row) section — no big white gap. */
  footer {
    margin-top: 0;
    padding: 32px 0;
  }

  /* Copyright row sits below the fixed bottom tab bar — give the footer
     enough bottom clearance so "Copyright" + "Created by Mediasoft" stay
     fully visible above the bar, and let the two items wrap if cramped. */
  .copyrights {
    flex-wrap: wrap;
    gap: 4px 16px;
    padding-bottom: calc(30px + 64px + env(safe-area-inset-bottom, 0));
    text-align: center;
    justify-content: center;
  }

  /* Link sections side-by-side (Menu | Serwis); contact spans full width */
  footer>.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }

  /* Unified footer interline: same rhythm for menu links and contact lines. */
  footer section li {
    margin-bottom: 10px;
  }

  footer .section-headline {
    margin-bottom: 12px;
  }

  footer .ed {
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  footer .ed p,
  footer .ed li {
    margin-bottom: 0;
    line-height: 1.4;
  }

  /* Contact box spans both columns, then lays Kontakt (left) beside
     Dane spółki (right) as its own 2-column grid. */
  .contact-box {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 20px;
    align-content: start;
    padding-left: 0;
    border-left: none;
  }

  .contact-box > p:first-of-type {   /* "Kontakt" heading */
    grid-row: 1;
    grid-column: 1;
    margin-bottom: 0;
  }

  .contact-box > p:nth-of-type(2) {  /* "Dane spółki" heading */
    grid-row: 1;
    grid-column: 2;
    margin-bottom: 0;
  }

  .contact-box > div:nth-of-type(1) { /* emails / phone */
    grid-row: 2;
    grid-column: 1;
  }

  .contact-box > div:nth-of-type(2) { /* address */
    grid-row: 2;
    grid-column: 2;
  }

  .contact-box > div:nth-of-type(3) { /* NIP / REGON */
    grid-row: 3;
    grid-column: 2;
  }

  .contact-box .socials {
    grid-row: 3;
    grid-column: 1;
    margin-top: 0;
    max-width: none;
  }
}

/* =====================================================================
   HOME + SEARCH (Phase 2)
   ===================================================================== */

@media (max-width: 768px) {

  /* Hero banner: shorter, headline + CTA stacked below the image */
  .top-banner>img {
    max-height: 220px;
  }

  .top-banner .wrapper div {
    position: static;
    top: auto;
    padding-left: 0;
    margin-top: 16px;
  }

  .top-banner .wrapper div p {
    font-size: 1.5em;
    margin-left: 0;
    color: var(--main-theme-color);
  }

  .top-banner a {
    margin-left: 0;
  }

  /* Search card: out of the absolute overlay, full-width, stacked fields */
  .search-container {
    position: static;
    width: 100%;
    margin: 16px 0 0;
    top: auto;
    background: #002660;
    padding: 14px;
  }

  .search-container form ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .search-container form li:first-child input,
  .search-container form li:nth-child(2) input {
    border-radius: 12px;
  }

  .search-container .submit-box {
    padding-left: 0;
  }

  .search-container button {
    width: 100%;
  }

  /* Home sections */
  .home-sections section {
    padding: 28px 0;
  }

  /* Infographics: 3 columns × 2 rows on phones */
  .infographics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 8px;
  }

  .infographics img {
    width: 52px;
    margin-bottom: 10px;
  }

  .infographics span {
    font-size: 0.8125em;
    line-height: 1.25;
  }
}

/* =====================================================================
   FORMS (Phase 5) — stack labels above full-width fields on mobile
   ===================================================================== */

@media (max-width: 768px) {

  .std-form,
  .grid-form {
    width: 100%;
    padding: 0 16px;
  }

  .std-form>li {
    flex-direction: column;
    align-items: stretch;
  }

  .std-form>li>label {
    width: 100%;
    text-align: left;
    margin: 0 0 5px;
    line-height: 1.3;
    height: auto;
  }

  .std-form .field-container {
    width: 100%;
  }

  .std-form input[type="text"],
  .std-form input[type="password"],
  .std-form input[type="date"],
  .std-form input[type="email"],
  .std-form select,
  .std-form textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .std-form input[type="text"],
  .std-form input[type="password"],
  .std-form input[type="email"] {
    height: 44px;
    line-height: normal;
    padding: 0 12px;
  }

  /* Password field wrapper is inline-block on desktop; make it full-width */
  .std-form .password-field {
    display: block;
    width: 100%;
  }

  /* Filter forms (knowledge zone, listings): stack filters */
  .filter-form .std-form {
    flex-direction: column;
    gap: 12px;
  }

  .filter-form .std-form li {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-form .std-form label,
  .filter-form .field-container {
    width: 100%;
  }

  .filter-form .std-form input[type="text"],
  .filter-form .std-form select {
    max-width: none;
    width: 100%;
  }

  .filter-form .std-form .submit-box {
    margin-left: 0;
  }

  /* Compact login form (modal): stack fields with even spacing */
  .login-form {
    flex-direction: column;
    gap: 10px;
  }

  .login-form li {
    width: 100%;
    margin-right: 0;
  }

  .login-form .submit-box {
    margin: 0;
  }

  .login-form input,
  .login-form li:first-child input,
  .login-form li:nth-child(2) input {
    height: 44px;
    line-height: 44px;
    border-radius: 12px;
    margin: 0;
    border: 1px solid #d4d9e0;
    background: #fff;
  }

  /* On the white modal the helper text/links were white (invisible);
     align its left edge with the fields/button above (drop the 10px inset). */
  .login-form+p {
    color: var(--base-font-color);
    padding-left: 0;
    margin-top: 12px;
  }

  .login-form+p a {
    color: var(--secondary-theme-color);
  }
}

/* =====================================================================
   CHECKBOXES → TOGGLE SWITCHES on mobile (radios untouched)
   ===================================================================== */

@media (max-width: 768px) {
  .std-form input[type="checkbox"]+label {
    line-height: 24px;
  }

  /* Track */
  .std-form input[type="checkbox"]+label::before {
    width: 42px;
    height: 24px;
    border: none;
    border-radius: 24px;
    background: #c4ccd6;
    margin-right: 10px;
    transition: background 0.2s ease;
  }

  /* Knob — always visible, slides on toggle. Pinned to the first line
     (where the track sits) so it stays aligned when the label wraps. */
  .std-form input[type="checkbox"]+label::after,
  .std-form input[type="checkbox"]:checked+label::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 3px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: none;
    transition: left 0.2s ease;
    z-index: 1;
  }

  .std-form input[type="checkbox"]:checked+label::before {
    background: var(--main-theme-color);
  }

  .std-form input[type="checkbox"]:checked+label::after {
    left: 21px;
  }
}

/* =====================================================================
   HOME SLIDERS on mobile — smaller arrows + tighter gutters so cards
   get real width.
   ===================================================================== */

@media (max-width: 768px) {
  /* Arrow gutter for every slider: 44px sides, 32px button offset 6 → arrows
     sit clear of both the content edge and the cards. */
  .arrow-slider {
    padding: 0 44px;
  }

  /* Only the home sliders break out of the wrapper's 16px padding to span the
     full viewport width (symmetric edge→button == button→card). Sliders inside
     page content (profile galleries/certificates) stay within the same side
     margins as the rest of the content. */
  .home-sections .arrow-slider {
    margin-left: -16px;
    margin-right: -16px;
  }

  .arrow-slider .nav button {
    width: 32px;
    height: 32px;
  }

  .arrow-slider .nav button:first-child {
    left: 6px;
  }

  .arrow-slider .nav button:last-child {
    right: 6px;
  }

  /* One card shows at a time on phones. Stretching every slide to the tallest
     one (align-items:stretch, desktop default) leaves short cards padded with
     empty space; align each to its own content height instead. */
  .arrow-slider ul {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  /* Wrapper padding shrinks to 14px here; match the home slider breakout so it
     stays exactly full-width and the arrow gutters stay symmetric. */
  .home-sections .arrow-slider {
    margin-left: -14px;
    margin-right: -14px;
  }
}

/* Sectioned add-doctor / add-facility form: centered section titles + card-like sections */
.sectioned-form .section-headline {
  text-align: center;
  font-size: 1.375em;
  font-weight: bold;
  color: var(--main-theme-color);
  margin: 44px 0 20px;
}

.sectioned-form .section-headline:first-child {
  margin-top: 8px;
}

/* accent bar under each section title */
.sectioned-form .section-headline::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: var(--secondary-theme-color);
}

/* Sections are borderless — just a titled group; field layout stays identical to
   the registration form (default .std-form) so spacing is unified across forms. */
.sectioned-form .bordered-section {
  margin-bottom: 24px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.sectioned-form .bordered-section:last-of-type {
  margin-bottom: 8px;
}

/* Optional-field hint: subtle, de-emphasised, not part of the label text weight. */
.optional-hint {
  font-size: 0.75em;
  font-weight: 400;
  color: #9aa3b0;
}

/* Center the submit button (content-width, not stretched/offset under the field column) */
.sectioned-form .submit-box {
  padding-left: 0;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .sectioned-form .section-headline {
    font-size: 1.2em;
    margin: 28px 0 16px;
  }
}

/* Balanced, centered field rows across all card forms (registration, doctors/add,
   facilities/add): fixed label + field columns centered as a group so margins are
   symmetric instead of the content leaning right. */
.register-card .std-form > li {
  justify-content: center;
}

.register-card .std-form > li > label {
  flex: 0 0 180px;
  width: 180px;
}

.register-card .std-form .field-container {
  flex: 0 1 380px;
  width: 380px;
  max-width: calc(100% - 190px);
}

@media (max-width: 768px) {
  .register-card .std-form > li {
    justify-content: flex-start;
  }

  .register-card .std-form > li > label,
  .register-card .std-form .field-container {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* Extra spacing below chip-list fields (Specjalizacje / Usługi) so the wrapped
   pills don't crowd the next field. */
.register-card .std-form > li.searchableselection {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Vertically center the checkbox box with multi-line label text (e.g. terms).
   Desktop only — mobile (≤768px) keeps the toggle-switch styling. */
@media (min-width: 769px) {
  .register-card .std-form input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    float: none;
  }

  .register-card .std-form input[type="checkbox"] + label::before {
    flex-shrink: 0;
  }

  .register-card .std-form input[type="checkbox"]:checked + label::after {
    top: calc(50% - 4px);
  }
}