/**
 * assets/css/main.css - 主题额外样式
 *
 * 这个文件在 style.css 之后加载。
 * 用于补充具体页面或组件的样式。
 *
 * @package WooTheme
 */

/* ============================================================
   评论区样式
   ============================================================ */
.comments-area {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #eee;
}
.comments-area h2 {
    font-size: 1.4rem;
    margin-bottom: 30px;
    color: #96588a;
}
.comment-item {
    list-style: none;
    margin-bottom: 24px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
}
.comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.comment-meta .avatar { border-radius: 50%; }
.comment-info .comment-author { font-weight: 700; }
.comment-info time { font-size: .85rem; color: #767676; }
.comment-content { line-height: 1.7; }

/* ============================================================
   WooCommerce 产品 Tabs 样式补充
   ============================================================ */
.woocommerce-tabs .panel { padding: 20px 0; line-height: 1.8; }
.woocommerce-tabs table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.woocommerce-tabs table.shop_attributes th { background: #f9f9f9; font-weight: 700; width: 30%; }

/* ============================================================
   星级评分
   ============================================================ */
.star-rating {
    display: inline-flex;
    color: #f5a623;
    font-size: 1.1rem;
    letter-spacing: 2px;
}
.woocommerce-product-rating { margin-bottom: 12px; }

/* ============================================================
   消息通知提示（加购成功/失败）
   ============================================================ */
.woocommerce-notices-wrapper {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;
    max-width: 360px;
}
.woocommerce-message {
    animation: slideIn 0.3s ease;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   加载动画（AJAX 加载中）
   ============================================================ */
.loading-spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 3px solid #ddd;
    border-top-color: #96588a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   面包屑导航
   ============================================================ */
.woocommerce-breadcrumb {
    font-size: .875rem;
    color: #767676;
    margin-bottom: 20px;
    padding: 12px 0;
}
.woocommerce-breadcrumb a { color: #96588a; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   价格区间筛选（侧边栏小工具）
   ============================================================ */
.widget_price_filter .price_slider { margin-bottom: 16px; }
.widget_price_filter .price_label { display: flex; justify-content: space-between; font-size: .9rem; }

/* ============================================================
   My Account 页面
   ============================================================ */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table th,
.woocommerce-orders-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-align: left;
}
.woocommerce-orders-table th { background: #f9f9f9; font-weight: 700; }
.woocommerce-orders-table .order-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}
/* 各种订单状态颜色 */
.woocommerce-orders-table .order-status.status-completed    { background: #d4edda; color: #155724; }
.woocommerce-orders-table .order-status.status-processing   { background: #cce5ff; color: #004085; }
.woocommerce-orders-table .order-status.status-pending      { background: #fff3cd; color: #856404; }
.woocommerce-orders-table .order-status.status-cancelled    { background: #f8d7da; color: #721c24; }
.woocommerce-orders-table .order-status.status-refunded     { background: #e2e3e5; color: #383d41; }
.woocommerce-orders-table .order-status.status-on-hold      { background: #fde2e2; color: #843534; }

/* ============================================================
   产品详情图片画廊
   ============================================================ */
.woocommerce-product-gallery {
    position: relative;
}
.woocommerce-product-gallery .flex-viewport {
    border-radius: 8px;
    overflow: hidden;
}
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 70px; height: 70px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
}
.woocommerce-product-gallery .flex-control-thumbs li.flex-active img { border-color: #96588a; }

/* ============================================================
   结账页支付方式美化
   ============================================================ */
#payment .wc_payment_methods { list-style: none; }
#payment .wc_payment_methods li { margin-bottom: 12px; }
#payment .wc_payment_methods label { cursor: pointer; font-weight: 600; }
#payment .payment_box { background: #f9f9f9; padding: 14px; border-radius: 6px; margin-top: 8px; font-size: .9rem; }

/* ============================================================
   Sticky 产品购买栏（移动端）
   ============================================================ */
@media (max-width: 768px) {
    .single-product .sticky-atc {
        position: fixed;
        bottom: 0;
        left: 0; right: 0;
        background: #fff;
        padding: 14px 20px;
        box-shadow: 0 -2px 12px rgba(0,0,0,.1);
        z-index: 50;
        display: flex;
        gap: 12px;
    }
    .single-product .sticky-atc .button { flex: 1; }
}