/**
 * Language Detection Module widget styles.
 *
 * Interactive lead-gen tool converted from the design component (task-146).
 * State is driven by the [data-phase] attribute on .bl-ld:
 *   idle | listening | analyzing | result | locked
 */

.bl-ld {
	--bl-ld-accent: #1462f0;
	--bl-ld-accent-2: #82c5bf;
	--bl-ld-navy: #0e2147;
	/* Hover/active navy — matches the site's own dark button background. */
	--bl-ld-navy-deep: #051e4d;
	--bl-ld-ink: #33456a;
	--bl-ld-muted: #5a6b88;
	--bl-ld-danger: #e0483d;
	--bl-ld-success: #16a37b;

	/* Section background. Exposed in the editor as three colour stops (Style >
	   Colors); the flat-colour control overrides the whole shorthand below. */
	--bl-ld-bg-1: #eef3ff;
	--bl-ld-bg-2: #f4f0ff;
	--bl-ld-bg-3: #eafcff;

	box-sizing: border-box;
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	background: radial-gradient(120% 120% at 15% 0%, var(--bl-ld-bg-1) 0%, var(--bl-ld-bg-2) 42%, var(--bl-ld-bg-3) 100%);
	padding: 32px 40px;
	display: flex;
	align-items: center;
	justify-content: center;

	/* Break the gradient out to full viewport width even inside a boxed
	   Elementor section/column (which otherwise clips it to the content width).

	   `100vw` includes the scrollbar, so a plain `calc(50% - 50vw)` makes this
	   ~15px wider than the visible area and forces a horizontal scrollbar on the
	   whole page (measured: scrollWidth 2253 vs clientWidth 2245, nothing clips
	   it). --bl-ld-sbw is published by the widget JS and subtracts the scrollbar,
	   so the element is exactly documentElement.clientWidth wide, flush at both
	   edges. The 0px fallback keeps the old behaviour if the JS has not run. */
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw + var(--bl-ld-sbw, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--bl-ld-sbw, 0px) / 2);
}

.bl-ld *,
.bl-ld *::before,
.bl-ld *::after {
	box-sizing: inherit;
}

.bl-ld a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- shell */
.bl-ld__shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 32px;
	padding: 14px;
	box-shadow: 0 40px 90px -50px rgba(21, 38, 88, 0.45);
}

/* Three cells: copy (top-left), meter (bottom-left), panel (spans both rows).
   The meter is its own grid item — NOT nested in the left column — so the
   mobile layout can place it after the tool. */
.bl-ld__grid {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	grid-template-rows: 1fr auto;
	grid-template-areas:
		'left  panel'
		'meter panel';
	gap: 14px;
}

/* ----------------------------------------------------------------- left */
.bl-ld__left {
	grid-area: left;
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bl-ld__headline {
	margin: 0 0 16px;
	font-size: 42px;
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--bl-ld-navy);
}

.bl-ld__subhead {
	margin: 0 0 24px;
	font-size: 16.5px;
	line-height: 1.6;
	color: #4a5a78;
}

.bl-ld__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* CTAs (shared) */
.bl-ld__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding: 0 26px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease, color 0.2s ease;
}

/* Solid brand blue; hover goes to the dark navy used by the site's own
   buttons. No gradient, no brightness filter. */
.bl-ld__cta--primary {
	background: var(--bl-ld-accent);
	color: #fff;
	box-shadow: 0 16px 30px -16px rgba(20, 98, 240, 0.75);
}

.bl-ld__cta--primary:hover,
.bl-ld__cta--primary:focus-visible {
	background: var(--bl-ld-navy-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 20px 36px -14px rgba(5, 30, 77, 0.6);
}

/* "Learn More" under the copy — mirrors the site's own button geometry
   (18px / 12px 24px / radius 3px / 0.3s) rather than the in-tool pill shape. */
.bl-ld__cta--text {
	height: auto;
	padding: 12px 24px;
	border-radius: 3px;
	font-size: 18px;
	font-weight: 500;
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.18s ease;
}

.bl-ld__cta--secondary {
	background: #eef2f8;
	border: 1px solid rgba(14, 33, 71, 0.08);
	color: #000;
}

.bl-ld__cta--secondary:hover,
.bl-ld__cta--secondary:focus-visible {
	background: #e3e9f3;
	color: #000;
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -14px rgba(14, 33, 71, 0.35);
}

/* The CTAs are <a> tags; the theme/Elementor global link colour (set with
   !important) otherwise wins and re-colours the button text — the white primary
   label then vanishes against the dark half of the gradient. Force the button
   text colours with high specificity so no global link rule can win:
   primary = white, secondary = black. */
.bl-ld a.bl-ld__cta.bl-ld__cta--primary,
.bl-ld a.bl-ld__cta.bl-ld__cta--primary:hover,
.bl-ld a.bl-ld__cta.bl-ld__cta--primary:focus-visible {
	color: #fff !important;
}

.bl-ld a.bl-ld__cta.bl-ld__cta--secondary,
.bl-ld a.bl-ld__cta.bl-ld__cta--secondary:hover,
.bl-ld a.bl-ld__cta.bl-ld__cta--secondary:focus-visible {
	color: #000 !important;
}

/* usage meter */
.bl-ld__meter {
	grid-area: meter;
	margin: 0 36px 36px;
	padding: 16px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(14, 33, 71, 0.07);
}

.bl-ld__meter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 11px;
	gap: 12px;
}

.bl-ld__meter-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7385a3;
}

.bl-ld__meter-count {
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--bl-ld-accent-2);
}

.bl-ld__meter-count.is-low {
	color: var(--bl-ld-danger);
}

.bl-ld__meter-count.is-out {
	color: var(--bl-ld-accent);
}

.bl-ld__meter-dots {
	display: flex;
	gap: 5px;
}

.bl-ld__dot {
	flex: 1;
	height: 7px;
	border-radius: 999px;
	background: #e0e6f1;
}

.bl-ld__dot.is-on {
	background: var(--bl-ld-accent);
}

/* ---------------------------------------------------------------- panel */
.bl-ld__panel {
	background: #ffffff;
	border-radius: 22px;
	border: 1px solid rgba(14, 33, 71, 0.06);
	box-shadow: 0 24px 60px -40px rgba(21, 38, 88, 0.5);
	padding: 26px 28px 28px;
	display: flex;
	flex-direction: column;
	min-height: 472px;
}

/* NOTE: the chip row above the stage (tool chip + status pill) was removed
   from the markup by request; its styles went with it. */

/* ---------------------------------------------------------------- stage */
.bl-ld__stage {
	position: relative;
	flex: 1;
	margin: 14px 0 20px;
	border-radius: 16px;
	background: linear-gradient(180deg, #fbfcff, #f4f7fe);
	border: 1px solid rgba(14, 33, 71, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.bl-ld__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* phase blocks: only the one matching [data-phase] shows */
.bl-ld__phase {
	position: relative;
	z-index: 2;
	text-align: center;
	animation: bl-fade-up 0.42s ease;
}

.bl-ld__idle,
.bl-ld__listening,
.bl-ld__analyzing,
.bl-ld__result,
.bl-ld__error,
.bl-ld__locked {
	margin: 0 20px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 8px 24px -12px rgba(14, 33, 71, 0.4);
}

.bl-ld__idle {
	padding: 14px 26px;
}

.bl-ld__listening {
	width: 100%;
	max-width: 340px;
	padding: 16px 26px;
}

.bl-ld__analyzing {
	padding: 20px 30px;
}

.bl-ld__result {
	padding: 16px 30px;
}

.bl-ld__error {
	padding: 18px 30px;
}

.bl-ld__error-icon {
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fdeeed;
	color: var(--bl-ld-danger);
}

.bl-ld__error-body {
	margin: 8px auto 0;
	max-width: 40ch;
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--bl-ld-muted);
}

.bl-ld__locked {
	width: calc(100% - 40px);
	max-width: 440px;
	padding: 22px 28px;
}

.bl-ld__phase-title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--bl-ld-navy);
}

.bl-ld__phase-sub {
	margin: 8px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bl-ld-muted);
}

/* listening */
.bl-ld__listening .bl-ld__phase-sub {
	margin: 7px 0 12px;
}

.bl-ld__progress {
	height: 8px;
	border-radius: 999px;
	background: #e7ecf6;
	overflow: hidden;
}

.bl-ld__progress-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bl-ld-accent-2), var(--bl-ld-accent));
	transition: width 0.95s linear;
}

.bl-ld__countdown {
	margin: 9px 0 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bl-ld-navy);
	font-variant-numeric: tabular-nums;
}

/* analyzing */
.bl-ld__analyzing .bl-ld__phase-title {
	font-size: 16px;
}

.bl-ld__analyzing .bl-ld__phase-sub {
	margin: 6px 0 0;
	font-size: 13px;
}

.bl-ld__spinner {
	width: 38px;
	height: 38px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 3px solid rgba(20, 98, 240, 0.18);
	border-top-color: var(--bl-ld-accent);
	animation: bl-spin 0.8s linear infinite;
}

/* result */
.bl-ld__result-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8394b0;
	margin-bottom: 6px;
}

.bl-ld__result-lang {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.bl-ld__result-name {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bl-ld-navy);
}

.bl-ld__result-native {
	font-size: 17px;
	font-weight: 500;
	color: #8394b0;
}

/* locked */
.bl-ld__locked-icon {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--bl-ld-accent-2), var(--bl-ld-accent) 55%, var(--bl-ld-accent));
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(20, 98, 240, 0.7);
}

.bl-ld__locked .bl-ld__phase-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.bl-ld__locked-body {
	margin: 0 auto;
	max-width: 38ch;
	font-size: 14px;
	line-height: 1.55;
	color: #7385a3;
}

/* --------------------------------------------------------- mic control */
.bl-ld__mic {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 0 22px;
	height: 56px;
	border-radius: 16px;
	border: 0;
	background: var(--bl-ld-navy);
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 18px 34px -16px rgba(14, 33, 71, 0.7);
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.25s ease, filter 0.2s ease;
}

.bl-ld__mic:not([disabled]):hover,
.bl-ld__mic:not([disabled]):focus-visible {
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 22px 40px -16px rgba(14, 33, 71, 0.8);
}

.bl-ld__mic-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bl-ld__mic-icon svg {
	position: relative;
}

.bl-ld__mic-ring {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	opacity: 0;
}

/* --------------------------------------------------- result controls */
.bl-ld__controls-result,
.bl-ld__controls-error {
	text-align: center;
	animation: bl-fade-up 0.5s ease;
}

.bl-ld__interpreter-q {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bl-ld-navy);
}

.bl-ld__result-actions {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.bl-ld__result-yes {
	flex: 1;
}

/* "No, detect again" — outline variant of the primary button. */
.bl-ld__result-no {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	border-radius: 14px;
	border: 1.5px solid var(--bl-ld-accent);
	background: #fff;
	color: var(--bl-ld-accent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bl-ld__result-no:hover,
.bl-ld__result-no:focus-visible {
	background: var(--bl-ld-navy-deep);
	border-color: var(--bl-ld-navy-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 22px -14px rgba(5, 30, 77, 0.45);
}

.bl-ld__result-usage {
	margin: 11px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #8394b0;
}

/* --------------------------------------------------- locked controls */
.bl-ld__controls-locked {
	flex-direction: column;
	gap: 10px;
	animation: bl-fade-up 0.5s ease;
}

.bl-ld__locked-primary {
	width: 100%;
	height: 56px;
	border-radius: 16px;
	font-size: 15.5px;
	box-shadow: 0 18px 34px -16px rgba(20, 98, 240, 0.8);
}

.bl-ld__locked-secondary {
	width: 100%;
	height: auto;
	padding: 13px;
	background: #f4f6fb;
	border: 1px solid rgba(14, 33, 71, 0.08);
	color: var(--bl-ld-ink);
	font-size: 14px;
}

.bl-ld__locked-secondary:hover,
.bl-ld__locked-secondary:focus-visible {
	background: #e3e9f3;
	color: var(--bl-ld-navy);
}

/* ---------------------------------------------- phase-driven visibility */
.bl-ld__phase,
.bl-ld__mic,
.bl-ld__controls-result,
.bl-ld__controls-error,
.bl-ld__controls-locked {
	display: none;
}

.bl-ld[data-phase='idle'] .bl-ld__idle,
.bl-ld[data-phase='listening'] .bl-ld__listening,
.bl-ld[data-phase='analyzing'] .bl-ld__analyzing,
.bl-ld[data-phase='result'] .bl-ld__result,
.bl-ld[data-phase='error'] .bl-ld__error,
.bl-ld[data-phase='locked'] .bl-ld__locked {
	display: block;
}

.bl-ld[data-phase='idle'] .bl-ld__mic,
.bl-ld[data-phase='listening'] .bl-ld__mic {
	display: inline-flex;
}

.bl-ld[data-phase='result'] .bl-ld__controls-result,
.bl-ld[data-phase='error'] .bl-ld__controls-error {
	display: block;
}

.bl-ld[data-phase='locked'] .bl-ld__controls-locked {
	display: flex;
}

/* recording state on the mic button + pulse ring */
.bl-ld[data-phase='listening'] .bl-ld__mic {
	background: var(--bl-ld-danger);
	cursor: default;
}

.bl-ld[data-phase='listening'] .bl-ld__mic-ring {
	animation: bl-pulse-ring 1.6s ease-out infinite;
}

/* --------------------------------------------------------------- keyframes */
@keyframes bl-pulse-ring {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	70% {
		transform: scale(1.9);
		opacity: 0;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

@keyframes bl-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bl-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --------------------------------------------------------------- responsive */

/* Desktop only: with the left CTA switched off the copy no longer fills the
   'left' row, leaving a hole between the copy and the usage meter.

   The panel carries no `grid-area`, so it is AUTO-PLACED into row 1 instead of
   the two-row 'panel' area the template declares — which is what forces row 1
   to the panel's full height and creates the hole. Putting it in its declared
   area lets row 1 size to the copy, so row 2 takes the slack and the meter no
   longer sits in a hole below the text. The panel then STRETCHES across both
   rows and the meter is pinned to the bottom of row 2, so the two columns end on
   the same line at any width — the left column is naturally taller than the
   panel, and by how much depends on how the copy wraps.
   Measured: gap below copy 139px -> 54px; meter bottom vs panel bottom was off
   by 7px @1920, 61px @1100, 113px @900 -> 0px at all three.

   Scoped to >=881px (mobile already stacks the meter last) and to the no-CTA
   case, so the approved CTA-on layout is untouched. */
@media (min-width: 881px) {
	.bl-ld--no-left-cta .bl-ld__grid {
		grid-template-rows: auto 1fr;
	}

	.bl-ld--no-left-cta .bl-ld__panel {
		grid-area: panel;
	}

	/* The meter sits directly under the copy instead of being pinned to the
	   bottom of the column. Dropping the left column's bottom padding closes
	   the measured gap under the subhead from 79px to 39px. The panel spans
	   both grid rows, so it shortens by the same 40px and the meter's bottom
	   stays level with the panel's - the 18 Aug alignment request still holds
	   (measured 0px offset after the change). Margins go 36px -> 43px so the
	   box is 7px narrower on each side (394px -> 380px @1920) while staying
	   centred in the column (measured centre offset 0px). */
	.bl-ld--no-left-cta .bl-ld__left {
		padding-bottom: 0;
	}

	.bl-ld--no-left-cta .bl-ld__meter {
		align-self: start;
		margin: 0 43px;
	}
}

/* Headline steps for narrow desktops.

   The headline renders at 52px here, NOT the 42px set above: a theme/Elementor
   rule outranks a bare `.bl-ld__headline`, so these overrides need the `.bl-ld`
   ancestor to win (verified — a single-class rule is ignored, no !important
   needed). Below ~1200px it wraps to 4 lines and the copy column outgrows the
   tool panel, which then has to stretch to stay even with it: measured +61px at
   1100 and +113px at 950. Stepping the size down keeps both columns compact.
   Measured after: panel back to its natural 472px at 1100, 488px at 950. */
@media (min-width: 1025px) and (max-width: 1200px) {
	.bl-ld .bl-ld__headline {
		font-size: 46px;
	}
}

@media (min-width: 881px) and (max-width: 1024px) {
	.bl-ld .bl-ld__headline {
		font-size: 38px;
	}
}

@media (max-width: 880px) {
	.bl-ld {
		padding: 28px 16px;
	}

	/* Single column, and the usage meter moves BELOW the tool. */
	.bl-ld__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			'left'
			'panel'
			'meter';
	}

	.bl-ld__left {
		padding: 28px 24px 4px;
	}

	.bl-ld__meter {
		margin: 0 4px 4px;
	}

	.bl-ld__headline {
		font-size: 32px;
	}

	/* Mobile users act on the buttons inside the tool, so the text CTA is
	   hidden entirely rather than stacked above the panel. */
	.bl-ld__ctas {
		display: none;
	}
}

@media (max-width: 420px) {
	.bl-ld__panel {
		padding: 20px 18px 22px;
	}

	.bl-ld__result-name {
		font-size: 28px;
	}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bl-ld__phase,
	.bl-ld__controls-result,
	.bl-ld__controls-locked {
		animation: none;
	}

	.bl-ld__spinner {
		animation-duration: 1.6s;
	}

	.bl-ld[data-phase='listening'] .bl-ld__mic-ring {
		animation: none;
	}

	.bl-ld__progress-bar {
		transition: none;
	}

	/* no motion on hover — keep the colour/shadow change, drop the lift */
	.bl-ld__cta:hover,
	.bl-ld__cta:focus-visible,
	.bl-ld__mic:not([disabled]):hover,
	.bl-ld__mic:not([disabled]):focus-visible,
	.bl-ld__result-no:hover,
	.bl-ld__result-no:focus-visible {
		transform: none;
	}
}