/* Cennik. Uklad tabeli i spotlight badge zostaja.
   Karty, panel planu i porownanie: --pg-* (light w :root, dark przy data-theme).
   Przycisk primary (.fe-btn bez ghost) zostaje w site.css. */

:root{
  --pg-ink:#0b1220;
  --pg-text:#3b4457;
  --pg-muted:#5c6579;
  --pg-card:#ffffff;
  --pg-card-line:rgba(10,20,40,.10);
  --pg-card-shadow:0 18px 50px rgba(15,25,50,.10);
  --pg-card-hover:#f7f9fd;
  --pg-pop-border:#0057FF;
  --pg-pop-bg:#ffffff;
  --pg-selected-ring:0 0 0 3px rgba(0,87,255,.18);
  --pg-amount-blue:#0047d6;
  --pg-ghost-fg:#0b1220;
  --pg-ghost-line:rgba(10,20,40,.20);
  --pg-ghost-hover:rgba(10,20,40,.05);
  --pg-detail-bg:#ffffff;
  --pg-detail-line:rgba(0,87,255,.28);
  --pg-col:rgba(0,87,255,.07);
  --pg-thead:#ffffff;
  --pg-thead-fg:#5c6579;
  --pg-thead-on:#e7f0ff;
  --pg-thead-on-fg:#0b1220;
  --pg-fade:var(--fe-bg);
  --pg-sticky:#ffffff;
  --pg-sticky-shadow:8px 0 12px -10px rgba(15,25,50,.22);
  --pg-yes:#0b6b3f;
  --pg-no:#3b4457;
  --pg-table-line:rgba(10,20,40,.08);
}
:root[data-theme="dark"]{
  --pg-ink:#ffffff;
  --pg-text:#c3c8d3;
  --pg-muted:#aeb4c2;
  --pg-card:#12161f;
  --pg-card-line:rgba(255,255,255,.08);
  --pg-card-shadow:none;
  --pg-card-hover:#161b26;
  --pg-pop-border:rgba(153,186,255,.45);
  --pg-pop-bg:#161b26;
  --pg-selected-ring:0 0 0 3px rgba(0,87,255,.35);
  --pg-amount-blue:#99baff;
  --pg-ghost-fg:#ffffff;
  --pg-ghost-line:rgba(255,255,255,.16);
  --pg-ghost-hover:rgba(255,255,255,.06);
  --pg-detail-bg:#12161f;
  --pg-detail-line:rgba(153,186,255,.3);
  --pg-col:rgba(0,87,255,.16);
  --pg-thead:#161b26;
  --pg-thead-fg:#aeb4c2;
  --pg-thead-on:#1a2c56;
  --pg-thead-on-fg:#ffffff;
  --pg-fade:#0a0c10;
  --pg-sticky:#161b26;
  --pg-sticky-shadow:8px 0 12px -10px rgba(0,0,0,.7);
  --pg-yes:#4dff9f;
  --pg-no:#aeb4c2;
  --pg-table-line:rgba(255,255,255,.07);
}

.fe-price > [data-spot] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border-radius: inherit;
  /* overflow:hidden na [data-spot] obcinal pierwsza litere h3 (ujemny letter-spacing) */
  padding: 6px 6px 0;
  margin: -6px -6px 0;
}

.fe-price,.price-card{
  background:var(--pg-card);
  border-color:var(--pg-card-line);
  color:var(--pg-ink);
  box-shadow:var(--pg-card-shadow);
}
.fe-price:hover,.price-card:hover{
  background:var(--pg-card-hover);
  border-color:var(--pg-pop-border);
}
.fe-price--pop,.price-card.pop{
  border-color:var(--pg-pop-border);
  background:var(--pg-pop-bg);
}
.fe-price.is-selected,.price-card.is-selected{
  border-color:var(--pg-pop-border);
  box-shadow:var(--pg-selected-ring),var(--pg-card-shadow);
}
.fe-price h3,.price-card h3{color:var(--pg-ink)}
.fe-price .who,.price-card .who{color:var(--pg-muted)}
.fe-price__amount,.price-card .amount{color:var(--pg-ink)}
.fe-price__amount span,.price-card .amount span{color:var(--pg-muted)}
.fe-price__amount--blue,.price-card .amount.blue{color:var(--pg-amount-blue)}
.fe-price .check-list li,.price-card .check-list li{color:var(--pg-text)}
.fe-price .check-list li::before,.price-card .check-list li::before{background:var(--pg-yes)}
.fe-price .fe-btn--ghost,.fe-price .fe-btn-ghost{
  color:var(--pg-ghost-fg);
  border-color:var(--pg-ghost-line);
  background:transparent;
}
.fe-price .fe-btn--ghost:hover,.fe-price .fe-btn-ghost:hover{
  color:var(--pg-ghost-fg);
  background:var(--pg-ghost-hover);
}

.fe-price .fe-btn {
  margin-top: auto;
  align-self: flex-start;
  max-width: 100%;
}

.fe-price__badge {
  z-index: 2;
}

#plan-detail,.detail-panel{
  background:var(--pg-detail-bg);
  border-color:var(--pg-detail-line);
  color:var(--pg-text);
  box-shadow:var(--pg-card-shadow);
}
#plan-detail h3,.detail-panel h3{color:var(--pg-ink)}
#plan-detail p,.detail-panel p{color:var(--pg-text)}

.cennik-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cennik-note {
  max-width: 760px;
}

.cennik-scroll {
  position: relative;
}

.cennik-table.fe-table-wrap {
  overflow-x: auto;
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  border-color:var(--pg-card-line);
}

.cennik-table table.compare{
  background:var(--pg-card);
  color:var(--pg-text);
}

.cennik-table .compare th,
.cennik-table .compare td{
  background:var(--pg-card);
  border-bottom-color:var(--pg-table-line);
  color:var(--pg-text);
}

.cennik-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pg-thead);
  color: var(--pg-thead-fg);
}

.cennik-table table.compare col.is-on{
  background:transparent;
}
.cennik-table table.compare:has(col:nth-child(2).is-on) td:nth-child(2),
.cennik-table table.compare:has(col:nth-child(3).is-on) td:nth-child(3),
.cennik-table table.compare:has(col:nth-child(4).is-on) td:nth-child(4){
  background:var(--pg-col);
}

.cennik-table .compare td.yes{color:var(--pg-yes);font-weight:700}
.cennik-table .compare td.no{color:var(--pg-no)}

.cennik-table table.compare:has(col:nth-child(2).is-on) thead th:nth-child(2),
.cennik-table table.compare:has(col:nth-child(3).is-on) thead th:nth-child(3),
.cennik-table table.compare:has(col:nth-child(4).is-on) thead th:nth-child(4) {
  background: var(--pg-thead-on);
  color: var(--pg-thead-on-fg);
}

.cennik-scroll::before,
.cennik-scroll::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 28px;
  pointer-events: none;
  z-index: 4;
}

.cennik-scroll::before {
  left: 1px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(90deg, var(--pg-fade), transparent);
  opacity: 0;
}

.cennik-scroll::after {
  right: 1px;
  border-radius: 0 22px 22px 0;
  background: linear-gradient(270deg, var(--pg-fade), transparent);
}

.cennik-scroll.is-left::before {
  opacity: 1;
}

.cennik-scroll.is-end::after,
.cennik-scroll:not(.is-overflow)::after,
.cennik-scroll:not(.is-overflow)::before {
  opacity: 0;
}

@media (max-width: 759.98px) {
  .cennik-table .compare tbody th,
  .cennik-table .compare thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--pg-sticky);
    box-shadow: var(--pg-sticky-shadow);
  }

  .cennik-table .compare thead th:first-child {
    z-index: 5;
    top: 0;
  }

  #plan-detail .fe-btn {
    height: auto;
    min-height: 42px;
    white-space: normal;
    text-align: left;
  }
}

@media (max-width: 359.98px) {
  .cennik-trust .fe-chip {
    height: auto;
    min-height: 40px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cennik-scroll::before,
  .cennik-scroll::after {
    transition: none;
  }
}