/* ===== Иконка клавиатуры в правом нижнем углу блока авторизации ===== */
#jqk-toggle-img {
    position: absolute;
    right: 17px;
    bottom: 11px;
    width: 22px;
    cursor: pointer;
    opacity: .8;
    z-index: 10;
}
#jqk-toggle-img:hover { opacity: 1; }

/* Штатную кнопку библиотеки прячем: используем свою иконку */
#jqk-toggle-btn { display: none !important; }

/* ===== Сама клавиатура ===== */
/* keyboard.js вызывает $jqKeyboard.show(), поэтому прячем через visibility, а не display */
#jq-keyboard {
    position: absolute;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s;
    padding: 8px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-family: Arial, sans-serif;
    cursor: move;
    user-select: none;
}
#jq-keyboard.show { visibility: visible; opacity: 1; }

/* Неактивная раскладка */
#jq-keyboard .jqk-hide { display: none; }

/* Панель языков + кнопка закрытия */
#jqk-lang-cont {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.jqk-lang-btn {
    padding: 3px 10px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
}
.jqk-lang-btn.selected { background: #5b9bd5; color: #fff; border-color: #4a86bd; }

.minimize-btn {
    order: 99;
    margin-left: auto;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url("close.png") center / 14px no-repeat; /* картинка с крестиком */
    opacity: .7;
}
.minimize-btn:hover { opacity: 1; }

/* Ряды и кнопки */
.btn-row { display: flex; justify-content: center; margin-bottom: 5px; height: 35px; }
.jqk-btn {
    position: relative;
    width: 37px;
    height: 35px;
    background: #EEE;
    border: none;
    border-bottom: 2px solid #CCC;
    border-radius: 4px;
    margin: 0 2px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #666;
    overflow: hidden;
    cursor: pointer;
}
.jqk-btn:hover { background: #e8f0fa; }
.jqk-btn.clicked { background: #cfe0f3; }
.jqk-btn.selected { background: #5b9bd5; color: #fff; }

/* Подписи спецклавиш (библиотека вставляет в них  ) */
.jqk-btn.special { font-size: 12px; }
.jqk-btn.special { font-size: 0; }
.jqk-btn.special::before { font-size: 12px; }
.jqk-btn.backspace { min-width: 70px; }
.jqk-btn.backspace::before { content: "\2190 Backspace"; }
.jqk-btn.tab       { min-width: 50px; }
.jqk-btn.tab::before       { content: "Tab"; }
.jqk-btn.capslock  { min-width: 64px; }
.jqk-btn.capslock::before  { content: "Caps"; }
.jqk-btn.enter     { min-width: 64px; }
.jqk-btn.enter::before     { content: "Enter"; }
.jqk-btn.shift     { min-width: 76px; }
.jqk-btn.shift::before     { content: "Shift"; }
.jqk-btn.space { flex: none; min-width: 180px; }

/* Узкие экраны */
@media (max-width: 600px) {
    .jqk-btn { min-width: 22px; height: 30px; padding: 0 2px; font-size: 12px; }
    .jqk-btn.backspace::before { content: "\2190"; }
}