/**
 * WDF Language Detector — redirect suggestion popover.
 *
 * A white card anchored below the language-selector globe icon, with a caret
 * pointing up at the trigger. Accent colour inherits the site's primary brand
 * colour (the amber "Buy now" / globe colour on WDF sites) and can be overridden
 * via the --wdf-ld-accent custom property.
 */

.wdf-ld {
	/* Brand tokens: theme.json (settings.custom.ld.*) → primary preset → hard default. */
	--wdf-ld-accent: var( --wp--custom--ld--accent, var( --wp--preset--color--primary, #6f6f6f ) );
	--wdf-ld-accent-contrast: var( --wp--custom--ld--accent-contrast, var( --wp--preset--color--white, #ffffff ) );
	--wdf-ld-text: var( --wp--custom--ld--text, #000000 );
	--wdf-ld-strong: var( --wp--custom--ld--strong, #000000 );
	--wdf-ld-bg: var( --wp--custom--ld--bg, #ffffff );
	--wdf-ld-radius: var( --wp--custom--ld--radius, 0.5rem );
	--wdf-ld-max-width: var( --wp--custom--ld--max-width, 460px );
	--wdf-ld-shadow: var( --wp--custom--ld--shadow, 0 0.5rem 2.5rem rgba( 0, 0, 0, 0.16 ) );

	position: fixed;
	z-index: 100000;
	box-sizing: border-box;
	width: max-content;
	max-width: var( --wdf-ld-max-width );
	padding: 1.75rem;
	background: var( --wdf-ld-bg );
	border-radius: var( --wdf-ld-radius );
	box-shadow: var( --wdf-ld-shadow );

	opacity: 0;
	transform: translateY( -0.5rem );
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.wdf-ld.is-open {
	opacity: 1;
	transform: translateY( 0 );
	visibility: visible;
	pointer-events: auto;
}

.wdf-ld *,
.wdf-ld *::before,
.wdf-ld *::after {
	box-sizing: border-box;
}

/* Upward caret pointing at the trigger. */
.wdf-ld__caret {
	position: absolute;
	top: -0.5rem;
	left: 50%;
	width: 1rem;
	height: 1rem;
	background: var( --wdf-ld-bg );
	transform: translateX( -50% ) rotate( 45deg );
	box-shadow: var( --wdf-ld-shadow );
}

.wdf-ld__text {
	margin: 0 0 1rem;
	color: var( --wdf-ld-text );
	font-size: 1rem;
	line-height: 1.5;
}

.wdf-ld__text:last-of-type {
	margin-bottom: 1.5rem;
}

.wdf-ld__text strong {
	color: var( --wdf-ld-strong );
	font-weight: 700;
}

.wdf-ld__actions {
	display: flex;
	gap: 1rem;
}

/*
 * Actions are emitted as core button-block markup (.wp-block-button >
 * .wp-block-button__link) so each site's is-style-fill / is-style-outline
 * button styles apply.
 */
.wdf-ld__btn {
	flex: 1 1 0;
	margin: 0;
}

.wdf-ld__btn .wp-block-button__link {
	width: 100%;
	text-decoration: none;
	cursor: pointer;
}

/* Fallback layout when no visible trigger is found (e.g. mobile header). */
.wdf-ld--floating {
	top: 1rem !important;
	right: 50% !important;
	transform: translateX( 50% ) translateY( -0.5rem );
	width: calc( 100vw - 2rem );
	max-width: var( --wdf-ld-max-width );
}

.wdf-ld--floating.is-open {
	transform: translateX( 50% ) translateY( 0 );
}

.wdf-ld--floating .wdf-ld__caret {
	display: none;
}

@media ( max-width: 600px ) {
	.wdf-ld {
		padding: 1.5rem;
	}

	.wdf-ld__text {
		font-size: 1rem;
	}
}