/* Guest pages: join (code entry + invitation) and the guest's tab pass. Builds on styles.css + app.css. */

.guest .ic { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.guest .card h2 { font-size: 20px; letter-spacing: -0.02em; }
.guest .card + .card, .guest .pass + .g-notice, .guest .pass + .card, .guest .g-notice + .card { margin-top: 16px; }
.guest .alt button { font-size: 14px; color: var(--muted); font-weight: 500; text-decoration: underline; }
.field em.opt { font-style: normal; font-weight: 500; color: var(--muted); }
.fine { color: var(--muted); font-size: 13px; text-align: center; margin-top: 14px; line-height: 1.5; }

.demo-banner { background: var(--ink-800); color: #dfe4ee; font-size: 13px; text-align: center; padding: 8px 16px; }
.demo-banner b { color: var(--gold-2); }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fcf7a; margin-right: 7px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(47, 207, 122, 0.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(47, 207, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 207, 122, 0); } }

/* ---------- Invitation ---------- */
.inv-hero { padding: 12px 4px 24px; }
.inv-hero h1 { font-size: clamp(34px, 9vw, 44px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.02; margin-top: 6px; }
.inv-host { color: var(--muted); margin-top: 8px; font-weight: 500; }
.on-host { display: flex; gap: 10px; align-items: center; background: var(--peach); color: var(--gold-ink); border-radius: 14px; padding: 13px 15px; margin-top: 20px; font-size: 15px; }
.on-host b { color: var(--text); }
.inv-meta { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
.inv-meta li { display: flex; gap: 12px; align-items: flex-start; }
.inv-meta .ic { color: var(--gold-ink); margin-top: 2px; }
.inv-meta span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.inv-meta b { display: block; color: var(--text); font-size: 15px; font-weight: 600; }

.center-card { text-align: center; }
.center-card h1 { font-size: 28px; margin-top: 4px; }
.big-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--peach); color: var(--gold-ink); margin-bottom: 14px; }
.big-ic .ic { width: 26px; height: 26px; }

/* ---------- Pass (wallet-style card) ---------- */
.pass {
  background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(247, 168, 27, 0.22), transparent 60%), linear-gradient(160deg, var(--ink-700), var(--ink-900));
  color: var(--ink-text); border-radius: 24px; padding: 20px 20px 18px; box-shadow: 0 22px 50px rgba(10, 20, 40, 0.35);
}
.pass.off .pass-qr { opacity: 0.35; filter: grayscale(1); }
.pass-top { display: flex; justify-content: space-between; align-items: center; }
.pass-logo { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: #fff; display: inline-flex; align-items: baseline; }
.pass-logo .logo-o { width: 0.62em; height: 0.75em; color: #fff; margin: 0 1px; }
.pass-status { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 5px 11px; }
.pass-event { margin-top: 22px; }
.pass-event small { color: var(--gold-2); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pass-event b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; }
.pass-qr-wrap { display: flex; gap: 18px; align-items: center; margin-top: 18px; }
.pass-qr { background: #fff; border-radius: 14px; padding: 8px; line-height: 0; transition: opacity 0.3s; }
.pass-qr img, .pass-qr canvas { width: 112px; height: 112px; }
.pass-who small { display: block; color: var(--ink-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.pass-who b { display: block; font-size: 17px; margin-bottom: 10px; }
.pass-who b:last-child { margin-bottom: 0; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.pass-hint { color: var(--ink-muted); font-size: 13px; margin-top: 16px; }

/* ---------- Notices ---------- */
.g-notice { display: flex; gap: 12px; align-items: flex-start; border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.g-notice .ic { width: 20px; height: 20px; margin-top: 1px; }
.g-notice b { display: block; font-size: 15px; }
.g-notice.info { background: #e9f1fd; color: #1b4c98; }
.g-notice.warn { background: #fff3dc; color: #7c4a00; }
.g-notice.ok { background: #e3f6ec; color: #1a6b43; }
.g-notice.muted { background: #efece6; color: #4f5664; }

/* ---------- Spending + orders ---------- */
.g-card { padding: 22px 20px; }
.g-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.g-pill { background: #e3f6ec; color: #1a6b43; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.g-count { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 10px; color: var(--muted); }
.g-spent { margin-top: 12px; }
.g-spent b { font-size: 38px; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.g-spent span { display: block; color: var(--muted); font-size: 14px; }
.g-bar { height: 10px; border-radius: 999px; background: #efe9df; overflow: hidden; margin-top: 14px; }
.g-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width 0.4s ease; }
.g-bar.warn span { background: linear-gradient(90deg, #ffb347, #f28b1b); }
.g-bar.danger span { background: linear-gradient(90deg, #f07a5f, #d0412f); }
.btn.sim { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.g-orders { list-style: none; margin-top: 8px; }
.g-orders li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.g-orders li:last-child { border-bottom: none; }
.g-orders b { display: block; font-size: 15px; font-weight: 600; }
.g-orders small { color: var(--muted); font-size: 13px; }
.g-orders .amt { text-align: right; font-variant-numeric: tabular-nums; }
.g-orders .declined .amt b { text-decoration: line-through; color: var(--muted); }
.g-orders .declined .amt small { color: #b0322a; }
.g-orders .pending .amt small { color: #9a5b00; }
.g-empty { color: var(--muted); font-size: 14px; margin-top: 10px; }

.wallet-btn { margin-top: 20px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wallet-btn em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 4px; }