/**
 * Base layout styles for the PLL Language Pill Switcher widget.
 * Colors, spacing, radius, typography are all controlled live
 * through Elementor's Style tab (see class-language-pill-switcher.php).
 * This file only provides safe layout defaults / fallbacks.
 */

.pll-pill-switcher {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 6px;
	gap: 6px;
	background-color: #000000;
	border: 1px solid #271F16;
	border-radius: 18px;
	box-sizing: border-box;
}

.pll-pill-switcher * {
	box-sizing: border-box;
}

.pll-pill-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 26px;
	border-radius: 12px;
	color: #828282;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, transform .15s ease;
	line-height: 1;
}

.pll-pill-item:hover {
	color: #e4e4e4;
	text-decoration: none;
}

.pll-pill-item.pll-pill-active {
	background-color: #C2A673;
	color: #000000;
	font-weight: 700;
}

.pll-pill-item.pll-pill-active:hover {
	color: #000000;
}

.pll-pill-item.pll-pill-no-translation {
	opacity: .45;
	pointer-events: none;
	cursor: not-allowed;
}

.pll-pill-flag {
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
	flex-shrink: 0;
}

.pll-pill-label {
	display: inline-block;
}

/* Stacked layout (toggled via the "Stack" switcher control in Elementor). */
.pll-stack-yes .pll-pill-switcher {
	flex-direction: column;
	align-items: stretch;
}
.pll-stack-yes .pll-pill-item {
	justify-content: center;
	width: 100%;
}