/* === 全域樣式設定 === */
body {
  font-family: "微軟正黑體", "Noto Sans", sans-serif; /* 指定字體為微軟正黑體，若無則使用備用字體 */
  font-size: 20px; /* 預設文字大小為 20px */
}

body, ul {
  margin: 0; /* 移除預設外距 */
  padding: 0; /* 移除預設內距 */
  box-sizing: border-box; /* 包含邊框與內距於元素總寬高內 */
}

/* === 超連結樣式設定 === */
a {
  text-decoration: none; /* 移除底線 */
  color: #caa263; /* 預設連結顏色為金棕色 */
  font-weight: bold; /* 加粗文字 */
}

a:hover {
  color: #3b3b3b; /* 滑鼠移入時變為深灰色 */
}

/* === 輪播容器設定（避免被固定導覽列擋住） === */
.carousel-container {
  margin-top: 40px; /* 與導覽列保留 40px 空間 */
}

/* === 導覽列主容器樣式 === */
.navbar {
  position: fixed; /* 固定在畫面上方 */
  top: 0; /* 頂部對齊 */
  width: 100%; /* 寬度佔滿全螢幕 */
  background-color: #fff; /* 背景為白色 */
  z-index: 999; /* 堆疊順序較高 */
  display: flex; /* 使用 Flexbox 排列子元素 */
  align-items: center; /* 垂直置中 */
  justify-content: space-between; /* 左右兩側元素分開對齊 */
  padding: 10px 16px; /* 內距上下10px，左右16px */
  box-sizing: border-box; /* 包含 padding 與 border 在內 */
  overflow: visible; /* 允許超出內容顯示 */
}

/* === 導覽列下方金色線條（僅電腦版顯示） === */
.navbar-line {
  position: fixed; /* 固定於畫面 */
  top: 70px; /* 高度依導覽列調整 */
  left: 0; /* 左對齊 */
  width: 100%; /* 寬度滿版 */
  height: 2px; /* 線條厚度 */
  background-color: #c59f62; /* 金棕色 */
  z-index: 998; /* 堆疊層級略低於導覽列 */
}

/* === 手機版隱藏金色線條 === */
@media screen and (max-width: 768px) {
  .navbar-line {
    display: none; /* 小於768px時隱藏線條 */
  }
}

/* === Logo 圖片設定 === */
.logo {
  height: 50px; /* 高度 50px */
  width: auto; /* 寬度自動調整比例 */
  max-width: 350px; /* 最大寬度不超過 350px */
}

/* === 手機版 logo 尺寸調整與置中 === */
@media (max-width: 768px) {
  .logo {
    height: 40px; /* 高度較小 */
    max-width: 500px; /* 寬度限制 500px */
    justify-content: center; /* 水平置中（⚠ 此處無效，應套用於容器） */
    align-items: center; /* 垂直置中（⚠ 同上） */
  }
}

/* === 導覽連結區塊 === */
.nav-links {
  display: flex; /* 使用 Flexbox 水平排列 */
  gap: 20px; /* 每個連結間距 20px */
}

/* === 導覽列中的每個連結樣式 === */
.nav-links a {
  color: #caa263; /* 金棕色字體 */
  text-decoration: none; /* 無底線 */
  font-weight: bold; /* 粗體 */
  white-space: nowrap; /* 單行顯示，避免自動換行 */
  overflow: hidden; /* 超出寬度隱藏 */
  text-overflow: ellipsis; /* 超出文字以省略號處理 */
  max-width: 120px; /* 最寬限制為 120px */
}

.nav-links a:hover {
  color: #676767; /* 滑鼠移入變灰色 */
}

/* === 電腦版導覽列防止太寬 === */
@media screen and (min-width: 769px) {
  .nav-links {
    flex-wrap: wrap; /* 自動換行 */
    max-width: calc(100vw - 200px); /* 留下 logo 與 padding 空間 */
    overflow: hidden; /* 超出內容隱藏 */
  }
}
/* === 漢堡按鈕樣式（僅手機顯示） === */
.hamburger {
  display: none; /* 預設隱藏，在手機版才顯示 */
  font-size: 28px; /* 按鈕圖示大小 */
  background: none; /* 無背景色 */
  border: none; /* 無邊框 */
  color: #caa263; /* 金棕色字體 */
  cursor: pointer; /* 滑鼠懸停為指標手型 */
}

/* === 手機版導覽列展開設定 === */
@media screen and (max-width: 768px) {
  .hamburger {
    display: block; /* 小於 768px 顯示漢堡按鈕 */
  }

  .nav-links {
    display: none; /* 預設隱藏選單 */
    flex-direction: column; /* 垂直排列選單 */
    background-color: #fff; /* 背景白色 */
    position: absolute; /* 絕對定位 */
    top: 60px; /* 與導覽列對齊 */
    left: 0; /* 左對齊 */
    width: 100%; /* 寬度佔滿 */
    padding: 2px 0; /* 上下內距 */
    max-width: none; /* 移除寬度限制 */
    overflow: visible; /* 顯示全部內容 */
  }

  .nav-links.show {
    display: flex; /* 點擊漢堡展開選單 */
  }

  .nav-links a {
    margin: 0px 0; /* 上下外距 */
    text-align: center; /* 文字置中 */
    max-width: 100%; /* 寬度不限制 */
  }
}

/* === 輪播主容器設定 === */
.carousel-container {
  position: relative; /* 相對定位，讓內部按鈕絕對定位 */
  overflow: hidden; /* 超出範圍不顯示 */
  margin: 40px auto; /* 上下間距40px，自動置中 */
  width: 99%; /* 寬度為視窗99% */
  max-width: 1200px; /* 最大寬度不超過1200px */
}

/* === 輪播圖片軌道設定 === */
.carousel-track {
  display: flex; /* 使用 flex 水平排列圖片 */
  transition: transform 0.5s ease-in-out; /* 平滑滑動效果 */
}

/* === 單張圖片設定 === */
.carousel-track a {
  flex: 0 0 50%; /* 一次顯示兩張圖片（每張佔一半） */
  padding: 5px; /* 圖片間距 */
  box-sizing: border-box; /* 包含 padding 計算寬度 */
}

.carousel-track img {
  width: 100%; /* 圖片寬度佔滿 */
  aspect-ratio: 16 / 9; /* 長寬比 16:9 */
  object-fit: cover; /* 圖片填滿區塊，可能裁切 */
  border-radius: 0px; /* 無圓角，可自定 */
}

/* === 輪播左右按鈕樣式 === */
.carousel-btn {
  position: absolute; /* 絕對定位 */
  top: 50%; /* 垂直置中 */
  transform: translateY(-50%); /* 精確置中對齊 */
  background-color: rgba(0,0,0,0.5); /* 半透明黑背景 */
  color: #fff; /* 白色字體 */
  border: none; /* 無邊框 */
  font-size: 24px; /* 按鈕圖示大小 */
  cursor: pointer; /* 滑鼠手型 */
  padding: 10px; /* 內距 */
  z-index: 10; /* 確保在圖片之上 */
  border-radius: 0; /* 圓角為 0，可調整為 50% */
}

.carousel-btn.prev {
  left: 10px; /* 靠左邊10px */
}

.carousel-btn.next {
  right: 10px; /* 靠右邊10px */
}

/* === 手機版輪播一張圖 === */
@media (max-width: 768px) {
  .carousel-track a {
    flex: 0 0 100%; /* 一次只顯示一張圖 */
  }
}

.carousel-container {
  width: 95vw; /* 視窗寬度 95%，避免滿版緊貼 */
}

/* === 內文圖片置中對齊樣式 === */
.image-center {
  width: 98vw; /* 寬度佔視窗 98% */
  max-width: 680px; /* 電腦版最大寬度 680px */
  margin: 0 auto; /* 左右置中 */
  padding: 12px 0; /* 上下內距 */
  text-align: center; /* 內部文字與圖置中 */
}

.image-center img {
  width: 100%; /* 圖片寬度佔滿容器 */
  height: auto; /* 高度等比縮放 */
  display: block; /* 區塊顯示 */
  border-radius: 0px; /* 無圓角，可自定 */
}

@media screen and (max-width: 768px) {
  .image-center {
    max-width: 100%; /* 手機版寬度不限制 */
  }
}

/* === 浮動客服主容器（右下角） === */
.floating-chat {
  position: fixed; /* 固定於畫面 */
  bottom: 20px; /* 離底部20px */
  right: 20px; /* 離右側20px */
  z-index: 9999; /* 最上層顯示 */
  display: flex; /* 使用 flex 排列按鈕 */
  flex-direction: column-reverse; /* 主按鈕在下方，選項在上 */
  align-items: center; /* 子項目置中 */
}

/* === 主客服按鈕（圓形） === */
.chat-main-btn {
  width: 60px; /* 圓形按鈕寬高 */
  height: 60px;
  border-radius: 50%; /* 圓形 */
  background-color: #caa263; /* 金棕色背景 */
  border: none; /* 無邊框 */
  cursor: pointer; /* 滑鼠手型 */
  padding: 8px; /* 內距 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 陰影效果 */
}

.chat-main-btn img {
  width: 100%; /* 圖片寬高填滿 */
  height: 100%;
  object-fit: contain; /* 保持圖片比例填滿 */
}

/* === 展開的聯繫按鈕群組 === */
.chat-options {
  display: none; /* 預設隱藏 */
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 按鈕間距 */
  margin-bottom: 10px; /* 與主按鈕間距 */
}

.chat-options.show {
  display: flex; /* 顯示時改為 flex 垂直排列 */
}

.chat-options a {
  display: block; /* 區塊顯示 */
  width: 50px; /* 按鈕大小 */
  height: 50px;
  border-radius: 50%; /* 圓形按鈕 */
  overflow: hidden; /* 超出內容裁切 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* 陰影效果 */
}

.chat-options img {
  width: 100%; /* 圖片填滿 */
  height: 100%;
  object-fit: cover; /* 圖片裁切填滿圓形 */
}

/* === 表單外層容器 === */
.form-container {
  max-width: 680px;                   /* 最大寬度限制為 680px（避免表單過寬） */
  width: 98vw;                        /* 寬度佔視窗 98%，左右留白 */
  margin: 0 auto;                     /* 水平置中 */
  padding: 15px;                      /* 內距為 15px */
  background-color: #ffffff;         /* 背景色為白色 */
  border-radius: 0px;                /* 邊角為直角（0px） */
  font-family: "微軟正黑體", sans-serif; /* 使用微軟正黑體 */
}

/* === 表單每個小區段的包裝 === */
.form-section {
  margin-bottom: 2px;           /* 區段底部間距 2px */
  background-color: #ffffff;    /* 白色背景 */
  padding: 10px;                /* 內距為 10px */
  border-radius: 0px;           /* 無圓角 */
}

/* === 表單區段標題 === */
.form-section h3 {
  margin-bottom: 1px;           /* 與下方元素間距 1px */
  color: #caa263;               /* 金棕色標題 */
}

/* === 表單欄位群組：一行多個欄位容器 === */
.form-row {
  display: flex;                /* 使用 Flex 排列 */
  flex-wrap: wrap;             /* 自動換行 */
  gap: 20px;                   /* 欄位間距 20px */
  margin-bottom: 16px;         /* 每行底部距離 16px */
}

/* === 標籤 label 樣式 === */
.form-row label {
  flex: 1 1 240px;             /* 最小寬度 240px，自動縮放 */
  display: flex;              /* 使用 Flex 垂直排列 */
  flex-direction: column;
  font-size: 14px;
  color: #333;
}

/* === 表單輸入欄位通用樣式 === */
input.r1,
input.r,
input.r2,
input.r11,
select,
textarea {
  padding: 1px;
  font-size: 14px;
  border: 1px solid #caa263;
  border-radius: 20px;
  background-color: #fff;
  font-family: inherit;
}

/* === 錯誤欄位樣式 === */
input.error,
select.error,
textarea.error {
  border: 2px solid red !important;
  background-color: #fff0f0;
}

/* === 錯誤訊息樣式 === */
.error-message {
  display: none;
  color: red;
  font-size: 13px;
  margin: 6px 0;
}

/* === 表單群組外層 === */
.form-group {
  margin-bottom: 20px;
}

/* === 按鈕區塊樣式 === */
.form-buttons {
  text-align: center;
  margin-top: 24px;
}

/* === 提交與重設按鈕 === */
.form-buttons input {
  padding: 1px 2px;
  margin: 0 8px;
  background-color: #caa263;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

/* === 按鈕 hover 效果 === */
.form-buttons input:hover {
  background-color: #b28a52;
}

/* === 表單底部小字區塊 === */
.form-footer {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-top: 24px;
}

/* === 底部連結樣式 === */
.form-footer a {
  color: #caa263;
  font-weight: bold;
  text-decoration: none;
}

/* === 必填提示字樣式 === */
.required {
  color: red;
  font-size: 12px;
}

/* === 響應式：手機版 === */
@media screen and (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-row label {
    flex: 1 1 100%;
  }

  .form-buttons input[type="submit"],
  .form-buttons input[type="reset"] {
    width: 100%;
    max-width: 100px;
    margin: 10px auto;
  }
}

/* 頁尾區塊 */
.site-footer {
  background-color: #caa263;    /* 背景色為金棕色（品牌色） */
  color: #242424;               /* 預設文字顏色為深灰色 */
  text-align: center;           /* 文字置中對齊 */
  padding: 10px 16px;            /* 上下內距為10px，左右內距為16px */
  font-size: 14px;              /* 文字大小為14px */
  line-height: 1.6;             /* 行高設定為1.6倍，讓文字行距更舒服 */
  margin-top: 40px;             /* 與上方區塊保持40px的間距 */
}

.site-footer a {
  color: #505050;               /* 超連結顏色為灰黑色 */
  text-decoration: none;        /* 預設不顯示底線 */
  font-weight: bold;            /* 字體加粗 */
}

.site-footer a:hover {
  color: #505050;               /* 滑鼠移上去時維持相同顏色 */
  text-decoration: underline;   /* 顯示底線效果，強調可點擊 */
}

.site-footer .copyright {
  margin-top: 10px;             /* 與上方連結保持10px間距 */
  font-size: 13px;              /* 字體大小為13px（稍微小一點） */
  opacity: 0.9;                 /* 透明度 0.9，看起來較為淡化柔和 */
}
/* 浮動icon */
.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 0;
}

.social-icons a img {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-icons a:hover img {
  transform: scale(1.15);
}