/* ── BOUTIQUE ─────────────────────────────────────────── */
.balance-pill {
  display:flex; align-items:center; gap:8px;
  padding:8px 16px; background:var(--surface); border:1px solid var(--border);
  border-radius:30px; font-size:14px; font-weight:600; color:var(--text);
}
.balance-label { color:var(--text3); font-weight:400; font-size:12px }
.store-status-badge { padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600 }
.store-status-badge.active   { background:rgba(35,211,165,.1); color:var(--green); border:1px solid rgba(35,211,165,.2) }
.store-status-badge.inactive { background:rgba(248,113,113,.1); color:var(--red);  border:1px solid rgba(248,113,113,.2) }
.policies-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px }
.policy-pill, .store-rule-tag {
  padding:4px 11px; border-radius:20px;
  background:rgba(155,109,255,.04); border:1px solid rgba(155,109,255,.1);
  color:var(--text2); font-size:12px; display:inline-block;
}

/* ── PACK CARDS ──────────────────────────────────────── */
.packs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin-bottom:6px }
.packs-loading { color:var(--text3); font-size:13px; padding:20px }

/* Both .pack-card (CryptoCheckout) and .store-pack-card (script.js fallback) */
.pack-card, .store-pack-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 14px 14px;
  cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:6px;
}
.pack-card:hover, .store-pack-card.clickable:hover {
  border-color:var(--pack-color, rgba(155,109,255,.4));
  transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.3);
  background:var(--surface2);
}
.pack-card.popular, .store-pack-card.popular { border-color:rgba(251,191,36,.3) }
.pack-popular-tag {
  position:absolute; top:10px; right:10px;
  background:var(--gold); color:#000;
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:20px; z-index:1;
}
/* Pack icon: constrained small box */
.pack-icon, .pack-icon-wrap {
  width:34px; height:34px; min-width:34px; max-width:34px;
  min-height:34px; max-height:34px;
  border-radius:8px; background:rgba(155,109,255,.07);
  display:flex; align-items:center; justify-content:center;
  color:var(--pack-color, var(--accent)); flex-shrink:0; margin-bottom:2px;
  overflow:hidden;
}
.pack-icon svg, .pack-icon-wrap svg { width:18px; height:18px; max-width:18px; max-height:18px; flex-shrink:0 }
.pack-price { font-size:20px; font-weight:800; color:var(--text); line-height:1; font-family:'Space Mono',monospace }
.pack-name  { font-size:12.5px; font-weight:600; color:var(--text) }
.pack-desc  { font-size:11.5px; color:var(--text3) }
.pack-cta   { margin-top:auto; padding-top:6px; font-size:12px; font-weight:600; color:var(--pack-color, var(--accent)); display:flex; align-items:center; gap:4px }
.pack-no-crypto { margin-top:auto; padding-top:6px; font-size:12px; color:var(--text3) }
/* color variants (used by old renderStore) */
.store-pack-card.blue   { --pack-color:#a78bfa }
.store-pack-card.green  { --pack-color:var(--green) }
.store-pack-card.orange { --pack-color:var(--orange) }
.store-pack-card.purple { --pack-color:var(--purple) }
.store-pack-card.gold   { --pack-color:var(--gold) }

/* ── ORDERS LIST ─────────────────────────────────────── */
.orders-list .order-row, .order-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 4px; border-bottom:1px solid var(--border);
}
.orders-list .order-row:last-child { border-bottom:none }
.order-currency-badge {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:rgba(155,109,255,.09); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
}
.order-row-left  { display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.order-row-name  { font-size:13px; font-weight:500; color:var(--text) }
.order-ref, .order-row-ref { font-family:'Space Mono',monospace; font-size:11px; color:var(--text3) }
.order-pkg   { font-size:13px; font-weight:500; color:var(--text) }
.order-row-hash  { font-size:11px; color:var(--text3) }
.order-row-right { display:flex; align-items:center; gap:10px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end }
.order-price { font-size:12px; color:var(--text2) }
.order-date  { font-size:11px; color:var(--text3); flex-shrink:0 }
.orders-empty, .order-empty { color:var(--text3); font-size:13px; padding:14px 0; text-align:center }
.order-status-pill { padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap }
.order-status-pill.wait,    .status-wait    { background:rgba(251,191,36,.1);  color:var(--gold) }
.order-status-pill.pending, .status-pending { background:rgba(155,109,255,.1);  color:var(--accent) }
.order-status-pill.ok,      .status-ok      { background:rgba(35,211,165,.1);  color:var(--green) }
.order-status-pill.ko,
.order-status-pill.expired, .status-ko      { background:rgba(248,113,113,.1); color:var(--red) }