/* TPS VIP on the store (docs/STORE-INTEGRATION.md 6): the pop-up, the order-confirmed block, the about page pieces.
   Inter is the site font. Navy #0f172a, brand blue #45aad3, fills #f7fafc, lines #e6ebef, gold #d4a843 for the mark only. */
.tpsvip-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#0f172a;flex:none}
.tpsvip-mark svg{width:14px;height:14px;display:block}
.tpsvip-mark-lg{width:40px;height:40px;border-radius:11px}
.tpsvip-mark-lg svg{width:20px;height:20px}
.tpsvip-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:12px;background:linear-gradient(#1b8ab8,#12688f);color:#fff !important;font-weight:700;font-size:15px;text-decoration:none !important;box-shadow:0 1px 2px rgba(10,40,58,.2),inset 0 1px 0 rgba(255,255,255,.18)}
.tpsvip-btn:hover{filter:brightness(1.05)}

/* the pop-up: a sheet from the bottom on phones, a card in the middle on wider screens */
.tpsvip-pop{position:fixed;inset:0;z-index:99990;display:flex;align-items:flex-end;justify-content:center;padding:0 10px 10px;font-family:Inter,-apple-system,system-ui,sans-serif}
.tpsvip-pop[hidden]{display:none}
.tpsvip-pop-back{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tpsvip-pop-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:16px;padding:20px 18px 16px;box-shadow:0 24px 60px rgba(15,23,42,.35);animation:tpsvip-up .32s cubic-bezier(.2,.9,.2,1.1)}
@keyframes tpsvip-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.tpsvip-pop-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:999px;background:#f7fafc;color:#5b6a78;font-size:22px;line-height:1;cursor:pointer}
.tpsvip-pop-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tpsvip-pop-brand{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5b6a78}
.tpsvip-pop-card h2{margin:0 0 6px;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.5px;color:#0f172a}
.tpsvip-pop-sub{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:#334155}
.tpsvip-pop-sub b{color:#0f172a}
.tpsvip-pop-here{margin:0 0 12px;padding:9px 12px;border-radius:999px;background:#e8f6ee;color:#12694a;font-size:13px;font-weight:600}
.tpsvip-pop-here[hidden]{display:none}
.tpsvip-pop-perks{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.tpsvip-pop-perks li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:linear-gradient(135deg,rgba(69,170,211,.08),rgba(69,170,211,.03));border:1px solid rgba(69,170,211,.2);font-size:14px;line-height:1.35;color:#0f172a}
.tpsvip-pop-perks svg{width:20px;height:20px;flex:none;color:#2f8fc4}
.tpsvip-pop-cta{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:linear-gradient(#1b8ab8,#12688f);color:#fff !important;font-weight:700;font-size:16px;text-decoration:none !important;box-shadow:0 1px 2px rgba(10,40,58,.2),inset 0 1px 0 rgba(255,255,255,.18)}
.tpsvip-pop-cta2{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;background:transparent;border:1.5px solid rgba(69,170,211,.5);color:#45aad3 !important;font-weight:700;font-size:14.5px;text-decoration:none !important;margin-top:8px}
.tpsvip-pop-cta2:hover{background:rgba(69,170,211,.08)}
.tpsvip-pop-foot{display:flex;align-items:center;justify-content:center;margin-top:10px}
.tpsvip-pop-later{border:0;background:none;padding:8px 4px;color:#5b6a78;font-size:14px;font-weight:600;cursor:pointer}
@media (min-width:640px){.tpsvip-pop{align-items:center}.tpsvip-pop-card{padding:26px 24px 20px}}
@media (prefers-reduced-motion:reduce){.tpsvip-pop-card{animation:none}}

/* the order-confirmed block and the email block */
.tpsvip-order-wrap{max-width:600px;margin:0 auto 24px;padding:0 20px}
.tpsvip-order{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:linear-gradient(135deg,rgba(69,170,211,.08),rgba(69,170,211,.03));border:1px solid rgba(69,170,211,.2);font-family:Inter,-apple-system,system-ui,sans-serif}
.tpsvip-order-body b{display:block;font-size:16px;color:#0f172a;margin-bottom:4px}
.tpsvip-order-body p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#334155}

/* the about page tables */
.tpsvip-tiers,.tpsvip-example{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:14.5px}
.tpsvip-tiers th,.tpsvip-example th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5b6a78;padding:8px 10px;border-bottom:2px solid #e6ebef}
.tpsvip-tiers td,.tpsvip-example td{padding:10px;border-bottom:1px solid #e6ebef;color:#0f172a}
.tpsvip-example caption{text-align:left;font-weight:700;color:#0f172a;padding:0 0 8px}
.tpsvip-tiers tr.tpsvip-tier-gold td:first-child{color:#a07c2e;font-weight:700}
.tpsvip-tiers tr.tpsvip-tier-black td:first-child{font-weight:700}
.tpsvip-rate{font-weight:600;color:#0f172a}

/* ---------- reskin (design chat, 16 Sep 2026): the pop-up, the order block and the about page in the app's velvet and brass ---------- */
.tpsvip-mark{background:url(art/app-icon-192.png) center / cover no-repeat;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.tpsvip-mark svg{display:none}
.tpsvip-btn{background:linear-gradient(135deg,#f7e2a3,#d4a843 55%,#f0d078);color:#0a0810 !important;box-shadow:0 10px 24px -10px rgba(212,168,67,.7),inset 0 1px 0 rgba(255,255,255,.45)}
.tpsvip-pop-back{background:rgba(10,8,16,.66)}
.tpsvip-pop-card{background:linear-gradient(180deg,rgba(10,8,16,.55),rgba(10,8,16,.86)),url(art/pass-velvet.webp) center / cover no-repeat,#12101c;border:1px solid rgba(212,168,67,.45);box-shadow:0 30px 70px rgba(10,8,16,.6);color:#f5f1ea}
.tpsvip-pop-x{background:rgba(245,241,234,.12);color:#f5f1ea}
.tpsvip-pop-brand{width:96px;height:20px;overflow:hidden;text-indent:-9999px;white-space:nowrap;background:url(art/logo-lockup.webp) left center / contain no-repeat}
.tpsvip-pop-card h2{color:#fff}
.tpsvip-pop-sub{color:rgba(245,241,234,.72)}
.tpsvip-pop-sub b{color:#f0d078}
.tpsvip-pop-here{background:rgba(212,168,67,.16);border:1px solid rgba(240,208,120,.45);color:#f7e2a3}
.tpsvip-pop-here b{color:#fff}
.tpsvip-pop-perks li{background:rgba(10,8,16,.5);border:1px solid rgba(245,241,234,.1);color:#f5f1ea}
.tpsvip-pop-perks svg{color:#f0d078}
.tpsvip-pop-cta{background:linear-gradient(135deg,#f7e2a3,#d4a843 55%,#f0d078);color:#0a0810 !important;box-shadow:0 12px 28px -10px rgba(212,168,67,.8),inset 0 1px 0 rgba(255,255,255,.45)}
.tpsvip-pop-later{color:rgba(245,241,234,.6)}
.tpsvip-pop-cta2{border-color:rgba(240,208,120,.4);color:#f0d078 !important}
.tpsvip-pop-cta2:hover{background:rgba(240,208,120,.1)}
.tpsvip-pop-card::before{content:"";position:absolute;right:-8px;top:-14px;width:118px;height:118px;background:url(art/tier-vip.webp) center / contain no-repeat;opacity:.9;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));pointer-events:none}
.tpsvip-pop-head{padding-right:96px}
.tpsvip-order{background:linear-gradient(90deg,rgba(10,8,16,.78),rgba(10,8,16,.6) 55%,rgba(10,8,16,.42)),url(art/pass-velvet.webp) center / cover no-repeat,#12101c;border:1px solid rgba(212,168,67,.45);color:#f5f1ea;box-shadow:0 10px 26px rgba(15,23,42,.18)}
.tpsvip-order-body b{color:#f0d078}
.tpsvip-order-body p{color:rgba(245,241,234,.75)}
.tpsvip-tiers td:first-child{font-weight:700}
.tpsvip-tiers tr td:first-child::before{content:"";display:inline-block;width:18px;height:18px;margin:0 8px -4px 0;background:var(--tier-emb,url(art/tier-vip-badge.webp)) center / contain no-repeat}
.tpsvip-tiers tr.tpsvip-tier-silver td:first-child{--tier-emb:url(art/tier-silver-badge.webp)}
.tpsvip-tiers tr.tpsvip-tier-gold td:first-child{--tier-emb:url(art/tier-gold-badge.webp);color:#a07c2e}
.tpsvip-tiers tr.tpsvip-tier-black td:first-child{--tier-emb:url(art/tier-black-badge.webp)}
/* the pop-up hero: the velvet card and coins (Magnific, 16 Sep 2026) instead of the emblem in the corner */
.tpsvip-pop-card::before{right:12px;top:10px;width:140px;height:100px;background:url(art/store-vip-card.webp) center / contain no-repeat;opacity:1}
.tpsvip-pop-head{padding-right:140px;min-height:44px}
.tpsvip-pop-card h2{padding-right:135px}
@media (min-width:640px){.tpsvip-pop-card::before{width:150px;height:108px}.tpsvip-pop-card h2{padding-right:150px}}
/* the close button stays reachable above the hero art */
.tpsvip-pop-x{z-index:3;background:rgba(10,8,16,.75);border:1px solid rgba(245,241,234,.22)}