/**
 * Trustpilot Rating Widget Styles
 * Used on Thank You pages (V3 and V4)
 *
 * Font sizes can be overridden per template by redefining CSS variables:
 * --tp-widget-heading-size-mobile
 * --tp-widget-heading-lh-mobile
 * --tp-widget-heading-size-desktop
 * --tp-widget-heading-lh-desktop
 */

:root {
    /* Timing */
    --tp-widget-fill-time: 200ms;
    /* Colors */
    --tp-widget-star-color: #FFCB13;
    --tp-widget-heading-color: #333;
    /* Typography - Mobile (default) */
    --tp-widget-heading-size-mobile: 20px;
    --tp-widget-heading-lh-mobile: 24px;
    /* Typography - Desktop (default matches V4) */
    --tp-widget-heading-size-desktop: 24px;
    --tp-widget-heading-lh-desktop: 32px;
}

.thankyou-template-single-thankyou_page-v3 {
    --tp-widget-heading-size-mobile: 20px;
    --tp-widget-heading-lh-mobile: 24px;
    --tp-widget-heading-size-desktop: 18px;
    --tp-widget-heading-lh-desktop: 24px;
}

.thankyou-template-single-thankyou_page-v4 {
    --tp-widget-heading-size-mobile: 20px;
    --tp-widget-heading-lh-mobile: 24px;
    --tp-widget-heading-size-desktop: 24px;
    --tp-widget-heading-lh-desktop: 32px;
}

.tp-rating-widget {
    margin-top: 24px;
}

@media screen and (min-width: 768px) {
    .tp-rating-widget {
        margin-top: 40px;
    }
}

.tp-rating-widget__heading {
    font-size: var(--tp-widget-heading-size-mobile);
    line-height: var(--tp-widget-heading-lh-mobile);
    margin-bottom: 16px;
    font-family: 'Roboto', sans-serif;
    color: var(--tp-widget-heading-color);
    text-align: center;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .tp-rating-widget__heading {
        font-size: var(--tp-widget-heading-size-desktop);
        line-height: var(--tp-widget-heading-lh-desktop);
    }
}

.tp-rating-widget__stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.tp-rating-widget__star {
    cursor: pointer;
    transition: transform var(--tp-widget-fill-time) ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.tp-rating-widget__star:hover {
    transform: scale(1.1);
}

.tp-rating-widget__star svg {
    display: block;
    transition: filter var(--tp-widget-fill-time) ease;
}

.tp-rating-widget__star svg path {
    fill: transparent;
    transition: fill var(--tp-widget-fill-time) ease;
}

.tp-rating-widget__star.filled svg path {
    fill: var(--tp-widget-star-color);
}