/*
 * DEVMC - 2026.09.29 - feature #carrito-rediseno# "Rediseño unificado de /shopping-cart (PC + mobile)."
 *
 * Por que este archivo existe: `component/cart/shoppingCart.blade.php` (el partial de items) se
 * re-inyecta por jQuery en CADA alta/baja/cambio de cantidad (`renderCartComponents()` /
 * `updateCartView()` en resources/views/layouts/theme-admin/velvet/js/ecommerce.blade.php hacen
 * `$('#shopping-cart').html(shoppingCartHtml)`). Un <style> DENTRO del partial se re-parsea en cada
 * uno de esos reemplazos; un <link> en el <head> se carga una sola vez. Se sirve solo en esta pagina
 * via @section('other-css') de shoppingCart.blade.php (que la incluye), no en el bundle global.
 *
 * Enfoque: la MISMA tarjeta de item (antes solo <992px) pasa a ser el layout por defecto en TODOS
 * los anchos; a partir de 992px el grid de cada fila gana columnas (stock/precio visibles inline)
 * en vez de apilarse. La tabla clasica de escritorio (bordes + <thead> pintado) desaparece.
 *
 * Selectores reusados de siempre y NO tocar sin buscar antes quien los usa:
 *   table.cart_summary, .cart_product, .cart_description, .availability, .price, .qty,
 *   .quantity-container, .quantity-btn, .quantity-input, .cart-btn-increment/decrement/delete,
 *   .action, .cart_navigation, .continue-btn, .checkout-btn, .whatsapp-checkout
 * (JS del carrito, E2E de framework-qa y el legado de style.css leen varios de estos por nombre.)
 */

/* ===== Titulo "CARRITO DE COMPRAS (N)" ===== */
.cart-page-title__count { color: #8a857d; font-weight: 600; }

/* ===== Banner de progreso hacia el envio gratis =====
   DEVMC - 2026.10.15 - refactor #free-shipping-mini-cart-legend#: the .cart-free-shipping-banner rules
   moved to style.css (loaded on every storefront page) next to the header mini-cart legend that
   shares the same partial (component/cart/free-shipping-legend.blade.php). */

/* ===== Tabla → lista de tarjetas, en todos los anchos ===== */
.table-responsive { margin-top: 10px; }

.table.cart_summary {
    width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.table.cart_summary thead { display: none; }

.table.cart_summary,
.table.cart_summary tbody,
.table.cart_summary tr {
    display: block;
    width: 100%;
}

.table.cart_summary tbody tr {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-areas:
        "img desc  del"
        "img avail avail"
        "img qty   total";
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 5px rgba(20, 20, 25, 0.05);
}
.table.cart_summary tbody td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    vertical-align: middle;
}

/* miniatura */
.table.cart_summary td.cart_product { grid-area: img; align-self: start; }
.table.cart_summary td.cart_product img {
    width: 72px; height: 72px; max-width: none;
    object-fit: cover; border-radius: 10px; margin: 0; display: block;
    background: #f4f5f7;
}

/* nombre + chips de variante */
.table.cart_summary td.cart_description { grid-area: desc; min-width: 0; }
.table.cart_summary td.cart_description .product-name { margin: 0 0 6px; line-height: 1.25; }
.table.cart_summary td.cart_description .product-name a {
    font-size: 14px; color: #23262e; font-weight: 700; text-decoration: none;
}
.table.cart_summary td.cart_description .product-name a:hover { color: var(--header-menu-top-color); }
.table.cart_summary td.cart_description > br { display: none; }
.table.cart_summary td.cart_description > small {
    display: inline-flex; margin: 0 5px 5px 0; line-height: 1; vertical-align: middle;
}
.table.cart_summary td.cart_description > small > a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: #5a5550;
    background: #f4f5f7; border: 1px solid #eceef1;
    padding: 3px 9px; border-radius: 999px; text-decoration: none;
}

/* swatch de color: SOLO el background-color/background-image son dinamicos (inline, desde la BD) */
.table.cart_summary td.cart_description > small > a .color-swatch {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid #ddd; vertical-align: middle; margin-left: 4px;
}

/* badge mayorista: antes con style="" estatico, ahora clases (frontend-best-practices) */
.table.cart_summary .wholesale-badge {
    background-color: var(--discount-color);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.table.cart_summary .wholesale-badge-note {
    color: #756f66;
    font-size: 10px;
    margin-left: 4px;
}

/* borrar, arriba a la derecha */
.table.cart_summary td.action { grid-area: del; align-self: start; justify-self: end; }
.table.cart_summary td.action a { font-size: 16px; color: var(--badge-color); }
.table.cart_summary td.action a:hover { opacity: .75; }

/* stock: pill liviano, visible en todos los anchos (antes oculto en mobile) */
.table.cart_summary td.availability { grid-area: avail; justify-self: start; }
.table.cart_summary .availability .label {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.table.cart_summary td.availability.in-stock .label { background: #e8f5e9; }
.table.cart_summary td.availability.out-of-stock .label { background: #fdecea; }
/* DEVMC - 2026.09.29 - fix #carrito-rediseno# "El texto vive en un <span class='text-success|
   text-danger'> ADENTRO de .label, y el theme le pinta a ese span interno fondo verde fuerte +
   texto blanco con 12px de line-height: medido en el navegador, quedaba una segunda pastilla de
   11px de alto que se leia como texto tachado. El color lo pone el pill de afuera; el span interno
   solo aporta el tono del texto." */
.table.cart_summary .availability .label > span {
    background: none;
    padding: 0;
    font-size: inherit;
    line-height: 1.3;
}
.table.cart_summary td.availability.in-stock .label > span { color: #1b7a3a; }
.table.cart_summary td.availability.out-of-stock .label > span { color: #c62828; }

/* precio unitario: oculto por defecto (redundante con el subtotal), visible desde 992px */
.table.cart_summary td.price:not([data-label]) { display: none; }
.table.cart_summary .responsive-total-label,
.table.cart_summary .responsive-price-label { display: none !important; }

/* fila inferior: stepper (izq) + subtotal (der) */
.table.cart_summary td.qty { grid-area: qty; }
.table.cart_summary td.qty .quantity-container { justify-content: flex-start; margin: 0; }
.table.cart_summary td.price[data-label="Total"] { grid-area: total; justify-self: end; align-self: center; }
.table.cart_summary td.price[data-label="Total"] span { font-size: 15px; font-weight: 800; color: #23262e; }

/* ===== Stepper de cantidad (igual en todos los anchos) ===== */
.table.cart_summary .quantity-container { display: flex; align-items: center; justify-content: center; }
.table.cart_summary .quantity-btn {
    background-color: #f4f5f7;
    color: #23262e;
    font-weight: 700;
    border: 1px solid #ececf1;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: background-color .18s ease;
}
.table.cart_summary .quantity-btn:hover { background-color: #ececf1; }
.table.cart_summary .quantity-container .quantity-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.table.cart_summary .quantity-container .quantity-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.table.cart_summary .quantity-input {
    text-align: center !important;
    border: 1px solid #ececf1 !important;
    border-left: none !important;
    border-right: none !important;
    width: 44px !important;
    height: 34px !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: #23262e !important;
    box-shadow: none !important;
}

/* ===== Mobile (<992px) =====
   DEVMC - 2026.09.29 - fix #carrito-rediseno# "Medido a 412px: la columna 'auto' del tacho la
   ensanchaba el subtotal ($8.636,00 = 66px, comparten columna en 'qty total'), el nombre no podia
   partirse y se montaba sobre el tacho. El tacho pasa a una columna propia de 24px y el subtotal
   comparte el area de la fila del stepper, alineado a la derecha (dos celdas en la misma area de
   grid es valido: una a cada punta). .table-responsive trae de Bootstrap un borde gris que dibujaba
   un recuadro alrededor de todas las tarjetas." */
@media (max-width: 991.98px) {
    .page-title h2 { font-size: 22px; }
    .table-responsive { border: 0; }
    .table.cart_summary tbody tr {
        grid-template-columns: 72px minmax(0, 1fr) 24px;
        grid-template-areas:
            "img desc  del"
            "img avail avail"
            "img qty   qty";
    }
    .table.cart_summary td.price[data-label="Total"] { grid-area: qty; }
    .table.cart_summary td.cart_description .product-name a {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ===== Desktop (>=992px): una fila por item, columnas en vez de apilado ===== */
@media (min-width: 992px) {
    .table.cart_summary tbody tr {
        grid-template-columns: 90px minmax(0, 1fr) auto auto auto auto 32px;
        grid-template-areas: "img desc avail price qty total del";
        column-gap: 18px;
        padding: 14px 16px;
    }
    .table.cart_summary td.cart_product img { width: 90px; height: 90px; }
    .table.cart_summary td.cart_description > small { margin-bottom: 0; }

    .table.cart_summary td.price:not([data-label]) {
        display: block; grid-area: price; text-align: right !important;
    }
    .table.cart_summary td.price:not([data-label]) span { font-weight: 700; color: #5a5550; }

    .table.cart_summary td.qty .quantity-container { justify-content: center; }
    .table.cart_summary td.price[data-label="Total"] span { font-size: 16px; }
    /* En desktop el tacho va al final de la fila, centrado como el resto de las columnas (referencia del dueno) */
    .table.cart_summary td.action { align-self: center; }
}

/* ===== Resumen + acciones debajo de la lista ===== */
.cart_navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.cart_navigation .continue-btn {
    color: var(--header-menu-top-color);
    border-color: var(--header-menu-top-color);
}
.cart_navigation .continue-btn:hover {
    background: var(--header-menu-top-color);
    color: #fff;
}

/* DEVMC - 2026.09.29 - fix #carrito-total-desactualizado# ".cart-summary-box" se movio AL PARTIAL
   (component/cart/shoppingCart.blade.php) para que se recalcule en cada +/-/borrar; el boton
   Pagar/WhatsApp se quedo en la vista shell (necesita $enableShopping, que el partial no recibe). Ya
   no comparten un mismo <div> flex, asi que ".cart-totals-row" (que envuelve la caja en el partial)
   la empuja a la derecha por su cuenta, y queda una fila propia justo arriba de ".cart_navigation" en
   vez de compartir la fila con el boton -- variante explicitamente aceptada en la decision del fix:
   visualmente el Total sigue pegado arriba/al lado del boton Pagar. */
.cart-totals-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }

.cart-summary-box {
    display: flex;
    align-items: center;
}
.cart-summary-box__totals { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.cart-summary-box__row { display: flex; gap: 10px; font-size: 13px; color: #7b756c; }
.cart-summary-box__row--total { font-size: 20px; font-weight: 800; color: #23262e; }
.cart-summary-box__amount { color: var(--accent-color, var(--header-menu-top-color)); }

/* El boton Pagar/WhatsApp quedo como hijo directo de ".cart_navigation" (ya no envuelto por
   ".cart-summary-box"): el margin-left:auto que antes tenia la caja entera ahora lo lleva el boton,
   para seguir pegado a la derecha, con "Continuar Comprando" a la izquierda -- mismo layout de antes. */
.cart_navigation .checkout-btn { margin-left: auto; }

/* ===== Mobile (<992px): el resumen vive en la barra fija global (mobileCartBar), no aca ===== */
@media (max-width: 991px) {
    .cart .page-order { padding-bottom: 92px; }

    .cart_navigation { flex-direction: column; align-items: stretch; }
    .cart_navigation .continue-btn { justify-content: center; text-align: center; }
    .cart_navigation .checkout-btn { margin-left: 0; }
    .cart-totals-row { display: none; }

    /* el WhatsApp flotante se oculta en el carrito: su CTA puede ser el mismo boton en la barra fija */
    .wa-floating-btn { display: none !important; }
}