/**
 * LoliSales Manager v1.0.7-fix3 — frontend
 *
 * Política: TODOS los elementos de acción a 40px exactos.
 *  - Botón "Consultar Stock" (nuestro)
 *  - Botón "Añadir al carrito" del tema (forzado contra .btn-lg)
 *  - Cuadro gris "Producto solo bajo consulta"
 *
 * Layout: .product-add-to-cart se vuelve flex para que la row de cantidad+
 * carrito y nuestro wrapper de stock queden en línea (caso AGNELLI).
 *
 * [fix3] Igualación de ancho (min-width 180px) y bordes idénticos
 * (border-radius 4px, border-width 1px, border-style solid) entre los
 * dos botones de la ficha para que sean geométricamente el mismo botón,
 * diferenciándose sólo por el color.
 */

/* ─── Botón "Consultar Stock" — dorado, 40px ────────────────────────── */
.lolisales-stock-btn,
button.lolisales-stock-btn,
button.btn.lolisales-stock-btn,
.btn.lolisales-stock-btn,
.product-add-to-cart .lolisales-stock-btn,
.product-actions .lolisales-stock-btn,
.lolisales-stock-button-wrapper .lolisales-stock-btn {
    background-color: #E1BB80 !important;
    border: 1px solid #E1BB80 !important;
    color: #1a1a1a !important;
    font-weight: normal !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    transition: background-color 0.15s, color 0.15s;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
    box-sizing: border-box !important;
    vertical-align: middle;
    margin: 0 !important;
}

.lolisales-stock-btn:hover,
button.lolisales-stock-btn:hover {
    background-color: #c9a468 !important;
    border-color: #c9a468 !important;
    color: #fff !important;
}

.lolisales-stock-btn:active,
.lolisales-stock-btn:focus {
    background-color: #c9a468 !important;
    border-color: #c9a468 !important;
    outline: none !important;
    box-shadow: none !important;
}

.lolisales-stock-btn .fa,
.lolisales-stock-btn i {
    margin-right: 4px;
}

/* ─── Cuadro gris "Producto solo bajo consulta" — 40px ──────────────── */
.lolisales-only-consult-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 14px !important;
    background: #f0f0f0 !important;
    border: 1px solid #ddd !important;
    color: #666 !important;
    border-radius: 4px !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    white-space: nowrap;
    width: auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    vertical-align: middle;
}

.lolisales-only-consult-box .fa,
.lolisales-only-consult-box i {
    color: #999;
}

/* ─── Layout caso ADRIER (Stock☑+Carrito☑) — action-row del TPL ────── */
.lolisales-action-row,
.product-add-to-cart .lolisales-action-row,
.product-actions .lolisales-action-row {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center !important;
    width: auto !important;
    max-width: 100%;
    margin: 15px 0 10px 0;
}

/* ─── Layout caso AGNELLI (Stock☑+Carrito☐) ─────────────────────────
 * Hacer flex el .product-add-to-cart para que la row Bootstrap de
 * cantidad+carrito y nuestro wrapper queden en línea.
 */
.product-add-to-cart.js-product-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

/* La row Bootstrap del tema: ajuste al contenido, no 100% */
.product-add-to-cart > .row.product-quantity {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px;
}

/* Cols internas (cantidad / botón): no expandir */
.product-add-to-cart > .row.product-quantity > .col-add-qty,
.product-add-to-cart > .row.product-quantity > .col-add-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Botón "Añadir al carrito" del tema — forzar 40px contra .btn-lg
 * Especificidad blindada: 5 clases > 1 clase de .btn-lg */
.product-add-to-cart .col-add-btn .add .btn.btn-primary.btn-lg.add-to-cart,
.product-add-to-cart .col-add-btn .add button.btn.btn-primary.btn-lg.add-to-cart,
.product-add-to-cart button[data-button-action="add-to-cart"],
form#add-to-cart-or-refresh button.add-to-cart,
form#add-to-cart-or-refresh button.btn-lg.add-to-cart,
.product-actions .product-add-to-cart .add-to-cart {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    vertical-align: middle;
    margin: 0 !important;
}

/* Wrapper LoliSales: en línea, no 100% */
.product-add-to-cart > .lolisales-stock-button-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* [fix4] ─── Clonar geometría de ambos botones en la ficha ──────────
 * Mismo borde, mismo padding, misma altura, misma tipografía. Cada
 * botón mantiene su ancho natural (auto) según el texto. La única
 * diferencia es el COLOR (fondo + borde + texto), que se aplica en
 * los selectores específicos de cada botón.
 */
.product-add-to-cart .col-add-btn .add .btn.btn-primary.btn-lg.add-to-cart,
.product-add-to-cart .col-add-btn .add button.btn.btn-primary.btn-lg.add-to-cart,
form#add-to-cart-or-refresh button.add-to-cart,
.product-add-to-cart > .lolisales-stock-button-wrapper .lolisales-stock-btn,
.lolisales-stock-btn {
    /* Forma idéntica */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 4px !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-sizing: border-box !important;

    /* Tipografía idéntica */
    font-size: 0.95rem !important;
    font-weight: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    /* Layout idéntico (icono + texto centrados) */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin: 0 !important;

    /* Ancho natural */
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

/* [fix3] ─── Igualar ANCHO de ambos botones en la ficha ──────────────
 * Bloqueo en dos niveles: contenedor (col-add-btn / wrapper) a 200px Y
 * botón a 100% del contenedor. Así el ancho geométrico es idéntico,
 * sin importar el padding/border heredado del tema.
 */

/* Contenedores fijos a 200px */
.product-add-to-cart > .row.product-quantity > .col-add-btn,
.product-add-to-cart > .row.product-quantity > .col-add-btn > .add,
.product-add-to-cart > .lolisales-stock-button-wrapper {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Botones rellenan el 100% de su contenedor */
.product-add-to-cart .col-add-btn .add .btn.btn-primary.btn-lg.add-to-cart,
.product-add-to-cart .col-add-btn .add button.add-to-cart,
form#add-to-cart-or-refresh button.add-to-cart,
.product-add-to-cart > .lolisales-stock-button-wrapper .lolisales-stock-btn {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
}

/* Selector de cantidad — encajar a 40px */
.product-add-to-cart .col-add-qty .qty {
    height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.product-add-to-cart .col-add-qty .qty input {
    height: 40px !important;
    width: 60px !important;
    text-align: center;
    padding: 0 6px !important;
    box-sizing: border-box !important;
}

/* Modal: oculto por defecto pero hijo del flex — que no rompa layout */
.product-add-to-cart > .modal.fade {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* ─── Responsive: móvil <600px todo apilado ────────────────────────── */
@media (max-width: 600px) {
    .product-add-to-cart.js-product-add-to-cart {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .product-add-to-cart > .row.product-quantity {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .product-add-to-cart > .row.product-quantity > .col-add-qty,
    .product-add-to-cart > .row.product-quantity > .col-add-btn,
    .product-add-to-cart > .row.product-quantity > .col-add-btn > .add,
    .product-add-to-cart > .lolisales-stock-button-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ─── LISTADO: alineación izquierda del elemento de reemplazo ──────────
 * En la tarjeta del listado, el botón "Consultar stock" y el cuadro gris
 * "Producto solo bajo consulta" son width:auto y, sin contenedor propio,
 * heredan la justificación del footer del tema (Warehouse) y flotan a la
 * derecha. El JS los envuelve en .lolisales-listing-action para forzar que
 * queden pegados al margen izquierdo. Scopeado a .product-miniature para NO
 * tocar la ficha de producto.
 */
.product-miniature .lolisales-listing-action {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.product-miniature .lolisales-listing-action .lolisales-stock-btn,
.product-miniature .lolisales-listing-action .lolisales-only-consult-box {
    margin: 0 !important;
    flex: 0 0 auto !important;
}