/* TranslateRocket front-end: language switcher */

.trrocket-switcher {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.trrocket-switcher li {
	margin: 0;
}

.trrocket-switcher a,
.trrocket-switcher .trrocket-current span {
	text-decoration: none;
}

.trrocket-switcher .trrocket-current span {
	font-weight: 700;
}

/* Vertical variant: [translaterocket_switcher type="list"] */
.trrocket-switcher.trrocket-vertical {
	flex-direction: column;
	gap: 6px;
}

/* Dropdown variant: [translaterocket_switcher type="dropdown"] */
.trrocket-switcher-select {
	padding: 4px 8px;
	max-width: 100%;
}

/* SVG flags (render everywhere, unlike emoji flags on Windows) */
.trrocket-flag-svg {
	display: inline-block;
	width: 21px;
	height: 14px;
	vertical-align: -2px;
	border-radius: 0;
	/* A hairline frame so every flag reads as the same clean rectangle. Without it the
	   busy flags (Union Jack) look bigger than flat ones (Italy), whose white edges
	   blend into the menu — which is what made the switcher feel uneven. box-sizing
	   keeps the outer size at 21×14. */
	box-sizing: border-box;
	border: 1px solid rgba( 0, 0, 0, 0.16 );
}

.trrocket-switcher a,
.trrocket-switcher .trrocket-current span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* A language name must never wrap mid-word ("Itali / ano") in a narrow column. */
	white-space: nowrap;
}

/* Optional separator character between the flag and the language name. */
.trrocket-divider {
	opacity: 0.45;
}

/* Floating switcher (enabled from the Switcher settings) */
.trrocket-floating {
	position: fixed;
	z-index: 9999;
	/* Never wider than the screen, so it can't be cropped on small viewports. */
	max-width: calc( 100vw - 16px );
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 6px 10px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
}

/* Inside the floating box the switcher itself is unstyled — the box is the
   floating wrapper, so custom colours don't create a second nested border. */
.trrocket-floating .trrocket-switcher,
.trrocket-floating .trrocket-dd-toggle,
.trrocket-floating .trrocket-dd-toggle:hover,
.trrocket-floating .trrocket-dd-toggle:focus {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* A floating dropdown is one cohesive control (toggle + menu), not a box
   around the toggle plus a separate menu box. */
.trrocket-floating-dd {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.trrocket-floating-dd .trrocket-dd-toggle,
.trrocket-floating-dd .trrocket-dd-toggle:hover,
.trrocket-floating-dd .trrocket-dd-toggle:focus {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 6px 12px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
}

.trrocket-pos-bottom-right {
	bottom: 20px;
	right: 20px;
}

.trrocket-pos-bottom-left {
	bottom: 20px;
	left: 20px;
}

.trrocket-pos-top-right {
	top: 20px;
	right: 20px;
}

.trrocket-pos-top-left {
	top: 20px;
	left: 20px;
}

/* Custom position: fall back to a visible spot so it's never off-screen if the
   inline X/Y are missing or invalid; valid X/Y override these inline. */
.trrocket-pos-custom {
	top: 20px;
	left: 20px;
}

/* Keep top-positioned floating switchers clear of the WordPress admin bar */
.admin-bar .trrocket-pos-top-left,
.admin-bar .trrocket-pos-top-right {
	top: 66px;
}

@media screen and ( min-width: 783px ) {

	.admin-bar .trrocket-pos-top-left,
	.admin-bar .trrocket-pos-top-right {
		top: 52px;
	}
}

/* Custom dropdown switcher (shows real flags, unlike a native <select>) */
.trrocket-dd {
	position: relative;
	display: inline-block;
}

/* The interactive toggle + menu live in an absolute OVERLAY that fills the
   wrapper; the wrapper's width comes from the invisible, in-flow ANCHOR (a copy
   of the widest item). So the toggle and the open menu are ALWAYS exactly the
   same width, with no JavaScript measuring. */
.trrocket-dd-anchor {
	visibility: hidden;
	pointer-events: none;
}

.trrocket-dd-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* Toggle and menu share the same box model so the JS width sync makes them the
   exact same total width (one is not content-box while the other is border-box). */
.trrocket-dd-toggle,
.trrocket-dd-menu {
	box-sizing: border-box;
}

.trrocket-dd-toggle {
	display: inline-flex;
	width: 100%;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font: inherit;
	/* The current language label must stay on one line, even in a narrow header
	   slot with a wide (monospace) font. */
	white-space: nowrap;
	/* The toggle is a <button>; themes often uppercase / letter-space and bolden
	   buttons, which made it look different from the <a> menu items. Reset so the
	   toggle text matches the menu exactly. */
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
	line-height: 1.3;
	color: inherit;
	background: #fff;
	border: 1px solid #e2e2e2;
	/* Corner radius comes from the switcher settings (css_for); no hardcoded
	   rounding, so an empty "Corner radius" really means square. */
	border-radius: 0;
	padding: 6px 12px;
	-webkit-appearance: none;
	appearance: none;
	/* Kill the theme's button transition so the corners don't animate (morph)
	   when the dropdown opens on hover. */
	transition: none;
}

/* Neutralise the theme's dark button:hover on our toggle (incl. the black border
   some themes add on hover — keep our own border colour). */
.trrocket-dd-toggle:hover,
.trrocket-dd-toggle:focus {
	background: #fff;
	color: inherit;
	box-shadow: none;
	border-color: #e2e2e2;
	outline: none;
}

.trrocket-dd-caret {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding-left: 8px;
	opacity: 0.6;
}

/* Rotate the SVG around its OWN centre (not the padded span, which made the
   chevron drift sideways) so it flips cleanly down <-> up. */
.trrocket-dd-caret svg {
	transition: transform 0.18s ease;
	transform-origin: center;
}

.trrocket-dd.is-open .trrocket-dd-caret svg {
	/* When open, flip the chevron up — the convention every dropdown users
	   already know (native selects, TranslatePress, etc.). */
	transform: rotate( 180deg );
}

@media ( hover: hover ) {
	.trrocket-dd-hover:hover .trrocket-dd-caret svg {
		transform: rotate( 180deg );
	}
}

.trrocket-dd-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	/* Width comes from the anchor/overlay wrapper, so the open menu is exactly as
	   wide as the toggle. */
	width: 100%;
	/* Seamless with the toggle: no gap, flat top, rounded bottom — together they
	   read as ONE rounded box. overflow:hidden clips item hovers to the radius. */
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-top: 0;
	/* Bottom rounding comes from the settings (css_for adds 0 0 r r); square by default. */
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.14 );
	z-index: 9999;
}

.trrocket-dd.is-open .trrocket-dd-menu {
	display: block;
}

/* Two touch traps kept the menu stuck open on phones: the toggle button keeps
   FOCUS after a tap (so a :focus-within rule would re-show what the JS just
   closed), and on hover-trigger switchers the first tap "sticks" :hover.
   Keyboard users still open it with Enter/Space (real button + is-open). */
@media ( hover: hover ) {
	.trrocket-dd-hover:hover .trrocket-dd-menu {
		display: block;
	}
}

/* Optional entrance animations for the dropdown menu (attached per-switcher in
   the generated CSS via "animation: trr-anim-*"). */
@keyframes trr-anim-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes trr-anim-slide {
	from { opacity: 0; transform: translateY( -6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes trr-anim-scale {
	from { opacity: 0; transform: scale( 0.96 ); transform-origin: top center; }
	to   { opacity: 1; transform: scale( 1 ); transform-origin: top center; }
}

@media ( prefers-reduced-motion: reduce ) {
	.trrocket-dd-menu,
	.trrocket-switcher a,
	.trrocket-dd-menu a {
		animation: none !important;
		transition: none !important;
	}
}

/* When open, the toggle's bottom flows straight into the menu (one surface). */
.trrocket-dd.is-open .trrocket-dd-toggle {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media ( hover: hover ) {
	.trrocket-dd-hover:hover .trrocket-dd-toggle {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.trrocket-dd-menu li {
	margin: 0;
}

.trrocket-dd-menu a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	text-decoration: none;
	white-space: nowrap;
	/* Match the toggle's text exactly (no theme uppercase / spacing / bold) AND its
	   height (themes give menu links a tall line-height, which made the menu row
	   taller than the toggle). */
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	font-style: normal;
	/* Kill the theme's slow link transition so the hover colour is instant. */
	transition: none;
}

.trrocket-dd-menu a:hover {
	background: rgba( 0, 0, 0, 0.06 );
}

/* Scrollable horizontal switcher (type="scroll") — compact bar for many languages. */
.trrocket-scroll{display:inline-flex;align-items:center;gap:2px;max-width:100%;vertical-align:middle}
.trrocket-scroll-viewport{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.trrocket-scroll-viewport::-webkit-scrollbar{width:0;height:0;display:none}
.trrocket-scroll-track{display:flex!important;flex-wrap:nowrap!important;gap:8px;margin:0;padding:3px 2px;list-style:none;align-items:center}
.trrocket-scroll-track li{flex:0 0 auto;margin:0}
/* Same box for every item so nothing sits higher than its neighbours (the old
   bold-only current label had different metrics and looked "lifted").
   Direct child only: the label wraps nested spans (flag, name) and a
   descendant selector would draw one ring per level. */
.trrocket-scroll-track a,
.trrocket-scroll-track .trrocket-current > span{padding:4px 8px;border-radius:999px;border:1.5px solid transparent}
/* The current language: one thin neutral ring, nothing else. */
.trrocket-scroll-track .trrocket-current > span{
	border-color:#cfd2df;
}
.trrocket-scroll-prev,.trrocket-scroll-next{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:#3a3a4d;cursor:pointer;opacity:.85;transition:opacity .15s ease,background .15s ease}
.trrocket-scroll-prev:hover,.trrocket-scroll-next:hover{opacity:1;background:rgba(0,0,0,.12)}
.trrocket-scroll-prev[disabled],.trrocket-scroll-next[disabled]{opacity:.3;cursor:default;pointer-events:none}