/* 定义基础颜色和样式 */
:root {
	--main-bg-color: #f0f0f0;
	--nav-active-color: #9c27b0;
	--nav-inactive-color: #7b1fa2;
	--button-bg-purple: #8b008b;
	--button-bg-green: #4CAF50;
	--button-bg-black: #000000;
	--text-color-white: #ffffff;
	--text-color-dark: #333333;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* 增加平滑滚动和过渡效果 */
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

body {
	background-color: #fff;
	padding-bottom: 70px;
	/* 页面加载淡入效果 */
	animation: fadeIn 0.8s ease-out;
	margin: 0 auto;
	max-width: 640px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

a {
	text-decoration: none;
	color: inherit;
	/* 增加链接点击反馈 */
	display: inline-block;
}

/* --- 头部样式 --- */
.toptou {
	margin-top: 20px;
}
.home-header{
    position: relative;
}
.header-bg{
  width:100%;
}
.header-bg img{
    width: 100%;
}
.header {
	width: 100%;
	background-size: cover;
	background-position: center center;
	color: var(--text-color-white);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.header-overlay {
      position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
	/*background-color: rgba(0, 0, 0, 0.3);*/
	padding: 15px 10px;
	height: 100%;
	/* 增加头部内容轻微上浮效果 */
	animation: slideDown 0.6s ease-out;
}

@keyframes slideDown {
	from {
		transform: translateY(-20px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.header h1 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

/* 导航按钮容器 */
.nav-buttons {
	display: flex;
	justify-content: space-around;
	padding: 0 5px 10px;
	margin-top: 15px;
}

.nav-button {
	flex-grow: 1;
	margin: 0 5px;
	padding: 8px 5px;
	border-radius: 5px;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	background-color: var(--nav-inactive-color);
	/* 导航按钮点击下沉效果 */
	transition: background-color 0.3s, transform 0.1s;
}

.nav-button:active {
	transform: scale(0.98);
}

.nav-button.active {
	background-color: var(--nav-active-color);
	/* 选中状态增加轻微阴影 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* 首页头部高度 */
.header.home-header {
	/*height: 400px;*/
}

/* 详情页和下载页头部高度 */
.header.detail-header {
	height: 150px;
}

/* 返回首页链接 */
.back-to-home {
	display: block;
	text-align: left;
	padding: 10px 15px;
	font-size: 16px;
	color: var(--text-color-dark);
	/* 增加悬停变色 */
}

.back-to-home:hover {
	color: var(--nav-active-color);
}

/* --- 内容区域样式 --- */
.content-area {
	margin: 30px;
}

/* 药品详情页标题 */
.detail-title {
	text-align: center;
	font-size: 22px;
	/* 稍微放大 */
	font-weight: bold;
	margin: 10px 0 20px;
	/* 标题轻微阴影 */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.detail-image {
	width: 100%;
	max-width: 400px;
	margin: 0 auto 20px;
	display: block;
	height: auto;
	border-radius: 8px;
	/* 略微圆角 */
	/* 图片进入动画 */
	animation: zoomIn 0.8s ease-out;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.detail-text {
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-color-dark);
	text-align: justify;
}

/* --- 轮播图样式 --- */
/* 容器：定义可见区域和总宽度 */
.carousel-container {
   
    max-width: 1200px;
    margin: 5px auto;
    overflow: hidden; /* **关键**：隐藏超出可视区域的图片 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* 轨道：包含所有图片，用于整体移动 */
.carousel-track {
    display: flex;
    /* 轨道宽度由JS计算，但初始设为足够大 */
    width: max-content; 
    /* 移除过渡效果，因为我们用JS实现动画 */
    transform: translateX(0); 
}

/* 单个图片项：设置宽度以自适应容器并显示4张图 */
.carousel-item {
    /* **关键**：每张图占据容器宽度的1/4，保证始终显示4张图 */
    box-sizing: border-box;
    padding: 5px; /* 图片间的间隔 */
	width: 100px;
}

.carousel-item img {
    /* **关键**：图片宽度100%适应父级carousel-item，实现自适应 */
width: 100%;
    display: block;
    
}

/* --- 底部浮动按钮样式 --- */
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

/* 基础重置和背景颜色 */


/* ==================================== */
/* 1. 浮动吸底容器样式 */
/* ==================================== */
.fixed-footer {
    /* **关键**: 固定定位，使其浮动在页面之上 */
    position: fixed;
    /* **关键**: 吸附在底部 */
    bottom: 0;
    /* 铺满整个宽度 */
    left: 0;
    width: 100%;
    /* 使用 Flexbox 布局两个按钮 */
    display: flex;
    justify-content: center; /* 居中显示按钮组 */
    align-items: center;
    padding: 10px 0;
    /* 模拟原图的紫色背景 */
    background-color: #551A8B; 
    /* 确保按钮在最上层 */
    z-index: 1000;
}

/* ==================================== */
/* 2. 按钮基础样式 */
/* ==================================== */
.button-link {
    /* 每个按钮占据容器宽度的一部分，并保持间距 */
    flex: 0 0 auto; 
    margin: 0 5px;
    text-decoration: none;
    cursor: pointer;
}

.button-content {
    /* 模拟原图的白色圆角背景 */
    background-color: #ffffff;
    padding: 5px 23px;
    border-radius: 5px; /* 较大的圆角 */
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* 添加过渡效果使悬停更平滑 */
    transition: transform 0.2s ease-out;
}

.button-content:hover {
    transform: translateY(-2px); /* 悬停时轻微上浮 */
}

/* 文本样式 */
.text {
    font-size: 20px;
    font-weight: bold;
    /* 模拟原图的紫红色字体 */
    color: #800080; 
    margin-right: 15px;
    white-space: nowrap;
}

/* LINE 图标样式 */
.line-icon {
    width: 55px; /* 图标大小 */
    height: 55px;
    display: block;
}

/* ==================================== */
/* 3. 右侧按钮特效 (放大缩小/脉冲) */
/* ==================================== */

/* 定义放大缩小动画的关键帧 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15); /* 放大到 115% */
    }
    100% {
        transform: scale(1);
    }
}

/* 将动画应用到右侧按钮的图标上 */
.pulsate-icon {
    /* 动画名称 | 持续时间 | 缓动函数 | 循环次数 */
    animation: pulse 1.5s ease-in-out infinite; 
    /* 确保初始状态是正常的 */
    transform: scale(1); 
}
/* --- 软件下载页面样式 --- */
.download-page .download-section {
	padding: 30px 15px;
	text-align: center;
}

.download-page .download-section h2 {
	font-size: 20px;
	margin-bottom: 25px;
	color: var(--text-color-dark);
}

.download-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 350px;
	height: 60px;
	margin: 15px auto;
	border-radius: 30px;
	color: var(--text-color-white);
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	/* 下载按钮点击和悬停特效 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s, box-shadow 0.2s;
}

.download-btn:active {
	transform: translateY(3px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.download-btn img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	
	border-radius: 50%;
	padding: 5px;
}

.download-btn.ios {
	background-color: var(--button-bg-black);
}

.download-btn.android {
	background-color: var(--button-bg-green);
}