/**
 * Recommendation Reason Labels
 * Styles for "why this?" recommendation badges
 */

/* Base reason badge styles */
.wp-omeda-recommendation-reason {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.wp-omeda-recommendation-reason:hover {
    background-color: rgba(0, 0, 0, 0.85);
    transform: translateY(-1px);
}

/* Reason badge positioned on thumbnails */
.wp-omeda-recommended-thumbnail {
    position: relative;
}

.wp-omeda-recommended-thumbnail .wp-omeda-recommendation-reason {
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Reason badge when no thumbnail */
.wp-omeda-recommended-content > .wp-omeda-recommendation-reason {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 8px;
}

/* Swiper card reasons */
.recommended-post-card .wp-omeda-recommendation-reason {
    position: absolute;
    top: 10px;
    left: 10px;
}

.card-img-top-wrapper {
    position: relative;
}

/* Specific reason type colors */
.reason-related {
    background-color: rgba(37, 99, 235, 0.9); /* Blue */
}

.reason-interests {
    background-color: rgba(168, 85, 247, 0.9); /* Purple */
}

.reason-behavior {
    background-color: rgba(16, 185, 129, 0.9); /* Green */
}

.reason-combined,
.reason-personalized {
    background-color: rgba(245, 158, 11, 0.9); /* Amber */
}

.reason-session {
    background-color: rgba(99, 102, 241, 0.9); /* Indigo */
}

.reason-trending {
    background-color: rgba(239, 68, 68, 0.9); /* Red */
}

.reason-new {
    background-color: rgba(6, 182, 212, 0.9); /* Cyan */
}

.reason-default {
    background-color: rgba(107, 114, 128, 0.9); /* Gray */
}

/* Hover effects for specific types */
.reason-related:hover {
    background-color: rgba(37, 99, 235, 1);
}

.reason-interests:hover {
    background-color: rgba(168, 85, 247, 1);
}

.reason-behavior:hover {
    background-color: rgba(16, 185, 129, 1);
}

.reason-combined:hover,
.reason-personalized:hover {
    background-color: rgba(245, 158, 11, 1);
}

.reason-session:hover {
    background-color: rgba(99, 102, 241, 1);
}

.reason-trending:hover {
    background-color: rgba(239, 68, 68, 1);
}

.reason-new:hover {
    background-color: rgba(6, 182, 212, 1);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .wp-omeda-recommendation-reason {
        font-size: 10px;
        padding: 3px 8px;
    }
}

/* Animation for new recommendations */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-omeda-recommendation-reason {
    animation: fadeInSlide 0.3s ease-out;
}

/* Ensure labels don't interfere with images */
.wp-omeda-recommended-thumbnail a {
    display: block;
}

/* Grid template adjustments */
.wp-omeda-template-grid .wp-omeda-recommended-item {
    position: relative;
}

.wp-omeda-template-grid .wp-omeda-recommendation-reason {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* List template adjustments */
.wp-omeda-template-list .wp-omeda-recommendation-reason {
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    margin-bottom: 4px;
}

/* Compact template adjustments */
.wp-omeda-template-compact .wp-omeda-recommendation-reason {
    font-size: 9px;
    padding: 2px 6px;
}

/* Swiper-specific styles */
.recommended-posts-swiper .wp-omeda-recommendation-reason {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
}

.recommended-posts-swiper .card-img-top-wrapper {
    overflow: hidden;
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .wp-omeda-recommendation-reason {
        background-color: rgba(255, 255, 255, 0.15);
        color: #ffffff;
    }
    
    .wp-omeda-recommendation-reason:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
}

/* Accessibility improvements */
.wp-omeda-recommendation-reason:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Print styles - hide recommendation reasons in print */
@media print {
    .wp-omeda-recommendation-reason {
        display: none;
    }
}