/**
 * Shared "Did you mean...?" email-typo suggestion widget.
 *
 * Used by Request Catalogue (.ibox-catalog-request-form), Contact Us
 * (.ibox-contact-request-form -- which already reuses the exact same
 * .ibox-catalog-form-field/.ibox-catalog-field-error classes as the
 * Catalogue popup, see css/catalog-popup.css), and the footer
 * Newsletter form (.email-subscription-form).
 *
 * Default styling below matches the light-background field styling
 * already used by the Catalogue popup and Contact Us form. A single
 * dark-background override at the bottom adapts it for the footer
 * Newsletter form, which sits on the site's dark navy footer
 * (background-color: var(--primary) in css/style.css).
 *
 * Hidden by default; revealed only when js/email-typo-suggest.js adds
 * the .is-visible class -- exactly the same show/hide pattern already
 * used by .ibox-catalog-form-message elsewhere in this theme.
 */

.ibox-email-typo-suggest {
	display: none;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	/* Frosted-panel translucency: high-opacity tint of the original
	   solid #FFF6E9, refined per follow-up feedback -- previously a
	   flat, fully solid fill; still isolates the box from whatever
	   sits behind/under it, but now reads as a soft translucent panel
	   rather than a flat opaque block. backdrop-filter is additive
	   (graceful no-op where unsupported -- the rgba alpha alone
	   already keeps background content unreadable through the bar). */
	background-color: rgba(255, 246, 233, 0.93);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	backdrop-filter: blur(6px) saturate(140%);
	border: 1px solid #F6E1BB;
	font-family: inherit;
}

.ibox-email-typo-suggest.is-visible {
	display: block;
}

.ibox-email-typo-suggest__text {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #212121;
}

.ibox-email-typo-suggest__text strong {
	color: #183358;
	font-weight: 700;
	word-break: break-all;
}

.ibox-email-typo-suggest__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ibox-email-typo-suggest__btn {
	display: inline-block;
	border: none;
	background: none;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.2s;
}

.ibox-email-typo-suggest__btn:hover,
.ibox-email-typo-suggest__btn:focus {
	opacity: 0.75;
}

.ibox-email-typo-suggest__btn--accept {
	color: #183358;
}

.ibox-email-typo-suggest__btn--dismiss {
	color: #5b5b5b;
}

/* Footer Newsletter form sits on a dark navy background -- adapt the
   box so it doesn't look like a stray light rectangle against it.
   Tinted dark (rather than white) so raising the opacity for
   readability, per follow-up feedback, still reads as part of the
   dark footer rather than a light patch. */
.email-subscription-form .ibox-email-typo-suggest {
	background-color: rgba(13, 30, 54, 0.78);
	border-color: rgba(255, 255, 255, 0.25);
}

/* IMPORTANT: kept out of normal document flow (absolutely positioned
   against .es-form-field-container, which css/style.css already sets
   to position: relative) so it can never push the field/row layout
   around. That layout already relies on precise positioning -- the
   existing Subscribe button (html .email-subscription-form
   .es-form-field-container input[type=submit] in css/style.css) is
   itself absolutely positioned (top: 0; bottom: 0) against that same
   container to sit centered inside the email field. Letting this box
   participate in normal flow would grow the container and silently
   shift that button -- an unrelated layout change this follow-up must
   not introduce. z-index keeps it above any following content when
   visible. */
.email-subscription-form .ibox-email-typo-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	margin-top: 8px;
}

.email-subscription-form .ibox-email-typo-suggest__text {
	color: #ffffff;
}

.email-subscription-form .ibox-email-typo-suggest__text strong {
	color: #F6921E;
}

.email-subscription-form .ibox-email-typo-suggest__btn--accept {
	color: #F6921E;
}

.email-subscription-form .ibox-email-typo-suggest__btn--dismiss {
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 480px) {
	.ibox-email-typo-suggest__actions {
		flex-direction: column;
		gap: 6px;
	}
}