/* Independent colours keep navigation readable on every standalone van page. */
.kebabvans-van-navigation {
    --kv-nav-surface: #fff;
    --kv-nav-text: #222;
    --kv-nav-border: #777;
    --kv-nav-highlight: #f1f1f1;
    --kv-nav-radius: 12px;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100001;
    font: 700 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--kv-nav-text);
}
.kebabvans-navigation-theme-midnight {
    --kv-nav-surface: #111318;
    --kv-nav-text: #fff;
    --kv-nav-border: #a6aab3;
    --kv-nav-highlight: #30343e;
    --kv-nav-radius: 3px;
}
.kebabvans-navigation-theme-street-food {
    --kv-nav-surface: #fff9eb;
    --kv-nav-text: #241b16;
    --kv-nav-border: #241b16;
    --kv-nav-highlight: #ffd447;
    --kv-nav-radius: 2px;
}
.kebabvans-navigation-theme-clean-modern {
    --kv-nav-surface: #faf7ef;
    --kv-nav-text: #171717;
    --kv-nav-border: #171717;
    --kv-nav-highlight: #e9e3d5;
    --kv-nav-radius: 1px;
}
.kebabvans-van-navigation > summary {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 2px solid var(--kv-nav-border);
    border-radius: var(--kv-nav-radius);
    background: var(--kv-nav-surface);
    color: var(--kv-nav-text);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.kebabvans-van-navigation > summary::-webkit-details-marker { display: none; }
.kebabvans-van-navigation > summary svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}
.kebabvans-van-navigation > nav {
    box-sizing: border-box;
    position: absolute;
    top: 52px;
    right: 0;
    width: min(300px, calc(100vw - 32px));
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    padding: 8px;
    border: 2px solid var(--kv-nav-border);
    border-radius: var(--kv-nav-radius);
    background: var(--kv-nav-surface);
    color: var(--kv-nav-text);
    box-shadow: 0 10px 32px rgba(0,0,0,.3);
}
.kebabvans-navigation-title {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid var(--kv-nav-border);
    overflow-wrap: anywhere;
}
.kebabvans-van-navigation nav a {
    display: block;
    padding: 12px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--kv-nav-radius);
    background: var(--kv-nav-surface);
    color: var(--kv-nav-text)!important;
    font: inherit;
    text-decoration: none!important;
    overflow-wrap: anywhere;
}
.kebabvans-van-navigation nav a:hover,
.kebabvans-van-navigation nav a[aria-current="page"] {
    background: var(--kv-nav-highlight);
}
.kebabvans-van-navigation :is(summary, a):focus-visible {
    outline: 3px solid var(--kv-nav-text);
    outline-offset: 2px;
}
/* Reserve the adjacent slot for the account control, without changing other pages. */
body:has(> .kebabvans-van-navigation) > .kebabvans-standalone-account { right: 74px; }
.admin-bar .kebabvans-van-navigation { top: 48px; }
#kebabvans-checkin, #kebabvans-customer { scroll-margin-top: 90px; }
@media (max-width: 782px) {
    .admin-bar .kebabvans-van-navigation { top: 62px; }
}
@media (max-width: 520px) {
    .kebabvans-van-navigation { top: 10px; right: 10px; }
    .admin-bar .kebabvans-van-navigation { top: 56px; }
    body:has(> .kebabvans-van-navigation) > .kebabvans-standalone-account { right: 64px; }
}
