
/* 页面背景和基础样式 */
ion-content {
  --background: #fffafa;
}

.search-button{
  background-color: #fff ,!important;
  color:#333,!important;
}
/* 搜索框圆角样式 */
.custom-searchbar {
  --border-radius: 25px; /* 设置圆角 */
  --background: #ffffff; /* 背景色 */
  --padding-start: 16px; /* 内边距，适应圆角 */
  --padding-end: 16px; /* 内边距，适应圆角 */
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

/* 搜索框的聚焦效果（增加阴影） */
.custom-searchbar:focus-within {
  --box-shadow: 0 0 8px rgba(76, 175, 80, 0.6); /* 聚焦时的阴影效果 */
  --border-color: #4caf50; /* 聚焦时的边框颜色 */
}

/* 保持轮播图相关的样式不变 */
.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px; /* 可根据需要调整宽度 */
  margin: 0 auto;
}

.description.active {
  color: black;
  font-weight: bold;
  display: block;
  opacity: 1; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  max-width: 100%;
}

.slide img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #fff;
}

/* 以下是饮食卡片部分的新增样式 */

/* 设置所有矩形框为圆角矩形 */
ion-card {
  border-radius: 12px; /* 卡片圆角 */
  overflow: hidden; /* 防止内容溢出圆角边界 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  margin-bottom: 16px; /* 卡片之间的间距 */
}

ion-card-header {
  background-color: #e6f7e6; /* 淡绿色背景 */
  padding: 16px 20px; /* 上下和左右内边距 */
  border-top-left-radius: 12px; /* 圆角效果 */
  border-top-right-radius: 12px; /* 圆角效果 */
  display: flex;
  align-items: center; /* 图标与文字垂直居中 */
  border-bottom: 2px solid #4caf50; /* 添加底部分隔线 */
}

ion-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c6e4f; /* 深绿色 */
  display: flex;
  align-items: center; /* 图标与文字垂直居中 */
  gap: 8px; /* 图标与文字之间的间距 */
}

ion-card-content {
  padding: 16px; /* 内容的内边距 */
  color: #555; /* 内容字体颜色 */
}

/* 卡片悬停效果 */
.diet-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 增强的阴影效果 */
  transform: translateY(-4px); /* 向上漂浮的效果 */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 平滑的过渡效果 */
}

/* 设置每餐的框样式 */
.meal-box {
  background-color: #f7fff7; /* 淡绿色背景 */
  border: 1px solid #4caf50; /* 每餐框的边框颜色 */
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px; /* 每餐之间的间距 */
  transition: background-color 0.3s ease; /* 背景颜色过渡 */
}

/* 每餐框的悬停效果 */
.meal-box:hover {
  background-color: #e1f7e1; /* 悬停时变为更亮的绿色 */
}

/* 早餐、午餐、晚餐的标题 */
.meal-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px; /* 减小顶部间距 */
  margin-bottom: 5px; /* 减小底部间距 */
  color: #4caf50; /* 绿色 */
}

/* 每餐的饮食内容 */
.meal-details {
  font-size: 16px;
  color: #333; /* 内容颜色 */
  line-height: 1.6; /* 增加行间距，使内容更易读 */
  margin-bottom: 20px; /* 每段内容的间距 */
}

/* 没有饮食规划的提示 */
.no-plan {
  font-size: 16px;
  color: #f44336; /* 红色 */
  text-align: center;
  padding: 8px;
  background-color: #f8d7da;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* 底部内容区域 */
.diet-card-footer {
  padding: 16px;
  background-color: #f0f9f0; /* 淡绿色背景 */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top: 1px solid #4caf50;
}

/* 加载中消息的样式 */
.loading-msg p {
  font-size: 18px;
  color: #555;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
}

/* 登录按钮的样式 */
.login-btn {
  margin-top: 20px; /* 与上一部分的间距 */
  display: block;
  width: 100%; /* 按钮宽度占满容器 */
  font-size: 16px; /* 按钮文字大小 */
  padding: 10px 0; /* 按钮上下内边距 */
  border-radius: 12px; /* 按钮圆角 */
  transition: background-color 0.3s ease, color 0.3s ease; /* 按钮的平滑过渡效果 */
}

/* 登录按钮的 hover 效果 */
.login-btn:hover {
  background-color: #3880ff; /* 蓝色背景 */
  color: white; /* 按钮文字变为白色 */
}

/* 小屏设备上的样式调整 */
@media (max-width: 768px) {
  .diet-card {
    max-width: 90%; /* 调整卡片最大宽度 */
  }

  .diet-card-header {
    padding: 12px 16px; /* 缩小内边距 */
  }

  .diet-card-content,
  .diet-card-footer {
    padding: 12px; /* 减少内边距 */
  }

  .meal-title {
    font-size: 16px; /* 调整字体大小 */
  }

  .meal-details {
    font-size: 14px; /* 调整字体大小 */
  }

  .login-btn {
    font-size: 14px; /* 调整按钮文字大小 */
    padding: 8px 0; /* 减小按钮内边距 */
  }
}

.horizontal-row {
  display: flex;          /* 使用 flexbox 排列 */
  justify-content: space-between; /* 左右对齐 */
  align-items: center;    /* 垂直居中对齐 */
}

.horizontal-row ion-col {
  padding: 0;  /* 去除默认 padding */
}

ion-button {
  width: 100%;  /* 按钮宽度为 100%，确保按钮撑满每个列 */
}
