/* The Puigberts – selectors natius d'idioma i moneda (desplegables <details>) */

.tp-lang-drop,
.tp-cur-drop {
	position: relative;
	display: inline-block;
}

.tp-lang-current,
.tp-cur-current {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 0.82rem;
	line-height: 1.2;
	letter-spacing: 0.03em;
	color: var(--tp-muted, rgba(0, 0, 0, 0.62));
	border: 1px solid var(--tp-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--tp-radius, 8px);
	background: transparent;
	cursor: pointer;
	list-style: none; /* Ocultar la marca por defecto en Safari/Firefox */
	user-select: none;
	transition: color var(--tp-transition, 0.3s ease), border-color var(--tp-transition, 0.3s ease);
}

.tp-lang-current::-webkit-details-marker,
.tp-cur-current::-webkit-details-marker {
	display: none;
}

.tp-lang-current:hover,
.tp-lang-current:focus-visible,
.tp-cur-current:hover,
.tp-cur-current:focus-visible {
	color: var(--tp-black, #111);
	border-color: var(--tp-accent, #c8a27a);
	outline: none;
}

/* Banderes SVG del selector d'idioma */
.tp-lang-flag {
	display: inline-block;
	width: 24px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid var(--tp-border, rgba(0, 0, 0, 0.12));
	flex-shrink: 0;
	vertical-align: middle;
}

.tp-lang-flag-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 18px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 3px;
	border: 1px solid var(--tp-border, rgba(0, 0, 0, 0.12));
	background: var(--tp-gray, #f4f4f4);
	flex-shrink: 0;
}

.tp-lang-code {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	min-width: 20px;
}

.tp-lang-name {
	display: none; /* Solo visible en la lista desplegada */
}

/* En pantalles medianes+ mostrem també el nom junto al código en el summary */
@media (min-width: 601px) {
	.tp-lang-name,
	.tp-cur-name {
		display: inline;
	}
}

.tp-cur-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 3px;
	font-weight: 700;
	font-size: 0.78rem;
	color: var(--tp-accent, #c8a27a);
	border: 1px solid var(--tp-border, rgba(0, 0, 0, 0.12));
	border-radius: 9px;
	flex-shrink: 0;
}

.tp-cur-code {
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tp-lang-caret,
.tp-cur-caret {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--tp-transition, 0.3s ease);
	margin-left: 2px;
}

.tp-lang-drop[open] .tp-lang-caret,
.tp-cur-drop[open] .tp-cur-caret {
	transform: rotate(180deg);
}

/* ── Menú desplegado ─────────────────────────────────────────── */

.tp-lang-menu,
.tp-cur-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 1000;
	min-width: 140px;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--tp-white, #fff);
	border: 1px solid var(--tp-border, rgba(0, 0, 0, 0.08));
	border-radius: var(--tp-radius, 8px);
	box-shadow: var(--tp-shadow, 0 18px 40px rgba(0, 0, 0, 0.12));
	animation: tp-lang-fade 0.18s ease;
}

/* Amb molts idiomes/monedes el menú fa scroll en lloc d'sortir de la pantalla */
.tp-lang-menu,
.tp-cur-menu {
	max-height: 60vh;
	overflow-y: auto;
}

@keyframes tp-lang-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tp-lang-menu li,
.tp-cur-menu li {
	margin: 0;
}

.tp-lang-menu a,
.tp-cur-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--tp-muted, rgba(0, 0, 0, 0.62));
	text-decoration: none;
	text-transform: none;
	border: none;
	border-radius: 0;
	background: none;
	transition: color var(--tp-transition, 0.3s ease), background var(--tp-transition, 0.3s ease);
}

.tp-lang-menu a:hover,
.tp-lang-menu a:focus-visible,
.tp-cur-menu a:hover,
.tp-cur-menu a:focus-visible {
	color: var(--tp-black, #111);
	background: var(--tp-gray, #f4f4f4);
	outline: none;
}

.tp-lang-menu .is-active a,
.tp-cur-menu .is-active a {
	color: var(--tp-black, #111);
	font-weight: 600;
	pointer-events: none;
}

.tp-lang-menu .is-active a::after,
.tp-cur-menu .is-active a::after {
	content: " \2713";
	font-size: 0.9em;
	color: var(--tp-accent, #c8a27a);
	margin-left: auto;
}

.tp-lang-menu .tp-lang-code {
	min-width: 24px;
	flex-shrink: 0;
}

/* Estrella para el idioma nativo (igual que antes) */
.tp-lang-menu .is-native a .tp-lang-name::after {
	content: " \2605";
	font-size: 0.7em;
	opacity: 0.65;
}

/* ── Modo oscuro ─────────────────────────────────────────────── */

html.tp-dark .tp-lang-current,
html.tp-dark .tp-cur-current {
	color: var(--tp-muted, rgba(255, 255, 255, 0.62));
	border-color: var(--tp-border, rgba(255, 255, 255, 0.14));
}

html.tp-dark .tp-lang-current:hover,
html.tp-dark .tp-lang-current:focus-visible,
html.tp-dark .tp-cur-current:hover,
html.tp-dark .tp-cur-current:focus-visible {
	color: var(--tp-white, #f2f2f2);
}

html.tp-dark .tp-lang-menu,
html.tp-dark .tp-cur-menu {
	background: #1a1a1a;
	border-color: var(--tp-border, rgba(255, 255, 255, 0.14));
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

html.tp-dark .tp-lang-menu a,
html.tp-dark .tp-cur-menu a {
	color: var(--tp-muted, rgba(255, 255, 255, 0.62));
}

html.tp-dark .tp-lang-menu a:hover,
html.tp-dark .tp-lang-menu a:focus-visible,
html.tp-dark .tp-cur-menu a:hover,
html.tp-dark .tp-cur-menu a:focus-visible {
	color: var(--tp-white, #f2f2f2);
	background: rgba(255, 255, 255, 0.05);
}

html.tp-dark .tp-lang-menu .is-active a,
html.tp-dark .tp-cur-menu .is-active a {
	color: var(--tp-white, #f2f2f2);
}

html.tp-dark .tp-lang-flag,
html.tp-dark .tp-lang-flag-code {
	border-color: rgba(255, 255, 255, 0.25);
}

html.tp-dark .tp-cur-badge {
	border-color: rgba(255, 255, 255, 0.25);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 480px) {
	.tp-lang-current,
	.tp-cur-current {
		padding: 4px 8px;
		font-size: 0.78rem;
	}

	.tp-lang-name,
	.tp-cur-name {
		display: none;
	}
}