/* ============================================================
   购物车选择结账 — 商用 UI 规范样式
   字体栈：系统原生无衬线，保证跨平台一致性
   色系：中性灰 + 品牌橙（#ff5722），中文电商风格
   ============================================================ */

:root {
    --djyp-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
                 "Microsoft YaHei", sans-serif;
    --djyp-c-text:      #1a1a1a;   /* 主文本 */
    --djyp-c-secondary: #606060;   /* 次要文本 */
    --djyp-c-muted:     #999;      /* 辅助信息 */
    --djyp-c-price:     #1a1a1a;   /* 价格主色（黑） */
    --djyp-c-total:     #e53935;   /* 合计高亮（中国电商红） */
    --djyp-c-accent:    #ff5722;   /* 品牌主色 */
    --djyp-c-border:    #ebebeb;   /* 分隔线 */
    --djyp-c-bg:        #f7f7f7;   /* 浅底色 */
    --djyp-radius:      8px;
}


/* ============================================================
   复选框
   ============================================================ */
.djyp-cart-checkbox-cell,
.djyp-select-all-cell {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    vertical-align: top !important;
    text-align: center !important;
    padding: 20px 4px 8px !important;
}

.djyp-cart-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--djyp-c-accent);
    margin: 0 !important;
    padding: 0 !important;
}

/* 全选栏（无 thead 时备用） */
.djyp-select-all-bar {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--djyp-c-border);
    gap: 10px;
}
.djyp-select-all-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.djyp-select-all-wrap label {
    cursor: pointer;
    font-family: var(--djyp-font);
    font-size: 13px;
    color: var(--djyp-c-secondary);
    font-weight: 500;
}
.djyp-selected-count {
    font-family: var(--djyp-font);
    font-size: 12px;
    color: var(--djyp-c-muted);
}

/* 未选中商品半透明 */
.wc-block-cart-items__row.djyp-unselected td:not(.djyp-cart-checkbox-cell) {
    opacity: 0.4;
    transition: opacity 0.25s ease;
}
.wc-block-cart-items__row.djyp-unselected:hover td:not(.djyp-cart-checkbox-cell) {
    opacity: 0.65;
}


/* ============================================================
   三栏通用容器
   ============================================================ */
.djyp-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--djyp-c-border);
}
.djyp-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 栏标题：左侧竖条 + 小号全大写 */
.djyp-section-title,
.djyp-section-shipping-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: var(--djyp-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--djyp-c-muted) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1 !important;
}
/* 左侧竖条装饰 */
.djyp-section-title::before,
.djyp-section-shipping-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: var(--djyp-c-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* WC 原始"购物车总计"标题由我们的 djyp-section-title 替代，隐藏原件避免修改 React DOM */
.wp-block-woocommerce-cart-totals-block .wc-block-cart__totals-title {
    display: none !important;
}


/* ============================================================
   WC 原生元素隐藏 / 覆写
   ============================================================ */
/* 小计行（栏2 冗余）— 多选择器覆盖不同版本 WC Blocks */
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-subtotal,
.wp-block-woocommerce-cart-order-summary-subtotal-block {
    display: none !important;
}
/* WC 原始合计行 */
.wc-block-components-totals-footer-item {
    display: none !important;
}
/* WC 原始继续结账块 */
.wc-block-cart .wp-block-woocommerce-proceed-to-checkout-block,
.wc-block-cart .wc-block-cart__submit-container {
    display: none !important;
}


/* ============================================================
   栏 1：已选产品订单汇总
   ============================================================ */

/* 明细列表容器 */
.djyp-selected-items-detail {
    margin-bottom: 12px;
}

/* 单行商品 */
.djyp-selected-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    column-gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--djyp-c-border);
    font-family: var(--djyp-font);
}
.djyp-selected-item-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 名称 + design-id 纵向堆叠容器（占据 grid 第1列） */
.djyp-item-name-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 商品名称：单行截断 */
.djyp-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--djyp-c-text);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Design ID 徽章：代码风格，灰底圆角 */
.djyp-item-design-id {
    display: inline-block;
    align-self: flex-start;          /* 不撑满整列 */
    padding: 1px 6px;
    background: var(--djyp-c-bg);
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
    font-size: 10px;
    color: var(--djyp-c-muted);
    letter-spacing: .02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 数量 */
.djyp-item-qty {
    font-family: var(--djyp-font);
    font-size: 12px;
    color: var(--djyp-c-accent);
    white-space: nowrap;
    letter-spacing: .02em;
    font-weight: 600;
}

/* 行小计金额 */
.djyp-item-subtotal {
    font-family: var(--djyp-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--djyp-c-accent);
    white-space: nowrap;
    text-align: right;
}

/* 已选合计行 */
.djyp-selected-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--djyp-c-bg);
    border-radius: var(--djyp-radius);
    margin-top: 4px;
}
.djyp-selected-total-label {
    font-family: var(--djyp-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--djyp-c-secondary);
    letter-spacing: .02em;
}
.djyp-selected-total-amount {
    font-family: var(--djyp-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--djyp-c-price);
    letter-spacing: -.01em;
}


/* ============================================================
   栏 2：配送信息和费用（仅标题节点，WC 内容跟随其后）
   ============================================================ */
.djyp-section-shipping {
    padding-bottom: 0;  /* WC 自身的运费/地址内容有自己的间距 */
    border-bottom: none;
}


/* ============================================================
   栏 3：总支付账单汇总
   ============================================================ */
.djyp-section-payment {
    padding-bottom: 0;
    border-bottom: none;
}

.djyp-payment-total-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

.djyp-payment-total-label {
    font-family: var(--djyp-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--djyp-c-secondary);
    padding-bottom: 3px; /* 与价格数字基线对齐 */
}

.djyp-payment-total-amount {
    font-family: var(--djyp-font);
    font-size: 28px;
    font-weight: 800;
    color: var(--djyp-c-total);
    letter-spacing: -.02em;
    line-height: 1;
}

/* 货币符号略小 */
.djyp-payment-total-amount::first-letter {
    font-size: .65em;
    font-weight: 700;
    vertical-align: .08em;
}

/* 结账按钮 */
.djyp-checkout-btn {
    display: block;
    width: 100%;
    padding: 13px 20px;
    background: var(--djyp-c-accent);
    color: #fff;
    font-family: var(--djyp-font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    border: none;
    border-radius: var(--djyp-radius);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 87, 34, 0.30);
    -webkit-font-smoothing: antialiased;
}
.djyp-checkout-btn:hover:not(:disabled) {
    background: #f4511e;
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.40);
    transform: translateY(-1px);
}
.djyp-checkout-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 87, 34, 0.25);
}
.djyp-checkout-btn:disabled {
    background: #d4d4d4;
    color: #a0a0a0;
    cursor: not-allowed;
    box-shadow: none;
}


/* ============================================================
   隐藏 WC Blocks 原生数量选择器（由我们的 djyp-qty-control 替代）
   ============================================================ */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    display: none !important;
}


/* ============================================================
   自定义数量控件 — 外观与 WC 原生保持一致
   ============================================================ */
.djyp-qty-control {
    display: flex;
    align-items: center;
    border-radius: 4px;
    box-sizing: content-box;
    position: relative;
    width: 107px;
    margin: 0 0 .25em;
}

/* 表格上下文：与 WC 原生 quantity-selector 保持相同间距 */
table.wc-block-cart-items .wc-block-cart-items__row .djyp-qty-control {
    margin-bottom: 12px;
}

/* 边框通过 ::after 实现（同 WC 原生做法） */
.djyp-qty-control::after {
    content: "";
    border: 1px solid hsla(0, 0%, 7%, .11);
    border-radius: 4px;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.djyp-qty-btn {
    background: none transparent;
    border: 0;
    box-shadow: none;
    color: currentColor;
    cursor: pointer;
    font-size: .9em;
    font-family: var(--djyp-font);
    font-weight: 400;
    margin: 0;
    min-width: 30px;
    opacity: 0.6;
    padding: 0;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.djyp-qty-btn--minus {
    border-radius: 4px 0 0 4px;
}
.djyp-qty-btn--plus {
    border-radius: 0 4px 4px 0;
}
.djyp-qty-btn:hover:not(:disabled),
.djyp-qty-btn:focus:not(:disabled) {
    opacity: 1;
}
.djyp-qty-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.djyp-qty-display {
    flex: 1 1 auto;
    min-width: 40px;
    text-align: center;
    font-family: var(--djyp-font);
    font-size: 1em;
    font-weight: 600;
    color: currentColor;
    line-height: 1;
    padding: .4em 0;
    background: transparent;
    user-select: none;
}

/* loading 状态：控件内容半透明，spinner 由 JS 注入 */
.djyp-qty-control.djyp-loading {
    pointer-events: none;
}
.djyp-qty-control.djyp-loading .djyp-qty-btn,
.djyp-qty-control.djyp-loading .djyp-qty-display {
    opacity: 0.15;
}

/* 数量控件 spinner：更大、更细、橘黄色 */
.djyp-qty-control .wc-block-components-spinner {
    color: var(--djyp-c-accent);
    font-size: 38px;
}
.djyp-qty-control .wc-block-components-spinner::after {
    border-width: .06em;
}


/* ============================================================
   加载中遮罩
   ============================================================ */
.djyp-loading-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 99999;
    font-family: var(--djyp-font);
    font-size: 14px;
    color: var(--djyp-c-secondary);
    backdrop-filter: blur(2px);
}

/* spinner 包装层：提供 position:relative 容器给 wc-block-components-spinner */
.djyp-spinner-wrap {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* 遮罩 spinner：更大、更细、橘黄色 */
.djyp-spinner-wrap .wc-block-components-spinner {
    color: var(--djyp-c-accent);
    font-size: 38px;
}
.djyp-spinner-wrap .wc-block-components-spinner::after {
    border-width: .06em;
}