/* SEO-007: shared 5-star rating component.
   Isolated, self-contained stylesheet - does not modify any existing legacy CSS.
   No third-party branding; purely generic star glyphs via CSS. */

/* NOTE: legacy styleNEW.css contains generic, non-namespaced rules such as
   ".productsList04 span span { width:33.33%/50%/100%; display:inline-block }"
   (at various breakpoints) that match our nested <span> structure purely by
   element type/depth, with specificity equal to or higher than some of our
   own selectors. The !important flags below are a deliberate, narrowly
   scoped defence against that legacy collision - they only affect layout
   properties (display/width/height/float) on our own star-rating classes,
   nothing else on the page. */
.star-rating {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    line-height: 1;
    width: auto !important;
    float: none !important;
}

.star-rating__stars {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    width: auto !important;
    float: none !important;
}

.star-rating .star {
    position: relative;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 14px;
    line-height: 1;
    float: none !important;
}

/* Base glyph: an empty (outline) star, drawn with a text character for crisp
   scaling at any size/DPI without extra image requests. */
.star-rating .star::before {
    content: "\2605"; /* filled star glyph, used as the shape for all states */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.star-rating .star--empty::before {
    color: #d8d8d8;
}

.star-rating .star--full::before {
    color: #f7d600;
}

.star-rating .star--half::before {
    color: #d8d8d8;
}

.star-rating .star--half::after {
    content: "\2605";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    color: #f7d600;
}

.star-rating__count {
    font-size: 12px;
    color: #767676;
    white-space: nowrap;
}

/* Compact modern layout for product tiles (Best Sellers / Top Sellers) */
.productWrap .star-rating,
.item .star-rating {
    margin-top: 4px;
    margin-bottom: 2px;
}

/* Customer review cards - slightly larger stars for readability */
.review .star-rating .star {
    width: 16px !important;
    height: 16px !important;
    font-size: 16px;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .star-rating {
        gap: 4px;
    }

    .star-rating .star {
        width: 12px !important;
        height: 12px !important;
        font-size: 12px;
    }

    .review .star-rating .star {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px;
    }

    .star-rating__count {
        font-size: 11px;
    }
}

/* SEO-008: compact Audi-only contextual rating summary card, replacing the
   legacy scrolling sidebar "Reviews" widget on the Audi manufacturer page.
   Design adapted from the approved audi-rating-design-reference.html
   prototype - navy/white card, big numeric score, precise-fill SVG stars,
   divider and chevron link - but driven entirely by real rating data
   (ClsProperty.StarRatingHelper.RenderPreciseStars) rather than hardcoded
   example values. Deliberately uses its own class names (never
   .widget/.reviewWidget) so it is completely unaffected by legacy rules
   such as ".reviewWidget{height:680px;overflow-y:scroll;background:#f3f3f3}"
   and ".widget h2{background:#ffd500;...}" in /includes/css/styleNEW.css -
   no existing widget styling anywhere else on the site is touched. The card
   sits inside the shared ".widget" sidebar container, so the title selector
   includes that ancestor class to win specificity over ".widget h2" without
   relying solely on !important. */
.widget .audi-rating-card {
    --audi-navy: #12375c;
    --audi-gold: #f7d600;
    --audi-border: #e0e5eb;
    --audi-muted: #64748b;
    background: #fff;
    border: 1px solid var(--audi-border);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 10px;
    height: auto;
    max-height: none;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(18, 55, 92, .045);
    font-family: Arial, Helvetica, sans-serif;
}

.widget .audi-rating-card__title {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 17px;
    font-weight: 700;
    color: var(--audi-navy);
    background: none;
    border-radius: 0;
    padding: 0;
    text-transform: none;
}

.audi-rating-card__main {
    display: flex;
    gap: 16px;
    align-items: center;
}

.audi-rating-card__number {
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: var(--audi-navy);
}

.audi-rating-card__number small {
    font-size: 17px;
    font-weight: 500;
    color: var(--audi-muted);
    letter-spacing: 0;
}

.audi-rating-card__detail {
    min-width: 0;
}

.audi-rating-card__stars {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    white-space: nowrap;
}

.audi-rating-card__star {
    width: 20px;
    height: 20px;
    display: block;
    flex: none;
}

.audi-rating-card__star-bg {
    fill: #dce1e7;
}

.audi-rating-card__star-fg {
    fill: var(--audi-gold);
}

.audi-rating-card__count {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--audi-muted);
}

.audi-rating-card__divider {
    height: 1px;
    background: #e9edf1;
    margin: 20px 0 15px;
}

.audi-rating-card__link {
    color: var(--audi-navy);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audi-rating-card__link:hover {
    text-decoration: underline;
}

.audi-rating-card__link svg {
    width: 17px;
    height: 17px;
    flex: none;
}

@media (max-width: 480px) {
    .widget .audi-rating-card {
        padding: 16px;
    }

    .audi-rating-card__main {
        gap: 10px;
    }

    .audi-rating-card__number {
        font-size: 32px;
    }

    .audi-rating-card__star {
        width: 17px;
        height: 17px;
    }
}