/* General Container and Card Styles */
/* Wrapper for background images */
.timers {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Background images styling */
.timers-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30vw; /* Adjust width as needed */
    max-width: 400px; /* Prevents too large images */
    height: auto;
    z-index: -1;
    opacity: 0.8;
}

/* Left background */
.timers-bg-left {
    left: 0;
}

/* Right background (Flipped) */
.timers-bg-right {
    right: 0;
    transform: translateY(-50%) scaleX(-1); /* ✅ Flips the image */
}

/* Adjustments for mobile */
@media (max-width: 1024px) {
    .timers-bg {
        width: 25vw;
    }
}

@media (max-width: 768px) {
    .timers-bg {
        display: none; /* Hide images on small screens */
    }
}

.timers-container {
    display: flex;
    flex-direction: column;
    padding: 15px; /* Reduced padding */
    width: 100%;
    max-width: 1000px; /* Reduced max-width for a more compact layout */
    margin: 0 auto;
}

.timers-card {
    background: #1f1f1f;
    padding: 15px; /* Reduced padding */
    border-radius: 12px; /* Slightly smaller radius */
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
    width: 100%;
    margin-bottom: 20px; /* Reduced margin between cards */
    transition: transform 0.3s ease-in-out;
}

.timers-title {
    font-size: 20px; /* Reduced font size */
    font-weight: 600;
    margin-bottom: 10px; /* Reduced margin */
    text-align: center;
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap between icon and text */
}

/* Specific Section Title Colors */
.timers-boss-title {
    color: #ff006e;
}

.timers-invasion-title {
    color: #007bff;
}

.timers-event-title {
    color: #ffc107;
}

/* List and List Item Styling */
.timers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timers-list.four-column {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal-width columns */
    gap: 10px; /* Reduced gap between items */
}

.timers-list-item {
    background: #2c2c2c;
    border-radius: 8px; /* Smaller radius */
    padding: 8px; /* Reduced padding */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
    flex-direction: column;
    gap: 8px; /* Reduced gap between items */
}

.timers-list-item:hover {
    background: #353535;
}

.timers-link {
    color: #ffa500;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px; /* Reduced font size */
    text-align: center;
}

/* Timer Status Badges */
.timers-status {
    font-size: 14px; /* Reduced font size */
    font-weight: 600;
}

.badge-countdown {
    padding: 4px 10px; /* Smaller padding */
    border-radius: 10px;
    background-color: #444;
    color: #fff;
}

.event-schedule-open,
.event-schedule-inprogress {
    padding: 4px 8px; /* Reduced padding */
    border-radius: 10px;
    color: #fff;
}

.event-schedule-open {
    background-color: #28a745;
}

.event-schedule-inprogress {
    background-color: #4eae60;
}

/* Icon Styling */
.timers-title i {
    font-size: 1.2em; /* Reduced icon size */
}

/* Add Glow for Active Events */
.timers-status.glow {
    box-shadow: 0 0 6px #ff0;
    animation: glow 1.5s infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 4px #ff0;
    }
    to {
        box-shadow: 0 0 10px #ff0;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .timers-list.four-column {
        grid-template-columns: repeat(2, 1fr); /* Reduce to two columns on medium screens */
    }
}

@media (max-width: 768px) {
    .timers-list.four-column {
        grid-template-columns: 1fr; /* Stack items in one column on smaller screens */
    }
}