/* ==========================================================================
   Live Metals (Minimal) – Badge edition with persistent direction + circular countdown
   - Compact single-line bar (~25px)
   - Symbol as colored badge
   - Direction arrow AFTER price (centered)
   - Circular countdown every 15s (number + donut progress)
   ========================================================================== */

/* ---- Theme variables (light) -------------------------------------------- */
:root {
  --etlm-fg:        #0f172a;  /* primary text */
  --etlm-muted:     #475569;  /* secondary text */
  --etlm-num:       #111827;  /* default numbers color */
  --etlm-up:        #16a34a;  /* up (green) */
  --etlm-down:      #dc2626;  /* down (red) */

  /* badge defaults (overridden per metal) */
  --badge-bg:       #e5e7eb;
  --badge-fg:       #0f172a;
  --badge-border:   rgba(2, 6, 23, 0.08);

  /* countdown */
  --cd-track:       rgba(2,6,23,0.10);
  --cd-fill:        rgba(2,6,23,0.55);
  --cd-size:        25px;     /* donut size */
  --cd-thick:       3px;      /* donut thickness */
}

/* Auto dark */
@media (prefers-color-scheme: dark) {
  :root {
    --etlm-fg:      #e5e7eb;
    --etlm-muted:   #9aa4b2;
    --etlm-num:     #ffffff;

    --badge-bg:     #1f2937;
    --badge-fg:     #e5e7eb;
    --badge-border: rgba(255,255,255,0.08);

    --cd-track:     rgba(255,255,255,0.15);
    --cd-fill:      rgba(255,255,255,0.75);
  }
}

/* Force dark via class if needed */
.et-live-metals.is-dark {
  --etlm-fg:      #e5e7eb;
  --etlm-muted:   #9aa4b2;
  --etlm-num:     #ffffff;

  --badge-bg:     #1f2937;
  --badge-fg:     #e5e7eb;
  --badge-border: rgba(255,255,255,0.08);

  --cd-track:     rgba(255,255,255,0.15);
  --cd-fill:      rgba(255,255,255,0.75);
}

/* ---- Root container ------------------------------------------------------ */
.et-live-metals {
  display: block;
  max-height: 25px;
  overflow: hidden;
  font: 500 13px/25px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--etlm-fg);
}

/* Row */
.etlm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
  white-space: nowrap;
}

/* Item */
.etlm-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--etlm-fg);
}

/* Hide legacy icon element if present */
.etlm-icon { display: none !important; }

/* ---- Badge (symbol) ------------------------------------------------------ */
.etlm-name {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 9999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
}

/* Per-metal colors */
.etlm-item[data-metal="XAU"] { --badge-bg:#f3d085; --badge-fg:#111827; --badge-border:rgba(161,98,7,0.25); }
.etlm-item[data-metal="XAG"] { --badge-bg:#e7e9ee; --badge-fg:#0f172a; --badge-border:rgba(15,23,42,0.12); }
.etlm-item[data-metal="XPT"] { --badge-bg:#d9e7ff; --badge-fg:#0b1730; --badge-border:rgba(11,23,48,0.18); }
.etlm-item[data-metal="XPD"] { --badge-bg:#e8e1ff; --badge-fg:#241a5a; --badge-border:rgba(36,26,90,0.18); }

/* ---- Value area ---------------------------------------------------------- */
.etlm-value {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--etlm-num);
}
.etlm-curr { opacity: 0.85; }

/* Number transitions */
.etlm-num {
  transition: opacity .25s ease, color .25s ease, transform .25s ease;
}

/* Make each item a positioning context */
.etlm-item { position: relative; }

/* Indicator ABOVE the badge, drawn with CSS only */
.etlm-item::before{
  content: "";
  position: absolute;
  left: 100%;
  top: 0;           /* distance above the badge */
  width: 0; height: 0;  /* default (triangle bases) */
  pointer-events: none;
  opacity: 0;           /* will pop-in on state change */
}


/* Pop-in animation when state changes */
@keyframes etlm-dir-pop {
  0%   { transform: translateX(-50%) scale(0.7); opacity: 0; }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}
.etlm-item.etlm-up::before,
.etlm-item.etlm-down::before,
.etlm-item.etlm-flat::before { animation: etlm-dir-pop .25s ease-out; }

/* UP (▲) — triangle up via borders */
.etlm-item.etlm-up::before{
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid var(--etlm-up);
  opacity: 1;
}

/* DOWN (▼) — triangle down via borders */
.etlm-item.etlm-down::before{
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--etlm-down);
  top: 1px; /* tiny visual tweak */
  opacity: 1;
}

/* FLAT (•) — small gray dot */
.etlm-item.etlm-flat::before{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--etlm-muted);
  top: 1px;
  opacity: 1;
}

/* Direction arrow AFTER price; centered box */
.etlm-dir {
  display: none !important;
  position: absolute;
  top: 1px;
  left: 100%;
  font-size: 10px;
  line-height: 1;
  color: var(--etlm-muted);
  pointer-events: none;
}

/* Timestamp (right side) */
.etlm-updated {
  display: none !important;
  margin-left: auto;
  font-size: 11px;
  color: var(--etlm-muted);
}

/* ---- Persistent state styling ------------------------------------------- */
.etlm-item.etlm-up   .etlm-num { color: var(--etlm-up); }
.etlm-item.etlm-down .etlm-num { color: var(--etlm-down); }
.etlm-item.etlm-flat .etlm-dir { color: var(--etlm-muted); } 
.etlm-item.etlm-flat .etlm-num { color: var(--etlm-num); opacity: 0.95; }

.etlm-item.etlm-up   .etlm-dir { color: var(--etlm-up); }
.etlm-item.etlm-down .etlm-dir { color: var(--etlm-down); }

/* Optional one-shot pulse on change */
@keyframes etlm-pulse-up   { 0%{ transform:translateY(-1px) } 100%{ transform:translateY(0) } }
@keyframes etlm-pulse-down { 0%{ transform:translateY( 1px) } 100%{ transform:translateY(0) } }
.etlm-item.etlm-up   .etlm-num { animation: etlm-pulse-up .45s ease; }
.etlm-item.etlm-down .etlm-num { animation: etlm-pulse-down .45s ease; }

/* Fade helper during swap */
.etlm-num.etlm-fade { opacity: 0.25; }

/* ---- Circular countdown -------------------------------------------------- */
.etlm-countdown {
  position: relative;
  display: inline-block;
  width: var(--cd-size);
  height: var(--cd-size);
  margin-left: 5px;
  vertical-align: middle;
}

/* Donut ring using conic-gradient + mask to carve the hole */
.etlm-cd-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--cd-fill) 0 var(--cd-deg, 0deg),
    var(--cd-track) var(--cd-deg, 0deg) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--cd-thick)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--cd-thick)), #000 0);
}

/* Seconds label in the center */
.etlm-cd-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  color: var(--etlm-muted);
  user-select: none;
}

/* ---- Responsive tweaks --------------------------------------------------- */
@media (max-width: 480px) {
  .etlm-row     { gap: 8px; }
  .etlm-item    { gap: 6px; }
  .etlm-updated { display: none; }
  :root { --cd-size: 16px; --cd-thick: 3px; }
}

/* Direction arrow after the number */
.etlm-dir {
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--etlm-muted);
  display: none !important;
}

.etlm-item.etlm-up   .etlm-dir { color: var(--etlm-up); }
.etlm-item.etlm-down .etlm-dir { color: var(--etlm-down); }
.etlm-item.etlm-flat .etlm-dir { color: var(--etlm-muted); }

/* Countdown donut with seconds in the center */
.etlm-countdown {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  display: inline-block;
  display: none !important;
}
.etlm-cd-ring {
  --cd-deg: 360deg;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(var(--etlm-muted) var(--cd-deg), transparent 0);
}
.etlm-cd-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;            /* center cutout for light theme */
  opacity: .9;
}
.et-live-metals.is-dark .etlm-cd-ring::after {
  background: #0b1220;         /* center cutout for dark theme */
}
.etlm-cd-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--etlm-muted);
  pointer-events: none;
}

.et-live-metals.etlm-theme-dark .etlm-item:not(.etlm-up) .etlm-value,
.et-live-metals.etlm-theme-dark .etlm-item:not(.etlm-up) .etlm-value {
  color: #fff !important;
}