/* 会员功能相关样式 */

/**
 * 会员模块样式
 */

/* 会员图标样式 */
.member-icon {
    color: #F59E0B; /* 黄色 */
    margin-right: 0.25rem;
}

/* 会员标签样式 */
.member-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #B45309;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .member-badge {
    background: linear-gradient(135deg, #92400E, #B45309);
    color: #FEF3C7;
}

/* 会员按钮样式 */
.membership-button {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.membership-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.membership-button:active {
    transform: translateY(0);
}

/* 普通用户会员按钮样式 */
.membership-button-normal {
    background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
    color: #374151;
}

.dark .membership-button-normal {
    background: linear-gradient(135deg, #4B5563, #374151);
    color: #E5E7EB;
}

/* 会员模态框样式 */
.membership-modal {
    border-radius: 0.5rem;
    overflow: hidden;
}

.membership-modal-header {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
    padding: 1rem;
    text-align: center;
}

.membership-plan {
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.membership-plan:hover {
    border-color: #F59E0B;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.1);
    transform: translateY(-2px);
}

.membership-plan.selected {
    border-color: #F59E0B;
    background-color: rgba(245, 158, 11, 0.05);
}

.dark .membership-plan {
    border-color: #4B5563;
}

.dark .membership-plan:hover,
.dark .membership-plan.selected {
    border-color: #F59E0B;
    background-color: rgba(245, 158, 11, 0.1);
}

/* 会员卡片上的徽章 */
.plan-badge {
    background-color: #F59E0B;
    color: white;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    position: absolute;
    top: -0.5rem;
    right: 1rem;
}

/* 会员价格标签 */
.plan-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #F59E0B;
}

.dark .plan-price {
    color: #FBBF24;
}

/* 会员权限提示样式 */
.membership-required-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.125rem 0.375rem;
    background-color: #f3f4f6;
    color: #9ca3af;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.dark .membership-required-badge {
    background-color: #374151;
    color: #9ca3af;
}

.membership-required-badge svg {
    margin-right: 0.25rem;
    width: 0.875rem;
    height: 0.875rem;
}

/* 会员模态框中的价格标签 */
.price-tag {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #fbbf24, #f59e0b);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark .price-tag {
    background: linear-gradient(to right, #d97706, #b45309);
}

.price-tag::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #f59e0b;
}

.dark .price-tag::after {
    border-left-color: #b45309;
}