/* PMS page: tabbed screens, animated QR scan */

/* ---- Tabs above a screenshot ---- */
.tabfig__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabfig__tabs button {
  font: 700 .88rem var(--font); color: var(--muted); background: #FFF; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.tabfig__tabs button[aria-selected="true"] { color: #FFF; background: var(--blue); border-color: var(--blue); }
.tabfig__tabs button:hover { border-color: var(--blue); }

/* ---- QR scan scene ---- */
.qrscene { position: relative; aspect-ratio: 560 / 360; max-width: 600px; margin: 0 auto; width: 100%; }
.qrmachine { position: absolute; left: 0; bottom: 0; width: 64%; height: auto; overflow: visible; }
.qm-floor { stroke: #B8C7D8; stroke-width: 2; fill: none; }
.qm-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.qm-fill { fill: #EEF4FB; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.qrlabel rect { fill: #FFF; stroke: var(--ink); stroke-width: 1.5; }
.qrlabel g path { fill: var(--ink); }
.qrlabel text { font: 700 9px var(--font); fill: var(--ink); text-anchor: middle; }

.qrphone {
  position: absolute; right: 3%; top: 0; width: 27%; aspect-ratio: 9 / 18.6;
  background: var(--ink); border-radius: 18px; padding: 5px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(14,42,71,.55); transform-origin: 50% 60%;
}
.qrphone__cam, .qrphone__res { position: absolute; inset: 5px; border-radius: 13px; }
.qrphone__cam { background: #1B2733; display: grid; place-content: center; justify-items: center; gap: 10px; overflow: hidden; }
.qrphone__view { position: relative; width: 70%; aspect-ratio: 1; background: #FFF; padding: 7%; border-radius: 4px; outline: 3px solid rgba(255,255,255,.85); outline-offset: 6px; overflow: hidden; }
.qrphone__code { width: 100%; height: 100%; display: block; }
.qrphone__code path { fill: #0E2A47; }
.qrphone__scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #5AA0E8; box-shadow: 0 0 10px 3px rgba(90,160,232,.65); }
.qrphone__hint { font-size: .62rem; line-height: 1.2; text-align: center; padding: 0 6px; color: #C8D9EC; }
@media (max-width: 560px) { .qrphone__hint { display: none; } }
.qrphone__res { width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; object-position: top; opacity: 0; background: #F3F4F6; }
.qrphone__flash { position: absolute; inset: 0; background: #FFF; opacity: 0; pointer-events: none; }
.qrscene__replay {
  position: absolute; left: 0; top: 0; font: 700 .78rem var(--font); color: var(--blue); background: #FFF;
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px; cursor: pointer;
}
.qrscene__replay:hover { border-color: var(--blue); }

/* The loop: phone moves to the label, scans, flashes, the machine opens on screen */
.qrscene.is-on .qrphone { animation: qr-phone 8s ease-in-out infinite; }
.qrscene.is-on .qrphone__cam { animation: qr-cam 8s linear infinite; }
.qrscene.is-on .qrphone__res { animation: qr-res 8s linear infinite; }
.qrscene.is-on .qrphone__flash { animation: qr-flash 8s linear infinite; }
.qrscene.is-on .qrphone__scan { animation: qr-scanline 1.1s ease-in-out infinite alternate; }
.qrscene.is-on .qrlabel rect { animation: qr-label 8s linear infinite; }
.qrscene.is-paused * { animation-play-state: paused !important; }
@keyframes qr-phone {
  0%, 12% { transform: translate(0, 0) rotate(0); }
  30%, 56% { transform: translate(-140%, 16%) rotate(-8deg) scale(.9); }
  70%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes qr-cam { 0%, 57% { opacity: 1; } 60%, 93% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes qr-res { 0%, 57% { opacity: 0; } 60%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes qr-flash { 0%, 55% { opacity: 0; } 57% { opacity: .85; } 61%, 100% { opacity: 0; } }
@keyframes qr-scanline { from { transform: translateY(0); } to { transform: translateY(calc(var(--h, 120px))); } }
@keyframes qr-label { 0%, 50% { stroke: #0E2A47; stroke-width: 1.5; } 53%, 62% { stroke: #1C64B4; stroke-width: 4; } 66%, 100% { stroke: #0E2A47; stroke-width: 1.5; } }

@media (prefers-reduced-motion: reduce) {
  .qrscene .qrphone__cam { opacity: 0; }
  .qrscene .qrphone__res { opacity: 1; }
  .qrscene__replay { display: none; }
}
@media (max-width: 560px) { .qrphone { border-radius: 12px; padding: 3px; } .qrphone__cam, .qrphone__res { inset: 3px; border-radius: 9px; } .qrphone__res { width: calc(100% - 6px); height: calc(100% - 6px); } }