/* ============================================================
   30-vx-shell.css
   ------------------------------------------------------------
   The application frame - the parts that are present on every
   page: vx-root, vx-sidebar with its nav, subnav and collapse
   behaviour, and vx-topbar with the breadcrumb, logo, username,
   profile button and logout.

   It also currently holds the tm-* Travel Manager components
   (tm-grid-card and friends). Those belong in 40-vx-components,
   and will move once each one can be checked on its own. They
   are here only because the split that created these files was
   not allowed to reorder anything - moving a rule between files
   changes which rule wins at equal specificity.

   PUT A RULE HERE IF
     it styles part of the frame that surrounds every page.

   DO NOT PUT HERE
     a reusable component ............ 40-vx-components.css
     anything for one screen only .... 50-vx-features.css
     bare element styling ............ 00-reset.css
     per-user theme colours .......... 90-vx-theme.css

   RULES FOR THIS FILE
     - vx- prefix, BEM naming: block__element--modifier
     - no #MainContent_* selectors
     - no !important
   ============================================================ */

   69. TRAVEL MANAGER — MODERN STYLED COMPONENTS
   ============================================================ */

.tm-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

.tm-content-area {
    background-color: #fff;
    flex: 1;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Section headings ────────────────────────────────────── */
.tm-section-heading {
    font-family: "neo-sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    margin: 16px 12px 6px;
    padding: 0;
}

/* ── Alert bar ───────────────────────────────────────────── */
.tm-alert-bar {
    margin: 10px 10px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}

    .tm-alert-bar .state-indicator-panel {
        margin-bottom: 0;
        border-radius: 12px;
        border: none;
        box-shadow: none;
        background: #fff;
    }

/* ── New vx-alert-bar ────────────────────────────────────── */
.vx-alert-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 10px;
    box-shadow: 0 2px 8px rgba(6,5,24,0.06);
}

.vx-alert-globe {
    width: 70px;
    height: 60px;
    border-radius: 8px;
    background: #484293;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

    .vx-alert-globe:hover {
        background: #3c3589;
        text-decoration: none;
    }

    .vx-alert-globe svg {
        width: 24px;
        height: 24px;
    }

.vx-alert-globe-count {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}

.vx-alert-divider {
    width: 0.5px;
    height: 44px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.vx-alert-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

    .vx-alert-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }

    .vx-alert-scroll.is-dragging {
        cursor: grabbing;
    }

.vx-alert-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1.5px solid;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 56px;
    height: 60px;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none !important;
}

    .vx-alert-tile:hover,
    .vx-alert-tile *:hover {
        text-decoration: none !important;
    }

    .vx-alert-tile * {
        text-decoration: none !important;
    }

    .vx-alert-tile svg {
        width: 22px;
        height: 22px;
    }

.vx-tile-count {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.vx-tile-label {
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

/* Normal state — grey */
.vx-tile-normal {
    background: #f9fafb;
    border-color: #e5e7eb;
    width: 70px;
    height: 60px;
}

    .vx-tile-normal svg {
        stroke: #6b7280;
    }

    .vx-tile-normal .vx-tile-count,
    .vx-tile-normal .vx-tile-label {
        color: #6b7280;
    }

    .vx-tile-normal:hover {
        background: #f0f2f5;
        border-color: #c8cacd;
    }

/* Alert state — red */
.vx-tile-alert {
    background: #fcebeb;
    border-color: #e24b4a;
}

    .vx-tile-alert svg {
        stroke: #e24b4a;
    }

    .vx-tile-alert .vx-tile-count,
    .vx-tile-alert .vx-tile-label {
        color: #a32d2d;
    }

    .vx-tile-alert:hover {
        background: #f7d5d5;
        border-color: #c73a39;
    }


.vx-alert-scroll a:hover,
.vx-alert-scroll a:focus,
.vx-alert-globe:hover,
.vx-alert-globe:focus {
    text-decoration: none !important;
    color: inherit !important;
}

.vx-alert-globe--map {
    width: 30px;
    height: 68px;
}

.vx-alert-tile.vx-tile-normal.vx-map-tile {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.vx-alert-wrap--map {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    flex-wrap: wrap;
}

.vx-map-tile svg {
    width: 17px;
}

.vx-tile-label--map {
    display: none;
}

/* Active filter state — blue selected tile */
.vx-tile-active {
    background: #eff6ff !important;
    border-color: #4882B3 !important;
    border-width: 2px !important;
}

    .vx-tile-active svg {
        stroke: #185fa5 !important;
    }

    .vx-tile-active .vx-tile-count,
    .vx-tile-active .vx-tile-label {
        color: #185fa5 !important;
    }

/* Filter chip shown in page header when a filter is active */
.vx-filter-chip {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #185fa5;
    background: #eff6ff;
    border: 1.5px solid #4882B3;
    border-radius: 20px;
    padding: 3px 10px;
    line-height: 1.4;
}

/* ── Graph cards ─────────────────────────────────────────── */
.tm-page .graph-card {
    border: 1px solid #e5e7eb;
    border-top: 3px solid #4882B3;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    padding: 16px 14px 12px;
    background: #fff;
    transition: box-shadow 0.18s ease;
}

    .tm-page .graph-card:hover {
        box-shadow: 0 6px 20px rgba(72,130,179,.12);
    }

.tm-page .graph-title {
    font-family: "neo-sans", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #060518;
    margin: 0;
}

.tm-page .graph-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0;
}

.tm-page .graphs-grid {
    margin: 0 10px 16px;
}

/* ── Map ─────────────────────────────────────────────────── */
.tm-page .travel-map {
    margin: 0 10px 10px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
}

/* ── Toolbar — no border, no shadow, just white bar ──────── */
.tm-content-area .defaultform.nav.navbar-nav.padding_10.navheight {
    background: #fff;
    border-radius: 0;
    margin: 12px 10px 0;
    border: none;
    padding: 0 10px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    overflow: visible;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

    .tm-content-area .defaultform.nav.navbar-nav.padding_10.navheight > span,
    .tm-content-area .defaultform.nav.navbar-nav.padding_10.navheight > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }

/* ── Grid card — no border, shadow sits on the table itself ─ */
.tm-grid-card {
    margin: 0px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

    /* Radius on the actual table, not the wrapper. No shadow — the card reads
       as a flat surface; the purple header is what separates it from the page.
       The outer border stays — it closes the card off on the left and right,
       where the first and last columns would otherwise bleed into the page —
       but recoloured from the base rule's #4882B3 steel blue (old palette) to
       #6863AF, matching the header row. Scoped here rather than changed on
       .gridview_default itself so the grids not yet on .tm-grid-card keep
       their current look until they are migrated. */
    .tm-grid-card .gridview_default {
        width: 100%;
        border: solid 0.5px #6863AF;
        border-radius: 12px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
        box-shadow: none;
    }

    .tm-grid-card .headerRow {
        background-color: #6863af !important;
        color: #fff !important;
        font-family: "lato", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .tm-grid-card .columnheaderdefault {
        background-color: #6863af !important;
        color: #fff !important;
        padding: 10px !important;
    }

    .tm-grid-card .oddRow {
        background-color: #fafafc !important;
    }

    .tm-grid-card .evenRow {
        background-color: #eef0f8 !important;
    }

    .tm-grid-card .columndefault {
        font-family: "lato", sans-serif;
        font-size: 13.5px;
        color: #204059;
        padding: 8px 10px !important;
    }

    /* Row hover — no transition (prevents sticky colour bug) */
    .tm-grid-card .gridview_default tr.oddRow:hover,
    .tm-grid-card .gridview_default tr.evenRow:hover {
        background-color: #e8eaf6 !important;
        cursor: pointer;
    }

        .tm-grid-card .gridview_default tr.oddRow:hover td,
        .tm-grid-card .gridview_default tr.evenRow:hover td {
            background-color: #e8eaf6 !important;
            color: #484293 !important;
        }

    /* Scrollable panel */
    .tm-grid-card .scrollable-panel {
        border: none !important;
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
    }

/* ── TOOLBAR: Add button + search pill ───────────────────── */

.tm-content-area .search-toolbar-container {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

    /* Gap only between Add button and the search pill — not between pill and textbox */
    .tm-content-area .search-toolbar-container > ul.nav.navbar-nav {
        margin-right: 6px;
        display: inline-flex;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        flex-shrink: 0;
    }

        .tm-content-area .search-toolbar-container > ul.nav.navbar-nav > li {
            list-style: none;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: #f0f1f8;
            border: none;
            border-radius: 8px;
            margin: 0;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.2s ease, box-shadow 0.2s ease;
        }

            .tm-content-area .search-toolbar-container > ul.nav.navbar-nav > li::before {
                content: "\f067";
                font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
                font-weight: 900;
                font-size: 13px;
                color: #484293;
                pointer-events: none;
                transition: color 0.2s ease;
            }

            .tm-content-area .search-toolbar-container > ul.nav.navbar-nav > li:hover {
                background: #484293;
                box-shadow: 0 2px 8px rgba(72,66,147,.3);
            }

                .tm-content-area .search-toolbar-container > ul.nav.navbar-nav > li:hover::before {
                    color: #fff;
                }

            /* Add image input — invisible overlay */
            .tm-content-area .search-toolbar-container > ul.nav.navbar-nav > li input[type="image"] {
                position: absolute !important;
                inset: 0 !important;
                width: 100% !important;
                height: 100% !important;
                opacity: 0 !important;
                cursor: pointer !important;
                margin: 0 !important;
                padding: 0 !important;
            }

/* ── Search pill: purple button fused to textbox ─────────── */

/* The search ImageButton: purple left half of pill.
   The ImageUrl points to blank.png so no src image shows.
   We draw a white magnifier via background-image SVG. */
.tm-content-area .tm-search-btn,
.tm-content-area .search-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    background-color: #484293 !important;
    border-radius: 20px 0 0 20px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    /* hide any src image the browser tries to render */
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    /* white magnifier SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

    .tm-content-area .tm-search-btn:hover,
    .tm-content-area .search-icon:hover {
        background-color: #3a3478 !important;
    }

/* Textbox — right half of pill, zero gap between it and the button */
.tm-content-area .searchbar-textbox {
    display: inline-flex !important;
    margin: 0 !important;
    border: 1.5px solid #d1d5db !important;
    border-left: none !important;
    border-radius: 0 20px 20px 0 !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    height: 36px !important;
    background: #f9fafb !important;
    color: #204059 !important;
    min-width: 180px;
    box-sizing: border-box;
    flex-shrink: 0;
    vertical-align: middle;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .tm-content-area .searchbar-textbox:focus {
        border-color: #4882B3 !important;
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(72,130,179,0.12) !important;
        outline: none !important;
    }

/* ── Print / Save buttons ────────────────────────────────── */
.tm-content-area .image-button-wrapper-print,
.tm-content-area .image-button-wrapper-save,
.tm-content-area .image-button-wrapper-save-all {
    background-image: none !important;
    background-color: #f0f1f8 !important;
    border: none !important;
    border-radius: 9px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 4px 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .tm-content-area .image-button-wrapper-print:hover,
    .tm-content-area .image-button-wrapper-save:hover,
    .tm-content-area .image-button-wrapper-save-all:hover {
        background-color: #484293 !important;
        box-shadow: 0 3px 10px rgba(72,66,147,.3) !important;
    }

    .tm-content-area .image-button-wrapper-print::before {
        content: "\f02f";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 15px;
        color: #484293;
        pointer-events: none;
        transition: color 0.2s ease;
    }

    .tm-content-area .image-button-wrapper-save::before {
        content: "\f0c7";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 15px;
        color: #484293;
        pointer-events: none;
        transition: color 0.2s ease;
    }

    .tm-content-area .image-button-wrapper-save-all::before {
        content: "\f019";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
        font-weight: 900;
        font-size: 15px;
        color: #484293;
        pointer-events: none;
        transition: color 0.2s ease;
    }

    .tm-content-area .image-button-wrapper-print:hover::before,
    .tm-content-area .image-button-wrapper-save:hover::before,
    .tm-content-area .image-button-wrapper-save-all:hover::before {
        color: #fff;
    }

.tm-content-area .invisible-image-button {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tm-content-area .inlinebutton {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.tm-content-area .navbar-right-lower {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}


/* ============================================================
   70. SIDEBAR LAYOUT — vx-root / vx-sidebar / vx-topbar
   ============================================================ */

/* Hidden server control tree — ViewState safe, invisible to users */
.vx-server-controls-hidden {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* ── Variables ───────────────────────────────────────────── */
:root {
    --vx-sidebar-w: 240px;
    --vx-sidebar-icon-w: 56px; /* icon-only width on desktop collapsed */
    --vx-topbar-h: 52px;
    --vx-sidebar-bg: #2d2b5e;
    --vx-sidebar-active: #484293;
    --vx-sidebar-hover: rgba(255,255,255,0.08);
    --vx-topbar-bg: #484293;
}

/* ── Root flex container ─────────────────────────────────── */
.vx-root {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.vx-sidebar {
    width: var(--vx-sidebar-w);
    background: var(--vx-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
    /* Mobile: hidden off-screen by default */
    transform: translateX(calc(-1 * var(--vx-sidebar-w)));
    transition: transform 0.22s ease;
}

    .vx-sidebar::-webkit-scrollbar {
        width: 4px;
    }

    .vx-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15);
        border-radius: 4px;
    }

/* Desktop: icons always visible — sidebar starts as icon-only strip */
@media (min-width: 768px) {
    .vx-sidebar {
        transform: translateX(0); /* always on screen */
        width: var(--vx-sidebar-icon-w); /* icon-only by default */
        transition: width 0.22s ease;
    }

    /* When open on desktop, expand to full width */
    .vx-sidebar--open {
        width: var(--vx-sidebar-w);
    }

    /* Hide text labels, chevrons and subnav when icon-only */
    .vx-sidebar:not(.vx-sidebar--open) .vx-nav__link span,
    .vx-sidebar:not(.vx-sidebar--open) .vx-sidebar__footer span {
        display: none;
    }

    .vx-sidebar:not(.vx-sidebar--open) .vx-nav__chevron {
        display: none;
    }

    .vx-sidebar:not(.vx-sidebar--open) .vx-subnav {
        display: none !important;
    }

    /* Centre icons when collapsed — use full strip width */
    .vx-sidebar:not(.vx-sidebar--open) .vx-nav__item {
        margin: 0;
        border-radius: 0;
        position: relative;
    }

    .vx-sidebar:not(.vx-sidebar--open) .vx-nav__link {
        justify-content: center;
        padding: 7px 0;
        border-radius: 0;
    }
}

/* Mobile: slide in from left */
@media (max-width: 767px) {
    .vx-sidebar--open {
        transform: translateX(0);
    }
}

/* Nav list */
.vx-nav {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    flex: 1;
}

.vx-nav__item {
    margin: 0px 6px 0;
    border-radius: 7px;
}

.vx-nav__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 12px;
    color: rgba(255,255,255,0.78) !important;
    text-decoration: none !important;
    font-family: "lato", sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

    .vx-nav__link i {
        display: flex;
        justify-content: center;
        width: 20px;
        font-size: 14px;
        flex-shrink: 0;
        text-align: center;
        opacity: 0.85;
        padding: 6px;
    }

    .vx-nav__link:hover {
        background: var(--vx-sidebar-hover) !important;
        color: #fff !important;
        text-decoration: none !important;
    }

        .vx-nav__link:hover i {
            opacity: 1;
        }

.vx-nav__item--active > .vx-nav__link {
    background: var(--vx-sidebar-active) !important;
    color: #fff !important;
}

    .vx-nav__item--active > .vx-nav__link i {
        opacity: 1;
    }

/* Logout */
.vx-nav__link--logout {
    color: rgba(255,255,255,0.55) !important;
    gap: 12px;
    padding: 10px 12px;
}

    .vx-nav__link--logout:hover {
        color: #ff8080 !important;
        background: rgba(255,100,100,0.1) !important;
    }

/* Sidebar footer */
.vx-sidebar__footer {
    flex-shrink: 0;
    padding: 12px 6px 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
    display: flex;
    justify-content: center;
}

/* .vx-sidebar__username removed — element no longer used */

/* ═══════════════════════════════════════════════════════════
   BODY — shifts right when sidebar open on desktop
   ═══════════════════════════════════════════════════════════ */
.vx-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    transition: margin-left 0.22s ease, width 0.22s ease;
    margin-left: 0;
}

/* Desktop: always offset by icon strip width */
@media (min-width: 768px) {
    .vx-body {
        margin-left: var(--vx-sidebar-icon-w);
        width: calc(100% - var(--vx-sidebar-icon-w));
    }

    .vx-body--sidebar-open {
        margin-left: var(--vx-sidebar-w);
        width: calc(100% - var(--vx-sidebar-w));
    }
}

/* ═══════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════ */
.vx-topbar {
    height: var(--vx-topbar-h);
    min-height: var(--vx-topbar-h);
    background: var(--vx-topbar-bg);
    display: flex !important;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

/* Hamburger — SVG based, clean lines */
/* Topbar hamburger. Hidden by default: on wide screens the sidebar is always on
   screen and carries its own hamburger in its header, so this would be a second
   control for the same thing.

   Below 768px the sidebar slides fully off the left edge - and its hamburger goes
   with it, leaving nothing on screen to bring it back. This is that way back. It
   sits left of the logo, so it does not disturb the topbar at any other width.

   No rule is needed to hide it once the sidebar opens: the sidebar is z-index 200
   against the topbar's 100, so it slides over this button and covers it. Covering
   rather than hiding also means the logo does not jump sideways. */
.vx-topbar__hamburger {
    display: none;
}

@media (max-width: 767px) {
    .vx-topbar__hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        border-radius: 7px;
        cursor: pointer;
        flex-shrink: 0;
        color: rgba(255,255,255,0.85);
        transition: background 0.15s ease, color 0.15s ease;
    }

        .vx-topbar__hamburger:hover {
            background: rgba(255,255,255,0.12);
            color: #fff;
        }
}

/* Sidebar hamburger button */
.vx-sidebar__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    flex-shrink: 0;
    color: rgba(255,255,255,0.6);
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    margin: 0;
}

    .vx-sidebar__hamburger:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
    }

/* Sidebar header row: hamburger + Navigation label side by side */
.vx-sidebar__header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: -2px;
    margin-top: 2px;
}

/* Logo in topbar */
.vx-topbar__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none !important;
}

.vx-topbar__logo-img {
    height: 20px;
    width: auto;
    object-fit: contain;
    padding-left: 10px;
}

/* Breadcrumb */
.vx-breadcrumb {
    flex: 1;
    font-family: "neo-sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgb(255 255 255 / 57%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 35px;
}

/* Breadcrumb separator and sub-item */
.vx-breadcrumb__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.vx-breadcrumb__sub {
    opacity: 0.85;
}

/* Right actions */
.vx-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Back button */
.vx-topbar__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .vx-topbar__back:hover {
        background: rgba(255,255,255,0.22);
    }

/* Username */
.vx-topbar__username {
    font-family: "lato", sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}

/* ── Suppress old header/nav that is now hidden ───────────── */
.app__container {
    display: contents;
}

.app {
    min-height: unset;
}


/* ── Sub-nav items injected below active parent ───────────── */
.vx-subnav {
    list-style: none;
    margin: 2px 0 4px 0;
    padding: 0;
}

.vx-subnav__item {
    margin: 0;
}

.vx-subnav__link {
    display: flex;
    align-items: center;
    padding: 7px 14px 7px 40px; /* indent under parent icon */
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
    font-family: "lato", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    border-radius: 6px;
    margin: 0 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    position: relative;
}

    .vx-subnav__link::before {
        content: '';
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        transition: background 0.15s ease;
    }

    .vx-subnav__link:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
        text-decoration: none !important;
    }

        .vx-subnav__link:hover::before {
            background: rgba(255,255,255,0.7);
        }

/* Active sub-item highlight */
.vx-subnav__item--active > .vx-subnav__link {
    background: var(--vx-sidebar-active) !important;
    color: #fff !important;
    font-weight: 600;
}

    .vx-subnav__item--active > .vx-subnav__link::before {
        background: #fff;
    }


/* Hide horizontal sub-menus — sidebar has them now */
/* .menu-container / .menu-container-lower hidden via JS only when injected into sidebar */


/* ── Collapsible sub-nav chevron ─────────────────────────── */
.vx-nav__chevron {
    margin-left: auto;
    font-size: 9px !important;
    opacity: 0.45;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* When has children, parent link cursor is pointer for toggle */
.vx-nav__item--has-children > a.vx-nav__link {
    cursor: pointer;
}

/* vx-subnav hidden by default — JS toggles display */
.vx-subnav {
    display: none;
}

/* ── Sidebar collapse toggle button (Salesforce-style) ───── */
/* Sits at the bottom of the sidebar, always visible */
.vx-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    cursor: pointer;
    margin: 0 auto 16px;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.22s ease;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
}

    .vx-sidebar__toggle:hover {
        background: rgba(255,255,255,0.22);
        color: #fff;
    }

    /* Arrow points LEFT when open (click to close), RIGHT when closed (click to open) */
    .vx-sidebar__toggle i {
        transform: rotate(180deg); /* default: points right = expand */
        transition: transform 0.22s ease;
    }

.vx-sidebar--open .vx-sidebar__toggle i {
    transform: rotate(0deg); /* when open: points left = collapse */
}

/* On mobile — the toggle button is inside the sidebar footer
   and the hamburger in the topbar handles open */
@media (max-width: 767px) {
    .vx-sidebar__toggle {
        display: none;
    }
}

/* Topbar logout button */
.vx-topbar__logout {
    display: flex;
    align-items: center;
    height: 28px;
    border-radius: 7px;
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.vx-topbar__logout-label {
    font-family: "lato", sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: inherit;
    margin-top: 5px;
}

.vx-topbar__logout:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.vx-topbar__logout i {
    font-size: 13px;
}

/* ── Topbar Customize button (matches logout look) ─────── */
.vx-topbar__customize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    width: 28px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

    .vx-topbar__customize:hover {
        color: #fff;
    }

    .vx-topbar__customize.is-active {
        color: #fff;
    }

    .vx-topbar__customize svg {
        flex-shrink: 0;
    }

    /* Default: show gear, hide check */
    .vx-topbar__customize .vx-icon-check {
        display: none;
    }

    .vx-topbar__customize .vx-icon-gear {
        display: inline-block;
    }

    /* Active: show check, hide gear */
    .vx-topbar__customize.is-active .vx-icon-gear {
        display: none;
    }

    .vx-topbar__customize.is-active .vx-icon-check {
        display: inline-block;
    }

/* Label hidden — icon only */
.vx-topbar__customize-label {
    display: none;
}


/* ── Sidebar header: NAVIGATION title + divider ─────────── */
.vx-sidebar__header {
    padding: 8px 14px 0px;
    flex-shrink: 0;
}

.vx-sidebar__nav-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    overflow: hidden;
    display: none; /* shown via ::after */
}

.vx-sidebar__hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 10px 0 2px;
    height: 0;
    padding: 0;
}

/* Sidebar nav title — "Navigation" when open, hidden when collapsed */
@media (min-width: 768px) {
    .vx-sidebar--open .vx-sidebar__nav-title {
        display: block;
    }

        .vx-sidebar--open .vx-sidebar__nav-title::after {
            content: 'Navigation';
        }

    .vx-sidebar:not(.vx-sidebar--open) .vx-sidebar__header {
        padding: 8px 6px 4px;
    }

    .vx-sidebar:not(.vx-sidebar--open) .vx-sidebar__header-row {
        justify-content: center;
    }
}

/* ── Breadcrumb navigable parent link ───────────────────── */
.vx-breadcrumb__link {
    color: rgba(255,255,255,0.75) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

    .vx-breadcrumb__link:hover {
        color: #fff !important;
        text-decoration: underline !important;
    }

.vx-breadcrumb__sep {
    color: rgba(255,255,255,0.35);
    margin: 0 3px;
    font-size: 13px;
}

.vx-breadcrumb__sub {
    color: rgba(255,255,255,0.7);
}

.vx-breadcrumb__current {
    color: #fff;
    font-weight: 500;
}

/* ── Back / Print / Save action buttons ─────────────────── */
.vx-action-btn {
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding: 19px 15px;
    padding-left: 5px;
    border: 2px solid #b8b8b9;
    border-radius: 7px;
    color: #374151;
    font-family: "neo-sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    text-decoration: none !important;
    margin-right: 0px;
    background: transparent;
}

    .vx-action-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        color: #111827;
    }

    .vx-action-btn i {
        font-size: 12px;
        color: #6b7280;
    }

    .vx-action-btn:hover i {
        color: #374151;
    }

/* ── Save button at bottom of form ──────────────────────── */
.vx-save-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0px;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
}

/* ═════════════════════════════════════════════════════════════
   BOOKING WIZARD  (BookingForm.aspx, Wizard tab)

   Three numbered steps, then one card per option. Reuses the
   page's existing pieces where they fit - .vx-searchbar-pill for
   the trip row, .vx-action-btn for the buttons - so the tab reads
   as part of the same form rather than a separate tool.
   ═════════════════════════════════════════════════════════════ */
.vx-wiz {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0 8px 0;
}

.vx-wiz-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #FFF;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 18px 22px 22px 18px;
}

/* The step number. Same mint/green as the strip chevrons. */
.vx-wiz-step__no {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 50%;
    background: #E8F5F0;
    border: 1px solid #2e7d3285;
    color: #2E7D32;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vx-wiz-step__body {
    flex: 1;
    min-width: 0;
}

.vx-wiz-step__title {
    margin: 2px 0 4px 0;
    font-size: 17px;
    font-weight: 700;
    color: #222;
}

.vx-wiz-step__hint {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #79808b;
}

/* Round +/- stepper, matching the guest counter on the Accommodation tab. */
.vx-wiz-step-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #b8b8b9;
    background: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    flex-shrink: 0;
}

/* ── What the trip needs ───────────────────────────────────── */
.vx-wiz-needs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vx-wiz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 2px solid #e5e7eb;
    border-radius: 19px;
    background: #FFF;
    color: #79808b;
    font-family: "neo-sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .vx-wiz-chip:hover {
        border-color: #b8b8b9;
        color: #444;
    }

    .vx-wiz-chip--on {
        background: #E8F5F0;
        border-color: #2E7D32;
        color: #2E7D32;
    }

.vx-wiz-subfield {
    margin-top: 16px;
    max-width: 560px;
}

.vx-wiz-sublabel {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9AA0AB;
    margin-bottom: 6px;
}

.vx-wiz-subinput {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-family: "lato", sans-serif;
    font-size: 14px;
    color: #222;
}

    .vx-wiz-subinput:focus {
        outline: none;
        border-color: #2E7D32;
    }

.vx-wiz-subhint {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #9AA0AB;
}

.vx-wiz-actions {
    margin-top: 18px;
}

.vx-wiz-plan {
    border-color: #2E7D32;
    color: #2E7D32;
}

    .vx-wiz-plan:hover {
        background: #E8F5F0;
    }

/* ── Results ───────────────────────────────────────────────── */
.vx-wiz-section {
    margin-bottom: 22px;
}

.vx-wiz-section__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #F0F0F0;
}

.vx-wiz-section__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F5F6F8;
    color: #4882B3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vx-wiz-section__title {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.vx-wiz-section__sub {
    font-size: 12.5px;
    color: #79808b;
}

.vx-wiz-empty {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FAFAFC;
    border: 1px dashed #e5e7eb;
    color: #79808b;
    font-size: 13px;
}

.vx-wiz-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* One option. The radio itself is hidden - the whole card is the
   hit area, and .vx-wiz-card--picked carries the selected state. */
.vx-wiz-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #FFF;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

    .vx-wiz-card:hover {
        border-color: #b8b8b9;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    }

    .vx-wiz-card input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    .vx-wiz-card--picked {
        border-color: #2E7D32;
        background: #F6FBF8;
    }

.vx-wiz-card__tick {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #d8dbe0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vx-wiz-card--picked .vx-wiz-card__tick {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #FFF;
}

.vx-wiz-card__img {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 8px;
    background: #F5F6F8;
}

.vx-wiz-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vx-wiz-card__title {
    font-size: 14.5px;
    font-weight: 700;
    color: #222;
}

.vx-wiz-card__sub {
    font-size: 13px;
    color: #555;
}

.vx-wiz-card__detail {
    font-size: 12px;
    color: #9AA0AB;
}

.vx-wiz-card__price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #4882B3;
    white-space: nowrap;
}

/* ── Confirm row ───────────────────────────────────────────── */
.vx-wiz-confirm {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
}

.vx-wiz-confirm__count {
    margin-right: auto;
    font-size: 13px;
    font-weight: 600;
    color: #79808b;
}

.vx-wiz-confirm__btn {
    border-color: #2E7D32;
    color: #2E7D32;
    height: auto;
    padding: 10px 18px;
}

    .vx-wiz-confirm__btn:hover {
        background: #E8F5F0;
    }

@media (max-width: 700px) {
    .vx-wiz-card {
        flex-wrap: wrap;
    }

    .vx-wiz-card__price {
        width: 100%;
        text-align: right;
    }
}

/* ═════════════════════════════════════════════════════════════
   LAST-ADDED CARD  (BookingForm.aspx, Dashboard tab)

   Sits in the strip above the Booking Nr card: this on the left,
   the jump-to-bottom chevron on the right. Same white card, same
   radius and shadow as the strips below it, but lighter - it is a
   status readout, not a section.
   ═════════════════════════════════════════════════════════════ */
/* The card sits in the tab strip, at the right-hand end, level with the tab icons.

   flex-basis 0 on the tab list is the load-bearing part. Its inner
   .flight-timeline-wrapper is overflow-x:auto, which makes it fill whatever it is
   given, so with the default basis:auto the tab list reported a full-width preferred
   size, the two children could not share a line, and the card wrapped onto a row of
   its own above the tabs. Basis 0 lets the card take its natural width first and the
   tab list absorb the remainder. */
.vx-tabs-host {
    flex-wrap: wrap;
    align-items: center;
}

    /* Scoped - .flight-timeline-outer is shared with other pages. */
    .vx-tabs-host > .flight-timeline-outer {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        justify-content: center;
    }

    .vx-tabs-host > .vx-lastpoi {
        flex: 0 0 auto;
        /* .tabs bleeds 20px past the container padding; this brings the card back in
           line with the right edge of the content below it. */
        margin-right: 20px;
        margin-left: 12px;
    }

/* Too narrow to sit beside the tabs: the card takes a full-width row of its own and,
   being last, drops below the tab list rather than pushing it down. */
@media (max-width: 1550px) {
    .vx-tabs-host > .vx-lastpoi {
        flex: 1 1 100%;
        /* max-width has to go with it. Left in place it clamps the 100% basis back to
           560px, which still fits beside the tabs - so the card never wraps and the tab
           list gets squeezed into a horizontal scroll instead, hiding half the tabs. */
        max-width: none;
        margin: 14px 20px 0 20px;
    }
}

.vx-lastpoi {
    display: flex;
    align-items: center;
    gap: 14px;
    /* A floor as well as a ceiling: without it the card shrinks to its text, so a
       short route and a long hotel name give visibly different cards and the status
       pill lands in a different place each time. */
    min-width: 360px;
    max-width: 560px;
    padding: 12px 18px;
    background: #FFF;
    border-radius: 10px;
    border-left: 3px solid #4882B3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vx-lastpoi__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #F5F6F8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
}

.vx-lastpoi__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* "Last added · Flight" */
.vx-lastpoi__eyebrow {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9AA0AB;
    white-space: nowrap;
}

.vx-lastpoi__kind::before {
    content: " · ";
}

.vx-lastpoi__kind {
    color: #4882B3;
}

.vx-lastpoi__title {
    font-size: 0.95em;
    font-weight: 700;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-lastpoi__when {
    font-size: 0.82em;
    color: #79808b;
    white-space: nowrap;
}

/* Status pill. Background colour is set per item in the code-behind, from the
   same GetPOIStatusColour the itinerary rows use. */
.vx-lastpoi__status {
    flex-shrink: 0;
    /* auto pushes it to the far edge; the parent's gap guarantees it never touches
       the title, even on a card whose text fills the width. */
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FFF;
}

@media (max-width: 700px) {
    .vx-lastpoi {
        max-width: 100%;
        flex: 1 1 100%;
    }

    .vx-lastpoi__title,
    .vx-lastpoi__when {
        white-space: normal;
    }
}

/* ── Jump to bottom ───────────────────────────────────────────
   Chevron button that scrolls down to .vx-save-footer. Declared by
   the page as an empty <div data-vx-scroll-bottom> and filled in by
   buildJumpToBottom in VeloxoApp.js.

   Styled to match the collapse chevrons already used on the booking
   strips - same 38px rounded square, same mint/green pair - so it
   reads as part of the page furniture rather than a new control. */
.vx-jump-slot {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    min-height: 38px;
}

.vx-jump-bottom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #2e7d3285;
    border-radius: 8px;
    background: #E8F5F0;
    color: #2E7D32;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, transform 0.1s ease;
}

    .vx-jump-bottom i {
        font-size: 15px;
        margin: 0;
    }

    .vx-jump-bottom:hover {
        background: #D8EFE6;
        box-shadow: 0 2px 8px rgba(46, 125, 50, 0.18);
    }

    .vx-jump-bottom:active {
        transform: translateY(1px);
    }

    /* Footer already on screen - nothing to jump to. Fades rather than
       display:none so the slot keeps its height and the layout is stable. */
    .vx-jump-bottom--hidden {
        opacity: 0;
        pointer-events: none;
    }

/* ============================================================