.sre-star-rating-ui {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    min-width: 0;
    background: var(--sre-rating-background, transparent);
    padding: var(--sre-padding-v, 0) var(--sre-padding-h, 0);
    border: var(--sre-border-width, 0) solid var(--sre-border-color, #dddddd);
    border-radius: var(--sre-border-radius, 0);
    text-align: var(--sre-align, left);
}

.sre-star-rating-label {
    margin: 0 0 .45em;
    color: var(--sre-label-color, #333333);
    font-family: var(--sre-label-font-family, inherit);
    font-weight: var(--sre-label-font-weight, inherit);
    font-style: var(--sre-label-font-style, normal);
    font-size: var(--sre-label-font-size, 16px);
    text-transform: var(--sre-label-text-transform, none);
    text-decoration: var(--sre-label-text-decoration, none);
    line-height: var(--sre-label-line-height, 1.35);
    letter-spacing: var(--sre-label-letter-spacing, normal);
    word-spacing: var(--sre-label-word-spacing, normal);
}

.sre-star-rating-stars {
    display: inline-flex;
    gap: var(--sre-star-gap, 6px);
    align-items: center;
}

.elementor-form .sre-star-button,
.sre-star-button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--sre-star-empty-color, #c7c7c7);
    font: inherit;
    font-size: var(--sre-star-size, 36px);
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.sre-star-button.is-active {
    color: var(--sre-star-color, #f5a623);
}

.sre-star-button.is-hovered {
    color: var(--sre-star-hover-color, #f5a623);
}

.sre-star-button:hover {
    transform: scale(1.08);
}

.sre-star-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

.sre-star-rating-ui.has-error {
    outline: 1px solid #d63638;
    outline-offset: 2px;
}

.sre-rating-error {
    margin-top: .55em;
    color: #d63638;
    font-size: .9em;
}


/* Keep the rating looking like stars, even when the site's global button style is aggressive. */
.elementor-form .sre-star-button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    text-decoration: none !important;
}


/* The star UI lives inside Elementor's own hidden-field group. This keeps exactly
   the same column gutter/left edge as the other form fields. */
.elementor-form .elementor-field-group.sre-rating-field-group {
    display: block !important;
}

.elementor-form .sre-star-rating-ui {
    margin: 0;
    width: 100%;
}

.elementor-form .sre-star-rating-stars {
    position: relative;
    z-index: 2;
}

.elementor-form .sre-star-button {
    position: relative;
    z-index: 2;
    pointer-events: auto !important;
    color: var(--sre-star-empty-color, #c7c7c7) !important;
}

.elementor-form .sre-star-button.is-active {
    color: var(--sre-star-color, #f5a623) !important;
}

.elementor-form .sre-star-button.is-hovered {
    color: var(--sre-star-hover-color, #f5a623) !important;
}