/* ═══════════════════════════════════════════════════════
   SILV MARKET — Shared Design System
   All pages load this file. Page-specific styles stay inline.
═══════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800;900&family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── RESET ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS ───────────────────────────────────── */
:root {
  /* Brand colors */
  --purple:  #9333ea;
  --pink:    #ff10f0;
  --yellow:  #ffd700;
  --green:   #00c853;
  --red:     #ef4444;
  --blue:    #60a5fa;

  /* Surfaces */
  --bg:      #07031a;
  --surface: rgba(13,10,30,.82);
  --surface2:rgba(17,13,38,.88);
  --border:  rgba(255,255,255,.08);

  /* Text */
  --text:    rgba(255,255,255,.9);
  --muted:   rgba(255,255,255,.38);
  --sub:     rgba(255,255,255,.22);

  /* CTA gradient — use only on primary action buttons */
  --fire: linear-gradient(135deg,#ff2d55 0%,#ff10f0 45%,#c084fc 75%,#60a5fa 100%);
}

/* ── BASE ────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: 'Inter', sans-serif; }
input, textarea, select { font-family: 'Inter', sans-serif; }
img { display: block; }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(147,51,234,.4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(147,51,234,.7); }

/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  height: 58px;
  background: rgba(7,3,22,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,16,240,.06);
}
.topbar-logo {
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg,#a855f7,#ff10f0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
}
.topbar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: color .15s;
  cursor: pointer;
}
.topbar-back:hover { color: #fff; }
.topbar-back svg { opacity: .7; }
.topbar-secure {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.topbar-secure svg { opacity: .6; }

/* ── CARD ────────────────────────────────────────────── */
.card {
  background: rgba(13,10,30,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: border-color .2s;
}
.card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title svg { opacity: .5; }

/* ── FORM INPUTS ─────────────────────────────────────── */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .4px;
}
.field-input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.field-input:focus {
  border-color: rgba(147,51,234,.6);
  background: rgba(147,51,234,.06);
}
.field-input::placeholder { color: rgba(255,255,255,.2); }

/* ── BADGE ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  font-family: 'Orbitron', monospace;
}

/* ── UTILITY ─────────────────────────────────────────── */
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.t-yellow     { color: var(--yellow); }
.t-muted      { color: var(--muted); }
.t-green      { color: var(--green); }
.t-red        { color: var(--red); }
.t-pink       { color: var(--pink); }
.t-purple     { color: var(--purple); }
.sr-only      { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── CART TOTAL ──────────────────────────────────────── */
@keyframes shimmer-move{0%{background-position:200% center}100%{background-position:-200% center}}
.cs-tot{
  font-family:'Orbitron',monospace;font-size:19px;font-weight:700;
  background:linear-gradient(90deg,var(--yellow),var(--pink),var(--yellow));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer-move 2.5s linear infinite;
}

/* ── RESPONSIVE BASE ─────────────────────────────────── */
@media (max-width: 768px) {
  .topbar { padding: 0 16px; gap: 10px; }
}

/* ── Mobile Bottom Nav ─────────────────────────────── */
.mob-bot-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:6000;background:rgba(7,3,26,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(147,51,234,.18);padding-bottom:env(safe-area-inset-bottom)}
.mob-bot-nav-inner{display:flex;align-items:stretch;height:56px}
.mbn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:rgba(255,255,255,.38);transition:color .15s;text-decoration:none;-webkit-tap-highlight-color:transparent;position:relative;border:none;background:none;font-family:Rajdhani,sans-serif;font-size:10px;font-weight:700;letter-spacing:.5px;padding:0}
.mbn-item:hover,.mbn-item.mbn-active{color:#ff10f0}
.mbn-item svg{width:20px;height:20px;flex-shrink:0}
.mbn-badge{position:absolute;top:5px;right:calc(50% - 17px);min-width:16px;height:16px;background:#ff10f0;border-radius:8px;font-size:9px;font-weight:800;color:#fff;display:none;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box;pointer-events:none}
@media(max-width:768px){
  .mob-bot-nav{display:block}
  body:has(.mob-bot-nav){padding-bottom:56px}
}