/* FILE_VERSION = 1.0.0
 * Bara fixa de jos pe telefon (vogo/global/toolbar.php): patru legaturi cu iconita deasupra textului, iconite contur albastre.
 * Apare pana la 768px, pragul butoanelor plutitoare, care stau la 64px de jos, deasupra ei.
 */

.vf-toolbar {
    display: none;
}

@media (max-width: 768px) {
    .vf-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: flex;
        height: 56px;
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--vf-surface);
        border-top: 1px solid var(--vf-border);
        box-shadow: 0 -2px 10px rgba(13, 27, 42, 0.06);
    }

    /* Loc sub subsol, ca bara sa nu acopere ultimul rand al paginii */
    body {
        padding-bottom: 56px;
    }

    .vf-toolbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--vf-text);
        font-size: 12px;
        line-height: 1.2;
        text-decoration: none;
    }

    .vf-toolbar__item:active,
    .vf-toolbar__item:hover {
        color: var(--vf-blue);
    }

    .vf-toolbar__item svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: var(--vf-blue);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .vf-toolbar__icon {
        position: relative;
        display: inline-flex;
    }

    /* Numarul din cos, in coltul iconitei */
    .vf-toolbar .vf-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--vf-blue);
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }
}