/*
 * Review widget.
 *
 * A star is not simply on or off — half marks are allowed — so each one is
 * painted across by the share the rating reaches, which the widget writes onto
 * the star as a percentage.
 */
.ekl-review {
    @apply flex flex-col gap-[14px] rounded-[10px] bg-white p-[30px];

    align-items: flex-start;
}

.ekl-review__stars {
    --ekl-star-on: #d97706;
    --ekl-star-off: #e0e0e0;
    --ekl-star-fill: 0%;

    @apply relative inline-flex w-fit items-center text-[18px] leading-none;
}

.ekl-review__row {
    @apply flex items-center gap-[4px] whitespace-nowrap leading-none;

    i,
    svg {
        @apply block;
    }

    svg {
        @apply h-[1em] w-[1em] fill-current;
    }
}

.ekl-review__row--off {
    color: var(--ekl-star-off);
}

/*
 * The lit stars are the same row again, laid over the dim one and cut off at
 * the rating's width — which is what makes half a star, or any other fraction,
 * come out right without the icon having to know about it.
 */
.ekl-review__row--on {
    @apply absolute left-0 top-0 overflow-hidden;

    width: var(--ekl-star-fill);
    color: var(--ekl-star-on);
}

.ekl-review__score {
    @apply ml-[6px] text-[0.8em] font-semibold text-ekl-neutral-700;
}

.ekl-review__title {
    @apply m-0 w-full text-[20px] font-bold leading-[1.3] text-ekl-secondary;
}

.ekl-review__text {
    @apply m-0 w-full text-[16px] leading-[1.7] text-ekl-neutral-700;
}

.ekl-review__date {
    @apply w-full text-[14px] text-ekl-neutral-700;
}

.ekl-review__person {
    @apply flex w-fit items-center gap-[12px];
}

.ekl-review__who {
    @apply text-left;
}

.ekl-review__photo img {
    @apply block h-[56px] w-[56px] rounded-full object-cover;
}

.ekl-review__name {
    @apply text-[16px] font-semibold leading-[1.4] text-ekl-secondary;
}

.ekl-review__role {
    @apply text-[14px] leading-[1.4] text-ekl-neutral-700;
}

/* Alignment modifier classes generated by Elementor prefix_class */
.ekl-review-align-left .ekl-review,
.ekl-review[style*='text-align: left'],
.ekl-review[style*='text-align:left'] {
    align-items: flex-start;

    .ekl-review__person {
        justify-content: flex-start;
    }
}

.ekl-review-align-center .ekl-review,
.ekl-review[style*='text-align: center'],
.ekl-review[style*='text-align:center'] {
    align-items: center;

    .ekl-review__person {
        justify-content: center;
    }
}

.ekl-review-align-right .ekl-review,
.ekl-review[style*='text-align: right'],
.ekl-review[style*='text-align:right'] {
    align-items: flex-end;

    .ekl-review__person {
        justify-content: flex-end;
    }
}

@media (max-width: 1024px) {
    .ekl-review-tablet-align-left .ekl-review {
        align-items: flex-start;

        .ekl-review__person {
            justify-content: flex-start;
        }
    }

    .ekl-review-tablet-align-center .ekl-review {
        align-items: center;

        .ekl-review__person {
            justify-content: center;
        }
    }

    .ekl-review-tablet-align-right .ekl-review {
        align-items: flex-end;

        .ekl-review__person {
            justify-content: flex-end;
        }
    }
}

@media (max-width: 767px) {
    .ekl-review-mobile-align-left .ekl-review {
        align-items: flex-start;

        .ekl-review__person {
            justify-content: flex-start;
        }
    }

    .ekl-review-mobile-align-center .ekl-review {
        align-items: center;

        .ekl-review__person {
            justify-content: center;
        }
    }

    .ekl-review-mobile-align-right .ekl-review {
        align-items: flex-end;

        .ekl-review__person {
            justify-content: flex-end;
        }
    }
}

/* Style presets. The stars take the accent; the dim ones are the surface's own text, faded. */
.ek-review:where([class*="ekl-preset-"]) {
    .ekl-review {
        background: var(--ekl-ps-bg);
        border: var(--ekl-ps-border);
        border-radius: var(--ekl-ps-radius);
        box-shadow: var(--ekl-ps-shadow);
    }

    /* The stars set their own colours, so it is on them, not on the card, that these are set. */
    .ekl-review__stars {
        --ekl-star-on: var(--ekl-ps-accent);
        --ekl-star-off: color-mix(in srgb, var(--ekl-ps-fg) 30%, var(--ekl-ps-bg));
    }

    .ekl-review__title,
    .ekl-review__name {
        color: var(--ekl-ps-fg);
    }

    .ekl-review__text,
    .ekl-review__score,
    .ekl-review__date,
    .ekl-review__role {
        color: var(--ekl-ps-muted);
    }
}