/* ================================================================
   ██  手機版  ██
   ================================================================ */
  
/* lg:hidden flex items-center justify-between
   px-4 py-3 bg-white shadow-md sticky top-0 z-50 */
.mb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

@media (min-width: 1024px) {
  .mb-header { display: none; }
}
 
/* flex-grow flex justify-center（Logo 外層） */
.mb-logo-wrap {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
      word-break: keep-all;
  /* justify-content: flex-start; */
}
 
/* flex items-center（Logo 連結） */
.mb-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 5%;
}
.mb-logo-img { height: 2.25rem; }
.mb-logo-text {
  color: var(--menu-brand);
  font-size: 2.25rem;
  font-weight: 900;
  margin-left: 0.5rem;
}

.mb-fb-link { display: grid; align-items: center; text-decoration: none; margin-right: 16%; margin-left: 1%;}
.mb-fb-link i,.fa-facebook { color: #2563eb; }
.mb-fb-img { height: 0.5rem; margin: 0 auto; }
.mb-fb-text { font-size: 0.6rem; text-align: center;}

/* .mb-bar-angle-link { display: grid; align-items: center; text-decoration: none; margin-left: 8%;margin-right: 1%;}
.mb-bar-angle-img { height: 1.2rem;margin: 1px auto; }
.mb-bar-angle-text { font-size: 0.6rem; text-align: center;} */
 
/* flex items-center gap-3（右側按鈕群） */
.mb-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
 
#mobile-menu-btn {
            /* 關鍵：固定定位，讓按鈕相對於視窗固定 */
            position: fixed;
            top: 9px;    /* 距離上方 20px */
            /* right: 15%; */
            right: 20px;  /* 距離右方 20px */
            z-index: 9999; /* 確保按鈕在最上層，不會被內容遮住 */

            /* 樣式美化：讓按鈕更顯眼 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid #e5e7eb;
            transition: all 0.2s ease;
        }




/* w-10 h-10 flex items-center justify-center
   bg-gray-100 rounded-full text-gray-700（漢堡按鈕） */
.mb-hamburger {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 9999px;
  color: #374151;
  border: none;
  cursor: pointer;
}
 
/* fa-solid fa-bars text-xl */
.mb-hamburger-icon { font-size: 1.25rem; }
 
 
/* ── Overlay ── */
 
/* fixed inset-0 bg-black/60 z-[60] hidden backdrop-blur-sm
   opacity-0 transition-opacity duration-300 */
.mb-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 60;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(.4,0,.2,1);
}
.mb-overlay.active {
  pointer-events: auto;
  opacity: 1;
}

 
/* ── 側拉面板 ── */
 
/* fixed top-0 right-0 h-full w-[85%] max-w-[320px] bg-white z-[70] shadow-2xl
   translate-x-full transition-transform duration-300 ease-in-out
   flex flex-col */
.mb-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 85%;
  max-width: 320px;
  background-color: #fff;
  z-index: 70;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.mb-panel.active { transform: translateX(0) !important; }
 
 
/* ── 面板頂部：搜尋與登入 ── */
 
/* pt-16 px-6 pb-6 bg-gray-50 border-b */
.mb-panel-head {
  padding: 4rem 1.5rem 1.5rem;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
 
/* flex gap-2 mb-6（登入/加入會員列） */
.mb-auth-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
 
/* flex-1 flex items-center justify-center gap-2
   py-2.5 bg-gray-900 text-white rounded-lg text-sm font-bold */
.mb-btn-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: #111827;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
 
/* flex-1 flex items-center justify-center gap-2
   py-2.5 bg-white border border-gray-200
   rounded-lg text-sm font-bold text-gray-700 */
.mb-btn-register {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
  text-decoration: none;
}
 
/* ── 手機搜尋表單 ── */
 
/* space-y-2（form） */
.mb-search-form > * + * { margin-top: 0.5rem; }
 
/* bg-white border border-gray-200 rounded-xl overflow-hidden
   focus-within:border-[#57b7c2] transition-colors shadow-sm */
.mb-search-box {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  transition: border-color 150ms;
}
.mb-search-box:focus-within { border-color: var(--menu-teal); }
 
/* flex border-b border-gray-100（select 列） */
.mb-search-select-row {
  display: flex;
  border-bottom: 1px solid #f3f4f6;
}
 
/* w-full bg-transparent px-4 py-2.5 text-sm text-gray-600
   outline-none custom-select-mobile font-medium */
.mb-search-select {
  width: 100%;
  background: transparent;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #4b5563;
  outline: none;
  border: none;
  font-weight: 500;
}
 
/* flex items-center px-3 py-1.5（input + 送出列） */
.mb-search-input-row {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
}
 
/* flex-1 bg-transparent py-2 text-sm text-gray-700 outline-none */
.mb-search-input {
  flex: 1;
  background: transparent;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: #374151;
  outline: none;
  border: none;
}
 
/* bg-[#57b7c2] text-white w-9 h-9 rounded-lg
   flex items-center justify-center
   active:scale-90 transition-transform */
.mb-search-submit {
  background-color: var(--menu-teal);
  color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: transform 150ms;
}
.mb-search-submit:active { transform: scale(.90); }
 
 
/* ── 主選單清單 ── */
 
/* flex-1 overflow-y-auto p-6 space-y-4 */
.mb-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.mb-menu-body > * + * { margin-top: 1rem; }
 
/* submenu-trigger w-full flex items-center justify-between
   p-4 text-white rounded-xl font-bold */
.mb-sub-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: #fff;
  border-radius: 0.75rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: left;
}
 
/* 各 trigger 背景色 */
.mb-sub-trigger-teal   { background-color: var(--menu-teal);   }
.mb-sub-trigger-green  { background-color: var(--menu-green);  }
.mb-sub-trigger-purple { background-color: var(--menu-purple); }
.mb-sub-trigger-orange { background-color: var(--menu-orange); }
 
/* arrow-icon transition-transform */
.arrow-icon { transition: transform 150ms cubic-bezier(.4,0,.2,1); }
 
/* submenu-content bg-gray-50 border-x border-b rounded-b-xl */
.submenu-content {
  background-color: #f9fafb;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0 0 0.75rem 0.75rem;
}

.submenu-content.open { display: block; }

/* 手機版手風琴動畫 */
.submenu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑過渡 */
}
.submenu-active .submenu-content {
    max-height: 500px !important;
}
.submenu-active .arrow-icon {
    transform: rotate(180deg);
}




/* block p-4 text-gray-700 border-b border-gray-200/50 */
.mb-sub-link {
  display: block;
  padding: 1rem;
  color: #374151;
  text-decoration: none;
  border-bottom-width: 1px;
}
.mb-sub-link-border { border-bottom: 1px solid rgba(229,231,235,.50); }
 
 
/* ── 次要連結區 ── */
 
/* pt-6 border-t border-gray-100 grid grid-cols-2 gap-3 */
.mb-util-links {
  padding-top: 1.5rem;
  border-top: 1px solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.75rem;
}
 
/* text-sm text-gray-500 hover:text-blue-600 */
.mb-util-link {
  font-size: 0.875rem;
  color: #6b7280;
  text-decoration: none;
  transition: color 150ms;
}
.mb-util-link:hover { color: #2563eb; }
 
/* flex items-center gap-1（Angle 列） */
.mb-angle-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
 
/* w-3 h-3 object-contain（Angle logo） */
.mb-angle-img {
  width: 0.75rem;
  height: 0.75rem;
  object-fit: contain;
}
 
 
/* ── 關閉按鈕 ── */
 
/* m-6 p-3 text-gray-400 border border-gray-200 rounded-lg
   text-sm font-bold */
.mb-close-btn {
  margin: 1.5rem;
  padding: 0.75rem;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: none;
  cursor: pointer;
  width: calc(100% - 3rem);
}