/**
 * Selva Translate - Frontend Styles
 *
 * Minimal CSS for the language switcher widget.
 * Supports dropdown, flags, and text styles plus floating and top-bar positions.
 *
 * @package Selva_Translate
 * @since   1.0.0
 */

/* ---------------------------------------------------------------
 * Custom properties (theming)
 * ------------------------------------------------------------- */

:root {
	--selva-sw-font: inherit;
	--selva-sw-font-size: 14px;
	--selva-sw-color: #333;
	--selva-sw-color-hover: #000;
	--selva-sw-bg: #fff;
	--selva-sw-bg-hover: #f5f5f5;
	--selva-sw-border: #ddd;
	--selva-sw-radius: 4px;
	--selva-sw-active-color: #0073aa;
	--selva-sw-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	--selva-sw-z-index: 99990;
	--selva-sw-transition: 0.2s ease;
	--selva-sw-gap: 8px;
}

/* ---------------------------------------------------------------
 * Base container
 * ------------------------------------------------------------- */

.selva-switcher {
	font-family: var(--selva-sw-font);
	font-size: var(--selva-sw-font-size);
	line-height: 1.4;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
}

.selva-switcher *,
.selva-switcher *::before,
.selva-switcher *::after {
	box-sizing: inherit;
}

.selva-switcher a {
	text-decoration: none;
	color: var(--selva-sw-color);
	transition: color var(--selva-sw-transition);
}

.selva-switcher a:hover,
.selva-switcher a:focus {
	color: var(--selva-sw-color-hover);
}

/* ---------------------------------------------------------------
 * Dropdown style
 * ------------------------------------------------------------- */

.selva-switcher--dropdown .selva-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border: 1px solid var(--selva-sw-border);
	border-radius: var(--selva-sw-radius);
	background: var(--selva-sw-bg);
	color: var(--selva-sw-color);
	font-family: var(--selva-sw-font);
	font-size: var(--selva-sw-font-size);
	cursor: pointer;
	transition: border-color var(--selva-sw-transition),
		background var(--selva-sw-transition);
	white-space: nowrap;
	line-height: 1.4;
}

.selva-switcher--dropdown .selva-switcher__toggle:hover,
.selva-switcher--dropdown .selva-switcher__toggle:focus {
	border-color: var(--selva-sw-active-color);
	outline: none;
}

.selva-switcher__arrow {
	font-size: 10px;
	transition: transform var(--selva-sw-transition);
}

.selva-switcher__toggle[aria-expanded="true"] .selva-switcher__arrow {
	transform: rotate(180deg);
}

.selva-switcher--dropdown .selva-switcher__list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 4px 0 0;
	padding: 4px 0;
	list-style: none;
	background: var(--selva-sw-bg);
	border: 1px solid var(--selva-sw-border);
	border-radius: var(--selva-sw-radius);
	box-shadow: var(--selva-sw-shadow);
	z-index: var(--selva-sw-z-index);
	min-width: 100%;
	white-space: nowrap;
}

.selva-switcher--dropdown .selva-switcher__list--open {
	display: block;
}

.selva-switcher--dropdown .selva-switcher__item {
	margin: 0;
	padding: 0;
}

.selva-switcher--dropdown .selva-switcher__item a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	transition: background var(--selva-sw-transition);
}

.selva-switcher--dropdown .selva-switcher__item a:hover,
.selva-switcher--dropdown .selva-switcher__item a:focus {
	background: var(--selva-sw-bg-hover);
	outline: none;
}

.selva-switcher__item--active a {
	color: var(--selva-sw-active-color);
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Flags style
 * ------------------------------------------------------------- */

.selva-switcher--flags .selva-switcher__list {
	display: flex;
	gap: var(--selva-sw-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.selva-switcher--flags .selva-switcher__item {
	margin: 0;
	padding: 0;
}

.selva-switcher--flags .selva-switcher__item a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--selva-sw-radius);
	transition: background var(--selva-sw-transition);
}

.selva-switcher--flags .selva-switcher__item a:hover,
.selva-switcher--flags .selva-switcher__item a:focus {
	background: var(--selva-sw-bg-hover);
}

.selva-switcher__flag {
	font-size: 1.2em;
	line-height: 1;
}

/* ---------------------------------------------------------------
 * Text style
 * ------------------------------------------------------------- */

.selva-switcher--text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.selva-switcher--text a {
	padding: 2px 4px;
	border-radius: var(--selva-sw-radius);
	transition: background var(--selva-sw-transition),
		color var(--selva-sw-transition);
}

.selva-switcher--text a:hover,
.selva-switcher--text a:focus {
	background: var(--selva-sw-bg-hover);
}

.selva-switcher__current {
	color: var(--selva-sw-active-color);
	font-weight: 600;
	padding: 2px 4px;
}

.selva-switcher__separator {
	color: var(--selva-sw-border);
	user-select: none;
}

/* ---------------------------------------------------------------
 * Floating switcher
 * ------------------------------------------------------------- */

.selva-switcher-floating {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: var(--selva-sw-z-index);
	opacity: 1;
	transform: translateY(0);
}

.selva-switcher-floating .selva-switcher--dropdown .selva-switcher__toggle {
	box-shadow: var(--selva-sw-shadow);
}

.selva-switcher-floating .selva-switcher--dropdown .selva-switcher__list {
	bottom: 100%;
	top: auto;
	margin: 0 0 4px;
}

/* ---------------------------------------------------------------
 * Top bar switcher
 * ------------------------------------------------------------- */

.selva-switcher-topbar {
	background: var(--selva-sw-bg);
	border-bottom: 1px solid var(--selva-sw-border);
	padding: 4px 16px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 13px;
}

.selva-switcher-topbar .selva-switcher {
	font-size: 13px;
}

/* ---------------------------------------------------------------
 * Mobile responsive
 * ------------------------------------------------------------- */

@media (max-width: 782px) {
	.selva-switcher--dropdown .selva-switcher__toggle {
		padding: 8px 14px;
		min-height: 44px;
	}

	.selva-switcher--dropdown .selva-switcher__item a {
		padding: 10px 14px;
		min-height: 44px;
	}

	.selva-switcher--flags .selva-switcher__item a {
		padding: 8px 10px;
		min-height: 44px;
	}

	.selva-switcher--text a,
	.selva-switcher__current {
		padding: 8px 6px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.selva-switcher-floating {
		bottom: 12px;
		right: 12px;
	}
}

/* ---------------------------------------------------------------
 * RTL support
 * ------------------------------------------------------------- */

[dir="rtl"] .selva-switcher--dropdown .selva-switcher__list {
	left: auto;
	right: 0;
}

[dir="rtl"] .selva-switcher-floating {
	right: auto;
	left: 20px;
}

[dir="rtl"] .selva-switcher-topbar {
	justify-content: flex-start;
}

@media (max-width: 782px) {
	[dir="rtl"] .selva-switcher-floating {
		left: 12px;
	}
}