/* premium.css — the shared premium-gate UI (SPA + public SSR). Linked by pwa_shell.php (W3a, 30 Oct 2026); the SSR
   layout link and Views/public/_premium_gate.php ship with a later wave. Built by public/assets/js/premium-gate.js.
   Locked blocks show FAKE skeleton rows only — never premium content (no blur used as a "security" layer).
   Dark is the default theme; [data-theme="light"] overrides follow. Tokens fall back so the file works on
   pages that don't define the app.css variables. */

.pg-block{--pg-card:var(--card,#17171a);--pg-text:var(--text,#ededf0);--pg-muted:#a1a1aa;--pg-border:var(--border,rgba(255,255,255,.12));--pg-ph:rgba(255,255,255,.10);
  position:relative;border:1px solid var(--pg-border);border-radius:14px;background:var(--pg-card);color:var(--pg-text);padding:14px 16px;margin:10px 0;max-width:100%;box-sizing:border-box;overflow:hidden}
.pg-block.pg-unlocked{border:0;background:none;padding:0;margin:0}
.pg-block.pg-compact{padding:10px 12px}
.pg-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.pg-title{font-weight:700;font-size:15px;line-height:1.3}
.pg-tier{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1;padding:3px 7px;border-radius:999px;background:#f59e0b;color:#000;vertical-align:middle}
.pg-tier[data-tier="vvip"]{background:#a78bfa;color:#1e1b4b}
.pg-tier[data-tier="vvvip"]{background:#f9a8d4;color:#500724}
.pg-preview{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--pg-text)}
.pg-placeholder{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;user-select:none;pointer-events:none}
.pg-ph-row{display:block;height:11px;border-radius:6px;background:var(--pg-ph);width:100%}
.pg-ph-row:nth-child(2){width:92%}
.pg-ph-row:nth-child(3){width:78%}
.pg-ph-row:nth-child(4){width:86%}
.pg-ph-row:nth-child(5){width:70%}
.pg-ph-row:nth-child(6){width:60%}
.pg-lock{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--pg-muted)}
.pg-lock-icon{margin-right:2px}
.pg-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:9px 16px;border-radius:10px;background:#2563eb;color:#fff !important;font-weight:700;font-size:14px;text-decoration:none !important;border:0;cursor:pointer;box-sizing:border-box}
.pg-cta:hover{background:#1d4ed8}
.pg-cta:focus-visible,.pg-btn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.pg-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Upgrade dialog (replaces the old inline-styled #tcgUpgradeOverlay; the id is kept). */
.pg-dialog-backdrop{position:fixed;inset:0;z-index:100060;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.pg-dialog{--pg-card:var(--card,#17171a);--pg-text:var(--text,#ededf0);--pg-muted:#a1a1aa;--pg-border:var(--border,rgba(255,255,255,.12));
  background:var(--pg-card);color:var(--pg-text);border:1px solid var(--pg-border);border-radius:16px;width:100%;max-width:380px;max-height:calc(100vh - 32px);overflow:auto;
  padding:22px 20px;box-sizing:border-box;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pg-dialog-icon{font-size:32px;line-height:1;margin-bottom:8px}
.pg-dialog-title{font-size:17px;font-weight:800;margin:0 0 8px;line-height:1.35}
.pg-dialog-text{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--pg-text)}
.pg-dialog-sub{color:var(--pg-muted);margin-bottom:16px}
.pg-dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pg-dialog-actions .pg-cta,.pg-dialog-actions .pg-btn{flex:1 1 140px}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 16px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-sizing:border-box}
.pg-btn-secondary{background:transparent;color:var(--pg-text);border:1px solid var(--pg-border)}
.pg-btn-secondary:hover{border-color:#60a5fa}

/* #my-plan: highlighted tier card + "back to where you were". */
.pg-plan-highlight{outline:3px solid #f59e0b;outline-offset:2px}
.pg-plan-flag{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:999px;background:#f59e0b;color:#000;font-size:11px;font-weight:800}
.pg-return{margin:0 0 12px;font-size:14px;font-weight:600}
.pg-return a{color:#60a5fa;text-decoration:none}
.pg-return a:hover,.pg-return a:focus-visible{text-decoration:underline}

@media (max-width:480px){
  .pg-block{padding:12px}
  .pg-dialog{padding:18px 16px}
  .pg-dialog-actions{flex-direction:column-reverse}
  .pg-dialog-actions .pg-cta,.pg-dialog-actions .pg-btn{flex:0 0 auto;width:100%}
  .pg-cta{width:100%}
}

[data-theme="light"] .pg-block,[data-theme="light"] .pg-dialog{--pg-card:#fff;--pg-text:#18181b;--pg-muted:#52525b;--pg-border:#d4d4d8;--pg-ph:#e4e4e7}
[data-theme="light"] .pg-dialog-backdrop{background:rgba(24,24,27,.55)}
[data-theme="light"] .pg-return a{color:#1d4ed8}
[data-theme="light"] .pg-cta:focus-visible,[data-theme="light"] .pg-btn:focus-visible{outline-color:#1d4ed8}