/* =========================================================================
   koniecbutelek.pl — motyw kolorystyczny (nadpisuje zmienne z styles.css)
   Temat: koszt wody butelkowanej i czas zwrotu HO3 Home One + kalkulator.
   Ładowany PO styles.css. Zmienia akcenty, gradient hero i dokłada kilka
   drobnych klas pomocniczych używanych na tej stronie.
   ========================================================================= */
:root {
  --accent:      #4f46e5;
  --accent-dark: #4338ca;
  --accent-soft: #eceafe;
  --hero-1:      #6366f1;
  --hero-2:      #312a9e;
}

/* --- Przypis przy liczbach (COMPLIANCE 6.3) ------------------------------
   Informacja kwalifikująca musi być w tym samym polu percepcji co liczba,
   dlatego .stat-note stoi bezpośrednio pod blokiem z danymi, nie w stopce. */
.stat-note {
  margin-top: 16px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
  max-width: 78ch;
}
.split-body .stat-note { margin-top: 18px; }

/* --- Tabele: podpis i nagłówki wierszy ---------------------------------- */
.compare caption {
  caption-side: top;
  text-align: left;
  padding: 16px 18px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
}
.compare tbody tr:last-child th { border-bottom: none; }

/* --- Kalkulator: założenia widoczne przy suwakach (COMPLIANCE C37) ------
   Pełny rachunek po własnej stronie musi stać obok wyniku, nie w stopce.  */
.calc-h3 {
  margin-top: 26px;
  font-size: 1.02rem;
  color: var(--accent-dark);
}
.calc-assumptions {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.calc-assumptions li {
  position: relative;
  padding-left: 18px;
}
.calc-assumptions li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.calc-assumptions b { color: var(--ink); }
.calc .calc-result span { font-size: .92rem; line-height: 1.45; display: block; margin-top: 6px; }

/* --- Wiersz z ceną (COMPLIANCE C23–C24) --------------------------------- */
.price-line { margin-top: 24px; }
.price-line b { font-size: 1.5rem; color: var(--accent-dark); }
.price-line span { display: block; margin-top: 4px; font-size: .88rem; color: var(--muted); }

/* --- Blok wydawcy w stopce (COMPLIANCE sekcja 3) ------------------------ */
.publisher { margin-top: 40px; padding-top: 24px; border-top: 1px solid #1e293b; }

/* --- Etykieta reklamowa na przyklejonym CTA (COMPLIANCE 2.3) ------------
   Pasek oznaczenia zostaje na górze strony; na mobile sticky CTA jest
   widoczny stale, więc dostaje własną, krótką etykietę.                   */