/* Language Selector Component Styles */
.language-selector {
  position: relative;
  z-index: 1001;
}

.language-selector-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.language-selector-button:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.language-selector-button .flag-icon {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}

.language-selector-button .arrow-icon {
  transition: transform 0.3s ease;
}

.language-selector.open .language-selector-button .arrow-icon {
  transform: rotate(180deg);
}

.language-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background-color: rgba(25, 25, 40, 0.95);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 180px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  visibility: hidden;
}

.language-selector.open .language-dropdown {
  max-height: 300px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--white);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.language-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.language-option.active {
  background-color: rgba(var(--primary-rgb), 0.3);
}

.language-option .flag-icon {
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
}

.language-option .language-name {
  flex: 1;
  font-size: 14px;
}

/* RTL Support */
[dir="rtl"] .language-dropdown {
  right: auto;
  left: 0;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .language-selector {
    margin-left: auto;
    margin-right: 60px; /* Space for mobile menu toggle */
  }
  
  .language-dropdown {
    width: 160px;
  }
  
  [dir="rtl"] .language-selector {
    margin-left: 60px;
    margin-right: auto;
  }
}

/* Add flag images */
.flag-en {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjM1IDY1MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGRlZnM+DQo8ZyBpZD0idW5pb24iPg0KPHVzZSB5PSItLjIiIHhsaW5rOmhyZWY9IiNYIi8+DQo8dXNlIHk9IjIuOCIgeGxpbms6aHJlZj0iI1giLz4NCjx1c2UgeT0iNS44IiB4bGluazpocmVmPSIjWCIvPg0KPC9nPg0KPGcgaWQ9IlgiPg0KPHVzZSB4bGluazpocmVmPSIjcyIvPg0KPHVzZSB5PSIuNCIgeGxpbms6aHJlZj0iI3MiLz4NCjx1c2UgeT0iLjgiIHhsaW5rOmhyZWY9IiNzIi8+DQo8dXNlIHk9IjEuMiIgeGxpbms6aHJlZj0iI3MiLz4NCjx1c2UgeT0iMS42IiB4bGluazpocmVmPSIjcyIvPg0KPC9nPg0KPGcgaWQ9InMiPg0KPHVzZSB4PSItLjIiIHhsaW5rOmhyZWY9IiN0Ii8+DQo8dXNlIHg9Ii4yIiB4bGluazpocmVmPSIjdCIvPg0KPHVzZSB4PSItLjQiIHhsaW5rOmhyZWY9IiN0Ii8+DQo8dXNlIHg9Ii40IiB4bGluazpocmVmPSIjdCIvPg0KPHVzZSB4PSItLjYiIHhsaW5rOmhyZWY9IiN0Ii8+DQo8dXNlIHg9Ii42IiB4bGluazpocmVmPSIjdCIvPg0KPC9nPg0KPGcgaWQ9InQiPg0KPHJlY3Qgd2lkdGg9Ii4xIiBoZWlnaHQ9Ii4xIiBmaWxsPSIjZmZmIi8+DQo8cmVjdCB5PSIuMiIgd2lkdGg9Ii4xIiBoZWlnaHQ9Ii4xIiBmaWxsPSIjZmZmIi8+DQo8L2c+DQo8L2RlZnM+DQo8cGF0aCBmaWxsPSIjMDAyODY4IiBkPSJNMCAwaDEyMzV2NjUwSDB6Ii8+DQo8cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTAwIiBkPSJNMCwwIEwxMjM1LDY1ME0xMjM1LDAgTDAsNjUwIi8+DQo8cGF0aCBzdHJva2U9IiNjODEwMmUiIHN0cm9rZS13aWR0aD0iNjYiIGQ9Ik0wLDAgTDEyMzUsNjUwTTEyMzUsMCBMMCw2NTAiLz4NCjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxMDAiIGQ9Ik02MTcuNSwwIEw2MTcuNSw2NTBNMCwzMjUgTDEyMzUsMzI1Ii8+DQo8cGF0aCBzdHJva2U9IiNjODEwMmUiIHN0cm9rZS13aWR0aD0iNjYiIGQ9Ik02MTcuNSwwIEw2MTcuNSw2NTBNMCwzMjUgTDEyMzUsMzI1Ii8+DQo8dXNlIHg9IjI0NyIgeT0iMTI1IiB4bGluazpocmVmPSIjdW5pb24iLz4NCjwvc3ZnPg0K');
}

.flag-zh {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTIwMCA4MDAiPg0KPHBhdGggZmlsbD0iI2RlMjkxMCIgZD0ibTAsMGgxMjAwdjgwMGgtMTIwMHoiLz4NCjxnIHRyYW5zZm9ybT0ibWF0cml4KDMuMiAwIDAgMy4yIDEyMCAxMjApIj4NCjxwYXRoIGZpbGw9IiNmZmRlMDAiIGQ9Im0tMTEuNSwtOS40IDIuOSw4LjggOS0uMi03LjIsNS41IDIuNyw4LjktNy4yLTUuMy03LjIsNS4zIDIuNy04LjktNy4yLTUuNSA5LC4yeiIvPg0KPHBhdGggZmlsbD0iI2ZmZGUwMCIgaWQ9InN0YXIiIGQ9Im0tMTEuNSw5IDIuMy02LjkgNS45LDQuMy0yLjMtNi45IDUuOS00LjMtNy4zLS4xLTIuMy02LjktMi4zLDYuOS03LjMsLjEgNS45LDQuMy0yLjMsNi45eiIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIgdHJhbnNmb3JtPSJyb3RhdGUoMjMuMDM2MjQzOTY5OTk5OTk0KSIvPg0KPHVzZSB4bGluazpocmVmPSIjc3RhciIgdHJhbnNmb3JtPSJyb3RhdGUoNDUuODY5ODk3OTQpIi8+DQo8dXNlIHhsaW5rOmhyZWY9IiNzdGFyIiB0cmFuc2Zvcm09InJvdGF0ZSg2OS45NDUzOTAzOSkiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3N0YXIiIHRyYW5zZm9ybT0icm90YXRlKDIwLjY1OTgwODI5KSIvPg0KPC9nPg0KPC9zdmc+DQo=');
}

.flag-ru {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NTAgMzAwIj4NCjxyZWN0IHdpZHRoPSI0NTAiIGhlaWdodD0iMTAwIiBmaWxsPSIjZmZmIi8+DQo8cmVjdCB3aWR0aD0iNDUwIiBoZWlnaHQ9IjEwMCIgeT0iMTAwIiBmaWxsPSIjMDAzNWFkIi8+DQo8cmVjdCB3aWR0aD0iNDUwIiBoZWlnaHQ9IjEwMCIgeT0iMjAwIiBmaWxsPSIjZDUyYjFlIi8+DQo8L3N2Zz4NCg==');
}

.flag-es {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NTAgNTAwIj4NCjxyZWN0IHdpZHRoPSI3NTAiIGhlaWdodD0iNTAwIiBmaWxsPSIjYzYwYjFlIi8+DQo8cmVjdCB3aWR0aD0iNzUwIiBoZWlnaHQ9IjI1MCIgeT0iMTI1IiBmaWxsPSIjZmZjNDAwIi8+DQo8L3N2Zz4NCg==');
}

.flag-ar {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MDAgNDAwIj4NCjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjMDA3YTNkIi8+DQo8cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjI2Ni42NyIgZmlsbD0iI2ZmZiIvPg0KPHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIxMzMuMzMiIGZpbGw9IiMwMDAiLz4NCjxwYXRoIGZpbGw9IiNjZTExMjYiIGQ9Im0wLDQwMCAyMDAsLTIwMCAyMDAsMjAweiIvPg0KPC9zdmc+DQo=');
}

.flag-fr {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MDAgNjAwIj4NCjxyZWN0IHdpZHRoPSI5MDAiIGhlaWdodD0iNjAwIiBmaWxsPSIjRUQyOTM5Ii8+DQo8cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iI0ZGRiIvPg0KPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSI2MDAiIGZpbGw9IiMyODJCNUEiLz4NCjwvc3ZnPg0K');
}

.flag-icon {
  display: inline-block;
  width: 20px;
  height: 15px;
  background-size: cover;
  background-position: center;
}