/* Global on-screen keyboard (touchscreen POS) */

.pos-vk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50000;
  padding: 0.65rem 0.75rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: #161616;
  color: #f5f5f5;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.pos-vk[hidden] {
  display: none !important;
}

.pos-vk__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  padding: 0 0.15rem;
}

.pos-vk__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.65);
}

.pos-vk__close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  border-radius: 6px;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.pos-vk__close:hover,
.pos-vk__close:active {
  background: rgba(255, 255, 255, 0.16);
}

.pos-vk__keys {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 1100px;
  margin: 0 auto;
}

.pos-vk--numeric .pos-vk__keys {
  max-width: 420px;
}

.pos-vk__row {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.pos-vk__row--num .pos-vk__key {
  flex: 1 1 33%;
  min-height: 4rem;
  font-size: 1.45rem;
}

.pos-vk__key--num-enter {
  flex: 1 1 100% !important;
}

.pos-vk__key {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.65rem;
  margin: 0;
  padding: 0.45rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #2a2a2a;
  color: #f5f5f5;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.pos-vk__key:active {
  background: #3a3a3a;
  transform: translateY(1px);
}

.pos-vk__key--wide {
  flex: 1.35 1 0;
  font-size: 1.1rem;
}

.pos-vk__key--space {
  flex: 5 1 0;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.85);
}

.pos-vk__key--enter {
  flex: 1.7 1 0;
  background: #f5f5f5;
  color: #111;
  border-color: #f5f5f5;
}

.pos-vk__key--enter:active {
  background: #e4e4e4;
}

.pos-vk__key.is-active {
  background: #4b5563;
  border-color: rgba(255, 255, 255, 0.35);
}

html {
  --pos-vk-height: 0px;
}

html.pos-vk-open,
body.pos-vk-open {
  padding-bottom: calc(var(--pos-vk-height, 0px) + 0.75rem);
}

/* Keep focused fields clear of the keyboard when scrolled into view */
html.pos-vk-open input:focus,
html.pos-vk-open textarea:focus {
  scroll-margin-bottom: calc(var(--pos-vk-height, 0px) + 1.25rem);
  scroll-margin-top: 1rem;
}

/*
 * Fixed modals are centered and ignore body padding — pin them above the
 * keyboard and shrink max-height so their bodies can scroll the focused field.
 */
html.pos-vk-open .pos-more-modal.is-open.pos-vk-modal-lift,
html.pos-vk-open .pos-vk-modal-lift[role='dialog'],
html.pos-vk-open dialog.pos-vk-modal-lift {
  top: 0.65rem !important;
  bottom: auto !important;
  transform: translate(-50%, 0) scale(1) !important;
  max-height: calc(100vh - var(--pos-vk-height, 0px) - 1.15rem) !important;
  max-height: calc(100dvh - var(--pos-vk-height, 0px) - 1.15rem) !important;
}

html.pos-vk-open .pos-vk-modal-lift .pos-more-modal-body,
html.pos-vk-open .pos-vk-modal-lift .pos-product-modal-body,
html.pos-vk-open .pos-vk-modal-lift .pos-staff-editor-form,
html.pos-vk-open .pos-vk-modal-lift .pos-embedded-page-modal-body,
html.pos-vk-open .pos-vk-modal-lift .pos-shift-start-modal-body,
html.pos-vk-open .pos-vk-modal-lift .pos-inv-manage-scroll,
html.pos-vk-open .pos-vk-modal-lift #pos-report-modal-scroll,
html.pos-vk-open .pos-vk-modal-lift .pos-report-daily-inner,
html.pos-vk-open .pos-vk-modal-lift .pos-global-cashier-shift-inner {
  padding-bottom: 1.25rem;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  .pos-vk__key {
    min-height: 3.25rem;
    font-size: 1.1rem;
    border-radius: 8px;
  }

  .pos-vk__row--num .pos-vk__key {
    min-height: 3.6rem;
    font-size: 1.3rem;
  }

  .pos-vk__row {
    gap: 0.3rem;
  }

  .pos-vk__keys {
    gap: 0.35rem;
  }
}