/*
 * Fluent Forms styling glue (2026-10-13).
 *
 * The Beaver Builder skin styles text-type inputs and textareas (14px system
 * font, #fcfcfc fill, 41px tall) but leaves <select> alone, so a native dropdown
 * inside a Fluent form inherits the page's 18px Ainslie Sans and renders as the
 * browser's stock menulist: 47px tall in Chrome, a short flat control in Safari.
 * Fluent Forms' Repeater Container then centres its +/- buttons on the whole
 * row (label + field + the field's 20px bottom margin) with a percentage
 * margin-top, so the icons float below the inputs they belong to.
 *
 * First user: the "Titles requested" repeater on /large-quantity-bulk-book-orders/
 * (gvbf-store 0.1.12, LARGE-QUANTITY-ORDER-FORM.md). The select rule is
 * deliberately site-wide so any Fluent dropdown matches the inputs beside it.
 */

/* Dropdowns: same box as the inputs, custom chevron (native arrow removed with
   appearance:none, which is also what makes Safari honour the height/padding). */
.fluentform select.ff-el-form-control:not([multiple]):not([size]) {
	-webkit-appearance: none;
	appearance: none;
	height: 41px;
	padding: 6px 36px 6px 15px;
	font-size: 14px;
	line-height: 1.42857;
	background-color: #fcfcfc;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}

/* Repeater Container rows: drop the per-field bottom margin inside a row (the
   row gap is set below instead), keep the two labels the same height even when
   one carries a tooltip icon, and park the +/- buttons on the input line. */
.fluentform .ff-repeater-container {
	margin-bottom: 20px;
}
.fluentform .ff-repeater-container .ff_repeater_cell .ff-el-group {
	margin-bottom: 0;
}
.fluentform .ff-repeater-container .ff_repeater_cont_row + .ff_repeater_cont_row {
	margin-top: 12px;
}
.fluentform .ff-repeater-container .ff-el-input--label {
	display: flex;
	align-items: center;
	min-height: 1.8em; /* the label's own line-height, so rows without a tooltip match rows with one */
}
.fluentform .ff-repeater-container .repeat_btn {
	align-self: flex-end;   /* bottom of the row = the input line */
	align-items: center;
	height: 41px;           /* same as the inputs, so centring lands on them */
	padding-left: 4px;
}
.fluentform .ff-repeater-container .ff-el-repeat-buttons-list {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 0;          /* Fluent's default is margin-top: 34% (of the cell width) */
}
.fluentform .ff-repeater-container .ff-el-repeat-buttons-list span {
	display: inline-flex;
	line-height: 0;
}