/* Fixed quick-links bar at the bottom of the screen on phones and small tablets. */
.svu-mbar { display: none; }

@media (max-width: 960px) {
    .svu-mbar {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 9000;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        padding: 0 4px;
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 10px 34px rgba(11, 31, 78, 0.28), 0 0 0 1px rgba(11, 31, 78, 0.06);
    }
    .svu-mbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 58px;
        padding: 9px 2px 8px;
        font-size: 0.64rem;
        font-weight: 600;
        color: #475569;
        text-decoration: none;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    .svu-mbar__item i { font-size: 1.2rem; line-height: 1; }
    .svu-mbar--n1 { grid-template-columns: 1fr; }
    .svu-mbar--n2 { grid-template-columns: repeat(2, 1fr); }
    .svu-mbar--n3 { grid-template-columns: repeat(3, 1fr); }
    .svu-mbar--n4 { grid-template-columns: repeat(4, 1fr); }
    .svu-mbar__item.is-on { color: var(--vred, #c0392b); }
    .svu-mbar__apply {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 62px;
        height: 62px;
        margin: -22px auto 0;
        border-radius: 50%;
        font-size: 0.62rem;
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(145deg, var(--vred, #c0392b), var(--vred-dk, #8b0000));
        border: 4px solid #fff;
        box-shadow: 0 8px 20px rgba(139, 0, 0, 0.4);
        -webkit-tap-highlight-color: transparent;
    }
    .svu-mbar__apply i { font-size: 1.3rem; line-height: 1; }

    /* room for the bar, and the floating buttons sit above it */
    body:has(.svu-mbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    body:has(.svu-mbar) .svu-wa { bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
    body:has(.svu-mbar) #svuScrollTop { bottom: calc(214px + env(safe-area-inset-bottom, 0px)); }
    body:has(.svu-mbar) .dk-toggle { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
}

[data-theme="dark"] .svu-mbar { background: #1e293b; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .svu-mbar__item { color: #cbd5e1; }
[data-theme="dark"] .svu-mbar__item.is-on { color: #ff8a7a; }
[data-theme="dark"] .svu-mbar__apply { border-color: #1e293b; }