/* ==========================================================================
   2Click Revenue · Ofertowanie · sekcje własne podstrony (prefiks .o-)
   Wspólne bloki podstron modułów: css/b2b.css (scope body.page-module);
   okna HTML w kartach (zoom do pola ekranu, komponenty .c-*): css/crm.css + js/crm.js
   (body ma klasę page-winzoom). Hero = eksport ekranu „Oferty” z prototypu (dane demonstracyjne).
   ========================================================================== */

/* ---------- tekstury kart: sekwencja odcieni jak w stosie B2B ---------- */
#o01{--card-grad:url(../img/grad/cards/m01.webp)}
#o02{--card-grad:url(../img/grad/cards/m04.webp)}
#o03{--card-grad:url(../img/grad/cards/m07.webp)}
#o04{--card-grad:url(../img/grad/cards/m12.webp)}
#o05{--card-grad:url(../img/grad/cards/m11.webp)}
#o06{--card-grad:url(../img/grad/cards/m08.webp)}
#o07{--card-grad:url(../img/grad/cards/m09.webp)}
#o08{--card-grad:url(../img/grad/cards/m18.webp)}
#o09{--card-grad:url(../img/grad/cards/m02.webp)}
#o10{--card-grad:url(../img/grad/cards/m03.webp)}
#o11{--card-grad:url(../img/grad/cards/m05.webp)}
#o12{--card-grad:url(../img/grad/cards/m10.webp)}

/* ---------- hero: chip „dane demonstracyjne” na pasku okna ---------- */
.p-demo{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(30,38,46,.72);color:#fff;font-size:11px;line-height:1;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;backdrop-filter:blur(6px)}
.p-demo--bar{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:var(--paper-3);color:var(--muted);backdrop-filter:none}
.b-card__screen .p-demo{position:absolute;left:16px;bottom:14px;z-index:3}

/* ---------- hub ekosystemu: Ofertowanie = etap 03 Revenue Flow ---------- */
.page-oferty .b-hub__dots::after{width:calc(28.57% + 2px)}

/* ---------- okna: pozycje oferty, warianty, widok klienta ---------- */
.b-win__table--lines .h,.b-win__table--lines .r{grid-template-columns:2.2fr .6fr 1fr 1fr 1.3fr}
.b-win__table--lines .r .old{color:var(--muted);text-decoration:line-through;font-size:12px;margin-right:6px}
.b-win__table--rep .h,.b-win__table--rep .r{grid-template-columns:1.6fr .8fr .8fr 1fr 1.2fr}
.o-total{display:flex;justify-content:flex-end;align-items:baseline;gap:18px;padding:8px 12px 0;font-size:13px;color:var(--muted)}
.o-total b{font-size:20px;line-height:26px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.c-kan--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-kan__col.is-rec{box-shadow:inset 0 0 0 1.5px var(--accent);background:#fff}
.c-kan__col.is-rec .c-kc{background:var(--paper-2)}
.c-kan__h .rec{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:999px;background:var(--accent-tint);color:var(--accent-text);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.o-client{display:flex;flex-direction:column;gap:12px}
.o-client__h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 14px;border-radius:12px;background:var(--paper-2)}
.o-client__h b{display:block;font-size:16px;line-height:22px;font-weight:500}
.o-client__h span{font-size:13px;color:var(--muted)}
.o-line{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;background:var(--paper-2);font-size:13px;line-height:18px}
.o-line .cb{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;background:#fff;color:#fff}
.o-line .cb.is-on{background:var(--ink);border-color:var(--ink)}
.o-line .cb .lucide{width:12px;height:12px}
.o-line .t{display:flex;flex-direction:column;min-width:0}
.o-line .t b{font-weight:500;font-size:14px;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-line .t span{color:var(--muted)}
.o-line .amt{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.o-line.is-off{opacity:.55}
.o-client__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.o-client__sum b{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.o-client__btns{display:flex;gap:8px;flex-wrap:wrap}
.o-client__btns .b-pill{height:32px;padding:0 14px}
.c-bar .v.warn{color:#A6432F}
.c-bar .trk i.warn{background:#D9A09A}

/* ---------- responsywność ---------- */
@media (max-width:700px){
  .b-win__table--lines .h,.b-win__table--rep .h{display:none}
  .b-win__table--lines .r,.b-win__table--rep .r{grid-template-columns:1fr 1fr;gap:4px 12px}
  .b-win__table--lines .r > span:first-child,.b-win__table--rep .r > span:first-child{grid-column:1 / -1}
  .c-kan--3{grid-template-columns:1fr}
  .o-client__h{flex-direction:column}
  .o-line{grid-template-columns:24px minmax(0,1fr);row-gap:4px}
  .o-line .amt,.o-line .xc{grid-column:2}
  .b-card__screen{flex-wrap:wrap;row-gap:8px}
  .b-card__screen .p-demo{position:static;flex:0 0 100%;height:auto;padding:0;background:none;color:var(--muted);backdrop-filter:none}
  .p-demo--bar{display:none}
}