/* =============================
   LAYOUT STRONY POROWNANIA
============================= */

.strona-porownania {
  padding: clamp(22px, 3vw, 34px) 0;
}

/* =============================
   OVERVIEW — WYKRES + WYNIKI
============================= */

.siatka-porownania {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.blok-wykresu {
  grid-column: 2 / 4;
}

#container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

#canvas {
  display: block;
  width: 100%;
}

.karta-wyniku {
  padding: 16px 18px;
}

.karta-wyniku .nazwa-domeny {
  font-weight: 800;
  font-size: 1rem;
  color: var(--tekst);
  display: block;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.karta-wyniku .wynik-liczba {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cta);
  display: block;
  margin-bottom: 8px;
}

.karta-wyniku .pasek-wyniku {
  display: block;
  width: 100%;
  height: 10px;
  background: var(--karta2);
  border: 1px solid var(--obrys);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.karta-wyniku .wypelnienie-paska {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
}

.karta-wyniku.wynik-1 .wypelnienie-paska { background: var(--ziel); }
.karta-wyniku.wynik-2 .wypelnienie-paska { background: var(--zolty); }

.karta-wyniku .data-wyniku {
  font-size: .82rem;
  color: var(--muted);
}

/* =============================
   UDOSTEPNIANIE
============================= */

.udostepnij-porownania {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 18px;
}

.udostepnij-porownania span {
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.udostepnij-porownania a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--obrys);
  background: var(--karta2);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--tekst);
}

.udostepnij-porownania a:hover {
  background: var(--surface);
}

/* =============================
   TABELA POROWNANIA
============================= */

.tabela-porownania {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.tabela-porownania td {
  width: 50%;
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid var(--obrys);
  font-size: .9rem;
}

.tabela-porownania td:first-child {
  border-right: 1px solid var(--obrys);
}

/* =============================
   SEKCJE SEO BOXOW
============================= */

.karta-sekcji-por { padding: 18px; }

/* =============================
   STRONA SITE-VS-SITE (formularz)
============================= */

.strona-svs {
  padding: clamp(22px, 3vw, 34px) 0;
}

.uklad-svs {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 22px;
  align-items: start;
}

.uklad-svs.bez-bocznej {
  grid-template-columns: 1fr;
}

.karta-svs {
  padding: 22px;
}

.naglowek-svs {
  margin: 0 0 18px;
}

.naglowek-svs h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.naglowek-svs p {
  color: var(--muted);
  margin: 0;
  font-size: .95rem;
}

.formularz-svs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pole-svs input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--obrys);
  background: var(--karta);
  color: var(--tekst);
  font-weight: 700;
  font-size: .95rem;
  box-sizing: border-box;
}

.pole-svs input:focus {
  outline: none;
  border-color: var(--cta);
}

.pole-svs input[readonly] {
  opacity: .7;
  cursor: not-allowed;
}

.akcja-svs {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

#seoBox { margin-top: 14px; }

/* =============================
   WYROZNIKI (ul#featured)
============================= */

.wyrozniki {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.wyroznik {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--obrys);
  background: var(--karta2);
}

.ikona-wyroznika {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--a) 20%, transparent),
    color-mix(in oklab, var(--b) 20%, transparent));
  color: var(--cta);
  flex-shrink: 0;
}

.wyroznik h4 {
  font-size: .95rem;
  font-weight: 800;
  margin: 0;
}

.wyroznik p {
  font-size: .88rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* =============================
   BANER REKLAMY
============================= */

.blok-bannera {
  width: 100%;
  margin-bottom: 18px;
}

.banner-240x300 {
  width: min(250px, 100%);
  min-height: 32px;
  margin-inline: auto;
}

/* =============================
   BOKS BLEDU
============================= */

.boks-blad-por {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* =============================
   RESPONSIVE
============================= */

@media (max-width: 980px) {
  .siatka-porownania {
    grid-template-columns: 1fr 1fr;
  }

  .blok-wykresu {
    grid-column: 1 / 3;
  }

  .wyrozniki {
    grid-template-columns: 1fr 1fr;
  }

  .uklad-svs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .siatka-porownania {
    grid-template-columns: 1fr;
  }

  .blok-wykresu {
    grid-column: auto;
  }

  .wyrozniki {
    grid-template-columns: 1fr;
  }
}

.solveMsg { display: none; }

/* DEBUGOWANIE: porownaj.css v1 - tenSEO */