/* =========================================================================
   Pomelo — Porównanie diet (widget Elementora)
   Kolory/fonty z systemu „new" (--pom-*) z fallbackami.
   Prawdziwa <table> — sticky pierwszej kolumny działa (containing block = tabela).
   ========================================================================= */

.pdt {
    --pdt-primary:      var(--pom-primary-500, #c8c84a);
    --pdt-primary-dark: var(--pom-primary-700, #8f8f31);
    --pdt-accent:       var(--pom-accent-600, #d91b36);
    --pdt-accent-hover: var(--pom-accent-700, #b3162d);
    --pdt-text:         var(--pom-neutral-800, #333333);
    --pdt-strong:       var(--pom-neutral-900, #1f1f1f);
    --pdt-muted:        var(--pom-neutral-700, #595959);
    --pdt-line:         var(--pom-neutral-300, #efefef);
    --pdt-head-bg:      var(--pom-neutral-200, #f8f8f8);
    --pdt-card:         var(--pom-neutral-100, #ffffff);
    --pdt-tint:         rgba(200, 200, 74, .05);
    --pdt-radius:       18px;
    --pdt-hl-radius:    14px;
    --pdt-font-head:    var(--pom-font-heading, 'Rubik', sans-serif);
    --pdt-font-body:    var(--pom-font-body, 'Montserrat', sans-serif);

    box-sizing: border-box;
    max-width: 100%;
    font-family: var(--pdt-font-body) !important;
    color: var(--pdt-text);
}
.pdt *, .pdt *::before, .pdt *::after { box-sizing: border-box; }

.pdt__title {
    margin: 0 0 12px;
    text-align: center;
    font-family: var(--pdt-font-head) !important;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--pdt-strong);
}
.pdt__subtitle {
    margin: 0 auto 32px;
    max-width: 820px;
    text-align: center;
    font-family: var(--pdt-font-body) !important;
    font-size: 20px;
    line-height: 1.5;
    color: var(--pdt-text);
}

.pdt__scroll {
    max-width: 100%;
    overflow-x: auto;
    /* zaokrąglenie + przycięcie zawartości do rogów — dzięki temu w łuku rogu
       sticky kolumny NIE prześwituje oliwka przewiniętej pod nią kolumny.
       (bez -webkit-overflow-scrolling:touch — na iOS psuje przycinanie border-radius) */
    border-radius: var(--pdt-radius);
    scrollbar-width: none;
}
.pdt__scroll::-webkit-scrollbar { display: none; }

.pdt__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

/* ---- Bazowe komórki (bez linii poziomych) ---- */
.pdt__hcell {
    vertical-align: middle;
    text-align: center;
    padding: 16px 12px;
    background: var(--pdt-head-bg);
    font-family: var(--pdt-font-head) !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--pdt-strong);
}
.pdt__cell {
    vertical-align: middle;
    text-align: center;
    padding: 14px 12px;
    background: var(--pdt-card);
    font-family: var(--pdt-font-body) !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--pdt-text);
}
th.pdt__cell--label { font-weight: 400; }
.pdt__cell--label { color: var(--pdt-muted); }
.pdt__ci { display: inline; }

/* ---- Ramka obszaru danych (nagłówek + wiersze cech, BEZ wiersza CTA) ----
   pionowe separatory kolumn + lewa/prawa/górna/dolna ramka.               */
/* pionowe separatory + lewa ramka: nagłówek, wiersze cech oraz diety w wierszu CTA
   (bez pierwszej kolumny „Cecha" w wierszu CTA — ona kończy się wyżej) */
.pdt__hcell,
.pdt__table tbody tr:not(.pdt__row--cta) > *,
.pdt__row--cta > *:not(:first-child) {
    border-left: 1px solid var(--pdt-line);
}
/* prawa ramka */
.pdt__hcell:last-child,
.pdt__table tbody tr:not(.pdt__row--cta) > *:last-child,
.pdt__row--cta > *:last-child {
    border-right: 1px solid var(--pdt-line);
}
/* górna ramka */
.pdt__hcell { border-top: 1px solid var(--pdt-line); }
/* dolna ramka: kolumna „Cecha" kończy się na ostatnim wierszu cech,
   kolumny diet — na wierszu CTA (link „Sprawdź" wewnątrz tabeli) */
.pdt__table tbody tr:nth-last-child(2) > *:first-child { border-bottom: 1px solid var(--pdt-line); }
.pdt__row--cta > *:not(:first-child) { border-bottom: 1px solid var(--pdt-line); }

/* rogi ramki */
.pdt__hcell--label { border-top-left-radius: var(--pdt-radius); }
.pdt__hcell:last-child { border-top-right-radius: var(--pdt-radius); }
.pdt__table tbody tr:nth-last-child(2) > *:first-child { border-bottom-left-radius: var(--pdt-radius); }
.pdt__row--cta > *:last-child { border-bottom-right-radius: var(--pdt-radius); }

/* pierwsza kolumna przyklejona (mobile scroll)
   Tło WYMUSZONE (!important) i wysoki z-index — sticky musi w 100% zasłaniać
   przewijające się pod nią kolumny (oliwka/inne). Bez tego na iOS i przy
   nadpisaniach motywu przez sticky prześwituje sąsiednia kolumna. */
.pdt__hcell--label,
.pdt__cell--label {
    position: sticky;
    left: 0;
    width: 16%;
}
.pdt__hcell--label {
    z-index: 6;
    background-color: var(--pdt-head-bg) !important;
}
.pdt__cell--label {
    z-index: 5;
    background-color: var(--pdt-card) !important;
}

/* ---- Wyróżniona kolumna — oliwkowy box od nagłówka przez przycisk ---- */
.pdt__hcell.is-hl {
    background: var(--pdt-primary);
    color: var(--pdt-strong);
    border: 2px solid var(--pdt-primary) !important;
    border-bottom: 0 !important;
    border-radius: 0; /* góra prosta */
}
td.pdt__cell.is-hl {
    background: var(--pdt-tint);
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 2px solid var(--pdt-primary) !important;
    border-right: 2px solid var(--pdt-primary) !important;
}
.pdt__row--cta td.pdt__cell--cta.is-hl {
    background: var(--pdt-tint);
    border-left: 2px solid var(--pdt-primary) !important;
    border-right: 2px solid var(--pdt-primary) !important;
    border-bottom: 2px solid var(--pdt-primary) !important;
    border-radius: 0 0 0 var(--pdt-hl-radius); /* tylko dolny-lewy róg */
}

/* znaczniki */
.pdt-check { color: var(--pdt-primary-dark); font-weight: 700; }
.pdt-star  { color: var(--pdt-strong); }

/* ---- Wiersz CTA (pod ramką) ---- */
.pdt__cell--cta { padding-top: 18px; padding-bottom: 16px; }
.pdt__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--pdt-font-head) !important;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    transition: background-color .2s, color .2s;
}
.pdt__cta--primary {
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--pdt-accent);
    color: #fff;
    font-size: 15px;
}
.pdt__cta--primary:hover,
.pdt__cta--primary:focus { color: #fff; background: var(--pdt-accent-hover); }
.pdt__cta--link {
    padding: 12px 8px;
    color: var(--pdt-strong);
    font-size: 14px;
    text-decoration: none;
}
.pdt__cta--link:hover,
.pdt__cta--link:focus { color: var(--pdt-primary-dark); }
/* podkreślenie linków — opcjonalne (klasa na roocie) */
.pdt--underline .pdt__cta--link { text-decoration: underline !important; text-underline-offset: 3px; }

/* strzałki (mobile) */
.pdt__arrows { display: none; justify-content: center; gap: 12px; margin-top: 18px; }
.pdt__arrow {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--pdt-primary);
    border-radius: 12px;
    background: var(--pdt-card) no-repeat center / 10px 16px;
    cursor: pointer;
}
.pdt__arrow--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M9 1L2 8l7 7' stroke='%23595959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pdt__arrow--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none'%3E%3Cpath d='M1 1l7 7-7 7' stroke='%23595959' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pdt__arrow:hover,
.pdt__arrow:focus,
.pdt__arrow:active { background-color: var(--pdt-card); outline: none; }

/* ---- Responsywność ---- */
@media (max-width: 960px) {
    .pdt__title { font-size: 28px; }
    .pdt__subtitle { font-size: 16px; }
}
/* =========================================================================
   Neutralizacja globalnych stylów tabel motywu (pomelobox.cz, style.min.css):
   - motyw daje WSZYSTKIM td/th szare ramki 1px rgba(128,128,128,.5)
     (widoczne m.in. jako obramowana pusta komórka pod pierwszą kolumną
     w wierszu CTA),
   - motyw podświetla wiersze na hover (table tbody tr:hover > td/th).
   Twardy reset ramek + ponowne nałożenie NASZYCH ramek selektorami
   z prefiksem .pdt .pdt__table (mocniejszymi od resetu i motywu).
   ========================================================================= */

/* 1) reset ramek motywu na wszystkich komórkach */
.pdt .pdt__table th,
.pdt .pdt__table td { border: 0; }

/* 2) nasze ramki — kopia sekcji „Ramka obszaru danych" mocniejszym selektorem */
.pdt .pdt__table .pdt__hcell,
.pdt .pdt__table tbody tr:not(.pdt__row--cta) > *,
.pdt .pdt__table .pdt__row--cta > *:not(:first-child) { border-left: 1px solid var(--pdt-line); }

.pdt .pdt__table .pdt__hcell:last-child,
.pdt .pdt__table tbody tr:not(.pdt__row--cta) > *:last-child,
.pdt .pdt__table .pdt__row--cta > *:last-child { border-right: 1px solid var(--pdt-line); }

.pdt .pdt__table .pdt__hcell { border-top: 1px solid var(--pdt-line); }

.pdt .pdt__table tbody tr:nth-last-child(2) > *:first-child { border-bottom: 1px solid var(--pdt-line); }
.pdt .pdt__table .pdt__row--cta > *:not(:first-child) { border-bottom: 1px solid var(--pdt-line); }

/* 3) tła komórek — motyw paskuje nieparzyste wiersze (tr:nth-child(2n+1) > td,
   szare 7%) i podświetla wiersze na hover (szare 10%). Przypinamy nasze tła
   mocniejszym selektorem — w stanie bazowym i na hover. */
.pdt .pdt__table tbody > tr > th { background-color: var(--pdt-card); }
.pdt .pdt__table tbody > tr > td { background-color: var(--pdt-card); }
.pdt .pdt__table tbody > tr > td.is-hl { background-color: var(--pdt-tint); }
.pdt .pdt__table tbody tr:hover > th { background-color: var(--pdt-card); }
.pdt .pdt__table tbody tr:hover > td { background-color: var(--pdt-card); }
.pdt .pdt__table tbody tr:hover > td.is-hl { background-color: var(--pdt-tint); }

/* ---- Responsywność ---- */
@media (max-width: 767px) {
    .pdt__table { table-layout: auto; width: auto; }
    .pdt__hcell--label, .pdt__cell--label { min-width: 40vw; width: auto; border-right: 1px solid var(--pdt-line); }
    /* separator sticky kolumny — ponownie, mocniej od resetu ramek */
    .pdt .pdt__table .pdt__hcell--label,
    .pdt .pdt__table .pdt__cell--label { border-right: 1px solid var(--pdt-line); }
    .pdt__hcell:not(.pdt__hcell--label),
    td.pdt__cell:not(.pdt__cell--label) { min-width: 56vw; }
    /* sticky kolumna „Cecha": proste rogi po lewej — zaokrąglenie robi kontener
       (.pdt__scroll). Gwarancja, że w rogu nie ma przezroczystego trójkąta,
       którym mogłaby przebić oliwka przewijanej kolumny. */
    .pdt__hcell--label { border-top-left-radius: 0; }
    .pdt__table tbody tr:nth-last-child(2) > *:first-child { border-bottom-left-radius: 0; }
    /* prawa krawędź jest „otwarta" — stamtąd wjeżdżają/wyjeżdżają kolumny.
       Zaokrąglać tylko lewe (stałe) rogi kontenera, prawe zostawić proste,
       żeby przewijane kolumny nie były obcinane. */
    .pdt__scroll { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .pdt__arrows { display: flex; }
    .pdt__hcell { font-size: 15px; padding: 14px 8px; }
    .pdt__cell { padding: 12px 8px; }
}