/* ═══════════════════════════════════════════════════════════════════════════
   KK — Progi rabatowe. Pasek postępu do progu rabatu.

   Wygląd ma mówić językiem sklepu, a nie językiem wtyczki. Stąd trzy rzeczy
   podpatrzone w motywie i użyte tu ponownie:
     · złoty wersalik z kreską — jak „ARTUR · WŁADCA LEGENDARNY" nad nazwą produktu
       (`.kk-produkt__panowanie` + `.kk-kreska`),
     · romb obrócony o 45° — jak punktory w pasku zaufania (`.kk-zaufanie li::before`),
     · krój szeryfowy na zdaniu, które niesie treść.
   Klasy mają własne reguły, nie `.kk-*` z motywu: wtyczka ma wyglądać sensownie
   także wtedy, gdy motyw się zmieni (tokeny mają wartości zapasowe).

   Przedrostek `kkpr-`/`kkpr__`, żeby nie zderzyć się z motywem ani z WooCommerce.
   ═══════════════════════════════════════════════════════════════════════════ */

.kkpr{
  margin:1.35rem 0 0;
  padding:.95rem 1.15rem 1.1rem;
  background:linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.035));
  border:1px solid rgba(201,162,39,.34);
  border-radius:var(--kk-r-m, 8px);
  font-family:var(--kk-tekst, system-ui, sans-serif);
}

/* ── wersalik z kreską ────────────────────────────────────────────────── */
.kkpr__naglowek{display:flex;align-items:center;gap:.8rem;margin:0 0 .45rem}
.kkpr__etykieta{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kk-zloto-c, #7A5E12);white-space:nowrap;
}
.kkpr__kreska{flex:1;height:1px;background:rgba(201,162,39,.45)}

/* ── zdanie, na którym kupujący podejmuje decyzję ─────────────────────── */
.kkpr__glowny{
  margin:0;
  font-family:var(--kk-naglowki, Georgia, serif);
  font-size:1.0625rem;line-height:1.35;
  color:var(--kk-zielen, #14372B);
}
.kkpr__glowny strong{color:var(--kk-zloto-c, #7A5E12);font-weight:700;white-space:nowrap}
.kkpr__glowny .woocommerce-Price-amount{font-size:inherit;color:inherit;font-weight:inherit}
/* Romb zapala się dopiero wtedy, gdy rabat naprawdę jest. */
.kkpr--ma-rabat .kkpr__glowny::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:.6rem;
  transform:rotate(45deg) translateY(-1px);
  background:var(--kk-zloto, #C9A227);
}

/* ── tor ──────────────────────────────────────────────────────────────── */
.kkpr__tor{
  position:relative;height:6px;margin:1.05rem 0 1.95rem;
  background:rgba(20,55,43,.13);border-radius:999px;
}
.kkpr__wypelnienie{
  position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg, var(--kk-zielen, #14372B), var(--kk-zielen-j, #1E5240));
  transition:width .4s cubic-bezier(.2,.7,.4,1);
}
.kkpr--ma-rabat .kkpr__wypelnienie{
  background:linear-gradient(90deg, var(--kk-zielen-j, #1E5240) 15%, var(--kk-zloto, #C9A227));
}

/* ── progi: romby na torze, podpisy pod nim ───────────────────────────── */
.kkpr__prog{
  position:absolute;top:-3px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  line-height:1.15;text-align:center;
}
.kkpr__prog--koniec{transform:none;align-items:flex-end;text-align:right}
.kkpr__prog::before{
  content:"";width:12px;height:12px;flex:none;transform:rotate(45deg);
  background:var(--kk-pergamin, #F7F2E8);
  box-shadow:0 0 0 1.5px var(--kk-kraft, #C09C78);
}
.kkpr__prog--zdobyty::before{
  background:var(--kk-zloto, #C9A227);
  box-shadow:0 0 0 1.5px var(--kk-zloto-c, #7A5E12);
}
.kkpr__prog-procent{
  margin-top:.5rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kk-szary, #57503F);
}
.kkpr__prog-kwota{
  font-size:.6875rem;color:var(--kk-szary, #57503F);opacity:.8;
  font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
}
.kkpr__prog--zdobyty .kkpr__prog-procent{color:var(--kk-zloto-c, #7A5E12)}

/* ── linia faktów pod torem ───────────────────────────────────────────── */
.kkpr__stan{
  margin:0;padding-top:.15rem;
  font-size:.8125rem;color:var(--kk-szary, #57503F);
  font-variant-numeric:tabular-nums lining-nums;
  border-top:1px solid rgba(201,162,39,.22);
}
.kkpr__stan .woocommerce-Price-amount{font-size:inherit;color:var(--kk-atrament, #1C1A16);font-weight:600}

/* ── koszyk: ten sam pasek w węższej kolumnie podsumowania ────────────── */
.cart_totals .kkpr{margin:0 0 1.25rem}
.cart_totals .kkpr__glowny{font-size:1rem}
.cart_totals .kkpr__stan{white-space:normal}

@media (max-width:480px){
  .kkpr{padding:.85rem .95rem 1rem}
  .kkpr__glowny{font-size:1rem}
  /* Kwota progu ZOSTAJE. Pierwsza wersja ją na telefonie chowała, a to właśnie
     ona odpowiada na pytanie „ile mam dobrać" — sam procent tego nie mówi.
     Zmierzone przy 375 px: znaczniki stoją 114 px od siebie, napis „300 zł"
     ma ~34 px, więc miejsca jest dość. */
  .kkpr__prog-kwota{font-size:.625rem}
}