/* 容器样式 */
.sample-stories {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* padding: 20px; */
}

/* 标题样式 */
.sample-stories h4 {
  text-align: center;
  margin-bottom: 20px;
}

/* 故事轮播样式 */
.story-carousel {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* 故事卡片样式 */
.story-card {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  margin-bottom: 15px;
}

/* 图片自适应样式 */
.story-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.age-slider {
  width: 100%;
  max-width: 600px;
}

.gender-toggle {
  display: flex; /* 启用 Flexbox 布局，使其子元素（input 和 label）默认按行排列 */
  gap: 10px; /* 在选项之间添加一些间隙，可根据需要调整 */
  /* margin-top: 5px; */ /* 可选：在选项和上面的提示文字之间增加一点距离 */
}

/* (可选) 隐藏原始的 radio 按钮 */
/* 通常这种切换按钮的样式会隐藏原始 input，仅通过 label 来控制 */
.gender-toggle input[type="radio"] {
  display: none; /* 或者使用其他隐藏技术，如 position: absolute; opacity: 0; */
}

/* (可选) 基础按钮样式 - 你可能已经有类似样式 */
.toggle-btn {
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  /* 让按钮宽度根据内容自适应，或者设置固定宽度/flex: 1; */
}

/* (可选) 未选中时的样式 */
.toggle-btn {
  background-color: #f8f9fa;
  color: #495057;
}

/* (可选) 鼠标悬停时的样式 */
.toggle-btn:hover {
  background-color: #e9ecef;
}

/* (可选) 选中状态的样式 */
/* 使用 :checked 伪类和相邻兄弟选择器 (+) 来改变选中标签的样式 */
.gender-toggle input[type="radio"]:checked + .toggle-btn {
  background-color: #007bff; /* 示例选中背景色 */
  color: white; /* 示例选中文字颜色 */
  border-color: #0056b3; /* 示例选中边框颜色 */
}

/* (可选) 为男孩/女孩按钮设置不同的选中颜色 */
.gender-toggle input#gender-boy:checked + .boy-btn {
  background-color: #3498db; /* 男孩选中颜色 */
  border-color: #2980b9;
  color: white;
}

.gender-toggle input#gender-girl:checked + .girl-btn {
  background-color: #e91e63; /* 女孩选中颜色 */
  border-color: #c2185b;
  color: white;
}

.hint {
  display: block; /* 让提示文字单独占一行 */
  font-size: 0.9em;
  color: #6c757d;
  margin-bottom: 8px;
}

.fas {
  /* Font Awesome 图标的间距 */
  margin-right: 5px;
}

/* --- 梦幻渐变风格 --- */

.form-section {
    position: relative; /* Ensure this is set */
}

.login-prompt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10; /* Ensure it's above the form */
    border-radius: 15px; /* Match form section style if needed */
    text-align: center;
    padding: 20px;
    backdrop-filter: blur(4px); /* Optional: Add a blur effect */
    -webkit-backdrop-filter: blur(4px); /* For Safari */
}

.login-prompt-content p {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 20px;
}

/* Reuse existing button style or define a new one */
#overlay-login-btn {
    /* Styles copied or adapted from .magical-button */
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    /* Add other .magical-button styles */
}

/* Ensure .hidden class works */
.hidden {
    display: none !important; /* Use !important to override potential conflicts */
}

.welcome-banner {
  padding: 10px 20px; /* 上下内边距大一些，左右适中 */
  text-align: center; /* 文字居中 */
  border-radius: 12px; /* 轻微圆角 */
  background: linear-gradient(
    135deg,
    #fbc2eb 0%,
    #a6c1ee 100%
  ); /* 粉色到浅蓝的柔和渐变背景 */
  color: #333; /* 默认文字颜色，会被下面覆盖 */
  margin-bottom: 20px; /* 与下方内容的间距 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加轻微阴影增加立体感 */
}

.welcome-banner .magical-title {
  font-size: 2.5rem; /* 较大的字号，突出标题 */
  font-weight: 700; /* 粗体 */
  margin-bottom: 15px; /* 与副标题的间距 */
  /* --- 核心：渐变文字效果 --- */
  background: linear-gradient(
    45deg,
    #6a11cb 0%,
    #2575fc 100%
  ); /* 深紫到亮蓝的渐变 */
  -webkit-background-clip: text; /* 将背景裁剪为文字形状 (需要 Webkit 前缀) */
  background-clip: text; /* 标准写法 */
  color: transparent; /* 使文字本身透明，显示背景渐变 */
  /* --- 如果浏览器不支持渐变文字，提供一个优雅的回退 --- */
  /* color: #6a11cb; */ /* 可以取消注释这行作为备用纯色 */
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3); /* 添加轻微白色文字阴影，增加对比度 */
}

.welcome-banner .subtitle {
  font-size: 1.1rem; /* 适中的字号 */
  color: #4a4a4a; /* 深灰色，比纯黑柔和，易于阅读 */
  line-height: 1.6; /* 增加行高，提高可读性 */
  max-width: 600px; /* 限制最大宽度，避免在大屏幕上过长 */
  margin-left: auto; /* 配合 max-width 实现居中 */
  margin-right: auto; /* 配合 max-width 实现居中 */
}

/* --- 整体评价区域样式 --- */
.testimonials {
  max-width: 1200px; /* 限制最大宽度 */
  margin: 40px auto; /* 上下边距，左右居中 */
  padding: 20px;
}

.testimonials h3 {
  text-align: center;
  font-size: 2em; /* 稍大标题 */
  margin-bottom: 30px; /* 标题和卡片间的距离 */
  color: #333;
}

/* --- 卡片容器 (使用 Flexbox) --- */
.testimonial-container {
  display: flex; /* 启用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许项目换行 */
  gap: 20px; /* 设置卡片之间的间隙 (替代 margin) */
  justify-content: center; /* 当行未完全填满时，居中卡片 */
}

/* --- 单个卡片样式 --- */
.testimonial {
  background-color: #ffffff; /* 卡片背景色 */
  border-radius: 8px; /* 圆角 */
  padding: 25px; /* 卡片内部边距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影增加立体感 */
  border: 1px solid #e0e0e0; /* 细边框 */

  /* --- Flexbox 子项设置 (实现自适应的关键) --- */
  /*
flex: flex-grow | flex-shrink | flex-basis;
flex-grow: 1;  允许卡片扩展以填充可用空间
flex-shrink: 1; 允许卡片收缩 (默认)
flex-basis: 280px; 设置卡片的理想基础宽度。
                  当容器宽度不足以容纳多个此宽度的卡片时，
                  因为设置了 flex-wrap: wrap，卡片会自动换行。
                  你可以根据需要调整这个值。
*/
  flex: 1 1 280px;
  /* 或者，如果你想让它们更平均地分配，但最小宽度是280px */
  /* flex: 1 0 280px; */

  /* 设置一个最大宽度防止卡片在只有一两个时变得过宽 */
  max-width: 400px;

  /* 为了更好的视觉效果，可以添加过渡效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 可选：鼠标悬停效果 */
.testimonial:hover {
  transform: translateY(-5px); /* 轻微上移 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* 阴影加深 */
}

/* --- 卡片内部内容样式 --- */
.testimonial .quote {
  font-style: italic;
  color: #555;
  margin-bottom: 15px; /* 引言和作者之间的距离 */
  font-size: 1.05em; /* 引言字体稍大 */
  position: relative; /* 为伪元素定位做准备 */
  padding-left: 25px; /* 为引号留出空间 */
}

/* 可选：添加引号样式 */
.testimonial .quote::before {
  content: "“"; /* 左引号 */
  position: absolute;
  left: 0;
  top: -5px; /* 微调位置 */
  font-size: 2em; /* 引号大小 */
  color: #ccc; /* 引号颜色 */
  line-height: 1;
}

/* 如果想在末尾也加引号 */
/* .testimonial .quote::after {
content: '”';
font-size: 2em;
color: #ccc;
line-height: 1;
vertical-align: bottom;
margin-left: 5px;
} */

.testimonial .author {
  text-align: right;
  font-weight: bold;
  color: #333;
  font-size: 0.95em;
}

/* --- Styling for the Feature Preview Section --- */

.preview-features {
display: flex; /* Arrange features horizontally */
flex-wrap: wrap; /* Allow features to wrap onto the next line if needed */
gap: 15px; /* Space between feature items */
padding: 10px; /* Optional: Add some padding around the container */
justify-content: left; /* Optional: Center the items if the container is wider */
/* Example: Add a light background or border if desired */
/* background-color: #f9f9f9; */
/* border: 1px solid #eee; */
/* border-radius: 8px; */
}

.feature {
display: inline-flex; /* Use inline-flex to keep icon and text together */
align-items: left; /* Vertically align icon and text */
background-color: #eef2ff; /* A light background color for each feature */
color: #4338ca;          /* A matching text/icon color */
padding: 8px 15px;       /* Padding inside each feature */
border-radius: 20px;     /* Rounded corners */
font-size: 0.9rem;       /* Adjust font size */
font-weight: 500;        /* Slightly bolder text */
transition: all 0.2s ease-in-out; /* Smooth transition for hover effect */
/* Optional: Add a subtle border */
/* border: 1px solid #dbeafe; */
}

.feature:hover {
background-color: #e0e7ff; /* Slightly darker background on hover */
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Add shadow on hover */
}

.feature i {
margin-right: 8px;  /* Space between icon and text */
font-size: 1.1em; /* Make icon slightly larger than text */
/* color: #6366f1; */ /* Can set icon color specifically if needed */
}

.feature span {
/* Specific styles for the text if needed */
line-height: 1.2; /* Adjust line height for better readability */
}

/* --- Font Awesome Setup (Ensure you have this linked in your HTML <head>) --- */
/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" ... /> */

/* 响应式布局 */
@media (max-width: 768px) {
  .story-carousel {
    flex-direction: row;
    align-items: center;
  }

  .story-card {
    max-width: 100%;
    width: 100%;
  }

  .age-slider {
    max-width: 90%;
  }
  .welcome-banner {
    padding: 0.5rem 0.5rem;
  }
  .welcome-banner .magical-title {
    font-size: 2rem; /* 缩小标题字号 */
  }
  .welcome-banner .subtitle {
    font-size: 1rem; /* 缩小副标题字号 */
  }
  .generator-container {
    gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .form-section {
    padding: 0.5rem;
    min-width: 320px;
    width: 100%;
    box-sizing: border-box;
  }
  .preview-section {
    padding: 1.5rem;
    min-width: 320px;
    width: 100%;
    box-sizing: border-box;
  }
  #generate-btn,
  #download-btn {
    padding: 0.9rem 1.5rem;
    font-size: 1.1rem;
  }
}
/* --- 响应式调整 (可选的细化) --- */
/* 在非常小的屏幕上，可能希望卡片占据整个宽度 */
@media (max-width: 480px) {
  .testimonial {
    /* 覆盖 flex-basis，让它倾向于占据全部宽度 */
    flex-basis: 100%;
    max-width: none; /* 取消最大宽度限制 */
  }
  .testimonials h3 {
    font-size: 1.6em;
  }
  .testimonial .quote {
    font-size: 1em;
  }
}

/* 故事展示按钮样式 */
.gallery-link {
  text-decoration: none;
}

.gallery-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  margin-right: 10px;
}

.gallery-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.gallery-button span {
  display: flex;
  align-items: center;
  gap: 4px;
}