/* Custom CSS overrides for auction cards */

/* 
 * HIGHLIGHT FIX: Simple fade highlight for bid amounts
 * 
 * This animation was modified to:
 * 1. Use a simple fade from light yellow to transparent (no pulsing)
 * 2. Use very light colors with transparency to be subtle
 * 3. Use the 'forwards' fill mode to maintain the final state
 * 4. Not include any properties that could cause text shifting
 */
@keyframes simpleFade {
    0% { background-color: rgba(255, 255, 224, 0.5); }  /* Light yellow */
    100% { background-color: transparent; }             /* Fade to nothing */
}

/* 
 * HIGHLIGHT FIX: Apply highlight without changing layout
 * 
 * This class was simplified to:
 * 1. Only include the animation property
 * 2. Remove all padding, positioning, and other layout-affecting properties
 * 3. Use 'forwards' fill mode so manual removal isn't needed
 */
.highlight-pulse {
    animation: simpleFade 2s ease-out forwards;
    /* No other styles that could affect layout */
}

/* Ensure outbid elements always have red text - with highest priority */
.outbid, 
.current-bid.outbid, 
.lot-price.outbid, 
*[data-outbid="true"],
*[data-outbid="true"] span:not(.badge),
.outbid span:not(.badge) {
    color: #dc3545 !important;
    transition: color 0s !important; /* Remove any transition delay */
}

/* Ensure winning elements always have green text */
.winning, 
.current-bid.winning, 
.lot-price.winning, 
*[data-winning="true"] {
    color: #28a745 !important;
}

/* Make auction cards bigger */
.auction-card {
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* Clickable card hover effect */
.auction-card.clickable-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    user-select: none; /* Prevent text selection when clicking */
}

.auction-card.clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Allow text selection for specific elements within the card */
.auction-card.clickable-card .auction-title,
.auction-card.clickable-card .lot-number {
    user-select: text;
}

/* Adjust auction info to fill the card */
.auction-info {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 15px;
}

/* Fix for lot number, title and description height to ensure consistent horizontal line position */
.auction-info .lot-number {
    min-height: 20px; /* Set a fixed minimum height for lot number */
    margin-bottom: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: #666;
}

.auction-info h3.auction-title {
    min-height: 24px; /* Set a fixed minimum height for title */
    margin-bottom: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.auction-info p {
    min-height: 40px; /* Set a fixed minimum height for description */
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

/* Ensure horizontal line is positioned consistently */
.auction-info hr.my-2 {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

/* Style for bid info section */
.bid-info {
    margin-top: 0;
    font-weight: bold;
}

.bid-count {
    font-size: 14px;
}

/* Position the bid button at the bottom with 5px spacing */
.auction-meta {
    margin-top: auto;
    text-align: center;
    padding-top: 15px;
    margin-bottom: 5px;
}

/* Set auction images to 100x100px */
.auction-image {
    height: 100px !important;
    width: 100px !important;
    object-fit: cover;
    position: relative !important;
    margin: 0 auto;
    display: block;
}

/* Refresh indicator error state styling */
#refresh-indicator.error {
    background-color: #dc3545 !important;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.9) !important;
}