.tpi {
  --tpi-ink: #17233a;
  --tpi-muted: #5f6b7a;
  --tpi-line: #dce3ea;
  --tpi-surface: #f7f9fc;
  --tpi-good: #08775d;
  --tpi-good-bg: #e8f7f2;
  --tpi-warn: #a44716;
  --tpi-warn-bg: #fff2e7;
  --tpi-neutral: #405a75;
  --tpi-neutral-bg: #edf3f8;
  color: var(--tpi-ink);
  margin: 1.5rem 0 2rem;
}

.tpi__summary {
  background: linear-gradient(135deg, #f7fbff, #eef4fa);
  border: 1px solid var(--tpi-line);
  border-left: 6px solid var(--tpi-neutral);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.tpi__summary--cheaper { border-left-color: var(--tpi-good); }
.tpi__summary--expensive { border-left-color: var(--tpi-warn); }
.tpi__summary--similar { border-left-color: var(--tpi-neutral); }
.tpi__centerpiece { display: grid; gap: 1rem; }

.tpi__eyebrow {
  color: var(--tpi-muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 .45rem;
  text-transform: uppercase;
}

.tpi__summary h2 {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0;
}

.tpi__lead { font-size: 1.05rem; margin: .75rem 0 0; }
.tpi__scope { color: var(--tpi-muted); font-size: .78rem; margin: .55rem 0 0; }
.tpi__signals { display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.tpi__signal { background: rgba(255, 255, 255, .78); border: 1px solid var(--tpi-line); border-radius: 11px; display: grid; gap: .2rem; padding: .8rem .9rem; }
.tpi__signal--primary { border-color: #9cabbc; box-shadow: inset 0 3px 0 var(--tpi-neutral); }
.tpi__summary--cheaper .tpi__signal--primary { box-shadow: inset 0 3px 0 var(--tpi-good); }
.tpi__summary--expensive .tpi__signal--primary { box-shadow: inset 0 3px 0 var(--tpi-warn); }
.tpi__signal > span { color: var(--tpi-muted); font-size: .74rem; font-weight: 700; }
.tpi__signal > strong { font-size: 1rem; }
.tpi__signal > small { color: var(--tpi-muted); font-size: .7rem; }

.tpi__offer {
  background: var(--tpi-surface);
  border: 1px solid var(--tpi-line);
  border-radius: 12px;
  margin-top: 1rem;
  padding: 1rem;
}

.tpi__offer-link {
  background: var(--tpi-ink);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: .9rem;
  font-weight: 700;
  padding: .65rem 1rem;
  text-decoration: none;
}
.tpi__offer-link:hover,
.tpi__offer-link:focus-visible { color: #fff; opacity: .88; }

.tpi__comparison {
  background: #fff;
  border: 1px solid var(--tpi-line);
  border-radius: 14px;
  margin-top: 1rem;
  padding: 1rem;
}

.tpi__reference {
  background: #fff;
  border: 1px solid var(--tpi-line);
  border-radius: 14px;
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
}
.tpi__reference-header { max-width: 760px; }
.tpi__reference-header h3 { font-size: 1.25rem; margin: 0 0 .45rem; }
.tpi__reference-header > p:last-child { color: var(--tpi-muted); margin: 0; }
.tpi__reference-table-wrap { margin-top: 1rem; }
.tpi__reference-table caption { background: #fff; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.tpi__reference-source { color: var(--tpi-muted); font-size: .8rem; line-height: 1.55; margin: .8rem .15rem 0; }
.tpi__reference-source a { color: #1769d2; font-weight: 650; text-underline-offset: .15em; }

.tpi__budget {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tpi-line);
  border-radius: 14px;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .7fr);
  margin-top: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.tpi__budget h3 { font-size: 1.2rem; margin: 0 0 .8rem; }
.tpi__budget-help { color: var(--tpi-muted); font-size: .88rem; margin: -.35rem 0 .8rem; }
.tpi__budget-scopes { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .85rem; }
.tpi__budget-scopes > span { color: var(--tpi-muted); font-size: .78rem; margin-right: .1rem; }
.tpi__budget-scopes button { background: #fff; border: 1px solid #b9c4cf; border-radius: 999px; color: var(--tpi-ink); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; padding: .38rem .7rem; }
.tpi__budget-scopes button[aria-pressed="true"] { background: var(--tpi-ink); border-color: var(--tpi-ink); color: #fff; }
.tpi__budget-scopes button:focus-visible { outline: 3px solid rgba(23, 105, 210, .22); outline-offset: 2px; }
.tpi__budget label { color: var(--tpi-muted); display: flex; flex-wrap: wrap; gap: .5rem; }
.tpi__input { align-items: center; color: var(--tpi-ink); display: inline-flex; font-weight: 700; gap: .35rem; }
.tpi__input input { border: 1px solid #aeb9c5; border-radius: 8px; font: inherit; font-weight: 700; max-width: 8rem; padding: .45rem .55rem; }
.tpi__budget-presets { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tpi__budget-presets > span { color: var(--tpi-muted); font-size: .78rem; margin-right: .1rem; }
.tpi__budget-presets button { background: #fff; border: 1px solid #b9c4cf; border-radius: 999px; color: var(--tpi-ink); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: .35rem .65rem; }
.tpi__budget-presets button:hover,
.tpi__budget-presets button:focus-visible { background: var(--tpi-neutral-bg); border-color: var(--tpi-neutral); }
.tpi__budget-presets button[aria-pressed="true"] { background: var(--tpi-ink); border-color: var(--tpi-ink); color: #fff; }
.tpi__budget-presets button:focus-visible { outline: 3px solid rgba(23, 105, 210, .22); outline-offset: 2px; }
.tpi__budget-context { color: var(--tpi-muted); font-size: .76rem; line-height: 1.45; margin: .65rem 0 0; }
.tpi__budget-result { background: var(--tpi-neutral-bg); border-radius: 12px; margin: 0; padding: 1rem; }
.tpi__budget-result span { color: var(--tpi-muted); display: block; font-size: .82rem; }
.tpi__budget-result output { display: block; font-size: clamp(1.5rem, 4vw, 2.15rem); font-weight: 800; line-height: 1.2; margin-top: .2rem; }
.tpi__budget-result small { color: var(--tpi-muted); display: block; font-size: .82rem; margin-top: .25rem; }

.tpi__comparison h3 { font-size: 1.05rem; margin: 0 0 .8rem; }
.tpi__scale { color: var(--tpi-muted); display: grid; font-size: .72rem; grid-template-columns: 1fr 1fr 1fr; margin: 0 4.5rem .25rem min(12rem, 34%); text-align: center; }
.tpi__scale span:first-child { text-align: left; }
.tpi__scale span:last-child { text-align: right; }
.tpi__bars { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.tpi__bars li { align-items: center; display: grid; gap: .65rem; grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 2fr) 3.5rem; }
.tpi__bar-label { font-size: .86rem; }
.tpi__bar-label small { color: var(--tpi-muted); display: block; font-size: .72rem; margin-top: .05rem; }
.tpi__bar-track { background: linear-gradient(to right, var(--tpi-good-bg), #f5f7fa 48%, #cbd5df 49%, #cbd5df 51%, #f5f7fa 52%, var(--tpi-warn-bg)); border-radius: 999px; height: .7rem; overflow: hidden; position: relative; }
.tpi__bar-fill { border-radius: 999px; height: 100%; min-width: 2px; position: absolute; top: 0; }
.tpi__bar-fill--cheaper { background: var(--tpi-good); }
.tpi__bar-fill--expensive { background: var(--tpi-warn); }
.tpi__bar-fill--similar { background: var(--tpi-neutral); }
.tpi__bars strong { font-size: .82rem; text-align: right; }

.tpi__table-wrap {
  border: 1px solid var(--tpi-line);
  border-radius: 14px;
  margin-top: 1rem;
  overflow-x: auto;
}

.tpi__table { border-collapse: collapse; font-size: .95rem; margin: 0; min-width: 720px; width: 100%; }
.tpi__table caption { background: var(--tpi-surface); font-weight: 700; padding: .8rem 1rem; text-align: left; }
.tpi__table th,
.tpi__table td { border-bottom: 1px solid var(--tpi-line); padding: .8rem 1rem; text-align: left; vertical-align: middle; }
.tpi__table thead th { background: #fff; color: var(--tpi-muted); font-size: .78rem; text-transform: uppercase; }
.tpi__table tbody tr:last-child th,
.tpi__table tbody tr:last-child td { border-bottom: 0; }
.tpi__table small { color: var(--tpi-muted); display: block; font-size: .78rem; font-weight: 400; margin-top: .15rem; }
.tpi__category th { background: var(--tpi-surface); color: var(--tpi-ink); font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }

.tpi__methodology {
  background: var(--tpi-surface);
  border: 1px solid var(--tpi-line);
  border-radius: 12px;
  color: var(--tpi-muted);
  font-size: .84rem;
  line-height: 1.55;
  margin-top: 1rem;
}
.tpi__methodology summary { color: var(--tpi-ink); cursor: pointer; font-weight: 700; padding: .9rem 1rem; }
.tpi__methodology details[open] summary { border-bottom: 1px solid var(--tpi-line); }
.tpi__methodology details > div { padding: .9rem 1rem; }
.tpi__methodology p { margin: 0; }
.tpi__methodology p + p { margin-top: .65rem; }
.tpi__methodology-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0 0 .8rem; }
.tpi__methodology-meta div { display: inline-flex; gap: .35rem; }
.tpi__methodology-meta dt { color: var(--tpi-muted); }
.tpi__methodology-meta dt::after { content: ":"; }
.tpi__methodology-meta dd { color: var(--tpi-ink); font-weight: 700; margin: 0; }
.tpi__methodology-source { border-top: 1px solid var(--tpi-line); padding-top: .75rem; }
.tpi__methodology-source a { color: #1769d2; font-weight: 650; text-underline-offset: .15em; }

.tpi__badge { border-radius: 999px; display: inline-block; font-size: .8rem; font-weight: 700; padding: .3rem .55rem; white-space: nowrap; }
.tpi__badge--cheaper { background: var(--tpi-good-bg); color: var(--tpi-good); }
.tpi__badge--expensive { background: var(--tpi-warn-bg); color: var(--tpi-warn); }
.tpi__badge--similar { background: var(--tpi-neutral-bg); color: var(--tpi-neutral); }
.tpi__note { color: var(--tpi-muted); font-size: .82rem; margin: .75rem .25rem 0; }
.tpi--empty { background: var(--tpi-surface); border: 1px dashed var(--tpi-line); border-radius: 12px; padding: 1rem 1.25rem; }
.tpi--empty p { margin: .2rem 0; }

.tpi-single {
  box-sizing: border-box;
  flex: 1 0 100%;
  max-width: none;
  min-width: 0;
  width: 100%;
}
.tpi-single *,
.tpi-single *::before,
.tpi-single *::after { box-sizing: border-box; }
.tpi-single__inner { margin: 0 auto; max-width: 1200px; padding: 32px 20px 56px; }
.tpi-single__header h1 { color: #17233a; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 1.25rem; }
.tpi-single__editorial { color: #17233a; margin-top: 1.5rem; }

.tpi-directory {
  --tpi-ink: #17233a;
  --tpi-muted: #5f6b7a;
  --tpi-line: #dce3ea;
  --tpi-surface: #f7f9fc;
  --tpi-good: #08775d;
  --tpi-good-bg: #e8f7f2;
  --tpi-warn: #a44716;
  --tpi-warn-bg: #fff2e7;
  --tpi-neutral: #405a75;
  --tpi-neutral-bg: #edf3f8;
  box-sizing: border-box;
  color: var(--tpi-ink);
  flex: 1 0 100%;
  max-width: none;
  min-width: 0;
  width: 100%;
}

/* Motyw Zosia dodaje własny nagłówek archiwum przed szablonem wtyczki. */
.post-type-archive-tpi_country .archive-header { display: none !important; }
.tpi-directory *,
.tpi-directory *::before,
.tpi-directory *::after { box-sizing: border-box; }
.tpi-directory__inner { margin: 0 auto; max-width: 1200px; padding: 32px 20px 56px; }
.tpi-directory__header { max-width: 800px; }
.tpi-directory__header h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; margin: .2rem 0 1rem; }
.tpi-directory__header > p:last-child { color: var(--tpi-muted); font-size: 1.05rem; line-height: 1.65; margin: 0; }

.tpi-breadcrumbs { color: var(--tpi-muted); font-size: 13px; line-height: 1.4; margin: 0 0 18px; }
.tpi > .tpi-breadcrumbs { margin-bottom: 1rem; }
.tpi-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 5px 7px; list-style: none; margin: 0; padding: 0; }
.tpi-breadcrumbs li { align-items: center; display: flex; gap: 7px; }
.tpi-breadcrumbs li + li::before { color: #9299a2; content: "/"; }
.tpi-breadcrumbs a { color: #1769d2; text-decoration: none; }
.tpi-breadcrumbs a:hover,
.tpi-breadcrumbs a:focus { text-decoration: underline; }

.tpi-directory__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 32px 0 0; padding: 0; }
.tpi-directory-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tpi-line);
  border-left: 5px solid var(--tpi-neutral);
  border-radius: 12px;
  color: inherit;
  display: grid;
  gap: 13px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 210px;
  padding: 17px;
  text-decoration: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.tpi-directory-card--cheaper { border-left-color: var(--tpi-good); }
.tpi-directory-card--expensive { border-left-color: var(--tpi-warn); }
.tpi-directory-card:hover,
.tpi-directory-card:focus-visible { border-color: #aeb9c5; box-shadow: 0 6px 18px rgba(23, 35, 58, .11); color: inherit; transform: translateY(-2px); }
.tpi-directory-card:focus-visible { outline: 3px solid rgba(23, 105, 210, .25); outline-offset: 2px; }
.tpi-directory-card__flag { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 2rem; line-height: 1; }
.tpi-directory-card__body,
.tpi-directory-card__heading { display: block; min-width: 0; }
.tpi-directory-card__heading strong { display: inline; font-size: 1.12rem; line-height: 1.25; }
.tpi-directory-card__heading small { background: var(--tpi-neutral-bg); border-radius: 999px; color: var(--tpi-neutral); font-size: .66rem; font-weight: 700; margin-left: .45rem; padding: .18rem .4rem; text-transform: uppercase; vertical-align: .12rem; }
.tpi-directory-card__verdict { display: block; font-size: .88rem; font-weight: 750; line-height: 1.3; margin-top: .4rem; }
.tpi-directory-card--cheaper .tpi-directory-card__verdict { color: var(--tpi-good); }
.tpi-directory-card--expensive .tpi-directory-card__verdict { color: var(--tpi-warn); }
.tpi-directory-card__primary { display: grid; gap: .05rem; margin-top: .5rem; }
.tpi-directory-card__primary small { color: var(--tpi-muted); font-size: .7rem; }
.tpi-directory-card__primary strong { font-size: .88rem; }
.tpi-directory-card__example { color: var(--tpi-ink); display: block; font-size: .82rem; margin-top: .35rem; }
.tpi-directory-card__meta { color: var(--tpi-muted); display: block; font-size: .7rem; margin-top: .25rem; }
.tpi-directory-card__secondary { border-top: 1px solid var(--tpi-line); display: grid; gap: .08rem; margin-top: .55rem; padding-top: .5rem; }
.tpi-directory-card__secondary small { color: var(--tpi-muted); font-size: .66rem; }
.tpi-directory-card__secondary strong { font-size: .78rem; }
.tpi-directory-card__arrow { color: var(--tpi-muted); font-size: 1.2rem; transition: transform .16s ease; }
.tpi-directory-card:hover .tpi-directory-card__arrow { transform: translateX(3px); }
.tpi-directory__note { border-top: 1px solid var(--tpi-line); color: var(--tpi-muted); font-size: .84rem; line-height: 1.55; margin: 28px 0 0; padding-top: 16px; }

@media (max-width: 680px) {
  .tpi__budget { grid-template-columns: 1fr; }
  .tpi__signals { grid-template-columns: 1fr; }
  .tpi__summary { border-left-width: 4px; }
  .tpi__scale { margin-left: 0; margin-right: 0; }
  .tpi__bars li { grid-template-columns: 1fr 3.5rem; }
  .tpi__bar-label { grid-column: 1 / -1; }
  .tpi-directory__grid { grid-template-columns: 1fr; }
}

@media (min-width: 681px) and (max-width: 980px) {
  .tpi-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tpi * { scroll-behavior: auto !important; }
}