/* Custom Virtual Keyboard Styles - Matching Modern Mobile Design */

/* Override default keyboard styles for a more modern look */
.ui-keyboard {
    background: #d3d7db !important;
    border-radius: 0 !important;
    padding: 8px 8px 20px 8px !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

/* Keyboard button styling - iOS-like rounded keys */
.ui-keyboard-button {
    height: 42px !important;
    min-width: 32px !important;
    margin: 3px !important;
    cursor: pointer !important;
    overflow: visible !important;
    line-height: 42px !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    transition: all 0.1s ease !important;
}

.ui-keyboard-button:hover {
    background: #e5e5e5 !important;
}

.ui-keyboard-button:active {
    background: #d0d0d0 !important;
    transform: scale(0.95);
}

/* Keyset container */
.ui-keyboard-keyset {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide preview area */
.ui-keyboard-preview-wrapper,
.ui-keyboard-preview {
    display: none !important;
}

/* Active/pressed state for shift and other toggles */
.ui-keyboard-button.ui-keyboard-toggle-active,
button.ui-keyboard-shift.ui-state-active {
    background: #fff !important;
    color: #000 !important;
}

/* Hebrew keyboard - RTL support */
.ui-keyboard.hebrew-keyboard .ui-keyboard-button {
    direction: rtl !important;
}

/* Symbol keys in normal layout */
.ui-keyboard-button.symbol-key {
    background: #fff !important;
}

/* Adjust button spacing for compact layout */
.ui-keyboard-keyset {
    line-height: 1 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .ui-keyboard {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 16000 !important;
        margin: 0 !important;
    }

    .ui-keyboard-button {
        height: 42px !important;
        min-width: 28px !important;
        font-size: 20px !important;
        margin: 2px !important;
    }

    .ui-keyboard-space {
        width: 140px !important;
    }

    /* Ensure containers can scroll when keyboard is open */
    body.ui-keyboard-has-focus .block-right,
    body.ui-keyboard-has-focus .block-left,
    body.ui-keyboard-has-focus .preview,
    body.ui-keyboard-has-focus .designer,
    body.ui-keyboard-has-focus .designer_content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure body and containers have space when keyboard is open */
    body.ui-keyboard-has-focus {
        padding-bottom: 0 !important;
    }

    body.ui-keyboard-has-focus #design,
    body.ui-keyboard-has-focus .designer,
    body.ui-keyboard-has-focus .designer_content,
    body.ui-keyboard-has-focus .block-right,
    body.ui-keyboard-has-focus .block-left,
    body.ui-keyboard-has-focus .preview {
        padding-bottom: 150px !important;
        transition: padding-bottom 0.3s ease;
    }

    /* Smooth transition when keyboard closes */
    body:not(.ui-keyboard-has-focus) #design,
    body:not(.ui-keyboard-has-focus) .designer,
    body:not(.ui-keyboard-has-focus) .designer_content,
    body:not(.ui-keyboard-has-focus) .block-right,
    body:not(.ui-keyboard-has-focus) .block-left,
    body:not(.ui-keyboard-has-focus) .preview {
        padding-bottom: 0 !important;
        transition: padding-bottom 0.3s ease;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {}

.ui-keyboard {
    background: #D0D3D9 !important;
}

.ui-keyboard-button {
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: 0px 1px 0.5px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
}

.ui-keyboard-button:hover {
    background: #727884 !important;
    color: #fff !important;
}



.ui-keyboard-space {
    width: 10em;
}

.ui-keyboard-enter {
    width: 3em;
}

/* Remove default jQuery UI theme styles */
.ui-keyboard .ui-widget-content {
    background: transparent !important;
    border: none !important;
}

/* Special styling for emoji/icon buttons */
.ui-keyboard-button .ui-keyboard-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Hide cancel button if not needed */
.ui-keyboard-button[data-action="cancel"] {
    display: none !important;
}

/* Keyboard rows alignment */
.ui-keyboard-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Wide keys for special buttons */
.ui-keyboard-widekey {
    min-width: 52px !important;
}

/* Empty placeholder keys */
.ui-keyboard-empty {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Button group for bottom row */
.ui-keyboard-button-container {
    display: flex;
    justify-content: center;
    gap: 3px;
}