/* UI Beautify Overrides - minimal, layered on top of existing styles */

/* Header: apply glass effect ONLY when sticky (滚动后) */
.site-header {
  /* 保持原有 nav.css 的定位与透明逻辑，不在默认态添加背景或模糊 */
  transition: background-color .2s ease, box-shadow .2s ease;
}

/* Light theme header */
/* Sticky 时增加玻璃态与背景（兼容暗/明主题） */
.site-header.navbar2-sticky,
.site-header.navbar-sticky {
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Light theme header when sticky */
[data-bs-theme="light"] .site-header.navbar2-sticky,
[data-bs-theme="light"] .site-header.navbar-sticky {
  background: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Dark theme header when sticky */
[data-bs-theme="dark"] .site-header.navbar2-sticky,
[data-bs-theme="dark"] .site-header.navbar-sticky {
  background: rgba(34,37,41,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Force bright white dropdown caret on Hyper login button */

/* Home cards: radius, hover lift, softer gradient border */
.home-card {
  border-radius: 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-image: linear-gradient(90deg, #c57d48, #8abaec) 1 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.15);
}

/* Card image hover: unify scale */
.home-img:hover {
  transform: scale(1.12) !important;
}

/* Title and price alignment tweaks */
.name {
  letter-spacing: 0.2px;
}

.price,
.price b {
  color: #ff6b6b !important;
  font-weight: 600;
  transform: none !important;
  opacity: 1 !important;
  letter-spacing: 0.2px;
}

/* Badges: softer background tint with readable text */
.zdong {
  background-color: rgba(24,188,156,0.08);
  border-color: rgba(24,188,156,0.45);
  color: #18bc9c;
}
.sdong {
  background-color: rgba(54,136,252,0.08);
  border-color: rgba(54,136,252,0.45);
  color: #3688fc;
}
.kucun {
  background-color: rgba(61,77,85,0.08);
  border-color: rgba(61,77,85,0.45);
  color: #7b9aa9;
}

/* Dark theme badge readability */
[data-bs-theme="dark"] .zdong { color: #7ad8c5; border-color: rgba(24,188,156,0.6); }
[data-bs-theme="dark"] .sdong { color: #8fbafc; border-color: rgba(54,136,252,0.6); }
[data-bs-theme="dark"] .kucun { color: #a9bac3; border-color: rgba(61,77,85,0.6); }

/* Back-to-top button: vertical pill with scroll-progress border */
#backToTopBtn {
  position: fixed;
  right: 16px !important;
  bottom: 86px !important;
  z-index: 9999;
  width: 46px !important;
  height: 88px !important;
  border-radius: 21px !important;
  display: none; /* toggled by JS */
  /* glassy background, theme-aware */
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease !important;
  opacity: 0.98 !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
    gap: 3px;
  padding-top: 15px;
}

#backToTopBtn .icon {
  font-size: 14px;
  line-height: 1;
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

#backToTopBtn .label {
  font-size: 11px;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: inherit;
  /* vertical label, hard-centered within capsule */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 1em; /* keep glyphs centered to one column */
  text-align: center;
  pointer-events: none; /* do not affect button click */
}

/* progress border using conic-gradient and mask to keep only border area */
#backToTopBtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: conic-gradient(
    from -90deg,
    var(--progress-color, #8ab4f8) 0deg,
    var(--progress-color, #8ab4f8) var(--progress-angle, 0deg),
    rgba(255,255,255,0.14) var(--progress-angle, 0deg),
    rgba(255,255,255,0.14) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

#backToTopBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22) !important;
}

/* Theme-aware colors */
[data-bs-theme="light"] #backToTopBtn {
  background: rgba(255,255,255,0.7) !important;
  color: #1f2937 !important;
  border-color: rgba(0,0,0,0.12) !important;
}
[data-bs-theme="light"] #backToTopBtn::before {
  --progress-color: #3b82f6;
}
[data-bs-theme="dark"] #backToTopBtn::before {
  --progress-color: #d0e2ff;
}

/* Mobile tweak */
@media (max-width: 576px) {
  #backToTopBtn {
    right: 12px !important;
    bottom: 72px !important;
    width: 42px !important;
    height: 84px !important;
    border-radius: 19px !important;
  }
  #backToTopBtn .icon { top: 10px; }
}

/* Footer brand/link slight tone-down on dark */
[data-bs-theme="dark"] .hyper-footer a { color: #8ab4f8; }