.lt-google-hidden,
#google_translate_element {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

body {
	top: 0 !important;
}

.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate > iframe {
	display: none !important;
	visibility: hidden !important;
}

.goog-tooltip,
.goog-tooltip:hover {
	display: none !important;
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/*
 * This widget renders inside menus belonging to unknown themes, some of
 * which apply broad !important resets to elements. The !important on our
 * own rules below is what lets them win regardless of load order. Note the
 * label/flag-stack deliberately use plain block layout + text-align rather
 * than flexbox -- nested flex items were found (on a live client site) to
 * silently collapse to zero width under a conflicting rule, even with
 * matching !important. Block + text-align has no such failure mode.
 */
.lt-widget {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	position: relative !important;
	z-index: 10;
}

.lt-widget.lt-align-center {
	justify-content: center;
	width: 100%;
}

.lt-widget.lt-align-right {
	justify-content: flex-end;
	width: 100%;
}

.lt-picker {
	position: relative;
	display: inline-flex !important;
}

.lt-flag-btn {
	display: inline-flex !important;
	align-items: flex-start !important;
	gap: var(--lt-gap, 8px) !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 6px;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	padding: var(--lt-pad-t, 4px) var(--lt-pad-r, 4px) var(--lt-pad-b, 4px) var(--lt-pad-l, 4px);
	transition: transform .15s ease, border-color .15s ease;
}

.lt-dropdown .lt-flag-btn {
	background: #fff !important;
	background-color: #fff !important;
}

.lt-flag-stack {
	display: block !important;
	text-align: center !important;
}

.lt-flag-label {
	display: block !important;
	margin: 3px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	font-size: 11px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	line-height: 1.2 !important;
	/* No custom color is set unless the admin explicitly turns one on (see
	   class-lt-shortcode.php), so this falls back to "inherit" -- matching
	   whatever color the surrounding menu text already uses. */
	color: var(--lt-color-desktop, inherit) !important;
	white-space: nowrap !important;
}

/* The dropdown panel has its own solid white background (deterministic,
   unlike the trigger button which sits on whatever the menu's background
   is), so inheriting the page's color here would risk invisible text again
   if that inherited color happens to be light. Default to a safe dark
   color instead, still overridable by the same custom-color setting. */
.lt-dropdown .lt-flag-label {
	color: var(--lt-color-desktop, #222) !important;
}

.lt-label-mobile {
	display: none !important;
}

.lt-chevron {
	display: block !important;
	width: calc(var(--lt-size, 32px) * 0.35) !important;
	height: auto !important;
	/* Vertically centers the arrow against the flag image specifically
	   (not the flag+label stack as a whole -- the button uses
	   align-items:flex-start so this margin is what does the centering). */
	margin-top: calc(var(--lt-size, 32px) * 0.16) !important;
	color: var(--lt-color-desktop, inherit) !important;
	opacity: .8;
	flex-shrink: 0;
}

/* Below this width, the label switches from the dynamic "English"/"Spanish"
   text to the shorter, static word "Language" so it fits alongside the
   site's own mobile menu chrome (adjust this value if your theme's mobile
   breakpoint differs). This block must stay AFTER the unconditional
   .lt-flag-label / .lt-chevron rules above -- at equal specificity, source
   order decides the winner, so if it were moved earlier the unconditional
   desktop-color rules would win even on mobile. */
@media (max-width: 1024px) {
	.lt-label-desktop {
		display: none !important;
	}

	.lt-label-mobile {
		display: block !important;
	}

	.lt-flag-label {
		color: var(--lt-color-mobile, inherit) !important;
	}

	.lt-dropdown .lt-flag-label {
		color: var(--lt-color-mobile, #222) !important;
	}

	.lt-chevron {
		color: var(--lt-color-mobile, inherit) !important;
	}

	/* The floating button (printed straight into <body> via wp_footer, see
	   class-lt-frontend.php) lives completely outside the theme's menu
	   markup, so none of the theme's menu/off-canvas CSS can reach it. Any
	   widget copies embedded inside an actual menu are hidden here in favor
	   of it -- they're the ones prone to being hidden/distorted by mobile
	   menu styles. This only applies below the breakpoint; on desktop the
	   in-menu widget(s) still display normally. */
	.lt-widget {
		display: none !important;
	}

	.lt-floating-mobile {
		display: block !important;
		position: fixed !important;
		bottom: 16px !important;
		right: 16px !important;
		z-index: 999998 !important;
		background: #fff !important;
		border-radius: 12px !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
		padding: 4px !important;
	}

	.lt-floating-mobile .lt-widget {
		display: inline-flex !important;
	}
}

.lt-floating-mobile {
	display: none;
}

/* Once opened, the dropdown is moved to <body> (see lt-frontend.js) to escape
   transformed ancestors. */
.lt-dropdown {
	position: fixed !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--lt-gap, 8px) !important;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 8px;
	margin: 0;
	list-style: none;
}

.lt-dropdown[hidden] {
	display: none !important;
}

.lt-flag-btn:hover,
.lt-flag-btn:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(0, 0, 0, 0.15);
	outline: none;
}

.lt-flag-stack img {
	display: block !important;
	margin: 0 auto !important;
	width: var(--lt-size, 32px);
	height: auto;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.lt-shape-rounded .lt-flag-stack img {
	border-radius: 4px;
}

.lt-shape-square .lt-flag-stack img {
	border-radius: 0;
}

.lt-shape-circle .lt-flag-stack img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}