/**
 * Caldera Forms — front-end usability enhancements styles.
 *
 * Styles the markup injected by assets/js/caldera-forms-usability.js. Colors
 * use modest, theme-neutral defaults; override in your theme as needed.
 *
 * @since 1.9.8
 */

/* Icons (no Font Awesome dependency — rendered via Unicode content). */
.cf-usability-icon {
	display: inline-block;
	font-style: normal;
	line-height: 1;
}

.cf-usability-icon--warning::before {
	content: "\26A0"; /* ⚠ */
}

.cf-usability-icon--hand::before {
	content: "\261D"; /* ☝ */
	margin-right: .35em;
}

/* Dropdown "stuck open" helper note. */
.cf-dropdown-note {
	margin: .35em 0 0;
	padding: .4em .6em;
	font-size: .85em;
	line-height: 1.4;
	color: #5a4b00;
	background: #fff8e1;
	border: 1px solid #ffe082;
	border-radius: 3px;
}

.cf-dropdown-note__link {
	cursor: pointer;
	font-weight: 700;
	text-decoration: underline;
}

/* Invalid-field count message shown beneath the submit/next button. */
.cf-error-count-msg {
	margin: .5em 0 0;
	padding: .4em .6em;
	font-size: .9em;
	line-height: 1.4;
	color: #a8071a;
	background: #fff1f0;
	border: 1px solid #ffa39e;
	border-radius: 3px;
}

.cf-error-count-msg .cf-usability-icon--warning {
	margin-right: .25em;
}

/* Cumulative breadcrumb progress for multi-page forms. */
.caldera-grid .breadcrumb li.activebc > a,
.caldera-grid .breadcrumb li.activebc > span {
	background-color: #1677ff;
	color: #fff;
}

/* Page navigation button layout. */
.caldera-form-page .cf-buttons-space-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5em;
}

.caldera-form-page .cf-buttons-flex-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}