.survey-modal {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	z-index: 9999;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 100%;
	block-size: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}

.survey-modal .survey-modal-content {
	background-color: var(--wp--preset--color--white);
	inline-size: 45%;
	max-block-size: 80vh;
	overflow-y: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	font-family: var(--font-family--primary);
	padding: 20px 20px 0 20px;
}

.survey-modal .survey-modal-content .survey-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.survey-modal .survey-modal-content .survey-modal-header .survey-modal-title {
	font-size: 22px;
	color: var(--wp--preset--color--black);
	margin-block-end: 0;
	font-family: var(--font-family--heading);
	font-weight: var(--font-weight--semibold);
}

.survey-modal .survey-modal-content .survey-modal-header .close {
	font-size: 50px;
	cursor: pointer;
	block-size: 50px;
	display: flex;
	align-items: center;
}

.survey-modal .survey-modal-content .survey-text {
	font-size: var(--font-size--l);
	font-weight: var(--font-weight--medium);
	margin-block-start: 15px;
	display: block;
	color: var(--wp--preset--color--black);
	font-family: var(--font-family--primary);
}

.survey-modal .survey-modal-content select,
.survey-modal .survey-modal-content input[type="checkbox"],
.survey-modal .survey-modal-content input[type="radio"] {
	appearance: none; /* Removes default browser styles */
	-webkit-appearance: none; /* Ensures compatibility with Safari */
	-moz-appearance: none;
	outline: none;
	font-family: inherit;
}

/* Wrapper for select dropdown */
.survey-modal .survey-modal-content .survey-dropdown {
	position: relative;
	display: inline-block;
	inline-size: 85%;
}

/* Style the select box */
.survey-modal .survey-modal-content select {
	inline-size: 100%;
	padding: 12px 10px; /* Increased padding to ensure dropdown positioning */
	margin-block-start: 3px;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--medium-dark);
	color: var(--wp--preset--color--dark);
	font-family: var(--font-family--primary);
	background-color: var(--wp--preset--color--white);
	appearance: none; /* Removes default browser styles */
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	line-height: 1.5; /* Helps Safari calculate height correctly */
}

/* Fix for Safari: Prevents the dropdown box from moving up */
.survey-modal .survey-modal-content select:focus {
	padding-block: 12px;
}

/* Dropdown arrow */
.survey-modal .survey-modal-content .survey-dropdown .arrow-down {
	position: absolute;
	inset-inline-end: 10px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.survey-modal .survey-modal-content .select-all-text {
	font-size: var(--font-size--m);
	color: var(--wp--preset--color--cyan-bluish-gray);
	font-family: var(--font-family--primary);
}

/* Shared styles for checkboxes & radio buttons */
.survey-modal .survey-modal-content .survey-checkboxes,
.survey-modal .survey-modal-content .survey-radio {
	display: flex;
	flex-wrap: wrap; /* Allows items to wrap naturally */
	gap: 10px 20px; /* Consistent spacing */
	margin-block-start: 10px;
	justify-content: flex-start; /* Align items to the left */
}

/* Shared label styling */
.survey-modal .survey-modal-content .survey-checkboxes label,
.survey-modal .survey-modal-content .survey-radio label {
	display: flex;
	align-items: flex-start; /* Align input with text */
	gap: 10px;
	font-size: var(--font-size--m);
	font-family: var(--font-family--primary);
	color: var(--wp--preset--color--dark);
	cursor: pointer;
	line-height: 1.2;
	word-wrap: break-word;
	white-space: normal;
	flex: 0 1 auto; /* Prevents unnecessary stretching */
	min-inline-size: fit-content; /* Prevents items from being too wide */
	max-inline-size: 100%;
}

/* Checkbox & radio button styles */
.survey-modal .survey-modal-content .survey-checkboxes input[type="checkbox"],
.survey-modal .survey-modal-content .survey-radio input[type="radio"] {
	inline-size: 18px;
	block-size: 18px;
	min-inline-size: 18px;
	min-block-size: 18px;
	border: 2px solid var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	position: relative;
	flex-shrink: 0; /* Ensures the size remains fixed */
	margin-block-start: 1px;
}

/* Checkbox-specific styles */
.survey-modal .survey-modal-content .survey-checkboxes input[type="checkbox"] {
	border-radius: 4px;
}

/* Checkmark icon for checkboxes */
.survey-modal .survey-modal-content .survey-checkboxes input[type="checkbox"]::before {
	content: "✔";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: var(--wp--preset--color--white);
	opacity: 0;
}

/* Show checkmark when checked */
.survey-modal .survey-modal-content .survey-checkboxes input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--dark);
	border-color: var(--wp--preset--color--dark);
}

.survey-modal .survey-modal-content .survey-checkboxes input[type="checkbox"]:checked::before {
	opacity: 1;
}

/* Radio button-specific styles */
.survey-modal .survey-modal-content .survey-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 50%;
}

/* Inner circle for selected radio button */
.survey-modal .survey-modal-content .survey-radio input[type="radio"]::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: 10px;
	block-size: 10px;
	background-color: var(--wp--preset--color--dark);
	border-radius: 50%;
	opacity: 0;
}

/* Show inner circle when selected */
.survey-modal .survey-modal-content .survey-radio input[type="radio"]:checked::before {
	opacity: 1;
}

.survey-modal .survey-modal-content .submit-button {
	background-color: var(--button-primary-bg-color, var(--color--primary));
	color: var(--wp--preset--color--white);
	font-size: var(--font-size--m);
	cursor: pointer;
	border: none;
	padding: 5px;
	margin-block-start: 15px;
	inline-size: 45%;
	display: inherit;
	font-weight: var(--font-weight--semibold);
	font-family: var(--font-family--primary);
	outline: none;
}

.survey-modal .survey-modal-content .submit-button:hover {
	background-color: var(--button-primary-bg-color-hover, var(--color--primary-dark));
}

.survey-modal .mobile-view {
	display: none;
}

.survey-modal .dismiss-text {
	display: none;
	text-align: center;
	margin-block-start: 10px;
	font-size: var(--font-size--m);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-weight: var(--font-weight--semibold);
	font-family: var(--font-family--primary);
}

.survey-modal .survey-modal-content .survey-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 10px;
}

.survey-modal .survey-modal-content .survey-button {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--medium-dark);
	color: var(--wp--preset--color--dark);
	padding: 3px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--font-family--primary);
	font-size: var(--font-size--m);
	transition: all 0.3s ease;
	outline: none;
}

.survey-modal .survey-modal-content .survey-button:hover {
	background-color: var(--wp--preset--color--light);
}

.survey-modal .survey-modal-content .survey-button.selected {
	background-color: var(--button-primary-bg-color, var(--color--primary));
	color: var(--wp--preset--color--white);
	border-color: var(--button-primary-bg-color, var(--color--primary));
}

.required-button-group.error {
	border: 1px solid #f44;
	padding: 10px;
	border-radius: 4px;
}

.survey-text.error {
	color: #f44;
}

.validation-error {
	color: #f44;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #f44;
	border-radius: 4px;
	text-align: center;
	font-weight: 700;
}

.survey-field-required,
.survey-other-field-required {
	display: none;
	color: #f44;
	font-size: 14px;
	margin-block-start: 5px;
}

.popup-footer {
	position: sticky;
	inset-block-end: 0;
	background-color: var(--wp--preset--color--white);
	padding-block-end: 20px;
	padding-block-start: 20px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

	.survey-modal .survey-modal-content {
		inline-size: auto;
	}
}

@media screen and (max-width: 767px) {

	.survey-modal {
		background-color: rgba(0, 0, 0, 0.7);
	}

	.survey-modal .survey-modal-content {
		inline-size: 90%;
		margin: 0 auto;
		padding: 15px 15px 0 15px;
	}

	.survey-modal .survey-modal-content .survey-modal-header {
		display: none;
	}

	.survey-modal .survey-modal-content .survey-text {
		font-size: 14px;
	}

	.survey-modal .survey-modal-content select,
	.survey-modal .survey-modal-content input,
	.survey-modal .survey-modal-content button {
		inline-size: 100%;
	}

	.survey-modal .survey-modal-content .submit-button {
		inline-size: 50%;
		margin: 20px auto 10px;
	}

	.survey-modal .mobile-view {
		display: block;
	}

	.survey-modal .survey-modal-title {
		font-size: 22px;
		color: var(--wp--preset--color--white);
		text-align: center;
		margin-block-end: 10px;
		font-family: var(--font-family--primary);
		font-weight: var(--font-weight--semibold);
	}

	.survey-modal .dismiss-text {
		display: block;
	}
}

/* Other option styles */
.survey-modal .survey-modal-content .survey-other-input {
	margin-block-start: 10px;
	transition: all 0.3s ease;
	inline-size: 85%;
}

.survey-modal .survey-modal-content .survey-text-input {
	inline-size: 100%;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--medium-dark);
	border-radius: 4px;
	font-size: var(--font-size--m);
	font-family: var(--font-family--primary);
	color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--white);
	transition: all 0.3s ease;
}

.survey-modal .survey-modal-content .survey-text-input:focus {
	border-color: var(--wp--preset--color--dark);
	outline: none;
}