:root {
    --kleva-primary: #0f766e;
    --kleva-primary-dark: #115e59;
    --kleva-accent: #f97316;
    --kleva-page: #f8fafc;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    overscroll-behavior: none;
}

button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(20, 184, 166, 0.25);
    outline-offset: 2px;
}

#appScrollArea {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#appScrollArea::-webkit-scrollbar,
#searchResults::-webkit-scrollbar {
    width: 5px;
}

#appScrollArea::-webkit-scrollbar-thumb,
#searchResults::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

#searchResults:empty {
    display: none;
}

.modal-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    body {
        padding: 24px 0;
    }

    #klevaShopperApp {
        height: calc(100vh - 48px);
        min-height: 720px;
        border-radius: 32px;
    }
}