/**
 * 图标字体样式
 * 
 * @package PreOrder
 */

/* 使用Unicode字符作为图标 */
.icon-phone::before {
    content: "📞";
}

.icon-email::before {
    content: "✉️";
}

.icon-address::before {
    content: "📍";
}

.icon-wechat::before {
    content: "💬";
}

.icon-weibo::before {
    content: "📱";
}

.icon-qq::before {
    content: "🐧";
}

.icon-arrow-up::before {
    content: "↑";
}

/* 或者使用CSS伪元素创建简单图标 */
.icon-phone {
    position: relative;
}

.icon-phone::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-phone::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 8px;
    border: 2px solid currentColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

.icon-email {
    position: relative;
}

.icon-email::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-email::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-address {
    position: relative;
}

.icon-address::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 4px 4px 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-address::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-wechat {
    position: relative;
}

.icon-wechat::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-wechat::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-weibo {
    position: relative;
}

.icon-weibo::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-qq {
    position: relative;
}

.icon-qq::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-arrow-up {
    position: relative;
}

.icon-arrow-up::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 响应式图标大小 */
@media (max-width: 768px) {
    .icon-phone::before,
    .icon-email::before,
    .icon-address::before {
        width: 10px;
        height: 10px;
    }
    
    .icon-wechat::before,
    .icon-weibo::before,
    .icon-qq::before {
        width: 14px;
        height: 10px;
    }
    
    .icon-arrow-up::before {
        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 7px;
    }
}

@media (max-width: 480px) {
    .icon-phone::before,
    .icon-email::before,
    .icon-address::before {
        width: 8px;
        height: 8px;
    }
    
    .icon-wechat::before,
    .icon-weibo::before,
    .icon-qq::before {
        width: 12px;
        height: 8px;
    }
    
    .icon-arrow-up::before {
        border-left-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 6px;
    }
}

/* ===== 主页面图标 ===== */

/* 功能特色图标 */
.icon-dashboard {
    position: relative;
}

.icon-dashboard::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-dashboard::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 
        6px 0 0 currentColor,
        12px 0 0 currentColor,
        0 6px 0 currentColor,
        6px 6px 0 currentColor,
        12px 6px 0 currentColor;
}

.icon-security {
    position: relative;
}

.icon-security::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 8px 8px 4px 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-security::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 4px 4px 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-mobile {
    position: relative;
}

.icon-mobile::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-mobile::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-support {
    position: relative;
}

.icon-support::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-support::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 用户类型图标 */
.icon-dealer {
    position: relative;
}

.icon-dealer::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-dealer::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-customer {
    position: relative;
}

.icon-customer::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-customer::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 响应式图标大小 */
@media (max-width: 768px) {
    .icon-dashboard::before,
    .icon-security::before,
    .icon-mobile::before,
    .icon-support::before,
    .icon-dealer::before,
    .icon-customer::before {
        width: 16px;
        height: 14px;
    }
    
    .icon-dashboard::after {
        width: 3px;
        height: 3px;
        box-shadow: 
            5px 0 0 currentColor,
            10px 0 0 currentColor,
            0 5px 0 currentColor,
            5px 5px 0 currentColor,
            10px 5px 0 currentColor;
    }
    
    .icon-security::after {
        width: 6px;
        height: 4px;
    }
    
    .icon-mobile::after {
        width: 4px;
        height: 6px;
    }
    
    .icon-support::before {
        border-left-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 12px;
    }
    
    .icon-support::after {
        width: 6px;
        height: 6px;
    }
    
    .icon-dealer::after,
    .icon-customer::after {
        width: 6px;
        height: 6px;
    }
    
    .icon-customer::after {
        border-left-width: 3px;
        border-right-width: 3px;
        border-top-width: 4px;
    }
}

@media (max-width: 480px) {
    .icon-dashboard::before,
    .icon-security::before,
    .icon-mobile::before,
    .icon-support::before,
    .icon-dealer::before,
    .icon-customer::before {
        width: 14px;
        height: 12px;
    }
    
    .icon-dashboard::after {
        width: 2px;
        height: 2px;
        box-shadow: 
            4px 0 0 currentColor,
            8px 0 0 currentColor,
            0 4px 0 currentColor,
            4px 4px 0 currentColor,
            8px 4px 0 currentColor;
    }
    
    .icon-security::after {
        width: 5px;
        height: 3px;
    }
    
    .icon-mobile::after {
        width: 3px;
        height: 5px;
    }
    
    .icon-support::before {
        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 10px;
    }
    
    .icon-support::after {
        width: 5px;
        height: 5px;
    }
    
    .icon-dealer::after,
    .icon-customer::after {
        width: 5px;
        height: 5px;
    }
    
    .icon-customer::after {
        border-left-width: 2px;
        border-right-width: 2px;
        border-top-width: 3px;
    }
}

/* ===== 底部便捷菜单图标 ===== */

/* 首页图标 */
.icon-home {
    position: relative;
}

.icon-home::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px 2px 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-home::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 6px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 消息图标 */
.icon-message {
    position: relative;
}

.icon-message::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-message::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 购物车图标 */
.icon-cart {
    position: relative;
}

.icon-cart::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-cart::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 用户图标 */
.icon-user {
    position: relative;
}

.icon-user::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-user::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 底部菜单图标响应式 */
@media (max-width: 768px) {
    .icon-home::before,
    .icon-message::before,
    .icon-cart::before {
        width: 14px;
        height: 10px;
    }
    
    .icon-home::after {
        border-left-width: 7px;
        border-right-width: 7px;
        border-bottom-width: 5px;
    }
    
    .icon-message::after {
        border-left-width: 3px;
        border-right-width: 3px;
        border-top-width: 3px;
    }
    
    .icon-cart::after {
        width: 5px;
        height: 5px;
    }
    
    .icon-user::before {
        width: 10px;
        height: 10px;
    }
    
    .icon-user::after {
        border-left-width: 5px;
        border-right-width: 5px;
        border-top-width: 6px;
    }
}

@media (max-width: 480px) {
    .icon-home::before,
    .icon-message::before,
    .icon-cart::before {
        width: 12px;
        height: 8px;
    }
    
    .icon-home::after {
        border-left-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 4px;
    }
    
    .icon-message::after {
        border-left-width: 2px;
        border-right-width: 2px;
        border-top-width: 2px;
    }
    
    .icon-cart::after {
        width: 4px;
        height: 4px;
    }
    
    .icon-user::before {
        width: 8px;
        height: 8px;
    }
    
    .icon-user::after {
        border-left-width: 4px;
        border-right-width: 4px;
        border-top-width: 5px;
    }
}