/* ============================================================================
   9-telefon/24b-oferta-porownanie.css — TELEFON: baner „Klient ma już link” i okno „Porównanie wersji ofert” (wzór: Konsultacje.html, `.ramka.tel`, `.ramka.telp`).
   Wyłącznie :root[data-ui="mobile"]; pionowo = bez [data-telefon-poziomo]. Bazowy wygląd: 4-widoki/21d-oferta-porownanie.css. Zero !important.
   Pionowo: karty wersji jedna pod drugą zamiast tabeli; poziomo: tabela (przewija się w bok). Baner: tekst nad przyciskiem, odstęp 8 / 12 jak okno oferty.
   ============================================================================ */

:root[data-ui="mobile"] .ofk-uw { padding: var(--s-2) var(--s-3); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .ofp-k { display: flex; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .ofp-t { display: none; }

/* === stopka: przycisk „⋯” 44 px jak reszta przycisków; telefon pionowo — menu na całą szerokość okna (wzór: panel 8 px od krawędzi) === */
:root[data-ui="mobile"] .modal.ofk-okno .ofk-st-wiecej .stopka-wiecej-przycisk { height: var(--h-control); min-height: var(--h-control); font-size: var(--t-base); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.ofk-okno > footer { position: relative; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .ofk-st-wiecej { position: static; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .ofk-st-wiecej .stopka-wiecej-panel { right: var(--s-2); left: var(--s-2); width: auto; min-width: 0; max-width: none; }

/* === okno „Porównanie wersji ofert” (wzór: .ramka.tel .ui-ok — nagłówek 12 / 8 / 8 / 16, tytuł 19 px zawija się, stopka 8 / 16, „Zamknij” rośnie obok rozpórki) === */
:root[data-ui="mobile"] #modal-root .modal.ofp-okno > header { min-height: 0; padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }
:root[data-ui="mobile"] #modal-root .modal.ofp-okno > header h2 { font-size: var(--t-lg); letter-spacing: var(--ls-tytul); }
:root[data-ui="mobile"] #modal-root .modal.ofp-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.ofp-okno > footer > .ofd-sp { display: block; flex: 1 1 0; min-width: 0; }
:root[data-ui="mobile"] #modal-root .modal.ofp-okno > footer > .button { flex: 1 1 0; min-height: var(--h-control); height: var(--h-control); font-size: var(--t-base); line-height: var(--lh-base); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofp-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.ofp-okno > header h2 { font-size: var(--t-md); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofp-okno > footer { padding: var(--s-1) var(--s-3) calc(var(--s-1) + var(--bezpieczny-dol)); }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.ofp-okno > footer > .button { flex: 0 0 auto; }