/*
 * Shared language switcher styles for cocowebml.
 * Works for both the home page (.lang-chips) and legacy pages (.lang-bar).
 */

.lang-bar,
.lang-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-bar {
  justify-content: center;
  padding: 6px 0 10px;
}

.lang-btn,
.lang-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #64748b;
  background: #fff;
  border: 1px solid #dbe2ef;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s,
    box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.lang-btn:hover,
.lang-chip:hover {
  border-color: #b9c8e4;
}

.lang-btn:active,
.lang-chip:active {
  transform: scale(0.95);
}

.lang-btn.active,
.lang-chip.active {
  color: #fff;
  background: linear-gradient(135deg, #4f8df7, #3b7bf0);
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(79, 141, 247, 0.35);
}

.lang-btn:focus-visible,
.lang-chip:focus-visible {
  outline: 2px solid #4f8df7;
  outline-offset: 2px;
}