/* =========================================================
   Cart (/cart) page styles
   - mobile fixed checkout bar
     (keeps the site bottom navigation visible; the bar
      sits right above .mobile-footer)
   ========================================================= */

/* Base: the fixed checkout bar is hidden on every screen size.
   On mobile the media query below comes AFTER this rule, so its
   display:flex wins by source order -> the bar shows up. */
.cart-sticky-pay {
    display: none;
}
#cart-button-mobile-footer{
    display: none;
}

@media (max-width: 991.98px) {
    /* hide the inline desktop checkout button on mobile
       (the fixed bar replaces it) */
    #cart-checkout-btn {
        display: none !important;
    }

    /* make room for the fixed bar + bottom navigation so content
       isn't covered. Two layers: the bar itself + the nav below it.
       (bottom offset of the bar is fine-tuned by JS at runtime,
        matching the real .mobile-footer height.) */
    .cart-page .content {
        padding-bottom: 150px;
    }

    .cart-sticky-pay {
        position: fixed;
        left: 0;
        right: 0;
        /* default bottom; JS sets this to the measured mobile-footer
           height so it never overlaps the bottom navigation. */
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #eef0f4;
        box-shadow: 0 -4px 18px rgba(17, 24, 39, 0.08);
    }

    .cart-sticky-pay__total {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cart-sticky-pay__total small {
        font-size: 11px;
        color: var(--text-muted);
    }

    .cart-sticky-pay__total strong {
        font-size: 16px;
        font-weight: 800;
        color: #1f2430;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-sticky-pay__btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 13px 26px;
        font-size: 15px;
        font-weight: 800;
        color: #fff;
        background: var(--main-color-green);
        border: 0;
        border-radius: 12px;
        box-shadow: 0 6px 14px rgba(24, 157, 14, 0.30);
        text-decoration: none;
        transition: opacity .15s ease, transform .05s ease;
    }

    .cart-sticky-pay__btn:active {
        transform: translateY(1px);
    }
}