@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

.custom-diamond-form-block {
	max-width: 651px;
	color: rgb(24, 5, 5);
	background: rgb(152, 224, 243);
	border: 4px solid rgb(238, 238, 238);
	border-radius: 4px;
	margin: 50px auto;
	padding: 40px;
	font-family: Open Sans;
	font-size: 16px;
	box-sizing: content-box;

	.form-success-message,
	.form-error-message {
		display: none;
		margin-top: 20px;
		padding: 15px;
		border-radius: 4px;
		font-weight: bold;
		text-align: center;
	}

	.form-success-message {
		background-color: #d4edda;
		color: #155724;
		border: 1px solid #c3e6cb;
	}

	.form-error-message {
		background-color: #f8d7da;
		color: #721c24;
		border: 1px solid #f5c6cb;
	}

	.loading-indicator {
		display: none;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		gap: 10px;
		font-weight: bold;
		color: #333;
	}

	.loader {
		display: block !important;
		border: 4px solid rgba(0, 0, 0, 0.1);
		border-left-color: #333;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		animation: loading 1s linear infinite;
	}

	img {
		max-width: 100%;
	}

	hr {
		margin: 50px 0;
		border: none;
		border-top: 1px solid rgba(24, 5, 5, 0.2);
	}

	.form-header {
		margin-bottom: 30px;

		h2 {
			color: rgb(56, 56, 56);
			font-size: 28px;
			font-weight: normal;
			font-style: normal;
			margin: 0;
		}
	}

	.form-group {
		margin-bottom: 15px;
		border-color: rgba(24, 5, 5, 0.2);

		label {
			display: block;
			margin: 8px 0;
			font-weight: bold;
		}

		&.required > label::before {
			content: "*";
			color: #eb8281;
			margin-right: 3px;
		}

		.error-message {
			color: #ff0000;
			font-weight: 500;
			font-size: 14px;
			margin-top: 4px;
			display: none;
		}

		input,
		select,
		textarea {
			width: 100%;
			border: 1px solid #bec6ca;
			padding: 6px 12px;
			background-color: rgb(255, 255, 255);
			color: #333;
			font-size: 16px;
			border-radius: 6px;
			height: 32px;
		}

		input[type="file"] {
			border: none;
		}

		textarea {
			height: 50px;
			resize: vertical;
		}

		input:focus,
		select:focus,
		textarea:focus {
			border: 1px solid rgba(59, 140, 255, 0.7);
			box-shadow: inset 0 0 4px rgba(102, 175, 233, 0.6);
			outline: none;
		}

		.form-radio-images {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;

			label {
				margin: 0;
			}

			input[type="radio"] {
				display: none;
			}

			input[type="radio"] + img {
				max-width: 305px;
				height: auto;
				cursor: pointer;
				padding: 8px;
				border: 1px solid transparent;
				border-radius: 4px;
				transition: border-color 0.3s;
			}

			input[type="radio"] + img:hover {
				border-color: rgba(24, 5, 5, 0.2);
			}

			input[type="radio"]:checked + img {
				border-color: rgb(86, 86, 86);
			}

			@media screen and (max-width: 1200px) {
				input[type="radio"] + img {
					max-width: 150px;
				}
			}
		}

		/* Image upload preview styles */
		.image-preview-container {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;
		}
		.preview-thumb {
			width: 80px;
			height: 80px;
			object-fit: cover;
			border-radius: 8px;
			border: 1px solid #ccc;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
		}
		.preview-item {
			position: relative;
			display: inline-block;
		}
		.remove-image-btn {
			position: absolute;
			top: 4px;
			right: 4px;
			background: rgba(0, 0, 0, 0.6);
			color: #fff;
			border: none;
			border-radius: 50%;
			width: 22px;
			height: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			font-size: 16px;
			z-index: 2;
			transition: background 0.2s;
		}
		.remove-image-btn:hover {
			background: #e74c3c;
		}

		.form-btn {
			background-color: rgb(86, 86, 86);
			color: rgb(255, 255, 255);
			padding: 10px 15px;
			cursor: pointer;
			font-weight: 600;
			font-size: 14px;
		}

		&.submit-group {
			text-align: center;
		}
	}
}

@keyframes loading {
	to {
		transform: rotate(360deg);
	}
}