/* Built-in on-screen keyboard (see js/onscreen-keyboard.js). Classes are prefixed osk- so nothing clashes
   with the older .alpha-keyboard used by the price checker login. */

.osk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--co-surface-alt, #f6f9fc);
    border-top: 1px solid var(--co-border, #e1e7f0);
    box-shadow: 0 -10px 30px rgba(10, 31, 61, .18);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.osk.osk-visible { display: flex; animation: osk-up .14s var(--co-ease, ease-out); }
@keyframes osk-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* what is being typed (the keyboard covers the lower part of the screen) */
.osk-preview {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 34px;
    padding: 4px 12px;
    background: var(--co-surface, #fff);
    border: 1px solid var(--co-border, #e1e7f0);
    border-radius: var(--co-radius-sm, 11px);
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.osk-preview-label { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--co-text-muted, #707c8d); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osk-preview-text { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: var(--co-text, #16202e); overflow: hidden; text-overflow: ellipsis; white-space: pre; text-align: start; }
.osk-preview-text:empty::after { content: "\2026"; color: var(--co-text-muted, #707c8d); font-weight: 400; }

.osk-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}
.osk-keys.osk-keys-numeric { max-width: 380px; }

.osk-row { display: flex; gap: 5px; justify-content: center; }
.osk-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.osk-key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 50px;
    padding: 0 2px;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    color: var(--co-text, #16202e);
    background: var(--co-surface, #fff);
    border: 1.5px solid var(--co-border, #e1e7f0);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(10, 31, 61, .08);
    cursor: pointer;
    transition: background .08s ease, transform .08s ease;
}
.osk-key:active { background: var(--co-primary-light, #eaf3fe); border-color: var(--co-primary, #2b7de1); transform: scale(.96); }
.osk-key-fn { background: var(--co-bg, #eef2f9); font-size: 16px; }
.osk-key-wide { flex: 1.5 1 0; }
.osk-key-space { flex: 5 1 0; }
.osk-key-grow { flex: 1 1 100%; }
.osk-key-empty { visibility: hidden; border: 0; box-shadow: none; }
.osk-active { background: var(--co-primary, #2b7de1); border-color: var(--co-primary, #2b7de1); color: #fff; }
.osk-key-done { background: var(--co-primary, #2b7de1); border-color: var(--co-primary-dark, #144c99); color: #fff; }
.osk-numpad .osk-key { min-height: 56px; font-size: 22px; }

@media (max-width: 640px) {
    .osk { padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); gap: 5px; }
    .osk-key { min-height: 44px; font-size: 17px; border-radius: 8px; }
    .osk-row { gap: 3px; }
    .osk-preview-text { font-size: 16px; }
}
@media (max-height: 480px) and (orientation: landscape) {
    .osk-key { min-height: 36px; font-size: 15px; }
    .osk-numpad .osk-key { min-height: 40px; }
    .osk-preview { min-height: 28px; }
}

/* Keep the page (and modals) usable above the keyboard. --osk-h is set by the script while the keyboard is open. */
body.osk-open { padding-bottom: var(--osk-h, 0px); }
body.osk-open .modal-backdrop { padding-bottom: calc(16px + var(--osk-h, 0px)); }
body.osk-open .modal { max-height: calc(85vh - var(--osk-h, 0px)); }