@charset "utf-8";
/* ==========================================================================
   newscan.com.tw — 手機底部固定行動 Bar (全站共用)
   v3.9 - 2026/05/14 17:50
   
   設計：
   - 大字文字 + 白色圓形圖示靠右（仿 nsc.tw 風格）
   - 三色實心底：紅 / LINE 綠 / 藍
   - 電話按鈕：只有 icon、無文字
   - 取消所有 transition / transform，避免按鈕晃動
   ========================================================================== */

/* 桌機：完全隱藏 */
.mid-contact-btn {
  display: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* 舊類別重置，避免內頁殘留 CSS 干擾 */
.mid-contact-btn .mid-line-btn,
.mid-contact-btn .min-contact-btn {
  all: unset;
}

/* 手機：底部固定 bar */
@media screen and (max-width: 768px) {
  .mid-contact-btn {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9990 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  /* 每顆按鈕通用 */
  .mid-contact-btn .mid-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 8px !important;
    margin: 0 !important;
    line-height: 1 !important;
    position: relative !important;
  }
  .mid-contact-btn .mid-btn:hover,
  .mid-contact-btn .mid-btn:focus,
  .mid-contact-btn .mid-btn:active {
    color: #fff !important;
    filter: brightness(0.92);
  }

  /* 文字 label */
  .mid-contact-btn .mid-btn__label {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: #fff !important;
  }

  /* 白色圓形圖示底（icon 容器） */
  .mid-contact-btn .mid-btn__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: #fff !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  /* icon 內 SVG 顏色與按鈕底色一致 */
  .mid-contact-btn .mid-btn__icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: currentColor !important;
  }

  /* 三色背景 */
  .mid-contact-btn .mid-btn--inquiry {
    background: #e53935 !important;
  }
  .mid-contact-btn .mid-btn--inquiry .mid-btn__icon {
    color: #e53935;  /* SVG 內顏色 */
  }
  .mid-contact-btn .mid-btn--line {
    background: #06C755 !important;
  }
  .mid-contact-btn .mid-btn--line .mid-btn__icon {
    color: #06C755;
  }
  .mid-contact-btn .mid-btn--tel {
    background: #1976d2 !important;
  }
  .mid-contact-btn .mid-btn--tel .mid-btn__icon {
    color: #1976d2;
  }
  /* 電話按鈕：只有 icon，icon 加大 */
  .mid-contact-btn .mid-btn--tel {
    flex: 0.7 1 0 !important;  /* 電話按鈕占比小一點 */
  }
  .mid-contact-btn .mid-btn--tel .mid-btn__icon {
    width: 38px !important;
    height: 38px !important;
  }
  .mid-contact-btn .mid-btn--tel .mid-btn__icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* body 預留底部空間 */
  body {
    padding-bottom: 64px !important;
  }

  /* go-top 浮動鈕往上推 */
  .floating {
    bottom: 84px !important;
    right: 14px !important;
  }
  .add-line-friend-btn,
  .fixed-inquiry-btn {
    bottom: auto !important;
  }
}

/* 極窄螢幕（≤390px） */
@media screen and (max-width: 390px) {
  .mid-contact-btn .mid-btn {
    min-height: 60px !important;
    gap: 6px !important;
    padding: 0 4px !important;
  }
  .mid-contact-btn .mid-btn__label {
    font-size: 15px !important;
    letter-spacing: 1px !important;
  }
  .mid-contact-btn .mid-btn__icon {
    width: 30px !important;
    height: 30px !important;
  }
  .mid-contact-btn .mid-btn__icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .mid-contact-btn .mid-btn--tel .mid-btn__icon {
    width: 34px !important;
    height: 34px !important;
  }
  .mid-contact-btn .mid-btn--tel .mid-btn__icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  body {
    padding-bottom: 60px !important;
  }
  .floating {
    bottom: 78px !important;
  }
}

/* ==========================================================================
   電話按鈕晃動動畫（吸引注意力的微互動）
   - 只在手機顯示時觸發
   - 每 3 秒晃動一次（節制，不過度干擾）
   - 模擬「電話響鈴」的左右輕擺
   ========================================================================== */
@media screen and (max-width: 768px) {
  .mid-contact-btn .mid-btn--tel .mid-btn__icon {
    animation: tel-ring 2.5s ease-in-out infinite;
    transform-origin: center center;
  }
}

@keyframes tel-ring {
  0%, 60%, 100% {
    transform: rotate(0deg);
  }
  65% { transform: rotate(-12deg); }
  70% { transform: rotate(10deg); }
  75% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
  85% { transform: rotate(-4deg); }
  90% { transform: rotate(2deg); }
  95% { transform: rotate(0deg); }
}

/* 尊重使用者「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
  .mid-contact-btn .mid-btn--tel .mid-btn__icon {
    animation: none !important;
  }
}