.frw-widget,
.frw-widget * {
	-webkit-tap-highlight-color: transparent !important;
	-webkit-touch-callout: none !important;
}

.frw-widget {
	direction: rtl;
	text-align: center;
	font-family: inherit;
}

.frw-items {
	/* Force natural left-to-right visual order regardless of the page's RTL
	   text direction, so the first option in the list (e.g. "hate") sits on
	   the visual left and the last one (e.g. "love") sits on the visual right. */
	direction: ltr;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 14px;
	margin-bottom: 28px;
}

.frw-item {
	box-sizing: border-box !important;
	direction: rtl;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 74px;
	min-height: 132px;
	padding: 10px 10px 10px;
	border-radius: 35px 35px 20px 20px;
	border: 1px solid transparent;
	background-color: transparent;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	outline: none !important;
	box-shadow: none;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.frw-item,
.frw-item:hover,
.frw-item:focus,
.frw-item:focus-visible,
.frw-item:active {
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.frw-item.is-selected {
	background-color: #F7F2F7;
	border-color: #E3D0E3;
	box-shadow: 0 4px 10px rgba(88, 50, 87, 0.08);
}

.frw-circle {
	box-sizing: border-box !important;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
	transition: transform .15s ease;
	pointer-events: none;
	flex-shrink: 0;
}

.frw-item:hover .frw-circle {
	transform: scale(1.05);
}

.frw-circle i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 1;
	color: #ffffff;
	pointer-events: none;
}

.frw-label {
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	color: #583257;
	line-height: 19px;
	pointer-events: none;
}

.frw-percent {
	white-space: nowrap;
	font-size: 10px;
	color: #817082;
	line-height: 15px;
	pointer-events: none;
	margin-top: 2px;
}

.frw-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.frw-submit {
	display: inline-block;
	background: #F7EEF7;
	color: #844E83;
	border: 1px solid #D197D0;
	border-radius: 20px;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.05);
	font-size: 14px;
	line-height: 22px;
	padding: 12px 30px;
	cursor: pointer;
	touch-action: manipulation;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	transition: opacity .15s ease, transform .1s ease;
}

.frw-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.frw-submit:not(:disabled):hover {
	transform: translateY(-1px);
}

.frw-message {
	font-size: 13px;
}

.frw-message--done {
	color: #583257;
	font-weight: 600;
}

.frw-message--empty {
	color: #b33c3c;
}

@media (max-width: 480px) {
	.frw-item {
		min-width: 60px;
		padding: 8px 6px 8px;
	}
	.frw-label {
		font-size: 11px;
	}
	.frw-circle {
		width: 52px;
		height: 52px;
	}
	.frw-circle i {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}
}