/* ============================================================
   TranslateGA — Language Switcher
   ============================================================
   All visual values are driven by CSS custom properties so
   Elementor (and custom CSS overrides) can control everything
   without specificity battles.
   ============================================================ */

/* ── Design tokens (defaults) ──────────────────────────────── */
.tga-switcher {
	/* Layout */
	--tga-gap:            4px;
	--tga-align:          center;
	--tga-direction:      row;

	/* Item — normal */
	--tga-item-color:         currentColor;
	--tga-item-bg:            transparent;
	--tga-item-opacity:       0.55;
	--tga-item-border-width:  0px;
	--tga-item-border-color:  currentColor;
	--tga-item-border-style:  solid;
	--tga-item-shadow:        none;

	/* Item — hover */
	--tga-item-hover-color:   currentColor;
	--tga-item-hover-bg:      transparent;
	--tga-item-hover-opacity: 1;
	--tga-item-hover-shadow:  none;

	/* Item — active */
	--tga-item-active-color:   currentColor;
	--tga-item-active-bg:      transparent;
	--tga-item-active-opacity: 1;
	--tga-item-active-shadow:  none;

	/* Shape */
	--tga-item-radius:   4px;
	--tga-item-pad-y:    5px;
	--tga-item-pad-x:    10px;
	--tga-item-min-w:    0px;

	/* Typography */
	--tga-font-size:     0.8125em;
	--tga-font-weight:   600;
	--tga-letter-spacing: 0.04em;
	--tga-text-transform: uppercase;

	/* Separator */
	--tga-sep-color:    rgba(0,0,0,.2);
	--tga-sep-size:     1px;

	/* Active indicator */
	--tga-indicator-color:  currentColor;
	--tga-indicator-size:   2px;

	/* Flag */
	--tga-flag-size:    1.2em;

	/* Dropdown panel */
	--tga-dd-bg:            #ffffff;
	--tga-dd-border:        1px solid rgba(0,0,0,.12);
	--tga-dd-radius:        6px;
	--tga-dd-shadow:        0 8px 24px rgba(0,0,0,.12);
	--tga-dd-item-pad-y:    8px;
	--tga-dd-item-pad-x:    16px;
	--tga-dd-item-color:    #1d2327;
	--tga-dd-item-hover-bg: #f6f7f7;
	--tga-dd-active-bg:     #f0f6fc;
	--tga-dd-active-color:  #2271b1;

	/* Transition */
	--tga-transition: 0.18s ease;

	/* ── Base layout ── */
	display: inline-flex;
	align-items: var(--tga-align);
	gap: var(--tga-gap);
	flex-direction: var(--tga-direction);
	position: relative;
	line-height: 1;
}

/* ============================================================
   Items — pills / flags style
   ============================================================ */
.tga-switcher__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: var(--tga-item-pad-y) var(--tga-item-pad-x);
	min-width: var(--tga-item-min-w);
	border-radius: var(--tga-item-radius);
	border: var(--tga-item-border-width) var(--tga-item-border-style) var(--tga-item-border-color);
	box-shadow: var(--tga-item-shadow);
	text-decoration: none;
	font-size: var(--tga-font-size);
	font-weight: var(--tga-font-weight);
	letter-spacing: var(--tga-letter-spacing);
	text-transform: var(--tga-text-transform);
	color: var(--tga-item-color);
	background-color: var(--tga-item-bg);
	opacity: var(--tga-item-opacity);
	white-space: nowrap;
	transition:
		opacity var(--tga-transition),
		background-color var(--tga-transition),
		color var(--tga-transition),
		box-shadow var(--tga-transition),
		border-color var(--tga-transition);
	position: relative;
}

.tga-switcher__item:hover {
	color: var(--tga-item-hover-color);
	background-color: var(--tga-item-hover-bg);
	opacity: var(--tga-item-hover-opacity);
	box-shadow: var(--tga-item-hover-shadow);
	text-decoration: none;
}

.tga-switcher__item.is-active {
	color: var(--tga-item-active-color);
	background-color: var(--tga-item-active-bg);
	opacity: var(--tga-item-active-opacity);
	box-shadow: var(--tga-item-active-shadow);
	cursor: default;
	pointer-events: none;
}

/* ── Active indicators ─────────────────────────────────────── */

[data-tga-indicator="underline"] .tga-switcher__item.is-active::after {
	content: '';
	position: absolute;
	bottom: 0; left: var(--tga-item-pad-x); right: var(--tga-item-pad-x);
	height: var(--tga-indicator-size);
	background: var(--tga-indicator-color);
	border-radius: 2px;
}

[data-tga-indicator="overline"] .tga-switcher__item.is-active::before {
	content: '';
	position: absolute;
	top: 0; left: var(--tga-item-pad-x); right: var(--tga-item-pad-x);
	height: var(--tga-indicator-size);
	background: var(--tga-indicator-color);
	border-radius: 2px;
}

[data-tga-indicator="left-border"] .tga-switcher__item.is-active::before {
	content: '';
	position: absolute;
	top: 25%; bottom: 25%; left: 0;
	width: var(--tga-indicator-size);
	background: var(--tga-indicator-color);
	border-radius: 0 2px 2px 0;
}

[data-tga-indicator="dot"] .tga-switcher__item.is-active::after {
	content: '';
	position: absolute;
	bottom: calc(0px - var(--tga-indicator-size) * 2.5);
	left: 50%; transform: translateX(-50%);
	width: calc(var(--tga-indicator-size) * 2);
	height: calc(var(--tga-indicator-size) * 2);
	border-radius: 50%;
	background: var(--tga-indicator-color);
}

[data-tga-indicator="bold"] .tga-switcher__item.is-active {
	font-weight: 800;
}

/* ── Separator between items ───────────────────────────────── */

[data-tga-sep="dot"] .tga-switcher__item:not(:last-child)::after {
	content: '·';
	position: absolute;
	right: calc(var(--tga-gap) * -1 - var(--tga-sep-size) / 2);
	top: 50%; transform: translateY(-50%);
	color: var(--tga-sep-color);
	font-size: var(--tga-sep-size, 1em);
	pointer-events: none;
}

[data-tga-sep="slash"] .tga-switcher__item:not(:last-child)::after {
	content: '/';
	position: absolute;
	right: calc(var(--tga-gap) * -0.6);
	top: 50%; transform: translateY(-50%);
	color: var(--tga-sep-color);
	pointer-events: none;
}

[data-tga-sep="line"] .tga-switcher__item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: calc(var(--tga-gap) * -0.5 - var(--tga-sep-size) / 2);
	top: 20%; bottom: 20%;
	width: var(--tga-sep-size);
	background: var(--tga-sep-color);
	pointer-events: none;
}

/* ── Flag ───────────────────────────────────────────────────── */
.tga-switcher__flag {
	font-size: var(--tga-flag-size);
	line-height: 1;
}

.tga-switcher__name {
	font-size: 0.9em;
	font-weight: inherit;
}

/* ============================================================
   Dropdown style
   ============================================================ */
.tga-switcher--dropdown {
	position: relative;
}

.tga-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--tga-item-pad-y) var(--tga-item-pad-x);
	min-width: var(--tga-item-min-w);
	border-radius: var(--tga-item-radius);
	border: var(--tga-item-border-width, 1px) var(--tga-item-border-style, solid) var(--tga-item-border-color, currentColor);
	box-shadow: var(--tga-item-shadow);
	background: var(--tga-item-bg);
	color: var(--tga-item-color);
	font-size: var(--tga-font-size);
	font-weight: var(--tga-font-weight);
	letter-spacing: var(--tga-letter-spacing);
	text-transform: var(--tga-text-transform);
	cursor: pointer;
	white-space: nowrap;
	transition: opacity var(--tga-transition), background-color var(--tga-transition), box-shadow var(--tga-transition);
}

.tga-switcher__toggle:hover {
	background-color: var(--tga-item-hover-bg);
	color: var(--tga-item-hover-color);
	box-shadow: var(--tga-item-hover-shadow);
}

.tga-switcher__chevron {
	font-size: 0.7em;
	transition: transform var(--tga-transition);
	opacity: 0.6;
}

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

/* ── Dropdown panel ─────────────────────────────────────────── */
.tga-switcher__dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: max(160px, 100%);
	background: var(--tga-dd-bg);
	border: var(--tga-dd-border);
	border-radius: var(--tga-dd-radius);
	box-shadow: var(--tga-dd-shadow);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--tga-transition), transform var(--tga-transition), visibility var(--tga-transition);
	pointer-events: none;
}

.tga-switcher__dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.tga-switcher__dropdown li {
	margin: 0;
	padding: 0;
}

.tga-switcher__dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--tga-dd-item-pad-y) var(--tga-dd-item-pad-x);
	color: var(--tga-dd-item-color);
	text-decoration: none;
	font-size: var(--tga-font-size);
	font-weight: 500;
	transition: background var(--tga-transition), color var(--tga-transition);
}

.tga-switcher__dropdown a:hover {
	background: var(--tga-dd-item-hover-bg);
	color: var(--tga-dd-item-color);
	text-decoration: none;
}

.tga-switcher__dropdown li[aria-selected="true"] a {
	background: var(--tga-dd-active-bg);
	color: var(--tga-dd-active-color);
	font-weight: 600;
}

/* Drop upward */
.tga-switcher--dropdown.tga-drop-up .tga-switcher__dropdown {
	top: auto;
	bottom: calc(100% + 6px);
	transform: translateY(6px);
}
.tga-switcher--dropdown.tga-drop-up .tga-switcher__dropdown.is-open {
	transform: translateY(0);
}

/* ============================================================
   Floating variant
   ============================================================ */
.tga-switcher--floating {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 99998;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;

	--tga-item-color:        currentColor;
	--tga-item-active-color: currentColor;
	--tga-item-hover-color:  currentColor;
	--tga-item-opacity:      1;
	--tga-dd-bg:             #0F1C14;
	--tga-dd-border:         1px solid rgba(139,115,85,.3);
	--tga-dd-radius:         0px;
	--tga-dd-shadow:         0 8px 32px rgba(0,0,0,.4);
	--tga-dd-item-color:     #9b9488;
	--tga-dd-item-hover-bg:  rgba(139,115,85,.08);
	--tga-dd-active-bg:      transparent;
	--tga-dd-active-color:   #F5F0E8;
}

/* Siempre abre hacia arriba */
.tga-switcher--floating .tga-switcher__dropdown {
	top: auto;
	bottom: calc(100% + 6px);
	transform: translateY(6px);
}

.tga-switcher--floating .tga-switcher__dropdown.is-open {
	transform: translateY(0);
}

/* ── Nav menu wrapper ──────────────────────────────────────── */
.tga-nav-switcher-item {
	display: flex;
	align-items: center;
}
.tga-nav-switcher-item .tga-switcher {
	margin-left: 8px;
}

/* ── Accessibility ──────────────────────────────────────────── */
.tga-switcher__item:focus-visible,
.tga-switcher__toggle:focus-visible {
	outline: 2px solid var(--tga-indicator-color, currentColor);
	outline-offset: 2px;
}

/* ── RTL ────────────────────────────────────────────────────── */
[dir="rtl"] .tga-switcher--floating { right: auto; left: 24px; }
[dir="rtl"] .tga-switcher__dropdown { left: auto; right: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
	.tga-switcher--floating {
		bottom: 16px;
		right: 16px;
		padding: 0;
	}
}