/* ==========================================================================
   Site-wide compatibility styles (loaded on every front-end page)
   --------------------------------------------------------------------------
   These rules are copied VERBATIM from the previous Recipe Filter plugin
   (style.css). The old plugin loaded them on every page, and other parts of
   the site (the Recipe CPT star ratings, home page recipe cards, view counts)
   rely on them. They are intentionally kept OUT of recipe-filter.css so the
   redesigned filter stays fully scoped under .jcrf.
   None of these selectors is used by the filter's own markup (.jcrf-*).
   ========================================================================== */

.recipe-view-count {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    justify-content: center;
}

.recipe-view-count i {
    margin-right: 5px;
    font-size: 16px;
    color: #06311a; /* Stylish eye icon color */
    margin-right: 5px;
    position: relative;
    top: -1px !important; /* Adjust if needed */
}

/* --- Star Rating Styles --- */

.recipe-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #555;
    justify-content: center;
    padding-left: 0 !important;
    
}

.recipe-metata {
    margin-top: -16px !important;
}


.recipe-rating {
    display: flex;
    align-items: center;
    font-size: 18px;
    gap: 5px;
    margin-top: 5px;
}

.recipe-rating .star {
    font-size: 18px;
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: #ddd; /* Default grey */
}

.recipe-rating .star.filled {
    color: #FFD700; /* Gold for fully filled stars */
}

.recipe-rating .star.half {
    position: relative;
}

.recipe-rating .star.half::before {
    content: "★"; /* Full star */
    color: #ddd; /* Grey background */
    position: absolute;
    left: 0;
    z-index: 1;
}

.recipe-rating .star.half::after {
    content: "★"; /* Gold half star */
    position: absolute;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: #FFD700; /* Gold */
    z-index: 2;
}

.recipe-rating .star.empty {
    color: #ddd; /* Grey for empty stars */
}

/* Rating Count (Number of Ratings) */
.recipe-rating .rating-count {
    font-size: 14px;
    color: #555;
    font-weight: 600;
    margin-top: 6px !important;
}

/* mobile Responsive Fix */
@media only screen and (max-width: 990px) { 
    .recipe-rating {
        justify-content: center; /* Ensure center alignment on mobile */
    }
}


/* Verbatim from old style.css (inside its max-width:990px block) */
@media only screen and (max-width: 990px) {
    .recipe-view-count {
        margin-bottom:10px;
    }
}