/**
 * Countdown Timer Styles
 */

/* Main container */
.countdown-timer {
    margin: 0;
    padding: 8px 5px 25px 5px; /* Extra padding at the top and bottom */
    font-size: 0.9rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* Higher z-index to ensure it's on top */
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    border-radius: 8px 8px 0 0; /* Rounded corners only at top, matching card border-radius */
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    height: 45px; /* Slightly increased height for the countdown timer */
}

/* Table mini-countdown override */
.mini-countdown.countdown-timer {
    position: static;
    background-color: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    height: auto;
    border-radius: 0;
    font-size: 0.85rem;
}

/* Timer items */
.syotimer__body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px; /* Reduced margin-top */
    background-color: rgba(0, 0, 0, 0.8); /* Match the countdown timer background */
    padding: 2px 5px;
    border-radius: 3px;
    width: 100%; /* Make it full width to match the countdown timer */
    max-width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* Mini-countdown timer items */
.mini-countdown .syotimer__body {
    position: static;
    background-color: transparent;
    padding: 0;
    margin: 0;
    justify-content: center;
}

/* Individual timer units */
.syotimer-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    flex: 1;
    min-width: 40px;
}

/* Timer values */
.syotimer-cell__value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff; /* Default white color for more than 1 day */
    line-height: 1.2; /* Increased line height */
    background-color: #000000; /* Black background */
    border-radius: 3px;
    padding: 6px 6px 4px 6px; /* More padding at the top */
    min-width: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.5s ease-in-out;
}

/* Timer unit labels */
.syotimer-cell__unit {
    font-size: 0.7rem;
    color: #cccccc; /* Light gray for better visibility on black background */
    text-transform: lowercase;
    margin-top: 2px;
    display: inline-block;
    width: 100%;
}

/* Mini-countdown timer cells */
.mini-countdown .syotimer-cell {
    margin: 0 2px;
    min-width: 20px;
}

/* Mini-countdown timer values */
.mini-countdown .syotimer-cell__value {
    font-size: 0.9rem;
    color: #333;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    transition: all 0.3s ease-in-out;
}

/* Add animation to mini-countdown timer values */
.mini-countdown .syotimer-cell__value {
    animation: fadeInOut 3s infinite alternate;
}

@keyframes fadeInOut {
    0% {
        opacity: 0.85;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Mini-countdown timer unit labels */
.mini-countdown .syotimer-cell__unit {
    font-size: 0.6rem;
    color: #666;
    margin-top: 0;
}

/* Lot detail page timer */
.lot-sidebar .countdown-timer {
    margin: 10px 0 0 0; /* Reduced top margin, removed bottom margin */
    text-align: center;
    position: relative; /* Override absolute positioning for sidebar */
    background-color: transparent; /* No background in sidebar */
    box-shadow: none; /* No shadow in sidebar */
    height: auto; /* Reset height for sidebar */
    padding-top: 15px; /* Add padding at the top to move it down */
}

.lot-sidebar .syotimer__body {
    justify-content: center;
    position: relative; /* Change from absolute to relative */
    margin-top: 5px; /* Add some space after the "Time Left" label */
}

.lot-sidebar .syotimer-cell {
    margin: 0 5px; /* Reduced horizontal margins */
    min-width: 40px; /* Smaller min-width */
}

.lot-sidebar .syotimer-cell__value {
    font-size: 1.2rem; /* Smaller font size */
    padding: 4px; /* Reduced padding */
}

.lot-sidebar .syotimer-cell__unit {
    font-size: 0.7rem; /* Smaller font size for units */
}

/* Timer for ending soon lots - now handled by JavaScript */
.auction-card .badge-danger + .countdown-timer .syotimer-cell__value {
    /* Color now set dynamically by JavaScript */
}

/* Timer for upcoming lots */
.scheduled-auction .countdown-timer {
    /* Ensure consistent positioning */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    border-radius: 8px 8px 0 0;
}
.scheduled-auction .countdown-timer .syotimer-cell__value {
    color: #0dcaf0; /* Keep blue for scheduled auctions */
}

/* Soft close warning effect */
.soft-close-warning .syotimer-cell__value {
    animation: pulse 1s infinite alternate;
    color: #dc3545 !important; /* Force red color for soft close warning */
}

/* Mini soft close warning effect */
.mini-soft-close-warning .syotimer-cell__value {
    animation: minipulse 0.8s infinite alternate;
    color: #dc3545 !important; /* Force red color for soft close warning */
}

/* Flash warning effect for 10 seconds or less */
.countdown-timer.flash-warning {
    animation: flashCountdown 0.5s infinite alternate !important;
}

.countdown-timer.flash-warning .syotimer__body {
    animation: flashCountdownBody 0.5s infinite alternate !important;
}

.countdown-timer.flash-warning .syotimer-cell__value {
    animation: flashCountdownValues 0.5s infinite alternate !important;
}

/* Mini flash warning effect for 10 seconds or less */
.countdown-timer.mini-flash-warning .syotimer-cell__value {
    animation: flashCountdownMini 0.5s infinite alternate !important;
}

/* FIXED: 2024-07-02 - Add flashing border for lots ending in 5 seconds */
.auction-card.ending-soon {
    animation: flashingBorder 0.5s infinite alternate;
    border: 2px solid #dc3545 !important;
}

@keyframes flashingBorder {
    0% {
        border-color: #dc3545;
        box-shadow: 0 0 5px #dc3545;
    }
    100% {
        border-color: #ff0000;
        box-shadow: 0 0 15px #ff0000;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes minipulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Flash animation for countdown timer container (alternates background) */
@keyframes flashCountdown {
    0% {
        background-color: rgba(0, 0, 0, 0.8); /* Original black background */
    }
    100% {
        background-color: rgba(255, 255, 255, 0.9); /* White background */
    }
}

/* Flash animation for countdown timer body (alternates background) */
@keyframes flashCountdownBody {
    0% {
        background-color: rgba(0, 0, 0, 0.8); /* Black background */
    }
    100% {
        background-color: rgba(255, 255, 255, 0.9); /* White background */
    }
}

/* Flash animation for countdown timer values (alternates text colors) */
@keyframes flashCountdownValues {
    0% {
        background-color: #000000; /* Black background */
        color: #ffffff; /* White text */
    }
    100% {
        background-color: #ffffff; /* White background to match container */
        color: #000000; /* Black text for visibility on white */
    }
}

/* Flash animation for mini countdown timer */
@keyframes flashCountdownMini {
    0% {
        background-color: transparent;
        color: #dc3545;
    }
    100% {
        background-color: #dc3545;
        color: #ffffff;
    }
}

/* Fix for auction image positioning */
.auction-image {
    margin-top: 5px !important; /* Add a small top margin */
    margin-bottom: 10px !important; /* Add bottom margin */
}

/* Countdown finished message */
.countdown-finished {
    font-size: 1.2em;
}

/* Test class for manual verification */
.test-flash {
    animation: flashCountdown 0.5s infinite alternate !important;
}

.test-flash .syotimer-cell__value {
    animation: flashCountdownValues 0.5s infinite alternate !important;
}