/* Estilos específicos para Elementor PRO */
.elementor-shipping {
    border-top: 2px solid #e0e0e0 !important;
    background-color: #fafafa !important;
    font-weight: 600 !important;
    font-size: 1.1em !important;
}

.elementor-shipping th {
    padding: 15px 0 !important;
    text-align: left !important;
    color: #333 !important;
    font-size: 1.1em !important;
}

.elementor-shipping td {
    padding: 15px 0 !important;
    text-align: right !important;
    color: #007cba !important;
    font-size: 1.1em !important;
}

/* Compatibilidad con los controles de estilo de Elementor */
.elementor-widget-woocommerce-cart .elementor-shipping,
.elementor-widget-woocommerce-checkout .elementor-shipping {
    animation: fadeIn 0.3s ease-in-out;
}

/* Estilos para el editor de Elementor */
.elementor-editor-active .elementor-shipping {
    background-color: #f0f0f1 !important;
    border: 1px dashed #007cba !important;
}

.elementor-editor-active .elementor-shipping::before {
    content: "Custom Shipping";
    display: block;
    background: #007cba;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
}

/* Responsive para Elementor */
@media (max-width: 768px) {
    .elementor-shipping {
        padding: 10px 0 !important;
        margin: 10px 0 !important;
    }
    
    .elementor-shipping th,
    .elementor-shipping td {
        padding: 12px 0 !important;
        font-size: 1em !important;
    }
}

/* Temas oscuros para Elementor */
@media (prefers-color-scheme: dark) {
    .elementor-shipping {
        background-color: #2c3338 !important;
        border-color: #3c434a !important;
        color: #f0f0f1 !important;
    }
    
    .elementor-shipping th {
        color: #f0f0f1 !important;
    }
    
    .elementor-shipping td {
        color: #00a0d2 !important;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estados de hover para mejor UX */
.elementor-shipping:hover {
    background-color: #f0f7ff !important;
    transition: background-color 0.3s ease;
}

/* Estilos para widgets específicos de Elementor */
.elementor-widget-woocommerce-cart .shipping-after-total,
.elementor-widget-woocommerce-checkout .shipping-after-total {
    order: 100; /* Asegurar que esté al final */
}

/* Asegurar compatibilidad con flexbox/grid de Elementor */
.elementor-menu-cart__totals .shipping-after-total {
    display: table-row !important;
}