/* 贵金属珠宝图标系统 */

/* ==================== 通用图标样式 ==================== */
.icon-svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #d4af37;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.icon-svg.active {
    fill: #d4af37;
    stroke: #d4af37;
}

.icon-svg.large {
    width: 48px;
    height: 48px;
}

.icon-svg.xlarge {
    width: 80px;
    height: 80px;
    stroke-width: 1.5;
}

/* ==================== 贵金属图标 ==================== */

/* 黄金图标 - 金色光环 */
.metal-icon-gold {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8962f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.metal-icon-gold svg {
    stroke: url(#goldGradient);
    fill: url(#goldGradientLight);
}

/* 白银图标 - 银白色 */
.metal-icon-silver svg {
    stroke: url(#silverGradient);
    fill: url(#silverGradientLight);
}

/* 铂金图标 - 亮白色 */
.metal-icon-platinum svg {
    stroke: url(#platinumGradient);
    fill: url(#platinumGradientLight);
}

/* 钯金图标 - 灰白金属 */
.metal-icon-palladium svg {
    stroke: url(#palladiumGradient);
    fill: url(#palladiumGradientLight);
}

/* ==================== 导航图标 ==================== */

/* 金价图标 - 黄金戒指/环状 */
.nav-icon-price .icon-svg {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
}

/* 回收测算图标 - 计算器 */
.nav-icon-calculate .icon-svg {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
}

/* 快讯图标 - 新闻/资讯 */
.nav-icon-news .icon-svg {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
}

/* 客服图标 - 服务/客服 */
.nav-icon-service .icon-svg {
    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
}

/* 底部导航激活状态 */
.bottom-nav .nav-item.active .icon-svg {
    fill: #d4af37;
    stroke: #d4af37;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5));
}

/* ==================== 动画效果 ==================== */

/* 悬停发光效果 */
.icon-wrapper:hover .icon-svg {
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
    transform: scale(1.05);
}

/* 旋转动画（用于加载状态） */
@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.icon-spin {
    animation: iconSpin 2s linear infinite;
}

/* 脉冲动画（用于强调） */
@keyframes iconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}

.icon-pulse {
    animation: iconPulse 1.5s ease-in-out infinite;
}

/* ==================== 渐变定义 ==================== */

/* 金色渐变 */
#goldGradient stop:first-child {
    stop-color: #ffd700;
}

#goldGradient stop:last-child {
    stop-color: #b8962f;
}

#goldGradientLight stop:first-child {
    stop-color: rgba(255, 215, 0, 0.3);
}

#goldGradientLight stop:last-child {
    stop-color: rgba(184, 150, 47, 0.1);
}

/* 银色渐变 */
#silverGradient stop:first-child {
    stop-color: #e8e8e8;
}

#silverGradient stop:last-child {
    stop-color: #c0c0c0;
}

#silverGradientLight stop:first-child {
    stop-color: rgba(232, 232, 232, 0.3);
}

#silverGradientLight stop:last-child {
    stop-color: rgba(192, 192, 192, 0.1);
}

/* 铂金渐变 */
#platinumGradient stop:first-child {
    stop-color: #f5f5f5;
}

#platinumGradient stop:last-child {
    stop-color: #e5e4e2;
}

#platinumGradientLight stop:first-child {
    stop-color: rgba(245, 245, 245, 0.3);
}

#platinumGradientLight stop:last-child {
    stop-color: rgba(229, 228, 226, 0.1);
}

/* 钯金渐变 */
#palladiumGradient stop:first-child {
    stop-color: #dcdcdc;
}

#palladiumGradient stop:last-child {
    stop-color: #a9a9a9;
}

#palladiumGradientLight stop:first-child {
    stop-color: rgba(220, 220, 220, 0.3);
}

#palladiumGradientLight stop:last-child {
    stop-color: rgba(169, 169, 169, 0.1);
}