/* Component: Listing Card
   Scope these rules to avoid leaks into other cards/pages if needed.
*/

/* Watch star active color */
.watch-btn.is-active i,
.watched {
    color: #FFD700 !important;
}

/* Typography */
.listing-title-link,
.listing-subtitle,
.meta-label,
.meta-value,
.btn-more,
.listing-row--actions .time-left {
    font-family: 'Inter', sans-serif;
}

.listing-title-link {
    font-weight: 600;
    font-size: 18px;
    color: #111;
    text-decoration: none;
}

/* Watch button */
.watch-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Card hover effect */
.listing-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

    .listing-card:hover {
        transform: scale(1.03);
        box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
    }

/* Meta row layout */
.listing-row--meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.meta-left {
    display: flex;
    gap: 16px;
}

.meta-right {
    margin-left: auto;
    text-align: right;
}

.meta-block .meta-label {
    display: block;
    font-size: 12px;
    color: #666;
    line-height: 1.2;
}

.meta-block .meta-value {
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

/* Actions row layout */
.listing-row--actions {
    display: flex;
    align-items: center; /* vertical center */
    justify-content: space-between; /* left vs right sides */
    gap: 10px;
}

    .listing-row--actions .time-left {
        margin: 0;
        font-size: 0.9rem; /* ~13–14px */
        line-height: 1.2;
    }

/* Status dot (replaces inline color styles) */
.status-dot {
    padding-left: .25rem; /* keep spacing next to amount */
}

.status--winning {
    color: #17c671;
}
/* green */
.status--reserve {
    color: #ffb400;
}
/* amber */
.status--outbid {
    color: #c4183c;
}
/* red */