/**
 * WooCommerce Product Variations Styling
 * 优化产品变体选择器（SKU选项卡）样式
 */

/* 变体表单容器 */
.variations_form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.variations_form .woocommerce-variation-add-to-cart {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 变体选择表格 */
.variations {
    width: 100%;
    margin-bottom: 1.5rem;
    border: none;
}

.variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
}

.variations td,
.variations th {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

/* 变体标签 */
.variations label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 变体选择器下拉框 */
.variations select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
    border: 2px solid hsl(var(--border));
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.variations select:hover {
    border-color: hsl(var(--primary));
}

.variations select:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}

/* 重置链接 */
.reset_variations {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.reset_variations:hover {
    color: hsl(var(--primary));
}

/* 变体价格显示 */
.single_variation_wrap {
    margin-bottom: 1.5rem;
    display: block !important;
    visibility: visible !important;
}

.single_variation {
    padding: 1rem;
    background-color: hsl(var(--muted) / 0.3);
    border-radius: 4px;
    margin-bottom: 1rem;
    display: block !important;
}

.woocommerce-variation-price {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 1rem;
}

.single_variation .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
    display: block !important;
}

.woocommerce-variation-price .price {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: hsl(var(--primary)) !important;
    display: block !important;
}

.single_variation .woocommerce-variation-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

.single_variation .woocommerce-variation-availability {
    margin-top: 0.5rem;
}

.single_variation .stock {
    font-size: 0.875rem;
    font-weight: 600;
}

.single_variation .stock.in-stock {
    color: #22c55e;
}

.single_variation .stock.out-of-stock {
    color: #ef4444;
}

/* 数量选择器优化 */
.quantity {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}

.quantity label {
    font-weight: 600;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    margin: 0;
}

.quantity input.qty {
    width: 80px !important;
    height: 48px !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--background)) !important;
    border: 2px solid hsl(var(--border)) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.quantity input.qty:hover {
    border-color: hsl(var(--primary)) !important;
}

.quantity input.qty:focus {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1) !important;
}

/* 加入购物车按钮容器 */
.woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .woocommerce-variation-add-to-cart {
        flex-direction: column;
        align-items: stretch;
    }

    .quantity {
        width: 100%;
        justify-content: space-between;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .quantity input.qty {
        flex: 1;
        max-width: 120px;
    }
}

/* 通知消息样式 */
.bobopkg-notification {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 加载状态按钮 */
.single_add_to_cart_button.loading {
    opacity: 0.7;
    cursor: wait;
    position: relative;
}

.single_add_to_cart_button.loading:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 1rem;
    margin-top: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}