/* Global AI Translator SEO — frontend
 * Popup + floating language switcher.
 * Uses CSS variables so dark mode is a single class toggle.
 */

.gaits-switcher,
.gaits-popup {
	--gaits-bg: #ffffff;
	--gaits-fg: #1f2430;
	--gaits-muted: #6b7280;
	--gaits-border: #e5e7eb;
	--gaits-accent: #e11d48;
	--gaits-accent-fg: #ffffff;
	--gaits-hover: #f5f5f7;
	--gaits-shadow: 0 12px 40px rgba(0,0,0,.18);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
.gaits-switcher *,
.gaits-popup * { box-sizing: border-box; }

.gaits-switcher.gaits-dark,
.gaits-popup.gaits-dark {
	--gaits-bg: #1b1f27;
	--gaits-fg: #f3f4f6;
	--gaits-muted: #9aa1ac;
	--gaits-border: #333a45;
	--gaits-hover: #262c36;
	--gaits-shadow: 0 12px 40px rgba(0,0,0,.5);
}

/* ---------------- Floating switcher ---------------- */
.gaits-switcher {
	position: fixed;
	z-index: 99990;
}
.gaits-pos-bottom-right { right: 20px; bottom: 20px; }
.gaits-pos-bottom-left  { left: 20px;  bottom: 20px; }
.gaits-pos-top-right    { right: 20px; top: 20px; }
.gaits-pos-top-left     { left: 20px;  top: 20px; }

.gaits-fab {
	width: 52px; height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--gaits-accent);
	color: var(--gaits-accent-fg);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--gaits-shadow);
	transition: transform .15s ease;
}
.gaits-fab:hover { transform: scale(1.06); }

.gaits-panel {
	position: absolute;
	bottom: 64px; right: 0;
	width: 280px; max-height: 60vh;
	background: var(--gaits-bg);
	color: var(--gaits-fg);
	border: 1px solid var(--gaits-border);
	border-radius: 14px;
	box-shadow: var(--gaits-shadow);
	overflow: hidden;
	display: none;
	flex-direction: column;
}
.gaits-pos-top-right .gaits-panel,
.gaits-pos-top-left  .gaits-panel { bottom: auto; top: 64px; }
.gaits-pos-bottom-left .gaits-panel,
.gaits-pos-top-left    .gaits-panel { right: auto; left: 0; }

.gaits-switcher[data-open="true"] .gaits-panel { display: flex; }

.gaits-panel-head { padding: 10px; border-bottom: 1px solid var(--gaits-border); }
.gaits-search,
.gaits-popup-search {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--gaits-border);
	border-radius: 8px;
	background: var(--gaits-bg);
	color: var(--gaits-fg);
	font-size: 14px;
}
.gaits-lang-list,
.gaits-popup-list {
	list-style: none; margin: 0; padding: 6px;
	overflow-y: auto;
}
.gaits-lang {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--gaits-fg);
	font-size: 14px;
}
.gaits-lang:hover { background: var(--gaits-hover); }
.gaits-lang.is-current { background: color-mix(in srgb, var(--gaits-accent) 12%, transparent); font-weight: 600; }
.gaits-flag { font-size: 18px; line-height: 1; }
.gaits-en { margin-left: auto; color: var(--gaits-muted); font-size: 12px; }

/* ---------------- Popup ---------------- */
.gaits-popup {
	position: fixed; inset: 0;
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
}
.gaits-popup[hidden] { display: none; }
.gaits-popup-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.5);
	backdrop-filter: blur(2px);
}
.gaits-popup-box {
	position: relative;
	width: 92%; max-width: 420px;
	background: var(--gaits-bg);
	color: var(--gaits-fg);
	border-radius: 18px;
	box-shadow: var(--gaits-shadow);
	padding: 26px 24px 20px;
	max-height: 86vh; overflow-y: auto;
	animation: gaits-pop .18s ease;
}
@keyframes gaits-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.gaits-popup-box h2 { margin: 0 0 14px; font-size: 20px; }
.gaits-popup-close {
	position: absolute; top: 12px; right: 14px;
	border: none; background: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--gaits-muted);
}
.gaits-reco { color: var(--gaits-muted); font-size: 14px; margin-bottom: 8px; }
.gaits-reco strong { color: var(--gaits-fg); font-size: 16px; }
.gaits-continue {
	width: 100%;
	padding: 12px;
	border: none; border-radius: 10px;
	background: var(--gaits-accent);
	color: var(--gaits-accent-fg);
	font-size: 15px; font-weight: 600; cursor: pointer;
	margin-bottom: 14px;
}
.gaits-or { text-align: center; color: var(--gaits-muted); font-size: 13px; margin-bottom: 10px; }
.gaits-popup-search { margin-bottom: 8px; }
.gaits-popup-list { max-height: 220px; border: 1px solid var(--gaits-border); border-radius: 10px; }
.gaits-popup-list .gaits-lang { font-size: 14px; }
.gaits-remember { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--gaits-muted); }

/* RTL */
[dir="rtl"] .gaits-en { margin-left: 0; margin-right: auto; }

/* Mobile */
@media (max-width: 480px) {
	.gaits-panel { width: min(88vw, 300px); }
	.gaits-fab { width: 48px; height: 48px; }
}