/* Транслитерация в новом виде: seo-translit-url, transliteratsiya-onlayn, dlya-zagranpasporta, dlya-aviabiletov, po-standartu-bsi, adresa */
/* Файл подключается после rd-geometriya.css и раньше calc.css, redesign.css и rd.css, поэтому селекторы начинаются с .rd #simple-calc */

/* Выбор стандарта и разделителя */
.rd #simple-calc :is(.translit-standard-group, .translit-sep-group) { display: block; margin: 0; padding: 0; }
.rd #simple-calc :is(.translit-standard-label, .translit-sep-label) { display: block; margin: 0 0 8px; padding: 0; font: 500 13px/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; }
.rd #simple-calc :is(.translit-standard-select, .translit-sep-select) { display: block; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; max-width: 100%; height: 48px; margin: 0; padding: 0 44px 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7075' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; border: 1px solid var(--line); border-radius: 14px; box-shadow: none; outline: none; font: 500 16px/1.2 var(--f-ui); color: var(--ink); cursor: pointer; }
.rd #simple-calc :is(.translit-standard-select, .translit-sep-select):focus { border-color: var(--accent); }

/* Поля текста: слева ввод, справа результат */
.rd #simple-calc .form-group__wrapper .form-group textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 180px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--tile); box-shadow: none; outline: none; font: 400 16px/1.5 var(--f-ui); color: var(--ink); resize: vertical; }
.rd #simple-calc .form-group__wrapper .form-group textarea::placeholder { color: var(--mute); opacity: .7; }
.rd #simple-calc .form-group__wrapper .form-group textarea:focus { border-color: var(--accent); }
.rd #simple-calc .form-group__wrapper > .form-group:last-child textarea { border-color: var(--accent-mid); background: #fff; }
.rd #simple-calc .form-group__wrapper > .form-group:last-child textarea:focus { border-color: var(--accent); }

/* Счётчик символов */
.rd #simple-calc .translit-counter { margin: -6px 0 0; padding: 0; font: 400 13px/1.4 var(--f-ui); color: var(--mute); opacity: 1; }

/* Кнопки: «Транслитерировать» и «Скопировать» у авиабилетов размечены как form-group__submit */
.rd #simple-calc .form-group__submit { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: auto; min-width: 0; max-width: none; height: 46px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; background: var(--pill); box-shadow: none; font: 500 14px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; cursor: pointer; opacity: 1; transition: opacity .15s; }
.rd #simple-calc .form-group__submit.black { padding: 0 28px; background: var(--ink); color: #fff; }
.rd #simple-calc .form-group__submit:hover { opacity: .85; }
.rd #simple-calc .form-group__submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 639px) {
    .rd #simple-calc .form-group__wrapper .form-group textarea { min-height: 140px; }
    .rd #simple-calc .btn-wrapper > .form-group__submit { width: 100%; }
    .rd #simple-calc :is(.translit-standard-select, .translit-sep-select) { padding: 0 36px 0 14px; background-position: right 10px center; }
}

@media (prefers-reduced-motion: reduce) {
    .rd #simple-calc .form-group__submit { transition: none; }
}