/* =====================================================================
   Solution page — Inventory & purchase   (prefix .sol-inv-)
   /ar/solutions/inventory-purchase/ and /solutions/inventory-purchase/
   ===================================================================== */

/* ---------- shared crate drawing (hero + explainer) ---------- */
.sol-inv-hero polygon, .sol-inv-x polygon { stroke-linejoin: round; }
.sol-inv-hero .cr polygon, .sol-inv-x .cr polygon { stroke: rgba(14,27,82,.16); stroke-width: 1; }
.sol-inv-hero .cr .f-top, .sol-inv-x .cr .f-top { fill: #fbfcff; }
.sol-inv-hero .cr .f-left, .sol-inv-x .cr .f-left { fill: #d3dbf0; }
.sol-inv-hero .cr .f-right, .sol-inv-x .cr .f-right { fill: #a9b7df; }
.sol-inv-hero .strap, .sol-inv-x .strap { fill: none; stroke: rgba(14,27,82,.2); stroke-width: 1.2; }
.sol-inv-gold .f-top { fill: #f9e6b4; }
.sol-inv-gold .f-left { fill: #e9b440; }
.sol-inv-gold .f-right { fill: #c48f1c; }
.sol-inv-gold polygon { stroke: rgba(90,55,0,.3); stroke-width: 1; }
.sol-inv-gold .strap { stroke: rgba(90,55,0,.4); }
.sol-inv-slot polygon { fill: rgba(227,168,43,.1); stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 4 5; }
.sol-inv-arc { fill: none; stroke-width: 1.6; stroke-dasharray: 3 8; stroke-linecap: round; animation: sol-inv-arc 2.2s linear infinite; }
@keyframes sol-inv-arc { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -44; } }

/* ---------- hero art: two warehouses, one crate on its way ---------- */
.sol-inv-hero .floor { fill: rgba(255,255,255,.05); stroke: rgba(201,211,242,.4); stroke-width: 1.2; stroke-dasharray: 2 7; }
.sol-inv-hero .sol-inv-arc { stroke: rgba(247,226,173,.65); }
.sol-inv-hero > g:nth-of-type(1) { animation: sol-inv-rise 1s var(--ease) both; }
.sol-inv-hero > g:nth-of-type(2) { animation: sol-inv-rise 1s var(--ease) .15s both; }
.sol-inv-code rect { fill: var(--lapis-900); fill-opacity: .7; }
.sol-inv-code .scan { fill: var(--gold); fill-opacity: 1; }
@keyframes sol-inv-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ---------- explainer: inter-company transfer ---------- */
.sol-inv-x { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; overflow: visible; --sx: -1; }
[dir="ltr"] .sol-inv-x { --sx: 1; }
.sol-inv-x text { font-family: var(--f-ui); text-anchor: middle; direction: rtl; }
[dir="ltr"] .sol-inv-x text { direction: ltr; }
.sol-inv-x .co { font-size: 15.5px; font-weight: 700; fill: var(--lapis-900); }
.sol-inv-x .doc { fill: #fff; stroke: var(--lapis-300); stroke-width: 1.3; filter: drop-shadow(0 6px 8px rgba(14,27,82,.1)); }
.sol-inv-x .doc-a { animation: sol-inv-doc-a 8s ease infinite; }
.sol-inv-x .doc-b { animation: sol-inv-doc-b 8s ease infinite; }
.sol-inv-x .doc-t { font-size: 14.5px; font-weight: 500; fill: var(--lapis-900); }
.sol-inv-x-link line { stroke: var(--gold-deep); stroke-width: 2; stroke-dasharray: 4 5; animation: flow 1.4s linear infinite; }
.sol-inv-x-link text { font-size: 13px; font-weight: 500; fill: var(--gold-deep); }
.sol-inv-x-tok { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.6; animation: sol-inv-tok 8s var(--ease) infinite; }
.sol-inv-x .floor { fill: rgba(53,83,212,.05); stroke: var(--lapis-300); stroke-width: 1.1; stroke-dasharray: 2 6; }
.sol-inv-x .sol-inv-arc { stroke: var(--gold-deep); }
.sol-inv-x .wh { font-size: 14.5px; font-weight: 500; fill: var(--ink); }
.sol-inv-x .val-t { font-size: 12.5px; font-weight: 300; fill: var(--ink-3); }
.sol-inv-x .val-track { fill: var(--stone-2); stroke: var(--line); stroke-width: 1; }
.sol-inv-x .val { fill: var(--lapis-500); transform-box: fill-box; transform-origin: right center; }
[dir="ltr"] .sol-inv-x .val { transform-origin: left center; }
.sol-inv-x .val-a { transform: scaleX(.78); animation: sol-inv-val-a 8s var(--ease) infinite; }
.sol-inv-x .val-b { transform: scaleX(.7); animation: sol-inv-val-b 8s var(--ease) infinite; }
.sol-inv-x-join { fill: none; stroke: var(--lapis-300); stroke-width: 1.6; stroke-dasharray: 3 5; animation: sol-inv-arc 2.2s linear infinite; }
.sol-inv-x .grp { fill: var(--lapis-800); }
.sol-inv-x .grp-t { font-size: 15px; font-weight: 700; fill: #fff; }

@keyframes sol-inv-doc-a {
  0%, 14% { fill: var(--gold-soft); stroke: var(--gold); }
  22%, 100% { fill: #fff; stroke: var(--lapis-300); }
}
@keyframes sol-inv-doc-b {
  0%, 24% { fill: var(--paper); stroke: var(--line); stroke-dasharray: 4 4; }
  30%, 42% { fill: var(--gold-soft); stroke: var(--gold); stroke-dasharray: none; }
  50%, 100% { fill: #fff; stroke: var(--lapis-300); stroke-dasharray: none; }
}
@keyframes sol-inv-tok {
  0%, 13% { transform: translateX(0) rotate(45deg); }
  14% { transform: translateX(calc(var(--sx) * -34px)) rotate(45deg); }
  28% { transform: translateX(calc(var(--sx) * 34px)) rotate(45deg); }
  34%, 100% { transform: translateX(0) rotate(45deg); }
}
@keyframes sol-inv-val-a { 0%, 46% { transform: scaleX(1); } 58%, 100% { transform: scaleX(.78); } }
@keyframes sol-inv-val-b { 0%, 72% { transform: scaleX(.48); } 84%, 100% { transform: scaleX(.7); } }

/* ---------- landed cost: what a shipment has cost by the time it is on the shelf ---------- */
.sol-inv-landed { margin-bottom: clamp(16px, 2vw, 28px); }
.sol-inv-bar { list-style: none; display: flex; gap: 4px; }
.sol-inv-bar li { flex: var(--w) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--f-ui); }
.sol-inv-bar li i {
  display: block; height: 56px; margin-bottom: 12px; border-radius: 3px;
  background: linear-gradient(180deg, hsl(226 60% 40%), hsl(228 64% 29%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -5px 0 rgba(0,0,0,.28);
  transform-origin: right center;
}
[dir="ltr"] .sol-inv-bar li i { transform-origin: left center; }
.sol-inv-bar li:nth-child(2) i { background: linear-gradient(180deg, hsl(226 62% 52%), hsl(228 62% 42%)); }
.sol-inv-bar li:nth-child(3) i { background: linear-gradient(180deg, hsl(226 70% 66%), hsl(228 62% 56%)); }
.sol-inv-bar li:nth-child(4) i { background: linear-gradient(180deg, #f0bb45, #cf9119); }
.sol-inv-bar b { font-weight: 700; font-size: 17px; color: var(--lapis-900); line-height: 1.4; }
.sol-inv-bar span { font-size: var(--t-xs); font-weight: 300; color: var(--ink-3); }
.sol-inv-iraq.in-view .sol-inv-bar li i { animation: sol-inv-seg .8s var(--ease) both; animation-delay: calc(var(--i) * .28s + .2s); }
.sol-inv-landed figcaption {
  position: relative; margin-top: 18px; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  font-family: var(--f-ui);
}
.sol-inv-landed figcaption::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 9px;
  border: 1.5px solid var(--gold-deep); border-top: 0; border-radius: 0 0 3px 3px;
}
.sol-inv-landed figcaption b { font-family: var(--f-display); font-size: var(--t-lg); color: var(--lapis-900); }
.sol-inv-landed figcaption span { font-size: var(--t-xs); color: var(--ink-3); font-weight: 300; }
@keyframes sol-inv-seg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 920px) {
  .sol-inv-x { max-width: 460px; }
}
@media (max-width: 600px) {
  .sol-inv-bar { flex-direction: column; gap: 10px; }
  .sol-inv-bar li { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sol-inv-bar li i { height: 30px; margin-bottom: 6px; width: calc(var(--w) * 1.7%); min-width: 40px; }
}