/* ============================================================
   Reusable on-screen kiosk keyboard.
   Scoped entirely under .keyboard so it can be dropped into any
   page via partials/keyboard.html without colliding with that
   page's own styles.
   ============================================================ */

.keyboard {
  --kb-primary: #bc0f2c;
  --kb-primary-dark: #8c0b22;
  --kb-ink: #17140f;
  --kb-line: #e3ded2;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--kb-line);
  padding: 35px 20px;

  z-index: 9999;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
  font-family: "Montserrat", sans-serif;

  /* Animation */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease,
    visibility 0.35s;
}

.keyboard.hidden {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.keyboard:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.keyboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--kb-ink);
}

.keyboard-header button {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--kb-primary);
  cursor: pointer;
  padding: 6px 10px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.keyboard-key {
  min-width: 90px;
  height: 90px;
  border: 1px solid var(--kb-line);
  background: #fff;
  border-radius: 8px;
  font-size: 18px;
  color: var(--kb-ink);
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}

.keyboard-key:hover {
  background: #f5f2ec;
}

.keyboard-key:active {
  transform: scale(0.96);
}

.keyboard-key.wide {
  min-width: 90px;
}

.keyboard-key.space {
  flex: 1;
  max-width: 500px;
}

.keyboard-key.active {
  background: var(--kb-ink);
  color: #fff;
  border-color: var(--kb-ink);
}

.keyboard-key.done {
  background: var(--kb-primary);
  color: #fff;
  border-color: var(--kb-primary);
}

.keyboard-key.done:hover {
  background: var(--kb-primary-dark);
}