/* ==========================================================================
   WC NOTICES AS FLOATING TOASTS
   ========================================================================== */

.woocommerce-notices-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none; /* Let clicks pass through empty wrapper space */
    max-width: 400px;
    width: calc(100% - 40px);
}

/* Base style for all notices — specificity beats WC via parent wrapper */
.woocommerce-notices-wrapper .woocommerce-message, 
.woocommerce-notices-wrapper .woocommerce-error, 
.woocommerce-notices-wrapper .woocommerce-info {
    position: relative;
    pointer-events: auto; /* Re-enable clicks on the notice itself */
    background: var(--hybinet-color-bg-primary, #ffffff);
    color: var(--hybinet-color-text-primary, #333333);
    padding: 16px 40px 16px 20px;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05);
    border-top: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
    border-right: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
    border-bottom: 1px solid var(--hybinet-color-border-soft, #D8D8D2);
    border-left: 4px solid var(--hybinet-color-status-success, #0E7C66);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    animation: hybinetSlideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Remove browser focus outline (WC focuses notices automatically) */
.woocommerce-notices-wrapper .woocommerce-message:focus, 
.woocommerce-notices-wrapper .woocommerce-error:focus, 
.woocommerce-notices-wrapper .woocommerce-info:focus {
    outline: none;
}

/* Reset WC's ::before icon (not needed, we inject our own via JS) */
.woocommerce-notices-wrapper .woocommerce-message::before, 
.woocommerce-notices-wrapper .woocommerce-error::before, 
.woocommerce-notices-wrapper .woocommerce-info::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    position: static; /* override WC's absolute positioning */
    top: auto;
    left: auto;
}

/* Success: green circle + checkmark */
.woocommerce-notices-wrapper .woocommerce-message::before {
    background-color: var(--hybinet-color-status-success, #0E7C66);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Error: red circle + X */
.woocommerce-notices-wrapper .woocommerce-error::before {
    background-color: var(--hybinet-color-status-danger, #D64545);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Info: accent circle + i */
.woocommerce-notices-wrapper .woocommerce-info::before {
    background-color: var(--hybinet-color-brand-accent, #8DC219);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Specific borders + solid tinted background per type */
.woocommerce-notices-wrapper .woocommerce-message {
    border-left-color: var(--hybinet-color-status-success, #0E7C66);
    background-color: color-mix(in srgb, var(--hybinet-color-status-success, #0E7C66) 15%, var(--hybinet-color-bg-primary, white));
}

.woocommerce-notices-wrapper .woocommerce-error {
    border-left-color: var(--hybinet-color-status-danger, #D64545);
    background-color: color-mix(in srgb, var(--hybinet-color-status-danger, #D64545) 15%, var(--hybinet-color-bg-primary, white));
    list-style: none;
    padding-left: 20px; /* el <ul> hereda, igualamos con el resto */
}


.woocommerce-notices-wrapper .woocommerce-info {
    border-left-color: var(--hybinet-color-brand-accent, #8DC219);
    background-color: color-mix(in srgb, var(--hybinet-color-brand-accent, #8DC219) 15%, var(--hybinet-color-bg-primary, white));
}

/* Links and buttons inside notices */
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-error a.button,
.woocommerce-notices-wrapper .woocommerce-info a.button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    text-decoration: underline;
    font-weight: 700;
    box-shadow: none;
    order: 2;
}

/* Close button added via JS */
.hybinet-toast-close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--hybinet-color-text-meta, #888);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
}

.hybinet-toast-close:hover {
    background-color: var(--hybinet-color-bg-tertiary, #E5E5E0);
    color: var(--hybinet-color-text-primary, #111);
}

/* Hiding animation */
.hybinet-toast-fadeout {
    opacity: 0 !important;
    transform: translateX(20px) !important;
}

/* Slide in from right */
@keyframes hybinetSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .woocommerce-notices-wrapper {
        bottom: 20px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
    
    @keyframes hybinetSlideInRight {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}