/* Component-specific styles */

/* Marketplace cards */
.market-card {
  background: var(--brand-card); border:1px solid var(--brand-border);
  border-radius: 20px; overflow:hidden; transition: transform .2s ease, box-shadow .25s ease;
  height: 100%; display:flex; flex-direction:column;
}
.market-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.market-card .thumb {
  height: 140px; background: linear-gradient(135deg,#EEF2F7,#DBEAFE);
  display:grid; place-items:center; font-size: 48px;
}
.market-card .body { padding: 16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.market-card .title { font-weight:800; font-size: .95rem; text-transform: uppercase; letter-spacing:.04em; }
.market-card .desc { font-size:.78rem; color: var(--brand-muted); }
.market-card .price-row { display:flex; align-items:center; gap:8px; margin-top: auto; }
.market-card .price { font-weight:800; color: var(--brand-blue); }
.market-card .strike { color: var(--brand-green); text-decoration: line-through; font-size:.8rem; }
.market-card .stock-pill {
  font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px;
  background: rgba(16,185,129,.12); color: var(--brand-green); text-transform:uppercase; letter-spacing:.08em;
}
.market-card .stock-pill.sold { background: rgba(239,68,68,.12); color:#EF4444; }

/* Foreign numbers status panels */
.fn-status {
  border-radius: 18px; padding: 20px;
  background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(37,99,235,.06));
  border: 1px dashed rgba(6,182,212,.35);
}
.fn-status.success { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(6,182,212,.06)); border-color: rgba(16,185,129,.4); }
.fn-status.fail { background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.05)); border-color: rgba(239,68,68,.4); }
.fn-otp { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 1.6rem; font-weight: 800; letter-spacing: .25em; color: var(--brand-navy); }
.fn-progress { height: 8px; border-radius:999px; background: var(--brand-bg-2); overflow:hidden; margin-top: 12px; }
.fn-progress > div { height:100%; background: var(--gradient-blue); transition: width 1s linear; }
.fn-progress.danger > div { background: linear-gradient(90deg,#EF4444,#F97316); }

/* Pool tier card */
.pool-tier {
  border:1px solid var(--brand-border); border-radius: 16px; padding: 16px;
  cursor: pointer; transition: all .2s ease; background: var(--brand-card);
}
.pool-tier:hover { border-color: var(--brand-blue); }
.pool-tier.active { border-color: var(--brand-blue); box-shadow: 0 8px 20px rgba(37,99,235,.18); background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(6,182,212,.05)); }
.pool-tier .tier-name { font-weight: 800; font-size: .95rem; }
.pool-tier .tier-meta { font-size:.78rem; color: var(--brand-muted); }
.pool-tier .tier-price { font-weight: 800; color: var(--brand-blue); }

/* Hero rocket landing */
.landing-hero {
  position:relative; padding: 80px 0 60px; overflow:hidden;
  background: radial-gradient(circle at 50% 0, rgba(37,99,235,.18), transparent 60%), var(--brand-bg);
}
.landing-hero .poster {
  width: 100%; max-width: 520px; margin: 30px auto 0; display:block;
  filter: drop-shadow(0 30px 60px rgba(37,99,235,.35));
}

/* Stat tile */
.stat-tile { background: var(--brand-card); border:1px solid var(--brand-border); border-radius: 18px; padding: 18px; }
.stat-tile .label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color: var(--brand-muted); }
.stat-tile .value { font-weight: 800; font-size: 1.5rem; margin-top: 6px; }

/* Onboarding */
.onboarding-shell {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0, rgba(37,99,235,.2), transparent 50%),
              radial-gradient(circle at 90% 100%, rgba(6,182,212,.2), transparent 50%),
              var(--brand-navy);
  color:#fff; display:flex; flex-direction:column;
}
.onboarding-shell .progress-strip { height: 4px; background: rgba(255,255,255,.1); }
.onboarding-shell .progress-strip > div { height:100%; background: var(--brand-cyan); transition: width .3s ease; }
.onboarding-step { flex:1; display:grid; place-items:center; padding: 40px 20px; }
.onboarding-card {
  max-width: 560px; width:100%; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(20px);
  border-radius: 24px; padding: 36px; text-align:center;
}
.onboarding-shell .dots { display:flex; gap:6px; justify-content:center; padding-top: 14px; }
.onboarding-shell .dots span { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);}
.onboarding-shell .dots span.active { background: var(--brand-cyan); width:24px; border-radius:999px; }

/* Pagination */
.pagination .page-link { color: var(--brand-blue); border-color: var(--brand-border); font-weight:700; }
.pagination .page-item.active .page-link { background: var(--brand-blue); border-color: var(--brand-blue); }

/* Network logo box */
.net-logo {
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:#fff; font-weight:800;
}
.net-mtn { background:#FFCC00; color:#000; }
.net-airtel { background:#E60000; }
.net-glo { background:#00A859; }
.net-9mobile { background:#0E8C3A; }

/* Dark mode adjustments */
[data-theme="dark"] .market-card .thumb { background: linear-gradient(135deg,#1E293B,#0F172A); }
[data-theme="dark"] .topbar .icon-btn { background: var(--brand-bg-2); }