/* =========================================================================
   BIFRATECH — Marketplace and locked modules
   Each tile reads its state from data-state="locked|open" (set from the
   director's switches by js/features.js). Colours come from style.css.
   ========================================================================= */
.vault-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px; }
.vault-tile--wide{ grid-column:1/-1; }

.vault-tile{
  position:relative; overflow:hidden; padding:28px 28px 24px; border-radius:26px; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(18,216,245,.16), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(255,157,24,.12), transparent 60%),
    linear-gradient(180deg, #0B2A5B, #071A3A);
  border:1px solid rgba(89,190,255,.30);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vault-tile:hover{ transform:translateY(-4px); border-color:rgba(18,216,245,.65); box-shadow:0 28px 70px rgba(0,190,255,.18); }
.vault-tile::before{          /* soft diagonal shine */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.06) 48%, transparent 60%);
  transform:translateX(-60%); transition:transform .9s ease;
}
.vault-tile:hover::before{ transform:translateX(60%); }

.vault-top{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.vault-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  font-size:11px; font-weight:950; letter-spacing:.8px; color:#FFE3B8;
  background:rgba(255,157,24,.16); border:1px solid rgba(255,157,24,.55);
}
.vault-chip svg{ width:13px; height:13px; fill:currentColor; }
.vault-chip--live{ color:#B8FFD9; background:rgba(53,213,138,.16); border-color:rgba(53,213,138,.6); }
.vault-tag{ font-size:11px; font-weight:900; letter-spacing:.6px; color:var(--muted); }

.vault-icon{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin-bottom:16px;
  background:linear-gradient(135deg, rgba(18,216,245,.25), rgba(30,120,255,.25)); border:1px solid rgba(18,216,245,.5);
}
.vault-icon svg{ width:34px; height:34px; fill:var(--cyan); }
.vault-tile h3{ margin:0 0 6px; font-size:26px; line-height:1.15; color:#fff; font-weight:950; }
.vault-tile h3 span{ color:var(--cyan); }
.vault-hook{ margin:0 0 14px; font-size:17px; font-weight:800; color:#FFD9A0; }
.vault-points{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px; }
.vault-points li{ position:relative; padding-left:26px; color:#CFE0F5; line-height:1.45; }
.vault-points li::before{
  content:""; position:absolute; left:0; top:.35em; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #7DF3FF, var(--cyan)); box-shadow:0 0 10px rgba(18,216,245,.6);
}

.vault-actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.vault-actions button{ min-height:50px; }
.vault-note{ min-height:1.4em; margin:12px 0 0; font-size:14px; color:var(--muted); }
.vault-note.ok{ color:#9BFFC8; }

/* locked: a quiet frosted treatment so it is clearly "not open yet" but still attractive */
.vault-tile[data-state="locked"] .vault-icon{ position:relative; }
.vault-tile[data-state="locked"] .vault-icon::after{
  content:""; position:absolute; right:-8px; bottom:-8px; width:24px; height:24px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2308172E' d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1Zm2 0h6V7a3 3 0 0 0-6 0v3Z'/></svg>") center/14px no-repeat;
  border:2px solid #071A3A;
}
.vault-tile[data-state="locked"] .vault-icon svg{ opacity:.8; }

.vault-tile[data-state="locked"] [data-when="open"],
.vault-tile[data-state="open"]   [data-when="locked"]{ display:none; }

.vault-fine{ margin-top:18px; color:var(--muted); font-size:13px; text-align:center; }

@media(max-width:820px){
  .vault-grid{ grid-template-columns:1fr; }
  .vault-tile{ padding:22px 20px 20px; border-radius:22px; }
  .vault-tile h3{ font-size:23px; }
  .vault-actions button{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .vault-tile, .vault-tile::before{ transition:none; }
  .vault-tile:hover{ transform:none; }
}

/* ---------------- How to pay (Naira / Dollar) ---------------- */
.pay-section .section-heading{ text-align:center; }
.pay-warning{ max-width:860px; margin:0 auto 18px; padding:14px 18px; border-radius:16px; border:1px solid #FF9D18;
  background:rgba(255,157,24,.12); color:var(--text); line-height:1.5; }
.pay-warning strong{ color:#FFC56B; }
.pay-tabs{ display:flex; justify-content:center; gap:10px; margin:0 0 16px; flex-wrap:wrap; }
.pay-tabs button{ border:1px solid var(--line); background:rgba(6,22,51,.6); color:var(--text); padding:10px 18px; border-radius:999px; font-weight:800; cursor:pointer; }
.pay-tabs button[aria-selected="true"]{ background:linear-gradient(135deg,var(--cyan),var(--blue2)); color:#fff; border-color:transparent; }
.pay-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; max-width:860px; margin:0 auto; }
.pay-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:linear-gradient(180deg,var(--panel),var(--panel3)); display:flex; flex-direction:column; gap:6px; min-width:0; }
.pay-cur{ font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--cyan); }
.pay-bank{ font-weight:800; font-size:18px; }
.pay-name{ color:var(--muted); }
.pay-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; }
.pay-number{ font-size:24px; font-weight:800; letter-spacing:.06em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pay-copy{ border:0; border-radius:10px; padding:8px 14px; font-weight:800; cursor:pointer; background:var(--cyan); color:#061633; }
.pay-extra{ color:var(--muted); font-size:14px; white-space:pre-line; overflow-wrap:anywhere; }
.pay-instr{ margin:6px 0 0; font-size:14px; line-height:1.5; white-space:pre-line; }
.pay-fine{ text-align:center; color:var(--muted); font-size:13px; margin-top:14px; }
/* ---------------- Legal: links, viewer, sign-up agreement ---------------- */
.link-inline{ background:none; border:0; padding:0; color:var(--cyan); text-decoration:underline; cursor:pointer; font:inherit; }
.legal-links{ margin-top:8px; font-size:13px; }
.legal-viewer{ position:fixed; inset:0; z-index:10000; background:rgba(2,8,20,.78); display:flex; align-items:center; justify-content:center; padding:16px; }
.legal-viewer[hidden]{ display:none; }
.legal-box{ position:relative; width:min(760px,100%); max-height:88vh; overflow:auto; background:#0A2856; border:1px solid var(--line);
  border-radius:20px; padding:24px 22px; color:var(--text); }
.legal-box h2{ margin:0 32px 4px 0; }
.legal-meta{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.legal-body p{ line-height:1.6; margin:0 0 12px; white-space:pre-line; overflow-wrap:anywhere; }
.legal-close{ position:absolute; top:12px; right:12px; border:0; background:rgba(255,255,255,.1); color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:16px; }
body.legal-open{ overflow:hidden; }
.terms-agree{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; margin:4px 0 2px; }
.terms-agree[hidden]{ display:none; }
.terms-agree input{ margin-top:3px; width:18px; height:18px; flex:none; }

/* ---------------- Website chat ---------------- */
.chat-btn{ position:fixed; left:16px; bottom:16px; z-index:9000; border:0; border-radius:999px; padding:12px 18px; font-weight:800;
  background:linear-gradient(135deg,var(--cyan),var(--blue2)); color:#fff; box-shadow:var(--shadow); cursor:pointer; }
.chat-btn[hidden]{ display:none; }
body[data-view="opening"] .chat-btn, body[data-view="opening"] .chat-panel{ display:none !important; }
.chat-panel{ position:fixed; left:16px; bottom:72px; z-index:9001; width:min(380px, calc(100vw - 32px)); max-height:min(620px, calc(100vh - 96px));
  display:flex; flex-direction:column; background:#0A2856; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); color:var(--text); overflow:hidden; }
.chat-panel[hidden]{ display:none; }
.chat-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:rgba(6,22,51,.7); }
.chat-x{ border:0; background:rgba(255,255,255,.1); color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; }
.chat-mode{ margin:0; padding:8px 14px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); }
.chat-list{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:120px; }
.chat-bubble{ max-width:86%; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.07); overflow-wrap:anywhere; }
.chat-bubble p{ margin:2px 0 0; white-space:pre-line; line-height:1.4; font-size:14px; }
.chat-bubble small{ display:block; margin-top:4px; font-size:11px; color:#FFC56B; }
.chat-who{ font-size:11px; font-weight:800; color:var(--cyan); }
.chat-customer{ align-self:flex-end; background:rgba(18,216,245,.18); }
.chat-ai{ border:1px solid rgba(255,197,107,.35); }
.chat-system{ align-self:center; background:transparent; text-align:center; color:var(--muted); }
.chat-typing{ font-size:12px; color:var(--muted); font-style:italic; }
.chat-start, .chat-form{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }
.chat-form{ flex-direction:row; align-items:flex-end; }
.chat-start input, .chat-start textarea, .chat-form textarea{ width:100%; box-sizing:border-box; padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:rgba(6,22,51,.7); color:var(--text); font:inherit; font-size:14px; resize:none; }
.chat-start[hidden], .chat-form[hidden]{ display:none; }
.chat-send{ border:0; border-radius:10px; padding:10px 14px; font-weight:800; background:var(--cyan); color:#061633; cursor:pointer; flex:none; }
.chat-foot{ display:flex; justify-content:space-between; gap:8px; padding:0 12px; font-size:12px; }
.chat-msg{ margin:4px 0; color:#FF9A9A; }
.chat-safe{ margin:4px 12px 10px; font-size:11px; color:var(--muted); }
@media (max-width:520px){ .chat-panel{ left:8px; right:8px; width:auto; bottom:68px; } .chat-btn{ left:10px; bottom:10px; padding:10px 14px; } }