/* ============================================
   TAMMKREIZ LOCALE SWITCHER STYLES
   Design moderne et élégant
   ============================================ */

.tk-locale-switcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tk-space-2);
  padding: var(--tk-space-2) var(--tk-space-3);
  background: linear-gradient(135deg, var(--tk-gray-100) 0%, var(--tk-gray-200) 100%);
  border-radius: var(--tk-radius-lg);
  border: 2px solid var(--tk-gray-200);
  transition: all var(--tk-transition-fast);
  cursor: pointer;
}

.tk-locale-switcher:hover {
  background: linear-gradient(135deg, var(--tk-blue) 0%, var(--tk-blue-dark) 100%);
  border-color: var(--tk-blue);
  box-shadow: var(--tk-shadow-colored-blue);
}

.tk-locale-switcher:hover .tk-locale-icon,
.tk-locale-switcher:hover .tk-locale-chevron {
  color: var(--tk-white);
}

.tk-locale-switcher:hover .tk-locale-select {
  color: var(--tk-white);
}

.tk-locale-loading {
  opacity: 0.7;
  pointer-events: none;
}

.tk-locale-icon {
  font-size: var(--tk-font-size-base);
  color: var(--tk-gray-600);
  transition: all var(--tk-transition-fast);
  flex-shrink: 0;
}

.tk-locale-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  color: var(--tk-gray-700);
  font-weight: var(--tk-font-weight-semibold);
  font-size: var(--tk-font-size-sm);
  cursor: pointer;
  padding-right: var(--tk-space-3);
  min-width: 50px;
  transition: all var(--tk-transition-fast);
}

.tk-locale-select:focus {
  outline: none;
}

.tk-locale-select option {
  color: var(--tk-gray-800);
  background: var(--tk-white);
  padding: var(--tk-space-2);
}

.tk-locale-chevron {
  position: absolute;
  right: var(--tk-space-3);
  font-size: var(--tk-font-size-xs);
  color: var(--tk-gray-500);
  pointer-events: none;
  transition: all var(--tk-transition-fast);
}

/* Responsive */
@media (max-width: 768px) {
  .tk-locale-switcher {
    padding: var(--tk-space-2);
  }

  .tk-locale-select {
    font-size: var(--tk-font-size-xs);
    min-width: 40px;
    padding-right: var(--tk-space-2);
  }

  .tk-locale-chevron {
    right: var(--tk-space-2);
  }
}

@media (max-width: 480px) {
  .tk-locale-switcher {
    padding: var(--tk-space-1) var(--tk-space-2);
  }

  .tk-locale-icon {
    font-size: var(--tk-font-size-sm);
  }
}