/* Base CSS to normalize the default. */
.uds-feedback-form--wrapper h2,
.uds-feedback-form--wrapper p,
.uds-feedback-form--wrapper input[type="radio"] {
	margin: 0;
	padding: 0;
}

.uds-feedback-form--wrapper .show {
	display: block;
}
.uds-feedback-form--wrapper .hide {
	display: none;
}

.uds-feedback-form--wrapper {
	align-items: center;
	background-color: rgba( 0, 0, 0, 0.75 );
	bottom: 0;
	display: none;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	user-select: none;
	z-index: -9999;
}

.uds-feedback-form--wrapper.show_popup {
	display: flex !important;
	z-index: 99999;
}

.uds-feedback-form--wrapper .uds-feedback-form--container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 4px 4px 24px rgba( 0, 0, 0, 0.25 );
	max-width: 90%;
	width: 540px;
}

.uds-feedback-form--container .uds-form-header--wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 16px 20px 0;
}

.uds-feedback-form--container .uds-form-title--icon-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
}

.uds-feedback-form--container .uds-form-title--icon-wrapper .uds-icon,
.uds-feedback-form--container .uds-form-header--wrapper .uds-close {
	width: 20px;
	height: 20px;
}

.uds-feedback-form--container .uds-form-title--icon-wrapper .uds-title {
	color: #1f2937;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-align: left;
}

.uds-feedback-form--container .uds-form-header--wrapper .uds-close {
	color: #9ca3af;
	cursor: pointer;
}

.uds-feedback-form--container .uds-form-header--wrapper .uds-close:hover {
	color: #4b5563;
}

.uds-feedback-form--container .uds-form-body--content {
	padding: 20px 20px 0 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.uds-feedback-form--container .uds-form-body--content .uds-form-description {
	color: #1f2937;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: left;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .reason {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-options-feedback {
	color: #6b7280;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	width: 100%;
	padding: 9px 13px;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: #e5e7eb;
	box-shadow: 0 1px 2px 0 #0000000d;
	background: #fff;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-options-feedback:hover,
.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-options-feedback:focus,
.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-options-feedback:active {
	border-color: #d1d5db;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-option-feedback-cta {
	color: #4b5563;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-option-feedback-cta a {
	text-decoration: none;
	color: #006ba1;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-options-feedback::placeholder {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: #6b7280;
	opacity: 1;
}

.uds-feedback-form--container .uds-form-body--content .uds-feedback-form-sumbit--actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background-color: #f6f7f7;
	border-top: 1px solid #e1e1e1;
	margin: 40px -20px 0;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.uds-feedback-form--container .uds-form-body--content .uds-feedback-form-sumbit--actions .button {
	padding: 7px 13px;
	border-radius: 3px;
	border-width: 1px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	border-style: solid;
	display: flex;
	gap: 8px;
	align-items: center;
}

.uds-feedback-form--container .uds-form-body--content .uds-feedback-form-sumbit--actions .button:focus {
	outline: none;
	box-shadow: none;
}
.uds-feedback-form--container .uds-form-body--content .uds-feedback-form-sumbit--actions .button.processing {
	pointer-events: none;
	opacity: 0.8;
}
.uds-feedback-form--container .uds-form-body--content .uds-feedback-form-sumbit--actions .button.processing::before {
	content: "\f463";
	animation: spin 2s linear infinite;
	font-family: dashicons, sans-serif;
	font-weight: 400;
	font-size: 18px;
	cursor: pointer;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form .uds-reason-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form input[type="radio"] {
	display: flex;
	justify-content: center;
	height: 18px;
	width: 18px;
	cursor: pointer;
	margin: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	line-height: 0;
	box-shadow: inset 0 1px 2px rgb( 0 0 0 / 10% );
	transition: 0.05s border-color ease-in-out;
	-webkit-appearance: none;
	padding: 0;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form input[type="radio"]:checked {
	vertical-align: middle;
	background-color: #006ba1;
}

.uds-feedback-form--container .uds-form-body--content #uds-feedback-form input[type="radio"]:checked::before {
	background-color: #fff !important;
	border-radius: 50px;
	content: "\2022";
	font-size: 24px;
	height: 6px;
	line-height: 13px;
	margin: 5px;
	text-indent: -9999px;
	width: 6px;
}

@keyframes spin {
	0% {
		transform: rotate( 0deg );
	}
	100% {
		transform: rotate( 360deg );
	}
}

/* Extra options: a product's own setting, surfaced at deactivation time.
   Separated from the reasons above so it does not read as another reason. */
.uds-feedback-form .uds-extra-options {
	margin: 16px 0 0;
	padding: 14px 0 0;
	border: 0;
	border-top: 1px solid #e5e7eb;
}

.uds-feedback-form .uds-extra-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* WP admin gives checkboxes their own margins and a near-black border, which
   pushes the box out of line with a wrapping label and makes it read as heavier
   than the reason radios above. Match the radios' border, and sit the box on the
   label's first line. Kept smaller than the 18px radios so it still reads as a
   different kind of control rather than a sixth reason. The label is a
   `label for`, so the click target stays the full text either way. */
.uds-feedback-form .uds-extra-option--checkbox {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	/* WP admin floors checkboxes at min-width 1rem, which would clamp the
	   width above back up to 16px. */
	min-width: 14px;
	margin: 0;
	/* (line-height 19.5px - 14px box) / 2 */
	margin-top: 3px;
	border-color: #d1d5db;
}

.uds-feedback-form .uds-extra-option--label {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #4b5563;
}

.uds-feedback-form .uds-extra-option--note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}

.uds-feedback-form .uds-extra-option--error {
	margin: 8px 0 0;
	font-size: 12px;
	color: #b32d2e;
}

.uds-feedback-form .uds-extra-option--error.hide {
	display: none;
}

/* Sits inline at the end of the error sentence, so it reads as the way out
   rather than a second action competing with the popup's own buttons. */
.uds-feedback-form .uds-extra-option--proceed {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}