/* ============================================================================
   4e-dla-klienta-okno.css — OKNO „DLA KLIENTA” NA TELEFONIE (pion i poziom) wg wzoru (PROJEKT-OKIEN/artefakt, wersja 182, 19.10.2026)
   Reguły `.ramka.tel` / `.ramka.natywnie` wzoru = telefon w pionie, `.ramka.telp` = telefon poziomo. Tylko :root[data-ui="mobile"].
   ============================================================================ */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-bar { grid-template-columns:100px minmax(0,1fr) 44px }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk .dc-stg { grid-template-columns:minmax(0,1fr) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>header { align-items:center;flex-wrap:wrap } :root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>header .dk-stan-pill { order:4;flex:1 0 100% }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk .dc-stg { grid-template-columns:minmax(0,1fr) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dc-stg { grid-template-columns:repeat(2,minmax(0,1fr)) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dc-tt small { display:none }
:root[data-ui="mobile"] .dc-stg { grid-template-columns:repeat(2,minmax(0,1fr)) }
:root[data-ui="mobile"] .dc-tt small { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rail { flex-direction:row;overflow-x:auto;position:static;padding-bottom:var(--s-1) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rail>button { flex:none;width:auto;grid-template-columns:auto;padding:var(--s-1) var(--s-3);min-height:44px }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-ri { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rt small { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki { flex-direction:column;align-items:stretch;gap:var(--s-2) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li+li::before { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li { padding-right:0 }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-fakty { margin-left:0 }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-bar { grid-template-columns:110px minmax(0,1fr) 48px }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>footer { flex-wrap:wrap }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>footer .ui-sp { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>footer .button.primary { flex:1 1 100% }
:root[data-ui="mobile"][data-telefon-poziomo] #modal-root .modal.dk-okno>header .modal-subtitle { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-std .button { flex:1 1 100% }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rs { grid-template-columns:repeat(3,minmax(0,1fr)) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rn { grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline;padding-top:0 }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rw { grid-template-columns:repeat(2,minmax(0,1fr)) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rg { grid-template-columns:1fr }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-rb { grid-template-columns:1fr 1fr }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-inw { flex-wrap:wrap }
:root[data-ui="tablet"] .dk-fakty,:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-fakty { margin-left:0 }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>header .modal-subtitle { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki { flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:auto;gap:0;width:100%;padding-bottom:var(--s-1) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li { flex:none;padding-right:var(--s-4) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li+li::before { display:block;width:var(--s-3);margin:0 var(--s-2) 0 calc(var(--s-4) * -1 + var(--s-2)) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-top { gap:var(--s-2) }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li:not(.bie) { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kroki>li.bie::before { display:none }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .dk-kt small.dk-kkr { display:block }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) #modal-root .modal.dk-okno>header h2 { white-space:nowrap }
:root[data-ui="mobile"][data-telefon-poziomo] .dk-top { padding:var(--s-1) var(--s-3);gap:var(--s-1) var(--s-4) }
:root[data-ui="mobile"][data-telefon-poziomo] .dk-kroki { flex-wrap:nowrap;overflow-x:auto }
:root[data-ui="mobile"][data-telefon-poziomo] .dk-fakty { display:none }
:root[data-ui="mobile"][data-telefon-poziomo] .dk-kn { width:22px;height:22px }
:root[data-ui="mobile"]  #modal-root .modal.dk-okno .dk .segmented > button:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: var(--w-strong); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno>header h2 { font-size: var(--t-lg); } :root[data-ui="mobile"] #modal-root .modal.dk-okno .dc-lnki > .dk-lnk { display: inline-flex; align-items: center; text-align: left; min-height: var(--h-control); margin-block: calc((var(--h-control) - 1em * var(--lh-base)) / -2); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno .button { font-size: var(--t-base); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno>header { padding: var(--s-3) var(--s-2) var(--s-2) var(--s-4); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno>footer { padding: var(--s-2) var(--s-4); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno .button { height: 44px; min-height: 44px; padding-inline: var(--s-3); line-height: var(--lh-base); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno .segmented { gap: 3px; background: var(--surface-3); }
:root[data-ui="mobile"] #modal-root .modal.dk-okno .segmented > button { font-size: var(--t-sm); }
:root[data-ui="mobile"] #modal-root .modal .ui-jedn input:not([type="checkbox"], [type="radio"], [type="range"]) { min-height: 0; border: 0; border-radius: 0; padding: 1px 2px; }   /* pole w opakowaniu z jednostką: ramkę ma opakowanie, nie pole (skórka pól telefonu daje 46 px i ramkę) */