/**
 * Ћирилица у латиницу — switcher styles.
 * The dropdown is designed as a rounded "pill" with a blue outline and chevron.
 */

.cirlat-switcher {
	--cirlat-color: #1A3A6B;        /* Navy outline + text */
	--cirlat-color-hover: #12294d;
	--cirlat-bg: #ffffff;
	--cirlat-radius: 300px;         /* Full pill */
	--cirlat-border-width: 1px;     /* Solid border */
	display: inline-block;
	font-size: 15px;
	line-height: 1.2;
	vertical-align: middle;
}

/* Screen-reader-only label */
.cirlat-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------ Dropdown (custom <details>) */
.cirlat-dd {
	position: relative;
	display: inline-block;
}

/* The pill button */
.cirlat-dd__button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	/* Padding 12 / 22 / 12 / 25 — right trimmed slightly for the chevron gap. */
	padding: 12px 22px 12px 25px;
	font-weight: 600;
	color: var(--cirlat-color);
	background: var(--cirlat-bg);
	border: var(--cirlat-border-width) solid var(--cirlat-color);
	border-radius: var(--cirlat-radius);
	cursor: pointer;
	line-height: 1.2;
	list-style: none;
	user-select: none;
	-webkit-user-select: none;
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Kill the native disclosure triangle */
.cirlat-dd__button::-webkit-details-marker { display: none; }
.cirlat-dd__button::marker { content: ""; }

.cirlat-dd__button:hover {
	border-color: var(--cirlat-color-hover);
	color: var(--cirlat-color-hover);
	background: #f7f9fd;
}

.cirlat-dd__button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 58, 107, 0.25);
}

.cirlat-dd[open] > .cirlat-dd__button {
	border-color: var(--cirlat-color-hover);
}

.cirlat-dd__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.cirlat-dd[open] .cirlat-dd__chevron {
	transform: rotate(180deg);
}

/* The floating menu panel */
.cirlat-dd__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 100%;
	box-sizing: border-box;
	padding: 6px;
	background: #ffffff;
	border: 1px solid #e4e9f2;
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(16, 43, 87, 0.16);
	z-index: 9999;
	transform-origin: top center;
	animation: cirlat-pop 0.16s ease;
}

@keyframes cirlat-pop {
	from { opacity: 0; transform: translateY(-6px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

.cirlat-dd__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 10px 10px;
	border-radius: 10px;
	color: #1f2a44;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}

.cirlat-dd__item:hover,
.cirlat-dd__item:focus-visible {
	background: #eef3fb;
	color: var(--cirlat-color);
	outline: none;
}

.cirlat-dd__item.is-active {
	color: var(--cirlat-color);
	font-weight: 700;
}

.cirlat-dd__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--cirlat-color);
	opacity: 0;
}

.cirlat-dd__item.is-active .cirlat-dd__check {
	opacity: 1;
}

/* Open menus in floating corners should hug the correct edge */
.cirlat-float--bottom-right .cirlat-dd__menu,
.cirlat-float--top-right .cirlat-dd__menu {
	left: auto;
	right: 0;
}

.cirlat-float--bottom-right .cirlat-dd__menu,
.cirlat-float--bottom-left .cirlat-dd__menu {
	top: auto;
	bottom: calc(100% + 8px);
}

/* ------------------------------------------------------------------ Toggle */
.cirlat-toggle {
	display: inline-flex;
	padding: 3px;
	background: #eef3fb;
	border: var(--cirlat-border-width) solid var(--cirlat-color);
	border-radius: var(--cirlat-radius);
}

.cirlat-toggle__opt {
	display: inline-block;
	padding: 6px 16px;
	font-weight: 600;
	color: var(--cirlat-color);
	text-decoration: none;
	border-radius: var(--cirlat-radius);
	transition: background 0.15s ease, color 0.15s ease;
}

.cirlat-toggle__opt.is-active {
	background: var(--cirlat-color);
	color: #fff;
}

.cirlat-toggle__opt:not(.is-active):hover {
	background: #dbe6fa;
}

/* ------------------------------------------------------------------- Links */
.cirlat-links {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cirlat-link {
	color: var(--cirlat-color);
	text-decoration: none;
	font-weight: 600;
}

.cirlat-link:hover {
	text-decoration: underline;
}

.cirlat-link.is-active {
	text-decoration: underline;
	cursor: default;
}

.cirlat-sep {
	color: #9fb2cf;
}

.cirlat-noscript {
	margin-left: 6px;
}

/* ------------------------------------------------------------- Floating box */
.cirlat-float {
	position: fixed;
	z-index: 9999;
}

.cirlat-float--bottom-right { right: 20px; bottom: 20px; }
.cirlat-float--bottom-left  { left: 20px;  bottom: 20px; }
.cirlat-float--top-right    { right: 20px; top: 20px; }
.cirlat-float--top-left     { left: 20px;  top: 20px; }

/* Inside a nav menu, drop the pill's own background clash */
.cirlat-menu-item {
	display: flex;
	align-items: center;
}