/* assets/css/market.css */

:root {
  --bg-base: #f1e4d3;
  --card-bg: #fff8ec;
  --primary: #b48a61;
  --primary-dark: #a16c47;
  --text-dark: #5b3a29;
  --shadow: 0 4px 12px rgba(0,0,0,0.1);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: "Noto Sans TC", sans-serif;
  background: var(--bg-base);
  color: var(--text-dark);
}
/* Sticky Header */
header.site-header {
  padding: 1rem 0; text-align: center;
  box-shadow: var(--shadow);
}
header.site-header img {
  width: 100px; height: auto;
}
.container {
  max-width: 960px;
  padding: 2rem 1rem 4rem;
}
/* 搜尋區 */
.search-box { position: relative; }
.search-box input {
  padding-left: 2.5rem;
  border-radius: 50px;
  border: 1px solid var(--primary);
  background: var(--card-bg);
}
.search-box .bi-search {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--primary-dark);
}
#searchBtn {
  border-radius: 50px;
  background: var(--primary);
  border: none;
  color: #fff;
  width: 100px;
}
#searchBtn:hover { background: var(--primary-dark); }
/* 篩選按鈕 */
.btn-group .btn {
  border-radius: 50px;
  border: 1px solid var(--primary);
  color: var(--text-dark);
}
.btn-group .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 攤位卡片 */
.stall-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.stall-card:hover { transform: translateY(-4px); }
.stall-card .card-header {
  background: var(--primary-dark);
  color: #fff;
  padding: .75rem 1rem;
  cursor: pointer;
}
.stall-card .card-body {
  background: var(--card-bg);
  padding: 1rem;
}
.item-img {
  width: 24px; height: 24px;
  margin-bottom: .5rem;
}
.pet-img {
  width: 32px; height: 32px;
  margin-bottom: .5rem;
}
.text-pet {
  color: var(--text-dark);
  font-weight: bold;
}

.pagination {
  font-size: 0.7rem;
}
.pagination .page-link {
  padding: 0.15rem 0.4rem;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--primary);
  color: var(--text-dark);
  min-width: 1.2rem;
  text-align: center;
  line-height: 1.2;
  transition: all 0.2s ease-in-out;
}
.pagination .page-link:hover {
  background: var(--primary);
  color: #fff;
}
.pagination .page-item.active .page-link {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  background: var(--card-bg);
  color: #bbb;
}


/* ===== 覆盖 Bootstrap 默认 btn 颜色 ===== */

/* 去掉所有 btn 在 focus / active 状态下的阴影 */
.btn:focus,
.btn:active {
  box-shadow: none !important;
}

/* 1. 覆盖 btn-primary（确保始终使用自定义 --primary 颜色，无蓝底） */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Hover / Focus / Active 时也用 --primary-dark，不要出现 Bootstrap 原生的深蓝 */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary:active {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: none !important;
}

/* 2. 覆盖 btn-outline-primary（让它保持透明底 + 自定义边框色，点击时不变深蓝） */
.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--primary) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--card-bg) !important;
  border-color: var(--primary) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}

.btn-outline-primary.active,
.btn-outline-primary:active {
  background-color: var(--card-bg) !important;
  border-color: var(--primary) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}
/* ---------- 精确搜索开关更大版样式 ---------- */

.exact-switch {
  display: flex;
  align-items: center;
}

/* 1. 把开关本身放大到 2em × 1.2em，更醒目 */
.exact-switch .form-check-input {
  width: 2em;
  height: 1.2em;
  margin: 0;               /* 清除 Bootstrap 默认的 margin */
  cursor: pointer;
  border-radius: 1.2em;    /* 圆角变成高度的 1 倍，保持完全圆形 */
  background-color: #ccc;
  position: relative;
  transition: background-color 0.2s ease-in-out;
}

/* 2. 滑块圆点也相应放大，移动距离更长 */
.exact-switch .form-check-input::before {
  content: '';
  position: absolute;
  top: 0.12em;            /* 上边距调大一点，水平居中 */
  left: 0.12em;           /* 左边距调大一点 */
  width: 0.96em;          /* 0.96em ≈ (1.2em - 0.24em) */
  height: 0.96em;         /* 保持正方形 */
  background-color: #fff;
  border-radius: 50%;     /* 圆形 */
  transition: transform 0.2s ease-in-out;
}

/* 3. 选中状态：背景改成主色，滑块往右移动 约 0.8em */
.exact-switch .form-check-input:checked {
  background-color: var(--primary);
}

.exact-switch .form-check-input:checked::before {
  transform: translateX(0.8em); 
}

/* 4. Label 文本：字体适度放大，留在开关右侧 */
.exact-switch .form-check-label {
  margin-left: 0.5rem;       /* 开关和文字之间留点空隙 */
  color: var(--text-dark);   /* 与整体文字颜色一致 */
  white-space: nowrap;       /* 不换行 */
  user-select: none;         /* 点击时不要选中文字 */
}

/* 5. 鼠标悬停和聚焦状态：更明显的反馈 */
.exact-switch .form-check-input:hover {
  background-color: var(--primary-dark, #a16c47);
}
.exact-switch .form-check-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(180,138,97,0.4);
}

/* 6. 整个标签和开关都可点击 */
.exact-switch .form-check-input,
.exact-switch .form-check-label {
  cursor: pointer;
}