/* =============================================================================
 * Vitalum Live Market Data — exact port of exchanges.html hero right-side panel.
 * Sources: inline <style> in exchanges.html :64-128 (.ex-hm-*, .ex-live-dot).
 * All rules scoped under .vmd-scope so nothing leaks in or out.
 * ============================================================================= */

.vmd-scope,
.vmd-scope *,
.vmd-scope *::before,
.vmd-scope *::after { box-sizing: border-box; }

.vmd-scope {
  --vmd-primary: #1ebf95;

  display: block;
  width: 100%;
  color: #f2f7fb;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.vmd-scope p { margin: 0; }
.vmd-scope a { text-decoration: none; }

.vmd-scope .ex-hm-wrap { position: relative; }

.vmd-scope .ex-hm-header {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--vmd-primary) !important;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

/* Layout properties get !important so WP/Elementor grid resets can't undo them.
   Colours / radius / padding do NOT get !important so the Elementor Style panel
   controls can still override them.  */
.vmd-scope .ex-hm-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--vmd-gap, 1px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(30, 191, 149, .15);
  border: 1px solid rgba(30, 191, 149, .24);
  border-radius: 18px;
}

.vmd-scope .ex-hm-card {
  margin: 0 !important;
  border: 0 !important;
  text-align: center !important;
  background: #071310;               /* opaque, no bleed-through */
  padding: 2rem 1.4rem 1.75rem;
  transition: background .3s;
}
.vmd-scope .ex-hm-card:hover { background: #0a1a15; }

.vmd-scope .ex-hm-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #f2f7fb !important;
  display: block;
  margin-bottom: .6rem;
}

.vmd-scope .ex-hm-value {
  font-size: 1.7rem;
  font-weight: 200;
  color: #f2f7fb !important;
  line-height: 1.1;
  display: block;
  letter-spacing: -.02em;
  transition: color .3s;
}
.vmd-scope .ex-hm-value.loading { opacity: var(--vmd-loading-opacity, .18); }

.vmd-scope .ex-hm-footer {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: 1rem;
  font-size: .76rem;
  font-weight: 500;
  color: var(--vmd-primary) !important;
  text-decoration: none !important;
  letter-spacing: .03em;
  opacity: .75;
  float: right;
  transition: opacity .2s;
}
.vmd-scope .ex-hm-footer:hover { opacity: 1; color: var(--vmd-primary) !important; }

/* -- Pulsing live dot -- */
.vmd-scope .ex-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--vmd-primary);
  border-radius: 50%;
  vertical-align: middle;
  flex-shrink: 0;
  animation: vmdPulse 1.8s ease-in-out infinite;
}
@keyframes vmdPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .3;  transform: scale(.65); }
}