/* ==================================================
   popup.min.css
   Tách từ customs.min.css (giữ nguyên source gốc)
   Bao gồm:
   1. Popup Giỏ hàng
   2. Quick View Popup
   3. Slideshow popup / carousel
   4. Toast thông báo add to cart
================================================== */


/* ==================================================
   1. POPUP GIỎ HÀNG
================================================== */

.cart-popup{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
}

.cart-popup.active{
    display:block;
}

.cart-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.4);
}

.cart-content{
    position:absolute;
    top:0;
    right:0;
    width:400px;
    max-width:100%;
    height:100%;
    background:#fff;
    padding:20px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:.3s ease;
}

.cart-popup.active .cart-content{
    transform:translateX(0);
}

.close-cart{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}

.number-item{
    background:red;
    color:#fff;
    border-radius:50%;
    padding:2px 6px;
    font-size:12px;
}

.popup-cart-msg{
    padding:10px 14px;
    margin-bottom:12px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
}

.popup-cart-msg.success{
    background:#e8fff0;
    color:#008a3d;
}

.popup-cart-msg.error{
    background:#ffecec;
    color:#c40000;
}


/* ==================================================
   2. QUICK VIEW BUTTON NGOÀI CARD
================================================== */

.quick-view-btn{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    background:#000;
    color:#fff;
    border:none;
    padding:5px 10px;
    font-size:12px;
    opacity:0;
    transition:.3s;
}

.product-card:hover .quick-view-btn{
    opacity:1;
}


/* ==================================================
   3. QUICK VIEW MODAL POPUP
================================================== */

/* close button */
#quickViewModal .quickview-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border:none;
    background:rgba(0,0,0,.05);
    border-radius:50%;
    padding:0;
    margin:0;
    font-size:24px;
    line-height:30px;
    font-weight:300;
    color:#1d1d1f;
    cursor:pointer;
    z-index:999;
    transition:all .25s ease;
    backdrop-filter:blur(8px);
    box-shadow:none;
}

#quickViewModal .quickview-close:hover{
    background:rgba(0,0,0,.1);
    transform:scale(1.08);
}

#quickViewModal .quickview-close:active{
    transform:scale(.95);
}

#quickViewModal .quickview-close:focus{
    outline:none;
}

/* modal body */
#quickViewModal .modal-body{
    position:relative;
    padding:24px;
}

#quickViewModal .modal-content{
    border-radius:10px;
    overflow:hidden;
}

#quickViewModal h3{
    padding-right:55px;
    line-height:1.4;
    margin-top:0;
    font-size:20px;
    font-weight:600;
    margin-bottom:10px;
}

#quickViewModal img{
    width:100%;
    border-radius:8px;
}

/* price */
.qv-price{
    margin-bottom:10px;
}

.qv-price span{
    font-weight:600;
}

.qv-price del{
    font-size:14px;
}

/* meta */
.qv-meta p{
    margin:4px 0;
    font-size:14px;
}

.qv-meta b{
    color:#333;
}

/* desc */
.qv-desc{
    font-size:14px;
    color:#666;
    line-height:1.5;
}

/* qty + cart */
.qv-qty-cart{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
}

/* qty box */
.qty-box{
    display:flex;
    align-items:center;
    border:1px solid #ddd;
    border-radius:6px;
    overflow:hidden;
}

.qty-box button{
    width:30px;
    height:30px;
    border:none;
    background:#f5f5f5;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;
}

.qty-box button:hover{
    background:#ddd;
}

.qty-box input{
    width:40px;
    text-align:center;
    border:none;
    outline:none;
}

/* add to cart button */
.ajax-add-to-cart{
    background:#e60023;
    border:none;
    padding:8px 15px;
    border-radius:6px;
    transition:.25s;
}

.ajax-add-to-cart:hover{
    background:#c4001d;
}


/* ==================================================
   4. TOAST THÔNG BÁO
================================================== */

.cart-toast{
    margin-top:15px;
    background:#28a745;
    color:#fff;
    padding:10px;
    border-radius:6px;
    font-size:14px;
    text-align:center;
    animation:fadeInUp .3s ease;
}

@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* ==================================================
   5. SLIDESHOW / CAROUSEL POPUP
================================================== */

#myCarousel1 .carousel-control{
    background:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
}

#myCarousel1 .carousel-control span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    background:rgba(0,0,0,.5);
    border-radius:50%;
    color:#fff;
    font-size:20px;
    transition:all .3s ease;
}

#myCarousel1 .carousel-control span:hover{
    background:#ff5722;
    transform:scale(1.1);
}

#myCarousel1 .carousel-control.left,
#myCarousel1 .carousel-control.right{
    top:50%;
    transform:translateY(-50%);
}

#myCarousel1 .carousel-control.left{
    left:10px;
}

#myCarousel1 .carousel-control.right{
    right:10px;
}