/* ========================================
   Discuz! X3.5 川渝好门户图标字体
   ======================================== */

/* ========== 图标字体定义 ========== */
@font-face {
    font-family: 'chuanyu-icons';
    src: url('static/fonts/chuanyu-icons.woff2') format('woff2'),
         url('static/fonts/chuanyu-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ========== 图标类 ========== */
.icon::before {
    font-family: "chuanyu-icons" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 通用图标 */
.icon-star::before { content: "★"; }
.icon-fire::before { content: "🔥"; }
.icon-hotpot::before { content: "🍲"; }
.icon-building::before { content: "🏢"; }
.icon-car::before { content: "🚗"; }
.icon-service::before { content: "⚙️"; }
.icon-classified::before { content: "📋"; }
.icon-camera::before { content: "📷"; }
.icon-convenience::before { content: "🛠️"; }
.icon-up::before { content: "↑"; }
.icon-wechat::before { content: "💬"; }
.icon-app::before { content: "📱"; }
.icon-arrow::before { content: "→"; }
.icon-edit::before { content: "✏️"; }
.icon-folder::before { content: "📁"; }
.icon-clock::before { content: "⏰"; }
.icon-user::before { content: "👤"; }
.icon-location::before { content: "📍"; }

/* 快捷导航图标 */
.icon-house::before { content: "🏠"; }
.icon-job::before { content: "💼"; }
.icon-search::before { content: "🔍"; }
.icon-market::before { content: "🏪"; }
.icon-wedding::before { content: "💒"; }
.icon-social::before { content: "🤝"; }
.icon-baby::before { content: "👶"; }
.icon-travel::before { content: "✈️"; }
.icon-rent::before { content: "🔑"; }
.icon-home::before { content: "🏡"; }
.icon-food::before { content: "🍜"; }

/* 便民服务图标 */
.icon-weather::before { content: "🌤️"; }
.icon-map::before { content: "🗺️"; }
.icon-violation::before { content: "🚦"; }
.icon-utility::before { content: "💡"; }
.icon-bus::before { content: "🚌"; }
.icon-flight::before { content: "✈️"; }
.icon-express::before { content: "📦"; }
.icon-food-delivery::before { content: "🍱"; }

/* ========== 图标大小调整 ========== */
.icon-sm { font-size: 16px; }
.icon-md { font-size: 20px; }
.icon-lg { font-size: 24px; }
.icon-xl { font-size: 32px; }

/* ========== 图标颜色 ========== */
.icon-red { color: #e53935; }
.icon-blue { color: #1976d2; }
.icon-green { color: #388e3c; }
.icon-yellow { color: #fbc02d; }
.icon-gray { color: #666; }

/* ========== 动画效果 ========== */
.icon-spin {
    animation: icon-spin 2s infinite linear;
}

@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.icon-bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ========== 徽章图标 ========== */
.badge-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    margin-right: 5px;
    font-size: 12px;
}

.badge-hot .badge-icon::before { content: "🔥"; }
.badge-new .badge-icon::before { content: "✨"; }
.badge-recommend .badge-icon::before { content: "⭐"; }
.badge-live .badge-icon::before { content: "🔴"; }

/* ========== 响应式图标 ========== */
@media screen and (max-width: 768px) {
    .icon-lg, .icon-xl {
        font-size: 20px;
    }
    
    .shortcut-area .klp_cyt01ico span {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}

/* ========== 移动端优化 ========== */
@media (hover: none) and (pointer: coarse) {
    .icon:active {
        transform: scale(0.9);
    }
}

/* ========== 性能优化 - 减少重绘 ========== */
.icon {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ========== 暗黑模式支持 ========== */
@media (prefers-color-scheme: dark) {
    .icon-spin, .icon-pulse, .icon-bounce {
        filter: brightness(0.9);
    }
}