/**
 * File: public/css/tarjomyar.css
 * Tarjomyar Frontend Styles
 *
 * Core frontend CSS for all widget modes with RTL-first design approach,
 * Liquid Glass aesthetic implementation, responsive behavior, accessibility
 * compliance, and seamless WordPress theme integration.
 *
 * @package    Tarjomyar
 * @author     Sirvan Alirezaei
 * @copyright  2026 Sirvan Alirezaei. All rights reserved.
 * @license    Proprietary
 * @since      1.0.0
 */

/* =============================================================================
   CSS Custom Properties - Liquid Glass Design System
   ============================================================================= */

:root {
  /* Surfaces & Glass Effects */
  --tjy-surface-primary: #0f0f1a;
  --tjy-surface-secondary: #161625;
  --tjy-surface-elevated: #1a1a2e;
  --tjy-glass-bg: rgba(255, 255, 255, 0.04);
  --tjy-glass-bg-hover: rgba(255, 255, 255, 0.07);
  --tjy-glass-bg-active: rgba(255, 255, 255, 0.10);
  --tjy-glass-border: rgba(255, 255, 255, 0.08);
  --tjy-glass-blur: blur(20px);
  --tjy-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --tjy-glass-radius: 16px;
  --tjy-glass-radius-sm: 8px;
  --tjy-glass-radius-lg: 24px;

  /* Typography */
  --tjy-font-family-fa: 'Vazirmatn', system-ui, Tahoma, sans-serif;
  --tjy-font-family-en: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tjy-font-size-xs: 0.75rem;
  --tjy-font-size-sm: 0.875rem;
  --tjy-font-size-base: 1rem;
  --tjy-font-size-lg: 1.125rem;

  /* Colors */
  --tjy-text-primary: #e8e8ec;
  --tjy-text-secondary: #8888aa;
  --tjy-text-muted: #555566;
  --tjy-accent-primary: #4fc3f7;
  --tjy-accent-hover: #81d4fa;
  --tjy-accent-active: #29b6f6;

  /* Widget colors supplied by the renderer and scoped per widget. */
  --tjy-switcher-text: #1f2937;
  --tjy-switcher-arrow: #4b5563;
  --tjy-switcher-border: #cbd5e1;
  --tjy-switcher-bg: #ffffff;
  --tjy-switcher-bg-hover: #f1f5f9;
  --tjy-dropdown-text: #111827;
  --tjy-dropdown-hover: #dbeafe;
  --tjy-dropdown-bg: #ffffff;
  --tjy-text-on-accent: #0f172a;

  /* Spacing */
  --tjy-space-xs: 4px;
  --tjy-space-sm: 8px;
  --tjy-space-md: 16px;
  --tjy-space-lg: 24px;
  --tjy-space-xl: 32px;

  /* Motion */
  --tjy-duration-fast: 150ms;
  --tjy-duration-base: 250ms;
  --tjy-duration-slow: 400ms;
  --tjy-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Light theme adjustments */
@media (prefers-color-scheme: light) {
  :root {
    --tjy-surface-primary: #ffffff;
    --tjy-surface-secondary: #f8f9fa;
    --tjy-surface-elevated: #ffffff;
    --tjy-glass-bg: rgba(255, 255, 255, 0.7);
    --tjy-glass-bg-hover: rgba(255, 255, 255, 0.9);
    --tjy-glass-border: rgba(0, 0, 0, 0.1);
    --tjy-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --tjy-text-primary: #1a1a1a;
    --tjy-text-secondary: #6b7280;
    --tjy-text-muted: #9ca3af;
  }
}

/* =============================================================================
   Auto-placement isolation
   ============================================================================= */

/*
 * The global widget is emitted from wp_footer, where themes often apply
 * display:none, opacity, overflow clipping, transforms, or a low stacking
 * context to the footer wrapper. widget-renderer.js moves this neutral slot
 * directly under body; these rules also neutralize ID/class rules that target
 * the slot itself. Explicitly placed widgets are intentionally not affected.
 */
#tarjomyar-auto-slot {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
  isolation: isolate;
  z-index: auto !important;
}

#tarjomyar-auto-slot > .tarjomyar-widget {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* The global inline modes have a real document slot. Do not inherit the
 * footer's constrained width, hidden overflow, or theme alignment rules. */
#tarjomyar-auto-slot > .tarjomyar-widget:not(.tjy-widget-float):not(.tjy-widget-sticky_bar) {
  margin: var(--tjy-space-md) 0;
  vertical-align: middle;
}

#tarjomyar-auto-slot.tjy-auto-sticky_bar {
  height: 0 !important;
  min-height: 0 !important;
}

#tarjomyar-auto-slot.tjy-auto-sticky_bar > .tarjomyar-widget {
  display: block !important;
}

#tarjomyar-auto-slot.tjy-auto-float > .tarjomyar-widget,
#tarjomyar-auto-slot.tjy-auto-sticky_bar > .tarjomyar-widget {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =============================================================================
   Base Widget Styles
   ============================================================================= */

.tarjomyar-widget {
  font-family: var(--tjy-font-family-en);
  font-size: var(--tjy-font-size-base);
  line-height: 1.5;
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  position: relative;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147482990;
}

/* Do not let broad theme selectors hide the actual triggers. */
.tarjomyar-widget .tjy-float-trigger,
.tarjomyar-widget .tjy-dropdown-trigger,
.tarjomyar-widget .tjy-popup-trigger,
.tarjomyar-widget .tjy-globe-trigger {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tarjomyar-widget.tjy-rtl {
  font-family: var(--tjy-font-family-fa);
  direction: rtl;
  text-align: right;
}

.tarjomyar-widget * {
  box-sizing: border-box;
}

.tarjomyar-widget img {
  max-width: 100%;
}

.tarjomyar-widget button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

.tarjomyar-widget a {
  text-decoration: none;
  color: inherit;
  outline: none;
}

/* Focus management for accessibility */
.tarjomyar-widget button:focus-visible,
.tarjomyar-widget a:focus-visible {
  outline: 2px solid var(--tjy-accent-primary);
  outline-offset: 2px;
  border-radius: var(--tjy-glass-radius-sm);
}

/* Flag icons */
.tjy-flag-icon {
  display: inline-block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--tjy-duration-fast) var(--tjy-easing-standard);
}

.tjy-flag-icon:hover {
  transform: scale(1.05);
}

.tjy-flag-size-16 .tjy-flag-icon { width: 16px; height: 12px; }
.tjy-flag-size-24 .tjy-flag-icon { width: 24px; height: 18px; }
.tjy-flag-size-32 .tjy-flag-icon { width: 32px; height: 24px; }
.tjy-flag-size-48 .tjy-flag-icon { width: 48px; height: 36px; }

/* Language labels */
.tjy-lang-label {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  transition: color var(--tjy-duration-fast) var(--tjy-easing-standard);
}

/* Current language indicator */
.tjy-current {
  opacity: 0.7;
  pointer-events: none;
}

.tjy-current .tjy-lang-label {
  font-weight: 600;
  color: var(--tjy-accent-primary);
}

/* =============================================================================
   Widget Mode: Dropdown
   ============================================================================= */

.tjy-widget-dropdown .tjy-language-select {
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-md);
  font-family: inherit;
  font-size: inherit;
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  color-scheme: light;
  backdrop-filter: var(--tjy-glass-blur);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
  min-width: 120px;
}

.tjy-widget-dropdown .tjy-language-select:hover {
  background: var(--tjy-glass-bg-hover);
  transform: translateY(-1px);
}

.tjy-widget-dropdown .tjy-language-select:focus {
  background: var(--tjy-switcher-bg-hover, var(--tjy-glass-bg-active));
  border-color: var(--tjy-accent-primary);
}

.tjy-widget-dropdown .tjy-language-select option {
  color: var(--tjy-dropdown-text, #111827);
  background: var(--tjy-dropdown-bg, #ffffff);
}

/* =============================================================================
   Widget Mode: Dropdown with Flags
   ============================================================================= */

.tjy-dropdown-container {
  position: relative;
  display: inline-block;
}

.tjy-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--tjy-space-sm);
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-md);
  backdrop-filter: var(--tjy-glass-blur);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
  cursor: pointer;
  min-width: 140px;
}

.tjy-dropdown-trigger:hover {
  background: var(--tjy-switcher-bg-hover, var(--tjy-glass-bg-hover));
  transform: translateY(-1px);
}

.tjy-dropdown-trigger[aria-expanded="true"] {
  background: var(--tjy-switcher-bg-hover, var(--tjy-glass-bg-active));
  border-color: var(--tjy-accent-primary);
}

.tjy-dropdown-arrow {
  margin-left: auto;
  color: var(--tjy-switcher-arrow, currentColor);
  font-size: 0.75em;
  transition: transform var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-dropdown-trigger[aria-expanded="true"] .tjy-dropdown-arrow {
  transform: rotate(180deg);
}

.tjy-dropdown-menu {
  display: block;
  position: absolute;
  top: calc(100% + var(--tjy-space-xs));
  left: 0;
  min-width: 100%;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--tjy-dropdown-bg, var(--tjy-glass-bg));
  color: var(--tjy-dropdown-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius-sm);
  backdrop-filter: var(--tjy-glass-blur);
  box-shadow: var(--tjy-glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
  z-index: 2147483002;
  max-height: 300px;
  overflow-y: auto;
}

.tjy-dropdown-menu[aria-hidden="false"] {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tjy-dropdown-menu[aria-hidden="false"] .tjy-dropdown-option {
  visibility: visible !important;
}

.tarjomyar-widget .tjy-dropdown-option {
  display: flex !important;
  align-items: center;
  gap: var(--tjy-space-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-md);
  transition: background-color var(--tjy-duration-fast) var(--tjy-easing-standard);
  cursor: pointer;
  white-space: nowrap;
}

.tjy-dropdown-option:hover,
.tjy-dropdown-option:focus-visible {
  background: var(--tjy-dropdown-hover, var(--tjy-glass-bg-hover));
}

.tjy-dropdown-option:first-child {
  border-radius: var(--tjy-glass-radius-sm) var(--tjy-glass-radius-sm) 0 0;
}

.tjy-dropdown-option:last-child {
  border-radius: 0 0 var(--tjy-glass-radius-sm) var(--tjy-glass-radius-sm);
}

/* =============================================================================
   Widget Mode: Popup Modal
   ============================================================================= */

.tjy-popup-trigger {
  display: flex;
  align-items: center;
  gap: var(--tjy-space-sm);
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-md);
  backdrop-filter: var(--tjy-glass-blur);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
  cursor: pointer;
}

.tjy-popup-trigger:hover {
  background: var(--tjy-switcher-bg-hover, var(--tjy-glass-bg-hover));
  transform: translateY(-1px);
}

.tjy-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483003;
  opacity: 0;
  visibility: hidden;
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-popup-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.tjy-popup-content {
  background: var(--tjy-dropdown-bg, var(--tjy-surface-primary));
  color: var(--tjy-dropdown-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  transform: scale(0.9);
  transition: transform var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-popup-overlay[aria-hidden="false"] .tjy-popup-content {
  transform: scale(1);
}

.tjy-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tjy-space-lg);
  border-bottom: 1px solid var(--tjy-glass-border);
}

.tjy-popup-title {
  margin: 0;
  font-size: var(--tjy-font-size-lg);
  font-weight: 600;
  color: var(--tjy-text-primary);
}

.tjy-popup-close {
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--tjy-space-sm);
  border-radius: 50%;
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
}

.tjy-popup-close:hover {
  background: var(--tjy-glass-bg-hover);
}

.tjy-search-container {
  position: relative;
  padding: var(--tjy-space-lg);
  border-bottom: 1px solid var(--tjy-glass-border);
}

.tjy-language-search {
  width: 100%;
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-xl) var(--tjy-space-sm) var(--tjy-space-md);
  font-family: inherit;
  font-size: inherit;
  color: var(--tjy-dropdown-text, var(--tjy-text-primary));
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-language-search:focus {
  background: var(--tjy-glass-bg-active);
  border-color: var(--tjy-accent-primary);
}

.tjy-search-icon {
  position: absolute;
  right: var(--tjy-space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tjy-text-muted);
  pointer-events: none;
}

.tjy-popup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--tjy-space-xs);
  padding: var(--tjy-space-lg);
  max-height: 400px;
  overflow-y: auto;
}

.tjy-popup-item {
  display: flex;
  align-items: center;
  gap: var(--tjy-space-sm);
  padding: var(--tjy-space-sm);
  border-radius: var(--tjy-glass-radius-sm);
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
  cursor: pointer;
}

.tjy-popup-item:hover {
  background: var(--tjy-glass-bg-hover);
  transform: translateY(-1px);
}

.tjy-popup-item.tjy-current {
  background: var(--tjy-accent-primary);
  color: var(--tjy-text-on-accent, #0f172a);
}

/* =============================================================================
   Widget Mode: Horizontal Flags
   ============================================================================= */

.tjy-flags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tjy-space-sm);
  align-items: center;
}

.tarjomyar-widget .tjy-flag-link {
  display: inline-block !important;
  visibility: visible !important;
  padding: var(--tjy-space-xs);
  border-radius: var(--tjy-glass-radius-sm);
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
}

.tjy-flag-link:hover {
  background: var(--tjy-glass-bg-hover);
  transform: translateY(-2px);
}

.tjy-flag-link.tjy-current {
  background: var(--tjy-glass-bg);
  border: 1px solid var(--tjy-accent-primary);
}

/* =============================================================================
   Widget Mode: Flags with Names/Codes
   ============================================================================= */

.tjy-flags-names-container,
.tjy-flags-codes-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tjy-space-md);
  align-items: center;
}

.tjy-flag-name-item,
.tjy-flag-code-item {
  display: flex;
  align-items: center;
  gap: var(--tjy-space-xs);
  padding: var(--tjy-space-xs) var(--tjy-space-sm);
  border-radius: var(--tjy-glass-radius-sm);
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
  white-space: nowrap;
}

.tjy-flag-name-item:hover,
.tjy-flag-code-item:hover {
  background: var(--tjy-glass-bg-hover);
  transform: translateY(-1px);
}

.tjy-flag-name-item.tjy-current,
.tjy-flag-code-item.tjy-current {
  background: var(--tjy-glass-bg);
  color: var(--tjy-accent-primary);
}

.tjy-lang-code {
  font-family: var(--tjy-font-family-en);
  font-size: var(--tjy-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =============================================================================
   Widget Mode: Language Names/Codes Only
   ============================================================================= */

.tjy-lang-names-container,
.tjy-lang-codes-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tjy-space-sm);
  align-items: center;
}

.tjy-lang-name-link,
.tjy-lang-code-link {
  padding: var(--tjy-space-xs) var(--tjy-space-sm);
  border-radius: var(--tjy-glass-radius-sm);
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
  white-space: nowrap;
}

.tjy-lang-name-link:hover,
.tjy-lang-code-link:hover {
  background: var(--tjy-glass-bg-hover);
  color: var(--tjy-accent-hover);
}

.tjy-lang-name-link.tjy-current,
.tjy-lang-code-link.tjy-current {
  background: var(--tjy-accent-primary);
  color: var(--tjy-text-on-accent, #0f172a);
  font-weight: 600;
}

/* =============================================================================
   Widget Mode: Globe
   ============================================================================= */

.tjy-globe-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tjy-space-xs);
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  padding: var(--tjy-space-sm);
  border-radius: var(--tjy-glass-radius-sm);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-globe-trigger:hover {
  background: var(--tjy-glass-bg-hover);
  transform: translateY(-2px);
}

.tjy-globe-icon {
  transition: transform var(--tjy-duration-slow) var(--tjy-easing-standard);
}

.tjy-globe-trigger:hover .tjy-globe-icon {
  transform: rotate(15deg);
}

.tjy-globe-label {
  font-size: var(--tjy-font-size-xs);
  font-weight: 500;
  color: var(--tjy-text-secondary);
}

/* =============================================================================
   Widget Mode: Floating
   ============================================================================= */

.tjy-float-widget {
  position: fixed;
  z-index: 2147483000;
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-position-bottom-left {
  bottom: var(--tjy-space-lg);
  left: var(--tjy-space-lg);
}

.tjy-position-bottom-right {
  bottom: var(--tjy-space-lg);
  right: var(--tjy-space-lg);
}

.tjy-position-top-left {
  top: var(--tjy-space-lg);
  left: var(--tjy-space-lg);
}

.tjy-position-top-right {
  top: var(--tjy-space-lg);
  right: var(--tjy-space-lg);
}

.tjy-float-trigger {
  display: flex;
  align-items: center;
  gap: var(--tjy-space-xs);
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius);
  padding: var(--tjy-space-md);
  backdrop-filter: var(--tjy-glass-blur);
  box-shadow: var(--tjy-glass-shadow);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
  cursor: pointer;
}

.tjy-float-trigger:hover {
  background: var(--tjy-switcher-bg-hover, var(--tjy-glass-bg-hover));
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.tjy-float-arrow {
  font-size: 0.75em;
  transition: transform var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-float-trigger[aria-expanded="true"] .tjy-float-arrow {
  transform: rotate(180deg);
}

.tjy-float-arrow {
  color: var(--tjy-switcher-arrow, currentColor);
}

.tjy-float-menu {
  display: block;
  position: absolute;
  bottom: calc(100% + var(--tjy-space-sm));
  left: 0;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  background: var(--tjy-dropdown-bg, var(--tjy-glass-bg));
  color: var(--tjy-dropdown-text, var(--tjy-text-primary));
  border: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  border-radius: var(--tjy-glass-radius);
  backdrop-filter: var(--tjy-glass-blur);
  box-shadow: var(--tjy-glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-float-menu[aria-hidden="false"] {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tjy-position-bottom-right .tjy-float-menu,
.tjy-position-top-right .tjy-float-menu {
  left: auto;
  right: 0;
}

/* =============================================================================
   Widget Mode: Sticky Bar
   ============================================================================= */

.tjy-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2147482999;
  background: var(--tjy-switcher-bg, var(--tjy-glass-bg));
  color: var(--tjy-switcher-text, var(--tjy-text-primary));
  border-bottom: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  backdrop-filter: var(--tjy-glass-blur);
  box-shadow: var(--tjy-glass-shadow);
  transform: translateY(-100%);
  transition: transform var(--tjy-duration-base) var(--tjy-easing-standard);
}

.tjy-sticky-bar.tjy-sticky-top {
  top: 0;
}

.tjy-sticky-bar.tjy-sticky-bottom {
  bottom: 0;
  top: auto;
  border-bottom: none;
  border-top: 1px solid var(--tjy-switcher-border, var(--tjy-glass-border));
  transform: translateY(100%);
}

.tjy-sticky-bar.tjy-visible {
  transform: translateY(0);
}

.tjy-sticky-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tjy-space-lg);
  padding: var(--tjy-space-md) var(--tjy-space-lg);
  max-width: 1200px;
  margin: 0 auto;
}

.tjy-sticky-message {
  flex: 1;
  font-weight: 500;
  color: var(--tjy-text-primary);
}

.tjy-sticky-close {
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--tjy-space-xs);
  border-radius: 50%;
  transition: all var(--tjy-duration-fast) var(--tjy-easing-standard);
  margin-left: var(--tjy-space-lg);
}

.tjy-sticky-close:hover {
  background: var(--tjy-glass-bg-hover);
}

/* =============================================================================
   Attribution
   ============================================================================= */

.tjy-attribution {
  margin-top: var(--tjy-space-sm);
  padding-top: var(--tjy-space-sm);
  border-top: 1px solid var(--tjy-glass-border);
  text-align: center;
}

.tjy-attribution small {
  font-size: var(--tjy-font-size-xs);
  color: var(--tjy-text-muted);
  opacity: 0.8;
}

.tjy-attribution a {
  color: var(--tjy-accent-primary);
  transition: color var(--tjy-duration-fast) var(--tjy-easing-standard);
}

.tjy-attribution a:hover {
  color: var(--tjy-accent-hover);
}

/* =============================================================================
   Error States
   ============================================================================= */

.tarjomyar-widget-error,
.tarjomyar-shortcode-error {
  display: inline-block;
  background: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.3);
  border-radius: var(--tjy-glass-radius-sm);
  padding: var(--tjy-space-sm) var(--tjy-space-md);
  color: #ef5350;
  font-size: var(--tjy-font-size-sm);
  font-style: italic;
}

/* =============================================================================
   Loading States
   ============================================================================= */

.tjy-loading {
  opacity: 0.6;
  pointer-events: none;
}

.tjy-loading-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tjy-glass-border);
  border-top: 2px solid var(--tjy-accent-primary);
  border-radius: 50%;
  animation: tjy-spin 1s linear infinite;
}

@keyframes tjy-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 768px) {
  .tarjomyar-widget {
    font-size: var(--tjy-font-size-sm);
  }
  
  .tjy-flags-container,
  .tjy-flags-names-container,
  .tjy-lang-names-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .tjy-flag-link,
  .tjy-flag-name-item,
  .tjy-lang-name-link {
    justify-content: center;
    text-align: center;
    padding: var(--tjy-space-sm);
  }
  
  .tjy-popup-content {
    width: 95%;
    margin: var(--tjy-space-lg);
  }
  
  .tjy-popup-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--tjy-space-xs);
  }
  
  .tjy-float-widget {
    max-width: calc(100vw - (2 * var(--tjy-space-md)));
  }

  .tjy-float-menu {
    max-width: calc(100vw - (2 * var(--tjy-space-md)));
  }
  
  .tjy-sticky-content {
    flex-direction: column;
    text-align: center;
    padding: var(--tjy-space-md);
  }
}

@media (max-width: 480px) {
  .tjy-popup-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .tjy-dropdown-menu {
    min-width: 200px;
    left: auto;
    right: 0;
  }
}

/* =============================================================================
   RTL Support
   ============================================================================= */

[dir="rtl"] .tjy-dropdown-menu {
  left: auto;
  right: 0;
}

[dir="rtl"] .tjy-dropdown-arrow {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .tjy-search-icon {
  right: auto;
  left: var(--tjy-space-md);
}

[dir="rtl"] .tjy-sticky-close {
  margin-left: 0;
  margin-right: var(--tjy-space-lg);
}

/* =============================================================================
   Reduced Motion Support
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tarjomyar-widget *,
  .tarjomyar-widget *::before,
  .tarjomyar-widget *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  
  .tjy-globe-icon {
    animation: none;
  }
}

/* =============================================================================
   High Contrast Support
   ============================================================================= */

@media (prefers-contrast: high) {
  :root {
    --tjy-glass-bg: rgba(255, 255, 255, 0.9);
    --tjy-glass-border: rgba(0, 0, 0, 0.5);
    --tjy-text-primary: #000000;
    --tjy-text-secondary: #333333;
    --tjy-accent-primary: #0066cc;
  }
}

/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
  .tarjomyar-widget,
  .tjy-float-widget,
  .tjy-sticky-bar {
    display: none !important;
  }
}