/* ========== 全局丝滑体验样式（Vant 4版） ========== */

/* 淡入上浮 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    animation: fadeInUp 0.4s ease-out both;
}
.fade-in-up:nth-child(1) { animation-delay: 0.05s; }
.fade-in-up:nth-child(2) { animation-delay: 0.1s; }
.fade-in-up:nth-child(3) { animation-delay: 0.15s; }
.fade-in-up:nth-child(4) { animation-delay: 0.2s; }
.fade-in-up:nth-child(5) { animation-delay: 0.25s; }
.fade-in-up:nth-child(6) { animation-delay: 0.3s; }
.fade-in-up:nth-child(7) { animation-delay: 0.05s; }
.fade-in-up:nth-child(8) { animation-delay: 0.1s; }
.fade-in-up:nth-child(9) { animation-delay: 0.15s; }
.fade-in-up:nth-child(10) { animation-delay: 0.2s; }

/* 缩放弹出 */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scaleIn 0.25s ease-out; }

/* 按钮点击反馈 */
button:active,
.van-button:active,
.clickable:active, [data-clickable]:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s;
}

/* skeleton骨架屏闪烁 */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton-img, .skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

/* 底部导航过渡 */
.bottom-nav {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s;
    will-change: transform;
}
.bottom-nav.hidden { transform: translateY(100%); opacity: 0; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 0; height: 0; }

/* 卡片悬浮效果 */
.product-card, .course-card, .job-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover, .course-card:hover, .job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ========== 图标美化 ========== */
/* 导航栏图标 */
.nav-btn .el-icon { font-size: 18px; color: #fff; }
.nav-btn .el-icon svg { width: 18px; height: 18px; }

/* 底部导航图标 */
.nav-icon .el-icon { font-size: 20px; }
.nav-icon .el-icon svg { width: 20px; height: 20px; vertical-align: middle; }

/* 空状态图标 */
.empty-icon .el-icon { font-size: 48px; color: #c0c4cc; }
.empty-icon .el-icon svg { width: 48px; height: 48px; }

/* 表单内图标 */
.form-item .el-icon, .el-form-item .el-icon { font-size: 16px; color: #909399; margin-right: 4px; }

/* 详情页图标行 */
.info-item .el-icon { font-size: 14px; color: #909399; margin-right: 4px; vertical-align: -0.15em; }
.info-item .el-icon svg { width: 14px; height: 14px; }

/* 章节标题图标 */
.section-title .el-icon, .card-title .el-icon { font-size: 18px; margin-right: 6px; vertical-align: -0.25em; }
.section-title .el-icon svg, .card-title .el-icon svg { width: 18px; height: 18px; }

/* 操作按钮图标 */
.action-btn .el-icon { font-size: 14px; margin-right: 3px; }

/* 支付方式图标 */
.method-icon .el-icon { font-size: 24px; }
.method-icon .el-icon svg { width: 24px; height: 24px; }

/* 网格菜单图标 */
.grid-icon .el-icon { font-size: 24px; }
.grid-icon .el-icon svg { width: 24px; height: 24px; }

/* 按钮内图标 */
.el-button .el-icon { font-size: 14px; margin-right: 4px; }

/* 搜索栏图标 */
.search-bar .el-icon { font-size: 16px; color: #909399; }

/* 图标颜色工具类 */
.icon-blue { color: #409eff !important; }
.icon-green { color: #67c23a !important; }
.icon-orange { color: #e6a23c !important; }
.icon-red { color: #f56c6c !important; }
.icon-gray { color: #909399 !important; }
.icon-white { color: #fff !important; }

/* ---------- 统一弹窗样式（custom-dialog） ---------- */
/* 注意：custom-dialog 与 el-dialog 在同一元素上，必须用 .custom-dialog.el-dialog 连写选择器 */
.custom-dialog.el-dialog {
    border-radius: 16px;
    width: 88% !important;
    max-width: 660px;
    margin-top: 15vh !important;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
.custom-dialog .el-dialog__header {
    padding: 18px 20px 12px;
    margin-right: 0;
    border-bottom: 1px solid #f2f3f5;
}
.custom-dialog .el-dialog__title {
    font-weight: 700;
    font-size: 16px;
    color: #303133;
}
.custom-dialog .el-dialog__headerbtn {
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    font-size: 16px;
}
.custom-dialog .el-dialog__body {
    padding: 16px 20px 20px;
    color: #303133;
    font-size: 14px;
    line-height: 1.6;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.custom-dialog .el-dialog__footer {
    padding: 12px 20px 20px;
    border-top: 1px solid #f2f3f5;
}
.custom-dialog .el-dialog__footer .el-button {
    border-radius: 22px;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    min-width: 96px;
}
/* 内容区表单间距 */
.custom-dialog .el-form-item {
    margin-bottom: 16px;
}
.custom-dialog .el-form-item:last-child {
    margin-bottom: 0;
}
.custom-dialog .el-input__wrapper {
    border-radius: 8px;
}