/* ==========================================================================
   Global Market Prices — Fear & Greed Index widget
   Themes: auto | dark | light | glass  (same system as ticker + converter)
   ========================================================================== */

/* ── CSS custom properties ───────────────────────────────────────────────── */
:root {
  --daaz-fng-bg:          #ffffff;
  --daaz-fng-bg-section:  #f8fafc;
  --daaz-fng-text:        #1e293b;
  --daaz-fng-text-muted:  #64748b;
  --daaz-fng-border:      #e2e8f0;
  --daaz-fng-radius:      12px;
  --daaz-fng-radius-sm:   8px;
  --daaz-fng-shadow:      0 2px 16px rgba(0,0,0,.07);
}

/* ── Base widget card ────────────────────────────────────────────────────── */
.daaz-gmp-fng {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--daaz-fng-bg);
  border:         1px solid var(--daaz-fng-border);
  border-radius:  var(--daaz-fng-radius);
  box-shadow:     var(--daaz-fng-shadow);
  padding:        24px 20px 18px;
  max-width:      420px;
  width:          100%;
  box-sizing:     border-box;
  font-family:    inherit;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.daaz-gmp-fng-title {
  font-size:      1rem;
  font-weight:    700;
  color:          var(--daaz-fng-text);
  margin-bottom:  14px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--daaz-fng-border);
}

/* ── Gauge wrap + SVG ────────────────────────────────────────────────────── */
.daaz-gmp-fng-gauge-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding-bottom: 4px;
}

.daaz-gmp-fng-svg {
  width:     100%;
  max-width: 340px;
  height:    auto;
  display:   block;
  /* Entrance animation */
  animation: daaz-fng-fade-in .45s ease forwards;
  overflow:  visible;
}

@keyframes daaz-fng-fade-in {
  from { opacity: 0; transform: scale(.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── SVG arc elements ─────────────────────────────────────────────────────── */

/* Background (uncoloured) arc */
.daaz-gmp-fng-arc-bg { stroke: #dde1e7; }

/* Dim overlay — colour must match widget background to "hide" unreached zones */
.daaz-gmp-fng--light .daaz-gmp-fng-dim,
.daaz-gmp-fng--auto  .daaz-gmp-fng-dim  { stroke: rgba(255,255,255,.74); }

.daaz-gmp-fng--dark .daaz-gmp-fng-dim   { stroke: rgba(15,23,42,.74); }
.daaz-gmp-fng--glass .daaz-gmp-fng-dim  { stroke: rgba(0,0,0,.42); }

@media (prefers-color-scheme: dark) {
  .daaz-gmp-fng--auto .daaz-gmp-fng-dim { stroke: rgba(15,23,42,.74); }
}
[data-gmp-theme="dark"] .daaz-gmp-fng--auto .daaz-gmp-fng-dim,
.gmp-dark               .daaz-gmp-fng--auto .daaz-gmp-fng-dim {
  stroke: rgba(15,23,42,.74);
}

/* Zone divider lines — widget-bg colour creates a natural gap between segments */
.daaz-gmp-fng--light .daaz-gmp-fng-divider,
.daaz-gmp-fng--auto  .daaz-gmp-fng-divider  { stroke: #ffffff; }

.daaz-gmp-fng--dark  .daaz-gmp-fng-divider  { stroke: #0f172a; }
.daaz-gmp-fng--glass .daaz-gmp-fng-divider  { stroke: rgba(255,255,255,.35); }

@media (prefers-color-scheme: dark) {
  .daaz-gmp-fng--auto .daaz-gmp-fng-divider { stroke: #0f172a; }
}
[data-gmp-theme="dark"] .daaz-gmp-fng--auto .daaz-gmp-fng-divider,
.gmp-dark               .daaz-gmp-fng--auto .daaz-gmp-fng-divider {
  stroke: #0f172a;
}

/* Needle — swing-in animation (sweeps from left to actual position) */
.daaz-gmp-fng-needle,
.daaz-gmp-fng-needle-shadow {
  transform-box:    view-box;
  transform-origin: 50% 86.5%; /* (100/200=50%, 115/133≈86.5%) — pivot point */
  animation:        daaz-fng-needle-swing .9s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.daaz-gmp-fng-needle-shadow {
  animation-delay: 0s;
}

@keyframes daaz-fng-needle-swing {
  0%   { transform: rotate(-85deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: rotate(0deg); }
}

/* Edge labels (Fear / Greed) */
.daaz-gmp-fng-edge-lbl {
  font-size:   7.5px;
  fill:        #94a3b8;
  font-family: inherit;
}

/* Large value number */
.daaz-gmp-fng-num {
  font-family: inherit;
}

/* ── Classification label ─────────────────────────────────────────────────── */
.daaz-gmp-fng-classification {
  font-size:   1.25rem;
  font-weight: 800;
  letter-spacing: .02em;
  margin-top:  -4px;
}

/* ── History bar chart ───────────────────────────────────────────────────── */
.daaz-gmp-fng-history {
  margin-top:    16px;
  padding-top:   14px;
  border-top:    1px solid var(--daaz-fng-border);
}

.daaz-gmp-fng-history-label {
  font-size:      .7rem;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--daaz-fng-text-muted);
  margin-bottom:  10px;
}

.daaz-gmp-fng-bars {
  display:     flex;
  align-items: flex-end;
  gap:         4px;
}

.daaz-gmp-fng-bar-wrap {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  cursor:         default;
}

/* Fixed-height column — bar fill grows from the bottom */
.daaz-gmp-fng-bar-col {
  width:           100%;
  height:          68px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  background:      var(--daaz-fng-bg-section);
  border-radius:   4px 4px 2px 2px;
  overflow:        hidden;
}

.daaz-gmp-fng-bar-fill {
  width:         100%;
  border-radius: 3px 3px 0 0;
  min-height:    4px;
  transition:    height .3s ease;
}

.daaz-gmp-fng-bar-val {
  font-size:   .7rem;
  font-weight: 700;
  line-height: 1;
}

.daaz-gmp-fng-bar-date {
  font-size:  .6rem;
  color:      var(--daaz-fng-text-muted);
  line-height: 1;
  text-align: center;
}

/* Today bar — slightly wider + ring to highlight */
.daaz-gmp-fng-bar-today .daaz-gmp-fng-bar-col {
  outline:        2px solid currentColor;
  outline-offset: 1px;
  border-radius:  4px 4px 2px 2px;
}

.daaz-gmp-fng-bar-today .daaz-gmp-fng-bar-date {
  color:      var(--daaz-fng-text);
  font-weight: 600;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.daaz-gmp-fng-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         4px;
  margin-top:  14px;
  padding-top: 10px;
  border-top:  1px solid var(--daaz-fng-border);
  font-size:   .72rem;
  color:       var(--daaz-fng-text-muted);
}

.daaz-gmp-fng-next {
  font-weight: 500;
  color:       var(--daaz-fng-text-muted);
  opacity:     .8;
}

.daaz-gmp-fng-error {
  color:     #ef4444;
  font-size: .9rem;
  margin:    0;
}

/* ── Theme: Dark ─────────────────────────────────────────────────────────── */
.daaz-gmp-fng--dark,
[data-gmp-theme="dark"] .daaz-gmp-fng--auto,
.gmp-dark               .daaz-gmp-fng--auto {
  --daaz-fng-bg:          #0f172a;
  --daaz-fng-bg-section:  #1e293b;
  --daaz-fng-text:        #f1f5f9;
  --daaz-fng-text-muted:  #94a3b8;
  --daaz-fng-border:      #334155;
  --daaz-fng-shadow:      0 2px 20px rgba(0,0,0,.4);
}

.daaz-gmp-fng--dark  .daaz-gmp-fng-arc-bg,
[data-gmp-theme="dark"] .daaz-gmp-fng--auto .daaz-gmp-fng-arc-bg,
.gmp-dark               .daaz-gmp-fng--auto .daaz-gmp-fng-arc-bg {
  stroke: #1e293b;
}

@media (prefers-color-scheme: dark) {
  .daaz-gmp-fng--auto {
    --daaz-fng-bg:          #0f172a;
    --daaz-fng-bg-section:  #1e293b;
    --daaz-fng-text:        #f1f5f9;
    --daaz-fng-text-muted:  #94a3b8;
    --daaz-fng-border:      #334155;
    --daaz-fng-shadow:      0 2px 20px rgba(0,0,0,.4);
  }

  .daaz-gmp-fng--auto .daaz-gmp-fng-arc-bg {
    stroke: #1e293b;
  }
}

/* ── Theme: Light (explicit) ─────────────────────────────────────────────── */
.daaz-gmp-fng--light {
  --daaz-fng-bg:          #ffffff;
  --daaz-fng-bg-section:  #f1f5f9;
  --daaz-fng-text:        #1e293b;
  --daaz-fng-text-muted:  #64748b;
  --daaz-fng-border:      #cbd5e1;
  --daaz-fng-shadow:      0 2px 12px rgba(0,0,0,.06);
}

/* ── Theme: Glass ────────────────────────────────────────────────────────── */
.daaz-gmp-fng--glass {
  background:              rgba(255,255,255,.12);
  backdrop-filter:         blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border:                  1px solid rgba(255,255,255,.25);
  --daaz-fng-bg:           transparent;
  --daaz-fng-bg-section:   rgba(255,255,255,.08);
  --daaz-fng-text:         #ffffff;
  --daaz-fng-text-muted:   rgba(255,255,255,.65);
  --daaz-fng-border:       rgba(255,255,255,.2);
  --daaz-fng-shadow:       0 4px 30px rgba(0,0,0,.2);
}

.daaz-gmp-fng--glass .daaz-gmp-fng-arc-bg { stroke: rgba(255,255,255,.15); }

/* ── Compact mode ────────────────────────────────────────────────────────── */
.daaz-gmp-fng--compact {
  padding: 14px 14px 12px;
}

.daaz-gmp-fng--compact .daaz-gmp-fng-classification {
  font-size: 1rem;
}

.daaz-gmp-fng--compact .daaz-gmp-fng-history { margin-top: 10px; }
.daaz-gmp-fng--compact .daaz-gmp-fng-bar-col { height: 50px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .daaz-gmp-fng {
    padding: 16px 14px 14px;
  }

  .daaz-gmp-fng-classification {
    font-size: 1.1rem;
  }

  .daaz-gmp-fng-bar-col  { height: 54px; }
  .daaz-gmp-fng-bar-val  { font-size: .65rem; }
  .daaz-gmp-fng-bar-date { font-size: .55rem; }
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .daaz-gmp-fng-svg,
  .daaz-gmp-fng-needle,
  .daaz-gmp-fng-needle-shadow,
  .daaz-gmp-fng-bar-fill {
    transition: none;
    animation:  none;
  }
}