.city-card {
    display: block;
    background: #fff;
    padding: 1em;
    margin-bottom: 1.5rem;
    width: 100%;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

.city-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }

/* 相片容器：使用 flex 排版並允許自動換行 */
.accomodationphoto {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;              /* 圖片之間的間距 */
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 縮圖基礎樣式 */
.accomodationphoto img {
  width: 75px;           /* 固定寬高保持整齊 */
  height: 75px;
  object-fit: cover;     /* 自動裁切，確保圖片不拉伸變形 */
  border-radius: 6px;    /* 微圓角 */
  border: 1px solid #e0e0e0; /* 淡灰色邊框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 微陰影增加立體感 */
  transition: all 0.25s ease-in-out; /* 動畫平滑過渡 */
  cursor: pointer;
}

/* Hover 懸停效果 */
.accomodationphoto img:hover {
  opacity: 0.9;
  transform: translateY(-2px) scale(1.05); /* 微升起 + 放大效果 */
  border-color: #0d6efd; /* Hover 時變為主題藍色（可依需求修改） */
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2); /* 藍色光芒陰影 */
}

.accomodationphoto img {
  pointer-events: none; /* 點擊無反應 */
  cursor: default;      /* 滑鼠移上去不顯示手勢 */
}

.accommodation-types h3 {
  position: relative;
  font-size: 1.25rem;         /* Bootstrap fs-5 標題大小 */
  font-weight: 600;
  color: #2b3035;             /* 深灰色文字，比純黑更具質感 */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-left: 12px;        /* 為左側裝飾條留出空間 */
  display: flex;
  align-items: center;
}


.accommodation-types h3:first-of-type {
  margin-top: 0.5rem;
}


.acctext {
    display: block !important;

    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px 16px;

    color: #495057 !important;
    font-size: 0.9rem !important;
    line-height: 2.2;
    letter-spacing: 0.3px;
}


/* Icon */
.acctext i {
    width: 26px;
    height: 26px;
    margin: 0 6px 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    vertical-align: middle;

    border-radius: 50%;
    background: #e9ecef;

    color: var(--default-color);
    font-size: 0.8rem !important;

    flex-shrink: 0;
}


/* 第一个 icon 不要左边距太大 */
.acctext i:first-child {
    margin-left: 0;
}


/* Mobile */
@media (max-width: 576px) {
    .acctext {
        padding: 10px 12px;
        line-height: 2;
    }

    .acctext i {
        width: 24px;
        height: 24px;
        margin-left: 6px;
        margin-right: 5px;
    }

    .acctext i:first-child {
        margin-left: 0;
    }
}



/* 容器：設為彈性盒、自動換行與設定間距 */
.accommodation-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px; /* 標籤之間的間距 */
}

/* 單個設施膠囊標籤 */
.accommodationinfo {
  display: inline-flex !important;
  align-items: center;
  background-color: #f8f9fa; /* Bootstrap bg-light 顏色 */
  border: 1px solid #dee2e6;  /* Bootstrap border 顏色 */
  border-radius: 50rem;       /* 圓角膠囊形狀 */
  padding: 4px 12px 4px 5px;  /* 內邊距：左側稍窄以搭配圖標 */
  font-size: 0.875rem;       /* Bootstrap small 字號 */
  color: #495057;             /* 深灰文字 */
  font-weight: 500;
  line-height: 1.2;
  transition: all 0.2s ease-in-out;
}

/* 滑鼠懸停時效果 (可選) */
.accommodationinfo:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
}

/* 左側圓形圖標容器 */
.accommodationinfo i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #e9ecef; /* 圖標的圓形背景色 */
  color: var(--default-color);
  font-size: 0.85rem;
  margin-right: 8px;         /* 圖標與文字間距 */
  flex-shrink: 0;
}