/**
 * BoldForm Pro — Save & Resume (front end).
 *
 * The "Save and continue later" button sits beside the submit button as a
 * secondary (outline) action, following the form's design-theme accent. The
 * saved-link panel and resume notice reuse the form's field surface tokens so
 * they blend with any theme.
 *
 * @package BoldFormPro
 */

/*
 * Secondary "Save and continue later" button.
 *
 * Mirrors the submit button's EXACT box model — same padding, radius, and
 * typography tokens as `.boldform-lite-form__submit` (frontend.css) — so the two
 * buttons match in size and shape under every design theme. Only the fill
 * differs: this is the outline (secondary) action. The outline is drawn with an
 * inset box-shadow instead of a real border, so the height stays identical to
 * the (border-width:0) submit button rather than growing by 2px. It also uses
 * the same `--bf-btn-margin` as submit so both flex items align + stretch equally.
 */
.boldform-lite-form .boldform-sr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: var(--bf-btn-margin, 10px 0 0);
	margin-left: 12px;
	padding: var(--bf-button-padding, var(--bf-button-padding-y, 10px) var(--bf-button-padding-x, 24px));
	border: 0;
	border-radius: var(--bf-button-radius, 6px);
	background: transparent;
	color: var(--bf-button-bg, #2f80ed);
	font-family: var(--bf-btn-ff, inherit);
	font-size: var(--bf-btn-fs, var(--bf-button-font-size, 14px));
	font-weight: var(--bf-btn-fw, 600);
	line-height: var(--bf-btn-lh, normal);
	letter-spacing: var(--bf-btn-ls, normal);
	text-transform: var(--bf-btn-tt, none);
	cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--bf-button-bg, #2f80ed);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.boldform-lite-form .boldform-sr-btn:hover {
	transform: translateY(-1px);
	color: var(--bf-button-text, #fff);
	background: var(--bf-button-bg, #2f80ed);
}

.boldform-lite-form .boldform-sr-btn:focus-visible {
	outline: 2px solid var(--bf-button-bg, #2f80ed);
	outline-offset: 2px;
}

@media ( max-width: 480px ) {
	.boldform-lite-form .boldform-sr-btn {
		margin-left: 0;
		width: 100%;
	}
}

/* Saved-link panel + resume notice. */
.boldform-sr-panel,
.boldform-sr-notice {
	margin: 0 0 18px;
	padding: 16px 18px;
	border-radius: var(--bf-field-radius, 10px);
	border: 1px solid var(--bf-field-border, #dbe3ef);
	background: color-mix( in srgb, var(--bf-button-bg, #2563eb) 6%, #fff );
	background: #f5f8ff;
	color: var(--bf-field-text, #1f2937);
}

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

.boldform-sr-panel__title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px;
}

.boldform-sr-panel__body {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
}

.boldform-sr-panel__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
	flex-wrap: wrap;
}

.boldform-sr-panel__link {
	flex: 1 1 220px;
	min-width: 0;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--bf-field-text, #1f2937);
	background: #fff;
	border: 1px solid var(--bf-field-border, #cbd5e1);
	border-radius: var(--bf-field-radius, 8px);
}

.boldform-sr-panel__copy {
	flex: 0 0 auto;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--bf-button-bg, #2563eb);
	border: 1px solid var(--bf-button-bg, #2563eb);
	border-radius: var(--bf-field-radius, 8px);
	cursor: pointer;
}

.boldform-sr-panel__copy:hover,
.boldform-sr-panel__copy:focus {
	filter: brightness( 0.95 );
	outline: none;
}

.boldform-sr-panel__note {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--bf-label-color, #475569);
}

/* Error state. */
.boldform-sr-panel--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
	font-size: 14px;
}