/* ============================================================================
   21b-oferta-dodatki.css — OKNO OFERTY KONSULTACJI: panel „Cena i koszty”, „Podsumowanie kosztów”, „Wyślij koszty oferty”,
   „Zwolnij dodatki oferty” (wzór: PROJEKT-OKIEN\artefakt\Konsultacje.html, okna_css.txt B53 + „KOSZTY OFERTY”, 18.10.2026)
   ----------------------------------------------------------------------------
   Kod: okna/oferta-dodatki.js, oferta-dodatki-koszty.js, oferta-dodatki-zwolnienie.js. Telefon: 9-telefon/23-oferta-dodatki.css
   (wyłącznie :root[data-ui="mobile"]). Mapa tokenów (wzór → program): --pow→--surface, --pow-2/3→--surface-2/3, --linia→--line,
   --linia-2→--line-soft, --ramka→--line-strong, --tusz→--text, --tusz-2→--text-muted, --tusz-3→--text-faint, --ak→--accent,
   --ak-tlo→--accent-soft, --bl→--danger, --bl-tlo→--danger-soft, --bl-ramka→--danger-ramka, --uw→--warn-strong, --uw-tlo→--warn-soft,
   --ok-tlo→--ok-soft, --des→--etap-design, --h-k→--h-control, --r-s→--r-sm, --r-l→--r-lg, --r-p→--r-pill.
   Progi: @media 1180 / 640 = kanon. Położenie i wysokość okien („duże”) — wyłącznie 3-komponenty/20-okna-polozenie.css. Zero !important.
   ============================================================================ */

/* === 1. MIEJSCE W OKNIE OFERTY: pod paskiem wersji (układ okna: 21c-oferta-okno.css) === */
[data-oferta-dodatki][hidden] { display: none; }

/* === 2. PANEL „CENA I KOSZTY”: jeden pasek — równanie ceny, plakietka stanu, akcje === */
.ofd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); }
.ofd-sp { flex: 1; }
.ofd-plakietki { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ofd > .ofd-plakietki { display: contents; }   /* w panelu plakietki są zwykłymi elementami paska (jak we wzorze: na telefonie rozciągają się na szerokość) */
.ofd-pust { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text-faint); font-size: var(--t-sm); }
.ofd-eq { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ofd-eq > i { font-size: var(--t-md); font-style: italic; font-weight: var(--w-regular); color: var(--text); }
.ofd-c { display: flex; flex-direction: column; min-width: 0; }
.ofd-c small { color: var(--text-faint); font-size: var(--t-xs); white-space: nowrap; }
.ofd-c > b { font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ofd-c > b.ofd-nie { color: var(--text-faint); font-weight: var(--w-bold); }
.ofd-w > b { color: var(--ok); font-size: var(--t-md); }
.ofd-w > b.ofd-nie { color: var(--text-faint); }
.ofd-w > b.ofd-bl { color: var(--danger); }
.ofd-akc { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); }
.ofd-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: var(--on-accent); font-size: var(--t-xs); font-weight: var(--w-strong); line-height: 12px; }

/* przyciski panelu i okien: wysokość i krój wzoru (.btn), „miękki” = przycisk jasny z kolorem akcentu */
.ofd .button, .modal.ofd-okno .button { height: var(--h-control); gap: var(--s-2); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-base); font-weight: var(--w-bold); white-space: nowrap; }
.ofd .button .icon, .modal.ofd-okno .button .icon { width: 16px; height: 16px; flex: none; }
.ofd .button.ofd-miekki, .modal.ofd-okno .button.ofd-miekki { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.ofd .button.ofd-miekki:hover, .modal.ofd-okno .button.ofd-miekki:hover { background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft)); }
.ofd .button[aria-disabled="true"], .modal.ofd-okno .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ofd .button.primary:disabled { border-color: var(--accent); background: var(--accent); color: var(--on-accent); opacity: .5; cursor: not-allowed; }   /* „Zwolnij…” przy kosztach niepoliczonych (wzór: .btn:disabled) */

/* === 3. PLAKIETKA STANU (wzór .ui-st) === */
.ofd-st { display: inline-flex; align-items: center; gap: var(--s-2); height: 26px; padding: 0 var(--s-2); border: 1px solid transparent; border-radius: var(--r); background: var(--surface-3); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); white-space: nowrap; }
.ofd-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ofd-st.got { background: var(--ok-soft); color: var(--ok); }
.ofd-st.wt { background: color-mix(in srgb, var(--etap-design) 14%, var(--surface)); color: var(--etap-design); }
.ofd-st.uw { background: var(--warn-soft); color: var(--warn-strong); }
.ofd-st.bl { background: var(--danger-soft); color: var(--danger); }

/* === 4. KLOCKI WSPÓLNE OKIEN: panel z nagłówkiem, baner, pole, pole km, pole wyboru === */
.modal.ofd-okno > header p { margin: 2px 0 0; color: var(--text-faint); font-size: var(--t-sm); }
.modal.ofd-okno > header .ofd-plakietki { margin-left: auto; }
.modal.ofd-okno > header .ofd-plakietki + .icon-button:last-child { margin-left: 0; }
.modal.ofd-okno > .modal-form.ofd-tresc { display: block; flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--s-4) var(--s-5); }
.modal.ofd-zw-okno, .modal.ofd-kz-okno { --okno-w: 1180px; }
.modal.ofd-wys-okno { --okno-w: 460px; }
.ofd-pan { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; margin: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ofd-pan > h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); }
.ofd-pan > h3 small { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-medium); }
.ofd-ost { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r); font-size: var(--t-sm); line-height: 1.45; }
.ofd-ost p { margin: 1em 0; font-size: var(--t-sm); }   /* jak we wzorze: akapit w banerze ma domyślny odstęp (baner jest wyższy niż sam tekst) */
.ofd-ost.uw { background: var(--warn-soft); color: var(--warn-strong); }
.ofd-ost.bl { background: var(--danger-soft); color: var(--danger); }
.ofd-ost.ok { background: var(--ok-soft); color: var(--ok); }
.ofd-ost.inf { background: var(--surface-2); color: var(--text-muted); }
.ofd-pod { margin: 0; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.45; }
.ofd-pole { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.modal.ofd-okno .ofd-pole > label { display: flex; align-items: center; gap: var(--s-1); color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-bold); }
.modal.ofd-okno .ofd-pole > label small { color: var(--text-faint); font-weight: var(--w-medium); }
.ofd-pole input, .ofd-pole select, .ofd-pole textarea { width: 100%; min-width: 0; height: var(--h-control); padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--t-base); }
.ofd-pole textarea { height: auto; min-height: calc(var(--h-control) * 2.4); padding: var(--s-2); line-height: 1.45; resize: vertical; }
.ofd-pole input:focus, .ofd-pole select:focus, .ofd-pole textarea:focus, .ofd-jedn:focus-within { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ofd-pole input:disabled, .ofd-pole select:disabled { background: var(--surface-3); color: var(--text-faint); }
.ofd-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.ofd-g .cala { grid-column: 1 / -1; }
.ofd-jedn { display: flex; align-items: center; height: var(--h-control); padding-right: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.modal.ofd-okno .ofd-jedn input:not([type="checkbox"]):not([type="radio"]) { width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 1px 2px; border: 0; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: var(--t-base); font-weight: var(--w-regular); text-align: right; }
.modal.ofd-okno .ofd-jedn input:focus { outline: none; box-shadow: none; }
.ofd-jedn span { color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); }
.ofd-jedn.zle { border-color: var(--danger); }
.modal.ofd-okno .ofd-chk { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); color: var(--text); font-size: var(--t-base); font-weight: var(--w-regular); cursor: pointer; }
.ofd-chk input { width: 18px; height: 18px; accent-color: var(--accent); }

/* === 5. „PODSUMOWANIE KOSZTÓW” i „WYŚLIJ KOSZTY OFERTY” === */
.ofd-kz { display: flex; flex-direction: column; gap: var(--s-3); }
.ofd-kz-b { margin: 0; }
.ofd-kz-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.ofd-kz-2 > .ofd-pan { gap: var(--s-3); }
.ofd-kz-l { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ofd-kz-l > li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: start; padding: var(--s-2) 0; border-top: 1px solid var(--line-soft); }
.ofd-kz-l > li:first-child { padding-top: 0; border-top: 0; }
.ofd-kz-l > li:last-child { padding-bottom: 0; }
.ofd-kz-i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.ofd-kz-i .icon { width: 14px; height: 14px; }
.ofd-kz-l > li.ok .ofd-kz-i { background: var(--ok-soft); color: var(--ok); }
.ofd-kz-l > li.brak .ofd-kz-i { background: var(--danger-soft); color: var(--danger); }
.ofd-kz-l > li.uwaga .ofd-kz-i { background: var(--warn-soft); color: var(--warn-strong); }
.ofd-kz-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); line-height: 1.4; }
.ofd-kz-t > b { font-weight: var(--w-bold); }
.ofd-kz-t > span { color: var(--text-muted); overflow-wrap: anywhere; }
.ofd-kz-t > small { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-kz-s { align-self: start; padding-top: 2px; font-size: var(--t-xs); font-weight: var(--w-strong); white-space: nowrap; }
.ofd-kz-l > li.ok .ofd-kz-s { color: var(--ok); }
.ofd-kz-l > li.brak .ofd-kz-s { color: var(--danger); }
.ofd-kz-l > li.uwaga .ofd-kz-s { color: var(--warn-strong); }
.ofd-kz-k { display: flex; flex-direction: column; }
.ofd-kz-r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ofd-kz-r:first-child { padding-top: 0; border-top: 0; }
.ofd-kz-r > span { display: flex; flex-direction: column; min-width: 0; color: var(--text-muted); }
.ofd-kz-r > span small { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-kz-r > b { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; text-align: right; }
.ofd-kz-r.razem { margin-top: var(--s-1); padding-top: var(--s-3); border-top: 2px solid var(--line); color: var(--text); }
.ofd-kz-r.razem > span { color: var(--text); font-weight: var(--w-strong); }
.ofd-kz-r.razem > span small { color: var(--text-faint); font-weight: var(--w-medium); }
.ofd-kz-r.razem > b { font-size: var(--t-md); font-weight: var(--w-strong); }
.ofd-kz-r.suma > span, .ofd-kz-r.suma > b { color: var(--text); font-weight: var(--w-strong); }
.ofd-kz-bd { display: inline-flex; align-self: flex-start; margin-top: 2px; color: var(--danger); font-size: var(--t-xs); font-style: normal; font-weight: var(--w-strong); }
.ofd-kz-tr { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-size: var(--t-sm); line-height: 1.45; }
.ofd-kz-tr b { color: var(--text); }
.ofd-kz-m { display: none; }
.ofd-kz-opc { display: flex; flex-direction: column; gap: var(--s-2); }
.ofd-kz-opc > button { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); align-items: start; width: 100%; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ofd-kz-opc > button:hover:not(:disabled) { background: var(--surface-2); }
.ofd-kz-opc > button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ofd-kz-opc > button:disabled { opacity: .55; cursor: default; }
.ofd-kz-opc > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofd-kz-rd { width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); box-sizing: border-box; }
.ofd-kz-opc > button[aria-checked="true"] .ofd-kz-rd { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 38%, var(--surface) 42%); }
.ofd-kz-ot { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-sm); line-height: 1.4; }
.ofd-kz-ot > b { font-size: var(--t-base); }
.ofd-kz-ot > span { color: var(--text-muted); }
.ofd-kz-ot > small { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-kz-ot > small.uw { color: var(--warn-strong); font-weight: var(--w-bold); }
.ofd-kz-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* === 6. „ZWOLNIJ DODATKI OFERTY” === */
.ofd-z { display: flex; flex-direction: column; gap: var(--s-3); }
.ofd-z-b { margin: 0; }
.ofd-z-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); margin: 0; }
.ofd-z-dl > div { display: flex; flex-direction: column; min-width: 0; }
.ofd-z-dl > .sz { grid-column: 1 / -1; }
.ofd-z-dl dt { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-z-dl dd { margin: 0; font-size: var(--t-sm); font-weight: var(--w-bold); overflow-wrap: anywhere; }
.ofd-z-tab { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ofd-z-w { display: grid; grid-template-columns: minmax(0, 2.2fr) .6fr .7fr 1fr .9fr 1fr; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ofd-z-w:first-child { border-top: 0; }
.ofd-z-h { background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.ofd-z-w > span { text-align: left; }
.ofd-z-w > .r { text-align: right; }
.ofd-z-w .num { font-variant-numeric: tabular-nums; }
.ofd-z-n { display: flex; flex-direction: column; min-width: 0; }
.ofd-z-n b { font-weight: var(--w-bold); }
.ofd-z-n small { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-z-km { width: 100%; min-width: 96px; }
.ofd-z-w > .r .ofd-z-km { max-width: 132px; margin-left: auto; }
.ofd-z-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: stretch; }
.ofd-z-zr { display: flex; align-items: center; min-height: var(--h-control); }
.ofd-z-os { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ofd-z-o { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: start; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); }
.ofd-z-o.bl { border-color: var(--danger-ramka); background: var(--danger-soft); }
.ofd-z-o.ok { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: var(--ok-soft); }
.ofd-z-o.inf { background: var(--surface-2); }
.ofd-z-oi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); }
.ofd-z-oi .icon { width: 16px; height: 16px; }
.ofd-z-o.bl .ofd-z-oi { color: var(--danger); }
.ofd-z-o.ok .ofd-z-oi { color: var(--ok); }
.ofd-z-ot { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); }
.ofd-z-ot small { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-z-pot { align-self: center; }
.ofd-z-sk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); margin: 0; }
.ofd-z-sk > div { display: flex; flex-direction: column; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--surface-2); }
.ofd-z-sk dt { color: var(--text-faint); font-size: var(--t-xs); }
.ofd-z-sk dd { margin: 0; font-size: var(--t-base); font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.ofd-z-sk .ofd-z-su { background: var(--accent-soft); }
.ofd-z-sk .ofd-z-su dd { color: var(--accent); }

/* === 7. TABLET (≤ 1180): panel zawija się, dwie kolumny kart, dotyk ≥ 44 === */
@media (max-width: 1180px) {
  .ofd { flex-wrap: wrap; }
  .ofd-z-dl, .ofd-z-sk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ofd-z-2 { grid-template-columns: minmax(0, 1fr); }
  .ofd .button, .modal.ofd-okno .button, .ofd-kz-opc > button { min-height: 44px; }
}