/*
 * IntelliPOS demo (demo.html).
 * Okvir stranice koristi postojeće tokene iz styles.css (--navy, --green ...).
 * Ekran aplikacije prati izgled IntelliPOS ESIR-a iz korisničke dokumentacije
 * (tamni bočni meni, zelena aktivna stavka, beli paneli, Source Sans).
 * Sve klase imaju prefiks ipd- da se ne sudaraju sa stilovima sajta.
 */

:root {
  --ipd-side: #0c1c27;
  --ipd-top: #112430;
  --ipd-green: #20d98a;
  --ipd-green-ink: #04261a;
  --ipd-red: #ef1d3c;
  --ipd-black: #090f14;
  --ipd-bg: #f3f5f8;
  --ipd-panel: #ffffff;
  --ipd-border: #dfe4ea;
  --ipd-field: #ced4da;
  --ipd-field-off: #e9ecef;
  --ipd-text: #262d33;
  --ipd-muted: #6c757d;
  --ipd-demo-bg: #fff3d4;
  --ipd-demo-ink: #6b4400;
  --ipd-coach: #18c47d;
  --ipd-app-font: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ipd-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Mobilni meni sajta stoji van ekrana i na telefonu širi stranicu. Ovde se to seče samo za demo stranicu. */
html { overflow-x: hidden; }
body.ipd-page { overflow-x: clip; }

.ipd-wide { width: min(1400px, calc(100% - 40px)); margin: 0 auto; }
body.ipd-modal-open { overflow: hidden; }
.ipd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ Uvod */

.ipd-intro {
  position: relative;
  padding: 40px 0 26px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 20%, rgba(34, 212, 135, .2), transparent 32%),
    linear-gradient(135deg, #061711 0%, #09251a 55%, #0d3324 100%);
}
.ipd-intro-copy { max-width: 860px; }
.ipd-intro h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; margin: 0 0 12px; }
.ipd-intro h1 .accent-text { display: inline; }
.ipd-intro .accent-text { color: var(--green-2); }
.ipd-lead { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ipd-safety {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0; padding: 12px 14px; max-width: 720px;
  border-radius: 14px; border: 1px solid rgba(255, 207, 112, .35);
  background: rgba(255, 207, 112, .08); color: #ffe6ad; font-size: 14.5px; line-height: 1.5; font-weight: 600;
}
.ipd-safety span { color: #ffcf70; }

.ipd-scenarios {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 20px;
}
.ipd-scenario {
  display: flex; gap: 12px; align-items: center; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .8); transition: background .2s ease, border-color .2s ease;
}
.ipd-scenario:hover { background: rgba(255, 255, 255, .09); }
.ipd-scenario:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }
.ipd-scenario.is-active { border-color: var(--green-2); background: rgba(34, 212, 135, .12); color: #fff; }
.ipd-scenario-num {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 14px;
  background: rgba(255, 255, 255, .1);
}
.ipd-scenario.is-active .ipd-scenario-num { background: var(--green-2); color: #052016; }
.ipd-scenario-text { display: grid; min-width: 0; }
.ipd-scenario-text strong { font-size: 14.5px; line-height: 1.25; }
.ipd-scenario-text small { font-size: 12px; color: rgba(255, 255, 255, .6); line-height: 1.3; }
.ipd-scenario.is-soon .ipd-scenario-text strong { color: rgba(255, 255, 255, .78); }

/* Početni ekran demoa: napredak, prezentacija, samostalno istraživanje */
.ipd-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 14px; border-radius: 8px; background: #fff; color: #0d1b16; font-weight: 800; }
.ipd-skip:focus { top: 12px; outline: 3px solid var(--green); }
.ipd-hub { margin-top: 20px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.ipd-hub-top { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.ipd-hub-progress { min-width: 220px; flex: 1 1 260px; }
.ipd-intro h2.ipd-hub-title { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.ipd-hub-progress p { margin: 4px 0 8px; color: #fff; font-weight: 800; font-size: 16px; }
.ipd-hub-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; max-width: 360px; }
.ipd-hub-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .4s ease; }
.ipd-hub-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.ipd-hub-actions .btn { min-height: 46px; }
.ipd-hub-link { border: 0; background: none; padding: 6px 2px; color: #dff8eb; font: 800 14.5px/1.2 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(223, 248, 235, .4); }
.ipd-hub-link:hover { color: #fff; }
.ipd-hub-link:focus-visible { outline: 2px solid var(--green-2); border-radius: 4px; }
.ipd-hub-reset { color: #ffd0c9; text-decoration-color: rgba(255, 208, 201, .4); font-weight: 700; }
.ipd-hub .ipd-scenarios { margin-top: 16px; }
.ipd-scenario { text-align: left; font-family: Inter, system-ui, sans-serif; cursor: pointer; }
.ipd-scenario.is-done .ipd-scenario-num { background: var(--green-2); color: #052016; }
.ipd-scenario.is-done small { color: var(--green-2); }

/* ------------------------------------------------------------------ Pozornica */

.ipd-stage-section { background: #e9eef1; padding: 28px 0 56px; scroll-margin-top: 78px; }
.ipd-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start;
}

.ipd-frame {
  container-type: inline-size;
  container-name: ipdframe;
  min-width: 0;
  border-radius: 14px; overflow: hidden;
  background: var(--ipd-bg);
  box-shadow: 0 24px 70px rgba(6, 23, 17, .18), 0 0 0 1px rgba(6, 23, 17, .08);
}

.ipd-demo-ribbon {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink);
  font: 600 13px/1.35 Inter, system-ui, sans-serif; border-bottom: 1px solid #f1dca4;
}
.ipd-demo-ribbon strong {
  padding: 2px 8px; border-radius: 999px; background: var(--ipd-demo-ink); color: var(--ipd-demo-bg);
  font-size: 11.5px; letter-spacing: .08em;
}

/* ------------------------------------------------------------------ Aplikacija */

.ipd-app {
  position: relative;
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  font-family: var(--ipd-app-font); font-size: 15px; color: var(--ipd-text);
  min-height: 640px;
}
.ipd-app.is-side-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.ipd-app.is-side-hidden .ipd-side { visibility: hidden; }
.ipd-app button, .ipd-app input, .ipd-app select { font-family: inherit; }

.ipd-side {
  display: flex; flex-direction: column;
  background: var(--ipd-side); color: #e8eef2; overflow: hidden;
}
.ipd-side-logo { display: grid; justify-items: center; gap: 6px; padding: 22px 10px 26px; }
.ipd-side-logo img { width: 54px; height: 54px; border-radius: 50%; }
.ipd-side-logo span { font-size: 21px; letter-spacing: .02em; color: #fff; }
.ipd-side-logo b { color: var(--ipd-green); font-weight: 700; }
.ipd-menu, .ipd-submenu { list-style: none; margin: 0; padding: 0; }
.ipd-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 20px; border: 0; background: transparent; color: inherit;
  font-size: 15.5px; text-align: left; cursor: pointer;
}
.ipd-menu button:hover { background: rgba(255, 255, 255, .06); }
.ipd-menu button:focus-visible { outline: 2px solid var(--ipd-green); outline-offset: -2px; }
.ipd-menu button.is-active { background: var(--ipd-green); color: var(--ipd-green-ink); font-weight: 600; }
.ipd-submenu button { padding: 9px 20px 9px 54px; font-size: 14.5px; color: #c9d4db; }
.ipd-side-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: #9fb0bc; }
.ipd-side-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .35); }

.ipd-main { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ipd-topbar {
  display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 0 18px;
  background: var(--ipd-top); color: #fff;
}
.ipd-burger {
  display: grid; gap: 4px; width: 32px; height: 32px; padding: 7px 5px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer;
}
.ipd-burger span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.ipd-burger:focus-visible { outline: 2px solid var(--ipd-green); }
.ipd-user { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; }
.ipd-pfr { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; white-space: nowrap; }
.ipd-pfr i { width: 10px; height: 10px; border-radius: 50%; background: #ffcf70; box-shadow: 0 0 0 3px rgba(255, 207, 112, .2); }

.ipd-content { display: grid; gap: 14px; padding: 14px 18px 22px; }
.ipd-panel { background: var(--ipd-panel); border: 1px solid var(--ipd-border); border-radius: 4px; padding: 12px 16px; min-width: 0; }
.ipd-app h2.ipd-h { margin: 4px 0 -6px; font-size: 21px; line-height: 1.2; letter-spacing: 0; font-weight: 600; color: #39424a; }
.ipd-app h2.ipd-h-sm { font-size: 17.5px; }
.ipd-h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #39424a; letter-spacing: 0; }

/* Zaglavlje kase */
.ipd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 200px; gap: 18px; align-items: start; }
.ipd-kv { margin: 0; min-width: 0; }
.ipd-kv-firm > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #edf0f3; }
.ipd-kv-firm dt, .ipd-dt { color: #4b555d; }
.ipd-kv-firm dd, .ipd-dd { margin: 0; font-weight: 600; text-align: right; }
.ipd-kv-doc { display: grid; gap: 6px; border-left: 1px solid #edf0f3; padding-left: 18px; }
.ipd-kv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid #edf0f3; }
.ipd-kv-row2 > div { display: flex; justify-content: space-between; gap: 8px; }
.ipd-kv-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.ipd-head-actions { display: grid; gap: 6px; }

/* Polja */
.ipd-label, .ipd-label-side { display: block; font-size: 13px; font-weight: 600; color: #3a434b; margin-bottom: 3px; }
.ipd-input {
  width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--ipd-field); border-radius: 4px;
  background: #fff; color: var(--ipd-text); font-size: 15px;
}
.ipd-input:disabled { background: var(--ipd-field-off); color: #6c757d; }
.ipd-input:focus { outline: none; border-color: #20b878; box-shadow: 0 0 0 3px rgba(32, 217, 138, .25); }
select.ipd-input { padding-right: 28px; }

/* Padajuća lista sa pretragom */
.ipd-select { position: relative; min-width: 0; }
.ipd-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  height: 36px; padding: 0 11px; border: 1px solid var(--ipd-field); border-radius: 4px;
  background: #fff; color: var(--ipd-text); font-size: 15px; cursor: pointer; text-align: left;
}
.ipd-select-btn i { font-style: normal; color: #6c757d; font-size: 12px; }
.ipd-select-btn.is-placeholder .ipd-select-value { color: #8a939b; }
.ipd-select-btn.is-disabled { background: var(--ipd-field-off); color: #8a939b; cursor: not-allowed; }
.ipd-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ipd-select-btn:focus-visible { outline: none; border-color: #20b878; box-shadow: 0 0 0 3px rgba(32, 217, 138, .25); }
.ipd-select.is-open .ipd-select-btn { border-color: #20b878; }
.ipd-select-pop {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px);
  min-width: 240px; background: #fff; border: 1px solid #aab4bd; border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16); padding: 6px;
}
.ipd-select-search { width: 100%; height: 34px; padding: 0 10px; border: 1px solid #aab4bd; border-radius: 3px; font: inherit; font-size: 15px; }
.ipd-select-search:focus { outline: none; border-color: #20b878; }
.ipd-select-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.ipd-select-list li { display: grid; gap: 1px; padding: 8px 10px; cursor: pointer; border-radius: 3px; font-size: 15px; }
.ipd-select-list li.is-active { background: var(--ipd-black); color: #fff; }
.ipd-select-list li.is-muted { color: #8a939b; }
.ipd-select-list li.is-active.is-muted { color: #c9d0d6; }
.ipd-select-list .ipd-select-none { cursor: default; color: var(--ipd-muted); font-size: 14px; }
.ipd-opt-meta { font-size: 12.5px; opacity: .72; }

/* Izbor artikla */
.ipd-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; align-items: end; }
.ipd-field { min-width: 0; }
.ipd-btn-block { width: 100%; }
.ipd-field-error {
  grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: 4px;
  background: #fde8eb; color: #a3172d; font-weight: 600; font-size: 14.5px;
}

/* Dugmad aplikacije */
.ipd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 3px;
  font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}
.ipd-btn:hover { filter: brightness(1.06); }
.ipd-btn:active { transform: translateY(1px); }
.ipd-btn:focus-visible { outline: 3px solid #0b6b44; outline-offset: 2px; }
.ipd-btn-green { background: var(--ipd-green); color: var(--ipd-green-ink); }
.ipd-btn-green[aria-pressed="true"] { background: #0f9e61; color: #fff; }
.ipd-btn-dark { background: var(--ipd-black); color: #fff; }
.ipd-btn-red { background: var(--ipd-red); color: #fff; }
.ipd-btn-outline { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.ipd-btn-tall { min-height: 56px; }
.ipd-btn b { font-weight: 900; }

/* Ikone (čisti CSS/SVG, bez spoljnih fontova) */
.ipd-ico { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ipd-ico-gauge { --m: 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'%3E%3Cpath d='M4 18a9 9 0 1 1 16 0'/%3E%3Cpath d='M12 14l4-5'/%3E%3C/svg%3E"); }
.ipd-ico-cart { --m: 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'%3E%3Cpath d='M3 4h2l2.4 10.4a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 7H6'/%3E%3Ccircle cx='9' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3C/svg%3E"); }
.ipd-ico-shield { --m: 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'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.ipd-ico-docs { --m: 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'%3E%3Cpath d='M8 3h9l3 3v13H8z'/%3E%3Cpath d='M4 7v14h12'/%3E%3C/svg%3E"); }
.ipd-ico-book { --m: 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'%3E%3Cpath d='M4 5h7v15H4zM13 5h7v15h-7z'/%3E%3Cpath d='M6 9h3M6 12h3M15 9h3M15 12h3'/%3E%3C/svg%3E"); }
.ipd-ico-info { --m: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.ipd-ico-user { --m: 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'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/%3E%3C/svg%3E"); }
.ipd-ico-back { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20a10 10 0 0 1 0-20zm1.6 5.2L8.8 12l4.8 4.8l1.6-1.6L12 12l3.2-3.2z'/%3E%3C/svg%3E"); }
.ipd-ico-cash { --m: 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'%3E%3Crect x='3' y='6' width='18' height='12' rx='1'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.ipd-ico-plus { --m: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.ipd-ico-trash { --m: 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'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }

/* Tabele */
.ipd-table-scroll { overflow-x: auto; }
.ipd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ipd-table th { text-align: left; font-weight: 600; color: #3a434b; padding: 8px 8px; border-bottom: 1px solid var(--ipd-border); white-space: nowrap; }
.ipd-table td { padding: 8px 8px; border-bottom: 1px solid #eef1f4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ipd-table .num { text-align: right; }
.ipd-table td.c-name { white-space: normal; min-width: 130px; }
.ipd-items-wrap { padding: 0; min-height: 150px; }
.ipd-items tbody tr:nth-child(odd) { background: #f8f9fb; }
.ipd-items tr.is-new { animation: ipdRowIn .9s ease; }
@keyframes ipdRowIn { from { background: rgba(32, 217, 138, .32); } to { background: transparent; } }
.ipd-empty { margin: 0; padding: 26px 16px; text-align: center; color: var(--ipd-muted); }
.ipd-trash {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 3px;
  background: var(--ipd-red); color: #fff; cursor: pointer;
}
.ipd-trash .ipd-ico { width: 16px; height: 16px; flex-basis: 16px; }
.ipd-trash:focus-visible { outline: 3px solid #0b6b44; outline-offset: 2px; }
.ipd-table-tight { border: 1px solid var(--ipd-border); }
.ipd-table-tight tr.is-empty td { color: #9aa3ab; }

/* Rekapitulacija */
.ipd-recap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 190px; gap: 22px; align-items: start; }
.ipd-sum { margin: 0; display: grid; gap: 6px; }
.ipd-sum > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 46%); gap: 10px; align-items: center; }
.ipd-sum dt { color: #3a434b; }
.ipd-sum dd {
  margin: 0; padding: 4px 10px; background: var(--ipd-field-off); border: 1px solid #e1e5e9; border-radius: 3px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.ipd-sum .is-total { padding-top: 8px; border-top: 1px solid var(--ipd-border); }
.ipd-sum .is-total dt, .ipd-sum .is-total dd { font-weight: 700; }
.ipd-recap-actions { display: grid; gap: 14px; padding-top: 32px; }

/* Poslednji računi */
.ipd-recent-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ipd-recent-card {
  flex: 0 0 196px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--ipd-border); border-radius: 4px;
  background: #fff; text-align: left; cursor: pointer; font-family: inherit; color: var(--ipd-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.ipd-recent-card:hover { border-color: #aab4bd; }
.ipd-recent-card:focus-visible { outline: 3px solid #0b6b44; outline-offset: 2px; }
.ipd-recent-card.is-mine { border-color: var(--ipd-green); box-shadow: 0 0 0 1px var(--ipd-green); }
.ipd-recent-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #59636b; }
.ipd-recent-top strong { color: var(--ipd-text); font-variant-numeric: tabular-nums; }
.ipd-recent-time { font-size: 12.5px; color: #6c757d; text-align: center; }
.ipd-recent-demo { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ipd-demo-ink); }

/* Poruka u aplikaciji */
.ipd-toast {
  position: fixed; z-index: 1300; top: 92px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; align-items: center; width: min(620px, calc(100% - 32px));
  padding: 13px 16px; border-radius: 6px; font-family: var(--ipd-app-font); font-size: 15.5px; font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22); animation: ipdToastIn .25s ease;
}
.ipd-toast.is-success { background: #1fbf78; color: #fff; }
.ipd-toast.is-info { background: #1f2d38; color: #fff; }
.ipd-toast.is-error { background: var(--ipd-red); color: #fff; }
.ipd-toast-icon { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); font-weight: 900; }
@keyframes ipdToastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ------------------------------------------------------------------ Modali */

.ipd-modal-layer {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px;
  background: rgba(8, 14, 20, .55); overflow-y: auto;
}
.ipd-modal-layer[hidden] { display: none; }
.ipd-modal {
  position: relative; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; border-radius: 5px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  font-family: var(--ipd-app-font); color: var(--ipd-text); font-size: 15px;
}
.ipd-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--ipd-border); }
.ipd-modal-head h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 10px; }
.ipd-chip-demo {
  padding: 2px 8px; border-radius: 999px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink);
  font: 700 11px/1.5 Inter, system-ui, sans-serif; letter-spacing: .08em;
}
.ipd-x { width: 34px; height: 34px; border: 0; background: transparent; font-size: 26px; color: #8a939b; cursor: pointer; border-radius: 4px; }
.ipd-x:focus-visible { outline: 3px solid #0b6b44; }
.ipd-modal-body { padding: 18px 20px; }
.ipd-paygrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.ipd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ipd-border); }
.ipd-modal-foot[hidden] { display: none; }
.ipd-modal-foot .ipd-btn { min-height: 42px; padding: 0 22px; }

.ipd-buyer { margin: 0; padding: 12px 14px 8px; border: 1px solid var(--ipd-border); border-radius: 4px; }
.ipd-buyer legend { padding: 0 6px; font-weight: 600; font-size: 14.5px; color: #3a434b; }
.ipd-buyer legend small { font-weight: 400; color: var(--ipd-muted); }
.ipd-buyer-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.ipd-buyer-row .ipd-label-side { margin: 0; text-align: right; font-weight: 600; font-size: 14.5px; }
.ipd-buyer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ipd-buyer-note { margin: 2px 0 4px; font-size: 13px; color: var(--ipd-muted); }
.ipd-buyer-warn { color: #6b4400; background: var(--ipd-demo-bg); padding: 8px 10px; border-radius: 4px; line-height: 1.5; }
.ipd-demo-fill { margin-left: 4px; border: 1px solid #c99a2e; background: #fff; color: #6b4400; border-radius: 3px; padding: 2px 8px; font: 600 13px/1.4 var(--ipd-app-font); cursor: pointer; }
.ipd-demo-fill:focus-visible { outline: 3px solid #0b6b44; }

.ipd-pay-total { margin: 18px 0 10px; font-size: 20px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--ipd-border); }
.ipd-pay-total strong { color: var(--ipd-red); font-variant-numeric: tabular-nums; }
.ipd-pay-summary { margin: 0; display: grid; gap: 6px; }
.ipd-pay-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ipd-pay-summary dt { text-align: right; color: #3a434b; font-weight: 600; }
.ipd-pay-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.ipd-pay-summary .is-paid dd { font-weight: 700; }
.ipd-pay-summary .is-off dd { color: var(--ipd-red); }

.ipd-payrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 70px; gap: 12px; align-items: center; margin-bottom: 10px; }
.ipd-payrow label { text-align: right; font-weight: 600; color: #3a434b; }
.ipd-payrow .ipd-input { height: 40px; text-align: left; font-variant-numeric: tabular-nums; }
.ipd-prebaci { border: 0; background: transparent; color: #12a865; font-weight: 700; font-size: 15px; cursor: pointer; padding: 6px 2px; text-align: left; font-family: inherit; }
.ipd-prebaci:hover { text-decoration: underline; }
.ipd-prebaci:focus-visible { outline: 3px solid #0b6b44; border-radius: 3px; }
/* Avans: ESIR vreme (samo čist prenos na račun) i napomena demoa uz konačni račun */
.ipd-esir { display: grid; grid-template-columns: 130px minmax(0, 1fr) 70px; gap: 4px 12px; align-items: center; margin: 4px 0 10px; }
.ipd-esir label { grid-column: 1; text-align: right; font-weight: 600; color: #3a434b; }
.ipd-esir .ipd-input { grid-column: 2; height: 40px; width: 100%; min-width: 0; font-size: 15px; }
.ipd-esir small { grid-column: 2; font-size: 12px; color: var(--ipd-muted); }
.ipd-adv-note { margin-top: 8px; padding: 6px 9px; border-radius: 4px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink); }
.ipd-pay-msg { margin: 6px 0 0; padding: 10px 12px; border-radius: 4px; background: #fde8eb; color: #a3172d; font-weight: 700; }

.ipd-processing {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: start; gap: 6px;
  padding: 24px; background: rgba(255, 255, 255, .96);
}
.ipd-processing[hidden] { display: none; }
.ipd-processing-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.ipd-processing-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ipd-processing-steps li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #9aa3ab; }
.ipd-processing-steps li.is-run { color: var(--ipd-text); font-weight: 600; }
.ipd-processing-steps li.is-done { color: var(--ipd-text); }
.ipd-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d3d9de; flex: 0 0 22px; }
.ipd-processing-steps li.is-run .ipd-dot { border-color: var(--ipd-green); border-top-color: transparent; animation: ipdSpin .7s linear infinite; }
.ipd-processing-steps li.is-done .ipd-dot { border-color: var(--ipd-green); background: var(--ipd-green); }
.ipd-processing-steps li.is-done .ipd-dot::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--ipd-green-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ipd-processing-note { margin: 10px 0 0; font-size: 13.5px; color: var(--ipd-muted); }
@keyframes ipdSpin { to { transform: rotate(360deg); } }

/* Pregled za štampu */
.ipd-print {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; width: min(980px, 100%); max-height: calc(100vh - 40px);
  border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); background: #525659;
}
.ipd-print-paper { overflow: auto; padding: 22px; display: grid; justify-items: center; }
.ipd-receipt {
  position: relative; width: max-content; max-width: 100%; padding: 18px 20px 22px; background: #fff; color: #111;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.ipd-receipt::before {
  content: "DEMO"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font: 900 92px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: rgba(220, 38, 38, .1); transform: rotate(-28deg);
}
.ipd-journal { margin: 0; font: 12.5px/1.38 var(--ipd-mono); white-space: pre; color: #111; }
.ipd-qr { display: grid; justify-items: center; padding: 8px 0; }
.ipd-qr svg { width: 150px; height: 150px; }
.ipd-qr-note { margin: 10px 0 0; max-width: 300px; font: 600 12px/1.4 Inter, system-ui, sans-serif; color: #a3172d; text-align: center; justify-self: center; }
.ipd-print-side { padding: 22px; background: #202124; color: #e8eaed; font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.55; overflow: auto; }
.ipd-print-side h3 { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: #fff; display: flex; gap: 10px; align-items: center; letter-spacing: -.01em; }
.ipd-print-side p { margin: 0 0 12px; }
.ipd-print-warn { padding: 10px 12px; border-radius: 6px; background: rgba(255, 207, 112, .12); color: #ffd98a; font-weight: 600; }
.ipd-print-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ipd-print-actions .ipd-btn { min-height: 40px; padding: 0 20px; border-radius: 4px; }
.ipd-print-actions .ipd-btn-dark { background: #8ab4f8; color: #202124; }
.ipd-print-msg { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); }

/* Vodič ostaje vidljiv i dok je modal otvoren */
.ipd-modal-hint { display: none; margin: 0; padding: 10px 20px; background: #f1faf5; border-bottom: 1px solid #d7ebe0; font: 14px/1.45 Inter, system-ui, sans-serif; color: #24453a; }
.ipd-modal-hint .ipd-hint-step { display: block; color: #0c6e45; }
@media (min-width: 1101px) {
  body.ipd-modal-open .ipd-guide { z-index: 1210; }
  body.ipd-modal-open .ipd-modal-layer { padding-right: calc((100vw - min(1400px, 100vw - 40px)) / 2 + 360px); }
}
@media (max-width: 1100px) {
  .ipd-modal-hint:not(:empty) { display: block; }
}

/* ------------------------------------------------------------------ Promet, Kopija, detalji računa */

.ipd-view[hidden] { display: none !important; }
.ipd-view { display: grid; gap: 14px; min-width: 0; }
.ipd-app h2.ipd-page-title { margin: 2px 0 -4px; font-size: 24px; font-weight: 400; color: #6c757d; }

.ipd-ico-print { --m: 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'%3E%3Cpath d='M7 9V3h10v6M7 17H4v-7h16v7h-3M7 14h10v7H7z'/%3E%3C/svg%3E"); }
.ipd-ico-copy { --m: 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'%3E%3Crect x='8' y='8' width='12' height='13' rx='1'/%3E%3Cpath d='M16 8V4H4v13h4'/%3E%3C/svg%3E"); }
.ipd-ico-ban { --m: 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'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }
.ipd-ico-chev { --m: 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.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ipd-ico-down { --m: 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.4'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); }

.ipd-btn-light { background: #e9ecef; color: #39424a; }
.ipd-btn-grey { background: #c4c8cc; color: #fff; }

.ipd-filters-title { margin: 0 0 10px; font-size: 15px; color: #39424a; }
.ipd-filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; align-items: end; }
.ipd-flt-date { display: grid; gap: 2px; font-size: 12.5px; color: #6c757d; }
.ipd-flt-date, .ipd-filters-grid > * { min-width: 0; }
.ipd-flt-date .ipd-input { min-width: 0; max-width: 100%; }
.ipd-flt-actions { display: flex; gap: 8px; }
.ipd-flt-actions .ipd-btn { flex: 1; }

.ipd-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.ipd-card { scroll-snap-align: start; }
.ipd-card { display: grid; gap: 4px; padding: 14px 14px 12px; border-radius: 3px; background: var(--ipd-green); color: #04261a; min-width: 0; }
.ipd-card strong { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ipd-card span { font-size: 13.5px; }

.ipd-docs { display: grid; gap: 10px; }
.ipd-docs-toolbar { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ipd-docs-toolbar .ipd-btn { min-height: 36px; font-size: 14px; }
.ipd-doclist { font-size: 13.5px; }
.ipd-doclist th { white-space: normal; vertical-align: bottom; font-size: 13px; }
.ipd-doclist td { vertical-align: middle; }
.ipd-doclist th:last-child, .ipd-doclist td:last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -8px 0 10px -8px rgba(0, 0, 0, .25); }
.ipd-doclist tr.is-mine > td:last-child { background: #effcf5; }
.ipd-doclist tr.ipd-quick-row > td { position: static; box-shadow: none; }
.ipd-doclist td.c-time { white-space: nowrap; line-height: 1.25; }
.ipd-doclist tr.is-mine > td { background: #effcf5; }
.ipd-link { border: 0; background: none; padding: 0; color: #1a2a35; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: #b8c2ca; text-underline-offset: 3px; }
.ipd-link:hover { color: #0c8a55; text-decoration-color: currentColor; }
.ipd-link:focus-visible { outline: 3px solid #0b6b44; border-radius: 2px; }
.ipd-mine-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink); font: 700 10.5px/1.6 Inter, system-ui, sans-serif; white-space: nowrap; vertical-align: middle; }
.ipd-row-actions { display: flex; gap: 5px; justify-content: flex-end; }
.ipd-ibtn { display: inline-grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 3px; cursor: pointer; color: #fff; font: 700 16px/1 var(--ipd-app-font); }
.ipd-ibtn:focus-visible { outline: 3px solid #0b6b44; outline-offset: 2px; }
.ipd-ibtn:hover { filter: brightness(1.08); }
.ipd-ibtn-green { background: var(--ipd-green); color: #04261a; }
.ipd-ibtn-teal { background: #12a865; }
.ipd-ibtn-red { background: var(--ipd-red); }
.ipd-ibtn-dark { background: var(--ipd-black); }
.ipd-ibtn[aria-expanded="true"] .ipd-ico-chev { transform: rotate(180deg); }
.ipd-ibtn .ipd-ico { width: 17px; height: 17px; flex-basis: 17px; }
.ipd-quick-row > td { padding: 0 0 8px !important; background: #fff !important; }
.ipd-quick { border: 1px solid var(--ipd-green); border-radius: 3px; overflow-x: auto; }
.ipd-quick .ipd-table { font-size: 13px; }
.ipd-doccards { display: none; list-style: none; margin: 0; padding: 0; }

/* Detalji */
.ipd-det-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: -15px; }
.ipd-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.ipd-tab { padding: 11px 20px; border: 1px solid var(--ipd-border); border-bottom: 0; border-radius: 4px 4px 0 0; background: #e9ecef; color: #39424a; font: 600 15px/1 var(--ipd-app-font); cursor: pointer; }
.ipd-tab.is-active { background: #fff; color: #1a2a35; position: relative; z-index: 1; }
.ipd-tab:focus-visible { outline: 3px solid #0b6b44; outline-offset: -3px; }
.ipd-det { display: grid; gap: 14px; border-top-left-radius: 0; }
.ipd-det-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.ipd-det-head-2 { grid-template-columns: minmax(0, 2fr) 260px; }
.ipd-det-head .ipd-kv-firm > div { padding: 6px 0; }
.ipd-det-no { display: grid; gap: 6px; justify-items: end; text-align: right; padding-left: 16px; border-left: 1px solid #edf0f3; }
.ipd-det-pfr { color: #12a865; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.ipd-det-pfr i { font-style: normal; }
.ipd-det-demo { font-size: 12px; color: var(--ipd-demo-ink); background: var(--ipd-demo-bg); padding: 2px 8px; border-radius: 4px; }
.ipd-det-time { display: flex; gap: 16px; justify-content: space-between; width: 100%; padding: 6px 0; border-bottom: 1px solid #edf0f3; font-size: 14.5px; }
.ipd-det-recaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.ipd-sumlist { margin: 0; display: grid; }
.ipd-sumlist > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #edf0f3; }
.ipd-sumlist dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ipd-sumlist .is-total { font-weight: 700; }
.ipd-h2s { margin: 0 0 8px; font-size: 22px; font-weight: 400; color: #39424a; letter-spacing: 0; }
.ipd-det-note { margin: 0; padding: 8px 12px; border-radius: 4px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink); font-size: 13.5px; }
.ipd-det-blobs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ipd-blob { margin: 0; padding: 12px; border: 1px solid #d7dde2; border-radius: 4px; background: #f3f5f8; font: 12.5px/1.6 var(--ipd-mono); white-space: pre-wrap; word-break: break-all; color: #39424a; }
.ipd-det-journal { display: grid; justify-items: center; padding: 10px; background: #eef1f4; border-radius: 4px; overflow-x: auto; }

/* A4 prikaz */
.ipd-receipt.is-a4 { width: min(820px, 100%); padding: 26px 30px; }
.ipd-receipt.is-a4::before { font-size: 150px; }
.ipd-a4 { font: 12.5px/1.45 Arial, Helvetica, sans-serif; color: #111; }
.ipd-a4-top { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 11px; font-style: italic; }
.ipd-a4-rule { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.ipd-a4-rule::before, .ipd-a4-rule::after { content: ""; flex: 1; border-top: 3px double #111; }
.ipd-a4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ipd-a4-kv { margin: 0; }
.ipd-a4-kv > div { display: flex; gap: 6px; padding: 3px 0; border-bottom: 1px solid #ccc; }
.ipd-a4-kv dt { font-weight: 700; flex: 0 0 auto; max-width: 55%; }
.ipd-a4-kv dd { margin: 0; flex: 1; text-align: right; overflow-wrap: anywhere; }
.ipd-a4-no { margin: 0 0 6px; font-size: 12px; }
.ipd-a4-qr { justify-items: start; padding: 4px 0 8px; }
.ipd-a4-qr svg { width: 110px; height: 110px; }
.ipd-a4-h { margin: 14px 0 4px; font-weight: 700; border-bottom: 2px solid #111; padding-bottom: 2px; }
.ipd-a4-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ipd-a4-table th { text-align: left; font-weight: 700; padding: 3px 4px; vertical-align: bottom; }
.ipd-a4-table td { padding: 3px 4px; vertical-align: top; }
.ipd-a4-table .num { text-align: right; }

/* Dijalozi */
.ipd-modal-sm { width: min(560px, 100%); }
.ipd-confirm { display: grid; justify-items: center; gap: 10px; padding: 28px 24px 24px; text-align: center; }
.ipd-confirm-icon { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--ipd-red); color: var(--ipd-red); display: grid; place-items: center; font: 700 44px/1 Arial, sans-serif; }
.ipd-confirm h3 { margin: 4px 0 0; font-size: 26px; font-weight: 600; letter-spacing: 0; }
.ipd-confirm p { margin: 0; color: #4b555d; max-width: 420px; }
.ipd-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.ipd-confirm-actions .ipd-btn { min-height: 44px; padding: 0 22px; font-size: 16px; }
.ipd-msg-info { background: #e8f6ef; color: #0b5e3b; }

/* Reset u vodiču */
.ipd-guide-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px 14px; border-top: 1px solid #eef3f0; font-size: 12px; color: var(--muted); }
.ipd-guide-reset { white-space: nowrap; border: 0; background: none; padding: 0; color: #a3172d; font: 700 12.5px/1.4 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ipd-guide-reset:focus-visible { outline: 2px solid #0c8a55; border-radius: 3px; }
.ipd-guide[data-collapsed="true"] .ipd-guide-foot { display: none; }
.ipd-more-btn { border: 0; background: none; padding: 6px 0 0; text-align: left; cursor: pointer; font: inherit; font-weight: 800; color: #0c8a55; }
.ipd-more-card.is-ready { border-color: var(--green); }

/* ------------------------------------------------------------------ Refundacija */

/* Brojač kao u aplikaciji: refundiran original crveno, dokument refundacije sivo. */
.ipd-ctr.is-refunded, .ipd-ctr.is-refund { padding: 3px 7px; border-radius: 3px; color: #fff; text-decoration: none; }
.ipd-ctr.is-refunded { background: var(--ipd-red); }
.ipd-ctr.is-refund { background: #6c757d; }
.ipd-ctr.is-refunded:hover, .ipd-ctr.is-refund:hover { color: #fff; filter: brightness(1.1); }
.ipd-refunded-badge { display: inline-block; padding: 7px 14px; border-radius: 3px; background: var(--ipd-red); color: #fff; font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.ipd-modal-md { width: min(720px, 100%); }
.ipd-buyer-plain { border: 0; padding: 0; margin: 0; }
.ipd-refund-info { margin: 0; padding: 10px 20px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink); font: 14px/1.45 Inter, system-ui, sans-serif; border-bottom: 1px solid #f1dca4; }
.ipd-ref-link { color: #2f6fb3; text-decoration-color: #9cbde0; }

/* ------------------------------------------------------------------ WooCommerce scenario */

/* Prebacivanje između tri ekrana iste simulacije: prodavnica (kupac), WooCommerce (admin) i IntelliPOS. */
.ipd-switch { display: none; gap: 4px; padding: 8px 10px 0; background: #2b3a45; overflow-x: auto; }
.ipd-frame.is-woo .ipd-switch { display: flex; }
.ipd-switch button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, .08); color: #d9e2e8; font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.ipd-switch button.is-active { background: #f0f0f1; color: #1d2327; }
.ipd-switch button:focus-visible { outline: 3px solid var(--ipd-green); outline-offset: -3px; }
.ipd-switch .ipd-sw-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }
.ipd-switch button.has-news .ipd-sw-dot { background: var(--ipd-green); opacity: 1; box-shadow: 0 0 0 3px rgba(32, 217, 138, .3); }
.ipd-surface[hidden] { display: none !important; }

/* Prodavnica (kupac) */
.ipd-shop { background: #fff; min-height: 560px; font-family: Inter, system-ui, sans-serif; color: #1f2933; }
.ipd-shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid #e5e7eb; }
.ipd-shop-bar strong { font-size: 18px; letter-spacing: -.02em; }
.ipd-shop-bar span { font-size: 13px; color: #6b7280; }
.ipd-shop-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; padding: 20px; }
.ipd-shop-products { display: grid; gap: 12px; }
.ipd-prod { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.ipd-prod-img { width: 64px; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #e7f6ee, #cdeedd); display: grid; place-items: center; font-weight: 800; color: #0c8a55; font-size: 13px; }
.ipd-prod h4 { margin: 0 0 2px; font-size: 15.5px; }
.ipd-prod p { margin: 0; font-size: 13px; color: #6b7280; }
.ipd-prod strong { font-variant-numeric: tabular-nums; }
.ipd-qtybox { display: inline-flex; align-items: center; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
.ipd-qtybox button { width: 34px; height: 34px; border: 0; background: #f3f4f6; font-size: 18px; cursor: pointer; }
.ipd-qtybox span { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.ipd-checkout { padding: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; display: grid; gap: 10px; align-content: start; }
.ipd-checkout h4 { margin: 0; font-size: 16px; }
.ipd-checkout .ipd-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ipd-checkout .ipd-row.is-total { font-weight: 800; font-size: 16px; border-top: 1px solid #e5e7eb; padding-top: 8px; }
.ipd-checkout label { display: grid; gap: 4px; font-size: 13px; color: #374151; }
.ipd-checkout .ipd-input { font-family: Inter, system-ui, sans-serif; }
.ipd-shop-btn { min-height: 46px; border: 0; border-radius: 8px; background: #7f54b3; color: #fff; font: 800 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.ipd-shop-btn:disabled { opacity: .5; cursor: not-allowed; }
.ipd-shop-btn:focus-visible { outline: 3px solid #3c2361; outline-offset: 2px; }
.ipd-shop-done { padding: 14px; border-radius: 10px; background: #ecfdf3; color: #065f46; font-size: 14.5px; line-height: 1.5; }

/* WordPress / WooCommerce admin */
.ipd-wp { display: grid; grid-template-columns: 160px minmax(0, 1fr); min-height: 560px; background: #f0f0f1; font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1d2327; }
.ipd-wp-side { background: #1d2327; color: #f0f0f1; padding: 8px 0; }
.ipd-wp-side span { display: block; padding: 7px 12px; color: #c3c4c7; }
.ipd-wp-side span.is-on { background: #2271b1; color: #fff; font-weight: 600; }
.ipd-wp-side span.is-sub { padding-left: 22px; font-size: 12.5px; }
.ipd-wp-main { padding: 14px 18px 22px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.ipd-wp h2.ipd-wp-title { margin: 0; font: 400 22px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1d2327; letter-spacing: 0; }
.ipd-wp-box { background: #fff; border: 1px solid #c3c4c7; box-shadow: 0 1px 1px rgba(0, 0, 0, .04); min-width: 0; }
.ipd-wp-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #c3c4c7; font-weight: 600; font-size: 14px; }
.ipd-wp-box-b { padding: 12px; }
.ipd-wp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ipd-wp-table th { text-align: left; font-weight: 400; color: #2c3338; padding: 8px 10px; border-bottom: 1px solid #c3c4c7; }
.ipd-wp-table td { padding: 10px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; }
.ipd-wp-table tr.is-new td { background: #f0f6fc; }
.ipd-wp-link { border: 0; background: none; padding: 0; color: #2271b1; font: 600 13px/1.4 inherit; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ipd-wp-link:focus-visible { outline: 2px solid #2271b1; border-radius: 2px; }
.ipd-wc-status { display: inline-flex; padding: 3px 9px; border-radius: 4px; font-size: 12.5px; line-height: 1.6; background: #e5e5e5; color: #454545; white-space: nowrap; }
.ipd-wc-status.is-processing { background: #c6e1c6; color: #2c4700; }
.ipd-wc-status.is-completed { background: #c8d7e1; color: #003d66; }
.ipd-wc-status.is-on-hold { background: #f8dda7; color: #573b00; }
.ipd-wc-status.is-refunded { background: #e5e5e5; color: #777; }
.ipd-wp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.ipd-wp-field { display: grid; gap: 4px; margin-bottom: 10px; }
.ipd-wp-field label { font-weight: 600; }
.ipd-wp-select { width: 100%; height: 32px; border: 1px solid #8c8f94; border-radius: 4px; padding: 0 8px; font: inherit; font-size: 14px; background: #fff; }
.ipd-wp-btn { min-height: 32px; padding: 0 12px; border: 1px solid #2271b1; border-radius: 3px; background: #2271b1; color: #fff; font: 13px/1 inherit; font-family: inherit; cursor: pointer; }
.ipd-wp-btn.is-secondary { background: #f6f7f7; color: #2271b1; }
.ipd-wp-btn:disabled { opacity: .55; cursor: not-allowed; }
.ipd-wp-btn:focus-visible { outline: 2px solid #043959; outline-offset: 1px; }
.ipd-wp-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ipd-wp-notes li { padding: 8px 10px; background: #d7cad2; border-radius: 3px; font-size: 12.5px; position: relative; }
.ipd-wp-notes li.is-system { background: #efefef; }
.ipd-wp-notes li small { display: block; color: #646970; margin-top: 3px; }
.ipd-wp-items td.num, .ipd-wp-items th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Kutija „IntelliPOS fiskalizacija” na porudžbini (po izgledu dodatka) */
.ipd-ipbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.ipd-ipbox-head strong { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.ipd-ipbox-head strong i { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; }
.ipd-ipbox-head.is-ok strong i { background: #22c55e; }
.ipd-ipbox-head.is-err strong i { background: #ef4444; }
.ipd-ipbox-head.is-wait strong i { background: #f59e0b; }
.ipd-ipbox-head small { display: block; color: #6b7280; font-weight: 400; font-size: 13px; margin: 2px 0 0 18px; }
.ipd-ipbadge { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 12.5px; white-space: nowrap; background: #f3f4f6; color: #374151; }
.ipd-ipbadge.is-ok { background: #e7f6ec; color: #1a7f45; }
.ipd-ipbadge.is-err { background: #fde8e8; color: #b42318; }
.ipd-ipbadge.is-wait { background: #fff4dc; color: #8a5a00; }
.ipd-ipbadge.is-ref { background: #eef2ff; color: #3730a3; }
.ipd-ipcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ipd-ipcard { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb; min-width: 0; }
.ipd-ipcard span { display: block; color: #6b7280; font-size: 12px; }
.ipd-ipcard strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.ipd-ipbox-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb; color: #646970; font-size: 12.5px; }
.ipd-ipbox details { margin-top: 8px; }
.ipd-ipbox summary { color: #2271b1; font-weight: 600; cursor: pointer; }
.ipd-ipbox pre { max-height: 260px; overflow: auto; background: #f6f7f7; padding: 10px; font: 11.5px/1.35 var(--ipd-mono); white-space: pre; }

.ipd-radio, .ipd-checkout label.ipd-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1f2933; cursor: pointer; }
.ipd-checkout fieldset { display: grid; gap: 8px; }
.ipd-radio input { width: 18px; height: 18px; accent-color: #7f54b3; }
.ipd-simfail { padding: 8px 10px; border: 1px dashed #c99a2e; border-radius: 8px; background: var(--ipd-demo-bg); color: #6b4400; font-size: 13px; }
.ipd-simfail input { accent-color: #b45309; }
.ipd-wp-navlink { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.ipd-wp-navlink:hover, .ipd-wp-navlink:focus-visible { color: #72aee6; outline: none; text-decoration: underline; }
.ipd-wp-demo { margin: -6px 0 0; font-size: 12.5px; color: #8a5a00; }
.ipd-wp-form .ipd-wp-field { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.ipd-wp-form .ipd-wp-field small { grid-column: 2; color: #646970; }
.ipd-wp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ipd-wp-ok { margin: 10px 0 0; padding: 8px 10px; border-left: 4px solid #00a32a; background: #edfaef; }
.ipd-wp-hint { margin: 8px 0 0; color: #646970; font-size: 12.5px; }
.ipd-wp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.ipd-wp-inline { display: flex; gap: 6px; }
.ipd-wp-inline .ipd-wp-select { flex: 1; min-width: 0; }
.ipd-wp-err { display: grid; gap: 4px; margin-top: 12px; padding: 10px 12px; border-left: 4px solid #d63638; background: #fcf0f1; }
.ipd-wp-sending { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: #8a5a00; }
.ipd-wp-empty { margin: 12px 0 0; color: #646970; }
.ipd-dot.is-spin { border-color: #f59e0b; border-top-color: transparent; animation: ipdSpin .7s linear infinite; }
.ipd-wp-col { display: grid; gap: 12px; min-width: 0; align-content: start; }

.ipd-adv { font-size: 13px; color: #4b5563; }
.ipd-adv summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ipd-adv[open] summary { margin-bottom: 6px; }
.ipd-g-extras { display: grid; gap: 6px; margin: 4px 0 12px; }
.ipd-g-extras-h { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #6b7c74; }
.ipd-g-extra { display: grid; gap: 2px; text-align: left; padding: 9px 11px; border: 1px solid #dfe8e3; border-radius: 10px; background: #fff; cursor: pointer; font: 13px/1.4 Inter, system-ui, sans-serif; color: #3d4b45; }
.ipd-g-extra b { color: #0d1b16; font-size: 13.5px; }
.ipd-g-extra:hover { border-color: #9fd9bb; background: #f6fbf8; }
.ipd-g-extra:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Tok porudžbine (vizuelna linija stanja) */
.ipd-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid #c3c4c7; }
.ipd-flow li { list-style: none; display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 12px; color: #646970; }
.ipd-flow li b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f0f0f1; color: #646970; font-size: 12px; }
.ipd-flow li.is-done b { background: #00a32a; color: #fff; }
.ipd-flow li.is-run b { background: #2271b1; color: #fff; }
.ipd-flow li.is-err b { background: #d63638; color: #fff; }
.ipd-flow li small { font-size: 10.5px; color: #8c8f94; text-transform: uppercase; letter-spacing: .05em; }
.ipd-flow { margin: 0; }

@container ipdframe (max-width: 759px) {
  .ipd-shop-body { grid-template-columns: minmax(0, 1fr); }
  .ipd-wp { grid-template-columns: minmax(0, 1fr); }
  .ipd-wp-side { display: none; }
  .ipd-wp-grid { grid-template-columns: minmax(0, 1fr); }
  .ipd-ipcards { grid-template-columns: minmax(0, 1fr); }
  .ipd-flow { grid-template-columns: repeat(5, minmax(60px, 1fr)); overflow-x: auto; padding: 8px 6px; }
  .ipd-flow li small { display: none; }
  .ipd-flow li { font-size: 11.5px; line-height: 1.3; }
  .ipd-wp-table .c-hide-m { display: none; }
  .ipd-sw-extra { display: none; }
  .ipd-switch { gap: 3px; padding: 6px 6px 0; }
  .ipd-switch button { padding: 9px 10px; font-size: 13px; gap: 6px; }
  .ipd-wp-form .ipd-wp-field { grid-template-columns: minmax(0, 1fr); }
  .ipd-wp-form .ipd-wp-field small { grid-column: 1; }
}

/* ------------------------------------------------------------------ Isticanje koraka */

.is-coach {
  position: relative;
  outline: 3px solid var(--ipd-coach);
  outline-offset: 3px;
  border-radius: 4px;
  animation: ipdCoach 1.8s ease-in-out infinite;
}
@keyframes ipdCoach {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 196, 125, .35); }
  50% { box-shadow: 0 0 0 8px rgba(24, 196, 125, 0); }
}

/* ------------------------------------------------------------------ Vodič */

.ipd-guide {
  position: sticky; top: 96px; z-index: 30;
  background: #fff; color: var(--ink); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(6, 23, 17, .14), 0 0 0 1px rgba(6, 23, 17, .06);
  font-family: Inter, system-ui, sans-serif; overflow: hidden;
}
.ipd-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.ipd-guide-kicker { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #0c8a55; }
.ipd-guide-toggle { border: 0; background: transparent; color: #4b5b55; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; padding: 6px 4px; }
.ipd-guide-toggle:focus-visible { outline: 2px solid #0c8a55; border-radius: 4px; }
.ipd-guide-bar { height: 4px; margin: 0 18px; border-radius: 4px; background: #e6efea; overflow: hidden; }
.ipd-guide-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .4s ease; }
.ipd-guide-body { padding: 14px 18px 18px; }
.ipd-guide.is-done .ipd-guide-toggle { display: none; }
.ipd-guide[data-collapsed="true"] .ipd-guide-body, .ipd-guide[data-collapsed="true"] .ipd-guide-bar { display: none; }

.ipd-g-title { margin: 0 0 8px; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; color: #0d1b16; }
.ipd-g-text { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #33413b; }
.ipd-g-tip { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #f1faf5; font-size: 14px; line-height: 1.5; color: #24453a; }
.ipd-g-more { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ipd-g-tip code, .ipd-g-text code { font-family: var(--ipd-mono); font-size: 13px; background: #e1f5ea; padding: 1px 5px; border-radius: 4px; user-select: all; }
.ipd-g-reality { margin: 0 0 12px; border: 1px solid #e3ebe7; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ipd-g-reality summary { font-weight: 800; font-size: 13.5px; color: #0c6e45; }
.ipd-g-reality summary:focus-visible { outline: 2px solid #0c8a55; border-radius: 4px; }
.ipd-g-reality p { margin: 8px 0 0; line-height: 1.5; color: #3d4b45; }
.ipd-g-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ipd-gbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px;
  border: 0; border-radius: 999px; cursor: pointer; font: 800 14.5px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em;
  background: #0d1b16; color: #fff; text-decoration: none;
}
.ipd-gbtn:hover { filter: brightness(1.15); }
.ipd-gbtn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.ipd-gbtn-ghost { background: #fff; color: #0d1b16; box-shadow: inset 0 0 0 1.5px #c9d6d0; }
.ipd-gbtn-ghost:hover { filter: none; background: #f3f8f5; }
.ipd-gbtn-primary { color: #052016; background: linear-gradient(135deg, var(--green-2), var(--green)); box-shadow: 0 12px 30px rgba(24, 196, 125, .3); }
.ipd-g-free { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.ipd-g-done { margin: 0 0 10px; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14.5px; color: #33413b; }
.ipd-g-done li::before { content: "✓"; color: #0c8a55; font-weight: 900; margin-right: 8px; }
.ipd-g-link { border: 0; background: none; padding: 0; margin: 0 0 12px; color: #0c8a55; font: 800 14px/1.4 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ipd-g-price { display: grid; gap: 2px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: #0d1b16; color: #e8f3ee; }
.ipd-g-price-name { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.ipd-g-price strong { font-size: 22px; letter-spacing: -.03em; color: #fff; }
.ipd-g-price span { font-size: 13.5px; color: #b7cbc2; }
.ipd-g-price small { font-size: 12.5px; line-height: 1.45; color: #9fb3aa; margin-top: 4px; }
.ipd-g-actions-end { display: grid; }

.ipd-g-back { margin-top: 10px; border: 0; background: none; padding: 4px 0; color: #4b5b55; font: 700 13px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.ipd-g-back:hover { color: #0c8a55; text-decoration: underline; }
.ipd-g-back:focus-visible { outline: 2px solid #0c8a55; border-radius: 3px; }
.ipd-g-review { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 13px; }
.ipd-g-tourbox { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; border-radius: 12px; background: #e9f9f0; }
.ipd-g-tourbox span { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #0c6e45; }
.ipd-g-list { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: #33413b; line-height: 1.45; }
.ipd-g-price-alt { background: #1d2f27; }

/* ------------------------------------------------------------------ Ostale mogućnosti */

.ipd-more { scroll-margin-top: 78px; }
.ipd-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ipd-more-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ipd-more-card:target { border-color: var(--green); box-shadow: 0 0 0 3px rgba(24, 196, 125, .2); }
.ipd-more-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e3f7ec; color: #0c8a55; font-weight: 900; }
.ipd-more-card h3 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.03em; }
.ipd-more-card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.ipd-more-note { margin: 0; font-size: 13px; color: var(--ipd-muted); }
.ipd-soon { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 800; color: #8a5a00; }
.ipd-more-link { margin-top: auto; padding-top: 6px; font-weight: 800; color: #0c8a55; }
.ipd-glossary { margin-top: 30px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.ipd-glossary h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.02em; }
.ipd-glossary dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.ipd-glossary dt { font-weight: 900; color: #0c6e45; }
.ipd-glossary dd { margin: 2px 0 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.ipd-noscript { margin: 0 0 14px; padding: 14px; border-radius: 12px; background: var(--ipd-demo-bg); color: var(--ipd-demo-ink); }
.ipd-more-cta { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.ipd-text-link { font-weight: 800; color: #0c8a55; }

/* ------------------------------------------------------------------ Uži okvir aplikacije (container queries) */

@container ipdframe (max-width: 1080px) {
  .ipd-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ipd-head-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ipd-recap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ipd-recap-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-top: 0; }
  .ipd-recap-actions .ipd-btn-tall { min-height: 44px; }
  .ipd-items .c-dprice, .ipd-items .c-net, .ipd-items .c-gtin { display: none; }
}

@container ipdframe (max-width: 1080px) {
  .ipd-det-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ipd-det-head > .ipd-det-no { grid-column: 1 / -1; justify-items: start; text-align: left; padding: 10px 0 0; border-left: 0; border-top: 1px solid #edf0f3; }
  .ipd-det-head-2 { grid-template-columns: minmax(0, 1fr); }
  .ipd-det-recaps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ipd-filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container ipdframe (max-width: 899px) {
  .ipd-app { grid-template-columns: minmax(0, 1fr); }
  .ipd-side {
    position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; width: 250px;
    transform: translateX(-102%); transition: transform .25s ease; visibility: hidden;
  }
  .ipd-app.is-side-open .ipd-side { transform: none; visibility: visible; }
  .ipd-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipd-f-article, .ipd-f-name, .ipd-f-add { grid-column: 1 / -1; }
}

@container ipdframe (max-width: 759px) {
  .ipd-docs-table { display: none; }
  .ipd-doccards { display: grid; gap: 10px; }
  .ipd-doccards > li { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ipd-border); border-radius: 4px; }
  .ipd-doccards > li.is-mine { background: #effcf5; border-color: var(--ipd-green); }
  .ipd-doccard-top { display: flex; align-items: center; gap: 6px; }
  .ipd-doccard-top strong { margin-left: auto; font-variant-numeric: tabular-nums; }
  .ipd-doccard-meta { font-size: 13.5px; color: #59636b; line-height: 1.4; }
  .ipd-doccards .ipd-row-actions { justify-content: flex-start; }
  .ipd-doccards .ipd-ibtn { width: 44px; height: 40px; }
  .ipd-quick-m { list-style: none; margin: 0; padding: 8px 10px; border: 1px solid var(--ipd-green); border-radius: 3px; display: grid; gap: 6px; font-size: 13.5px; }
  .ipd-quick-m li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
  .ipd-quick-m li span:nth-child(2) { grid-column: 1; color: #6c757d; font-size: 12.5px; }
  .ipd-quick-m li strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
  .ipd-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ipd-flt-actions { grid-column: 1 / -1; }
  .ipd-flt-date { grid-column: 1 / -1; grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
  .ipd-cards { grid-auto-columns: minmax(140px, 46%); }
  .ipd-det-head { grid-template-columns: minmax(0, 1fr); }
  .ipd-det-recaps { grid-template-columns: minmax(0, 1fr); }
  .ipd-det-blobs { grid-template-columns: minmax(0, 1fr); }
  .ipd-tab { padding: 10px 12px; font-size: 14px; }
  .ipd-det-top .ipd-btn { min-height: 34px; padding: 0 10px; font-size: 14px; }
}

@container ipdframe (max-width: 640px) {
  .ipd-content { padding: 10px 10px 18px; gap: 12px; }
  .ipd-panel { padding: 10px 12px; }
  .ipd-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ipd-kv-doc { border-left: 0; padding-left: 0; }
  .ipd-head .ipd-kv-firm > div:nth-child(3), .ipd-head .ipd-kv-firm > div:nth-child(4) { display: none; }
  .ipd-kv-field { grid-template-columns: 1fr; gap: 3px; }
  .ipd-kv-row2 { grid-template-columns: 1fr; gap: 4px; }
  .ipd-head-actions { grid-template-columns: 1fr 1fr 1fr; }
  .ipd-head-actions .ipd-btn { padding: 0 6px; font-size: 13px; gap: 6px; white-space: normal; line-height: 1.15; min-height: 42px; }
  .ipd-head-actions .ipd-ico { display: none; }
  .ipd-recap { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ipd-items .c-rb, .ipd-items .c-gtin, .ipd-items .c-price, .ipd-items .c-disc, .ipd-items .c-tax, .ipd-items .c-vat { display: none; }
  .ipd-table td.c-name { min-width: 0; white-space: normal; }
  .ipd-table { font-size: 14px; }
  .ipd-table th, .ipd-table td { padding: 7px 6px; }
  .ipd-pfr { font-size: 13px; }
  .ipd-topbar { gap: 10px; padding: 0 10px; }
  .ipd-app { min-height: 0; }
}

/* ------------------------------------------------------------------ Stranica: tablet i telefon */

@media (max-width: 1100px) {
  .ipd-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ipd-guide {
    position: sticky; top: auto; bottom: 0; margin: 14px -20px 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(6, 23, 17, .2); max-height: 52vh; overflow: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ipd-guide.is-done { position: relative; bottom: auto; max-height: none; overflow: visible; margin-bottom: 20px; border-radius: 18px; scroll-margin-top: 90px; }
  .ipd-scenarios { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .ipd-scenario { flex: 0 0 210px; scroll-snap-align: start; }
  .ipd-hub { padding: 12px; }
  .ipd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .ipd-guide.is-kb { display: none; }
}

@media (max-width: 760px) {
  /* 16px sprečava automatsko uvećanje stranice na iOS-u kada se fokusira polje */
  .ipd-input, .ipd-select-btn, .ipd-select-search, .ipd-filters select { font-size: 16px; }
  .ipd-a4-grid { grid-template-columns: minmax(0, 1fr); }
  .ipd-receipt.is-a4 { padding: 16px 12px; }
  .ipd-paygrid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ipd-pay-right { order: -1; }
  .ipd-payrow { grid-template-columns: 112px minmax(0, 1fr) 62px; gap: 8px; margin-bottom: 8px; }
  .ipd-payrow label { font-size: 14px; }
  .ipd-esir { grid-template-columns: 112px minmax(0, 1fr) 62px; gap: 4px 8px; }
  .ipd-esir .ipd-input, .ipd-esir small { grid-column: 2 / 4; }
  .ipd-esir .ipd-input { font-size: 14px; padding-left: 8px; padding-right: 6px; }
  .ipd-esir label { font-size: 14px; }
  .ipd-buyer-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ipd-buyer-row > span:empty { display: none; }
  .ipd-buyer-row .ipd-label-side { text-align: left; }
  .ipd-pay-total { font-size: 18px; margin-top: 4px; }
  .ipd-modal-layer { padding: 0; display: block; }
  .ipd-modal-layer[hidden] { display: none; }
  .ipd-modal { max-height: none; min-height: 100%; border-radius: 0; }
  .ipd-modal-head { position: sticky; top: 0; z-index: 3; background: #fff; padding: 12px 16px; }
  .ipd-modal-head h3 { font-size: 19px; }
  .ipd-modal-foot { position: sticky; bottom: 0; background: #fff; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .ipd-modal-foot .ipd-btn { flex: 1; }
  .ipd-print { grid-template-columns: minmax(0, 1fr); max-height: none; min-height: 100%; border-radius: 0; }
  .ipd-print-paper { padding: 14px 8px; }
  .ipd-journal { font-size: 10.6px; }
  .ipd-receipt { padding: 12px 10px 16px; }
  .ipd-receipt::before { font-size: 64px; }
  .ipd-toast { top: 76px; }
}

@media (max-width: 640px) {
  .ipd-wide { width: min(100% - 28px, 1400px); }
  .ipd-intro { padding: 24px 0 18px; }
  .ipd-intro h1 { font-size: 32px; }
  .ipd-lead { font-size: 15.5px; line-height: 1.5; }
  .ipd-safety { font-size: 13px; padding: 10px 12px; }
  .ipd-scenarios { margin-top: 14px; }
  .ipd-hub-actions .btn { width: 100%; }
  .ipd-hub-actions { gap: 8px 16px; }
  .ipd-scenario { flex-basis: 190px; padding: 9px 12px; }
  .ipd-stage-section { padding: 14px 0 0; }
  .ipd-lead { display: none; }
  .ipd-guide { margin: 12px -14px 0; max-height: 44vh; }
  .ipd-guide.is-done { margin: 12px 0 20px; }
  .ipd-guide-head { padding: 10px 16px 8px; }
  .ipd-guide-bar { margin: 0 16px; }
  .ipd-guide-body { padding: 8px 16px 12px; }
  .ipd-g-title { font-size: 17px; margin-bottom: 4px; }
  .ipd-g-text { font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
  .ipd-g-tip { font-size: 13px; padding: 8px 10px; margin-bottom: 8px; }
  .ipd-g-reality { font-size: 13px; padding: 8px 10px; margin-bottom: 8px; }
  .ipd-g-more, .ipd-g-free { display: none; }
  .ipd-guide-foot { padding: 6px 16px 8px; }
  .ipd-guide-foot span { display: none; }
  .ipd-gbtn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .ipd-more-grid { grid-template-columns: minmax(0, 1fr); }
  .ipd-more-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .is-coach, .ipd-items tr.is-new, .ipd-toast, .ipd-processing-steps li.is-run .ipd-dot, .ipd-dot.is-spin { animation: none; }
  .ipd-guide-bar span, .ipd-side { transition: none; }
}