/**
 * 做装分享系统 - 特定样式
 * 复用大部分 share-card.css、share-form.css 样式
 */

/* ========== 表单两列布局 ========== */
.form-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: var(--spacing-md);
}

.form-column-left,
.form-column-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (max-width: 968px) {
    .form-two-columns {
        grid-template-columns: 1fr;
    }
}

/* ========== 做装数据预览区域 ========== */
.crafting-data-preview {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-bottom: var(--spacing-md);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.crafting-data-preview p {
    margin: 0;
}

/* ========== 材料徽章样式 ========== */
.share-card__meta-materials {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========== 元数据徽章换行支持 ========== */
.share-card__meta-left {
    flex-wrap: wrap !important;
}

.share-card__meta-badge {
    white-space: nowrap;
}

/* ========== 徽章区域样式 ========== */
.share-card__badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

/* ========== 修复个人主页和购买链接样式 ========== */
.share-card__homepage {
    display: flex;
    align-items: center;
}

.share-card__homepage a {
    display: inline !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ========== 购买链接行（包含成本和链接） ========== */
.share-card__purchase-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--spacing-sm);
}

/* ========== 成本显示样式 ========== */
.share-card__cost {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    width: fit-content;
}

.share-card__cost-amount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-orange);
}

.share-card__cost-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ========== 复选框组样式 ========== */
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.checkbox-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.2s;
    user-select: none;
}

.checkbox-group label:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.checkbox-group input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.checkbox-group input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-group label:has(input:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkbox-group label:has(input:checked) {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* ========== 筛选栏优化 ========== */
.filter-bar {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-bar__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.filter-bar__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-bar__btn {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.filter-bar__btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

.filter-bar__btn--active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* ========== 做装卡片单列布局 ========== */
.share-list {
    grid-template-columns: 1fr !important;
}

/* ========== 做装卡片图片高度 ========== */
.share-card__image-container {
    height: 800px !important;
}

/* ========== 响应式布局 ========== */
@media (max-width: 768px) {
    .checkbox-group {
        gap: var(--spacing-sm);
    }
    
    .checkbox-group label {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .filter-bar__tabs {
        gap: 0.4rem;
    }
    
    .filter-bar__btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}