/* =====================================================================
   Product mock-ups (includes/elements/_lib/mockups.php)
   Imported by oi-site.css.
   ===================================================================== */
.oi-mock { background: #fff; border: 1px solid var(--oi-line); border-radius: 18px; box-shadow: var(--oi-shadow-lg); overflow: hidden; font-size: 12px; color: var(--oi-ink); text-align: left; line-height: 1.4; }
.oi-mock * { box-sizing: border-box; }
.oi-mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef5fa; border-bottom: 1px solid var(--oi-line); }
.oi-mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: #c6d6e2; }
.oi-mock__bar span:nth-child(1) { background: #f87171; }
.oi-mock__bar span:nth-child(2) { background: #fbbf24; }
.oi-mock__bar span:nth-child(3) { background: #4ade80; }
.oi-mock__bar em { margin: 0 auto; font-style: normal; font-size: 11px; color: var(--oi-muted); background: #fff; padding: 3px 14px; border-radius: 999px; }
.oi-mock__body { display: flex; min-height: 300px; background: #f2f7fb; }
.oi-mock__side { flex: 0 0 46px; background: linear-gradient(180deg, #04263d, #06405f); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0; color: #7fb2d0; }
.oi-mock__side i { font-size: 13px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.oi-mock__side i.is-on { background: rgba(56, 189, 248, .25); color: #fff; }
.oi-mock__logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 12px; }
.oi-mock__logo i { color: #fff; width: auto; height: auto; }
.oi-mock__main { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.oi-mock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oi-mock__head b { font-size: 14px; font-family: var(--oi-font-head); }
.oi-mock__pill { background: var(--oi-700); color: #fff; font-weight: 700; font-size: 10.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.oi-mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.oi-mock__kpis > div, .oi-mock__card { background: #fff; border: 1px solid var(--oi-line); border-radius: 10px; padding: 10px; }
.oi-mock small { display: block; color: var(--oi-muted); font-size: 10.5px; }
.oi-mock__kpis b { display: block; font: 800 17px/1.2 var(--oi-font-head); margin: 2px 0; }
.oi-mock__kpis em { font-style: normal; font-size: 10px; color: var(--oi-muted); }
.oi-mock .up { color: var(--oi-success) !important; }
.oi-mock .down { color: #dc2626 !important; }
.oi-mock .warn { color: #d97706 !important; }
.oi-mock .ok { color: #16a34a !important; }
.oi-mock .info { color: var(--oi-700) !important; }
.oi-mock__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; flex: 1; }
.oi-mock__chart { display: flex; flex-direction: column; }
.oi-mock__bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; padding-top: 8px; min-height: 90px; }
.oi-mock__bars i { flex: 1; background: linear-gradient(180deg, #7dd3fc, #0ea5e9); border-radius: 5px 5px 2px 2px; }
.oi-mock__bars i.is-hot { background: linear-gradient(180deg, #0ea5e9, #075985); }
.oi-mock__card p { display: flex; justify-content: space-between; gap: 8px; margin: 7px 0 0; font-size: 11px; }
.oi-mock__card p b { font-size: 10.5px; }

.oi-mock__pos { display: flex; width: 100%; min-height: 330px; }
.oi-mock__pos-l { flex: 1; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.oi-mock__pos-r { flex: 0 0 34%; background: #fff; border-left: 1px solid var(--oi-line); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.oi-mock__search { background: #fff; border: 1px solid var(--oi-line); border-radius: 8px; padding: 8px 10px; color: var(--oi-muted); display: flex; gap: 6px; align-items: center; }
.oi-mock__search span { margin-left: auto; font-size: 9.5px; background: #e6eff6; padding: 2px 6px; border-radius: 4px; }
.oi-mock__chips { display: flex; gap: 6px; }
.oi-mock__chips i { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--oi-line); font-size: 10.5px; }
.oi-mock__chips i.is-on { background: var(--oi-700); color: #fff; border-color: var(--oi-700); }
.oi-mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.oi-mock__tile { background: #fff; border: 1px solid var(--oi-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.oi-mock__tile.is-picked { border-color: var(--oi-500); box-shadow: 0 0 0 2px rgba(14, 165, 233, .25); }
.oi-mock__tile span { height: 38px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.oi-mock__tile b { font-size: 10.5px; }
.oi-mock__tile em { font-style: normal; color: var(--oi-700); font-weight: 700; font-size: 11px; }
.oi-mock__cart-h { font: 800 12.5px var(--oi-font-head); margin-bottom: 4px; }
.oi-mock__pos-r p { display: flex; justify-content: space-between; gap: 6px; margin: 0; padding: 5px 0; border-bottom: 1px dashed var(--oi-line); font-size: 10.5px; }
.oi-mock__pos-r p em { font-style: normal; font-weight: 700; white-space: nowrap; }
.oi-mock__pos-r small { display: inline; }
.oi-mock__tot { margin-top: auto; }
.oi-mock__tot .is-total { font: 800 13px var(--oi-font-head); border: 0; padding-top: 6px; }
.oi-mock__pay { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: #fff; font-weight: 800; border-radius: 10px; padding: 10px; text-align: center; margin-top: 6px; font-size: 12px; }
.oi-mock__pay span { font-size: 9.5px; opacity: .8; margin-left: 6px; background: rgba(255, 255, 255, .2); padding: 1px 6px; border-radius: 4px; }

.oi-mock__filters { display: flex; gap: 6px; }
.oi-mock__filters span { background: #fff; border: 1px solid var(--oi-line); padding: 6px 10px; border-radius: 8px; color: var(--oi-muted); font-size: 10.5px; }
.oi-mock__table { padding: 4px 10px; }
.oi-mock__prow, .oi-mock__orow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef3f7; }
.oi-mock__prow:last-child, .oi-mock__orow:last-child { border: 0; }
.oi-mock__ph { width: 30px; height: 30px; border-radius: 8px; background: var(--oi-100); color: var(--oi-700); font-weight: 800; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.oi-mock__prow p { flex: 1; margin: 0; display: block; }
.oi-mock__prow p strong { display: block; font-size: 11.5px; }
.oi-mock__prow em { font-style: normal; font-weight: 700; width: 36px; text-align: right; }
.oi-mock__prow b, .oi-mock__orow b { font-size: 10px; background: #f1f6fa; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.oi-mock__orow strong { width: 70px; font-size: 11px; }
.oi-mock__orow span { flex: 1; color: var(--oi-ink-2); }
.oi-mock__orow em { font-style: normal; font-weight: 800; width: 76px; text-align: right; }
.oi-mock__recv { display: flex; align-items: center; gap: 10px; }
.oi-mock__recv > i { width: 34px; height: 34px; border-radius: 10px; background: var(--oi-100); color: var(--oi-700); display: flex; align-items: center; justify-content: center; }
.oi-mock__recv p, .oi-mock__scan p { flex: 1; display: block; margin: 0; }
.oi-mock__recv strong, .oi-mock__scan strong { display: block; font-size: 11.5px; }
.oi-mock__locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.oi-mock__locs b { display: block; font: 800 20px var(--oi-font-head); margin: 2px 0 6px; }
.oi-mock__meter { height: 6px; border-radius: 6px; background: #e3edf3; overflow: hidden; }
.oi-mock__meter i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #0369a1); border-radius: 6px; }
.oi-mock__scan { display: flex; align-items: center; gap: 12px; }
.oi-mock__scan > i { font-size: 30px; color: var(--oi-800); }

@media (max-width: 575.98px) {
	.oi-mock__side { display: none; }
	.oi-mock__kpis { grid-template-columns: repeat(2, 1fr); }
	.oi-mock__row { grid-template-columns: 1fr; }
	.oi-mock__pos { flex-direction: column; }
	.oi-mock__pos-r { flex-basis: auto; border-left: 0; border-top: 1px solid var(--oi-line); }
	.oi-mock__locs { grid-template-columns: 1fr; }
}