/* =========================================================
   PROJECT05 - VIRTUAL KEYBOARD UX V1
   Glass overlay / no layout jump
   ========================================================= */

html.vk-enabled {
    scroll-padding-bottom: 24px !important;
}

/*
 * The keyboard is a floating overlay.
 * Opening it must not increase document height.
 */
body.vk-open {
    padding-bottom: 0 !important;
}

.virtual-keyboard {
    inset-inline:
        clamp(
            7px,
            1.4vw,
            22px
        ) !important;

    bottom:
        max(
            7px,
            env(safe-area-inset-bottom)
        ) !important;

    max-height:
        min(
            46dvh,
            560px
        ) !important;

    border:
        1px solid
        rgba(110, 231, 183, .22) !important;

    border-radius:
        clamp(
            20px,
            2.5vw,
            30px
        ) !important;

    background:
        rgba(
            2,
            18,
            24,
            .70
        ) !important;

    backdrop-filter:
        blur(24px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%) !important;

    box-shadow:
        0 -10px 60px rgba(0,0,0,.38),
        0 0 0 1px rgba(94,234,212,.05),
        0 0 80px rgba(20,184,166,.10) !important;
}

.virtual-keyboard.is-visible {
    animation:
        p05VkEnter
        .24s
        cubic-bezier(.2,.8,.2,1)
        both;
}

.vk-panel {
    background:
        linear-gradient(
            150deg,
            rgba(7,30,40,.88),
            rgba(5,43,36,.80)
        ) !important;

    border-color:
        rgba(110,231,183,.18) !important;
}

.vk-key {
    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045)
        ) !important;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease,
        box-shadow .12s ease;
}

.vk-key:active,
.vk-key.is-active {
    transform:
        translateY(1px)
        scale(.97);

    box-shadow:
        0 0 0 3px
        rgba(45,212,191,.08);
}

body.vk-open
.vk-input-wrap:focus-within
input {
    border-color:
        rgba(
            52,
            211,
            153,
            .82
        ) !important;

    box-shadow:
        0 0 0 3px rgba(52,211,153,.10),
        0 0 24px rgba(20,184,166,.08);
}

.vk-input-wrap
input[name="guest_mobile"],
.vk-input-wrap
input[type="tel"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.vk-input-wrap
input:not([type="tel"]):not([type="number"]) {
    unicode-bidi: plaintext;
}

@keyframes p05VkEnter {
    from {
        opacity: 0;
        transform:
            translateY(22px)
            scale(.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

@media
    (orientation: portrait)
    and (min-width: 900px) {

    .virtual-keyboard {
        max-height:
            min(
                43dvh,
                540px
            ) !important;
    }

    .vk-panel {
        padding:
            13px
            16px
            16px !important;
    }

    .vk-key {
        min-height:
            56px !important;

        font-size:
            clamp(
                18px,
                2vw,
                25px
            ) !important;
    }

    .vk-key--hide {
        min-height:
            42px !important;
    }
}

@media (max-width: 640px) {
    body.vk-open {
        padding-bottom: 0 !important;
    }

    .virtual-keyboard {
        inset-inline: 3px !important;
        bottom: 3px !important;
        max-height: 52dvh !important;
        border-radius: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .virtual-keyboard.is-visible {
        animation: none;
    }
}

/* =========================================================
   PROJECT05 3C.1 - FLOATING KEYBOARD POSITION

   Keyboard is positioned by JS immediately below the
   active input instead of being docked to screen bottom.
   ========================================================= */

.virtual-keyboard.p05-vk-floating {
    position:
        fixed !important;

    left:
        var(
            --p05-vk-left,
            50%
        ) !important;

    right:
        auto !important;

    top:
        var(
            --p05-vk-top,
            50%
        ) !important;

    bottom:
        auto !important;

    inset-inline:
        auto !important;

    width:
        var(
            --p05-vk-width,
            min(
                920px,
                calc(
                    100vw -
                    40px
                )
            )
        ) !important;

    max-width:
        calc(
            100vw -
            24px
        ) !important;

    max-height:
        min(
            46dvh,
            520px
        ) !important;

    transform:
        translateX(
            -50%
        ) !important;

    transform-origin:
        top center;

    border-radius:
        24px !important;

    box-shadow:
        0 22px 80px
        rgba(
            0,
            0,
            0,
            .42
        ),
        0 0 0 1px
        rgba(
            94,
            234,
            212,
            .09
        ),
        0 0 44px
        rgba(
            20,
            184,
            166,
            .10
        ) !important;
}


.virtual-keyboard.p05-vk-floating.is-visible {
    animation:
        p05VkFloatingEnter
        .22s
        cubic-bezier(
            .2,
            .82,
            .2,
            1
        )
        both !important;
}


@keyframes p05VkFloatingEnter {

    from {
        opacity:
            0;

        transform:
            translateX(-50%)
            translateY(10px)
            scale(.985);
    }

    to {
        opacity:
            1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}


/*
 * Keep participant form visible behind popup.
 */

body.vk-open {
    padding-bottom:
        0 !important;

    overflow-y:
        auto !important;
}


/*
 * Tablet / kiosk portrait sizing.
 */

@media
    (orientation: portrait)
    and (min-width: 700px) {

    .virtual-keyboard.p05-vk-floating {
        width:
            var(
                --p05-vk-width,
                min(
                    900px,
                    calc(
                        100vw -
                        54px
                    )
                )
            ) !important;

        max-height:
            min(
                40dvh,
                500px
            ) !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-key {
        min-height:
            54px !important;
    }
}


@media
    (max-width: 699px) {

    .virtual-keyboard.p05-vk-floating {
        width:
            calc(
                100vw -
                14px
            ) !important;

        max-height:
            48dvh !important;

        border-radius:
            18px !important;
    }
}


/* =========================================================
   PROJECT05 3C.2 - PORTAL POPUP FINAL
   ========================================================= */

.virtual-keyboard.p05-vk-floating {
    position:
        fixed !important;

    z-index:
        250000 !important;

    left:
        var(
            --p05-vk-left,
            50%
        ) !important;

    right:
        auto !important;

    top:
        var(
            --p05-vk-top,
            50%
        ) !important;

    bottom:
        auto !important;

    inset-inline:
        auto !important;

    width:
        var(
            --p05-vk-width,
            760px
        ) !important;

    max-width:
        calc(
            100vw -
            24px
        ) !important;

    max-height:
        min(
            420px,
            42dvh
        ) !important;

    margin:
        0 !important;

    box-sizing:
        border-box;

    overflow:
        visible !important;

    transform:
        translateX(-50%)
        !important;

    transform-origin:
        top center;

    border-radius:
        22px !important;

    background:
        rgba(
            2,
            21,
            27,
            .90
        ) !important;

    backdrop-filter:
        blur(24px)
        saturate(135%)
        !important;

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%)
        !important;

    box-shadow:
        0 24px 80px
        rgba(
            0,
            0,
            0,
            .46
        ),
        0 0 0 1px
        rgba(
            94,
            234,
            212,
            .12
        ),
        0 0 46px
        rgba(
            20,
            184,
            166,
            .12
        ) !important;
}


.virtual-keyboard.p05-vk-floating
.vk-panel {
    width:
        100% !important;

    max-width:
        none !important;

    box-sizing:
        border-box;

    overflow:
        hidden;

    border-radius:
        20px !important;
}


.virtual-keyboard.p05-vk-floating
.vk-key {
    min-height:
        44px !important;

    padding:
        6px
        8px !important;

    font-size:
        clamp(
            15px,
            1.7vw,
            21px
        ) !important;
}


.virtual-keyboard.p05-vk-floating
.vk-key--hide {
    min-height:
        38px !important;
}


/*
 * Never reserve a giant blank area for keyboard.
 */
body.vk-open {
    padding-bottom:
        0 !important;
}


/*
 * Old 3C popup must never dock itself.
 */
.virtual-keyboard.p05-vk-floating {
    bottom:
        auto !important;
}


/*
 * Small screens.
 */
@media
    (max-width: 719px) {

    .virtual-keyboard.p05-vk-floating {
        width:
            calc(
                100vw -
                16px
            ) !important;

        max-height:
            48dvh !important;

        border-radius:
            17px !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-key {
        min-height:
            40px !important;
    }
}


/* =========================================================
   PROJECT05 3C.3 - CENTERED RESPONSIVE KEYBOARD

   Final kiosk keyboard geometry:
   - Always horizontally centered
   - Slightly below viewport center
   - Responsive width and key sizing
   - Never clipped by display edges
   ========================================================= */


/* ---------------------------------------------------------
   MODAL BACKDROP
   --------------------------------------------------------- */

body.vk-open::before {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        249000;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 35, 39, .03),
            rgba(0, 8, 12, .14)
        );

    backdrop-filter:
        blur(1.5px);

    -webkit-backdrop-filter:
        blur(1.5px);
}


/* ---------------------------------------------------------
   CENTERED KEYBOARD
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating {
    position:
        fixed !important;

    z-index:
        250000 !important;

    /*
     * Ignore the old calculated input coordinates.
     * Kiosk keyboard now uses stable viewport geometry.
     */
    left:
        50vw !important;

    right:
        auto !important;

    top:
        52vh !important;

    bottom:
        auto !important;

    inset-inline:
        auto !important;

    /*
     * Responsive width:
     * 1080 portrait -> approximately 780px
     * Smaller screens shrink automatically.
     */
    width:
        clamp(
            560px,
            72vw,
            800px
        ) !important;

    max-width:
        calc(
            100vw -
            36px
        ) !important;

    min-width:
        0 !important;

    height:
        auto !important;

    max-height:
        min(
            47vh,
            520px
        ) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    transform:
        translate(
            -50%,
            -50%
        ) !important;

    transform-origin:
        center center !important;

    overflow:
        visible !important;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(
            94,
            234,
            212,
            .22
        ) !important;

    border-radius:
        clamp(
            18px,
            2vw,
            26px
        ) !important;

    background:
        linear-gradient(
            145deg,
            rgba(4, 30, 37, .96),
            rgba(3, 42, 38, .93)
        ) !important;

    backdrop-filter:
        blur(26px)
        saturate(135%)
        !important;

    -webkit-backdrop-filter:
        blur(26px)
        saturate(135%)
        !important;

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .52
        ),
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .025
        ),
        0 0 65px
        rgba(
            20,
            184,
            166,
            .12
        ) !important;
}


/* ---------------------------------------------------------
   OPEN ANIMATION
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating.is-visible {
    animation:
        p05KeyboardModalEnter
        .22s
        cubic-bezier(
            .18,
            .85,
            .22,
            1
        )
        both !important;
}


@keyframes p05KeyboardModalEnter {

    from {
        opacity:
            0;

        transform:
            translate(
                -50%,
                calc(
                    -50% +
                    18px
                )
            )
            scale(.97);
    }

    to {
        opacity:
            1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }
}


/* ---------------------------------------------------------
   PANEL
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-panel {
    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        clamp(
            12px,
            1.4vw,
            18px
        ) !important;

    box-sizing:
        border-box;

    overflow:
        hidden !important;

    border:
        0 !important;

    border-radius:
        inherit !important;

    background:
        linear-gradient(
            155deg,
            rgba(10, 45, 51, .88),
            rgba(5, 37, 35, .82)
        ) !important;
}


/* ---------------------------------------------------------
   HEADER / LABEL AREA
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-header {
    margin-bottom:
        clamp(
            7px,
            .8vw,
            11px
        );
}


/* ---------------------------------------------------------
   ROW SPACING
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-row {
    gap:
        clamp(
            5px,
            .65vw,
            8px
        ) !important;

    margin-top:
        clamp(
            5px,
            .65vw,
            8px
        ) !important;
}


/* ---------------------------------------------------------
   KEYS
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-key {
    min-width:
        0 !important;

    min-height:
        clamp(
            42px,
            2.8vh,
            56px
        ) !important;

    padding:
        clamp(
            5px,
            .65vw,
            8px
        )
        clamp(
            6px,
            .8vw,
            10px
        ) !important;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        ) !important;

    border-radius:
        clamp(
            9px,
            1vw,
            13px
        ) !important;

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.115),
            rgba(255,255,255,.052)
        ) !important;

    color:
        #f5fffd !important;

    font-size:
        clamp(
            15px,
            1.55vw,
            21px
        ) !important;

    font-weight:
        850 !important;

    line-height:
        1 !important;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            .035
        );

    transition:
        transform .10s ease,
        border-color .10s ease,
        background .10s ease,
        box-shadow .10s ease;
}


.virtual-keyboard.p05-vk-floating
.vk-key:hover {
    border-color:
        rgba(
            94,
            234,
            212,
            .28
        ) !important;
}


.virtual-keyboard.p05-vk-floating
.vk-key:active {
    transform:
        scale(.965);

    border-color:
        rgba(
            52,
            211,
            153,
            .48
        ) !important;

    background:
        rgba(
            45,
            212,
            191,
            .16
        ) !important;

    box-shadow:
        0 0 18px
        rgba(
            45,
            212,
            191,
            .10
        );
}


/* ---------------------------------------------------------
   HIDE BUTTON
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-key--hide {
    min-height:
        38px !important;

    width:
        max-content !important;

    padding-inline:
        14px !important;

    color:
        #d9fdf5 !important;

    background:
        rgba(
            255,
            255,
            255,
            .065
        ) !important;
}


/* ---------------------------------------------------------
   SPACE / ACTION KEYS
   --------------------------------------------------------- */

.virtual-keyboard.p05-vk-floating
.vk-key--space {
    min-width:
        28% !important;
}


/* ---------------------------------------------------------
   KIOSK PORTRAIT 1080 x 1920
   --------------------------------------------------------- */

@media
    (orientation: portrait)
    and (min-width: 900px) {

    .virtual-keyboard.p05-vk-floating {
        top:
            52vh !important;

        width:
            clamp(
                700px,
                74vw,
                810px
            ) !important;

        max-height:
            430px !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-key {
        min-height:
            clamp(
                46px,
                2.8vh,
                55px
            ) !important;
    }
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media
    (min-width: 700px)
    and
    (max-width: 899px) {

    .virtual-keyboard.p05-vk-floating {
        width:
            min(
                86vw,
                720px
            ) !important;

        top:
            54vh !important;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media
    (max-width: 699px) {

    .virtual-keyboard.p05-vk-floating {
        top:
            55vh !important;

        width:
            calc(
                100vw -
                18px
            ) !important;

        max-height:
            52vh !important;

        border-radius:
            17px !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-panel {
        padding:
            9px !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-row {
        gap:
            4px !important;

        margin-top:
            4px !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-key {
        min-height:
            39px !important;

        padding:
            4px !important;

        font-size:
            14px !important;

        border-radius:
            8px !important;
    }
}


/* ---------------------------------------------------------
   LANDSCAPE / SHORT VIEWPORT
   --------------------------------------------------------- */

@media
    (max-height: 720px) {

    .virtual-keyboard.p05-vk-floating {
        top:
            52vh !important;

        width:
            min(
                82vw,
                760px
            ) !important;

        max-height:
            calc(
                100vh -
                24px
            ) !important;
    }

    .virtual-keyboard.p05-vk-floating
    .vk-key {
        min-height:
            36px !important;
    }
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media
    (prefers-reduced-motion: reduce) {

    .virtual-keyboard.p05-vk-floating.is-visible {
        animation:
            none !important;
    }
}


/* =========================================================
   PROJECT05 3C.4 - VIEWPORT SAFETY
   Runtime V4 supplies exact top / left / width values.
   ========================================================= */

.virtual-keyboard.p05-vk-centered {
    z-index:
        300000 !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    overflow:
        visible !important;

    transform-origin:
        center center !important;
}


.virtual-keyboard.p05-vk-centered
.vk-panel {
    width:
        100% !important;

    max-width:
        100% !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/*
 * The old CSS animation must not move the popup
 * away from the runtime-calculated center.
 */
.virtual-keyboard.p05-vk-centered.is-visible {
    animation:
        p05VkFinalEnter
        .20s
        cubic-bezier(.2,.82,.22,1)
        both !important;
}


@keyframes p05VkFinalEnter {

    from {
        opacity:
            0;

        scale:
            .975;
    }

    to {
        opacity:
            1;

        scale:
            1;
    }
}


/*
 * Responsive rows / keys.
 */
.virtual-keyboard.p05-vk-centered
.vk-row {
    width:
        100% !important;

    box-sizing:
        border-box;
}


.virtual-keyboard.p05-vk-centered
.vk-key {
    min-width:
        0 !important;

    flex:
        1 1 0;

    box-sizing:
        border-box;
}


/*
 * Utility keys can remain slightly wider.
 */
.virtual-keyboard.p05-vk-centered
.vk-key--space {
    flex-grow:
        3 !important;
}

/* =========================================================
   PROJECT05 3C.5 - SAFE MODAL KEYBOARD
   Independent keyboard. No observers. No geometry loops.
   ========================================================= */

/*
 * Retired keyboard DOM, if any old browser state remains.
 */
.virtual-keyboard {
    display:
        none !important;
}


/* ---------------------------------------------------------
   INPUT + ICON
   --------------------------------------------------------- */

.p05-vkbd-input-shell {
    position:
        relative;

    width:
        100%;
}


.p05-vkbd-input-shell
> input,
.p05-vkbd-input-shell
> textarea {
    width:
        100% !important;

    box-sizing:
        border-box;

    padding-left:
        52px !important;
}


.p05-vkbd-trigger {
    position:
        absolute;

    left:
        8px;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        8;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            .28
        );

    border-radius:
        11px;

    color:
        #eafffa;

    background:
        linear-gradient(
            145deg,
            rgba(30,58,67,.92),
            rgba(15,38,46,.92)
        );

    box-shadow:
        0 7px 22px
        rgba(0,0,0,.20);

    cursor:
        pointer;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease,
        box-shadow .12s ease;
}


.p05-vkbd-trigger:hover {
    border-color:
        rgba(
            45,
            212,
            191,
            .58
        );

    box-shadow:
        0 0 20px
        rgba(
            45,
            212,
            191,
            .12
        );
}


.p05-vkbd-trigger:active {
    transform:
        translateY(-50%)
        scale(.94);
}


/* ---------------------------------------------------------
   MODAL
   --------------------------------------------------------- */

.p05-vkbd-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        999999;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;

    box-sizing:
        border-box;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .18s ease,
        visibility .18s ease;
}


.p05-vkbd-modal.is-open {
    opacity:
        1;

    visibility:
        visible;
}


.p05-vkbd-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            1,
            15,
            20,
            .38
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    pointer-events:
        none;
}


.p05-vkbd-panel {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            760px,
            calc(
                100vw -
                32px
            )
        );

    max-height:
        min(
            540px,
            calc(
                100dvh -
                40px
            )
        );

    overflow:
        auto;

    pointer-events:
        auto;

    box-sizing:
        border-box;

    padding:
        16px;

    border:
        1px solid
        rgba(
            45,
            212,
            191,
            .30
        );

    border-radius:
        24px;

    color:
        #f4fffc;

    background:
        linear-gradient(
            145deg,
            rgba(5,35,42,.97),
            rgba(3,48,44,.96)
        );

    box-shadow:
        0 32px 100px
        rgba(0,0,0,.58),
        0 0 0 1px
        rgba(255,255,255,.025),
        0 0 65px
        rgba(45,212,191,.10);

    animation:
        p05VkModalEnter
        .20s
        cubic-bezier(.2,.84,.22,1)
        both;
}


@keyframes p05VkModalEnter {
    from {
        opacity:
            0;

        transform:
            translateY(16px)
            scale(.975);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.p05-vkbd-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        13px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            .14
        );
}


.p05-vkbd-header
small {
    display:
        block;

    margin-bottom:
        3px;

    color:
        #4adeb5;

    font-size:
        12px;

    font-weight:
        850;
}


.p05-vkbd-header
strong {
    display:
        block;

    color:
        #fff;

    font-size:
        18px;

    font-weight:
        950;
}


.p05-vkbd-close {
    flex:
        0 0 auto;

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        11px;

    color:
        #fff;

    background:
        rgba(255,255,255,.06);

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;
}


/* ---------------------------------------------------------
   KEYS
   --------------------------------------------------------- */

.p05-vkbd-rows {
    display:
        grid;

    gap:
        8px;
}


.p05-vkbd-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            var(--p05-key-count),
            minmax(0, 1fr)
        );

    gap:
        7px;

    direction:
        inherit;
}


.p05-vkbd-key {
    min-width:
        0;

    min-height:
        50px;

    padding:
        6px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius:
        11px;

    color:
        #f8fffd;

    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.05)
        );

    font-family:
        inherit;

    font-size:
        19px;

    font-weight:
        900;

    line-height:
        1;

    cursor:
        pointer;

    user-select:
        none;

    -webkit-user-select:
        none;

    transition:
        transform .08s ease,
        border-color .08s ease,
        background .08s ease,
        box-shadow .08s ease;
}


.p05-vkbd-key:hover {
    border-color:
        rgba(
            45,
            212,
            191,
            .40
        );
}


.p05-vkbd-key:active {
    transform:
        scale(.95);

    background:
        rgba(
            45,
            212,
            191,
            .16
        );

    border-color:
        rgba(
            45,
            212,
            191,
            .62
        );

    box-shadow:
        0 0 18px
        rgba(
            45,
            212,
            191,
            .11
        );
}


/* ---------------------------------------------------------
   ACTION ROW
   --------------------------------------------------------- */

.p05-vkbd-actions {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap:
        7px;

    margin-top:
        3px;
}


.p05-vkbd-actions
.p05-vkbd-key {
    font-size:
        15px;
}


.p05-vkbd-actions
.is-space {
    grid-column:
        span 2;
}


.p05-vkbd-actions
.is-done {
    color:
        #002d25;

    background:
        linear-gradient(
            135deg,
            #36e0b2,
            #20c997
        );

    border-color:
        rgba(
            94,
            234,
            212,
            .70
        );
}


/* ---------------------------------------------------------
   PAGE STATE
   --------------------------------------------------------- */

body.p05-vkbd-open {
    overflow:
        hidden;
}


/* ---------------------------------------------------------
   KIOSK PORTRAIT
   --------------------------------------------------------- */

@media
    (orientation: portrait)
    and
    (min-width: 700px) {

    .p05-vkbd-panel {
        width:
            min(
                76vw,
                780px
            );
    }

    .p05-vkbd-key {
        min-height:
            54px;

        font-size:
            20px;
    }
}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media
    (max-width: 699px) {

    .p05-vkbd-modal {
        padding:
            8px;
    }

    .p05-vkbd-panel {
        width:
            calc(
                100vw -
                16px
            );

        padding:
            10px;

        border-radius:
            17px;
    }

    .p05-vkbd-row,
    .p05-vkbd-actions {
        gap:
            4px;
    }

    .p05-vkbd-key {
        min-height:
            41px;

        padding:
            4px;

        border-radius:
            8px;

        font-size:
            14px;
    }

    .p05-vkbd-actions
    .p05-vkbd-key {
        font-size:
            12px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media
    (prefers-reduced-motion: reduce) {

    .p05-vkbd-panel {
        animation:
            none;
    }
}