/* صفحة العرض المباشر: شاشة الموظف وجوال الزبون جنب بعض */
.demo{background:#DCE4E2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.demo__head{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.demo__steps{display:flex;gap:22px;margin:0 auto;padding:0;list-style:none;counter-reset:s;font-size:14px;font-weight:500}
.demo__steps li{counter-increment:s;display:flex;align-items:center;gap:8px}
.demo__steps li::before{content:counter(s);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--signal);color:var(--signal-ink);font-weight:700;font-size:12px}
.demo__acts{display:flex;gap:8px}
.demo-qr{text-align:center;max-width:380px}
.demo-qr__sub{color:var(--muted);font-size:15px;margin-bottom:16px}
.demo-qr__img{width:240px;height:240px;margin:0 auto 18px;padding:14px;background:#fff;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line)}
.demo-qr__img svg{width:100%;height:100%}
.demo__tabs{display:none}
.demo__stage{flex:1;display:flex;align-items:center;justify-content:center;gap:32px;padding:24px}
.device{margin:0;display:grid;gap:10px;justify-items:center}
.device figcaption{font-size:14px;color:var(--ink-2);font-weight:500}
.device iframe{display:block;border:0;background:#fff}
.device--tablet iframe{width:min(960px,calc(100vw - 470px));height:min(700px,calc(100vh - 150px));border-radius:22px;box-shadow:0 0 0 10px #102C30,0 24px 50px rgba(15,58,64,.3)}
.device--phone iframe{width:360px;height:min(720px,calc(100vh - 150px));border-radius:36px;box-shadow:0 0 0 10px var(--ink),0 24px 50px rgba(15,58,64,.3)}
.demo__error{text-align:center;padding:20px;color:var(--danger);font-weight:600}

@media (max-width:1100px){
  .demo__steps{display:none}
  .demo__acts{margin-inline-start:auto}
  .demo__tabs{display:flex;gap:6px;padding:10px 16px 0;justify-content:center}
  .demo__tabs button{flex:1;max-width:220px;min-height:44px;border:0;border-radius:12px;background:transparent;font-weight:600;color:var(--ink-2)}
  .demo__tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
  .demo__stage{padding:14px 16px}
  .demo__stage[data-show="phone"] .device--tablet,.demo__stage[data-show="tablet"] .device--phone{display:none}
  .device--tablet iframe,.device--phone iframe{width:calc(100vw - 32px);max-width:420px;height:calc(100dvh - 150px);min-height:540px;border-radius:24px;box-shadow:0 0 0 6px var(--ink)}
  .device--tablet iframe{max-width:none}
}