/*
 * Elementor renders our field inside a wrapper with class
 * "elementor-field-type-eramai-rating elementor-field-group".
 * Some themes/Elementor defaults apply a flex-row layout to certain
 * field-group types, which pushes the label beside the field instead
 * of above it. We force block/column layout here so the label always
 * sits on its own line above the stars, matching every other field.
 */
.elementor-field-group.elementor-field-type-eramai-rating {
	display: block !important;
}

.elementor-field-group.elementor-field-type-eramai-rating > .elementor-field-label {
	display: block !important;
	width: 100%;
	margin-bottom: 8px;
}

.eramai-rating-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 8px 0;
}

.eramai-rating-stars {
	display: flex;
	gap: 4px;
}

.eramai-star-block {
	width: 50px;
	height: 50px;
	background-color: #e2e2ea;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	outline: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.eramai-star-block:hover,
.eramai-star-block:focus-visible {
	transform: scale(1.04);
}

.eramai-star-block:focus-visible {
	box-shadow: 0 0 0 2px #00b67a;
}

.eramai-star-icon {
	width: 26px;
	height: 26px;
	fill: #ffffff;
	pointer-events: none;
}

.eramai-rating-label {
	font-size: 15px;
	font-weight: 600;
	color: #333333;
	min-height: 20px;
}

@media (max-width: 480px) {
	.eramai-star-block {
		width: 38px;
		height: 38px;
	}

	.eramai-star-icon {
		width: 20px;
		height: 20px;
	}
}