/* Fix consistency between top gainers and top losers styling */

/* Remove any background overlays that might cause opacity differences */
.gainers .performer-item::before,
.losers .performer-item::before {
    background: transparent !important;
    opacity: 1 !important;
}

/* Ensure both sections have identical opacity */
.gainers .performer-item,
.losers .performer-item {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.2s ease !important;
}

/* Ensure hover states are identical */
.gainers .performer-item:hover,
.losers .performer-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Ensure all text elements have full opacity */
.gainers .performer-item *,
.losers .performer-item * {
    opacity: 1 !important;
}

/* UPDATED: Use original vertical card layout from top-performers.js */
.gainers .performer-item,
.losers .performer-item {
    display: flex !important;
    flex-direction: column !important; /* Back to original column layout */
    padding: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Style the main section (symbol + price) */
.gainers .performer-main,
.losers .performer-main {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
}

/* Style the details section (volume) */
.gainers .performer-details,
.losers .performer-details {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    width: 100% !important;
}

/* Ensure price change badges have consistent styling - Updated selectors */
.gainers .performer-change.positive,
.losers .performer-change.negative {
    color: #ffffff !important;
    padding: 2px 6px !important; /* Match original styling */
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
}

.gainers .performer-change.positive {
    background-color: rgba(0, 200, 83, 0.15) !important; /* Match original green */
    color: var(--success-color, #00c853) !important;
}

.losers .performer-change.negative {
    background-color: rgba(255, 53, 71, 0.15) !important; /* Match original red */
    color: var(--danger-color, #ff3547) !important;
}