html.kk-native-ui-open,
body.kk-native-ui-open { overflow: hidden; }

.kk-native-dialog { box-sizing: border-box; width: min(var(--kk-native-dialog-width, 600px), calc(100% - 24px)); max-width: none; height: min(var(--kk-native-dialog-height, auto), calc(100vh - 24px)); max-height: calc(100vh - 24px); margin: auto; padding: 0; border: 0; border-radius: 14px; background: #fff; color: #222; box-shadow: 0 24px 80px rgb(18 28 40 / 38%); overflow: hidden; }
.kk-native-dialog::backdrop { background: rgb(18 28 40 / 55%); }
.kk-native-dialog__header { display: flex; align-items: center; min-height: 48px; padding: 8px 10px 8px 16px; border-bottom: 1px solid #dfe4e8; background: #f7f8f9; }
.kk-native-dialog__title { flex: 1; min-width: 0; font-size: 16px; line-height: 1.3; }
.kk-native-dialog__close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #e9edf0; color: #53606c; font: 25px/1 Arial,sans-serif; cursor: pointer; }
.kk-native-dialog__body { box-sizing: border-box; min-height: 0; max-height: calc(100vh - 150px); padding: 12px; overflow: auto; }
.kk-native-dialog__content { box-sizing: border-box; width: 100%; min-height: 0; }
.kk-native-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #dfe4e8; background: #f7f8f9; }
.kk-native-dialog__button { min-height: 34px; padding: 7px 13px; border: 1px solid #cbd3da; border-radius: 6px; background: #fff; color: #25313d; font: inherit; cursor: pointer; }
.kk-native-dialog__button:first-child { border-color: #d77b0b; background: #f7941d; color: #fff; }
.kk-native-dialog iframe { width: 100% !important; min-height: 420px; border: 0; }

.kk-native-autocomplete { position: fixed; z-index: 2000; max-height: 280px; padding: 4px; border: 1px solid #b8c2cc; border-radius: 6px; background: #fff; box-shadow: 0 10px 28px rgb(18 28 40 / 22%); overflow: auto; }
.kk-native-autocomplete[hidden] { display: none !important; }
.kk-native-autocomplete__option { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: #25313d; font: inherit; text-align: left; cursor: pointer; }
.kk-native-autocomplete__category { padding: 7px 10px 4px; color: #7a4a10; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kk-native-autocomplete__option:hover,
.kk-native-autocomplete__option.is-active { background: #fff0dc; color: #8a4800; }

.kk-native-range { --kk-slider-low: 0%; --kk-slider-high: 100%; position: relative; height: 30px; background: linear-gradient(to right, #d9dee3 0 var(--kk-slider-low), #f7941d var(--kk-slider-low) var(--kk-slider-high), #d9dee3 var(--kk-slider-high) 100%) center / 100% 5px no-repeat; }
.kk-native-range__input { position: absolute; inset: 0; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; }
.kk-native-range__input::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #f7941d; box-shadow: 0 1px 5px rgb(0 0 0 / 30%); pointer-events: auto; cursor: pointer; appearance: none; -webkit-appearance: none; }
.kk-native-range__input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #f7941d; box-shadow: 0 1px 5px rgb(0 0 0 / 30%); pointer-events: auto; cursor: pointer; }
.is-dragging { opacity: .55; }
.is-drag-over { outline: 2px dashed #f7941d; outline-offset: 2px; }

input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 30px; }

@media (max-width: 600px) {
    .kk-native-dialog { width: calc(100% - 16px); max-height: calc(100vh - 16px); border-radius: 10px; }
    .kk-native-dialog__body { max-height: calc(100vh - 132px); padding: 10px; }
    .kk-native-dialog__footer { justify-content: stretch; }
    .kk-native-dialog__button { flex: 1 1 140px; }
}