/* ==========================================================================
   Virtual Keyboard for Kiosk v1.1.0
   All colors are driven by CSS custom properties injected from PHP settings.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS variable defaults (overridden by PHP inline style block)
   -------------------------------------------------------------------------- */
#vkk-container {
    --vkk-bg:            #1a1a2e;
    --vkk-key-bg:        #2d2d4e;
    --vkk-key-color:     #f0f0f0;
    --vkk-action-bg:     #16213e;
    --vkk-action-color:  #a0a8d0;
    --vkk-enter-bg:      #c8a96e;
    --vkk-enter-color:   #1a1a2e;
    --vkk-shadow:        #111130;
    --vkk-special-bg:    #1e3a5f;
    --vkk-special-color: #7ec8e3;
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */
#vkk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: transparent;
    pointer-events: none;
}
#vkk-overlay.vkk-active {
    display: block;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Keyboard container
   -------------------------------------------------------------------------- */
#vkk-container {
    position: absolute;
    z-index: 99999;
    background: var(--vkk-bg);
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 2px 8px  rgba(0, 0, 0, 0.35);
    padding: 16px 16px 20px;
    box-sizing: border-box;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        opacity   0.22s ease,
        transform 0.22s ease;
}
#vkk-container.vkk-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Close button — pill tab above the keyboard, never overlapping keys
   -------------------------------------------------------------------------- */
#vkk-close {
    /* Sit in the gap above the keyboard container */
    position: absolute;
    bottom: calc(100% + 8px); /* 8 px above the keyboard top edge */
    right: 0;
    left: auto;
    transform: none;

    /* Pill shape */
    height: 36px;
    padding: 0 20px;
    width: auto;
    white-space: nowrap;

    border: none;
    border-radius: 20px;
    background: var(--vkk-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
}


#vkk-close:hover,
#vkk-close:focus {
    background: color-mix(in srgb, var(--vkk-bg) 80%, white);
    color: #ffffff;
    outline: none;
}

/* --------------------------------------------------------------------------
   SimpleKeyboard base reset
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default {
    background: transparent;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#vkk-container .hg-theme-default .hg-row {
    display: flex;
    gap: 7px;
    margin-bottom: 7px;
}
#vkk-container .hg-theme-default .hg-row:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Base key
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default .hg-button {
    flex: 1;
    min-width: 0;
    height: 64px;
    border: none;
    border-radius: 10px;
    background: var(--vkk-key-bg);
    color: var(--vkk-key-color);
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--vkk-shadow);
    transition:
        background  0.1s ease,
        transform   0.08s ease,
        box-shadow  0.08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    padding: 0 6px;
    box-sizing: border-box;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#vkk-container .hg-theme-default .hg-button:active,
#vkk-container .hg-theme-default .hg-button.hg-activeButton {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--vkk-shadow);
    filter: brightness(1.15);
}

/* --------------------------------------------------------------------------
   Action keys (Shift, Caps, Tab, Backspace, Clear)
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default .vkk-key-action {
    background: var(--vkk-action-bg);
    color: var(--vkk-action-color);
    font-size: 16px;
    font-weight: 600;
    flex: 1.6;
}

/* --------------------------------------------------------------------------
   Enter key — highlighted
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{enter}"] {
    background: var(--vkk-enter-bg);
    color: var(--vkk-enter-color);
    font-weight: 700;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--vkk-enter-bg) 60%, black);
    flex: 2;
}

/* --------------------------------------------------------------------------
   Space bar
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default .vkk-key-space,
#vkk-container .hg-theme-default .hg-button[data-skbtn="{space}"] {
    flex: 5;
    font-size: 18px;
    background: color-mix(in srgb, var(--vkk-key-bg) 70%, var(--vkk-bg));
}

/* --------------------------------------------------------------------------
   Special keys (.com, @, {lang}, {diacr}, {back})
   -------------------------------------------------------------------------- */
#vkk-container .hg-theme-default .vkk-key-special {
    background: var(--vkk-special-bg);
    color: var(--vkk-special-color);
    font-size: 16px;
    font-weight: 700;
    flex: 1.3;
}

/* Lang toggle — slightly distinct */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{lang}"] {
    letter-spacing: 0.06em;
    font-size: 15px;
    flex: 1.1;
}

/* Diacritics button */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{diacr}"] {
    font-size: 15px;
    flex: 1.4;
}

/* Back from diacritics */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{back}"] {
    font-size: 14px;
    flex: 1.6;
}

/* Backspace — red tint */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{bksp}"] {
    color: #e07070;
    font-size: 22px;
}

/* Clear */
#vkk-container .hg-theme-default .hg-button[data-skbtn="{clear}"] {
    background: color-mix(in srgb, #e07070 18%, var(--vkk-action-bg));
    color: #e07070;
    font-size: 16px;
    font-weight: 700;
    flex: 1.2;
}

/* --------------------------------------------------------------------------
   Diacritics layer — slightly larger characters since they're the focus
   -------------------------------------------------------------------------- */
#vkk-container .hg-layout-diacritic .hg-button:not(.vkk-key-action):not(.vkk-key-special) {
    font-size: 26px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Numeric / Tel layout — bigger keys
   -------------------------------------------------------------------------- */
#vkk-container .hg-layout-default:has([data-skbtn="+"]) .hg-button,
#vkk-container .hg-rows-tel .hg-button {
    height: 76px;
    font-size: 30px;
    font-weight: 600;
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Large-resolution kiosk (very tall screen)
   -------------------------------------------------------------------------- */
@media ( min-height: 1400px ) {
    #vkk-container .hg-theme-default .hg-button {
        height: 80px;
        font-size: 26px;
    }
    #vkk-container .hg-theme-default .vkk-key-action {
        font-size: 20px;
    }
}

/* --------------------------------------------------------------------------
   Scrollbar suppression
   -------------------------------------------------------------------------- */
#vkk-container::-webkit-scrollbar { display: none; }