/* Device mockups (phone / tablet / laptop) and the recreated screens inside them. */

/* ---------- Phone ---------- */
.phone {
  position: relative; aspect-ratio: 9 / 19; border-radius: 15% / 7.2%;
  background: linear-gradient(145deg, #2a3530, #0d1512); padding: 3.2%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 2px 2px rgba(0, 0, 0, 0.1), 0 30px 60px -18px rgba(11, 37, 25, 0.55), 0 70px 90px -50px rgba(11, 37, 25, 0.45);
}
.phone-notch { position: absolute; top: 2.6%; left: 50%; width: 30%; height: 2.6%; transform: translateX(-50%); border-radius: 99px; background: #0b100e; z-index: 2; }
.phone-screen {
  height: 100%; border-radius: 12% / 5.8%; overflow: hidden; background: var(--ivory);
  display: flex; flex-direction: column; gap: 6%; padding: 18% 7% 7%;
  font-size: clamp(7px, 0.8vw, 11px); container-type: inline-size;
}

/* Hero phone screen */
.ps-top span { display: block; color: var(--muted); font-size: 0.95em; }
.ps-top strong { font-family: var(--font-display); font-size: 1.7em; color: var(--forest-800); font-weight: 600; }
.ps-wallet { position: relative; border-radius: 1.2em; padding: 1em 1.1em; color: #fff; background: linear-gradient(135deg, var(--green-700), var(--forest-900)); }
.ps-wallet small { display: block; opacity: 0.8; }
.ps-wallet strong { font-size: 1.9em; font-weight: 800; }
.ps-chip { position: absolute; right: 0.9em; bottom: 1em; background: var(--mint-100); color: var(--forest-900); border-radius: 99px; padding: 0.3em 0.8em; font-weight: 800; font-size: 0.85em; }
.ps-label { font-weight: 800; color: var(--forest-800); font-size: 1.05em; }
.ps-item { display: flex; align-items: center; gap: 0.7em; background: #fff; padding: 0.55em; border-radius: 1em; box-shadow: var(--sh-1); }
.ps-item img { width: 3.2em; height: 3.2em; border-radius: 0.7em; object-fit: cover; }
.ps-item span { flex: 1; min-width: 0; }
.ps-item b { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item small { color: var(--muted); font-weight: 700; }
.ps-item em { font-style: normal; font-weight: 800; font-size: 0.85em; padding: 0.25em 0.7em; border-radius: 99px; background: var(--ivory-2); color: var(--forest-800); }
.ps-item em.ok { background: var(--mint-100); color: var(--green-700); }
.ps-qr { margin-top: auto; display: flex; align-items: center; gap: 0.6em; padding: 0.8em 1em; border-radius: 1em; background: var(--forest-800); color: #fff; font-weight: 700; }
.ps-qr .lucide { width: 1.6em; height: 1.6em; color: var(--emerald-300); }

/* ---------- Showcase device switching ---------- */
.device-wrap { position: relative; width: 100%; display: grid; place-items: center; perspective: 1600px; }
.device { transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out); }
.device.is-entering { opacity: 0; transform: translateY(24px) rotateX(8deg) scale(0.96); }
.device.is-leaving { opacity: 0; transform: translateY(-16px) scale(0.98); position: absolute; }
.device-wrap .phone { width: min(300px, 70%); }

.tablet {
  width: min(560px, 100%); aspect-ratio: 4 / 3; border-radius: 28px; padding: 16px;
  background: linear-gradient(145deg, #2a3530, #0d1512);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 40px 80px -30px rgba(11, 37, 25, 0.6);
  transform: rotateX(6deg) rotateY(-8deg);
}
.tablet .screen { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: var(--ivory); }

.laptop { width: min(640px, 100%); transform: rotateX(4deg); }
.laptop .lid { border-radius: 18px 18px 6px 6px; padding: 12px; background: linear-gradient(145deg, #2a3530, #101815); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.laptop .screen { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--ivory); }
.laptop .base {
  position: relative; height: 16px; margin: 0 -7%; border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #d9ddd8, #a9b0aa); box-shadow: 0 30px 50px -20px rgba(11, 37, 25, 0.55);
}
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #8f9790; }

/* ---------- Screen UIs (shared "app" look) ---------- */
.app { height: 100%; display: flex; flex-direction: column; font-size: 11px; color: var(--ink); }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--forest-800); color: #fff; }
.app-bar strong { font-size: 1.1em; }
.app-bar .pill { background: rgba(255, 255, 255, 0.15); color: #fff; }
.app-body { flex: 1; min-height: 0; padding: 12px; display: grid; gap: 10px; align-content: start; overflow: hidden; }

/* Member (phone) */
.m-screen { padding: 16% 6% 6%; gap: 4.5%; }
.m-hello { display: flex; justify-content: space-between; align-items: center; }
.m-hello b { font-family: var(--font-display); font-size: 1.6em; color: var(--forest-800); }
.m-avatar { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--saffron-100); color: #8a5310; display: grid; place-items: center; font-weight: 800; }
.m-tabs { display: flex; gap: 0.4em; }
.m-tabs span { padding: 0.35em 0.8em; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 0.9em; }
.m-tabs span.on { background: var(--forest-800); color: #fff; border-color: transparent; }
.m-card { display: grid; grid-template-columns: 3.6em 1fr auto; gap: 0.7em; align-items: center; padding: 0.55em; background: #fff; border-radius: 1em; box-shadow: var(--sh-1); }
.m-card img { width: 3.6em; height: 3.6em; border-radius: 0.8em; object-fit: cover; }
.m-card b { display: block; }
.m-card small { color: var(--muted); font-weight: 600; }
.m-add { width: 2em; height: 2em; border-radius: 0.6em; display: grid; place-items: center; background: var(--green-700); color: #fff; font-weight: 800; }
.m-tag { display: inline-block; font-size: 0.8em; font-weight: 800; color: var(--green-700); }
.m-cart { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 0.8em 1em; border-radius: 1em; background: var(--forest-800); color: #fff; font-weight: 800; }
.m-cart span:last-child { background: var(--emerald-500); padding: 0.3em 0.8em; border-radius: 99px; }

/* Counter (tablet) */
.kds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; }
.kds-col { background: #fff; border-radius: 10px; padding: 8px; display: grid; gap: 7px; align-content: start; box-shadow: var(--sh-1); }
.kds-col h5 { margin: 0 0 2px; font-size: 0.95em; display: flex; justify-content: space-between; align-items: center; color: var(--forest-800); }
.ticket { border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; display: grid; gap: 3px; background: var(--ivory); }
.ticket b { font-size: 1.05em; }
.ticket small { color: var(--muted); font-weight: 600; }
.ticket .acts { display: flex; gap: 4px; margin-top: 3px; }
.ticket .acts span { flex: 1; text-align: center; padding: 3px 0; border-radius: 6px; font-weight: 800; font-size: 0.9em; }
.ticket .acts .yes { background: var(--green-700); color: #fff; }
.ticket .acts .no { background: #FDE8E5; color: var(--danger); }
.ticket.ready { border-color: var(--emerald-500); background: var(--mint-50); }

/* Admin (laptop) */
.adm { display: grid; grid-template-columns: 22% 1fr; height: 100%; font-size: 10px; }
.adm-side { background: var(--forest-900); color: rgba(255, 255, 255, 0.75); padding: 12px 8px; display: grid; gap: 4px; align-content: start; }
.adm-side b { color: #fff; font-family: var(--font-display); font-size: 1.3em; padding: 0 6px 8px; }
.adm-side span { padding: 6px 8px; border-radius: 6px; font-weight: 600; }
.adm-side span.on { background: rgba(32, 165, 107, 0.25); color: #fff; }
.adm-main { padding: 12px 14px; display: grid; gap: 10px; align-content: start; overflow: hidden; }
.adm-head { display: flex; justify-content: space-between; align-items: center; }
.adm-head b { font-size: 1.35em; color: var(--forest-800); }
.adm-btn { padding: 4px 10px; border-radius: 99px; background: var(--green-700); color: #fff; font-weight: 800; }
.adm-row { display: grid; grid-template-columns: 2.4em 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.adm-row img { width: 2.4em; height: 2.4em; border-radius: 6px; object-fit: cover; }
.adm-row b { font-weight: 700; }
.adm-row small { color: var(--muted); }
.adm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-kpis div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.adm-kpis small { color: var(--muted); font-weight: 700; display: block; }
.adm-kpis b { font-size: 1.5em; color: var(--forest-800); }
.adm-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.adm-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--emerald-500); }
.adm-bars i:nth-child(odd) { background: var(--green-700); }