/**
 * Font Awesome 7 中文镜像站 - 组件样式
 */

/* 按钮 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--fa-blue);
    color: var(--white);
    border-color: var(--fa-blue);
}

.btn-primary:hover {
    background: var(--fa-dk-blue);
    border-color: var(--fa-dk-blue);
    color: var(--white);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}

.btn-outline {
    background: transparent;
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

/* 徽章 */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.badge-new {
    background: var(--red);
    color: var(--white);
}

.badge-free {
    background: var(--green);
    color: var(--white);
}

.badge-pro {
    background: var(--purple);
    color: var(--white);
}

/* 代码片段 */
.code-snippet {
    background: var(--gray-900);
    color: var(--gray-100);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-x: auto;
    margin: var(--space-3) 0;
}

/* 复制按钮 */
.btn-copy {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.btn-copy:hover {
    background: var(--fa-blue);
    color: var(--white);
    border-color: var(--fa-blue);
}

.btn-copy.copied {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}