/**
 * Vini Toast Notifications
 * Sistema de notificaciones toast para WooCommerce
 * Reemplaza las notificaciones por defecto de agregar al carrito
 */

/* ========================================
 * TOAST CONTAINER
 * ======================================== */

.vini-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Mobile positioning */
@media only screen and (max-width: 768px) {
    .vini-toast-container {
        top: 70px;
        right: 16px;
        left: 16px;
    }
}

/* ========================================
 * TOAST BASE STYLES
 * ======================================== */

.vini-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow:
        0px 12px 16px -4px rgba(16, 24, 40, 0.08),
        0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border: 1px solid #E4E7EC;
    min-width: 320px;
    max-width: 400px;
    pointer-events: all;
    transform: translateX(420px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vini-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.vini-toast.hide {
    transform: translateX(420px);
    opacity: 0;
}

/* Mobile responsive */
@media only screen and (max-width: 768px) {
    .vini-toast {
        min-width: auto;
        max-width: 100%;
    }
}

/* ========================================
 * TOAST ICON
 * ======================================== */

.vini-toast-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vini-toast-icon svg {
    width: 20px;
    height: 20px;
}

/* Success */
.vini-toast.success .vini-toast-icon {
    background: #D1FADF;
}

.vini-toast.success .vini-toast-icon svg {
    color: #039855;
}

/* Error */
.vini-toast.error .vini-toast-icon {
    background: #FEE4E2;
}

.vini-toast.error .vini-toast-icon svg {
    color: #D92D20;
}

/* Info */
.vini-toast.info .vini-toast-icon {
    background: #E0F2FE;
}

.vini-toast.info .vini-toast-icon svg {
    color: #0284C7;
}

/* Warning */
.vini-toast.warning .vini-toast-icon {
    background: #FEF0C7;
}

.vini-toast.warning .vini-toast-icon svg {
    color: #DC6803;
}

/* ========================================
 * TOAST CONTENT
 * ======================================== */

.vini-toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vini-toast-title {
    color: #181D27;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}

.vini-toast-message {
    color: #535862;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
    word-wrap: break-word;
}

/* ========================================
 * TOAST CLOSE BUTTON
 * ======================================== */

.vini-toast-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none !important;
    background: transparent !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #717680 !important;
    transition: color 0.2s ease;
}

.vini-toast-close:hover {
    color: #414651 !important;
    background: transparent !important;
}

.vini-toast-close svg {
    width: 20px;
    height: 20px;
}

/* ========================================
 * PROGRESS BAR
 * ======================================== */

.vini-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0 0 12px 12px;
    transform-origin: left;
    animation: toast-progress 4s linear forwards;
}

.vini-toast.success .vini-toast-progress {
    background: #12B76A;
}

.vini-toast.error .vini-toast-progress {
    background: #F04438;
}

.vini-toast.info .vini-toast-progress {
    background: #0BA5EC;
}

.vini-toast.warning .vini-toast-progress {
    background: #F79009;
}

@keyframes toast-progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* ========================================
 * BUTTON LOADING STATE
 * ======================================== */

/* Loader spinner */
.vini-btn-loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: vini-spin 0.2s linear infinite;
}

@keyframes vini-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Button loading state */
.vini-loading .button-text {
    opacity: 0;
    position: absolute;
}

.vini-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

/* Hide WooCommerce notices only after JS handles them */
/* Don't use !important so we can override with JS */
.vini-notices-handled .woocommerce-message,
.vini-notices-handled .woocommerce-info,
.vini-notices-handled .woocommerce-error {
    display: none;
}

/* Hide notices that were specifically handled by our script */
.woocommerce-message.vini-handled,
.woocommerce-info.vini-handled,
.woocommerce-error.vini-handled,
ul.woocommerce-message.vini-handled,
ul.woocommerce-info.vini-handled,
ul.woocommerce-error.vini-handled {
    display: none !important;
}

/* ========================================
 * CART BUTTON STATES
 * ======================================== */

/* Add to cart button wrapper to handle loader position */
.add_to_cart_button,
.single_add_to_cart_button,
.ajax_add_to_cart,
button.product_type_simple {
    position: relative !important;
}

/* Ensure buttons can hold absolutely positioned loader */
.add_to_cart_button,
.single_add_to_cart_button,
.ajax_add_to_cart,
button.product_type_simple {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 311/52!important;
    min-width: 100%;
}

/* Loader inside button */
.add_to_cart_button .vini-btn-loader,
.single_add_to_cart_button .vini-btn-loader,
.ajax_add_to_cart .vini-btn-loader,
button.product_type_simple .vini-btn-loader {
    /* position: absolute; */
    left: 50%;
    top: 50%;
    /* transform: translate(-50%, -50%); */
    z-index: 10;
}

/* Loading state - hide text but keep button size */
.add_to_cart_button.vini-loading,
.single_add_to_cart_button.vini-loading,
.ajax_add_to_cart.vini-loading,
button.product_type_simple.vini-loading {
    color: transparent !important;
    pointer-events: none;
}

/* Hide all text content when loading */
.vini-loading .button-text,
.vini-loading::before,
.vini-loading::after {
    opacity: 0 !important;
}

/* Mobile adjustments */
@media only screen and (max-width: 768px) {
    .vini-btn-loader {
        width: 14px;
        height: 14px;
        border-width: 2px;
    }
}