body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  position: fixed;
  /* 固定在頁面頂部 */
  top: 0;
  /* 距離頂部 0 */
  left: 0;
  /* 距離左側 0 */
  width: 100%;
  /* 寬度填滿視窗 */
  z-index: 1000;
  /* 確保層級高於其他元素 */
  background-color: #1f2937;
  /* 背景色，確保滾動時背景一致 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 添加陰影效果 */
  z-index: 10;
  /* 適當設定層級 */
}

/* 描述文字樣式 */
header div.text-sm {
  color: #d1d5db; /* 淡灰色 */
  font-size: 0.875rem; /* 手機端文字較小 */
}

header div.text-sm.md\:text-base {
  font-size: 1rem; /* 桌面端文字適中 */
}

header div.bg-gray-700 {
  background-color: #374151; /* 更深灰色區塊 */
  color: #d1d5db;
}

main {
  margin-top: 64px;
  /* 預留與 header 高度相同的空間 */
  flex-grow: 1;
  /* 撐滿剩餘空間 */
}

/* 桌面版菜單顯示 */
nav.md\\:flex {
  display: flex !important;
  /* 強制在桌面顯示 */
}

/* 桌面版文字樣式 */
nav a {
  color: white;
  /* 確保文字顏色可見 */
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

nav a:hover {
  color: #fbbf24;
  /* 滑鼠懸停時的黃色 */
}

ul {
  list-style-type: disc; /* 使用圓點 */
  padding-left: 20px; /* 增加左側間距 */
}

ul li {
  margin-bottom: 5px; /* 增加行間距 */
}

ul li::marker {
  color: black; /* 可改變圓點顏色 */
  font-size: 1.2em; /* 放大圓點 */
}

/* 手機版菜單樣式 */
#mobileMenu {
  display: none;
  /* 預設隱藏 */
  position: fixed;
  top: 64px;
  /* 菜單距離頂部 64px（header 高度） */
  left: 50%;
  transform: translateX(-50%);
  /* 水平置中 */
  width: 90%;
  /* 菜單寬度為視窗的 90% */
  max-width: 400px;
  /* 最大寬度限制 */
  background-color: rgba(31, 41, 55, 1);
  /* 深灰背景 */
  border-radius: 12px;
  /* 圓角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* 添加陰影 */
  z-index: 50;
  /* 保證高於其他內容 */
}

/* 菜單內部連結樣式 */
#mobileMenu a {
  display: block;
  padding: 12px;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

#mobileMenu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* 懸停時背景微亮 */
}

/* 顯示菜單 */
#mobileMenu:not(.hidden) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 菜單的三條線 */
#menuToggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: white;
  transition: transform 0.3s ease, opacity 0.3s ease; /* 添加過渡效果 */
}

/* 當手機菜單打開時，旋轉條紋，並改變菜單按鈕的樣式 */
#menuToggle.open .bar:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 6px;
}

#menuToggle.open .bar:nth-child(2) {
  opacity: 0;
}

#menuToggle.open .bar:nth-child(3) {
  transform: rotate(-45deg);
  position: relative;
  bottom: 6px;
}

/** layout */
.logo {
  border-radius: 50%;
  /* 讓圖片變成圓形 */
  vertical-align: middle;
  /* 垂直置中對齊 */
  object-fit: cover;
  /* 確保圖片完整顯示 */
  transition: transform 0.2s ease;
  /* 懸停動畫效果 */
}

/* 懸停效果 */
.logo:hover {
  transform: scale(1.1);
  /* 放大效果 */
}

/** home */
.reserve-btn {
  pointer-events: auto;
  /* 允許按鈕接收點擊事件 */
  z-index: 10;
  /* 確保按鈕位於上方 */

  background-color: #ff5252;
  color: #fff;
  padding: 10px 20px;
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.reserve-btn:hover {
  background-color: #d44;
}

img {
  border-radius: 8px;
}

.carousel {
  position: relative;
  width: 100%;
  height: 500px;
  /* 設定固定高度，避免因內容變化導致箭頭位置錯誤 */
  /* overflow: hidden; */
}

.carousel-item img {
  height: 400px;
  width: auto;
  object-fit: cover;
  /* 如果圖片需要裁切，可以改用 cover */
  margin: 0 auto;
  /* 置中 */
  display: block;
  /* 將圖片設定為區塊級元素以配合 margin */
}

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-inner img,
.carousel-inner .custom-div {
  pointer-events: auto;
}

/* .carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 10px;
  border-radius: 50%;
} */

.custom-div {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f8d7da;
  color: #721c24;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
}

/* custom-div 內的圖片特殊處理 */
.custom-div img {
  position: relative;
  height: 200px;
  width: auto;
  /* 讓圖片可以突破 carousel 的限制 */
  z-index: 1;
  /* 確保圖片在其他元素之上 */
  /* overflow: visible; */
  /* 允許內容超出容器 */
}

.custom-div img:hover {
  height: 300px;
  width: auto;
  transform: scale(1.8) !important;
}

.custom-div h2 {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 10px;
}

.custom-div p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.custom-div .reserve-btn {
  position: relative;
  z-index: 10;
}

button#prevSlide,
button#nextSlide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

#prevSlide {
  left: 10px;
}

#nextSlide {
  right: 10px;
}

button#prevSlide:hover,
button#nextSlide:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/** petservices */
#scrollContainer {
  display: flex;
  gap: 16px;
  /* 卡片之間的間距 */
  overflow-x: auto;
  /* 允許水平滾動 */
  scroll-behavior: smooth;
  /* 滾動時平滑過渡 */
  padding-bottom: 1rem;
  /* 與滾動條保持距離 */
  align-items: center;
  /* 保證卡片內容垂直居中 */
}

.flex-none {
  display: flex;
  flex-direction: column;
  /* 將內容從上到下排列 */
  align-items: center;
  /* 水平置中 */
  text-align: center;
  /* 文字置中對齊 */
  flex-shrink: 0;
  width: calc(50% - 16px);
  /* 每張卡片占容器寬度的一半（含間距） */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 8px;
}

.flex-none img {
  width: auto;
  /* 圖片寬度占滿容器 */
  max-height: 200px;
  height: auto;
  /* 自適應高度，保持比例 */
  object-fit: contain;
  /* 圖片完整顯示 */
  border-radius: 8px;
  /* 保持現有圓角效果 */
  margin-bottom: 16px;
  /* 與文字保持適當間距 */
}

button#prevSlide,
button#nextSlide {
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
}

button#prevSlide:hover,
button#nextSlide:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 按鈕基礎樣式 */
button#openModal {
  font-size: 1rem;
  /* 字體大小 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* 按鈕懸停樣式 */
button#openModal:hover {
  transform: scale(1.05);
  /* 放大效果 */
}

/* 增加按鈕與段落的間距 */
.text-center.mb-10 {
  margin-top: 0.5rem;
  /* 可根據需求調整間距 */
}

/* Modal 顯示與隱藏效果 */
body.modal-open {
  overflow: hidden;
  height: 100vh;
}

#modal {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#modal.show {
  opacity: 1;
  pointer-events: all;
}

#modalContent {
  max-height: 80vh; /* 讓 Modal 本身不超過視窗 */
  overflow-y: auto; /* 允許內容滾動 */
  width: 95%; /* 確保在小螢幕上不會太寬 */
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#modalContent.show {
  transform: scale(1);
  opacity: 1;
}

/** contact */
/* 社群連結的圖標樣式 */
.flex img {
  transition: transform 0.2s ease;
}

.flex img:hover {
  transform: scale(1.1);
  /* 懸停時放大效果 */
}

/* Google Maps 外框樣式 */
iframe {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/** activity */
/* 表格基礎樣式 */
table {
  border-spacing: 0;
  border: 1px solid #ccc;
}

thead th {
  text-align: left;
  background-color: #f9f9f9;
  padding: 8px;
  font-weight: bold;
}

tbody td {
  border: 1px solid #ccc;
  padding: 8px;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

tbody tr:hover {
  background-color: #f0f8ff;
  /* 懸停效果 */
}

/* 狀態標籤樣式 */
table td .status {
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

table td .status.not-started {
  background-color: #fbbf24;
  color: #fff;
}
table td .status.in-progress {
  background-color: #34d399;
  color: #fff;
}
table td .status.ended {
  background-color: #ef4444;
  color: #fff;
}