/* WordPress Star Rating Plugin - Frontend Styles */

/* Star separator styling */
.wsrp-star-separator {
    color: #666;
    margin: 0 8px;
}

/* Injected meta styling */
.wsrp-injected-meta {
    margin: 10px 0;
    padding: 5px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12pt;
}

/* Original post meta wrapper (fallback) */
.wsrp-post-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12pt;
}

.wsrp-author-date {
    margin-right: 20px;
    color: #666;
    font-size: 12pt;
}

.wsrp-star-rating {
    display: inline-flex;
    align-items: center;
}

.wsrp-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.wsrp-star {
    font-size: 12pt;
    line-height: 1;
    display: inline-block;
    transition: all 0.2s ease;
}

.wsrp-star-empty {
    color: #ddd;
}

.wsrp-star-filled {
    color: #0073aa; /* Default blue fallback */
}

/* Blue gradient stars - each star gets progressively brighter */
.wsrp-star-1.wsrp-star-filled {
    color: #003366; /* Very dark blue */
}

.wsrp-star-2.wsrp-star-filled {
    color: #004080; /* Dark blue */
}

.wsrp-star-3.wsrp-star-filled {
    color: #0066cc; /* Medium blue */
}

.wsrp-star-4.wsrp-star-filled {
    color: #0080ff; /* Bright blue */
}

.wsrp-star-5.wsrp-star-filled {
    color: #33aaff; /* Very bright blue */
}

/* Integration with existing meta areas */
.entry-meta .wsrp-stars,
.post-meta .wsrp-stars {
    margin-left: 8px;
}

/* Responsive design */
@media (max-width: 768px) {
    .wsrp-post-meta-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .wsrp-author-date {
        margin-right: 0;
        margin-bottom: 5px;
    }
    
    .wsrp-stars {
        margin-left: 0;
    }
}

/* Hover effects for better user experience */
.wsrp-star:hover {
    transform: scale(1.1);
}

/* Ensure proper alignment in different themes */
.wsrp-post-meta-wrapper *,
.wsrp-injected-meta * {
    box-sizing: border-box;
}

/* Additional styling for better integration */
.wsrp-post-meta-wrapper,
.wsrp-injected-meta {
    font-family: inherit;
    clear: both;
}

/* Ensure stars align properly with existing meta */
.entry-meta .wsrp-stars,
.post-meta .wsrp-stars {
    vertical-align: middle;
}