/*
 Theme Name: Astra Child
 Theme URI: https://wpastra.com/
 Description: Child theme for Astra
 Author: You
 Template: astra
 Version: 1.0
*/


/* Container for the popup */
.product { position: relative; }

muju-variation-wrapper {
	width: 100;
}

/* Desktop: Overlay that covers the product card */
.muju-desktop-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 99;
    padding: 15px; display: flex; align-items: center;
    border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	box-sizing: border-box;
	border-radius: 8px;
}

/* Mobile: Bottom Sheet */
@media (max-width: 768px) {
    .muju-mobile-wrapper {
        position: fixed; bottom: 0; left: 0; width: 100%;
        z-index: 9999; background: #fff;
        padding: 30px 20px 20px; border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    }
    .muju-mobile-backdrop {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6); z-index: 9998;
    }
    body.popup-active { overflow: hidden; }
}

/* Close Button */
.muju-close {
    position: absolute; top: 10px; right: 15px;
    font-size: 24px; cursor: pointer; color: #333; font-weight: bold;
}

/* Make form elements full width */
.muju-variation-wrapper select, 
.muju-variation-wrapper .single_add_to_cart_button {
    width: 100% !important; margin-top: 10px;
}

ul.products li .trigger-variation-popup {
    background: var(--ast-global-color-0);
    padding: 1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 45px;
    height: 45px;
    position: absolute;
    bottom: 6px;
    left: 1px;
    z-index: 10;
}

.muju-variation-wrapper table.variations td.value select {
	
	    border-radius: 8px;
    	border: 1px solid var(--ast-border-color);
}
	
.muju-variation-wrapper  form.cart button.single_add_to_cart_button {
    box-sizing: border-box;
}

.muju-variation-wrapper  form.cart .woocommerce-variation-add-to-cart div.quantity  {
    float: none !important;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

 

.muju-variation-wrapper  form.cart .woocommerce-variation-add-to-cart div.quantity .quantity .minus,  .quantity .plus {
    width: 43px;
    display: flex;
    justify-content: center;
    background-color: #a0d5a8d6;
    border: 1px solid var(--ast-border-color);
    color: var(--ast-global-color-7);
    align-items: center;
    outline: 0;
    font-weight: 800;
    z-index: 3;
    position: relative;
    border-radius: 8px;
}

.muju-variation-wrapper  form.cart .woocommerce-variation-add-to-cart div.quantity input[type=number] {
 border: 1px solid #80808047;
    color: black;
    border-radius: 10px;
}

/***********************************************************************/

/* Hide original messages */
#muju-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.muju-toast {
    position: relative; /* Needed to anchor the progress bar */
    background: #2c2c2c;
    color: #fff;
    padding: 16px 20px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    min-width: 300px;
    overflow: hidden; /* Clips the progress bar corners */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateX(100px);
}

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

/* The Progress Bar */
.muju-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,0.2);
}

.muju-progress-inner {
    height: 100%;
    width: 100%;
    background: #4CAF50; /* Success Green */
    transition: width 5s linear; /* The countdown speed */
}

.muju-toast.error .muju-progress-inner { background: #ff5252; }
.muju-toast.info .muju-progress-inner { background: #2196F3; }

.muju-toast-close {
    cursor: pointer;
    font-size: 22px;
    padding-left: 10px;
    line-height: 1;
}