/**
 * Gravity Forms SIRET Field - block layout.
 *
 * The SIRET / SIREN value is entered in several small blocks laid out in a
 * single row ( 3 3 3 5 for a SIRET, 3 3 3 for a SIREN ).
 *
 * This file is loaded on the front end AND in the form editor: the editor
 * renders exactly the same markup ( only with disabled inputs ), so without
 * these rules the preview would show the blocks stacked full width.
 *
 * Note: many themes - and the form editor - force `width: 100%` on text
 * inputs, which would make each block fill the row and wrap onto its own line.
 * We therefore pin explicit block widths with !important and keep the blocks
 * in a flex row.
 *
 * @since 1.0.0
 */

.ginput_container_siret .sp-siret-field {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ginput_container_siret .sp-siret-block {
	flex: 0 0 auto;
	width: 4.5rem !important;
	max-width: 4.5rem;
	min-width: 0;
	text-align: center;
	box-sizing: border-box;
	letter-spacing: 0.12rem;
	font-variant-numeric: tabular-nums;
}

/* the 5-digit block of a SIRET ( the trailing NIC ) is a little wider */
.ginput_container_siret .sp-siret-block[maxlength="5"] {
	width: 6rem !important;
	max-width: 6rem;
}

/**
 * Form editor only: the blocks are rendered disabled there. Keep them looking
 * like a normal input instead of the browser's greyed-out default, so the
 * preview matches what the visitor will see, and stop the editor's grid from
 * stretching them.
 */
.gform_editor .ginput_container_siret .sp-siret-block,
.gform-form-editor .ginput_container_siret .sp-siret-block {
	flex: 0 0 auto !important;
	opacity: 1;
	cursor: default;
}