/* Aumentar tamaño de miniatura en carrito BgfTech */
.woocommerce-cart table.cart img {
    width: 120px !important; /* Ajusta según tu preferencia */
    height: auto !important;
}

/* Espaciado para el precio dual */
.precio-bs-dual {
    display: block; /* Muestra los Bs en una línea nueva para no ensanchar la tabla */
    margin-top: 4px;
    font-size: 0.85em;
    color: #666;
}

/* Resaltar los subtotales y totales */
.cart-subtotal .amount, .order-total .amount {
    font-weight: bold;
}

/* Ocultar botones de PayPal y pagos rápidos en el carrito de BgfTech */
.woocommerce-cart .wc-proceed-to-checkout .wcppec-checkout-buttons,
.woocommerce-cart #ppc-button-product,
.woocommerce-cart .paypal-buttons,
.woocommerce-cart #ppc-button-cart {
    display: none !important;
}

/* DISEÑO DE DOS COLUMNAS PARA BGFTECH (Estilo Moderno) */

@media (min-width: 992px) {
    /* Contenedor principal del carrito */
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 30px; /* Espacio entre columnas */
    }

    /* Columna Izquierda: Tabla de productos */
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1; /* Toma el espacio mayor */
        margin-bottom: 0;
    }

    /* Columna Derecha: Totales del carrito */
    .woocommerce-cart .cart-collaterals {
        width: 400px; /* Ancho fijo para la columna de montos */
        position: sticky;
        top: 20px; /* Se queda pegado al hacer scroll */
    }

    /* Ajuste de la tabla de totales para que ocupe todo su ancho */
    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
        float: none !important;
        padding: 20px;
        background-color: #f9f9f9;
        border: 1px solid #eee;
        border-radius: 8px;
    }
}

/* Ajustes visuales para la tabla de totales en Bgf Inversiones C.A. */
.cart_totals h2 {
    font-size: 1.2rem;
    text-transform: uppercase;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* El botón de finalizar compra ahora debe ocupar todo el ancho */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    box-sizing: border-box;
}

/* DISEÑO DE DOS COLUMNAS OPTIMIZADO - Bgf Inversiones C.A. */

@media (min-width: 992px) {
    /* Contenedor principal */
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }

    /* Columna Izquierda (Productos) */
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1;
    }

    /* Columna Derecha (Totales) - Reducida a 320px */
    .woocommerce-cart .cart-collaterals {
        width: 320px !important;
        flex: 0 0 320px !important;
        position: sticky;
        top: 30px;
        float: none !important; /* Quita el float de Envo Storefront */
    }
}

/* ALINEACIÓN DE VALORES A LA DERECHA */
.woocommerce-cart .cart_totals {
    width: 100% !important;
    padding: 25px !important;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Alineamos los encabezados y datos de la tabla de totales */
.woocommerce-cart .cart_totals table.shop_table {
    border: none !important;
}

.woocommerce-cart .cart_totals table.shop_table tr th {
    width: 40%;
    text-align: left;
    font-size: 0.9em;
    color: #666;
    padding: 10px 0;
}

.woocommerce-cart .cart_totals table.shop_table tr td {
    text-align: right !important; /* VALORES A LA DERECHA */
    padding: 10px 0;
    font-size: 1.1em;
}

/* Estética para los precios duales dentro de la columna derecha */
.precio-bs-dual {
    display: block; /* El precio en Bs sale debajo del de $ */
    font-size: 0.85em;
    color: #ce1126; /* Color para resaltar el monto en Bs */
    font-weight: 600;
}

/* El botón debe ocupar todo el ancho del nuevo contenedor */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    margin-top: 15px;
    border-radius: 8px !important;
}

/* BOTÓN FINALIZAR COMPRA - Bgf Inversiones C.A. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    background-color: #0071a1 !important; /* Azul corporativo BgfTech */
    color: #ffffff !important;           /* Texto siempre blanco */
    padding: 18px 10px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 8px !important;       /* Esquinas redondeadas modernas */
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 113, 161, 0.3) !important;
    margin-top: 20px !important;
    width: 100% !important;              /* Ocupa todo el ancho de la columna de 320px */
}

/* Efecto al pasar el mouse (Hover) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #005a82 !important; /* Azul un poco más oscuro */
    box-shadow: 0 6px 18px rgba(0, 113, 161, 0.4) !important;
    transform: translateY(-2px) !important; /* Pequeño salto hacia arriba */
    color: #ffffff !important;
}

/* Efecto al hacer clic (Active) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 161, 0.4) !important;
}

/* Icono opcional (si quieres añadir una flecha después del texto) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
    content: " →";
    font-size: 1.2em;
    vertical-align: middle;
    transition: margin-left 0.2s;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after {
    margin-left: 8px;
}


/* BOTÓN FINALIZAR COMPRA - Bgf Inversiones C.A. */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block !important;
    background-color: #0071a1 !important; /* Azul corporativo BgfTech */
    color: #ffffff !important;           /* Texto siempre blanco */
    padding: 18px 10px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 8px !important;       /* Esquinas redondeadas modernas */
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 113, 161, 0.3) !important;
    margin-top: 20px !important;
    width: 100% !important;              /* Ocupa todo el ancho de la columna de 320px */
}

/* Efecto al pasar el mouse (Hover) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #005a82 !important; /* Azul un poco más oscuro */
    box-shadow: 0 6px 18px rgba(0, 113, 161, 0.4) !important;
    transform: translateY(-2px) !important; /* Pequeño salto hacia arriba */
    color: #ffffff !important;
}

/* Efecto al hacer clic (Active) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(0, 113, 161, 0.4) !important;
}

/* Icono opcional (si quieres añadir una flecha después del texto) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after {
    content: " →";
    font-size: 1.2em;
    vertical-align: middle;
    transition: margin-left 0.2s;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after {
    margin-left: 8px;
}

/* UNIFICACIÓN DE BOTONES SECUNDARIOS - Bgf Inversiones C.A. */

/* Selector para ambos botones */
.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
    display: inline-block !important;
    background-color: #0071a1 !important; /* El azul de BgfTech */
    color: #ffffff !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Efecto Hover para ambos */
.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
.woocommerce-cart button[name="update_cart"]:not(:disabled):hover {
    background-color: #005a82 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: translateY(-1px);
}

/* ESTADO DESACTIVADO (Especial para Actualizar Carrito) */
.woocommerce-cart button[name="update_cart"]:disabled {
    background-color: #a0a0a0 !important; /* Gris cuando no hay cambios */
    color: #ffffff !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Ajuste de contenedor para que no se amontonen */
.woocommerce-cart .actions {
    padding: 20px 10px !important;
    text-align: right;
}

.woocommerce-cart .coupon {
    float: left; /* Cupón a la izquierda */
}

/* AJUSTE DE ANCHO PARA PRECIOS DUALES - BgfTech */

@media (min-width: 992px) {
    /* Columna de Precio Unitario */
    .woocommerce-cart table.cart td.product-price, 
    .woocommerce-cart table.cart th.product-price {
        width: 100px !important; /* Aumentado a 200px para evitar el salto de línea */
        min-width: 100px !important;
        text-align: right !important;
        white-space: nowrap; /* Evita que el texto salte a la siguiente línea si es posible */
    }

    /* Columna de Subtotal (Monto total por producto) */
    .woocommerce-cart table.cart td.product-subtotal, 
    .woocommerce-cart table.cart th.product-subtotal {
        width: 100px !important; /* Un poco más ancho para el total acumulado */
        min-width: 100px !important;
        text-align: right !important;
    }

    /* Columna de Cantidad */
    .woocommerce-cart table.cart td.product-quantity, 
    .woocommerce-cart table.cart th.product-quantity {
        width: 120px !important;
        text-align: center !important;
    }

    /* Forzamos que los bolívares no rompan línea */
    .precio-bs-dual {
        display: block; 
        width: 100%;
        font-size: 0.9em;
        white-space: nowrap; /* Obliga a los Bs a quedarse en una sola línea */
    }
}

/* Ajuste para que el nombre del producto no se vea demasiado apretado */
.woocommerce-cart table.cart td.product-name {
    padding-right: 20px !important;
}



/* COMPACTAR PRECIOS DUALES - Bgf Inversiones C.A. */

/* Reducir el interlineado del contenedor del precio */
.woocommerce-cart table.cart td.product-price, 
.woocommerce-cart table.cart td.product-subtotal {
    line-height: 1.2 !important; /* Ajusta la altura de línea general */
    vertical-align: middle !important;
}

/* Ajustar el bloque de Bolívares */
.precio-bs-dual {
    display: block !important;
    margin-top: -2px !important;  /* Margen negativo para "pegarlo" al dólar */
    font-size: 0.85em !important; /* Un poco más pequeño para jerarquía */
    opacity: 0.9;                 /* Suaviza un poco el color */
    line-height: 1 !important;    /* Altura de línea mínima para el bloque Bs */
}

/* Asegurar que el símbolo de dólar no añada espacio extra */
.woocommerce-Price-amount.amount {
    display: inline-block;
    margin-bottom: 0 !important;
}

/* MENSAJES FLOTANTES (TOAST) - BgfTech */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: 90% !important;
    max-width: 500px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    border-top: 4px solid #0071a1 !important; /* El azul de BgfTech */
    background-color: #ffffff !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    animation: slideDownBgf 0.5s ease-out forwards;
}

/* Animación de entrada */
@keyframes slideDownBgf {
    from { top: -100px; opacity: 0; }
    to { top: 20px; opacity: 1; }
}

/* Ajuste para el botón "Ver carrito" que a veces sale en el mensaje */
.woocommerce-message .button {
    padding: 5px 15px !important;
    margin-left: 15px !important;
    border-radius: 4px !important;
    background-color: #0071a1 !important;
    color: white !important;
}