/* Style dla kontenera .wrap_text */
.wrap_text {
    padding: 10px;
    /* Ustawienia podstawowe */
    color: #4b5563; /* text-gray-700 - kolor tekstu */
    line-height: 1.75; /* leading-relaxed - wysokość linii */
    max-width: none; /* max-w-none - usuwa domyślne max-width, jeśli chcesz pełną szerokość */
    width: 100%; /* Dodane: Upewnia się, że .wrap_text nie będzie szerszy niż rodzic */
    box-sizing: border-box; /* Dodane: Zapobiega rozszerzaniu szerokości przez padding i border */
}

/* Style paragrafów <p> wewnątrz .wrap_text */
.wrap_text p {
    margin-bottom: 1rem; /* mb-4 - margines dolny paragrafu */
}

/* Style nagłówków <h1> wewnątrz .wrap_text */
.wrap_text h1 {
    font-size: 1.5rem; /* text-2xl - rozmiar nagłówka h1 */
    font-weight: 700; /* font-bold - pogrubienie */
    margin-bottom: 1.5rem; /* mb-6 - margines dolny nagłówka */
    color: #1f2937; /* text-gray-900 - kolor nagłówka */
    line-height: 1.25;
}

/* Style nagłówków <h2> wewnątrz .wrap_text */
.wrap_text h2 {
    font-size: 1.25rem; /* text-xl - rozmiar nagłówka h2 */
    font-weight: 600; /* font-semibold - pół-pogrubienie */
    margin-bottom: 1rem; /* mb-4 - margines dolny nagłówka */
    color: #1f2937; /* text-gray-900 - kolor nagłówka */
    line-height: 1.25;
}

/* Style nagłówków <h3> wewnątrz .wrap_text */
.wrap_text h3 {
    font-size: 1.125rem; /* text-lg - rozmiar nagłówka h3 */
    font-weight: 600; /* font-semibold - pół-pogrubienie */
    margin-bottom: 0.5rem; /* mb-2 - margines dolny nagłówka */
    color: #374151; /* text-gray-800 - kolor nagłówka */
    line-height: 1.25;
}

/* Style list nieuporządkowanych <ul> i uporządkowanych <ol> wewnątrz .wrap_text */
.wrap_text ul, .wrap_text ol {
    list-style-position: outside;
    margin-left: 1.25rem; /* pl-5 - padding-left, ale jako margin-left w CSS */
    margin-bottom: 1rem; /* mb-4 - margines dolny listy */
}

/* Style list nieuporządkowanych <ul> wewnątrz .wrap_text */
.wrap_text ul {
    list-style-type: disc; /* list-disc - punktor listy */
}

/* Style list uporządkowanych <ol> wewnątrz .wrap_text */
.wrap_text ol {
    list-style-type: decimal; /* list-decimal - numeracja listy */
}

/* Style elementów list <li> wewnątrz .wrap_text */
.wrap_text li {
    margin-bottom: 0.5rem; /* mb-2 - margines dolny elementu listy */
    color: #4b5563; /* text-gray-700 - kolor tekstu listy */
}

/* Style dla <strong> i <b> wewnątrz .wrap_text (pogrubienie) */
.wrap_text strong, .wrap_text b {
    font-weight: 600; /* font-semibold - pół-pogrubienie */
}

/* Style dla <em> i <i> wewnątrz .wrap_text (kursywa) */
.wrap_text em, .wrap_text i {
    font-style: italic; /* italic - kursywa */
}

/* Style dla linków <a> wewnątrz .wrap_text */
.wrap_text a {
    color: #2563eb; /* text-blue-600 - kolor linku */
    text-decoration: underline; /* underline - podkreślenie linku */
}

.wrap_text a:hover {
    color: #1d4ed8; /* hover:text-blue-800 - kolor linku po najechaniu */
}

/* Style dla tabel <table> wewnątrz .wrap_text */
.wrap_text table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem; /* mb-4 - margines dolny tabeli */
}

/* Style dla nagłówków tabeli <th> wewnątrz .wrap_text */
.wrap_text th {
    font-weight: 600; /* font-semibold - pogrubienie nagłówka tabeli */
    padding: 0.5rem; /* p-2 - padding komórki nagłówka */
    border-bottom: 2px solid #e5e7eb; /* border-b-2 border-gray-200 - dolna krawędź nagłówka */
    text-align: left; /* domyślnie wyrównanie do lewej */
    word-break: break-word; /* Dodane: Łamanie długich słów w nagłówkach */
    overflow-wrap: break-word; /* Dodane: Alternatywne łamanie słów dla starszych przeglądarek */
}

/* Style dla komórek tabeli <td> wewnątrz .wrap_text */
.wrap_text td {
    padding: 0.5rem; /* p-2 - padding komórki */
    border-bottom: 1px solid #e5e7eb; /* border-b border-gray-200 - dolna krawędź komórki */
    word-break: break-word; /* Dodane: Łamanie długich słów w komórkach */
    overflow-wrap: break-word; /* Dodane: Alternatywne łamanie słów dla starszych przeglądarek */
}

/* Ostatni wiersz tabeli bez dolnej krawędzi */
.wrap_text tr:last-child td, .wrap_text tr:last-child th {
    border-bottom: none; /* border-b-0 - brak dolnej krawędzi w ostatnim wierszu */
}

/* Obramowanie tabeli (opcjonalne, jeśli chcesz obramowanie całej tabeli) */
/*.wrap_text table {
    border: 1px solid #e5e7eb; !* border border-gray-200 - obramowanie tabeli *!
}*/

/* Obramowanie komórek tabeli (opcjonalne, jeśli chcesz obramowanie każdej komórki) */
/*.wrap_text th, .wrap_text td {
    border: 1px solid #e5e7eb; !* border border-gray-200 - obramowanie komórek *!
}*/

/* Dodatkowe style dla responsywności tabeli - przesuwana tabela na urządzeniach mobilnych */
@media (max-width: 768px) { /* Możesz dostosować próg szerokości ekranu */
    .wrap_text table {
        display: block; /* Ważne, aby overflow-x działało poprawnie */
        overflow-x: auto; /* Włącza poziomy scrollbar, gdy tabela jest za szeroka */
        -webkit-overflow-scrolling: touch; /* Dla płynnego scrollowania na iOS */
    }
}