/**
 * Tax invoice checkout block.
 *
 * Intentionally minimal and mostly layout-only so it inherits the theme's and
 * FunnelKit's input styling rather than fighting it.
 */

.sti-block {
	clear: both;
	margin: 1.5em 0 0;
}

.sti-block [hidden] {
	display: none !important;
}

.sti-fields {
	margin-top: 0.75em;
	padding: 1em 1.15em 0.35em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 6px;
}

/*
 * billing_group mode: the rows sit among the store's own billing fields, so
 * the box would read as a second, competing group. Drop it and let them blend.
 */
.sti-fields--bare {
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/*
 * `display: contents` lifts our wrappers out of the layout so each row becomes
 * a direct child of the store's field grid and picks up its column widths.
 * The [hidden] rule above still wins, so conditional rows stay hidden.
 */
.sti-block--billing_group,
.sti-block--billing_group .sti-fields--bare,
.sti-block--billing_group .sti-company-fields,
.sti-block--billing_group .sti-branch-fields {
	display: contents;
}

/*
 * FunnelKit hides billing rows through its own stylesheet via this class.
 * Repeating the rule here means our rows stay hidden even if that stylesheet
 * changes, is renamed, or loads after ours.
 */
.sti-block--billing_group .wfacp_billing_field_hide {
	display: none !important;
}

.sti-note {
	margin: 0 0 1em;
	font-size: 0.875em;
	opacity: 0.75;
	line-height: 1.5;
}

.sti-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	padding-top: 0.35em;
}

.sti-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}

.sti-radio input {
	margin: 0;
	width: auto;
}

/*
 * Checksum feedback on the tax ID. The explanatory caption was removed from the
 * form, so this is the only signal that a number is well-formed — kept as a
 * border colour so it adds no text and no layout shift.
 */
.sti-input--ok {
	border-color: #1a7f37 !important;
}

.sti-input--error {
	border-color: #b32d2e !important;
}

.sti-branch-fields {
	display: flow-root;
}

@media (max-width: 600px) {
	.sti-radio-group {
		flex-direction: column;
		gap: 0.5em;
	}
}