/**
 * BoldForm Pro — Draft Auto-Save (front end).
 *
 * A single subtle notice shown above a form when an auto-saved draft was
 * restored, with a "Discard draft" action. It reuses the form's field surface
 * tokens so it blends with any design theme, and stays visually quieter than
 * the success/error messages (this is an ambient info bar, not a result).
 *
 * @package BoldFormPro
 */

.boldform-draft-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 10px 14px;
	border-radius: var(--bf-field-radius, 10px);
	border: 1px solid var(--bf-field-border, #dbe3ef);
	background: #f5f8ff;
	color: var(--bf-field-text, #1f2937);
	font-size: 13px;
	line-height: 1.4;
}

@supports ( background: color-mix( in srgb, red 6%, #fff ) ) {
	.boldform-draft-notice {
		background: color-mix( in srgb, var(--bf-button-bg, #2563eb) 6%, #fff );
	}
}

.boldform-draft-notice__text {
	flex: 1 1 auto;
	min-width: 0;
}

.boldform-draft-notice__discard {
	flex: 0 0 auto;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bf-button-bg, #2563eb);
	background: transparent;
	border: 1px solid var(--bf-button-bg, #2563eb);
	border-radius: var(--bf-field-radius, 8px);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.boldform-draft-notice__discard:hover,
.boldform-draft-notice__discard:focus {
	color: var(--bf-button-text, #fff);
	background: var(--bf-button-bg, #2563eb);
	outline: none;
}