/* ==================================================
   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}
@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%}
/* 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}
/* 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:9999;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}}