/* Auto Multilingual Translator — switcher styling */

.amlt-bar {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0;
	padding: 6px 16px;
	min-height: 0;
	font-size: 14px;
	line-height: 1.2;
}

.amlt-bar-header {
	background: #1f2937;
	color: #f9fafb;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
}

.amlt-bar-footer {
	background: #111827;
	color: #f9fafb;
	border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	justify-content: center;
}

.amlt-bar-inline,
.amlt-bar-widget {
	padding: 4px 0;
	justify-content: flex-start;
}

.amlt-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	flex-wrap: nowrap;
	max-width: 100%;
}

.amlt-status {
	display: inline-block;
	max-width: 240px;
	font-size: 12px;
	line-height: 1.3;
	color: currentColor;
	opacity: .82;
	white-space: normal;
}

.amlt-status[data-state="error"] {
	color: #b91c1c;
	font-weight: 600;
	opacity: 1;
}

.amlt-status[data-state="translated"] {
	color: #15803d;
	opacity: 1;
}

/* ---- dropdown style ---- */

.amlt-dd-label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.amlt-globe,
.amlt-dd-label .amlt-globe {
	font-size: 16px;
	line-height: 1;
}

.amlt-select {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	height: 34px;
	line-height: 1.2;
	margin: 0;
	background-color: #ffffff;
	color: #111827;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	/* room for the globe icon (left) and the chevron (right) */
	padding: 5px 30px 5px 34px;
	font-size: 14px;
	cursor: pointer;
	min-width: 150px;
	max-width: 240px;
	/* two icons baked into the control: globe on the left, chevron on the right */
	background-image:
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>" ),
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>" );
	background-repeat: no-repeat, no-repeat;
	background-position: left 10px center, right 10px center;
}

.amlt-select:focus {
	outline: 2px solid #3b82f6;
	outline-offset: 1px;
}

/* ---- flags / button style ---- */

.amlt-style-flags {
	gap: 4px;
}

.amlt-lang {
	background: rgba( 255, 255, 255, 0.12 );
	color: inherit;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background 0.15s ease;
}

.amlt-bar-inline .amlt-lang,
.amlt-bar-widget .amlt-lang {
	background: #f3f4f6;
	color: #111827;
	border-color: #d1d5db;
}

.amlt-lang:hover {
	background: rgba( 255, 255, 255, 0.25 );
}

.amlt-lang.amlt-active {
	background: #3b82f6;
	border-color: #3b82f6;
	color: #fff;
}

.amlt-lang:focus-visible,
.amlt-consent-btn:focus-visible {
	outline: 2px solid #93c5fd;
	outline-offset: 2px;
}

.amlt-flag {
	font-size: 15px;
	line-height: 1;
}

/* ---- agency credit ---- */

.amlt-credit {
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	color: inherit;
	opacity: 0.7;
	margin-left: 14px;
	white-space: nowrap;
}

.amlt-credit:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ---- spinner ---- */

.amlt-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 128, 128, 128, 0.35 );
	border-top-color: #3b82f6;
	border-radius: 50%;
	display: none;
}

.amlt-switcher.amlt-loading .amlt-spinner {
	display: inline-block;
	animation: amlt-spin 0.7s linear infinite;
}

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

/* =======================================================================
   Theme-compatibility hardening
   Themes and page builders (Elementor, Divi, WPBakery, ThemeForest/Envato
   templates, etc.) often style select / button / a / label / * very
   aggressively. These rules stop any theme from distorting the switcher,
   while the component styles above still define how it looks. Everything is
   namespaced to .amlt-* so the theme itself is never affected.
   ======================================================================= */

.amlt-bar,
.amlt-bar * {
	box-sizing: border-box !important;
	font-family: inherit;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	float: none !important;
	max-width: none !important;
	max-height: none !important;
}

.amlt-bar-header,
.amlt-bar-footer {
	position: relative;
	z-index: 9999;
	margin: 0 !important;
	transform: none !important;
	border-radius: 0 !important;
}

.amlt-switcher .amlt-select {
	display: inline-block !important;
	width: auto !important;
	min-width: 150px !important;
	height: 34px !important;
	margin: 0 !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-indent: 0 !important;
	vertical-align: middle !important;
	box-shadow: none !important;
	text-transform: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 5px 30px 5px 34px !important;
	background-color: #ffffff !important;
	color: #111827 !important;
	background-image:
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>" ),
		url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>" ) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: left 10px center, right 10px center !important;
}

.amlt-switcher .amlt-lang {
	display: inline-flex !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	vertical-align: middle !important;
	text-transform: none !important;
}

.amlt-switcher .amlt-dd-label {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}

/* ---- RTL adjustments ---- */

html.amlt-rtl .amlt-bar {
	direction: rtl;
}

/* Mirror the icons for right-to-left: globe on the right, chevron on the left. */
html.amlt-rtl .amlt-select {
	padding: 5px 34px 5px 30px !important;
	background-position: right 10px center, left 10px center !important;
}

/* ---- hide Google Translate's own UI (we drive it with our switcher) ---- */

.amlt-hidden-widget,
#google_translate_element {
	display: none !important;
}

/* Google injects a top banner iframe and pushes <body> down — neutralise it. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
	display: none !important;
	visibility: hidden !important;
}

/* Only counter Google's body offset while a translation is active. We add the
   `amlt-translated` class to <body> exactly when a language is applied, so on a
   normal (untranslated) page this plugin does NOT touch <body> at all. */
body.amlt-translated {
	top: 0 !important;
}

/* Kill the hover tooltip / balloon and the highlight box on translated text. */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
	display: none !important;
}

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

/* ---- responsive: tablets ---- */
@media ( max-width: 782px ) {
	.amlt-bar {
		padding: 6px 12px;
		gap: 6px 10px;
	}
	.amlt-select {
		max-width: 190px;
	}
}

/* ---- responsive: phones ---- */
@media ( max-width: 600px ) {
	.amlt-bar {
		padding: 5px 10px;
		font-size: 13px;
	}
	.amlt-bar-header,
	.amlt-bar-footer {
		justify-content: center;
	}
	.amlt-select {
		height: 32px;
		font-size: 13px;
		padding: 4px 26px 4px 8px;
		max-width: 62vw;
	}
	.amlt-credit {
		flex-basis: 100%;
		text-align: center;
		margin-left: 0;
		margin-top: 2px;
	}
	/* Flag/button style: allow wrapping and let it scroll if very long. */
	.amlt-style-flags {
		flex-wrap: wrap;
		justify-content: center;
	}
		.amlt-style-flags .amlt-lang {
			font-size: 12px;
			padding: 3px 6px;
		}
		.amlt-status {
			flex-basis: 100%;
			max-width: 100%;
			text-align: center;
		}
	}

/* =======================================================================
   Consent notice (GDPR / ePrivacy) — shown only when the admin enables it.
   Namespaced + hardened like the switcher so no theme can distort it.
   ======================================================================= */

.amlt-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2147483000;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	margin: 0;
	padding: 14px 18px;
	background: #111827;
	color: #f9fafb;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.25 );
}

.amlt-consent,
.amlt-consent * {
	box-sizing: border-box !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	float: none !important;
	font-family: inherit;
}

.amlt-consent-text {
	max-width: 760px;
}

.amlt-consent-actions {
	display: inline-flex;
	gap: 10px;
	flex: 0 0 auto;
}

.amlt-consent-btn {
	cursor: pointer;
	border: 0;
	border-radius: 6px;
	padding: 8px 16px;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	font-size: 14px;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}

.amlt-consent-accept {
	background: #3b82f6 !important;
	color: #ffffff !important;
}

.amlt-consent-accept:hover {
	background: #2563eb !important;
}

.amlt-consent-decline {
	background: transparent !important;
	color: #cbd5e1 !important;
	border: 1px solid rgba( 255, 255, 255, 0.35 ) !important;
}

.amlt-consent-decline:hover {
	color: #ffffff !important;
	border-color: #ffffff !important;
}

@media ( max-width: 600px ) {
		.amlt-consent {
		padding: 12px 14px;
		font-size: 13px;
	}
	.amlt-consent-actions {
		width: 100%;
		justify-content: center;
	}
}