/* ============================================
   选号网 - 静态 SVG 图标系统
   替代 Font Awesome CDN 依赖
   使用 CSS mask 实现 SVG 着色
   ============================================ */

/* 基础图标 - 使用 CSS mask 从 SVG 加载，通过 background-color 控制颜色 */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* 各图标定义 - 使用 mask-image 加载 SVG */
.icon--gem            { mask-image: url("../icons/gem.svg"); -webkit-mask-image: url("../icons/gem.svg"); }
.icon--crown          { mask-image: url("../icons/crown.svg"); -webkit-mask-image: url("../icons/crown.svg"); }
.icon--heart          { mask-image: url("../icons/heart.svg"); -webkit-mask-image: url("../icons/heart.svg"); }
.icon--heart-filled   { mask-image: url("../icons/heart-filled.svg"); -webkit-mask-image: url("../icons/heart-filled.svg"); }
.icon--search         { mask-image: url("../icons/search.svg"); -webkit-mask-image: url("../icons/search.svg"); }
.icon--phone          { mask-image: url("../icons/phone.svg"); -webkit-mask-image: url("../icons/phone.svg"); }
.icon--user           { mask-image: url("../icons/user.svg"); -webkit-mask-image: url("../icons/user.svg"); }
.icon--question-circle { mask-image: url("../icons/question-circle.svg"); -webkit-mask-image: url("../icons/question-circle.svg"); }
.icon--mobile-alt     { mask-image: url("../icons/mobile-alt.svg"); -webkit-mask-image: url("../icons/mobile-alt.svg"); }
.icon--qrcode         { mask-image: url("../icons/qrcode.svg"); -webkit-mask-image: url("../icons/qrcode.svg"); }
.icon--car            { mask-image: url("../icons/car.svg"); -webkit-mask-image: url("../icons/car.svg"); }
.icon--landmark       { mask-image: url("../icons/landmark.svg"); -webkit-mask-image: url("../icons/landmark.svg"); }
.icon--coins          { mask-image: url("../icons/coins.svg"); -webkit-mask-image: url("../icons/coins.svg"); }
.icon--sort-amount-down { mask-image: url("../icons/sort-amount-down.svg"); -webkit-mask-image: url("../icons/sort-amount-down.svg"); }
.icon--sync-alt       { mask-image: url("../icons/sync-alt.svg"); -webkit-mask-image: url("../icons/sync-alt.svg"); }
.icon--envelope       { mask-image: url("../icons/envelope.svg"); -webkit-mask-image: url("../icons/envelope.svg"); }
.icon--tag            { mask-image: url("../icons/tag.svg"); -webkit-mask-image: url("../icons/tag.svg"); }
.icon--hashtag        { mask-image: url("../icons/hashtag.svg"); -webkit-mask-image: url("../icons/hashtag.svg"); }
.icon--map-marker     { mask-image: url("../icons/map-marker.svg"); -webkit-mask-image: url("../icons/map-marker.svg"); }
.icon--eye            { mask-image: url("../icons/eye.svg"); -webkit-mask-image: url("../icons/eye.svg"); }
.icon--bolt           { mask-image: url("../icons/bolt.svg"); -webkit-mask-image: url("../icons/bolt.svg"); }
.icon--comment-dots   { mask-image: url("../icons/comment-dots.svg"); -webkit-mask-image: url("../icons/comment-dots.svg"); }
.icon--shield-alt     { mask-image: url("../icons/shield-alt.svg"); -webkit-mask-image: url("../icons/shield-alt.svg"); }
.icon--user-check     { mask-image: url("../icons/user-check.svg"); -webkit-mask-image: url("../icons/user-check.svg"); }
.icon--headset        { mask-image: url("../icons/headset.svg"); -webkit-mask-image: url("../icons/headset.svg"); }
.icon--link           { mask-image: url("../icons/link.svg"); -webkit-mask-image: url("../icons/link.svg"); }
.icon--weibo          { mask-image: url("../icons/weibo.svg"); -webkit-mask-image: url("../icons/weibo.svg"); }
.icon--weixin         { mask-image: url("../icons/weixin.svg"); -webkit-mask-image: url("../icons/weixin.svg"); }
.icon--qq             { mask-image: url("../icons/qq.svg"); -webkit-mask-image: url("../icons/qq.svg"); }
.icon--exclamation-circle { mask-image: url("../icons/exclamation-circle.svg"); -webkit-mask-image: url("../icons/exclamation-circle.svg"); }
.icon--chevron-left   { mask-image: url("../icons/chevron-left.svg"); -webkit-mask-image: url("../icons/chevron-left.svg"); }
.icon--chevron-right  { mask-image: url("../icons/chevron-right.svg"); -webkit-mask-image: url("../icons/chevron-right.svg"); }
.icon--redo           { mask-image: url("../icons/redo.svg"); -webkit-mask-image: url("../icons/redo.svg"); }
.icon--star           { mask-image: url("../icons/star.svg"); -webkit-mask-image: url("../icons/star.svg"); }
.icon--globe          { mask-image: url("../icons/globe.svg"); -webkit-mask-image: url("../icons/globe.svg"); }
.icon--signal         { mask-image: url("../icons/signal.svg"); -webkit-mask-image: url("../icons/signal.svg"); }
.icon--layer-group    { mask-image: url("../icons/layer-group.svg"); -webkit-mask-image: url("../icons/layer-group.svg"); }
.icon--check-circle   { mask-image: url("../icons/check-circle.svg"); -webkit-mask-image: url("../icons/check-circle.svg"); }
.icon--times-circle   { mask-image: url("../icons/times-circle.svg"); -webkit-mask-image: url("../icons/times-circle.svg"); }
.icon--info-circle    { mask-image: url("../icons/info-circle.svg"); -webkit-mask-image: url("../icons/info-circle.svg"); }

/* 图标尺寸预设 */
.icon-sm { font-size: 0.75rem; }
.icon-md { font-size: 1rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.5rem; }
.icon-2x { font-size: 2rem; }
.icon-3x { font-size: 3rem; }

/* 导航 Logo 图标 */
.nav-logo .icon { font-size: 1.6rem; color: var(--primary); }

/* 分类导航图标 */
.cat-item .icon { font-size: 1.1rem; }

/* 规则卡片图标 */
.rule-card .icon { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }

/* 详情页预览头部图标 */
.preview-header .icon { color: var(--primary); }

/* 详情页按钮内图标 */
.detail-actions .btn .icon { font-size: 1rem; }

/* 详情页特征项图标 */
.feature-item .icon {
    color: var(--primary);
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

/* 安全条图标 */
.safety-item .icon { color: var(--success); font-size: 1rem; }

/* 分享按钮图标 */
.share-btn .icon { font-size: 0.9rem; }

/* Toast 图标 */
.toast .icon { font-size: 1rem; margin-right: 4px; }

/* 古董卡片图标 */
.antique-card .antique-icon { font-size: 3rem; color: #c9a84c; }

/* 顶栏图标 */
.top-bar .icon { font-size: 0.85rem; }

/* 按钮内图标 */
.btn .icon { font-size: 0.9rem; }

/* 分页按钮内图标 */
.pagination button .icon { font-size: 0.8rem; }

/* 搜索框按钮图标 */
.search-box button .icon { font-size: 1rem; }

/* 重置按钮图标 */
.filter-sidebar .btn .icon { font-size: 0.85rem; }

/* 页脚图标 */
.footer-col a .icon { font-size: 0.85rem; }
.footer-logo .icon { font-size: 1.3rem; color: var(--primary); }

/* 详情页收藏按钮图标 */
.btn-fav .icon { font-size: 1rem; }
.btn-fav.favorited .icon { color: var(--danger); }

/* 面包屑 */
.breadcrumb-nav .icon { font-size: 0.85rem; }

/* 页面 Banner 图标 */
.page-banner h1 .icon { font-size: 1.4rem; color: var(--primary); }

/* 搜索按钮中图标（白色） */
.search-box button .icon { color: #fff; }

/* VIP按钮中图标 */
.btn-vip .icon { color: #fff; }

/* 主按钮中图标 */
.btn-primary .icon { color: #fff; }