/* ============================================================================
   21d-oferta-porownanie.css — OKNO „OFERTA KONSULTACJI”: stopka („Porównaj oferty”, „Zapisz jako nową wersję”, „⋯”), baner „Klient ma już link”
   i okno „Porównanie wersji ofert” (wzór: PROJEKT-OKIEN\artefakt\Konsultacje.html — `.dsg-sd` / `.dsg-wiec`, `.ofk-uw`, `.ofp-*`; zlecenie 19.10.2026).
   Kod: okna/oferta-konsultacji-nowa-wersja.js, -porownanie.js. Telefon: 9-telefon/24b-oferta-porownanie.css (wyłącznie :root[data-ui="mobile"]).
   Mapa tokenów (wzór → program): jak w 21c-oferta-okno.css; rozmiary tekstu --t-1→--t-xs, --t-2→--t-sm, --t-3→--t-base;
   grubość 500→--w-medium, 600→--w-bold, 700→--w-strong. Progi: @media 1180 = kanon. Zero !important.
   ============================================================================ */

/* === 1. STOPKA: „⋯” (tablet i telefon: reszta przycisków pod nim; komputer: pojemnik przezroczysty, przycisk ukryty — ui/stopka-wiecej.js) === */
.modal.ofk-okno .ofk-st-wiecej .stopka-wiecej-przycisk { width: var(--h-control); padding: 0; justify-content: center; }
.modal.ofk-okno .ofk-st-wiecej .stopka-wiecej-przycisk .icon { width: 16px; height: 16px; }
.ofk-mi { display: none; }
/* menu „⋯” jak we wzorze (.ui-mn): panel 210–300 px, pozycje bez ramek, 44 px, ikona 16 px, najpierw zapis kopii, potem porównanie */
:root:is([data-ui="mobile"], [data-ui="tablet"]) .ofk-st-wiecej .stopka-wiecej-panel { min-width: 210px; max-width: 300px; gap: 0; border-radius: var(--r); box-shadow: var(--cien-2); }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .ofk-st-wiecej .stopka-wiecej-panel > [data-action="ofk-jako-nowa"] { order: -1; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) #modal-root .modal.ofk-okno > footer .ofk-st-wiecej .stopka-wiecej-panel > .button { justify-content: flex-start; gap: var(--s-2); min-height: var(--h-control); height: auto; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: var(--t-base); font-weight: var(--w-regular); }
:root:is([data-ui="mobile"], [data-ui="tablet"]) #modal-root .modal.ofk-okno > footer .ofk-st-wiecej .stopka-wiecej-panel > .button:hover:not(:disabled) { background: var(--surface-3); }
:root:is([data-ui="mobile"], [data-ui="tablet"]) #modal-root .modal.ofk-okno > footer .ofk-st-wiecej .stopka-wiecej-panel > .button:disabled { color: var(--text-faint); opacity: 1; cursor: not-allowed; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .ofk-st-wiecej .ofk-mi { display: block; width: 16px; height: 16px; flex: none; }

/* === 2. BANER „KLIENT MA JUŻ LINK DO OFERTY K” (wzór .ui-ost.uw.ofk-uw) === */
[data-ofk-baner][hidden] { display: none; }
.ofk-uw { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); }
.ofk-uw > div { flex: 1 1 280px; }
.ofd-ost.ofk-uw p { margin: 0; }
.modal.ofk-okno .ofk-uw .button { height: var(--h-control); gap: var(--s-2); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base); white-space: nowrap; }
.modal.ofk-okno .ofk-uw .button:hover:not(:disabled) { background: var(--surface-2); }
.modal.ofk-okno .ofk-uw .button:disabled { opacity: .5; cursor: not-allowed; }
:root[data-ui="tablet"] .ofk-uw { padding: var(--s-2) var(--s-3); }

/* === 3. OKNO „PORÓWNANIE WERSJI OFERT” === */
.modal.ofp-okno { --okno-w: 1180px; --okno-tlo: var(--surface); }
#modal-root .modal.ofp-okno > header { align-items: flex-start; gap: var(--s-2); padding: var(--s-4) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
#modal-root .modal.ofp-okno > header h2 { font-family: var(--font-tytul); font-size: var(--t-lg); font-weight: var(--w-bold); line-height: var(--lh-base); letter-spacing: var(--ls-tytul); }
#modal-root .modal.ofp-okno > footer { padding: var(--s-2) var(--s-4); border-top-color: var(--line); }
#modal-root .modal.ofp-okno > footer .button { height: var(--h-control); padding: 0 var(--s-3); border-radius: var(--r); font-size: var(--t-base); font-weight: var(--w-bold); line-height: var(--lh-base); white-space: nowrap; }
#modal-root .modal.ofp-okno > footer .button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.modal.ofp-okno > .modal-form.ofd-tresc { padding: var(--s-3) var(--s-4); background: var(--okno-tlo); font-size: var(--t-md); line-height: var(--lh-base); }
.ofp-w { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); }
.ofp-w legend { padding: 0 var(--s-1); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.ofp-w label { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); padding: 0 var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.ofp-w input { width: 18px; height: 18px; accent-color: var(--accent); }
.ofp-pod { margin: 0; color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: 1.45; }
.ofp-pod.ofp-nota { margin-top: var(--s-3); font-size: var(--t-sm); line-height: var(--lh-base); }

/* tabela: komputer, tablet i telefon poziomo */
.ofp-t { max-width: 100%; overflow-x: auto; }
.ofp-tab { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ofp-tab th { padding: var(--s-2); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-bold); text-align: left; }
.ofp-tab td { padding: var(--s-2); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ofp-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.ofp-tab th, .ofp-tab td { white-space: nowrap; }
.ofp-tab thead th { text-align: right; }
.ofp-tab tbody th { background: transparent; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-medium); text-align: left; }
.ofp-tab .ofp-sum th, .ofp-tab .ofp-sum td { color: var(--text); font-weight: var(--w-strong); }
.ofp-tab .ofp-sek th { background: var(--surface-2); color: var(--text-faint); font-size: var(--t-xs); font-weight: var(--w-strong); }
.ofp-tab td.ofp-inna { background: var(--warn-soft); }
.ofp-tab .ofp-roz td { min-width: 170px; max-width: 260px; white-space: normal; }
.ofp-tab .ofp-pod { font-weight: var(--w-regular); }
.ofp-tab thead .ofp-pod { font-weight: var(--w-regular); }
.ofp-tag { display: inline-flex; align-items: center; height: 22px; margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: var(--w-strong); }
.ofp-tag.lo { background: var(--ok-soft); color: var(--ok); }
.ofp-tag.hi { background: var(--warn-soft); color: var(--warn-strong); }
.ofp-df { display: block; color: var(--warn-strong); font-size: var(--t-xs); font-weight: var(--w-bold); }

/* karty wersji: telefon pionowo (9-telefon/24b) */
.ofp-k { display: none; flex-direction: column; gap: var(--s-3); }
.ofp-kt { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ofp-kt > h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--t-base); font-weight: var(--w-strong); }
.ofp-dl { display: flex; flex-direction: column; margin: 0; }
.ofp-dl > div { display: flex; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.ofp-dl dd { margin: 0; text-align: right; }
.ofp-kt details summary { display: flex; align-items: center; min-height: 44px; color: var(--accent); font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; }