/* =========================================================================================================================== */
/*                                            🧩 MARKETS – MARKET – CAP – COMMODITIES                                          */
/*                                            📍 static/css/pages/markets/market_cap/commodities.css                           */
/* =========================================================================================================================== */



/* Toggle */
.chart-toggle {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.chart-toggle button {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,215,0,0.35);
    color: #ffd700;
    padding: 0.5rem 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.chart-toggle button.active {
    background: rgba(255,215,0,0.15);
    color: #fff;
}


/* Bar Chart – Container */
.bar-chart-horizontal {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 75rem;
    margin: 0 auto;
}


/* Bar Chart – Row */
.bar-row {
    display: grid;
    grid-template-columns: 14rem 1fr 7rem;
    align-items: center;
    gap: 1rem;
}


/* Bar Chart – Label */
.bar-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700;
}


/* Bar Chart – Track */
.bar-track {
    background: rgba(255,255,255,0.08);
    height: 1.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
}


/* Bar Chart – Fill */
.bar-fill {
    height: 100%;
    border-radius: 0.75rem;
    transition: width 0.4s ease;
}


/* Bar Chart – BTC Highlight */
.bar-fill.bar-btc {
    box-shadow: 0 0 0.6rem rgba(196,118,29,0.7);
}


/* Bar Chart – Value */
.bar-value {
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}