/* MTX Translation Widget styles */
[data-mtx-widget] { position: relative; width: 100%; max-width: 400px; margin-bottom: 30px; }
[data-mtx-widget] .translate-button {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 16px; background: #fff; color: #333; border: 0;
  cursor: pointer; font-family: 'Overpass', sans-serif; font-size: 14px; font-weight: 500;
  transition: all 0.3s ease; z-index: 103;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
  -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15);
}
[data-mtx-widget] .translate-button:hover { background: #efefef; }
[data-mtx-widget] .translate-button.active { background: #fff100; color: #333; border: 1px solid #333; }
[data-mtx-widget] .translate-button.completed { background: #333; color: #fff; border: 1px solid #333; }
[data-mtx-widget] .translate-button.completed .button-icon,
[data-mtx-widget] .translate-button.completed .dropdown-arrow {
  fill: #fff; /* ensure the icon turns white in completed state */
  color: #fff;
}
[data-mtx-widget] .button-icon { width: 20px; height: 20px; margin-right: 10px; fill: currentColor; }
[data-mtx-widget] .dropdown-arrow { width: 18px; height: 18px; fill: currentColor; transition: transform 0.3s ease; }
[data-mtx-widget] .dropdown-arrow.up { transform: rotate(180deg); }
[data-mtx-widget] .language-dropdown {
  position: absolute; left: 0; right: 0; z-index: 9999; background: #fff; border: 1px solid #333;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); overflow: hidden;
}
[data-mtx-widget] .language-option {
  display: flex; align-items: center; padding: 12px 16px; cursor: pointer; transition: background-color 0.2s ease;
  font-size: 14px; color: #333; background: #fff;
}
[data-mtx-widget] .language-option:hover { background-color: #fff100; }
[data-mtx-widget] .language-option.selected {
  background-color: #fff7b3; /* subtle highlight */
  font-weight: 600;
}
[data-mtx-widget] .language-option.disabled { color: #999; cursor: not-allowed; background-color: #f9f9f9; }
[data-mtx-widget] .language-option.disabled:hover { background-color: #f9f9f9; }
[data-mtx-widget] .language-option:not(:last-child) { border-bottom: 1px solid #efefef; }

/* Emphasize translatable (non-current) languages */
[data-mtx-widget] .language-option:not(.disabled) { font-weight: 700; }