/* ============================================================================
   9-telefon/24-oferta-okno.css — TELEFON: okno „Oferta konsultacji” (wzór: Konsultacje.html, `.ramka.tel` = telefon pionowo, `.ramka.telp` = poziomo).
   Wyłącznie :root[data-ui="mobile"]; pionowo = bez [data-telefon-poziomo]. Bazowy wygląd: 4-widoki/21c-oferta-okno.css. Zero !important.
   Pionowo: zakładki wersji w trzech kolumnach, Kopiuj link + Generuj prezentację w jednym wierszu; pod panelem ceny przyklejony pasek:
   podpis stanu, przełącznik „Wszystkie | Wybrane” i wiersz Szukaj + „Filtry (n)”; karty w jednej kolumnie. Poziomo: karty w dwóch kolumnach,
   pasek wersji i pasek filtrów w jednym wierszu.
   ============================================================================ */

:root[data-ui="mobile"] .modal.offer-modal.ofk-okno > .modal-form { display: block; overflow: auto; padding: var(--s-3) var(--s-4); }
:root[data-ui="mobile"] .modal.ofk-okno > .modal-form > * + * { margin-top: var(--s-2); }
:root[data-ui="mobile"] .modal.ofk-okno > .modal-form > .ofk-k { display: flex; flex-direction: column; gap: var(--s-2); }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno > header p { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.ofk-okno > header h2 { font-size: var(--t-md); }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno > header { min-height: 0; padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }
/* stopka jak we wzorze: „Anuluj” po lewej, akcja główna po prawej, przyciski o naturalnej szerokości (program: na telefonie każdy przycisk na całą szerokość) */
:root[data-ui="mobile"] #modal-root .modal.ofk-okno > footer { flex-wrap: wrap; align-items: center; padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--bezpieczny-dol)); }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno > footer > .ofd-sp { display: block; flex: 1 1 0; min-width: 0; }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno > footer > .button { flex: 0 0 auto; min-height: var(--h-control); height: var(--h-control); font-size: var(--t-base); line-height: var(--lh-base); white-space: nowrap; }

/* === pasek wersji === */
:root[data-ui="mobile"] .ofv { flex-direction: column; align-items: stretch; }
:root[data-ui="mobile"] .ofv-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno .ofv-t > button[role="tab"] { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 1px; width: 100%; min-width: 0; min-height: 56px; padding: var(--s-1) var(--s-2); overflow: hidden; }
:root[data-ui="mobile"] .ofv-t > button small { flex-wrap: wrap; row-gap: 0; white-space: normal; }
:root[data-ui="mobile"] .modal.ofk-okno .ofv .ofv-n { min-height: 52px; padding: 0 var(--s-2); gap: var(--s-1); }
:root[data-ui="mobile"] .ofv-p { margin-left: 0; }
:root[data-ui="mobile"] .modal.ofk-okno .ofv-p .button { flex: 1; justify-content: center; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofk-okno > header { align-items: center; min-height: 52px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofk-okno > footer { padding: var(--s-1) var(--s-3) calc(var(--s-1) + var(--bezpieczny-dol)); }
/* 24.10.2026 (przegląd telefonu, v2): poziomo (390 px wysokości) nagłówek wersji, panel ceny i pasek wyboru zajmowały ~280 px, a karty ofert dostawały ~50 px.
   Zwarty układ: zakładki wersji w jednej linii i przewijane (tak samo wysokie jak przyciski, 44 px), panel ceny w jednej linii (równanie + przyciski, plakietka stanu
   zawija się dopiero, gdy brakuje szerokości), podpis stanu w pasku wyboru w jednej linii, mniejsze odstępy okna. Cele dotyku zostają 44 px. */
:root[data-ui="mobile"][data-telefon-poziomo] .modal.offer-modal.ofk-okno > .modal-form { padding: var(--s-2) var(--s-4); }
:root[data-ui="mobile"][data-telefon-poziomo] .modal.ofk-okno > .modal-form > * + * { margin-top: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .ofv { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; padding-bottom: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .ofv-l { display: flex; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .ofv-l::-webkit-scrollbar { display: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .ofv-l > * { flex: none; }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofk-okno .ofv-t > button[role="tab"] { width: auto; min-width: 116px; min-height: var(--h-control); padding: var(--s-1) var(--s-3); }
:root[data-ui="mobile"][data-telefon-poziomo] .modal.ofk-okno .ofv .ofv-n { min-height: var(--h-control); padding: 0 var(--s-3); gap: var(--s-2); }
:root[data-ui="mobile"][data-telefon-poziomo] .ofv-p { margin-left: auto; }
:root[data-ui="mobile"][data-telefon-poziomo] .modal.ofk-okno .ofv-p .button { flex: 0 0 auto; }

/* === pasek przyklejony: podpis stanu, przełącznik, Szukaj + „Filtry” === */
:root[data-ui="mobile"] .ofk-k > .ofk-sz { overflow: visible; margin: 0; padding: 0; }
:root[data-ui="mobile"] .ofk-st { position: sticky; top: calc(var(--s-3) * -1); z-index: 3; display: flex; flex-direction: column; gap: var(--s-2); margin: 0 -3px; padding: var(--s-2) 3px; border-bottom: 1px solid var(--line); background: var(--okno-tlo); box-shadow: 0 6px 8px -8px color-mix(in srgb, var(--text) 35%, transparent); }
:root[data-ui="mobile"] .ofk-st > .ofk-pk { order: -1; }
:root[data-ui="mobile"] .ofk-stl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); order: -2; color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] .ofk-stl b { color: var(--text); }
:root[data-ui="mobile"] .ofk-stl span + span::before { content: "· "; }
:root[data-ui="mobile"] .ofk-stl em { color: var(--warn-strong); font-style: normal; font-weight: var(--w-strong); }
:root[data-ui="mobile"] .ofk-pod { display: none; }
:root[data-ui="mobile"] .ofk .ofk-zak { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
:root[data-ui="mobile"] #modal-root .modal .segmented.ofk-zak > button { padding: 0 var(--s-2); font-size: var(--t-sm); }
:root[data-ui="mobile"] .ofk-zd { display: none; }
:root[data-ui="mobile"] .ofk-k .ofk-fl { display: flex; flex-direction: row; align-items: center; align-self: stretch; gap: var(--s-2); max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; }
:root[data-ui="mobile"] .ofk-ft, :root[data-ui="mobile"] .ofk-fl > .ofk-gr { display: none; }
:root[data-ui="mobile"] .ofk-fl .ofk-fk { display: block; flex: 1 1 auto; min-width: 0; }
:root[data-ui="mobile"] #modal-root .modal.ofk-okno .ofk-fl .ofk-fk label { display: none; }
:root[data-ui="mobile"] .ofk-fl .ofk-fk > .ofk-f:not(:first-child) { display: none; }
:root[data-ui="mobile"] .modal.ofk-okno .ofk-wiecej { display: inline-flex; flex: none; }
:root[data-ui="mobile"] .ofk-w-t { display: none; }
:root[data-ui="mobile"] .ofk-w-m { display: inline; }
:root[data-ui="mobile"] .ofk[data-widok="wyb"] .ofk-fl { display: none; }   /* „Wybrane”: bez filtrów */
:root[data-ui="mobile"][data-telefon-poziomo] .ofk-st { flex-direction: row; align-items: center; padding-block: var(--s-1); }
:root[data-ui="mobile"][data-telefon-poziomo] .ofk-st > .ofk-pk { flex: none; }
:root[data-ui="mobile"][data-telefon-poziomo] .ofk .ofk-zak { width: auto; }
:root[data-ui="mobile"][data-telefon-poziomo] .ofk-st > .ofk-fl { flex: 1 1 auto; }
:root[data-ui="mobile"][data-telefon-poziomo] .ofk-stl { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 0 var(--s-2); order: 0; line-height: 1.2; white-space: nowrap; }

/* === karty === */
:root[data-ui="mobile"] .ofk-g { grid-template-columns: minmax(0, 1fr); }
:root[data-ui="mobile"][data-telefon-poziomo] .ofk-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-ui="mobile"] .modal.ofk-okno .ofk-cbt { height: var(--h-control); }