/**
 * Alwajba mobile bottom bar (child theme).
 *
 * Desktop guard first: the bar markup is printed on every page, so it must be
 * hard-hidden outside the mobile media query. Because this rule appears BEFORE
 * the media query, equal-specificity mobile rules with !important win inside
 * it (same trick as css/mobile-sidebar.css).
 */
.alwajba-mb {
    display: none !important;
}

@media (max-width: 1200px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .alwajba-mb {
        position: fixed !important;
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 9990;
        display: flex !important;
        align-items: stretch;
        justify-content: space-around;
        max-width: 560px;
        margin: 0 auto;
        padding: 6px 8px;
        background: var(--alwajba-mb-bg, #fff);
        border-radius: 28px;
        box-shadow: 0 12px 32px rgba(29, 35, 64, .18), 0 2px 8px rgba(29, 35, 64, .08);
        transition: transform .3s ease;
    }
    /* Tucked away while the mobile sidebar / mega modal is open. */
    body.overlay-mobile .alwajba-mb,
    body.alwajba-ms-locked .alwajba-mb {
        transform: translateY(130%);
    }

    .alwajba-mb-item {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        padding: 4px 2px;
        border-radius: 20px;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .alwajba-mb-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--alwajba-mb-text, #6b7086);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Icon chips (all items except the center button). */
    .alwajba-mb-chip {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #fde7ef;
        transition: background .2s ease;
    }
    .alwajba-mb-chip svg {
        width: 20px;
        height: 20px;
    }

    /* Per-item icon colors (echoes the reference palette). */
    .alwajba-mb-home .alwajba-mb-chip svg     { color: var(--alwajba-mb-active, #ff2d78); }
    .alwajba-mb-categories .alwajba-mb-chip svg { color: #2f86ff; }
    .alwajba-mb-wishlist .alwajba-mb-chip svg { color: #ff4d6d; }
    .alwajba-mb-account .alwajba-mb-chip svg  { color: #2f86ff; }

    /* Active item: soft tinted chip + colored label. */
    .alwajba-mb-item.is-active .alwajba-mb-chip {
        background: #fde7ef;
        background: color-mix(in srgb, var(--alwajba-mb-active, #ff2d78) 14%, #fff);
    }
    .alwajba-mb-item.is-active .alwajba-mb-label {
        color: var(--alwajba-mb-active, #ff2d78);
    }

    /* Raised center button. */
    .alwajba-mb-center {
        justify-content: flex-start;
    }
    .alwajba-mb-circle {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        margin-top: -30px;
        border-radius: 50%;
        background: var(--alwajba-mb-center, #ff2d78);
        color: #fff;
        box-shadow: 0 0 0 6px var(--alwajba-mb-bg, #fff), 0 8px 18px rgba(29, 35, 64, .22);
    }
    .alwajba-mb-circle svg {
        width: 26px;
        height: 26px;
    }
    .alwajba-mb-center .alwajba-mb-label {
        margin-top: 3px;
    }

    /* Wishlist count badge. */
    .alwajba-mb-badge {
        position: absolute;
        top: -4px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--alwajba-mb-badge, #ff2d78);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--alwajba-mb-bg, #fff);
    }
    .alwajba-mb-badge-hidden {
        display: none;
    }
}