/**
 * Corrección para el botón "Comprar ahora"
 * Este archivo modifica el estilo del botón para usar los colores personalizados
 * definidos en admin/customize-store.php
 */

/* Estilo para el botón "Comprar ahora" */
.button.buy-now,
a.button.buy-now,
button.buy-now,
.buy-now,
a.buy-now,
button.comprar-ahora,
a.comprar-ahora,
.comprar-ahora,
[class*="comprar-ahora"],
[class*="buy-now"] {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
    border-color: var(--button-background, #3BB77E) !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
}

/* Estilo para el hover del botón */
.button.buy-now:hover,
a.button.buy-now:hover,
button.buy-now:hover,
.buy-now:hover,
a.buy-now:hover,
button.comprar-ahora:hover,
a.comprar-ahora:hover,
.comprar-ahora:hover,
[class*="comprar-ahora"]:hover,
[class*="buy-now"]:hover {
    background-color: var(--hover-color, #30A56E) !important;
    border-color: var(--hover-color, #30A56E) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Estilo específico para el botón "Comprar ahora" en la página de detalles del producto */
.product-detail .comprar-ahora,
.product-detail .buy-now,
.product-detail [class*="comprar-ahora"],
.product-detail [class*="buy-now"] {
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
}

/* Estilo para el botón "Comprar ahora" en la página de resultados de búsqueda */
.product-cart-wrap .comprar-ahora,
.product-cart-wrap .buy-now,
.product-cart-wrap [class*="comprar-ahora"],
.product-cart-wrap [class*="buy-now"] {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    z-index: 5 !important;
}

/* Estilo específico para el botón que aparece en la imagen */
.action-btn.hover-up.comprar-ahora,
.action-btn.hover-up.buy-now,
.action-btn.hover-up[class*="comprar-ahora"],
.action-btn.hover-up[class*="buy-now"] {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
}

/* Estilos específicos para el botón con texto "Comprar ahora" */
a:contains("Comprar ahora"),
button:contains("Comprar ahora"),
a:contains("¡Comprar ahora!"),
button:contains("¡Comprar ahora!") {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
    border-color: var(--button-background, #3BB77E) !important;
}

/* Corrección específica para el botón que aparece en la imagen con borde naranja */
.product-cart-wrap .action-btn.hover-up,
.product-img-action-wrap .action-btn.hover-up,
.product-cart-wrap .action-btn,
.product-img-action-wrap .action-btn {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Hover para el botón específico */
.product-cart-wrap .action-btn.hover-up:hover,
.product-img-action-wrap .action-btn.hover-up:hover,
.product-cart-wrap .action-btn:hover,
.product-img-action-wrap .action-btn:hover {
    background-color: var(--hover-color, #30A56E) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Corrección para el botón "Comprar ahora" que aparece en la imagen */
.product-img-action-wrap .action-btn,
.product-cart-wrap .product-img-action-wrap .action-btn {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
}

/* Estilo para el botón que aparece en la imagen con el texto "Comprar ahora" */
a.action-btn[aria-label="Comprar ahora"],
button.action-btn[aria-label="Comprar ahora"] {
    background-color: var(--button-background, #3BB77E) !important;
    color: var(--button-text-color, #ffffff) !important;
}