/*
 * Front-end styles for the language suggestion banner and the language switchers. `zd`
 * is replaced with the neutral class prefix (default `zd`) when the file is published. Logical
 * properties only, so right-to-left pages mirror by themselves.
 */

/*
 * The language switcher (tz-l1..l6). Colours and spacing are custom properties, so a builder's
 * style controls (the block's colour settings, Page Builder Sandwich, Elementor) set them without
 * CSS of their own. The defaults inherit the theme's text colour.
 */
.zd-lsw {
	--zd-lsw-gap: 0.5rem;
	--zd-lsw-radius: 999px;
	--zd-lsw-border-color: currentColor;
	--zd-lsw-active-color: inherit;
	--zd-lsw-active-bg: transparent;
	color: var(--zd-lsw-color, inherit);
	font-size: var(--zd-lsw-font-size, inherit);
}

.zd-lsw__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zd-lsw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zd-lsw--vertical .zd-lsw__list {
	flex-direction: column;
	align-items: flex-start;
}

.zd-lsw__item {
	margin: 0;
}

.zd-lsw__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: inherit;
	text-decoration: none;
}

.zd-lsw__link:hover .zd-lsw__name,
.zd-lsw__link:focus-visible .zd-lsw__name {
	text-decoration: underline;
}

.zd-lsw__link:focus-visible,
.zd-lsw__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.zd-lsw__item--current > .zd-lsw__link {
	color: var(--zd-lsw-active-color);
	background: var(--zd-lsw-active-bg);
	font-weight: 700;
}

.zd-lsw__item--missing > .zd-lsw__link {
	opacity: 0.75;
}

.zd-lsw__flag {
	font-size: 1.15em;
	line-height: 1;
}

.zd-lsw__code {
	text-decoration: none;
	font-variant: all-small-caps;
	letter-spacing: 0.04em;
}

/* Screen-reader-only text (the visible face may be a code or a flag). */
.zd-lsw__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Pills and buttons. */
.zd-lsw--pills .zd-lsw__link,
.zd-lsw--buttons .zd-lsw__link,
.zd-lsw--codes .zd-lsw__link {
	padding-block: 0.3em;
	padding-inline: 0.8em;
	border: 1px solid var(--zd-lsw-border-color);
	border-radius: var(--zd-lsw-radius);
	background: var(--zd-lsw-background, transparent);
}

.zd-lsw--buttons,
.zd-lsw--codes {
	--zd-lsw-radius: 0.3rem;
}

/* The current language: a heavier outline (the theme's own colours stay readable on it). */
.zd-lsw--buttons .zd-lsw__item--current > .zd-lsw__link,
.zd-lsw--pills .zd-lsw__item--current > .zd-lsw__link,
.zd-lsw--codes .zd-lsw__item--current > .zd-lsw__link {
	border-width: 2px;
}

/* The dropdown: a native disclosure. */
.zd-lsw__menu {
	position: relative;
	display: inline-block;
}

.zd-lsw__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding-block: 0.35em;
	padding-inline: 0.8em;
	border: 1px solid var(--zd-lsw-border-color);
	border-radius: 0.3rem;
	background: var(--zd-lsw-background, transparent);
	cursor: pointer;
	list-style: none;
}

.zd-lsw__toggle::-webkit-details-marker {
	display: none;
}

.zd-lsw__toggle::after {
	content: "";
	inline-size: 0.45em;
	block-size: 0.45em;
	margin-inline-start: 0.2em;
	border-block-end: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
}

.zd-lsw__menu[open] > .zd-lsw__toggle::after {
	transform: rotate(225deg);
}

.zd-lsw__menu > .zd-lsw__list {
	position: absolute;
	inset-block-start: calc(100% + 0.25rem);
	inset-inline-start: 0;
	z-index: 99991;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-inline-size: 100%;
	padding-block: 0.25rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.3rem;
	background: var(--zd-lsw-background, #fff);
	color: var(--zd-lsw-color, #1d2327);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.zd-lsw__menu > .zd-lsw__list .zd-lsw__link {
	display: flex;
	padding-block: 0.4em;
	padding-inline: 0.9em;
	white-space: nowrap;
}

/* The floating switcher (tz-l5): a corner button on any theme. */
.zd-lsw--floating {
	position: fixed;
	z-index: 99989;
}

.zd-lsw--bottom-end {
	inset-block-end: 1rem;
	inset-inline-end: 1rem;
}

.zd-lsw--bottom-start {
	inset-block-end: 1rem;
	inset-inline-start: 1rem;
}

.zd-lsw--top-end {
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
}

.zd-lsw--top-start {
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
}

.zd-lsw--floating .zd-lsw__toggle {
	background: var(--zd-lsw-background, #fff);
	color: var(--zd-lsw-color, #1d2327);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.zd-lsw--bottom-end > .zd-lsw__menu > .zd-lsw__list,
.zd-lsw--bottom-start > .zd-lsw__menu > .zd-lsw__list {
	inset-block-start: auto;
	inset-block-end: calc(100% + 0.25rem);
}

.zd-lsw--bottom-end > .zd-lsw__menu > .zd-lsw__list,
.zd-lsw--top-end > .zd-lsw__menu > .zd-lsw__list {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* The suggestion banner (tz-s8). */
.zd-lsg {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline: 1rem;
	margin-inline: auto;
	z-index: 99990;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	max-inline-size: 40rem;
	inline-size: fit-content;
	padding-block: 0.75rem;
	padding-inline: 1rem;
	border-radius: 0.5rem;
	background: #1d2327;
	color: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	font-size: 0.95rem;
	line-height: 1.4;
}

/*
 * On a phone the banner fills the width, exactly where chat launchers float (Zinn Chat, Tidio,
 * Crisp, Intercom: a ~60px button about 20px from a bottom corner), so it sits above them
 * (W8, demo.zinnchat.com/ar/ at 390px, 2026-10-05: the launcher covered "Read it in English").
 */
@media (max-width: 40rem) {
	.zd-lsg {
		inset-block-end: 6rem;
	}
}

.zd-lsg__text {
	margin: 0;
	flex: 1 1 12rem;
}

.zd-lsg__go {
	display: inline-block;
	padding-block: 0.4rem;
	padding-inline: 0.9rem;
	border-radius: 0.375rem;
	background: #fff;
	color: #1d2327;
	font-weight: 600;
	text-decoration: none;
}

.zd-lsg__go:focus-visible,
.zd-lsg__close:focus-visible {
	outline: 2px solid #72aee6;
	outline-offset: 2px;
}

.zd-lsg__close {
	min-inline-size: 2.25rem;
	min-block-size: 2.25rem;
	border: 0;
	border-radius: 0.375rem;
	background: transparent;
	color: inherit;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.zd-lsg {
		animation: zd-lsg-in 0.2s ease-out;
	}
}

@keyframes zd-lsg-in {
	from {
		opacity: 0;
	}
}