/* =============================================================================
   LINE 好友加入功能 - 專用樣式表
   針對現有 basis.css 結構優化，避免跑版問題
   ============================================================================= */

/* =============================================================================
   1. Header 區域 LINE 按鈕
   重點：header1 有 height:30px, overflow:hidden, font-size:0
   ============================================================================= */

/* 重置 header1 區域的限制，讓 LINE 按鈕可以正常顯示 */
header div.header1 {
  height: auto !important;
  min-height: 30px !important;
  overflow: visible !important;
}

/* 確保 header1 ul 可以容納 LINE 按鈕 */
header div.header1 ul {
  font-size: 1rem !important;
  padding: 5px 10px !important;
  line-height: 1.2 !important;
}

/* LINE 按鈕容器 - 確保不會被父層影響 */
header div.header1 ul li .jp-line-friend-header {
  display: inline-block !important;
  vertical-align: middle !important;
  font-size: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* LINE 按鈕連結 */
header div.header1 ul li .jp-line-friend-header a {
  display: inline-block !important;
  padding: 0px !important;
  background-color: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 0px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border: none !important;
  margin: 0 !important;
}

header div.header1 ul li .jp-line-friend-header a:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.8 !important;
}

header div.header1 ul li .jp-line-friend-header img {
  height: 20px !important;
  width: 70px !important;
  margin-right: 0px !important;
  vertical-align: middle !important;
  display: inline-block !important;
  border: none !important;
}

/* =============================================================================
   2. 浮動 LINE 按鈕
   使用高優先級確保不受其他樣式影響
   ============================================================================= */
.jp-line-friend-floating {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.jp-line-friend-floating.jp-show {
  opacity: 1 !important;
  visibility: visible !important;
}

.jp-line-friend-floating a {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 56px !important;
  text-align: center !important;
}

.jp-line-friend-floating a:hover {
  background: transparent !important;
  text-decoration: none !important;
  opacity: 0.8 !important;
}

.jp-line-friend-floating img {
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  border: none !important;
  vertical-align: top !important;
}

/* =============================================================================
   響應式設計 - 針對現有斷點優化
   ============================================================================= */

/* 720px 以下 - 對應 basis.css 的斷點 */
@media screen and (max-width: 720px) {
  /* Header - 在小螢幕隱藏 */
  header div.header1 ul li .jp-line-friend-header {
    display: none !important;
  }

  /* 浮動按鈕調整 - 手機版放大以提升觸控體驗 */
  .jp-line-friend-floating {
    bottom: 25px !important;
    right: 15px !important;
    width: 70px !important;
    height: 70px !important;
  }

  .jp-line-friend-floating a {
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .jp-line-friend-floating img {
    width: 70px !important;
    height: 70px !important;
    margin: 0 !important;
  }
}

/* 480px 以下 - 極小螢幕適度縮小避免過度佔用空間 */
@media screen and (max-width: 480px) {
  .jp-line-friend-floating {
    bottom: 20px !important;
    right: 10px !important;
    width: 60px !important;
    height: 60px !important;
  }

  .jp-line-friend-floating a {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .jp-line-friend-floating img {
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
  }
}

/* =============================================================================
   重要：確保不被其他樣式覆蓋的保護規則
   ============================================================================= */

/* 防止被全域 img 樣式影響 */
.jp-line-friend-header img,
.jp-line-friend-floating img {
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 防止被全域 a 樣式影響 */
.jp-line-friend-header a,
.jp-line-friend-floating a {
  font-family: inherit !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* 防止被 clearfix 等影響 */
.jp-line-friend-header,
.jp-line-friend-floating {
  box-sizing: border-box !important;
}

.jp-line-friend-header:before,
.jp-line-friend-header:after,
.jp-line-friend-floating:before,
.jp-line-friend-floating:after {
  display: none !important;
  content: none !important;
}