
.ce-feedback-form {
	text-align: center;
	font-family: Arial, sans-serif;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

/* Headings */
.ce-step-1 h3, .ce-step-2 h4 {
	color: #333;
	margin-bottom: 15px;
	font-weight: bold;
}

/* Star container */
.ce-stars {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 20px 0;
	direction: rtl;
}

/* Star styles */
.ce-star {
	font-size: 2.5rem;
	color: #ccc;
	cursor: pointer;
	transition: color .3s ease, transform .2s ease;
	user-select: none;
	-webkit-user-select: none;
}

/* Hover and selected states */
.ce-star:hover, .ce-star:hover ~ .ce-star, .ce-star.selected, .ce-star.selected ~ .ce-star, .ce-star.hovered, .ce-star.hovered ~ .ce-star {
	color: #fc0;
	transform: scale(1.1);
}

/* Step containers */
.ce-step {
	margin-top: 20px;
}

.ce-step-2 {
	display: none;
}

/* Form fields */
.ce-step-2 .form-field {
	margin-bottom: 20px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	width: 100%;
}

/* Labels */
.ce-step-2 .form-field label {
	display: block;
	margin-bottom: 8px;
	color: #333;
	font-weight: 500;
}

/* Inputs and textarea */
.ce-step-2 .form-field input, .ce-step-2 .form-field textarea {
	width: 100%;
	padding: 12px;
	font-size: 1rem;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	background-color: #fff;
	transition: border-color .3s ease, box-shadow .3s ease;
}

/* Focus states */
.ce-step-2 .form-field input:focus, .ce-step-2 .form-field textarea:focus {
	outline: none;
	border-color: #fc0;
	box-shadow: 0 0 4px rgba(255, 204, 0, .5);
}

/* Error states */
.ce-step-2 .form-field input.error, .ce-step-2 .form-field textarea.error {
	border-color: #f44;
	background-color: #fff8f8;
}

/* Placeholder styling */
.ce-step-2 .form-field input::placeholder, .ce-step-2 .form-field textarea::placeholder {
	color: #999;
	opacity: 1;
}

/* Submit button */
.ce-step-2 button[type="submit"] {
	padding: 12px 24px;
	background-color: #fc0;
	color: #333;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 500;
	transition: background-color .3s ease, transform .2s ease;
	width: auto;
	min-width: 120px;
}

/* Button states */
.ce-step-2 button[type="submit"]:hover {
	background-color: #e6b800;
	transform: scale(1.02);
}

.ce-step-2 button[type="submit"]:disabled {
	background-color: #ccc;
	cursor: not-allowed;
	transform: none;
	opacity: .7;
}

/* Loader */
.loader {
	margin-top: 15px;
	font-size: 1rem;
	color: #333;
	display: inline-block;
}

/* Textarea specific */
.ce-step-2 .form-field textarea {
	min-height: 100px;
	resize: vertical;
}

/* Responsive design */
@media screen and (max-width: 480px) {
	.ce-feedback-form {
		padding: 15px;
		margin: 10px;
	}
	
	.ce-star {
		font-size: 2rem;
	}
	
	.ce-step-2 .form-field {
		max-width: 100%;
		margin-bottom: 15px;
	}
	
	.ce-step-2 button[type="submit"] {
		width: 100%;
		padding: 14px 20px;
	}
	
	.ce-step-1 h3, .ce-step-2 h4 {
		font-size: 1.2rem;
	}
}

/* Print styles */
@media print {
	.ce-feedback-form {
		max-width: 100%;
	}
	
	.ce-star {
		color: #000;
	}
	
	.ce-step-2 button[type="submit"] {
		display: none;
	}
}
