/* =====================================================================
   riniba_03 移动端底部导航（首页 / 客服 / 搜索 / 购物车 / 我的）
   结构和行为见 resources/views/riniba_03/layouts/_footer.blade.php 和 js/bottom-nav.js。
   悬浮液态玻璃条：半透明底 + 背景模糊 + 亮边 + 内高光；选中项下面有一块"果冻"色块，
   点击时弹簧滑过去（带拉伸/回弹），手指按住条上左右拖动时色块跟着走，松手落在哪个标签就去哪个标签。
   日/夜配色走 html[data-bs-theme="dark"]（兼容 data-theme="dark"）；玻璃参数与 home/cart 等页面保持一致。
   ===================================================================== */
:root {
  /* 底栏悬浮高度 + 离底边距：从屏幕底部到底栏"顶部边缘"的距离。
     客服/筛选/我的这几个从底部弹出的面板要停在底栏上方（见 layouts/_footer.blade.php），
     用这个变量定位，不要在别处重复写死 64px/14px 这两个数字——改这里两处也要一起改。 */
  --mbn-bar-total: calc(64px + env(safe-area-inset-bottom, 0px) + 14px);
}
.mobile-bottom-nav {
  --mbn-n: 5;
  --mbn-pad: 6px;
  --mbn-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mbn-bg: rgba(255, 255, 255, .58);
  --mbn-border: rgba(255, 255, 255, .78);
  --mbn-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3);
  --mbn-shadow: 0 10px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .06);
  --mbn-ink: rgba(24, 29, 37, .62);
  --mbn-ink-on: #1f4fae;
  --mbn-pill-a: rgba(47, 110, 213, .22);
  --mbn-pill-b: rgba(47, 110, 213, .1);
  --mbn-pill-line: rgba(47, 110, 213, .28);
  --mbn-pill-glow: rgba(47, 110, 213, .5);
  --mbn-pill-inset: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -8px 14px -8px rgba(47, 110, 213, .2);
  --mbn-sheen: rgba(255, 255, 255, .85);

  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  height: 64px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--mbn-ink);
  background: var(--mbn-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--mbn-border);
  box-shadow: var(--mbn-shadow), var(--mbn-inset);
  /* 横向拖动完全交给脚本（bottom-nav.js 的 pointerdown/pointermove）接管，不让浏览器插手：
     原来是 touch-action:pan-y（"纵向交给页面滚动，横向交给脚本"），但触屏浏览器判断一次触摸手势
     该不该当成"纵向平移"是在最初几像素、根据最初的移动方向做的，人手划出的横向手势很难做到
     绝对水平，一旦最初几像素带一点点纵向分量，浏览器就会把整个手势判成 pan-y、自己接管去"滚动页面"，
     脚本这边的 pointermove 会被 pointercancel 打断，表现就是"划得动首页却划不过去""半途弹回原地"。
     这条 64px 高的悬浮胶囊本身不需要纵向可滚动的内容（不是页面正文），完全交给脚本判断更可靠；
     不出现长按菜单/选中文字 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html[data-bs-theme="dark"] .mobile-bottom-nav,
html[data-theme="dark"] .mobile-bottom-nav {
  --mbn-bg: rgba(28, 34, 46, .62);
  --mbn-border: rgba(255, 255, 255, .14);
  --mbn-inset: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --mbn-shadow: 0 10px 32px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2);
  --mbn-ink: rgba(226, 232, 240, .74);
  --mbn-ink-on: #a9cbff;
  --mbn-pill-a: rgba(96, 165, 250, .34);
  --mbn-pill-b: rgba(96, 165, 250, .16);
  --mbn-pill-line: rgba(147, 197, 253, .34);
  --mbn-pill-glow: rgba(59, 130, 246, .6);
  --mbn-pill-inset: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -8px 14px -8px rgba(96, 165, 250, .25);
  --mbn-sheen: rgba(255, 255, 255, .32);
}
/* 不支持 backdrop-filter 的浏览器兜底：提高底色不透明度，保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-bottom-nav { --mbn-bg: rgba(255, 255, 255, .94); }
  html[data-bs-theme="dark"] .mobile-bottom-nav,
  html[data-theme="dark"] .mobile-bottom-nav { --mbn-bg: rgba(28, 34, 46, .95); }
}

.mbn-track {
  position: relative;
  display: flex;
  height: 100%;
  padding: var(--mbn-pad);
}

/* 选中色块：宽度 = 一个标签，位置由 --mbn-i（服务端给的初始标签）决定；脚本接管后用弹簧直接改 transform。
   当前页面不属于任何一个标签时（.mbn-none，见 layouts/_footer.blade.php 的 $mbn_route），
   服务端不会给 --mbn-i，色块默认整个隐藏（不误导用户"好像选中了首页"），直到用户点了某个标签、
   或从这类页面打开客服/筛选/购物车这些面板才会淡入出现，离开后又淡出——行为在 js/bottom-nav.js。 */
.mbn-pill {
  position: absolute;
  top: var(--mbn-pad);
  bottom: var(--mbn-pad);
  left: var(--mbn-pad);
  width: calc((100% - var(--mbn-pad) * 2) / var(--mbn-n));
  transform: translate3d(calc(var(--mbn-i, 0) * 100%), 0, 0);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity .35s ease;
}
.mobile-bottom-nav.mbn-none .mbn-pill { opacity: 0; }
.mbn-pill::before,
.mbn-pill::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  border-radius: 19px;
}
.mbn-pill::before {
  background: linear-gradient(180deg, var(--mbn-pill-a), var(--mbn-pill-b));
  border: 1px solid var(--mbn-pill-line);
  box-shadow: var(--mbn-pill-inset), 0 10px 20px -12px var(--mbn-pill-glow);
  transition: box-shadow .35s ease;
}
/* 高光：手指按住拖动时更亮，像玻璃被"举起来" */
.mbn-pill::after {
  background: radial-gradient(110% 80% at 30% 0%, var(--mbn-sheen), transparent 60%);
  opacity: .5;
  transition: opacity .35s ease;
}
.mobile-bottom-nav.is-grab .mbn-pill::before {
  box-shadow: var(--mbn-pill-inset), 0 14px 26px -10px var(--mbn-pill-glow);
}
.mobile-bottom-nav.is-grab .mbn-pill::after { opacity: 1; }

.mbn-tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--mbn-ink);
  text-decoration: none;
  border-radius: 19px;
  cursor: pointer;
  -webkit-user-drag: none;
  transition: color .3s ease;
}
.mbn-tab:hover,
.mbn-tab:focus { color: var(--mbn-ink); text-decoration: none; }
.mbn-tab.is-active,
.mbn-tab.is-active:hover,
.mbn-tab.is-active:focus,
.mbn-tab.is-hover { color: var(--mbn-ink-on); }
/* 拖动中：只有手指下面的那个标签着色，原来选中的先退回普通色 */
.mobile-bottom-nav.is-grab .mbn-tab.is-active:not(.is-hover),
.mobile-bottom-nav.is-grab .mbn-tab.is-active:not(.is-hover):hover { color: var(--mbn-ink); }
.mobile-bottom-nav.is-grab .mbn-tab.is-active:not(.is-hover) .mbn-ico svg * { stroke-width: 2; }
.mbn-tab:focus-visible { outline: 2px solid rgba(59, 130, 246, .65); outline-offset: -3px; }

.mbn-ico {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  transition: transform .45s var(--mbn-spring);
}
.mbn-ico svg { display: block; width: 24px; height: 24px; overflow: visible; }
.mbn-ico svg * { transition: stroke-width .3s ease; }
.mbn-tab.is-active .mbn-ico svg *,
.mbn-tab.is-hover .mbn-ico svg * { stroke-width: 2.3; }
.mbn-label {
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* 按下：图标先被"捏"一下，松手弹回 */
.mbn-tab:active .mbn-ico { transform: scale(.86); transition-duration: .12s; }
/* 选中：图标果冻弹一下（脚本每次选中时重新触发） */
.mbn-ico.is-pop { animation: mbn-jelly .6s .05s both; }
@keyframes mbn-jelly {
  0%   { transform: scale(1, 1); }
  22%  { transform: scale(.84, 1.2) translateY(-3px); }
  46%  { transform: scale(1.16, .86) translateY(1px); }
  66%  { transform: scale(.95, 1.06); }
  84%  { transform: scale(1.03, .98); }
  100% { transform: scale(1, 1); }
}

/* 购物车件数：挂在图标右上角 */
.mbn-ico .cx-badge {
  top: -7px;
  right: -12px;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .28rem;
  font-size: .62rem;
  border: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mbn-tab,
  .mbn-ico,
  .mbn-pill,
  .mbn-pill::before,
  .mbn-pill::after { transition-duration: .01s !important; }
  .mbn-ico.is-pop { animation: none; }
}

/* =====================================================================
   「我的」面板（#mobileMineSheet）的身份卡片：头像球 + 名字/副标题 + 两个按钮
   面板外壳、把手、遮罩、关闭按钮、列表项（.lg-item / .lg-orb）、取消按钮都沿用联系抽屉那一套，
   定义在 layouts/_footer.blade.php 的内联样式里（同一组 --sh-* 变量、sh-in 入场动画），这里只补它独有的部分。
   ===================================================================== */
#mobileMineSheet .mn-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(200px 130px at 12% 0%, rgba(96, 165, 250, .2), transparent 75%),
    var(--sh-card);
  border: 1px solid var(--sh-card-border);
  box-shadow: 0 16px 30px -22px rgba(24, 29, 37, .55), var(--sh-inset);
}
#mobileMineSheet:is(.showing, .show) .mn-card {
  animation: sh-in .7s var(--sh-spring) backwards;
  animation-delay: .12s;
}
#mobileMineSheet .mn-who {
  display: flex;
  align-items: center;
  gap: .95rem;
  min-width: 0;
}
#mobileMineSheet .mn-text { min-width: 0; }
#mobileMineSheet .mn-name {
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sh-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobileMineSheet .mn-sub {
  margin-top: .1rem;
  font-size: .8125rem;
  color: var(--sh-muted);
}
#mobileMineSheet .mn-actions {
  display: flex;
  gap: .7rem;
  margin-top: .95rem;
}
/* 退出登录是 POST 表单：让 form 自己撑成一个弹性格子，按钮再撑满它 */
#mobileMineSheet .mn-actions > form { flex: 1 1 0; display: flex; min-width: 0; margin: 0; }
#mobileMineSheet .mn-actions > form .mn-btn { flex: 1 1 auto; }
#mobileMineSheet .mn-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.9rem;
  padding: .55rem 1rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--sh-title);
  background: var(--sh-card);
  border: 1px solid var(--sh-card-border);
  border-radius: 999px;
  box-shadow: 0 12px 22px -16px rgba(24, 29, 37, .5), var(--sh-inset);
  cursor: pointer;
  transition: transform .5s var(--sh-spring);
  -webkit-tap-highlight-color: transparent;
}
#mobileMineSheet .mn-btn:hover,
#mobileMineSheet .mn-btn:focus { color: var(--sh-title); text-decoration: none; }
#mobileMineSheet .mn-btn:active { transform: scale(.95); }
/* 主按钮：和首页"筛选"按钮同一套蓝色渐变 */
#mobileMineSheet .mn-btn--primary,
#mobileMineSheet .mn-btn--primary:hover,
#mobileMineSheet .mn-btn--primary:focus {
  color: #fff;
  background: linear-gradient(120deg, #2456b8, #2f6ed5 50%, #1f8fdc);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 10px 20px -10px rgba(47, 110, 213, .9), inset 0 1px 0 rgba(255, 255, 255, .45);
}
#mobileMineSheet .mn-btn:focus-visible { outline: 2px solid rgba(59, 130, 246, .65); outline-offset: 2px; }