/* Codeator — point of sale solution page. Page-specific styles only; shared components live in site.css.
   Logical properties throughout, so the English twin can reuse this file. */
.sol-pos-caps { margin-top: 0; }
.sol-pos-iraq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 80px); margin-top: 0; }
.sol-pos-iraq b { display: block; margin-bottom: 2px; }
@media (max-width: 920px) { .sol-pos-iraq { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* shared look of this page's two illustrations */
.sol-pos-art { display: block; width: 100%; height: auto; overflow: visible; }
.sol-pos-art polygon { stroke: rgba(14,27,82,.2); stroke-width: 1; stroke-linejoin: round; }
.sol-pos-art .f-top { fill: #fbfcff; }
.sol-pos-art .f-left { fill: #d3dbf0; }
.sol-pos-art .f-right { fill: #a9b7df; }
.sol-pos-art text { font-family: var(--f-ui); text-anchor: middle; }
.sol-pos-explain { max-width: 560px; margin-inline: auto; }

/* ---------- hero: branches around one system; one branch goes offline, then syncs ---------- */
.sol-pos-hero polygon { stroke: rgba(9,18,58,.35); }
.sol-pos-orbit { fill: none; stroke: rgba(201,211,242,.3); stroke-width: 1.4; stroke-dasharray: 2 9; animation: flow-orbit 9s linear infinite; }
.sol-pos-wire { fill: none; stroke: rgba(201,211,242,.6); stroke-width: 1.6; stroke-dasharray: 3 7; animation: sol-pos-dash 1.2s linear infinite; }
.sol-pos-wire.idle { stroke: rgba(201,211,242,.25); animation: none; }
.sol-pos-pulse { fill: var(--gold); }
.sol-pos-rings circle { fill: none; stroke: var(--lapis-400); stroke-width: .11; stroke-linecap: round; }
.sol-pos-core { animation: bob-s 5s ease-in-out infinite alternate; }
.sol-pos-slip rect { fill: #fff; stroke: rgba(9,18,58,.35); stroke-width: 1; }
.sol-pos-slip path { fill: none; stroke: var(--lapis-300); stroke-width: 1.4; stroke-linecap: round; }
.sol-pos-slip { animation: sol-pos-print 3.6s var(--ease) infinite; animation-delay: calc(var(--n) * -.9s); }
.sol-pos-art .sol-pos-led { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.5; }
.sol-pos-branch.off .sol-pos-led { animation: sol-pos-led 9s linear infinite; }
.sol-pos-drop { animation: sol-pos-dash 1.2s linear infinite, sol-pos-link 9s linear infinite; }
@keyframes sol-pos-dash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes sol-pos-print { 0%, 55% { transform: translateY(16px); } 80%, 100% { transform: none; } }
@keyframes sol-pos-link { 0%, 38% { opacity: 1; } 42%, 74% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes sol-pos-led { 0%, 38% { fill: #e3a82b; } 42%, 74% { fill: #0e1b52; } 78%, 100% { fill: #e3a82b; } }

/* ---------- explainer: online → offline (orders queue on the device) → back online (they sync) ---------- */
.sol-pos-flow path { stroke: rgba(255,255,255,.92); stroke-width: 2.2; stroke-dasharray: 3 16; animation: flow 2.4s linear infinite; }
.sol-pos-cut { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 6; }
.sol-pos-break path { fill: none; stroke: var(--clay-deep); stroke-width: 3; stroke-linecap: round; }
.sol-pos-break { opacity: 0; }
.sol-pos-lab { font-size: 17px; font-weight: 700; fill: var(--lapis-900); }
.sol-pos-lab.s { font-size: 14.5px; font-weight: 400; fill: var(--ink-2); }
.sol-pos-stn circle { fill: var(--paper); stroke: var(--lapis-700); stroke-width: 3; }
.sol-pos-stn .core { fill: var(--gold); stroke: none; }
.sol-pos-till .scr { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 1.5; }
.sol-pos-book rect { fill: #fff; stroke: var(--lapis-700); stroke-width: 2; }
.sol-pos-book path { fill: none; stroke: var(--lapis-500); stroke-width: 2.2; stroke-linecap: round; }
.sol-pos-book .thin { stroke: var(--lapis-300); stroke-width: 1.8; }
.sol-pos-book rect.gold { fill: var(--gold); stroke: none; }
.sol-pos-rcpt rect { fill: #fff; stroke: var(--lapis-700); stroke-width: 1.8; }
.sol-pos-rcpt path { fill: none; stroke: var(--lapis-300); stroke-width: 1.6; stroke-linecap: round; }
.sol-pos-rcpt.a { transform: translateX(-50px); }
.sol-pos-rcpt.b { transform: translateX(-112px); }
.sol-pos-rcpt.q1, .sol-pos-rcpt.q2, .sol-pos-rcpt.q3 { opacity: 0; }
.sol-pos-pill { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.sol-pos-sd { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 2; }
.sol-pos-st { font-size: 15.5px; font-weight: 500; fill: var(--lapis-800); }
.sol-pos-st.off, .sol-pos-st.sync { opacity: 0; }
.sol-pos-st.off { fill: var(--clay-deep); }

@media (prefers-reduced-motion: no-preference) {
  .sol-pos-rcpt.a { animation: sol-pos-ra 12s linear infinite; }
  .sol-pos-rcpt.b { animation: sol-pos-rb 12s linear infinite; }
  .sol-pos-rcpt.q1 { animation: sol-pos-q1 12s linear infinite; }
  .sol-pos-rcpt.q2 { animation: sol-pos-q2 12s linear infinite; }
  .sol-pos-rcpt.q3 { animation: sol-pos-q3 12s linear infinite; }
  .sol-pos-gap, .sol-pos-flow .main { animation: sol-pos-gapk 12s linear infinite; }
  .sol-pos-st.on { animation: sol-pos-on 12s linear infinite; }
  .sol-pos-break, .sol-pos-st.off { animation: sol-pos-off 12s linear infinite; }
  .sol-pos-st.sync { animation: sol-pos-sync 12s linear infinite; }
  .sol-pos-sd { animation: sol-pos-sd 12s linear infinite; }
}
@keyframes sol-pos-ra { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 19% { transform: translateX(-143px); opacity: 1; } 22%, 100% { transform: translateX(-143px); opacity: 0; } }
@keyframes sol-pos-rb { 0%, 14% { transform: translateX(0); opacity: 0; } 17% { opacity: 1; } 33% { transform: translateX(-143px); opacity: 1; } 36%, 100% { transform: translateX(-143px); opacity: 0; } }
@keyframes sol-pos-q1 { 0%, 40% { transform: translateX(0); opacity: 0; } 43% { transform: translateX(0); opacity: 1; } 48%, 68% { transform: translateX(-34px); opacity: 1; } 78% { transform: translateX(-143px); opacity: 1; } 81%, 100% { transform: translateX(-143px); opacity: 0; } }
@keyframes sol-pos-q2 { 0%, 47% { transform: translateX(0); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } 55%, 72% { transform: translateX(-22px); opacity: 1; } 82% { transform: translateX(-143px); opacity: 1; } 85%, 100% { transform: translateX(-143px); opacity: 0; } }
@keyframes sol-pos-q3 { 0%, 54% { transform: translateX(0); opacity: 0; } 57% { transform: translateX(0); opacity: 1; } 61%, 76% { transform: translateX(-10px); opacity: 1; } 86% { transform: translateX(-143px); opacity: 1; } 89%, 100% { transform: translateX(-143px); opacity: 0; } }
@keyframes sol-pos-on { 0%, 37% { opacity: 1; } 39%, 91% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes sol-pos-gapk { 0%, 37% { opacity: 1; } 39%, 64% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes sol-pos-off { 0%, 37% { opacity: 0; } 39%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes sol-pos-sync { 0%, 64% { opacity: 0; } 66%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes sol-pos-sd { 0%, 37% { fill: #e3a82b; } 39%, 64% { fill: #f7f8fb; } 66%, 100% { fill: #e3a82b; } }

/* the drawing shrinks with the phone: keep its lettering readable */
@media (max-width: 600px) {
  .sol-pos-lab { font-size: 20px; }
  .sol-pos-lab.s { font-size: 17px; }
  .sol-pos-st { font-size: 18.5px; }
}