/* Language Switcher Dropdown Styles */
.language-switcher-dropdown {
  @apply relative inline-block text-left;
}

.language-dropdown-toggle {
  @apply inline-flex items-center justify-center px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition-colors duration-150;
}

.language-dropdown-toggle:focus {
  @apply ring-pink-500 border-pink-500;
}

.language-dropdown-menu {
  @apply absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50 origin-top-right;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
}

.language-dropdown-menu.show {
  @apply block;
  transform: scale(1);
  opacity: 1;
}

.language-dropdown-item {
  @apply text-gray-700 group flex items-center px-4 py-2 text-sm transition-colors duration-150 cursor-pointer;
}

.language-dropdown-item:hover {
  @apply bg-gray-100 text-gray-900;
}

.language-dropdown-item--active {
  @apply text-gray-900 bg-gray-50 font-medium;
}

.language-dropdown-item--active:hover {
  @apply bg-gray-100;
}

/* Flag styles */
.language-flag {
  @apply text-lg inline-block;
}

.language-name {
  @apply truncate;
}

.language-code {
  @apply font-medium uppercase;
}

/* Animation for dropdown opening/closing */
.language-dropdown-menu.hidden {
  @apply invisible;
  transform: scale(0.95);
  opacity: 0;
}

/* Focus states for accessibility */
.language-dropdown-item:focus {
  @apply bg-gray-100 text-gray-900 outline-none;
}

/* RTL support for Arabic */
[dir="rtl"] .language-dropdown-menu {
  @apply left-0 right-auto;
}

[dir="rtl"] .language-flag {
  @apply ml-3 mr-0;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .language-dropdown-menu {
    @apply w-40;
  }
  
  .language-name {
    @apply text-xs;
  }
  
  .language-flag {
    @apply text-base;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .language-dropdown-toggle {
    @apply border-2 border-gray-800;
  }
  
  .language-dropdown-item:hover {
    @apply bg-gray-200;
  }
}

/* Legacy styles for old template if needed */
.language-switcher-links {
  @apply flex items-center gap-3;
}

.language-switcher-links li {
  @apply list-none;
}

.language-link__link,
.language-link__text {
  @apply flex items-center gap-2;
}