/* assets/css/stock-hover.css */

/* Extracted and adapted from provided style for WP enqueue. */

:root {
    --bg: #ffffff;
    --muted: #64748b;
    --accent: #16a34a;
    --danger: #dc2626;
    --warn: #ca8a04;
    --glass: rgba(0,0,0,0.03);
}

.asset-link {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    background: transparent;
    border: 1px dashed rgba(0,0,0,0.08);
}

.asset-link:hover {
    background: rgba(0,0,0,0.03);
}

.card-a {
    min-width: 320px;
    max-width: 360px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    position: absolute;
    z-index: 1000;
    display: none; /* Hidden by default, shown via JS */
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-weight: 700;
    font-size: 20px;
}

.price.up {
    color: var(--accent);
}

.price.down {
    color: var(--danger);
}

.meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

.mini {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--glass);
    font-size: 13px;
}

.flow-score {
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flow-score .val {
    font-weight: 700;
}

.bars {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bar {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}

.bar .buy {
    background: var(--accent);
    height: 100%;
}

.bar .sell {
    background: var(--danger);
    height: 100%;
    position: absolute;
    right: 0;
}

.bars-label {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    width: 100%;
}

.power {
    margin-top: 10px;
}

.power .ratio-bar {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    background: #e2e8f0;
    overflow: hidden;
}

.power .ratio-bar .buyers {
    height: 100%;
    background: var(--accent);
}

.power .ratio-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.spinner {
    width: 28px;
    height: 6px;
    background: linear-gradient(90deg, #e2e8f0, #f8fafc);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.spinner::after {
    content: '';
    position: absolute;
    left: -40%;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, #cbd5e1, #f1f5f9);
    animation: shimmer 0.9s linear infinite;
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .card-a {
        min-width: 280px;
        max-width: 100%;
    }
}