/* Casa Marcus - Mageplaza Recent Sales */

.mprecentsalesnotification-popup-bottom-left,
.mprecentsalesnotification-popup-bottom-right {
    bottom: var(--cm-sales-bottom, 10px) !important;
    transition: bottom .2s ease;
}

/* Evitar que el contenido se corte o se encime */
.mprecentsalesnotification-popup-content {
    width: auto !important;
    max-width: 260px;
    margin: 0 !important;
    padding: 10px 18px 10px 8px !important;
    box-sizing: border-box;
}

.mprecentsalesnotification-popup-content
.mprecentsalesnotification-time-content {
    position: static !important;
    display: block;
    margin-top: 5px;
}

.mprecentsalesnotification-popup-floating {
    max-width: min(340px, calc(100vw - 20px));
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .mprecentsalesnotification-popup-content {
        max-width: 215px;
        padding: 8px 14px 8px 6px !important;
    }
}

/* Diseño horizontal de la notificación */
.mprecentsalesnotification-popup-floating
.mprecentsalesnotification-container {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.mprecentsalesnotification-popup-floating
.mprecentsalesnotification-product-image {
    display: block !important;
    flex: 0 0 72px;
    width: 72px;
    padding: 0 !important;
}

.mprecentsalesnotification-popup-floating
.mprecentsalesnotification-product-image img {
    width: 72px !important;
    height: 80px !important;
    max-width: 72px !important;
    max-height: 80px !important;
    object-fit: contain !important;
}

.mprecentsalesnotification-popup-floating
.mprecentsalesnotification-popup-content {
    display: block !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none;
    padding: 0 !important;
    overflow-wrap: anywhere;
}

.mprecentsalesnotification-popup-content
.mprecentsalesnotification-time-content {
    position: static !important;
}

@media (max-width: 480px) {
    .mprecentsalesnotification-popup-floating {
        max-width: calc(100vw - 20px);
    }

    .mprecentsalesnotification-popup-floating
    .mprecentsalesnotification-product-image {
        flex-basis: 60px;
        width: 60px;
    }

    .mprecentsalesnotification-popup-floating
    .mprecentsalesnotification-product-image img {
        width: 60px !important;
        height: 70px !important;
    }
}