/* Research Onboarding — shared by classic and block checkout. */

.dxce-onboarding {
	margin: 0 0 24px;
}

.dxce-onboarding .dxce-intro,
.dxce-onboarding .wc-block-components-checkout-step__description {
	margin: 0 0 12px;
	opacity: 0.8;
}

.dxce-onboarding .dxce-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 18px;
	font-weight: normal;
}

.dxce-onboarding .dxce-hint {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
	margin-top: 4px;
}

.dxce-onboarding .dxce-req {
	color: #b32d2e;
	text-decoration: none;
	border: 0;
}

.dxce-onboarding .dxce-optional {
	opacity: 0.7;
	font-weight: normal;
}

/* Block checkout rows */
.dxce-onboarding .dxce-row {
	margin: 0 0 16px;
}

.dxce-onboarding .dxce-row > label,
.dxce-onboarding .dxce-row > .dxce-label {
	display: block;
	margin: 0 0 6px;
}

.dxce-onboarding .dxce-row input[type="text"],
.dxce-onboarding .dxce-row input[type="date"],
.dxce-onboarding .dxce-row select {
	box-sizing: border-box;
	width: 100%;
	min-height: 3em;
	padding: 0 12px;
	border: 1px solid hsla(0, 0%, 7%, 0.8);
	border-radius: 4px;
	background: #fff;
	color: #2b2d2f;
	font: inherit;
}

.dxce-onboarding .has-error input,
.dxce-onboarding .has-error select {
	border-color: #cc1818;
}

.dxce-onboarding .dxce-check {
	margin: 0 0 12px;
}

.dxce-onboarding .dxce-check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: normal;
	line-height: 1.5;
}

.dxce-onboarding .dxce-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: 0.15em 0 0;
}

.dxce-onboarding .dxce-error p {
	margin: 4px 0 0;
	color: #cc1818;
	font-size: 0.875em;
}

.dxce-editor-preview {
	padding: 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
}

/* Block checkout: match WooCommerce's own field sizes rather than inheriting
   the theme's body text, which on some themes is much larger. */
.dxce-blocks {
	font-size: 16px;
}

.dxce-blocks .dxce-row > label,
.dxce-blocks .dxce-row > .dxce-label {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 6px;
}

.dxce-blocks .dxce-inline {
	font-size: 14px;
	line-height: 20px;
	margin: 4px 24px 0 0;
}

.dxce-blocks .dxce-row input[type="text"],
.dxce-blocks .dxce-row input[type="date"],
.dxce-blocks .dxce-row select {
	height: 50px;
	min-height: 50px;
	font-size: 16px;
	line-height: 25px;
	border-color: rgba(43, 45, 47, 0.8);
}

.dxce-blocks .dxce-check label {
	font-size: 14px;
	line-height: 20px;
}

.dxce-blocks input[type="checkbox"],
.dxce-blocks input[type="radio"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 20px;
	accent-color: #111;
}

.dxce-blocks .dxce-check input[type="checkbox"] {
	margin-top: 0;
}

.dxce-blocks .dxce-hint {
	font-size: 13px;
	line-height: 18px;
	margin-top: 6px;
}

.dxce-blocks .dxce-error p {
	font-size: 13px;
}

/* The radio labels are direct children of a row too; keep them inline. */
.dxce-onboarding .dxce-row > label.dxce-inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 2px 24px 0 0;
}