/* ==================================================
   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%;align-items:center;display:flex!important;justify-content:center;width:20px;height:20px;padding:0!important;top:0;right:0}
.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}
/* =========================
   MINI CART POPUP PREMIUM
========================= */

/* Animation */
@keyframes slideCart{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
/* Scrollbar đẹp */
.cart-body::-webkit-scrollbar{width:6px}
.cart-body::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:20px}
/* Table */
.mini-cart-popup table{width:100%;border-collapse:collapse}
/* Header */
.mini-cart-popup tr:first-child{background:#111827;color:#fff;border-radius:8px}
.mini-cart-popup th.th-title{padding:14px 10px;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
/* Product item */
.woocommerce-mini-cart-item{border-bottom:1px solid #ececec;transition:all .25s ease}
.woocommerce-mini-cart-item:hover{background:#fafafa}
.woocommerce-mini-cart-item th{padding:16px 8px;vertical-align:middle}
/* Product image */
.woocommerce-mini-cart-item img{width:75px;height:75px;object-fit:cover;border-radius:12px;border:1px solid #eee;transition:all .3s ease}
.woocommerce-mini-cart-item img:hover{transform:scale(1.05)}
/* Product name */
.woocommerce-mini-cart-item a{text-decoration:none;color:#1f2937;font-size:14px;font-weight:600;line-height:1.5;transition:.25s}
.woocommerce-mini-cart-item a:hover{color:#2563eb}
/* Remove button */
a.remove.xoa-product{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fee2e2;color:#dc2626!important;font-size:18px;font-weight:bold;margin:auto;transition:.25s}
a.remove.xoa-product:hover{background:#dc2626;color:#fff!important;transform:rotate(90deg)}
/* Quantity + Price */
.mini-cart-popup .quantity{display:inline-block;font-size:14px;font-weight:600;color:#111827;background:#f3f4f6;padding:8px 12px;border-radius:8px;min-width:110px}
/* Total section */
.woocommerce-mini-cart__total{margin-top:25px;padding:18px 20px;background:linear-gradient(135deg,#111827,#1f2937);color:#fff;border-radius:14px;font-size:18px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.woocommerce-mini-cart__total strong{font-size:16px;font-weight:600}
/* Buttons */
.woocommerce-mini-cart__buttons{display:flex;gap:12px;margin-top:20px}
.woocommerce-mini-cart__buttons a{flex:1;text-align:center;padding:14px 16px;border-radius:12px;text-decoration:none;font-size:15px;font-weight:700;transition:all .3s ease}
/* View cart button */
.woocommerce-mini-cart__buttons .wc-forward{background:#f3f4f6;color:#111827;border:1px solid #ddd}
.woocommerce-mini-cart__buttons .wc-forward:hover{background:#111827;color:#fff}
/* Checkout button */
.woocommerce-mini-cart__buttons .checkout{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;box-shadow:0 8px 20px rgba(37,99,235,.25)}
.woocommerce-mini-cart__buttons .checkout:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,99,235,.35)}
/* Mobile */
@media(max-width:768px){.cart-body{width:100%;padding:15px}.hidden-xs{display:none}.woocommerce-mini-cart-item th{padding:12px 6px}.woocommerce-mini-cart__buttons{flex-direction:column}}
/* ==================================================
   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-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Firefox */
.qty-input[type=number]{-moz-appearance:textfield;appearance:textfield}
/* 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)}}
/* ==================================================
   2. QUICK VIEW POPUP RESPONSIVE
================================================== */
@media (max-width:767px){#quickViewModal .quickview-close{top:10px;right:10px;width:36px;height:36px;font-size:26px;line-height:34px}}


/* ==================================================
   MOBILE UI SYSTEM
   ACTION BAR + SEARCH POPUP (PRODUCTION SAFE)
================================================== */

/* ==================================================
   1. STATE (GLOBAL - KHÔNG PHỤ THUỘC MEDIA)
   Popup logic phải luôn tồn tại
================================================== */
#mobile-search-popup{position:fixed;inset:0;display:none;justify-content:center;align-items:center;padding:80px 16px 20px;background:rgba(0,0,0,0.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:10000}
#mobile-search-popup.active{display:flex;animation:popupFade 0.22s ease}
@keyframes popupFade{from{opacity:0}to{opacity:1}}
/* Popup container */
.mobile-search-wrap{position:relative;max-width:430px;width:calc(100% - 28px);padding:16px;border-radius:24px;background:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 44px rgba(0,0,0,0.18);animation:popupSlide 0.24s ease;box-sizing:border-box;overflow:hidden;}
@keyframes popupSlide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
/* Search form */
#mobile-search-popup form,#mobile-search-popup .woocommerce-product-search{display:flex;gap:10px;width:100%;align-items: center; box-sizing: border-box;}
/* Input */
#mobile-search-popup input[type="search"]{flex:1;height:54px;padding:0 18px;border:none;border-radius:16px;background:rgba(255,255,255,0.96);font-size:16px;outline:none;min-width:0; width:auto;}
/* Submit */
#mobile-search-popup button[type="submit"]{width:54px;min-width:54px;height:54px;border:none;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#111,#2d2d2d);color:#fff;cursor:pointer}
/* Close button */
#mobile-search-close{position:fixed;top:40px;right:18px;width:40px;height:40px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.9);font-size:28px;cursor:pointer;z-index:10001}
/* ==================================================
   2. LAYOUT (MOBILE ONLY ≤ 767px)
================================================== */
@media (max-width:767px){
/* MOBILE ACTION BAR */    
#mobile-action-bar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:92%;max-width:420px;height:60px;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,0.9);backdrop-filter:blur(14px);border-radius:30px;box-shadow:0 12px 24px rgba(0,0,0,0.2);z-index:999;padding:0 6px}
#mobile-action-bar a,#mobile-action-bar button{flex:1;height:50px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;text-decoration:none;color:#111;position:relative;cursor:pointer}
#mobile-action-bar i{font-size:22px}#mobile-action-bar img{width:22px;height:22px}
#mobile-action-bar .number-item{position:absolute;top:6px;right:18px;background:#ff3b30;color:#fff;font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%}}
/* ==================================================
   3. DESKTOP LOCK (SAFETY)
================================================== */
@media (min-width:768px){#mobile-action-bar,#mobile-search-popup{display:none!important}}

/* ==================================================
   3. CALL TO ACTIONS
================================================== */
.floating-call-button{position:fixed;left:16px;bottom:84px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient( 135deg,#ffb300,#ff9800);color:#111827;box-shadow:0 10px 24px rgba(0,0,0,.25),0 4px 10px rgba(255,179,0,.35);z-index:999;text-decoration:none;animation:callPulse 2.4s infinite;transition:transform .2s ease,box-shadow .2s ease}
.floating-call-button svg{width:24px;height:24px}
.floating-call-button:hover{transform:translateY(-2px)}
.floating-call-button:active{transform:scale(.96)}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(255,179,0,.45),0 10px 24px rgba(0,0,0,.25)}70%{box-shadow:0 0 0 16px rgba(255,179,0,0),0 10px 24px rgba(0,0,0,.25)}100%{box-shadow:0 0 0 0 rgba(255,179,0,0),0 10px 24px rgba(0,0,0,.25)}}
@media (min-width:1025px){.floating-call-button{display:none}}
@media (prefers-reduced-motion:reduce){.floating-call-button{animation:none}}