/* =====================================================================
   OrderSprinter UI · Design-Komponenten auf echten Seiten
   ---------------------------------------------------------------------
   Das Design-System (os-ui.css) ist für einen Prototyp-Container
   (.os-app, Container-Queries) gebaut. Hier dieselben Komponenten für
   echte Seiten: fixierte Sheets/Toasts, Media-Queries statt Container-
   Queries. Für alle Seiten (Login, Bestellung, Kasse).
   ===================================================================== */

html.os-ui .os-sheetwrap *, html.os-ui .os-toasts *, html.os-ui #os-dock *, html.os-ui #os-cartpanel *,
html.os-ui .os-catnav *, html.os-ui .os-net * { box-sizing: border-box; }
html.os-ui .os-sheetwrap button, html.os-ui #os-dock button, html.os-ui #os-cartpanel button,
html.os-ui .os-catnav button, html.os-ui .os-toasts button { font-family: var(--os-font); color: inherit; cursor: pointer; }
html.os-ui .os-sheetwrap :focus-visible, html.os-ui #os-dock :focus-visible, html.os-ui #os-cartpanel :focus-visible,
html.os-ui .os-catnav :focus-visible { outline: 3px solid var(--os-focus); outline-offset: 2px; }

/* ---------- Netz-Anzeige in der Kopfzeile ---------- */
html.os-ui .ui-page > .ui-header .os-net {
  position: absolute; top: 14px; right: calc(8px + var(--os-hit) + 8px);
  height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--os-r-pill); font-size: 13px; font-weight: 700; color: var(--os-on-bar);
  background: rgba(255, 255, 255, .08); font-family: var(--os-font);
}
html.os-ui .ui-page > .ui-header .os-net .os-ic { width: 18px; height: 18px; }
html.os-ui .os-net--ok .os-ic { color: #5fdc9c; }
html.os-ui .os-net--weak .os-ic { color: #f8bf5b; }
html.os-ui .ui-page > .ui-header .os-net--off { background: #b42318; color: #fff; }
html.os-ui .os-net__text { display: none; }
@media (min-width: 560px) { html.os-ui .os-net__text { display: inline; } }
/* Kopfzeilen-Buttons als Icon */
html.os-ui .ui-page > .ui-header a.os-barbtn-icon.ui-btn {
  width: var(--os-hit); padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0; text-indent: 0;
}
html.os-ui .ui-page > .ui-header a.os-barbtn-icon.ui-btn::after { display: none; }
html.os-ui .ui-page > .ui-header a.os-barbtn-icon .os-ic { width: 24px; height: 24px; }
html.os-ui .ui-page > .ui-header .ui-title { margin-right: 160px; }
@media (min-width: 560px) { html.os-ui .ui-page > .ui-header .ui-title { margin-right: 220px; } }
/* Status-Bildchen von OrderSprinter (Drucker, TSE) bleiben sichtbar, kleiner */
html.os-ui .ui-page > .ui-header .ui-title .printerstatus,
html.os-ui .ui-page > .ui-header .ui-title .tsestatus { height: 20px; }

/* ---------- Banner (Verbindung) ---------- */
html.os-ui #os-netbanner {
  position: fixed; top: var(--os-bar-h); left: 0; right: 0; z-index: 1100;
  display: flex; align-items: flex-start; gap: var(--os-sp-3);
  padding: var(--os-sp-3) var(--os-sp-4); font-family: var(--os-font); font-size: var(--os-fs-sm); line-height: 1.4;
  box-shadow: var(--os-shadow-1);
}
html.os-ui #os-netbanner[hidden] { display: none; }
html.os-ui #os-netbanner.os-banner--error { background: var(--os-danger-soft); color: var(--os-danger-ink); }
html.os-ui #os-netbanner.os-banner--warn { background: var(--os-warning-soft); color: var(--os-warning-ink); }

/* ---------- Toasts ---------- */
html.os-ui .os-toasts {
  position: fixed; z-index: 2000; left: var(--os-sp-3); right: var(--os-sp-3); top: calc(var(--os-bar-h) + 8px);
  display: flex; flex-direction: column; gap: var(--os-sp-2); pointer-events: none; font-family: var(--os-font);
}
@media (min-width: 760px) { html.os-ui .os-toasts { left: 50%; right: auto; width: 480px; transform: translateX(-50%); } }
html.os-ui .os-toasts .os-toast { position: static; pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
html.os-ui .os-toasts .os-toast.is-leaving { opacity: 0; transform: translateY(-8px); }

/* ---------- Bottom-Sheet ---------- */
html.os-ui .os-sheetwrap.os-scrim { position: fixed; inset: 0; z-index: 1500; font-family: var(--os-font); }
html.os-ui .os-sheetwrap .os-sheet { max-height: 90vh; padding-bottom: env(safe-area-inset-bottom); }
html.os-ui body.os-sheet-open { overflow: hidden; }
html.os-ui .os-sheet__foot { flex-wrap: wrap; }
html.os-ui .os-sheet__foot .os-sumrow { flex: 1 1 100%; }
html.os-ui .os-sheet__actions { flex: 1 1 100%; display: flex; gap: var(--os-sp-3); }
html.os-ui .os-sheet__actions > .os-btn { flex: 1; }
@media (min-width: 760px) {
  html.os-ui .os-sheetwrap.os-scrim { align-items: center; }
  html.os-ui .os-sheetwrap .os-sheet { max-width: 540px; max-height: 84vh; border-radius: var(--os-r-xl); }
  html.os-ui .os-sheetwrap .os-sheet__grab { display: none; }
  html.os-ui .os-sheetwrap .os-sheet__head { padding-top: var(--os-sp-3); }
}
html.os-ui .os-chips--wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
html.os-ui .os-chips--wrap .os-chip { min-height: 40px; font-size: 14px; }

/* ---------- Warenkorb-Zeile ---------- */
html.os-ui .os-line__ctrl .os-btn--ghost { min-height: 40px; padding: 0 var(--os-sp-3); font-size: 14px; gap: 6px; }
html.os-ui .os-line__ctrl .os-iconbtn { width: 44px; height: 44px; }
html.os-ui .os-line:last-child { border-bottom: 0; }

/* ---------- Druck: eigene Bedienelemente nie mitdrucken ---------- */
@media print {
  html.os-ui #os-paybar, html.os-ui #os-netbanner, html.os-ui .os-toasts, html.os-ui #os-dock,
  html.os-ui .os-sheetwrap, html.os-ui #os-catnav, html.os-ui #os-cartpanel, html.os-ui .ui-header .os-net,
  html.os-ui #os-paysuccess, html.os-ui #os-payhelper { display: none !important; }
}

/* ---------- Icons auf Haupt-Buttons (Design) ---------- */
html.os-ui #sendorder_btn::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z M11.5 13.5L20 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z M11.5 13.5L20 4'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #workprint_btn::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #gopaydesk_btn::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5M6 9v.01M18 15v.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5M6 9v.01M18 15v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui .os-changetable.ui-btn::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4L3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4L3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7'/%3E%3C/svg%3E") center / contain no-repeat; position: absolute; left: calc(50% - 80px); top: 50%; margin-top: -11px;}
html.os-ui #recordslistheader > b::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #payWithoutPrint::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #payWithPrint::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #ops > li > a.ui-btn::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M4 12h10M4 18h7M17 15l3 3 3-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M4 12h10M4 18h7M17 15l3 3 3-6'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #hostbutton::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui #minuscheapest::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Original-Bildchen durch Icons ersetzen */
html.os-ui .showcommentsbtn img, html.os-ui .stornoarticleswitchon img, html.os-ui li.os-li-nav img { display: none !important; }
html.os-ui .showcommentsbtn::before { content: ''; display: inline-block; flex: none; width: 24px; height: 24px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13 7l4 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4zM13 7l4 4'/%3E%3C/svg%3E") center / contain no-repeat; margin: 0; color: var(--os-text);}
html.os-ui .stornoarticleswitchon::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / contain no-repeat; margin: 0; color: var(--os-danger-ink);}
html.os-ui li.os-li-nav .typetop::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12M12 20V9M7 13l5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12M12 20V9M7 13l5-5 5 5'/%3E%3C/svg%3E") center / contain no-repeat; margin-right: 8px;}
html.os-ui li.os-li-nav .typehigher::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M6 12l6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; margin-right: 8px;}
html.os-ui li.os-li-nav .typetop::after { content: 'Ganz nach oben'; font-weight: 750; }
html.os-ui li.os-li-nav .typehigher::after { content: 'Eine Ebene zurück'; font-weight: 750; }
html.os-ui li.os-li-nav .typetop, html.os-ui li.os-li-nav .typehigher { color: var(--os-text); font-size: 15px; }

/* ---------- Status-Pills (Drucker, TSE, Aufgaben) statt Bildchen ---------- */
html.os-ui .ui-header .ui-title img.printerstatus, html.os-ui .ui-header .ui-title img.tsestatus, html.os-ui .ui-header .ui-title img.tasksstatus,
html.os-ui .ui-header .ui-title img.connectionstatus { display: none !important; }
html.os-ui .os-status { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-left: 8px; vertical-align: middle;
  border-radius: var(--os-r-pill); background: #b42318; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
html.os-ui .os-status[hidden] { display: none !important; }
html.os-ui .os-status .os-ic { width: 18px; height: 18px; }
html.os-ui .os-status--tasks { background: var(--os-warning); color: #1b1203; }
@media (max-width: 480px) { html.os-ui .os-status__text { display: none; } html.os-ui .os-status { padding: 0 7px; } }
html.os-ui .os-sheetwrap [data-os-proxy="sendorder_btn"]::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z M11.5 13.5L20 4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z M11.5 13.5L20 4'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui .os-sheetwrap [data-os-proxy="workprint_btn"]::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.os-ui .os-sheetwrap [data-os-proxy="gopaydesk_btn"]::before { content: ''; display: inline-block; flex: none; width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5M6 9v.01M18 15v.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5M6 9v.01M18 15v.01'/%3E%3C/svg%3E") center / contain no-repeat; }