:root {
    /* Colour scheme (Singapore-Bank brand): teal primary, navy dark, light teal tint. Amber is deliberately not used here; it is reserved for "Best rate" badges, promos and main CTAs. */
    --sgb-accent: #0B5D66;
    --sgb-accent-dark: #14233B;
    --sgb-tint: #E6F0F1;
    --sgb-on-accent: #ffffff;
}
.sgb-jump-nav-sentinel { display: block; height: 0; }
.sgb-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sgb-jump-nav a {
    display: inline-block;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sgb-accent-dark);
    background: var(--sgb-tint);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.sgb-jump-nav a:hover {
    background: var(--sgb-accent-dark);
    color: var(--sgb-on-accent);
}
/*
 * The floating copy is appended directly to <body> by the script
 * below rather than toggled on the in-page nav itself. If the
 * in-page nav's ancestors include anything with a transform,
 * filter, perspective, contain, or will-change, that ancestor
 * becomes the containing block for a fixed-position descendant
 * (per spec) instead of the viewport — trapping it in a local
 * stacking context where no z-index can win against unrelated
 * page elements like a map widget. A body-level portal has no
 * such ancestors, so position:fixed always resolves against the
 * real viewport and z-index competes at the top level.
 */
#sgb-jump-nav-portal { display: none; }
@media (min-width: 783px) {
    #sgb-jump-nav-portal.sgb-jump-nav--floating {
        display: flex;
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        z-index: 999999;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    #sgb-jump-nav-portal.sgb-jump-nav--floating.sgb-jump-nav--visible {
        opacity: 1;
        pointer-events: auto;
    }
    /* Open/close toggle: a small round button above the pills,
       right-aligned so it stays put when the pills are hidden. */
    #sgb-jump-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--sgb-accent);
        color: var(--sgb-on-accent);
        box-shadow: 0 2px 10px rgba(0,0,0,.25);
        cursor: pointer;
    }
    #sgb-jump-nav-toggle svg { width: 18px; height: 18px; pointer-events: none; }
    #sgb-jump-nav-toggle:hover { background: var(--sgb-accent-dark); }
    #sgb-jump-nav-portal.sgb-jump-nav--collapsed a { display: none; }
}

/* Mobile: a small floating round button that opens a pill drawer,
   instead of the always-visible floating column used on desktop
   (labels need the room; a bare row of dots wouldn't say which
   dot goes where). Same body-level-portal reasoning as above. */
#sgb-jump-nav-fab {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sgb-accent);
    color: var(--sgb-on-accent);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity .25s ease;
}
#sgb-jump-nav-fab svg { width: 20px; height: 20px; pointer-events: none; }
#sgb-jump-nav-fab:hover,
#sgb-jump-nav-fab:active { background: var(--sgb-accent-dark); }
#sgb-jump-nav-fab:active { transform: scale(.92); }
#sgb-jump-nav-drawer {
    display: none;
    position: fixed;
    right: 16px;
    /* Anchored just above the FAB (48px tall, sitting at
       bottom: 16px) with an 8px gap: 16px + 48px + 8px. */
    bottom: calc(16px + 56px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    /* dvh reflects the space actually visible once the mobile
       browser's address bar is accounted for; vh alone can
       include space that's hidden behind it, which is why the
       top of a tall drawer was getting cut off. Older browsers
       without dvh support just use the vh line above it. */
    max-height: 65vh;
    max-height: 65dvh;
    overflow-y: auto;
    background: #fff;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    z-index: 999999;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
#sgb-jump-nav-drawer a { text-align: center; }
@media (max-width: 782px) {
    #sgb-jump-nav-fab.sgb-jump-nav--floating {
        display: flex;
    }
    #sgb-jump-nav-fab.sgb-jump-nav--visible {
        opacity: 1;
        pointer-events: auto;
    }
    #sgb-jump-nav-drawer.sgb-jump-nav--floating {
        display: flex;
    }
    #sgb-jump-nav-drawer.sgb-jump-nav--open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}