/* AL Shop Mobile Chat + Cart Activation V1.4 */

html body .alshop-b2b-header-caption {
    display: none !important;
}

@media (max-width: 991.98px) {
    [data-alshop-chat-prehidden="1"],
    [data-alshop-floating-chat-hidden="1"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .alshop-mobile-chat-nav-slot {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .alshop-mobile-chat-nav-item {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    /*
     * PURE CSS CHAT ICON
     * No SVG. No Line Awesome. No icon font.
     * This avoids the single-product page's SVG/icon overrides.
     */
    .alshop-mobile-chat-icon-css {
        position: relative !important;
        display: block !important;
        width: 21px !important;
        height: 17px !important;
        min-width: 21px !important;
        min-height: 17px !important;
        flex: 0 0 17px !important;

        margin: 0 auto 1px !important;
        padding: 0 !important;

        border: 1.7px solid currentColor !important;
        border-radius: 6px !important;
        background: transparent !important;

        color: inherit !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;

        box-sizing: border-box !important;
        transform: none !important;
    }

    .alshop-mobile-chat-icon-css::before {
        content: "" !important;
        position: absolute !important;

        left: 4px !important;
        bottom: -5px !important;

        width: 7px !important;
        height: 7px !important;

        border-left: 1.7px solid currentColor !important;
        border-bottom: 1.7px solid currentColor !important;

        background: transparent !important;
        transform: skewY(-30deg) rotate(-12deg) !important;
        transform-origin: center !important;

        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    .alshop-mobile-chat-icon-css::after {
        content: "•••" !important;
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        top: -3px !important;

        display: block !important;
        width: 100% !important;

        color: currentColor !important;
        font-family: Arial, sans-serif !important;
        font-size: 11px !important;
        line-height: 17px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-align: center !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    .alshop-mobile-chat-nav-label {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    /* Neutralize old V1.1 DOM mover if stale classes remain. */
    .alshop-mobile-native-product-actions-sticky {
        position: static !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: auto !important;
        min-height: 0 !important;
        margin: initial !important;
        padding: initial !important;
        border: initial !important;
        border-radius: initial !important;
        background: initial !important;
        box-shadow: initial !important;
        overflow: visible !important;
        transform: none !important;
    }

    #alshop-mobile-retail-sticky-cta {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #alshop-mobile-product-action-portal,
    #alshop-mobile-cart-checkout-portal {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;
        bottom: calc(
            var(--alshop-mobile-nav-height, 64px)
            + 7px
            + env(safe-area-inset-bottom, 0px)
        ) !important;

        z-index: 2147482000 !important;

        display: none;
        align-items: center !important;
        gap: 7px !important;

        min-height: 58px !important;
        padding: 6px !important;

        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 15px !important;

        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 8px 28px rgba(0,0,0,.18) !important;

        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        isolation: isolate !important;
        transform: translateZ(0) !important;
        pointer-events: auto !important;
    }

    #alshop-mobile-product-action-portal.alshop-visible,
    #alshop-mobile-cart-checkout-portal.alshop-visible {
        display: flex !important;
    }

    #alshop-mobile-product-action-portal .alshop-portal-buy,
    #alshop-mobile-cart-checkout-portal .alshop-cart-checkout-main {
        position: relative !important;
        z-index: 2 !important;

        flex: 1 1 auto !important;
        min-width: 0 !important;
        min-height: 46px !important;

        border: 0 !important;
        border-radius: 11px !important;

        background: #ef4f2a !important;
        color: #fff !important;

        font-size: 14px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        text-align: center !important;
    }

    #alshop-mobile-product-action-portal .alshop-portal-icon {
        position: relative !important;
        z-index: 2 !important;

        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;

        border-radius: 50% !important;
        border: 1.5px solid #ef4f2a !important;

        background: #fff !important;
        color: #ef4f2a !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #alshop-mobile-product-action-portal .alshop-portal-icon i {
        font-size: 20px !important;
        line-height: 1 !important;
    }

    #alshop-mobile-cart-checkout-portal {
        padding: 7px !important;
    }

    #alshop-mobile-cart-checkout-portal .alshop-cart-checkout-copy {
        flex: 0 0 auto !important;
        min-width: 68px !important;
        max-width: 100px !important;
        padding-left: 4px !important;
        pointer-events: none !important;
    }

    #alshop-mobile-cart-checkout-portal .alshop-cart-checkout-copy strong {
        display: block !important;
        margin: 0 !important;

        color: #222 !important;

        font-size: 11px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }

    #alshop-mobile-cart-checkout-portal .alshop-cart-checkout-copy small {
        display: block !important;
        margin-top: 3px !important;

        color: #757b84 !important;

        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    /*
     * Pure CSS arrow too, because apparently icon libraries have already
     * contributed enough excitement to this project.
     */
    #alshop-mobile-cart-checkout-portal .alshop-cart-arrow {
        position: relative !important;
        display: inline-block !important;
        width: 17px !important;
        height: 12px !important;
        flex: 0 0 17px !important;
    }

    #alshop-mobile-cart-checkout-portal .alshop-cart-arrow::before {
        content: "" !important;
        position: absolute !important;

        left: 0 !important;
        top: 5px !important;

        width: 15px !important;
        height: 2px !important;

        border-radius: 2px !important;
        background: currentColor !important;
    }

    #alshop-mobile-cart-checkout-portal .alshop-cart-arrow::after {
        content: "" !important;
        position: absolute !important;

        right: 0 !important;
        top: 2px !important;

        width: 7px !important;
        height: 7px !important;

        border-top: 2px solid currentColor !important;
        border-right: 2px solid currentColor !important;

        transform: rotate(45deg) !important;
    }

    #alshop-mobile-product-action-portal button:disabled,
    #alshop-mobile-cart-checkout-portal button:disabled {
        opacity: .45 !important;
        cursor: not-allowed !important;
    }

    body.alshop-has-product-action-portal,
    body.alshop-has-cart-checkout-portal {
        padding-bottom: calc(
            var(--alshop-mobile-nav-height, 64px)
            + 82px
            + env(safe-area-inset-bottom, 0px)
        ) !important;
    }
}

@media (min-width: 992px) {
    #alshop-mobile-product-action-portal,
    #alshop-mobile-cart-checkout-portal {
        display: none !important;
    }
}

/* ALSHOP_NATIVE_CHAT_ICON_V2_1_1_START */
@media (max-width: 991.98px) {
    /*
     * Native Chat icon uses exactly the same Line Awesome rendering model as
     * Ballina / Kategorite / Kerko / Shporta / Kycu.
     *
     * The selector is intentionally scoped to the real native bottom nav so
     * product-page icon rules cannot hide or collapse it.
     */
    html body .agm-mobile-bottom-nav2
    .alshop-mobile-chat-nav-item
    > i.alshop-native-chat-icon-v211 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #717784 !important;
        background: transparent !important;
        border: 0 !important;

        font-family: "Line Awesome Free" !important;
        font-style: normal !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        overflow: visible !important;
        transform: none !important;
        pointer-events: none !important;
    }

    html body .agm-mobile-bottom-nav2
    .alshop-mobile-chat-nav-item:hover
    > i.alshop-native-chat-icon-v211 {
        color: var(--agm-orange, #ff4b23) !important;
    }
}
/* ALSHOP_NATIVE_CHAT_ICON_V2_1_1_END */

/* ALSHOP_PRODUCT_CHAT_CART_V2_1_2_GLOBAL_START */
@media (max-width: 991.98px) {
    html body .agm-mobile-bottom-nav2 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    html body .agm-mobile-bottom-nav2
    .alshop-mobile-chat-nav-slot {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 6px !important;

        color: #717784 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;

        text-decoration: none !important;
    }

    html body .agm-mobile-bottom-nav2
    .alshop-native-chat-svg-v212 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        flex: 0 0 20px !important;

        margin: 0 !important;
        padding: 0 !important;

        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;

        overflow: visible !important;
        pointer-events: none !important;
    }

    /*
     * If an old cached JS briefly writes the older CSS chat icon,
     * keep that icon visible too until the fresh JS takes over.
     */
    html body .agm-mobile-bottom-nav2
    .alshop-mobile-chat-icon-css {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /*
     * Cart count no longer sits at the very top edge of the navigation.
     * Keep it close to the cart glyph and away from Bli tani above.
     */
    html body .agm-mobile-bottom-nav2
    .agm-mobile-cart-badge {
        top: 7px !important;
        right: auto !important;
        left: calc(50% + 4px) !important;

        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;

        padding: 0 4px !important;
        z-index: 4 !important;
    }
}
/* ALSHOP_PRODUCT_CHAT_CART_V2_1_2_GLOBAL_END */
