/**
 * WHSPTO Cover Fee — order-summary checkbox layout.
 *
 * Lays the block out as: [checkbox] [ label / description ] so the help text
 * aligns in a tidy column under the label instead of running full width.
 */

.whspto-cover-fee {
	padding: 16px 0;
}

/* Checkbox + label row: align the checkbox to the top of the label. */
.whspto-cover-fee .components-h-stack {
	align-items: flex-start !important;
	gap: 10px;
}

.whspto-cover-fee .components-checkbox-control__input-container {
	margin-top: 1px;
	flex: 0 0 auto;
	margin-right: 0;
}

.whspto-cover-fee .components-base-control__field {
    margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
    margin-right: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
}

.whspto-cover-fee .components-checkbox-control__label {
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0;
}

/* Description: indent to align under the label (24px checkbox + 10px gap). */
.whspto-cover-fee .components-base-control__help {
	/* margin: 6px 0 0 34px; */
	font-size: 0.875em;
	line-height: 1.45;
	color: #50575e;
}

.whspto-cover-fee .components-base-control__help .components-checkbox-control__help {
	color: inherit;
	margin-right: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
}