/* Frontend compatibility styles for Type B (Jetpack / block-form look).
 * Only enqueued when preview mode is set to type_b.
 */

.caramba-moreno-checkout-field.wp-block-jetpack-input-wrap,
.caramba-moreno-checkout-field .wp-block-jetpack-input-wrap {
	margin-bottom: 1.5rem;
}

/* Label styling */
.caramba-moreno-checkout-field .wp-block-jetpack-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

/* Inputs, selects, textareas */
.caramba-moreno-checkout-field .wp-block-jetpack-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: var(--jetpack--contact-form--input-padding, 16px);
	border-radius: var(--jetpack--contact-form--border-radius, 0);
	border: var(--jetpack--contact-form--border, 1px solid #8c8f94);
	background: var(--jetpack--contact-form--input-background, var(--jetpack--contact-form--input-background-fallback, #fff));
	font-size: var(--jetpack--contact-form--font-size, inherit);
	line-height: var(--jetpack--contact-form--line-height, 1.4);
}

/* Ensure Select2 picks up similar spacing & vertical centering */
.caramba-moreno-checkout-field .select2-container .select2-selection--single {
	min-height: var(--jetpack--contact-form--input-height, 3rem);
	border-radius: var(--jetpack--contact-form--border-radius, 0);
	border: var(--jetpack--contact-form--border, 1px solid #8c8f94);
	display: flex;
	align-items: center;
	padding: 0;
}

/* Make the rendered text align vertically */
.caramba-moreno-checkout-field .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
}

/* Use full width for selects inside wrapper */
.caramba-moreno-checkout-field .select2-container {
	width: 100% !important;
}