/* -------------------------------------------------------------------------- */
/*  ChnPrints Checkout - 简洁版 v2.0
/*  
/*  核心：统一宽度 1200px（页眉 + 内容区域）
/*  布局：左侧 55% | 右侧 35%（中间留白 10%）
/* -------------------------------------------------------------------------- */

:root {
    --chn-gold: var(--e-global-color-primary, #CCB899);
    --chn-text: var(--e-global-color-text, #2D2A26);
    --chn-border: #e0e0e0;
    --chn-bg-light: #fafafa;
}

/* ==========================================================================
   1. 页面基础 - 统一宽度控制
   ========================================================================== */

/* 结账页面：页眉统一宽度 1024px */
.woocommerce-checkout .whb-flex-row.whb-general-header-inner {
    max-width: 1024px !important;
    margin: 0 auto !important;
    padding-right: 15px;
    padding-left: 15px;
}

/* 结账页面：内容区域统一宽度 1024px */
.woocommerce-checkout .wd-content-layout {
    max-width: 1024px !important;
    margin: 0 auto !important;
    padding-top: 28px !important;
    padding-bottom: 80px !important;
}

/* 结账页面：页脚统一宽度 1024px */
.woocommerce-checkout .container.wd-grid-g {
    max-width: 1024px !important;
    margin: 0 auto !important;
    padding-right: 15px;
    padding-left: 15px;
}

.woocommerce-checkout .main-page-wrapper {
    background-color: #fff !important;
}

/* ==========================================================================
   2. 两栏布局
   ========================================================================== */

/* Desktop */
@media (min-width: 1024px) {
    .chn-checkout-layout-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        min-height: calc(100vh - 200px);
        position: relative;
    }

    /* 中间竖线 - 位于 58% 处 (50% + 8%) */
    .chn-checkout-layout-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 58%;
        transform: translateX(-50%);
        width: 1px;
        background-color: var(--chn-border);
    }

    /* 左侧：地址信息 50% */
    .chn-checkout-left-col {
        flex: 0 0 50%;
        max-width: 50%;
        box-sizing: border-box;
    }

    /* 右侧：订单详情 34%（margin-left: 16% 为双边留白 8%+8%） */
    .chn-checkout-right-col {
        flex: 0 0 34%;
        max-width: 34%;
        margin-left: 16%;
        position: sticky;
        top: 30px;
        z-index: 10;
    }
}

/* Mobile */
@media (max-width: 1023px) {
    .chn-checkout-wrapper {
        padding: 16px;
    }

    .chn-checkout-layout-wrapper {
        display: block;
    }

    .chn-checkout-left-col,
    .chn-checkout-right-col {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        border: none;
    }

    .chn-checkout-right-col {
        margin-top: 40px;
    }
}

/* ==========================================================================
   3. 表单组件 - 浮动标签 (仅 Step 1 地址信息区域)
   ========================================================================== */

.form-row {
    position: relative;
    margin-bottom: 20px;
}

/* 邮箱字段下方分割线 - 已移除，改用 .chn-billing-fields 顶部边框 */
#billing_email_field {
    /* 样式已转移到下方的 .chn-billing-fields */
}

/* Billing Fields 区域顶部添加分割线 */
.chn-billing-fields .woocommerce-billing-fields {
    padding-top: 38px;
    margin-top: 38px;
    border-top: 1px solid var(--chn-border);
}

/* 基础输入框样式 */
.input-text:not(.qty),
textarea,
select {
    width: 100%;
    height: 48px !important;
    padding: 12px 16px;
    border: 1px solid var(--chn-border);
    border-radius: 10px;
    background: transparent;
    font-size: 15px;
    color: #666;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 浮动标签专用样式 - 仅 Step 1 */
.chn-step-information .input-text:not(.qty),
.chn-step-information textarea,
.chn-step-information select {
    height: 56px !important;
    padding: 22px 16px 10px 16px;
}

/* 数量选择器重置 */
.quantity .input-text.qty,
.quantity .qty {
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 2rem !important;
}

/* Select2 - 基础样式 */
.select2-container .select2-selection--single {
    height: 48px !important;
    border: 1px solid var(--chn-border) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    background-color: transparent !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    padding: 12px 30px 12px 16px !important;
    color: #666 !important;
    width: 100%;
    text-align: left !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
    right: 10px !important;
    top: 1px !important;
}

/* Select2 - Step 1 浮动标签专用样式 */
.chn-step-information .select2-container .select2-selection--single {
    height: 56px !important;
}

.chn-step-information .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 22px 30px 6px 16px !important;
}

.chn-step-information .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 54px !important;
}

/* 聚焦状态 */
.input-text:focus,
textarea:focus,
.select2-container--open .select2-selection--single {
    border-color: var(--chn-gold) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(204, 184, 153, 0.15);
    outline: none;
}

/* 隐藏占位符 (仅限 Step 1 使用浮动标签区域) */
.chn-step-information .input-text::placeholder,
.chn-step-information textarea::placeholder {
    color: transparent;
    opacity: 0;
}

/* 浮动标签 - 默认在顶部 (仅限第一步) */
.chn-step-information .form-row>label:not(.checkbox) {
    position: absolute;
    top: 6px !important;
    left: 16px;
    font-size: 11px;
    color: var(--chn-gold);
    font-weight: 500;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    background: transparent;
    padding: 0;
    margin: 0;
    transform: none;
}

/* 浮动标签 - 空输入框时沉入中间 (仅限第一步) */
.chn-step-information .form-row:has(input:placeholder-shown:not(:focus))>label:not(.checkbox),
.chn-step-information .form-row:has(textarea:placeholder-shown:not(:focus))>label:not(.checkbox) {
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px;
    color: #888;
}

/* 聚焦时标签变金色 */
.chn-step-information .form-row:has(input:focus)>label,
.chn-step-information .form-row:has(select:focus)>label,
.chn-step-information .form-row:focus-within>label {
    color: var(--chn-gold) !important;
}

.form-row>label .required {
    color: var(--chn-gold);
    text-decoration: none;
    margin-left: 2px;
}

.form-row>label .optional {
    display: none;
}

/* ==========================================================================
   3.1 验证错误状态 - 浮动标签和输入框变红
   ========================================================================== */

/* 错误状态 */
.chn-step-information .form-row.woocommerce-invalid>label:not(.checkbox),
.form-row.woocommerce-invalid>label .required {
    color: #dc3545 !important;
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid textarea,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid .select2-container .select2-selection--single {
    border-color: #dc3545 !important;
}

/* ==========================================================================
   4. 步骤导航
   ========================================================================== */

/* 步骤导航 - 通用 */
.chn-step-navigation {
    display: flex;
    align-items: center;
    clear: both;
    width: 100%;
}

/* Step 1 导航 */
.chn-step-nav-step1 {
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--chn-border);
}

/* Step 2 导航 */
.chn-step-nav-step2 {
    justify-content: flex-start;
    padding-top: 20px;
    border-top: 1px solid var(--chn-border);
}

/* 统一返回按钮样式 - 支持 <a> 和 <button> */
.chn-nav-back,
a.chn-nav-back,
button.chn-nav-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--chn-gold);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1.4;
    font-family: inherit;
    transition: color 0.2s ease;
}

.chn-nav-back:hover,
a.chn-nav-back:hover,
button.chn-nav-back:hover {
    color: var(--chn-text);
    text-decoration: none;
}

.chn-nav-icon {
    font-size: 16px;
    line-height: 1;
}

.chn-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background-color: var(--chn-text);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
}

.chn-btn-primary:hover {
    background-color: var(--chn-gold);
    box-shadow: 0 8px 20px rgba(204, 184, 153, 0.3);
}

/* ==========================================================================
   5. 地址摘要 (Contact & Shipping)
   ========================================================================== */

.chn-address-summary {
    background: #fff;
    border: 1px solid var(--chn-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

/* 区域标题样式 - 统一所有区块标题 */
.chn-section-title,
.woocommerce-billing-fields>h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--chn-text);
    margin: 0 0 16px 0;
}

.chn-summary-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--chn-border);
}

.chn-summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.chn-summary-row:first-of-type {
    padding-top: 0;
}

.chn-summary-label {
    color: #888;
    font-size: 14px;
    white-space: nowrap;
}

.chn-summary-value {
    color: var(--chn-text);
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.chn-contact-sep {
    color: var(--chn-gold);
    margin: 0 12px;
}

.chn-summary-edit {
    color: var(--chn-gold);
    font-size: 16px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    transition: color 0.2s ease;
}

.chn-summary-edit:hover {
    color: var(--chn-text) !important;
    background: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   6. 隐藏元素
   ========================================================================== */

.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.shipping_address {
    display: none !important;
}

/* 移除产品选项 (TM Extra Product Options) 底部多余空间 */
.tc-epo-metadata.variation,
.tc-epo-metadata.variation dd.tc-value.variation-InformationForTheOrder {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   7. 步骤切换控制 (解决 PayPal/Stripe 初始化问题)
   ========================================================================== */

/* 默认状态：隐藏但保留渲染上下文 */
.chn-checkout-step {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    position: absolute;
    z-index: -1;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    width: 100%;
}

/* 激活状态：显示 */
.chn-checkout-step.active {
    visibility: visible;
    height: auto;
    overflow: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* 表单字段并排布局 */
@media (min-width: 768px) {
    .form-row-first {
        width: 48%;
        float: left;
        margin-right: 4%;
        clear: both;
    }

    .form-row-last {
        width: 48%;
        float: right;
        margin-right: 0;
        clear: none;
    }

    .form-row-wide {
        width: 100%;
        clear: both;
    }
}

/* ==========================================================================
   8. 优惠代码区域
   ========================================================================== */

.woocommerce-form-coupon {
    gap: 0px;
    padding: 15px;
    margin-bottom: 0px;
}

.woocommerce-form-coupon .form-row-last {
    margin-bottom: 0px;
}

.chn-coupon-section {
    padding-bottom: 20px;
}