/* =========================================================
   MATA - Toast profesional de WooCommerce
========================================================= */

.mata-wc-toast-container {
        position: fixed !important;
        z-index: 2147483000 !important;
        right: 24px !important;
        bottom: 24px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 12px !important;

        width: min(430px, calc(100vw - 32px)) !important;
        margin: 0 !important;
        padding: 0 !important;

        pointer-events: none !important;
}

.mata-wc-toast {
        position: relative !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 32px !important;
        align-items: start !important;
        column-gap: 14px !important;

        overflow: hidden !important;
        width: 100% !important;
        min-height: 96px !important;
        margin: 0 !important;
        padding: 18px 18px 19px !important;

        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        border-radius: 16px !important;

        background:
                linear-gradient(
                        135deg,
                        var(--mm-color-principal) 0%,
                        var(--mm-color-principal-oscuro) 100%
                ) !important;

        color: #ffffff !important;

        box-shadow:
                0 22px 52px rgba(15, 23, 42, 0.26),
                0 7px 18px rgba(15, 23, 42, 0.15) !important;

        font-family: inherit !important;
        text-align: left !important;

        pointer-events: auto !important;

        opacity: 0 !important;
        transform: translate3d(24px, 10px, 0) scale(0.98) !important;

        transition:
                opacity 240ms ease,
                transform 240ms ease !important;
}

.mata-wc-toast.is-visible {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
}

.mata-wc-toast.is-hiding {
        opacity: 0 !important;
        transform: translate3d(20px, 8px, 0) scale(0.98) !important;
}

/* =========================================================
   Icono
========================================================= */

.mata-wc-toast-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 38px !important;
        height: 38px !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;

        border: 1px solid rgba(255, 255, 255, 0.38) !important;
        border-radius: 50% !important;

        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;

        font-size: 18px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
}

/* =========================================================
   Contenido
========================================================= */

.mata-wc-toast-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        text-align: left !important;
}

.mata-wc-toast-content,
.mata-wc-toast-content p,
.mata-wc-toast-content span,
.mata-wc-toast-content strong,
.mata-wc-toast-content b {
        color: #ffffff !important;
}

/* Evita márgenes internos inesperados */
.mata-wc-toast-content p {
        margin: 0 !important;
        padding: 0 !important;
}

/* =========================================================
   Enlace "Ver carrito" siempre debajo
========================================================= */

.mata-wc-toast-content .button,
.mata-wc-toast-content .wc-forward {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;

        align-self: flex-start !important;
        float: none !important;
        clear: both !important;

        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 10px 0 0 !important;
        padding: 0 0 2px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.72) !important;
        border-radius: 0 !important;

        background: transparent !important;
        color: #ffffff !important;

        box-shadow: none !important;

        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.01em !important;

        text-decoration: none !important;
        text-transform: none !important;

        opacity: 0.96 !important;

        transition:
                opacity 150ms ease,
                border-color 150ms ease,
                transform 150ms ease !important;
}

.mata-wc-toast-content .button::before,
.mata-wc-toast-content .wc-forward::before {
        display: none !important;
        content: none !important;
}

.mata-wc-toast-content .button::after,
.mata-wc-toast-content .wc-forward::after {
        display: inline-block !important;
        content: "→" !important;

        margin: 0 !important;
        padding: 0 !important;

        color: currentColor !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        transition: transform 150ms ease !important;
}

.mata-wc-toast-content .button:hover,
.mata-wc-toast-content .button:focus,
.mata-wc-toast-content .wc-forward:hover,
.mata-wc-toast-content .wc-forward:focus {
        border-bottom-color: #ffffff !important;
        background: transparent !important;
        color: #ffffff !important;

        box-shadow: none !important;
        text-decoration: none !important;

        opacity: 1 !important;
        transform: translateY(-1px) !important;
        outline: none !important;
}

.mata-wc-toast-content .button:hover::after,
.mata-wc-toast-content .button:focus::after,
.mata-wc-toast-content .wc-forward:hover::after,
.mata-wc-toast-content .wc-forward:focus::after {
        transform: translateX(3px) !important;
}

/* =========================================================
   Botón cerrar
========================================================= */

.mata-wc-toast-close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: transparent !important;
        color: rgba(255, 255, 255, 0.82) !important;

        box-shadow: none !important;

        font-family: Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;
        line-height: 1 !important;

        cursor: pointer !important;
        appearance: none !important;

        transition:
                background-color 150ms ease,
                color 150ms ease !important;
}

.mata-wc-toast-close:hover,
.mata-wc-toast-close:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        outline: none !important;
}

/* =========================================================
   Barra de duración
========================================================= */

.mata-wc-toast-progress {
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        display: block !important;
        width: 100% !important;
        height: 4px !important;

        background: rgba(255, 255, 255, 0.7) !important;

        transform: scaleX(1) !important;
        transform-origin: left center !important;
}

.mata-wc-toast.is-visible .mata-wc-toast-progress {
        animation: mata-wc-toast-countdown 5s linear forwards !important;
}

@keyframes mata-wc-toast-countdown {
        from {
                transform: scaleX(1);
        }

        to {
                transform: scaleX(0);
        }
}

/* Evita que el aviso original deje hueco */
.woocommerce-notices-wrapper:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
}

/* =========================================================
   Móvil
========================================================= */

@media (max-width: 600px) {
        .mata-wc-toast-container {
                right: 14px !important;
                bottom: 14px !important;
                left: 14px !important;
                width: auto !important;
        }

        .mata-wc-toast {
                grid-template-columns: 34px minmax(0, 1fr) 30px !important;
                column-gap: 11px !important;

                min-height: 90px !important;
                padding: 16px 14px 18px !important;

                border-radius: 14px !important;
        }

        .mata-wc-toast-icon {
                width: 34px !important;
                height: 34px !important;
                font-size: 16px !important;
        }

        .mata-wc-toast-content {
                font-size: 14px !important;
                line-height: 1.45 !important;
        }

        .mata-wc-toast-content .button,
        .mata-wc-toast-content .wc-forward {
                margin-top: 9px !important;
                font-size: 12.5px !important;
        }

        .mata-wc-toast-close {
                width: 30px !important;
                height: 30px !important;
                font-size: 23px !important;
        }
}