/* Fade + Slide animacje dla dropdownów */
@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.dropdown-enter {
  animation: fadeSlideDown 0.2s ease-out forwards;
}

.dropdown-leave {
  animation: fadeSlideUp 0.2s ease-in forwards;
}

.rotate-180 {
  transform: rotate(180deg);
}



/* Dropdown zawsze na wierzchu */
#oferta-menu,
#mobile-oferta-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  margin-top: 0.75rem; /* np. mt-3 */
  margin-left: 1rem;   /* np. ml-4 */
}

/* Submenu desktop zawsze na wierzchu */
@media (min-width: 1024px) {
  #oferta-menu {
    position: absolute;
    z-index: 9999; /* zawsze nad wszystkimi */
    overflow: visible; /* upewniamy się, że nie jest przycinane */
  top: calc(100% - 10px); /* lub 0px, jeśli ma być przyklejone */
  left: -100%;
  width: 1500%; /* wypełnia całą szerokość rodzica */
  margin-left: 0rem;   /* np. ml-4 */
  }
}




/* Animacje fade + slide */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

.dropdown-enter { animation: fadeSlideDown 0.2s ease-out forwards; }
.dropdown-leave { animation: fadeSlideUp 0.2s ease-in forwards; }

.submenu-item {
  display: -webkit-box;       /* potrzebne do line-clamp */
  -webkit-line-clamp: 2;      /* maksymalnie 2 wiersze */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.doctor {
    padding: 20px;
    text-align: center;
}

/* zmniejszone zdjęcie */
.doctor img {
    width: 66%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* responsywność */
@media (max-width: 768px) {
    .doctor {
        padding: 15px; /* mniej miejsca na mniejszych ekranach */
    }
    .doctor img {
        width: 70%; /* zdjęcie większe, żeby było czytelne na telefonach */
    }
}

@media (max-width: 480px) {
    .doctor {
        padding: 10px;
    }
    .doctor img {
        width: 90%; /* maksymalna czytelność na małych ekranach */
    }
}

/* Animacje dla submenu */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(5px); }
}

.animate-fadeIn {
  animation: fadeIn 0.25s ease forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.25s ease forwards;
}

/* Efekt przesuwania menu mobilnego */
.navbar-menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.navbar-menu.translate-x-0 {
  transform: translateX(0);
}

.cennik {
  margin: 2rem auto;
  max-width: 1000px;
  font-family: "Open Sans", sans-serif;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
}

.price-table th, .price-table td {
  border-bottom: 1px solid #ddd;
  padding: 8px 12px;
}

.price-table th {
  background-color: #f2f2f2;
  text-align: left;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  background-color: #f7f7f7;
  border: none;
  text-align: left;
  padding: 15px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.accordion-header:hover {
  background-color: #eaeaea;
}

.accordion-content {
  display: none;
  padding: 15px;
}

.accordion-content.active {
  display: block;
}