/**
 * Land Airline — Partner form Fleet repeater.
 *
 * Matches the React prototype: white inputs with #e8e4df border and gold focus,
 * a bordered gold trash button, and a small uppercase gold "Add Vehicle" link.
 * Rows are 2-up on mobile, 4-up from the small breakpoint; the remove button
 * only appears (inline, beside Color) when there are 2+ vehicles.
 *
 * @package landairline-services
 */

.lair-pf {
	display: flex;                   /* block-level stack: no inline line-box gap */
	flex-direction: column;
	align-items: flex-start;
	width: 100%;                     /* field-group is a flex-wrap row */
	flex: 0 0 100%;
	font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

.lair-pf-items {
	display: flex;
	flex-direction: column;
	gap: 20px;                       /* space between vehicles */
	width: 100%;
}

/* Row: 2 cols on mobile, 4 equal cols from 640px. The gap reuses the form's
   own column gap (Elementor --column-gap, 20px fallback) so, with 4 equal
   columns, the Model|Year gutter lands exactly on the 50/50 split of the
   fields above and Color reaches the right edge. No extra column is reserved
   for the remove button (that was pushing Color inward). */
.lair-pf-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--column-gap, 20px);
	align-items: center;
}

@media (min-width: 640px) {
	.lair-pf-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Last cell: Color input + remove button inline. The button only shows with
   2+ rows; when it does, Color gives up the space and the column itself keeps
   its width, so every other input stays aligned. */
.lair-pf-last {
	display: flex;
	align-items: stretch;
	gap: 12px;
	min-width: 0;
}

.lair-pf-last .lair-pf-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* The inputs carry Elementor's own .elementor-field .elementor-size-md classes
   (added in JS), so typography, colors, border and height are inherited from
   the form. We only guarantee full width and a consistent box model here. */
.lair-pf-input.elementor-field {
	width: 100%;
	box-sizing: border-box;
}

/* Remove button: bordered box, gold icon, light hover fill.
   Matches: px-3 py-3 border border-[#e8e4df] text-[#97785a] hover:bg-[#f5f2ee].
   Selectors doubled and every state pinned so the theme's default button
   styles (which were tinting it red on hover/active) can't leak through. */
.lair-pf .lair-pf-remove,
.lair-pf-remove {
	display: none;                   /* only shown when there are 2+ rows */
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0 12px;                 /* height stretches to match the input */
	background-color: transparent;
	background-image: none;
	border: 1px solid #e8e4df;
	border-radius: 0;
	box-shadow: none;
	color: #97785a;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.lair-pf .lair-pf-remove:hover,
.lair-pf-remove:hover {
	background-color: #f5f2ee;
	color: #97785a;
	border-color: #e8e4df;
	box-shadow: none;
}

.lair-pf .lair-pf-remove:focus,
.lair-pf .lair-pf-remove:active,
.lair-pf-remove:focus,
.lair-pf-remove:active {
	background-color: #f5f2ee;
	color: #97785a;
	border-color: #e8e4df;
	box-shadow: none;
	outline: none;
	transform: none;
}

.lair-pf-remove svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.lair-pf--multi .lair-pf-remove {
	display: inline-flex;
}

/* Add button: plain gold text link with a plus icon — NO box, NO fill.
   Matches: flex items-center gap-2 text-[#97785a] text-xs font-semibold
   tracking-wider uppercase hover:text-[#7d6349].
   Selectors doubled and every state pinned so the theme's default button
   styles (border, background, red hover/active) can't leak through. */
.lair-pf .lair-pf-add,
.lair-pf-add {
	display: inline-flex;
	align-items: center;
	gap: 8px;                        /* gap-2 */
	margin-top: 12px;
	padding: 0;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #97785a;
	font-family: inherit;
	font-size: 12px;                 /* text-xs */
	font-weight: 600;                /* font-semibold */
	letter-spacing: 0.1em;           /* tracking-wider */
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms ease;
}

.lair-pf .lair-pf-add:hover,
.lair-pf-add:hover {
	background-color: transparent;
	color: #7d6349;                  /* gold_dark */
	box-shadow: none;
}

.lair-pf .lair-pf-add:focus,
.lair-pf .lair-pf-add:active,
.lair-pf-add:focus,
.lair-pf-add:active {
	background-color: transparent;
	color: #7d6349;
	box-shadow: none;
	outline: none;
	transform: none;
}

.lair-pf .lair-pf-add svg,
.lair-pf-add svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}