/**
 * 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;
}

/* ------------------------------------------------------------------ *
 * Modern, full-width multi-page breadcrumbs.
 *
 * Overrides the sparse Bootstrap defaults in caldera-forms-front.css
 * (loaded earlier). The `.activebc` class is applied cumulatively by the
 * breadcrumb-progress feature so completed steps stay highlighted.
 * ------------------------------------------------------------------ */
.caldera-grid ol.breadcrumb {
	display: flex;
	width: 100%;
	margin: 0 0 30px;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	list-style: none;
	counter-reset: cf-step;
}

.caldera-grid ol.breadcrumb > li {
	flex: 1 1 0;
	float: none;
	display: block;
	min-width: 0;
	margin: 0;
	position: relative;
	text-align: center;
}

/* Numbered step indicator (overrides the Bootstrap "/" separator). */
.caldera-grid ol.breadcrumb > li::before {
	content: counter(cf-step);
	counter-increment: cf-step;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	padding: 0;
	border-radius: 50%;
	background: #e5e7eb;
	color: #374151;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}

/* Connector line between steps. */
.caldera-grid ol.breadcrumb > li::after {
	content: '';
	position: absolute;
	top: 16px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: #e5e7eb;
	z-index: 0;
	transition: background-color .2s ease;
}

.caldera-grid ol.breadcrumb > li:first-child::after {
	content: none;
}

.caldera-grid ol.breadcrumb > li > a,
.caldera-grid ol.breadcrumb > li > span {
	display: block;
	width: 100%;
	padding: 0 6px;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	word-break: break-word;
}

/* Completed / active steps (cumulative .activebc). */
.caldera-grid ol.breadcrumb > li.activebc::before {
	background: #27ae60;
	color: #fff;
}

.caldera-grid ol.breadcrumb > li.activebc::after {
	background: #27ae60;
}

.caldera-grid ol.breadcrumb > li.activebc > a,
.caldera-grid ol.breadcrumb > li.activebc > span {
	color: #1f2937;
}

/* Emphasise the page the user is currently on. */
.caldera-grid ol.breadcrumb > li.active::before {
	box-shadow: 0 0 0 4px rgba(39, 174, 96, .18);
}

@media (max-width: 480px) {
	.caldera-grid ol.breadcrumb > li > a,
	.caldera-grid ol.breadcrumb > li > span {
		font-size: 11px;
	}
}

/* ------------------------------------------------------------------ *
 * Modern submission summary (review of entered values).
 *
 * Rows whose value is empty are hidden by the summary-hide-empty feature
 * in caldera-forms-usability.js, so only filled fields are listed.
 * ------------------------------------------------------------------ */
.caldera-grid .caldera-forms-summary-field ul {
	width: 100%;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	overflow: hidden;
}

.caldera-grid .caldera-forms-summary-field li {
	display: flex;
	margin: 0;
	padding: 0;
	border-top: 1px solid #e5e7eb;
}

.caldera-grid .caldera-forms-summary-field li:first-child {
	border-top: 0;
}

.caldera-grid .caldera-forms-summary-field .caldera-forms-summary-label {
	flex: 0 0 32%;
	padding: .6rem .75rem;
	background: #f9fafb;
	color: #374151;
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

.caldera-grid .caldera-forms-summary-field .caldera-forms-summary-value {
	flex: 1 1 auto;
	padding: .6rem .75rem;
	color: #111827;
	word-break: break-word;
}

@media (max-width: 480px) {
	.caldera-grid .caldera-forms-summary-field li {
		flex-direction: column;
	}
	.caldera-grid .caldera-forms-summary-field .caldera-forms-summary-label {
		flex-basis: auto;
		text-align: left;
	}
}

/* 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;
}