/* ============================================================
   perevod.css - страница переводчика (modulesPerevod/ucPerevod.ascx + js/mm/perevod.js).
   ============================================================ */

.nmPerevod { font: 13px/1.45 Arial, Helvetica, sans-serif; color: #222; max-width: 100%; }

.nmPerevodHead {
  padding-bottom: 10px;
  border-bottom: 2px solid #f0c000;
  margin-bottom: 12px;
}

.nmPerevodHead h3 { margin: 0; font: 700 21px/1.2 Arial, Helvetica, sans-serif; }

/* --- панель языков --- */

.nmPerevodBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.nmPerevodBar select {
  padding: 5px 6px;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #fff;
  font: 13px Arial, Helvetica, sans-serif;
  color: #222;
}

.nmPerevodSwap {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-size: 17px;
  color: #555;
  text-decoration: none;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #fff;
}

.nmPerevodSwap:hover { border-color: #c00; color: #c00; text-decoration: none; }

.nmPerevodSpace { flex: 1 1 auto; }

.nmPerevodGo {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #b9b9b9;
  border-radius: 3px;
  background: #ececec;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}

.nmPerevodGo:hover { border-color: #c00; color: #c00; background: #f4f4f4; text-decoration: none; }

/* --- поля --- */

.nmPerevodBoxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nmPerevodBox { min-width: 0; }

.nmPerevodSource, .nmPerevodResult {
  width: 100%;
  min-height: 190px;
  padding: 10px;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  background: #fff;
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  color: #222;
  box-sizing: border-box;
}

.nmPerevodSource { resize: vertical; }

.nmPerevodResult { background: #fafafa; overflow-wrap: break-word; white-space: pre-wrap; }

.nmPerevodCount { margin-top: 5px; font-size: 11px; color: #999; }

.nmPerevodBusy .nmPerevodResult { opacity: .5; }

.nmPerevodAbout { margin-top: 14px; font-size: 12px; color: #888; }

/* --- телефон --- */

@media (max-width: 700px) {
  .nmPerevodBoxes { grid-template-columns: minmax(0, 1fr); }
  .nmPerevodSource, .nmPerevodResult { min-height: 140px; }
  .nmPerevodGo { width: 100%; text-align: center; }
}