/* jdtheme26 — floating "線上客服" LINE button (2026-09-27).
   Operator: 「prod站有一個按鈕在右下角是用chaty … 我不要安裝 chaty了，這個只是單純的點擊按鈕連到line功能，請你幫我不要安裝chaty自製到new站，位置放在scrolltotop上方」.
   A plain link printed by functions.php (jdtheme26_line_fab) — no plugin, no JS. Look copied from prod's Chaty settings: circle #38B900, 54px,
   white label "線上客服" (#333 on #fff) with a small arrow pointing at the circle.
   Position = directly ABOVE WoodMart's `.scrollToTop` (desktop: 50px circle at right 20 / bottom 20; ≤1024px: 40px at right 12, lifted above the
   floating bottom toolbar by jd-toolbar.css), same vertical centre line, 12px gap. The button is always visible; scrollToTop appears below it after scrolling. */

:root {
  --jd-line-green: #38B900;
  --jd-line-size: 54px;
  --jd-line-gap: 12px;                       /* distance between scrollToTop and this button */
  --jd-line-stt-size: 50px;                  /* WoodMart .scrollToTop */
  --jd-line-stt-right: 20px;
  --jd-line-stt-bottom: 20px;
}

body .jd-line-fab {
  position: fixed;
  /* centre line = scrollToTop's centre line */
  inset-inline-end: calc(var(--jd-line-stt-right) + (var(--jd-line-stt-size) - var(--jd-line-size)) / 2);
  bottom: calc(var(--jd-line-stt-bottom) + var(--jd-line-stt-size) + var(--jd-line-gap));
  z-index: 350;                              /* = .scrollToTop: below WoodMart's side panels, popups and overlays */
  display: flex;
  flex-direction: row-reverse;               /* DOM: icon, label → label on the left of the icon (LTR) */
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

body .jd-line-fab__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--jd-line-size);
  height: var(--jd-line-size);
  border-radius: 50%;
  background-color: var(--jd-line-green);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
body .jd-line-fab__icon svg {
  display: block;
  width: 62%;
  height: 62%;
}

body .jd-line-fab__label {
  position: relative;
  padding: 9px 14px;
  border-radius: 10px;
  background-color: #fff;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .1em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
/* arrow pointing at the circle */
body .jd-line-fab__label::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -5px;
  width: 10px;
  height: 10px;
  background-color: #fff;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}

@media (hover: hover) {
  body .jd-line-fab:hover .jd-line-fab__icon { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, .18), 0 1px 4px rgba(0, 0, 0, .1); }
}
body .jd-line-fab:focus-visible { outline: none; }
body .jd-line-fab:focus-visible .jd-line-fab__icon { outline: 2px solid #333; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  body .jd-line-fab__icon { transition: none; }
}

/* same rule as .scrollToTop: out of the way while the full-screen search is open */
.wd-search-opened .jd-line-fab { display: none; }

/* ---- phone / tablet: scrollToTop is 40px at right 12; icon only (the label would cover product cards) ---- */
@media (max-width: 1024px) {
  :root {
    --jd-line-size: 46px;
    --jd-line-gap: 10px;
    --jd-line-stt-size: 40px;
    --jd-line-stt-right: 12px;
    --jd-line-stt-bottom: 12px;
  }
  body .jd-line-fab__label {               /* kept for screen readers via the link's aria-label */
    display: none;
  }
  /* floating bottom toolbar (jd-toolbar.css lifts .scrollToTop to toolbar height + 12px) */
  body.sticky-toolbar-on .jd-line-fab {
    bottom: calc(var(--jd-tb-total, 88px) + 12px + var(--jd-line-stt-size) + var(--jd-line-gap));
  }
  /* product page: the sticky add-to-cart bar pushes .scrollToTop up by its height */
  body.sticky-toolbar-on:has(.scrollToTop.wd-sticky-btn-shown) .jd-line-fab {
    bottom: calc(var(--jd-tb-total, 88px) + 12px + var(--wd-sticky-btn-height, 0px) + var(--jd-line-stt-size) + var(--jd-line-gap));
  }
}

@media print {
  .jd-line-fab { display: none !important; }
}