/**
 * EG AI Translator – Frontend Styles
 *
 * Modern, premium language switcher UI with glassmorphism effects,
 * smooth animations, and full RTL/LTR support.
 *
 * @package EG_AI_Translator
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (overridden inline from plugin settings)
   ========================================================================== */
:root {
	--eg-primary: #2e7d32;
	--eg-primary-light: #4caf50;
	--eg-primary-dark: #1b5e20;
	--eg-switcher-bg: rgba(255, 255, 255, 0.85);
	--eg-switcher-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	--eg-switcher-border: rgba(255, 255, 255, 0.4);
	--eg-switcher-radius: 50px;
	--eg-transition-speed: 0.3s;
	--eg-font-size: 14px;
	--eg-flag-size: 22px;
}

/* ==========================================================================
   Language Switcher – Base
   ========================================================================== */
.eg-language-switcher {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border-radius: var(--eg-switcher-radius);
	background: var(--eg-switcher-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--eg-switcher-border);
	box-shadow: var(--eg-switcher-shadow);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: var(--eg-font-size);
	line-height: 1;
	direction: ltr;
	unicode-bidi: isolate;
}

/* ==========================================================================
   Language Option (each link)
   ========================================================================== */
.eg-lang-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: calc(var(--eg-switcher-radius) - 4px);
	text-decoration: none !important;
	color: #555;
	font-weight: 500;
	white-space: nowrap;
	transition:
		background var(--eg-transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
		color var(--eg-transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--eg-transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow var(--eg-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.eg-lang-option::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--eg-primary-light), var(--eg-primary));
	opacity: 0;
	transition: opacity var(--eg-transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

.eg-lang-option:hover {
	color: var(--eg-primary-dark);
	transform: scale(1.02);
}

.eg-lang-option:hover::before {
	opacity: 0.08;
}

.eg-lang-option:focus-visible {
	outline: 2px solid var(--eg-primary);
	outline-offset: 2px;
}

/* Active state */
.eg-lang-option.eg-lang-active {
	background: linear-gradient(135deg, var(--eg-primary), var(--eg-primary-dark));
	color: #fff !important;
	box-shadow:
		0 2px 8px rgba(46, 125, 50, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	font-weight: 600;
}

.eg-lang-option.eg-lang-active:hover {
	transform: scale(1.02);
	box-shadow:
		0 4px 16px rgba(46, 125, 50, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.eg-lang-option.eg-lang-active::before {
	opacity: 0;
}

/* ==========================================================================
   Flag Icon
   ========================================================================== */
.eg-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.eg-flag img {
	width: var(--eg-flag-size);
	height: var(--eg-flag-size);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	transition: box-shadow var(--eg-transition-speed) ease;
}

.eg-lang-option:hover .eg-flag img {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.eg-lang-option.eg-lang-active .eg-flag img {
	border-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Language Label
   ========================================================================== */
.eg-lang-label {
	position: relative;
	z-index: 1;
	letter-spacing: 0.01em;
}

/* ==========================================================================
   Switcher Styles (flags only, text only, flags + text)
   ========================================================================== */

/* Flags only — hide labels, compact padding */
.eg-switcher-flags .eg-lang-label {
	display: none;
}

.eg-switcher-flags .eg-lang-option {
	padding: 8px 10px;
}

/* Text only — hide flags */
.eg-switcher-text .eg-flag {
	display: none;
}

/* flags_text — default, show both (no overrides needed) */

/* ==========================================================================
   Floating Switcher
   ========================================================================== */
.eg-floating-switcher-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	animation: egSwitcherSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: 0.5s;
}

/* RTL positioning */
body.rtl .eg-floating-switcher-wrap,
body.eg-lang-ar .eg-floating-switcher-wrap {
	right: auto;
	left: 24px;
}

/* Slide-in animation */
@keyframes egSwitcherSlideIn {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Glow / shadow on floating */
.eg-floating-switcher-wrap .eg-language-switcher {
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(255, 255, 255, 0.2);
}

.eg-floating-switcher-wrap .eg-language-switcher:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.16),
		0 0 0 1px rgba(255, 255, 255, 0.3),
		0 0 20px rgba(46, 125, 50, 0.1);
}

/* ==========================================================================
   Menu Switcher
   ========================================================================== */
.eg-menu-switcher {
	display: flex !important;
	align-items: center;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 8px !important;
}

.eg-menu-switcher .eg-language-switcher {
	box-shadow: none;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 0.7);
}

.eg-menu-switcher .eg-lang-option {
	padding: 6px 12px;
	font-size: 13px;
}

.eg-menu-switcher .eg-flag img {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.eg-floating-switcher-wrap {
		bottom: 16px;
		right: 16px;
	}

	body.rtl .eg-floating-switcher-wrap,
	body.eg-lang-ar .eg-floating-switcher-wrap {
		right: auto;
		left: 16px;
	}

	.eg-floating-switcher-wrap .eg-language-switcher {
		--eg-font-size: 13px;
		--eg-flag-size: 20px;
	}

	.eg-floating-switcher-wrap .eg-lang-option {
		padding: 7px 12px;
	}

	/* On small screens, collapse to flags-only for floating */
	.eg-floating-switcher-wrap .eg-switcher-flags_text .eg-lang-label {
		display: none;
	}

	.eg-floating-switcher-wrap .eg-switcher-flags_text .eg-lang-option {
		padding: 7px 10px;
	}
}

@media (max-width: 480px) {
	.eg-floating-switcher-wrap {
		bottom: 12px;
		right: 12px;
	}

	body.rtl .eg-floating-switcher-wrap,
	body.eg-lang-ar .eg-floating-switcher-wrap {
		right: auto;
		left: 12px;
	}

	.eg-floating-switcher-wrap .eg-language-switcher {
		--eg-font-size: 12px;
		--eg-flag-size: 18px;
	}
}

/* ==========================================================================
   Dark Mode Support (prefers-color-scheme)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--eg-switcher-bg: rgba(30, 30, 30, 0.85);
		--eg-switcher-border: rgba(255, 255, 255, 0.1);
		--eg-switcher-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	}

	.eg-lang-option {
		color: #ccc;
	}

	.eg-lang-option:hover {
		color: var(--eg-primary-light);
	}

	.eg-lang-option.eg-lang-active {
		color: #fff !important;
	}

	.eg-flag img {
		border-color: rgba(255, 255, 255, 0.2);
	}
}

/* ==========================================================================
   Print: Hide switcher
   ========================================================================== */
@media print {
	.eg-floating-switcher-wrap,
	.eg-language-switcher,
	.eg-menu-switcher {
		display: none !important;
	}
}

/* ==========================================================================
   Accessibility: Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.eg-floating-switcher-wrap {
		animation: none;
	}

	.eg-lang-option {
		transition: none;
	}

	.eg-flag img {
		transition: none;
	}
}

/* ==========================================================================
   RTL Body Direction Overrides
   ========================================================================== */
body.eg-lang-en {
	direction: ltr;
	unicode-bidi: embed;
}

body.eg-lang-ar {
	direction: rtl;
	unicode-bidi: embed;
}