/**
 * Language Switcher CSS
 * Styles for language switching components in the Portal app
 */

/* ==========================================================================
   LOGIN PAGE LANGUAGE SWITCHER
   ========================================================================== */

/* Language option buttons on login page */
.language-switcher-form .language-option {
  border: 1px dashed var(--kt-gray-300);
  background-color: transparent;
  color: var(--kt-gray-700);
  transition: all 0.15s ease;
  min-width: 120px;
  position: relative;
}

.language-switcher-form .language-option:hover {
  border-color: var(--kt-primary);
  background-color: var(--kt-light-primary);
  color: var(--kt-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.language-switcher-form .language-option.active {
  border-color: var(--kt-primary);
  background-color: var(--kt-light-primary);
  color: var(--kt-primary);
  font-weight: 600;
}

.language-switcher-form .language-option.active::after {
  content: "✓";
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: var(--kt-primary);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   TOPBAR MENU LANGUAGE SWITCHER
   ========================================================================== */

/* Language switcher button styling to match menu links */
.language-switcher-form .menu-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.language-switcher-form .menu-link:hover {
  background-color: var(--kt-menu-link-hover-bg, #f5f8fa);
  color: var(--kt-menu-link-hover-color, #7e8299);
}

.language-switcher-form .menu-link.active {
  background-color: var(--kt-menu-link-active-bg, #e1f0ff);
  color: var(--kt-menu-link-active-color, #009ef7);
}