/* =============================================================
   UNIFIED BUTTON SYSTEM
   Load order: after bundle-critical.min.css and style.php
   so CSS variables (--brand-primary, --btn-radius, etc.) are available.
   ============================================================= */

/* === BASE: reset compartido para todos los botones de acción === */
.button-model-1,
.button-model-2,
.button-model-3,
.btn-checkout,
.btn-checkout-black,
.btnContainerAddToCart,
.btn_modal,
.btnSelectPagoType,
.add_cart_btn,
.add_favorite_btn,
.price-filter-btn,
.btn-primary-action,
.btn-outline-action,
.btn-ghost-action {
    font-family: var(--font-primary);
    font-size: var(--btn-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--btn-radius) !important;
    cursor: pointer;
    transition: var(--btn-transition);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
}

/* === VARIANT PRIMARY (CTAs principales) ===
   .btn-checkout-black  → "Ir a pagar" en carrito lateral
   .btn-checkout        → "Ir a pagar" vista carrito antigua
   .btn-primary-action  → clase semántica nueva (AddBtn(), etc.)
   Los .button-model-1/2 + .bg_company_color_1 heredan el color
   de style.php y la forma de aquí.
*/
.btn-checkout-black,
.btn-checkout,
.btn-primary-action {
    background-color: var(--brand-primary);
    color: var(--white);
    border: 2px solid var(--brand-primary);
    height: var(--btn-height-lg);
    padding: 0 24px;
}

.btn-checkout-black:hover,
.btn-checkout:hover,
.btn-primary-action:hover {
    filter: brightness(0.88);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
    color: var(--white);
    text-decoration: none;
}

.btn-checkout-black:active,
.btn-checkout:active,
.btn-primary-action:active {
    transform: translateY(0);
    box-shadow: none;
}

/* === VARIANT OUTLINE (acciones secundarias) ===
   .add_favorite_btn   → botón wishlist en detalle de producto
   .btnSelectPagoType  → selectores de método de pago
   .btn-outline-action → clase semántica nueva
   Los .button-model-1/2 + .bg_company_color_1_border heredan el
   color de style.php y la forma de aquí.
*/
.add_favorite_btn,
.btnSelectPagoType,
.btn-outline-action {
    background: transparent;
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    height: var(--btn-height-lg);
    padding: 0 24px;
}

.add_favorite_btn:hover,
.btnSelectPagoType:hover,
.btn-outline-action:hover {
    background-color: var(--brand-primary);
    color: var(--white);
    text-decoration: none;
}

/* Variante outline destructiva para acciones de eliminación. */
.btn-outline-danger-action {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-outline-danger-action:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: var(--white);
}

/* === VARIANT GHOST/NEUTRAL (botones utilitarios) ===
   .price-filter-btn → filtros de precio en listado de productos
   .btn_modal        → botones de modales (Aceptar, Cerrar)
   .button-model-3   → botones de utilidad generales
   .btn-ghost-action → clase semántica nueva
*/
.price-filter-btn,
.btn_modal,
.button-model-3,
.btn-ghost-action {
    background: var(--white);
    color: var(--brand-accent);
    border: 1.5px solid var(--gray-200);
    height: var(--btn-height-md);
    padding: 0 20px;
}

.price-filter-btn:hover,
.btn_modal:hover,
.button-model-3:hover,
.btn-ghost-action:hover {
    background: var(--gray-50);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    text-decoration: none;
}

.price-filter-btn.active {
    background: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
}

/* === ESTANDARIZAR CLASES LEGACY ===
   button-model-1/2/3 tenían border-radius: 0 !important en bundle-critical.
   El !important en border-radius arriba los sobreescribe.
*/
.button-model-1 {
    height: var(--btn-height-md);
    padding: 0 20px;
}

.button-model-2 {
    height: var(--btn-height-lg) !important;
    padding: 0 24px;
}

/* Add to cart en carrusel y tarjetas de producto.
   El width/margin posicional (70%, margin-left: 15%) se mantiene
   en bundle-critical.css y StyleProduct.php. */
.btnContainerAddToCart {
    height: var(--btn-height-md);
    background-color: var(--brand-primary);
    color: var(--white);
    border: 2px solid var(--brand-primary);
}

.btnContainerAddToCart:hover {
    filter: brightness(0.88);
    color: var(--white);
}

/* === SELECTED/IN-CART STATE (ControlBtn) ===
   Contenedor con +/- cantidad cuando el producto ya está en el carrito.
   Se usa en producto page (inPasillo=true) y en carrusel (inPasillo=false).
*/
.itemSelectedCartBtn {
    border: 2px solid var(--brand-primary) !important;
    border-radius: var(--btn-radius) !important;
    height: var(--btn-height-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--white);
}

/* Botones +/- dentro del ControlBtn */
.btn_add_minus,
.btn_add_plus {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand-primary);
    background: transparent;
    border: none;
    border-radius: var(--btn-radius);
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--btn-transition);
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}

.btn_add_minus:hover,
.btn_add_plus:hover {
    background: var(--brand-primary-12);
}

.btn_add_minus:disabled,
.btn_add_plus:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Qty +/- en carrito lateral — mantiene su forma cuadrada compacta */
.cart-qty-btn {
    border-radius: 4px !important;
    color: var(--brand-accent);
}

.cart-qty-btn:hover {
    background-color: var(--gray-100);
    color: var(--brand-primary);
}

/* Botón eliminar item en carrito lateral */
.remove-item-btn:hover {
    color: var(--danger-color);
    background: rgba(229, 57, 53, 0.08);
}

/* Login button en dropdown (reemplaza inline #0084ff en icon-layout.php) */
.btn-inline-login {
    width: 100%;
    height: var(--btn-height-md);
    background: var(--brand-primary);
    color: var(--white);
    border: none;
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-size: var(--btn-font-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--btn-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-inline-login:hover {
    filter: brightness(0.88);
    color: var(--white);
}

/* === DISABLED STATE === */
.btn:disabled,
[class*="button-model-"]:disabled,
.btn-checkout-black:disabled,
.btnContainerAddToCart.disabled,
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}