/**
 * 爱心捐赠页面样式文件（style.css）
 * 核心设计思路：
 * 1. 视觉风格：简约清新+轻质感（毛玻璃卡片、渐变、圆角），符合公益捐赠的温馨氛围
 * 2. 交互体验：按钮hover/active反馈、输入框聚焦高亮、响应式适配手机端
 * 3. 配色逻辑：主色调蓝色（信任/专业）、成功色绿色、错误色红色，符合用户视觉认知
 * 4. 布局适配：PC端居中固定宽度，移动端自适应，保证多设备体验一致
 */

/* ========== 全局样式重置 ========== */
/* 消除不同浏览器的默认样式差异，统一基础样式 */
* {
    margin: 0;                  /* 清除默认外边距 */
    padding: 0;                 /* 清除默认内边距 */
    box-sizing: border-box;     /* 统一盒模型：宽高包含内边距和边框，避免布局错乱 */
    /* 统一字体：优先微软雅黑/苹方，兜底无衬线字体，保证中文显示美观 */
    font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
}

/* 页面主体样式：全局背景+居中布局 */
body {
    /* 135度线性渐变背景：浅灰→浅蓝，营造清新柔和的视觉氛围 */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;          /* 最小高度占满视口，避免内容不足时背景断层 */
    display: flex;              /* Flex布局：实现内容水平+垂直居中 */
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    padding: 20px;              /* 页面内边距：避免内容贴边，适配小屏 */
}

/* ========== 容器适配：响应式宽度控制 ========== */
.donate-container {
    width: 100%;                /* 移动端占满宽度 */
    max-width: 500px;           /* PC端最大宽度500px，避免过宽影响阅读 */
}

/* ========== 核心卡片样式：毛玻璃视觉效果 ========== */
.donate-card {
    background: #fff;                       /* 卡片白色背景 */
    border-radius: 16px;                    /* 大圆角：柔和视觉，符合现代设计 */
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1); /* 轻阴影：提升卡片层次感 */
    padding: 30px;                          /* 卡片内边距：内容与边框间距 */
    /* 半透明白色边框：配合阴影营造轻微毛玻璃效果，提升质感 */
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ========== 页面头部样式 ========== */
.donate-header {
    text-align: center;         /* 文字居中：突出标题 */
    margin-bottom: 30px;        /* 底部间距：与下方内容分隔 */
}
.donate-header h1 {
    color: #2c3e50;             /* 深灰蓝色：标题醒目且不刺眼 */
    font-size: 28px;            /* 标题字号 */
    margin-bottom: 10px;        /* 与副标题间距 */
}
.donate-header p {
    color: #7f8c8d;             /* 浅灰色：副标题弱化，突出标题 */
    font-size: 16px;            /* 副标题字号 */
}

/* ========== 错误提示样式：警示性视觉 ========== */
.error-alert {
    background: #fee;           /* 浅红色背景：轻微警示，不刺眼 */
    color: #e74c3c;             /* 鲜红色文字：明确错误提示 */
    padding: 12px;              /* 内边距：文字与边框间距 */
    border-radius: 8px;         /* 圆角：与卡片风格统一 */
    margin-bottom: 20px;        /* 底部间距：与下方内容分隔 */
    text-align: center;         /* 文字居中：醒目易读 */
}

/* ========== 金额选择区域样式 ========== */
.amount-section {
    margin-bottom: 30px;        /* 底部间距：与支付方式区域分隔 */
}
.amount-section h3 {
    color: #34495e;             /* 深灰色：小标题清晰易读 */
    font-size: 18px;            /* 小标题字号 */
    margin-bottom: 15px;        /* 与金额按钮间距 */
}
.amount-options {
    display: flex;              /* Flex布局：按钮横向排列 */
    flex-wrap: wrap;            /* 自动换行：适配小屏，避免按钮溢出 */
    gap: 10px;                  /* 按钮间距：均匀分布 */
    margin-bottom: 20px;        /* 底部间距：与自定义金额输入框分隔 */
}
.amount-btn {
    background: #f8f9fa;        /* 浅灰色背景：默认状态 */
    border: 1px solid #e9ecef;  /* 浅灰色边框：与背景区分 */
    border-radius: 8px;         /* 圆角：统一风格 */
    padding: 10px 20px;         /* 内边距：按钮大小适中 */
    font-size: 16px;            /* 按钮文字大小 */
    color: #2c3e50;             /* 文字颜色：清晰易读 */
    cursor: pointer;            /* 鼠标指针：提示可点击 */
    transition: all 0.3s ease;  /* 过渡动画：hover/active效果平滑 */
}
/* 按钮hover（鼠标悬停）/active（选中）状态：蓝色背景+白色文字，突出选中状态 */
.amount-btn:hover, .amount-btn.active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}
/* 自定义金额输入框样式 */
.custom-amount input {
    width: 100%;                /* 占满父容器宽度 */
    padding: 12px 15px;         /* 内边距：输入舒适 */
    border: 1px solid #e9ecef;  /* 浅灰色边框：默认状态 */
    border-radius: 8px;         /* 圆角：统一风格 */
    font-size: 16px;            /* 输入文字大小 */
    outline: none;              /* 清除默认聚焦轮廓 */
}
/* 输入框聚焦状态：蓝色边框，提示当前激活 */
.custom-amount input:focus {
    border-color: #3498db;
}

/* ========== 支付方式选择区域样式 ========== */
.pay-type-section {
    margin-bottom: 30px;        /* 底部间距：与提交按钮分隔 */
}
.pay-type-section h3 {
    color: #34495e;             /* 深灰色：小标题清晰 */
    font-size: 18px;            /* 小标题字号 */
    margin-bottom: 15px;        /* 与支付方式选项间距 */
}
.pay-type-options {
    display: flex;              /* Flex布局：选项横向排列 */
    gap: 20px;                  /* 选项间距：避免拥挤 */
    justify-content: center;    /* 水平居中：视觉平衡 */
}
.pay-type-label {
    display: flex;              /* Flex布局：单选框+文字对齐 */
    cursor: pointer;            /* 鼠标指针：提示可点击 */
    flex-direction: row;        /* 横向排列（默认）：单选框在前，文字在后 */
    align-items: center;        /* 垂直居中：单选框与文字对齐 */
    justify-content: center;    /* 水平居中：选项内内容对齐 */
}
/* 支付方式文字样式：最后一个span（文字部分） */
.pay-type-label span:last-child {
    padding-left: 4px;          /* 与单选框间距 */
    color: #7f8c8d;             /* 浅灰色：弱化文字，突出选择状态 */
    font-size: 14px;            /* 文字大小：略小，不抢焦点 */
}

/* ========== 按钮通用样式 ========== */
.btn {
    width: 100%;                /* 占满父容器宽度：突出按钮 */
    padding: 14px;              /* 内边距：按钮大小适中，点击区域足够 */
    border-radius: 8px;         /* 圆角：统一风格 */
    font-size: 18px;            /* 按钮文字大小：醒目 */
    font-weight: 600;           /* 文字加粗：突出按钮 */
    cursor: pointer;            /* 鼠标指针：提示可点击 */
    border: none;               /* 清除默认边框 */
    transition: all 0.3s ease;  /* 过渡动画：hover效果平滑 */
}
/* 确认捐赠按钮：主色调蓝色，信任/专业 */
.donate-btn {
    background: #3498db;
    color: #fff;
}
/* 确认捐赠按钮hover状态：加深蓝色，反馈交互 */
.donate-btn:hover {
    background: #2980b9;
}
/* 立即支付按钮：绿色，代表支付/成功 */
.pay-btn {
    background: #2ecc71;
    color: #fff;
}
/* 立即支付按钮hover状态：加深绿色，反馈交互 */
.pay-btn:hover {
    background: #27ae60;
}

/* ========== 支付跳转提示样式 ========== */
.pay-tips {
    text-align: center;         /* 文字居中：提示信息醒目 */
    margin-bottom: 20px;        /* 底部间距：与按钮分隔 */
}
.pay-tips p {
    color: #7f8c8d;             /* 浅灰色：弱化提示，不抢焦点 */
    margin-bottom: 15px;        /* 行间距：清晰易读 */
}

/* ========== 页面底部样式 ========== */
.donate-footer {
    text-align: center;         /* 文字居中：底部说明 */
    margin-top: 30px;           /* 顶部间距：与上方内容分隔 */
    padding-top: 20px;          /* 顶部内边距：与分割线间距 */
    border-top: 1px solid #e9ecef; /* 顶部边框：分隔底部与主体 */
}
.donate-footer p {
    color: #7f8c8d;             /* 浅灰色：弱化说明文字 */
    font-size: 14px;            /* 文字大小：略小，不抢焦点 */
}

/* ========== 支付成功提示样式：成功视觉反馈 ========== */
.success-alert {
    /* 135度线性渐变：浅绿→更浅绿，营造成功/温馨氛围 */
    background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
    color: #10b981;             /* 绿色文字：成功提示 */
    padding: 20px;              /* 内边距：内容与边框间距 */
    border-radius: 12px;        /* 圆角：统一风格 */
    margin-bottom: 25px;        /* 底部间距：与下方内容分隔 */
    text-align: center;         /* 文字居中：醒目易读 */
    border: 1px solid #d1fae5;  /* 浅绿色边框：强化成功视觉 */
    /* 轻阴影：提升层次感，突出成功提示 */
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}
.success-alert h2 {
    margin-bottom: 10px;        /* 与下方文字间距 */
    font-size: 22px;            /* 标题字号：醒目 */
}
.success-alert p {
    margin: 5px 0;              /* 行间距：清晰易读 */
    font-size: 16px;            /* 文字大小：适中 */
    color: #059669;             /* 深绿色文字：比标题略深，层次分明 */
}
/* 返回捐赠按钮样式 */
.success-alert .btn-back {
    display: inline-block;      /* 行内块：可设置宽高/内边距 */
    margin-top: 15px;           /* 顶部间距：与上方文字分隔 */
    padding: 8px 20px;          /* 内边距：按钮大小适中 */
    background: #10b981;        /* 绿色背景：与成功提示配色统一 */
    color: #fff;                /* 白色文字：对比明显 */
    border-radius: 8px;         /* 圆角：统一风格 */
    text-decoration: none;      /* 清除默认下划线 */
    font-size: 14px;            /* 文字大小：略小，不抢焦点 */
    transition: background 0.3s;/* 过渡动画：hover效果平滑 */
}
/* 返回按钮hover状态：加深绿色，反馈交互 */
.success-alert .btn-back:hover {
    background: #059669;
}

/* ========== 响应式适配：手机端（屏幕≤480px） ========== */
@media (max-width: 480px) {
    .donate-card { padding: 20px; }          /* 减小卡片内边距：适配小屏 */
    .donate-header h1 { font-size: 24px; }  /* 减小标题字号：避免溢出 */
    .amount-btn { padding: 8px 16px; font-size: 14px; } /* 减小金额按钮大小 */
    .pay-type-options { flex-wrap: wrap; gap: 15px; } /* 支付方式选项自动换行，减小间距 */
}