/**
 * Episode Status Display Styles
 * Custom CSS implementation to replace Tailwind CDN for production
 * Matches the exact design provided
 */

/* Ongoing series - Orange background */
.episode-status.ongoing {
    background-color: #f97316; /* bg-orange-500 */
}

/* Completed series - Green background */
.episode-status.completed {
    background-color: #059669; /* bg-green-600 */
}

/* Custom spinner for ongoing series */
.episode-status-spinner {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
    border: 1px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Font Awesome icon sizing */
.episode-status .fa-circle-check {
    font-size: 0.75rem; /* text-xs */
}

/* Text content - ensure full text is visible */
.episode-status span {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    width: auto;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .episode-status {
        font-size: 0.6875rem; /* Slightly smaller on mobile */
        padding: 0.1875rem 0.375rem; /* Tighter padding */
        gap: 0.1875rem; /* Smaller gap */
    }

    .episode-status-spinner {
        width: 0.625rem;
        height: 0.625rem;
    }

    .episode-status .fa-circle-check {
        font-size: 0.625rem;
    }
}

/* Dark theme compatibility */
.dark .episode-status {
    /* Colors remain the same as they're already designed for dark backgrounds */
}

/* More contrast mode support */
@media (prefers-contrast: more) {
    .episode-status.ongoing {
        background-color: #ea580c; /* Darker orange for better contrast */
    }

    .episode-status.completed {
        background-color: #047857; /* Darker green for better contrast */
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .episode-status-spinner {
        animation: none;
    }

    /* Show a static indicator instead */
    .episode-status-spinner::after {
        content: "●";
        color: white;
        font-size: 0.5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}