/* Checkout Page Styles */
/* 主色调: #72738E */

/* 主容器样式 */
main.wp-block-group {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 整体表单容器 */
.woocommerce-checkout {
    background: #fff;
    padding: 0;
}

.woocommerce form.checkout {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

/* 客户详情区域 */
#customer_details {
    background: #fff;
    /* border: 1px solid #e8e9f0; */
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(114, 115, 142, 0.08);
}

/* 左右列布局 */
#customer_details .col-1,
#customer_details .col-2 {
    width: 48%;
    float: left;
    margin-right: 4%;
}

#customer_details .col-2 {
    margin-right: 0;
}

/* 全宽列布局 */
#customer_details .col-12 {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 30px;
}

/* 标题样式 */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
    color: #72738E;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #72738E;
    position: relative;
}

.woocommerce-billing-fields h3:after,
.woocommerce-shipping-fields h3:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #72738E;
}

/* 表单字段样式 */
.woocommerce-checkout .form-row {
    margin-bottom: 20px;
}

.woocommerce-checkout .form-row label {
    color: #333;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.woocommerce-checkout .form-row label .required {
    color: #e74c3c;
    margin-left: 3px;
}

/* 输入框和选择框样式 */
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    background: #F7F7F7;
    /* 修改背景色 */
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: 44px;
    /* 强制统一高度 */
    min-height: 44px;
    /* 确保所有表单元素高度一致 */
}

/* textarea单独处理，不设置固定高度 */
.woocommerce-checkout textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    background: #F7F7F7;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.3s ease;
    box-sizing: border-box;
    min-height: 80px;
    /* 只设置最小高度，不设置固定高度 */
    resize: vertical;
    /* 允许垂直调整大小 */
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #72738E;
    outline: none;
    box-shadow: 0 0 0 3px rgba(114, 115, 142, 0.1);
}

/* 选择框样式 */
.woocommerce-checkout select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='m2 0-2 2h4zm0 5 2-2h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    height: 44px !important;
    /* 强制与输入框高度一致 */
    min-height: 44px;
    /* 确保与输入框高度一致 */
    line-height: 1.4;
}

/* 这个规则已经合并到上面的textarea样式中，删除重复 */

/* 复选框和单选框样式 */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    width: auto;
    margin-right: 8px;
    accent-color: #72738E;
}

/* 配送地址切换 */
#ship-to-different-address {
    margin: 25px 0;
    padding: 15px;
    background: #f8f9fa;
    border-left: 4px solid #72738E;
}

#ship-to-different-address label {
    font-weight: 500;
    color: #72738E;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#ship-to-different-address input[type="checkbox"] {
    margin-right: 10px;
}

/* 订单审核区域 */
#order_review_heading {
    color: #72738E;
    font-size: 22px;
    font-weight: 600;
    margin: 40px 0 25px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #72738E;
    position: relative;
}

#order_review_heading:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: #72738E;
}

.woocommerce-checkout-review-order {
    background: #fff;
    border: 1px solid #e8e9f0;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(114, 115, 142, 0.08);
}

/* 订单表格样式 */
.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.woocommerce-checkout-review-order-table th {
    color: #72738E;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce-checkout-review-order-table .product-name {
    font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 600;
    color: #72738E;
}

/* 总计行样式 */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    border-top: 2px solid #72738E;
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
    color: #72738E;
    padding-top: 20px;
}

/* 支付方式区域 */
#payment {
    background: #f8f9fa;
    border: 1px solid #e8e9f0;
    padding: 25px;
    margin-top: 25px;
}

#payment .payment_methods {
    list-style: none;
    padding: 0;
    margin: 0;
}

#payment .payment_methods li {
    margin-bottom: 15px;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

#payment .payment_methods li:hover {
    border-color: #72738E;
    box-shadow: 0 2px 8px rgba(114, 115, 142, 0.1);
}

#payment .payment_methods li.wc_payment_method input[type="radio"]:checked+label {
    color: #72738E;
    font-weight: 600;
}

/* 下单按钮 */
#place_order {
    background: #72738E;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#place_order:hover {
    background: #5a5b73;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(114, 115, 142, 0.3);
}

#place_order:active {
    transform: translateY(0);
}

/* 加载动画 */
.woocommerce .blockUI.blockOverlay {
    background: rgba(114, 115, 142, 0.1) !important;
}

.woocommerce .blockUI.blockOverlay:before {
    border-color: #72738E transparent #72738E transparent !important;
}

/* 错误信息样式 */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-left: 4px solid #72738E;
    background: #f8f9fa;
    color: #333;
}

.woocommerce-error {
    border-left-color: #e74c3c;
    background: #fdf2f2;
}

/* 优惠券表单 */
.checkout_coupon {
    background: #f8f9fa;
    border: 1px solid #e8e9f0;
    padding: 20px;
    margin-bottom: 25px;
}

.checkout_coupon .form-row {
    display: flex;
    gap: 10px;
    align-items: end;
}

.checkout_coupon .input-text {
    flex: 1;
}

.checkout_coupon .button {
    background: #72738E;
    color: #fff;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.checkout_coupon .button:hover {
    background: #5a5b73;
}

/* 响应式设计 */
@media (max-width: 768px) {
    main.wp-block-group {
        padding: 20px 15px;
    }

    #customer_details {
        padding: 20px;
    }

    #customer_details .col-1,
    #customer_details .col-2,
    #customer_details .col-12 {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 30px;
    }

    #customer_details .col-2 {
        margin-bottom: 0;
    }

    .woocommerce-checkout-review-order {
        padding: 20px;
    }

    #payment {
        padding: 20px;
    }

    .woocommerce-additional-fields {
        padding: 20px;
        margin-top: 30px;
    }

    .checkout_coupon .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .checkout_coupon .button {
        margin-top: 10px;
    }
}

/* 附加信息区域样式 */
.woocommerce-additional-fields {
    background: #fff;
    border: 1px solid #e8e9f0;
    padding: 30px;
    margin-top: 40px;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(114, 115, 142, 0.08);
    /* 视觉上分离，看起来像独立区域 */
    position: relative;
}

.woocommerce-additional-fields h3 {
    color: #72738E;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #72738E;
    position: relative;
}

.woocommerce-additional-fields h3:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #72738E;
}

/* 表单验证错误样式 */
.woocommerce-checkout .validate-required.woocommerce-invalid .input-text,
.woocommerce-checkout .validate-required.woocommerce-invalid select {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.woocommerce-checkout .validate-required.woocommerce-invalid label {
    color: #e74c3c;
}

/* 清除浮动 */
#customer_details:after {
    content: "";
    display: table;
    clear: both;
}

/* 隐藏不需要的边框圆角 */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .button,
#customer_details,
.woocommerce-checkout-review-order,
#payment,
.checkout_coupon {
    border-radius: 0;
}

/* 改进表单布局 */
.woocommerce-checkout .form-row-wide {
    width: 100%;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48%;
    float: left;
}

.woocommerce-checkout .form-row-last {
    float: right;
}

/* Billing details区域表单布局优化 */
.woocommerce-checkout .woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.woocommerce-checkout .woocommerce-billing-fields .form-row {
    flex: 1 !important;
    min-width: calc(50% - 7.5px) !important;
    margin-bottom: 20px !important;
    float: none !important;
    width: auto !important;
}

/* 特定字段保持全宽 */
.woocommerce-checkout .woocommerce-billing-fields .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields .form-row.address-field,
.woocommerce-checkout .woocommerce-billing-fields .form-row[id*="billing_address_1"],
.woocommerce-checkout .woocommerce-billing-fields .form-row[id*="billing_address_2"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
}

/* 清除浮动 */
.woocommerce-billing-fields .woocommerce-billing-fields__field-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

/* Shipping details区域表单布局优化 */
.woocommerce-checkout .woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.woocommerce-checkout .woocommerce-shipping-fields .form-row {
    flex: 1 !important;
    min-width: calc(50% - 7.5px) !important;
    margin-bottom: 20px !important;
    float: none !important;
    width: auto !important;
}

/* 特定字段保持全宽 */
.woocommerce-checkout .woocommerce-shipping-fields .form-row-wide,
.woocommerce-checkout .woocommerce-shipping-fields .form-row.address-field,
.woocommerce-checkout .woocommerce-shipping-fields .form-row[id*="shipping_address_1"],
.woocommerce-checkout .woocommerce-shipping-fields .form-row[id*="shipping_address_2"] {
    flex: 1 1 100% !important;
    min-width: 100% !important;
}

/* 清除浮动 */
.woocommerce-shipping-fields .woocommerce-shipping-fields__field-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        float: none;
    }

    /* 移动端Billing和Shipping fields单列显示 */
    .woocommerce-checkout .woocommerce-billing-fields .form-row,
    .woocommerce-checkout .woocommerce-shipping-fields .form-row {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* 强制覆盖WooCommerce默认样式 */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

body.woocommerce-checkout .woocommerce-billing-fields .form-row:not(.form-row-wide):not([id*="address"]) {
    flex: 1 !important;
    min-width: calc(50% - 7.5px) !important;
    width: auto !important;
    float: none !important;
}

body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

body.woocommerce-checkout .woocommerce-shipping-fields .form-row:not(.form-row-wide):not([id*="address"]) {
    flex: 1 !important;
    min-width: calc(50% - 7.5px) !important;
    width: auto !important;
    float: none !important;
}

/* 修复下拉框展开时的横向滚动条问题 */
.woocommerce-checkout select {
    max-width: 100%;
    box-sizing: border-box;
}

/* 防止页面出现横向滚动条 */
body.woocommerce-checkout {
    overflow-x: hidden;
}

main.wp-block-group {
    overflow-x: hidden;
    max-width: 100%;
}

/* 确保所有表单元素不会超出容器 */
.woocommerce-checkout .form-row,
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* 修复Select2下拉框样式（如果使用了Select2） */
.select2-container {
    max-width: 100% !important;
    box-sizing: border-box;
}

.select2-container .select2-selection--single {
    height: 44px !important;
    line-height: 42px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 0 15px !important;
    background: #F7F7F7 !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    color: #333 !important;
    background: #F7F7F7 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 10px !important;
}

/* 确保下拉选项不会导致横向滚动 */
.select2-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}

/* 强制所有表单元素高度一致 - 最高优先级 */
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select {
    /* height: 44px !important; */
    min-height: 44px !important;
    line-height: 1.4 !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

/* 确保所有billing和shipping字段高度一致 */
.woocommerce-billing-fields .form-row .input-text,
.woocommerce-billing-fields .form-row select,
.woocommerce-shipping-fields .form-row .input-text,
.woocommerce-shipping-fields .form-row select {
    height: 44px !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    padding: 12px 15px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

/* 特别处理textarea */
.woocommerce-checkout .form-row textarea {
    height: auto;
    min-height: 80px !important;
    background: #F7F7F7 !important;
}

/* 确保Additional Information区域的textarea也有正确样式 */
.woocommerce-additional-fields textarea,
.woocommerce-additional-fields .form-row textarea {
    background: #F7F7F7 !important;
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 120px !important;
    /* 增加高度以适应5行 */
    resize: both;
}

/* 特别针对Order notes字段 */
#order_comments {
    min-height: 120px !important;
    /* 移除固定height，允许用户调整大小 */
}

.woocommerce form .form-row .input-text {
    background: #F7F7F7;
}

/* 恢复textarea的默认resize行为 */
.woocommerce-additional-fields textarea,
#order_comments {
    min-height: 120px;
    resize: both;
    /* 明确设置为both，允许水平和垂直调整 */
}

/* 如果只想要垂直调整，使用这个 */
/*
#order_comments {
    resize: vertical;
}
*/

/* 隐藏 Order Notes 字段的 (optional) 文本 */
.woocommerce-additional-fields .optional,
#order_comments_field .optional {
    display: none !important;
}