#stellar-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Allow clicking through the container area */
}

.stellar-toast {
    min-width: 300px;
    max-width: 400px;
    padding: 16px 20px;
    background: #323232;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    /* Re-enable pointer events for toasts */
    transform-origin: right bottom;
    animation: stellarToastSlideIn 0.3s ease-out forwards;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.stellar-toast.success {
    background: #4caf50;
    color: white;
}

.stellar-toast.error {
    background: #f44336;
    color: white;
}

.stellar-toast.info {
    background: #2196f3;
    color: white;
}

.stellar-toast__icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stellar-toast__content {
    flex: 1;
}

.stellar-toast__close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.7;
    font-size: 18px;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.stellar-toast__close:hover {
    opacity: 1;
}

@keyframes stellarToastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes stellarToastSlideOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 
   We will hide standard WooCommerce messages via JS after extracting content.
   See toasts.js processNotice()
*/

.stellar-toast-hidden-original {
    display: none !important;
}

/* 
   Hide WooCommerce Blocks notices visually but keep them in DOM for JS to read.
   We target the banner specifically.
*/
.wc-block-components-notice-banner.stellar-toast-processed {
    display: none !important;
}

/* 
   Optionally, if we want to prevent flashing, we could hide them initially 
   and show them only if NOT processed (hard to do with CSS only without hiding everything).
   Instead, we rely on JS to add the class quickly.
*/

/* Mobile Styles */
@media (max-width: 767px) {
    #stellar-toast-container {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        bottom: 20px;
        align-items: center;
    }

    .stellar-toast {
        font-size: 13px;
        padding: 12px 16px;
        width: 100%;
        justify-content: center;
        /* Override desktop animation */
        animation: stellarToastSlideUpMobile 0.3s ease-out forwards;
    }
}

@keyframes stellarToastSlideUpMobile {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}