/* Market loader — the one loading look across the dashboard (2026-10-19, Bharath: "one common loading page across
   all the pages — candles being created, green moving up, red coming down, a progress bar at the bottom, vibrant").

   Two parts, both from this file:
   1. EVERY existing spinner becomes candles, in place. Font Awesome's `fa-spinner fa-spin` / `fa-circle-notch
      fa-spin` and Bootstrap's `spinner-border` are restyled — no template or script changes, and code that swaps an
      icon's classes back and forth keeps working (nothing is replaced in the DOM).
   2. `.ml-page` — the full-screen loader static/js/market_loader.js shows while the next page loads: a candle chart
      forming, a glowing price line, a progress bar. `.ml-block` is the same chart for a panel (MarketLoader.block()).
   Animations are transform / opacity / background-size only, and stop under prefers-reduced-motion. */

:root {
    --ml-up: #22d39a;
    --ml-dn: #ff5470;
    --ml-gold: #ffc531;
    --ml-bg: rgba(7, 10, 16, .86);
    --ml-card: #10141d;
    --ml-grid: rgba(255, 255, 255, .055);
    --ml-ink: #e6e9ef;
    --ml-dim: #9298a2;
}
[data-theme="light"] {
    --ml-up: #0fa776;
    --ml-dn: #e23a57;
    --ml-gold: #d99a00;
    --ml-bg: rgba(244, 246, 250, .88);
    --ml-card: #ffffff;
    --ml-grid: rgba(0, 0, 0, .06);
    --ml-ink: #1d2230;
    --ml-dim: #5c6472;
}

/* ── 1. every spinner → candles ───────────────────────────────────────────────────────────────────────────────── */
.fa-spinner.fa-spin, .fa-circle-notch.fa-spin, .spinner-border-sm {
    display: inline-block;
    width: 1.05em !important;
    height: 1em !important;
    vertical-align: -.15em;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(var(--ml-up), var(--ml-up)) 0 50% / 26% 45% no-repeat,
        linear-gradient(var(--ml-dn), var(--ml-dn)) 50% 50% / 26% 85% no-repeat,
        linear-gradient(var(--ml-up), var(--ml-up)) 100% 50% / 26% 60% no-repeat;
    filter: drop-shadow(0 0 2px rgba(34, 211, 154, .45));
    animation: ml-mini 1.05s ease-in-out infinite !important;
}
.fa-spinner.fa-spin::before, .fa-circle-notch.fa-spin::before { content: "" !important; }
@keyframes ml-mini {
    0%, 100% { background-size: 26% 40%, 26% 90%, 26% 55%; }
    33%      { background-size: 26% 90%, 26% 40%, 26% 70%; }
    66%      { background-size: 26% 60%, 26% 65%, 26% 100%; }
}

/* the bigger stand-alone spinner: a five-candle chart */
.spinner-border:not(.spinner-border-sm) {
    width: 2.6rem !important;
    height: 2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    vertical-align: middle;
    background:
        linear-gradient(var(--ml-up), var(--ml-up)) 0 60% / 13% 40% no-repeat,
        linear-gradient(var(--ml-dn), var(--ml-dn)) 25% 50% / 13% 70% no-repeat,
        linear-gradient(var(--ml-up), var(--ml-up)) 50% 45% / 13% 55% no-repeat,
        linear-gradient(var(--ml-up), var(--ml-up)) 75% 35% / 13% 80% no-repeat,
        linear-gradient(var(--ml-dn), var(--ml-dn)) 100% 40% / 13% 50% no-repeat;
    filter: drop-shadow(0 0 4px rgba(34, 211, 154, .4));
    animation: ml-five 1.4s ease-in-out infinite !important;
}
@keyframes ml-five {
    0%, 100% { background-size: 13% 40%, 13% 70%, 13% 55%, 13% 80%, 13% 50%; }
    25%      { background-size: 13% 75%, 13% 35%, 13% 85%, 13% 50%, 13% 70%; }
    50%      { background-size: 13% 55%, 13% 85%, 13% 40%, 13% 95%, 13% 35%; }
    75%      { background-size: 13% 85%, 13% 50%, 13% 70%, 13% 60%, 13% 90%; }
}

/* ── 2. the chart: full screen (.ml-page) or in a panel (.ml-block) ───────────────────────────────────────────── */
.ml-page {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center;
    background: var(--ml-bg);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.ml-page.on { opacity: 1; pointer-events: all; }

.ml-card {
    width: min(360px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    border-radius: 18px;
    background: var(--ml-card);
    border: 1px solid var(--ln, #525868);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 211, 154, .06), 0 0 60px rgba(34, 211, 154, .08);
    text-align: center;
}
.ml-block { padding: 26px 12px; display: grid; justify-items: center; gap: 0;
            width: 100%; max-width: 340px; margin: 0 auto; box-sizing: border-box; }   /* full width even in a centring flex box */
.ml-block .ml-card { box-shadow: none; background: transparent; border: 0; padding: 0; width: min(300px, 100%); }

.ml-chart {
    position: relative; height: 130px; margin-bottom: 14px;
    background:
        linear-gradient(var(--ml-grid) 1px, transparent 1px) 0 0 / 100% 26px,
        linear-gradient(90deg, var(--ml-grid) 1px, transparent 1px) 0 0 / 26px 100%;
    border-radius: 10px; overflow: hidden;
}
.ml-block .ml-chart { height: 96px; }

/* the candles: each a fixed box (wick + body); the body forms by scaling, staggered left → right */
.ml-candles {
    position: absolute; inset: 10px 12px 12px; display: flex; align-items: stretch; justify-content: space-between;
}
.ml-c { position: relative; width: 7%; }
.ml-c i { position: absolute; left: 50%; transform-origin: 50% 100%; border-radius: 2px; }
.ml-c .w { width: 2px; margin-left: -1px; top: var(--wt); bottom: var(--wb); opacity: .9; }
.ml-c .b { width: 100%; left: 0; top: var(--bt); bottom: var(--bb);
           animation: ml-form 2.4s cubic-bezier(.3, .7, .3, 1) infinite; animation-delay: var(--d); }
.ml-c.up i   { background: var(--ml-up); box-shadow: 0 0 10px rgba(34, 211, 154, .55); }
.ml-c.dn i   { background: var(--ml-dn); box-shadow: 0 0 10px rgba(255, 84, 112, .5); }
.ml-c.dn .b  { transform-origin: 50% 0; }
.ml-c .w     { animation: ml-wick 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes ml-form {
    0%   { transform: scaleY(.04); opacity: .2; }
    35%  { transform: scaleY(1.08); opacity: 1; }
    45%  { transform: scaleY(1); }
    85%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(.04); opacity: .2; }
}
@keyframes ml-wick { 0% { opacity: 0; } 30% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; } }

/* the price line drawing itself across */
.ml-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ml-line path {
    fill: none; stroke: var(--ml-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 420; stroke-dashoffset: 420;
    filter: drop-shadow(0 0 4px rgba(255, 197, 49, .8));
    animation: ml-draw 2.4s ease-in-out infinite;
}
@keyframes ml-draw { 0% { stroke-dashoffset: 420; } 70%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.ml-title { color: var(--ml-ink); font-weight: 700; font-size: .98rem; letter-spacing: .2px; }
.ml-sub   { color: var(--ml-dim); font-size: .78rem; margin-top: 3px; min-height: 1.2em; transition: opacity .3s; }

/* the progress bar: fills toward the end while it waits, a shimmer runs along it */
.ml-bar {
    position: relative; height: 6px; margin-top: 14px; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .07);
}
[data-theme="light"] .ml-bar { background: rgba(0, 0, 0, .07); }
.ml-bar > span {
    position: absolute; inset: 0 auto 0 0; width: 0%; overflow: hidden;   /* the shine stays on the filled part */
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ml-dn), var(--ml-gold) 45%, var(--ml-up));
    box-shadow: 0 0 12px rgba(34, 211, 154, .55);
    transition: width .35s ease-out;
}
.ml-bar > span::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-100%);
    animation: ml-shine 1.2s linear infinite;
}
.ml-bar.indet > span { width: 38% !important; animation: ml-slide 1.3s ease-in-out infinite; }
@keyframes ml-shine { to { transform: translateX(100%); } }
@keyframes ml-slide { 0% { left: -40%; } 100% { left: 100%; } }
.ml-pct { color: var(--ml-dim); font-size: .7rem; margin-top: 6px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .fa-spinner.fa-spin, .fa-circle-notch.fa-spin, .spinner-border, .ml-c .b, .ml-c .w, .ml-line path,
    .ml-bar > span::after, .ml-bar.indet > span { animation: none !important; }
    .ml-c .b, .ml-c .w { transform: none; opacity: 1; }
    .ml-line path { stroke-dashoffset: 0; }
}