/*
 * F8 + F12c (buyer QA audit 28-10-2026) - the CART PAGE on a phone.
 * Loaded by resources/views/cart/index.blade.php only, after style_inner.css.
 *
 * F8, as reported at 375 px: every basket line was a ~420 px stacked card and
 * "Avancar para o pagamento" sat about 4.480 px down the page - roughly six
 * screens of scrolling - with no running total and no CTA in sight.
 *
 * WHY it was that tall. The theme turns the cart table into stacked blocks below
 * 768 px (style_inner.css :20841 `.shop-table:not(.account-orders-table)`): the
 * thead is hidden, every `td` becomes a centred block, each `tr` gets
 * `padding: 4.2rem 2rem 4rem`, and - the expensive part - the thumbnail wrapper
 * keeps `max-width: 30rem`, so the 100 px product photo is blown up to 300 px
 * tall on its own line. Photo + name + price + quantity + subtotal, one under
 * the other, is the 420 px card.
 *
 * WHAT THIS DOES. The same cells, laid out as a grid instead of a stack: a 64 px
 * thumbnail on the left, name / price / line total beside it, the quantity box
 * under them. A line is about 110 px instead of 420. The summary in the sidebar
 * is untouched; a fixed bar at the foot of the window carries the selected total
 * and the checkout button so neither is ever more than a tap away.
 *
 * Nothing here is loaded above 767 px, and nothing here changes a single amount:
 * every figure in the bar is copied from the summary the server rendered.
 */

/* ── F12c - the "Produto removido - Desfazer" toast ─────────────────────────
   Its own element, not showToast() in layouts/cart_modal_scripts.blade.php:
   that one sets textContent (so it cannot hold a button) and hides itself after
   3 s, while the deck asks for 5-8 s and an action the buyer can click. */
.f12c-undo {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    z-index: 10600;            /* over the F8 bar below, and over the theme's own toasts */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.f12c-undo.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.f12c-undo__text {
    flex: 1 1 auto;
    min-width: 0;
}

.f12c-undo__action {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
}

.f12c-undo__action:hover,
.f12c-undo__action:focus {
    background: rgba(255, 255, 255, .14);
}

/* A line waiting out its undo window is gone from the page, but still in the
   basket - so it is hidden, never deleted, and comes straight back. */
#cart-items-table tr.f12c-pending {
    display: none !important;
}

@media (max-width: 767px) {
    /* Clear of the F8 bar below: stacked over it, the toast's own "Desfazer" would be
       sitting on top of the checkout button. */
    .f12c-undo { bottom: 88px; }
}

@media (min-width: 768px) {
    /* On a desktop the toast belongs in the corner, not across the window. */
    .f12c-undo {
        left: auto;
        right: 24px;
        max-width: 420px;
    }
}

/* ── F8 - compact rows + a fixed total/CTA bar, phones and small tablets ──── */
@media (max-width: 767px) {

    /* The grid. Area names are used rather than nth-child so that a cell added
       to the row later lands somewhere deliberate instead of silently shifting
       the next three. */
    #cart-items-table tbody tr {
        display: grid !important;
        grid-template-columns: 22px 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "chk thumb name  name"
            "chk thumb price total"
            "chk qty   qty   qty";
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        padding: 12px 12px !important;   /* was 4.2rem 2rem 4rem */
        text-align: left !important;
    }

    #cart-items-table tbody td {
        margin: 0 !important;            /* the theme centres every cell with auto margins */
        padding: 0 !important;
        min-width: 0;
        text-align: left !important;
    }

    #cart-items-table tbody tr > td:first-child { grid-area: chk; align-self: start; padding-top: 4px !important; }
    #cart-items-table tbody td.product-thumbnail { grid-area: thumb; align-self: start; }
    #cart-items-table tbody td.product-name      { grid-area: name; }
    #cart-items-table tbody td.product-price     { grid-area: price; }
    #cart-items-table tbody td.product-subtotal  { grid-area: total; text-align: right !important; }
    #cart-items-table tbody td.product-quantity  { grid-area: qty; }

    /* THE 420 px: `max-width: 30rem` on the wrapper. 64 px is the deck's ask. */
    #cart-items-table td.product-thumbnail > div,
    #cart-items-table td.product-thumbnail img {
        max-width: 64px !important;
        width: 64px !important;
        margin: 0 !important;
    }

    #cart-items-table td.product-thumbnail img {
        height: auto;
        border-radius: 4px;
    }

    /* The x sat half outside a 300 px photo; on a 64 px one it has to come in. */
    #cart-items-table td.product-thumbnail .btn-close {
        top: -8px !important;
        right: -8px !important;
    }

    #cart-items-table td.product-name { margin-bottom: 0 !important; }

    #cart-items-table td.product-name > a {
        font-size: 13px;
        line-height: 1.3;
    }

    /* The seller / variant / origin lines are what pushed the card over 400 px.
       They stay - they are the only place the buyer learns who is selling - but
       at the size of a caption. */
    #cart-items-table td.product-name p,
    #cart-items-table td.product-name .text-muted {
        margin-bottom: 0 !important;
        font-size: 10px !important;
        line-height: 1.3;
    }

    #cart-items-table td.product-price,
    #cart-items-table td.product-subtotal {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    #cart-items-table td.product-subtotal .amount { font-weight: 600; }

    /* The hidden thead took the column headings with it, so the two amounts say
       what they are. The words come from the blade (data-f8-label), so they are
       the page's own translations and not English baked into a stylesheet. */
    #cart-items-table td.product-price[data-f8-label]::before,
    #cart-items-table td.product-subtotal[data-f8-label]::before {
        content: attr(data-f8-label) " ";
        display: inline;
        color: #999;
        font-size: 10px;
        font-weight: 400;
        text-transform: uppercase;
    }

    #cart-items-table td.product-quantity { margin-bottom: 0 !important; }

    #cart-items-table td.product-quantity .quantity-form { justify-content: flex-start; }

    #cart-items-table td.product-quantity .update-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    #cart-items-table td.product-quantity .input-group {
        max-width: 104px !important;
        margin-bottom: 0 !important;
    }

    /* The "Update" button is only needed where the g86 live save is NOT running.
       `g86-live` is added to the table by cart/g86/_live.blade.php when its script
       starts, so a visitor without JavaScript keeps the button that posts the form. */
    #cart-items-table.g86-live td.product-quantity .update-btn { display: none !important; }

    #cart-items-table .g56b-qty-error,
    #cart-items-table .g86-stock,
    #cart-items-table .g86-save-state {
        max-width: none !important;
        margin-left: 0 !important;
        font-size: 10px;
    }

    /* Room for the fixed bar, so the last row and the "Clear cart" button are
       not sitting underneath it. */
    body.f8-cart-bar-on { padding-bottom: 88px; }
}

/* The bar itself. Hidden above 767 px (the sticky sidebar does the job there)
   and hidden while a cart drawer is open, the same rule cart-drawer-layer.css
   applies to the floating chat buttons - two fixed layers over each other on a
   375 px screen is how a CTA becomes untappable. */
.f8-cart-bar { display: none; }

@media (max-width: 767px) {
    .f8-cart-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10400;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid #e4e4e4;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
    }

    .f8-cart-bar__totals {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.2;
    }

    .f8-cart-bar__label {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #777;
    }

    .f8-cart-bar__amount {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #222;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .f8-cart-bar__count {
        display: block;
        font-size: 10px;
        color: #777;
    }

    .f8-cart-bar__cta {
        flex: 0 0 auto;
        min-height: 44px;              /* a tap target, not a link */
        padding: 10px 18px;
        font-size: 13px;
        white-space: nowrap;
    }

    .f8-cart-bar__cta[disabled] { opacity: .5; }

    /* The amount is being recomputed: say so rather than leave a figure that is
       about to change looking settled. */
    .f8-cart-bar.is-busy .f8-cart-bar__amount { opacity: .45; }

    html.ob-drawer-open .f8-cart-bar { display: none; }
}