/**
 * 0-100 Rating Meter CSS
 * UX-optimized meter system to replace star ratings
 * Focus on conversion optimization and trust building
 */

/* Main Rating Meter Container */
.rating-meter-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.75rem;
    background: linear-gradient(135deg, #21262d, #161b22);
    border: 1px solid #30363d;
    border-radius: 8px;
    position: relative;
}

/* Score Display */
.rating-score-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rating-score-number {
    font-size: 1.8rem;
    font-weight: 800;
    color: #e6edf3;
    line-height: 1;
}

.rating-score-label {
    font-size: 0.9rem;
    color: #8b949e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Meter Bar */
.rating-meter-bar {
    width: 100%;
    height: 12px;
    /* Green-to-red gradient background track: green (good) on left, red (bad) on right */
    background: linear-gradient(90deg, 
        #27ae60 0%,     /* Thumbs up green (left = good scores) */
        #f39c12 30%,    /* Yellow-orange transition */
        #e67e22 60%,    /* Orange transition */
        #e74c3c 100%    /* Thumbs down red (right = poor scores) */
    );
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Add subtle overlay to mute the background track */
.rating-meter-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;
    z-index: 1;
}

.rating-meter-fill {
    height: 100%;
    border-radius: 6px;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2; /* Ensure fill appears above background track overlay */
    /* Dynamic fill color based on score position in green-to-red spectrum */
    background: var(--meter-fill-color);
    box-shadow: 
        0 0 8px rgba(var(--meter-glow-rgb), 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.rating-meter-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
    border-radius: 6px 6px 0 0;
}

/* Color Coding System - Aligned with thumbs up/down colors */
/* Green-to-Red Spectrum: Higher scores = greener, Lower scores = redder */

/* Excellent: 80-100 - Bright green (matches thumbs up active) */
.rating-meter-fill.excellent {
    --meter-fill-color: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%);
    --meter-glow-rgb: 46, 204, 113;
}

/* Good: 60-79 - Green-yellow transition */
.rating-meter-fill.good {
    --meter-fill-color: linear-gradient(90deg, #f1c40f 0%, #f39c12 100%);
    --meter-glow-rgb: 241, 196, 15;
}

/* Average: 40-59 - Yellow-orange (neutral) */
.rating-meter-fill.average {
    --meter-fill-color: linear-gradient(90deg, #f39c12 0%, #e67e22 100%);
    --meter-glow-rgb: 243, 156, 18;
}

/* Poor: 20-39 - Orange-red transition */
.rating-meter-fill.poor {
    --meter-fill-color: linear-gradient(90deg, #e67e22 0%, #e74c3c 100%);
    --meter-glow-rgb: 230, 126, 34;
}

/* Very Poor: 0-19 - Red (matches thumbs down) */
.rating-meter-fill.very-poor {
    --meter-fill-color: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
    --meter-glow-rgb: 231, 76, 60;
}

/* Trust Signals */
.rating-trust-signals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #8b949e;
}

.vote-count-display {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.vote-count-display i {
    color: #d4af37;
    font-size: 0.8rem;
}

.rating-confidence {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
}

.confidence-high {
    color: #2ecc71; /* Match thumbs up green */
}

.confidence-medium {
    color: #f39c12; /* Orange (neutral) */
}

.confidence-low {
    color: #8b949e;
}

/* Conversion Optimization Elements */
.rating-cta-hint {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #d4af37;
    color: #0d1117;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
}

.rating-meter-container:hover .rating-cta-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Score Categories for UX */
.score-category {
    position: absolute;
    top: -2px;
    left: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    z-index: 1;
}

.score-category.excellent {
    background: #2ecc71; /* Match thumbs up green */
    color: white;
}

.score-category.good {
    background: #f1c40f; /* Bright yellow-green */
    color: #0d1117;
}

.score-category.average {
    background: #f39c12; /* Orange (neutral) */
    color: white;
}

.score-category.poor {
    background: #e67e22; /* Orange-red */
    color: white;
}

.score-category.very-poor {
    background: #e74c3c; /* Match thumbs down red */
    color: white;
}

/* Interactive Enhancements */
.rating-meter-container:hover {
    border-color: #d4af37;
    background: linear-gradient(135deg, #25292f, #1a1e26);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}

.rating-meter-container:hover .rating-meter-fill {
    box-shadow: 
        0 0 12px rgba(var(--meter-glow-rgb), 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .rating-meter-container {
        margin: 0.75rem 0;
        padding: 0.6rem;
    }
    
    .rating-score-number {
        font-size: 1.5rem;
    }
    
    .rating-meter-bar {
        height: 10px;
    }
    
    .rating-trust-signals {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .rating-score-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .rating-score-number {
        font-size: 1.4rem;
    }
    
    .rating-meter-bar {
        height: 8px;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .rating-meter-fill,
    .rating-cta-hint,
    .rating-meter-container {
        transition: none;
    }
}

@media (prefers-contrast: high) {
    .rating-meter-container {
        border: 2px solid #fff;
        background: #000;
    }
    
    .rating-meter-bar {
        /* High contrast: simplified green-to-red gradient */
        background: linear-gradient(90deg, #00ff00 0%, #ffff00 50%, #ff0000 100%);
        border: 1px solid #fff;
    }
    
    .rating-meter-bar::before {
        background: rgba(0, 0, 0, 0.5); /* Less overlay for better visibility */
    }
    
    .score-category {
        border: 1px solid #fff;
    }
}

/* Loading Animation */
.rating-meter-fill.loading {
    background: linear-gradient(90deg, 
        #30363d 0%, 
        #21262d 50%, 
        #30363d 100%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    /* Override color variables during loading */
    --meter-fill-color: linear-gradient(90deg, #30363d 0%, #21262d 50%, #30363d 100%);
    --meter-glow-rgb: 48, 54, 61;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Hover Effects for Conversion */
.rating-meter-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(212, 175, 55, 0.05));
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rating-meter-container:hover::before {
    opacity: 1;
}

/* Fallback Rating Display (when JavaScript fails to load) */
.rating-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #21262d, #161b22);
    border: 1px solid #30363d;
    border-radius: 8px;
    margin: 1rem 0;
    color: #e6edf3;
    text-align: center;
}

.rating-fallback strong {
    font-size: 1.5rem;
    color: #d4af37;
    margin-right: 0.5rem;
}

.rating-fallback small {
    color: #8b949e;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced rating display for casino cards */
.casino-rating-meter {
    margin: 0.75rem 0;
}

/* Ensure meter doesn't break layout in existing cards */
.casino-card .rating-meter-container,
.casino-card-enhanced .rating-meter-container {
    margin: 0.5rem 0;
}

/* Progressive enhancement - hide fallback when JS loads */
.js-loaded .rating-fallback {
    display: none;
}