/*
 * WolfWeb Toolkit – language switcher.
 *
 * Colors and sizes come from CSS custom properties, set from
 * WolfWeb Toolkit → Language switcher (on :root) and overridable per element:
 * --ti-text, --ti-bg, --ti-hover-text, --ti-hover-bg, --ti-active-text,
 * --ti-active-bg, --ti-panel-bg, --ti-border, --ti-radius, --ti-font-size,
 * --ti-flag, --ti-offset, --ti-gap.
 */

.ti-switcher {
	display: flex;
	justify-content: var(--ti-align, flex-start);
	font-size: var(--ti-font-size, inherit);
	line-height: 1.3;
}
.ti-switcher__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ti-gap, 6px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ti-switcher__item {
	margin: 0;
	padding: 0;
}
/*
 * The selectors are deliberately stronger than the theme's global link and
 * button styles (e.g. Elementor's ".elementor-kit-N button" / "a"), so the
 * switcher keeps its own look. Elementor widget controls ({{WRAPPER}} …)
 * are more specific still and keep working.
 */
.ti-switcher .ti-switcher__link,
.ti-switcher button.ti-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: .35em .6em;
	color: var(--ti-text, inherit);
	background-color: var(--ti-bg, transparent);
	background-image: none;
	border: 1px solid var(--ti-border, transparent);
	border-radius: var(--ti-radius, 4px);
	box-shadow: none;
	text-shadow: none;
	font: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.ti-switcher .ti-switcher__link:hover,
.ti-switcher .ti-switcher__link:focus-visible,
.ti-switcher button.ti-switcher__toggle:hover,
.ti-switcher button.ti-switcher__toggle:focus,
.ti-switcher button.ti-switcher__toggle:focus-visible {
	color: var(--ti-hover-text, var(--ti-text, inherit));
	background-color: var(--ti-hover-bg, var(--ti-bg, rgba(127, 127, 127, .12)));
	background-image: none;
	border-color: var(--ti-border, transparent);
	box-shadow: none;
	text-decoration: none;
}
.ti-switcher__item.is-current .ti-switcher__link {
	color: var(--ti-active-text, var(--ti-text, inherit));
	background-color: var(--ti-active-bg, var(--ti-bg, transparent));
	font-weight: 600;
}
.ti-switcher--vertical .ti-switcher__list {
	flex-direction: column;
	align-items: flex-start;
}

/* Flags */
.ti-switcher__flag {
	display: block;
	flex: none;
	width: var(--ti-flag, 20px);
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* Dropdown */
.ti-switcher--dropdown {
	position: relative;
	display: inline-flex;
}
.ti-switcher--dropdown .ti-switcher__toggle::after {
	content: "";
	display: inline-block;
	margin-left: .1em;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY(2px);
}
.ti-switcher--dropdown .ti-switcher__list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	min-width: 100%;
	margin-top: 4px;
	padding: 4px;
	background: var(--ti-panel-bg, #fff);
	border-radius: var(--ti-radius, 4px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s, visibility .15s;
}
.ti-switcher--dropdown:hover .ti-switcher__list,
.ti-switcher--dropdown:focus-within .ti-switcher__list,
.ti-switcher--dropdown.is-open .ti-switcher__list {
	visibility: visible;
	opacity: 1;
}
.ti-switcher--dropdown .ti-switcher__link {
	display: flex;
	white-space: nowrap;
	color: var(--ti-text, #1e1e1e);
	border-color: transparent;
}

/* Select field */
.ti-switcher--select {
	align-items: center;
	gap: .5em;
}
.ti-switcher__select {
	min-width: 0;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0;
	padding: .35em 2em .35em .6em;
	font: inherit;
	color: var(--ti-text, inherit);
	background-color: var(--ti-bg, transparent);
	border: 1px solid var(--ti-border, currentColor);
	border-radius: var(--ti-radius, 4px);
	cursor: pointer;
}
.ti-switcher__select option {
	color: #1e1e1e;
	background: #fff;
}
.ti-switcher__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Floating switcher */
.ti-switcher--floating {
	position: fixed;
	z-index: 99999;
	padding: 4px;
	color: var(--ti-text, #1e1e1e);
	background: var(--ti-panel-bg, #fff);
	border-radius: calc(var(--ti-radius, 4px) + 4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	--ti-gap: 2px;
}
.ti-switcher--floating .ti-switcher__link,
.ti-switcher--floating .ti-switcher__toggle,
.ti-switcher--floating .ti-switcher__select {
	color: var(--ti-text, #1e1e1e);
}
.ti-switcher--floating .ti-switcher__select {
	border-color: var(--ti-border, transparent);
}
.ti-switcher--pos-bottom-right { right: var(--ti-offset, 20px); bottom: var(--ti-offset, 20px); }
.ti-switcher--pos-bottom-left  { left: var(--ti-offset, 20px);  bottom: var(--ti-offset, 20px); }
.ti-switcher--pos-top-right    { right: var(--ti-offset, 20px); top: var(--ti-offset, 20px); }
.ti-switcher--pos-top-left     { left: var(--ti-offset, 20px);  top: var(--ti-offset, 20px); }

/* Floating dropdown opens upwards at the bottom of the screen. */
.ti-switcher--floating.ti-switcher--dropdown[class*="pos-bottom"] .ti-switcher__list {
	top: auto;
	bottom: 100%;
	margin: 0 0 8px;
}
.ti-switcher--floating.ti-switcher--dropdown[class*="-right"] .ti-switcher__list {
	left: auto;
	right: 0;
}
body.admin-bar .ti-switcher--floating[class*="pos-top"] {
	margin-top: 32px;
}

/* Floating: which devices */
@media (max-width: 767px) {
	.ti-switcher--devices-desktop { display: none !important; }
	/* Side-by-side bar shows only flags on small screens. */
	.ti-switcher--floating.ti-switcher--horizontal .ti-switcher__flag ~ .ti-switcher__name { display: none; }
	.ti-switcher--floating { --ti-offset: 12px; }
}
@media (min-width: 768px) {
	.ti-switcher--devices-mobile { display: none !important; }
}