/* 
  Language Dropdown Styles for DoseLoop Landing Pages
  Compatible with theme CSS variables: --primary, --text-2, --border, --surface, --shadow-lg, --primary-light, etc.
*/

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

.lang-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all 180ms ease;
  user-select: none;
  outline: none;
  white-space: nowrap;
}

.lang-dropdown-btn:hover,
.lang-dropdown-btn[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light, #F5EDD8);
}

.lang-dropdown-btn .fa-globe {
  font-size: 14px;
}

.lang-dropdown-btn .fa-chevron-down {
  font-size: 9px;
  transition: transform 180ms ease;
}

.lang-dropdown-btn[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 300;
}

/* Show class for active menu */
.lang-dropdown-content.show {
  display: block;
  animation: dropdownFadeIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-dropdown-content a {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 150ms ease;
  white-space: nowrap;
}

.lang-dropdown-content a:hover {
  background: var(--primary-light, #F5EDD8);
  color: var(--primary);
}

.lang-dropdown-content a.active {
  background: var(--primary);
  color: #FFFFFF;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive styles: max-width 479px (Mobile) */
@media (max-width: 479px) {
  .lang-dropdown-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
  }
  
  .lang-dropdown-btn .lang-text,
  .lang-dropdown-btn .fa-chevron-down {
    display: none;
  }
}