/* ================================
   WCAF Mobile – FULL CSS (fixed)
   ================================ */

/* Tokens */
.wcaf-mobile-bar,
#wcaf-offcanvas{
  --primary-gradient: linear-gradient(to right, #0C69F2, #02B2DF, #5DCF7C);
  --radius: 12px;
  --shadow: 0 8px 16px rgba(12,105,242,.15);
}

/* --- Top bar (đặt TRÊN tiêu đề, chỉ mobile) --- */
.wcaf-mobile-bar{ display:none; margin:8px 0 12px; }
@media (max-width: 991.98px){
  .wcaf-mobile-bar{ display:flex; justify-content:center; }
}

/* Nút “LỌC SẢN PHẨM” – nhỏ, căn giữa, gradient */
.wcaf-mobile-bar .wcaf-mobile-toggle{
  width: clamp(220px, 50vw, 320px);
  padding: 0px 10px;
  border: 0;
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-transform: uppercase; font-weight: 700; letter-spacing: .3px;
  color: #fff; background-image: var(--primary-gradient);
  background-size: 200% 100%; background-position: 0 0;
  box-shadow: var(--shadow);
  transition: background-position .3s ease, transform .06s ease, box-shadow .2s ease;
}
.wcaf-mobile-bar .wcaf-mobile-toggle:hover{
  background-position: 100% 0;
  box-shadow: 0 10px 20px rgba(12,105,242,.22);
}
.wcaf-mobile-bar .wcaf-mobile-toggle:active{ transform: translateY(1px); }
.wcaf-mobile-toggle__icon{
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23fff" d="M4 6h16v2H4V6zm3 5h10v2H7v-2zm-2 5h14v2H5v-2z"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="%23fff" d="M4 6h16v2H4V6zm3 5h10v2H7v-2zm-2 5h14v2H5v-2z"/></svg>') no-repeat center/contain;
}

/* --- Off-canvas: cố định, không kéo lệch, iOS-safe --- */
#wcaf-offcanvas{
  position: fixed; inset: 0; z-index: 1200; pointer-events: none;
  overscroll-behavior: none;     /* chặn overscroll nền */
  touch-action: none;            /* chặn pan trên overlay */
}
#wcaf-offcanvas .wcaf-offcanvas__overlay{
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .25s;
}

/* Panel trượt bên phải – neo top&bottom để không bị che footer */
#wcaf-offcanvas .wcaf-offcanvas__panel{
  position: fixed; right: 0; top: 0; bottom: 0;   /* quan trọng */
  width: 86%; max-width: 420px;

  /* chiều cao an toàn trên iOS */
  height: auto; min-height: 100%;
  height: 100vh;   /* fallback */
  height: 100svh;  /* Safari iOS 16+ */
  height: 100dvh;  /* Viewport động */

  background: #fff; box-shadow: -2px 0 24px rgba(0,0,0,.18);
  transform: translateX(102%); transition: transform .28s ease;
  display: flex; flex-direction: column; border-radius: 10px 0 0 10px;
  overflow: hidden;                 /* header/footer cố định */
  overscroll-behavior: contain;     /* không “trôi” panel */
  touch-action: none;               /* không pan panel */
}

#wcaf-offcanvas .wcaf-offcanvas__header{
  padding: 0 10px; border-bottom: 1px solid #eee;
  display: flex; justify-content: space-between; align-items: center;
}
#wcaf-offcanvas .wcaf-offcanvas__title{ font-weight: 700; }
#wcaf-offcanvas .wcaf-offcanvas__close{
  background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer;
}

/* Chỉ BODY được cuộn dọc */
#wcaf-offcanvas .wcaf-offcanvas__body{
  flex: 1 1 auto; min-height: 0;
  padding: 12px 14px;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;              /* chỉ cho kéo dọc */
  overscroll-behavior: contain;
}

/* --- Footer: 2 hàng, full width --- */
#wcaf-offcanvas .wcaf-offcanvas__footer{
  padding: 12px 14px;
  border-top: 1px solid #eee;
  display: grid;
  grid-template-columns: 1fr;   /* 1 cột => mỗi nút 1 hàng */
  gap: 5px;
  background: #fff;
}
#wcaf-offcanvas .wcaf-btn{
  width: 100%;
  padding: 0px 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-weight: 600;
}
#wcaf-offcanvas .wcaf-btn--apply{
  color: #fff; border: 0;
  background-image: var(--primary-gradient);
  background-size: 200% 100%; background-position: 0 0;
  box-shadow: var(--shadow);
  transition: background-position .3s ease, transform .06s ease, box-shadow .2s ease;
}
#wcaf-offcanvas .wcaf-btn--apply:hover{
  background-position: 100% 0; box-shadow: 0 8px 18px rgba(12,105,242,.22);
}
#wcaf-offcanvas .wcaf-btn--apply:active{ transform: translateY(1px); }
#wcaf-offcanvas .wcaf-btn--reset{
  background: #f5f6f8; color: #111; border-color: #e5e7eb;
}

/* Trạng thái mở + khoá scroll nền */
#wcaf-offcanvas.is-open{ pointer-events: auto; }
#wcaf-offcanvas.is-open .wcaf-offcanvas__overlay{ opacity: 1; }
#wcaf-offcanvas.is-open .wcaf-offcanvas__panel{ transform: translateX(0); }
html.wcaf-locked, body.wcaf-locked{ overflow: hidden !important; }

/* Safe-area iPhone – đẩy footer lên khỏi home bar */
@supports(padding: max(0px)){
  .wcaf-mobile-bar{ margin-bottom: max(12px, env(safe-area-inset-bottom)); }
  #wcaf-offcanvas .wcaf-offcanvas__footer{
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}