/* ==========================================================================
   Translation & Localization WP — Floating Widget Styles
   ========================================================================== */

:root {
	--tlwp-w-primary:     #4285F4;
	--tlwp-w-bg:          #ffffff;
	--tlwp-w-text:        #1d2327;
	--tlwp-w-text-muted:  #646970;
	--tlwp-w-border:      #e8e8e8;
	--tlwp-w-hover:       #f5f8ff;
	--tlwp-w-active:      #e8f0fe;
	--tlwp-w-shadow:      0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
	--tlwp-w-shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.12);
	--tlwp-w-radius:      14px;
	--tlwp-w-radius-sm:   10px;
	--tlwp-w-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
	--tlwp-w-z:           999998;
	--tlwp-w-offset:      20px;
}

/* ==========================================================================
   Suppress Google Translate native UI
   ========================================================================== */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
	display: none !important;
}

.skiptranslate {
	display: none !important;
}

body {
	top: 0 !important;
}

.goog-text-highlight {
	background: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Switcher Base (shared by all contexts)
   ========================================================================== */
.tlwp-switcher {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 14px;
	line-height: 1;
	position: relative; /* default for inline/widget */
	display: inline-block;
}

/* Floating variant — fixed to viewport corner */
.tlwp-switcher.floating {
	position: fixed;
	bottom: var(--tlwp-w-offset);
	z-index: var(--tlwp-w-z);
}

.tlwp-switcher.tlwp-position-bottom-left {
	left: var(--tlwp-w-offset);
}

.tlwp-switcher.tlwp-position-bottom-right {
	right: var(--tlwp-w-offset);
}

/* Inline variant — sits in normal document flow */
.tlwp-switcher.inline {
	display: inline-block;
}

/* Widget area variant — full width */
.tlwp-sidebar-widget .tlwp-switcher.inline {
	display: block;
}

/* ==========================================================================
   Trigger Button
   ========================================================================== */
.tlwp-trigger {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px 10px 12px;
	background: var(--tlwp-w-bg);
	border: none;
	border-radius: 50px;
	box-shadow: var(--tlwp-w-shadow);
	cursor: pointer;
	transition: all var(--tlwp-w-transition);
	white-space: nowrap;
	color: var(--tlwp-w-text);
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.tlwp-trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tlwp-trigger:active {
	transform: translateY(0);
}

.tlwp-trigger:focus-visible {
	box-shadow: var(--tlwp-w-shadow), 0 0 0 3px rgba(66, 133, 244, 0.35);
}

.tlwp-trigger-flag {
	font-size: 20px;
	line-height: 1;
	display: block;
}

.tlwp-trigger-code {
	font-size: 13px;
	font-weight: 700;
	color: var(--tlwp-w-text);
	letter-spacing: 0.5px;
	font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
}

.tlwp-chevron {
	display: flex;
	align-items: center;
	color: var(--tlwp-w-text-muted);
	transition: transform var(--tlwp-w-transition);
}

.tlwp-switcher.tlwp-open .tlwp-chevron {
	transform: rotate(180deg);
}

/* ==========================================================================
   Dropdown
   ========================================================================== */
.tlwp-dropdown {
	position: absolute;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: var(--tlwp-w-bg);
	border-radius: var(--tlwp-w-radius);
	box-shadow: var(--tlwp-w-shadow);
	border: 1px solid var(--tlwp-w-border);
	min-width: 180px;
	max-height: 320px;
	overflow-y: auto;

	/* Animation */
	transform-origin: bottom center;
	transform: scaleY(0.85) translateY(8px);
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--tlwp-w-transition),
		opacity var(--tlwp-w-transition);
}

/* Floating: dropdown opens upward */
.tlwp-switcher.floating .tlwp-dropdown {
	bottom: calc(100% + 8px);
	top: auto;
}

.tlwp-position-bottom-left .tlwp-dropdown {
	left: 0;
	transform-origin: bottom left;
}

.tlwp-position-bottom-right .tlwp-dropdown {
	right: 0;
	transform-origin: bottom right;
}

/* Inline/widget: dropdown opens downward */
.tlwp-switcher.inline .tlwp-dropdown {
	bottom: auto;
	top: calc(100% + 8px);
	left: 0;
	transform-origin: top left;
}

.tlwp-dropdown.tlwp-dropdown-open {
	transform: scaleY(1) translateY(0);
	opacity: 1;
	pointer-events: all;
}

/* Scrollbar styling */
.tlwp-dropdown::-webkit-scrollbar {
	width: 4px;
}
.tlwp-dropdown::-webkit-scrollbar-track {
	background: transparent;
}
.tlwp-dropdown::-webkit-scrollbar-thumb {
	background: var(--tlwp-w-border);
	border-radius: 4px;
}

/* ==========================================================================
   Dropdown Options
   ========================================================================== */
.tlwp-lang-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--tlwp-w-radius-sm);
	cursor: pointer;
	transition: background var(--tlwp-w-transition);
	outline: none;
	color: var(--tlwp-w-text);
}

.tlwp-lang-option:hover,
.tlwp-lang-option:focus-visible {
	background: var(--tlwp-w-hover);
}

.tlwp-lang-option.tlwp-lang-active {
	background: var(--tlwp-w-active);
	color: var(--tlwp-w-primary);
}

.tlwp-lang-option.tlwp-lang-active .tlwp-option-code {
	color: var(--tlwp-w-primary);
}

.tlwp-separator {
	border-top: 1px solid var(--tlwp-w-border);
	margin-top: 4px;
	padding-top: 13px;
}

.tlwp-option-flag {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.tlwp-option-name {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	text-transform: capitalize;
}

.tlwp-option-code {
	font-size: 11px;
	font-weight: 600;
	color: var(--tlwp-w-text-muted);
	font-family: 'SF Mono', 'Fira Code', monospace;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

/* ==========================================================================
   Responsive — smaller screens
   ========================================================================== */
@media ( max-width: 480px ) {
	:root {
		--tlwp-w-offset: 14px;
	}
	.tlwp-trigger {
		padding: 9px 14px 9px 10px;
	}
	.tlwp-trigger-flag {
		font-size: 18px;
	}
}