@media (min-width: 765px) {
    .woocommerce{
        background-color: white !important;
    }
    .custom-content {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #loading-spinner  {
        position: absolute;
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .spinner {
        border: 5px solid rgba(0, 0, 0, 0.3);
        border-top: 5px solid #000;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }
    .woocommerce form .form-row-first{
       width: 70%!important;
   }
    .woocommerce form .form-row-last{
        width: 30%;
    }
   #coupon_button{
       background-color: #f5f5f5;
       border: 1px solid rgba(0, 0, 0, 0.3);
       font-size: 14px;
       border-radius: 5px;
       padding:18px 25px 18px 25px;
   }
    .content {
        display: none; /* Initially hide the content */
    }

    @keyframes spin {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
    .woocommerce-checkout{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    /* 修改 col2-set 的样式 */
.checkout.woocommerce-checkout .col2-set {
    /* 例如，调整宽度、背景颜色等 */
    width: 60%;
    background-color: #f9f9f9;
}

/* 修改 col2-set 下部 class 的样式 */
.checkout.woocommerce-checkout .col-1, .checkout.woocommerce-checkout .col-2 {
    /* 调整列宽、间距等 */
    /*width: 48%;  如果需要两列布局 */
    width: 100%;
    float: none;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
}

#order_review_heading{
    display: none;
}
.woocommerce-NoticeGroup-checkout{
    width: 100%;
    padding-left: 300px;
    padding-right: 300px;
    height: 30%;
}
.woocommerce-checkout-review-order{
    width: 35%;
}
.wp-block-group{
    background-color: white;
}
.checkout_form_left{
    background-color: white;
    border-top: 1px solid #cccccc;
    width: 54%;
    border-right: 1px solid #dedede;
}
    .checkout_form_left .left-container{
        margin-left: auto;
        margin-right: 20px;
        width: 600px;
}
    .checkout_form_right .right-container{
        margin-left: 10px;
        width: 430px;
    }
    .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register{
        padding-bottom: 0 !important ;
        margin-bottom: 0!important ;
        display: block!important;
    }
    .checkout_form_right{
        border-top: 1px solid #cccccc;
    padding-top: 30px;
    background-color: #f5f5f5;
    border-left: 1px solid #dedede;
    position: sticky;
    height: 1050px;
    top: 0;
    width: 46%;
    left: 50%;
    padding-left: 40px;
    padding-right: 20px;
}
.customer-favorable{
    font-family: "Poppins", sans-serif;
    text-align: center;
    :is(h3) {
        font-size: 16px;
        font-weight: 600;
    }
}
.customer-contact h3{
    font-size: 20px;
    font-weight: 600;
    margin: 10px 0 ;
}
.input-wrapper input {
        background-color: #eee;
        padding: 12px;
        font-size: 1rem;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #000000;
        cursor: pointer;
}
.input-wrapper input:focus {
        outline-color: #ff6801;
}
    #billing_city:focus,
    #billing_address_1:focus,
    #billing_address_2:focus,
    #billing_last_name:focus,
    #billing_postcode:focus,
    #billing_phone:focus,
    #billing_email:focus,
    #billing_first_name:focus {
        border: 2px solid black !important; /* 使用 !important 提高优先级 */
        outline: none !important;
    }
.woocommerce-billing-fields h3{
    display: none;
}
.woocommerce form .form-row{
    padding-bottom: 16px !important;
}
    .woocommerce form .form-row .input-text, .woocommerce form .form-row select{
        padding-top: 17px;
        padding-bottom: 15px;
        border-radius: 9px;
        border: 1px solid #dedede !important;
    }
    .woocommerce form .form-row .input-text::placeholder {
        color: #999; /* 设置字体颜色 */
        font-size: 12px; /* 设置字体大小 */

        font-weight: 500; /* 设置字体粗细 */
    }
    #billing_country_field .required_field,
    #billing_state_field .required_field{
        color: #ff6801;
        font-size: 12px;
        position: relative;
        height: 0;
        left: 10px;
        z-index: 10;
        width: 200px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered{
        padding-top: 30px !important;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
    }
    .select2-container--default .select2-selection--single {
        border: 1px solid #ccc !important; /* 灰色边框 */
        outline: none;
        border-radius: 10px;
    }

    /* 获取焦点后 Select2 下拉框的边框变为黑色 */
    .select2-container--default.select2-container--focus .select2-selection--single {
        border: 1px solid #000 !important; /* 黑色边框 */
        outline: none;
        border-radius: 8px!important;
    }
    .checkout_form_right .woocommerce-checkout-payment{
        display: none;
    }
    .pay_tittle{
        padding-bottom: 10px;
        :is(span) {
            color: #b9b9b9;
            font-size: 14px;
        }
    }
    .woocommerce-checkout-payment{
        background-color: #f4f4f4 !important;
        border-radius: 10px !important;
    }
    #add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{
        background-color: #000000;
        color: #cccccc;
    }
    #add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before{
        content: "";
        display: block;
        border: 1em solid #000000;
        border-right-color: transparent;
        border-left-color: transparent;
        border-top-color: transparent;
        position: absolute;
        top: -.75em;
        left: 0;
        margin: -1em 0 0 2em;
    }
    #place_order{
        width: 100%;
        border-radius: 10px;
        background-color: #000000;
        color: #cccccc;
        font-family: "Poppins", sans-serif;
        font-size: 18px;
        font-weight: 500;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #place_order:hover{
        background-color: #ff6801;
        color: #000000;
    }
    .check_h{
        margin: 10px 0 15px 0;
    }
    .woocommerce-account-fields{
        font-size: 13px;
        font-weight: 500;
        color: #000000;
        border: 1px solid #cccccc;
        border-radius: 5px;
        padding: 10px 10px 5px 10px;
    }
    .email-input::placeholder {
        color: #999; /* 设置字体颜色 */
        font-size: 12px; /* 设置字体大小 */
        font-style: italic; /* 设置字体样式为斜体 */
        font-weight: 300; /* 设置字体粗细 */
    }
.checkout_cart_item img{
    border-radius: 5px;
    width: 80px;
    height: 80px;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #cccccc;
}
.checkout-cart{
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #cccccc;
}
.order-total{
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 600;
    :is(span) {
        font-size: 20px;
        font-weight: 600;
    }
}
.checkout_cart_item{
    display: flex;
    padding-top: 0px;
    height: 140px;
    overflow: hidden;
}

.product-total{
    font-size: 16px;
    font-weight: 600;
    margin-left: auto;
    :is(span) {
        font-size: 14px;
        font-weight: 400;
    }
}
.shipping-checkout{
    width: 50%;
    text-align: right;
    color: #6d6d6d;
    font-size: 12px;
    font-weight: 600;
}
.cart-subtotal{
    font-size: 16px;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
}
.checkout_cart_item .product-name{
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
    :is(h3) {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
    }
    :is(span) {
        font-size: 10px;
        font-weight: 600;
        color: #999;
    }
    :is(p) {
        font-size: 12px;
        font-weight: 400;
        color: #999;
    }
}
.product-name .jian,.product-name .jia{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
    cursor: pointer;
}
.product-name .cart-number{
    height: 30px;
    border: none;
    text-align: center;
    font-size: 12px;
    border: #fff;
    outline: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
}
.quantity-span{
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
    .loading-before{
        display: none;
    }
    #pay_bacs{
        display: flex;
    }
    .cart-discount{
        display: flex;
        justify-content: space-between;
    }
}

@media (max-width: 765px) {
    .customer-favorable{
        display: none;
    }
    .show{
        display: block;
    }
    .wp-block-group> .woocommerce{
        padding-top: 50px;
    }
    .phone-favorable{
        font-family: "Poppins", sans-serif;
        border-top:1px solid #cccccc ;
        border-bottom:1px solid #cccccc ;
        border-left: none;
        border-right: none;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        background-color: #f5f5f5;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon_dom{
        display: none;
    }
.phone-favorable-left{
    display: flex;
}


    .woocommerce form .form-row-first{
        width: 70%!important;
    }
    .woocommerce form .form-row-last{
        width: 30%;
    }
    .phone_item_list {
        padding-top: 30px;
        height: auto;
        overflow: hidden;
    }
    .checkout_cart_item{
        display: flex;
        padding-left: 10px;
        padding-right: 10px;
        height: 140px;
        overflow: hidden;
    }
    .checkout_cart_item img{
        border-radius: 5px;
        width: 80px;
        height: 80px;
        padding: 5px;
        margin-top: 5px;
        border: 1px solid #cccccc;
    }
    .checkout_cart_item .product-name {
        display: block;
        font-size: 14px;
        font-weight: 500;
        padding-left: 10px;
        :is(h3) {
            margin: 0;
            font-size: 14px;
            font-weight: 500;
        }
        :is(span) {
            font-size: 10px;
            font-weight: 600;
            color: #999;
        }
        :is(p) {
            margin: 0;
            font-size: 12px;
            font-weight: 400;
            color: #999;
        }
    }
    .carts-quantity-input {
        border-radius: 5px;
        display: flex;
    }
   .product-total{
       margin-left: auto;
       display: block;
       :is(s) {
           color: #7c7672;
           font-size: 12px;
       }
   }
   .phone-favorable-right{
       padding-top: 5px;
       :is(p) {
           font-weight: 600;
           font-size: 16px;
           margin: 0;
       }
       :is(s) {
           color: #cccccc;
           font-size: 12px;
       }
   }
   .remove{
       padding-top: 20px;
       font-size: 12px;
       color: #ff6801;
   }
   .customer-contact{
       padding-left: 10px;
       padding-right: 10px;
       :is(h3) {
           font-family: none;
           font-size: 18px;
           font-weight: 700;
           margin-bottom: 10px;
       }
   }
   .input-wrapper{
       width: 100%;
       :is(input) {
           width: 100%;
           padding-left: 15px;
           padding-top: 15px;
           padding-bottom: 15px;
           border-radius: 10px;
           border: 2px solid #ff6801;
       }
   }
    .email-input::placeholder {
        color: #999; /* 设置字体颜色 */
        font-size: 12px; /* 设置字体大小 */
        font-weight: 500; /* 设置字体粗细 */
    }
    .woocommerce-billing-fields{
        padding-left: 10px;
        padding-right: 10px;
        :is(h3) {
            font-family: "Merriweather", serif;
            margin: 20px 0 10px 0;
            font-size: 16px;
            font-weight: 600;
        }
    }
    .checkout_form_left{
        background-color: white;
    }
  .woocommerce form .form-row {
        padding-bottom: 10px !important;
    }
    .select2-container--default.select2-container--focus .select2-selection--single {
        border: 1px solid #cccccc !important;
        outline: none;
        border-radius: 8px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-top: 20px !important;
        font-size: 11px;
        font-weight: 400;
    }
    .form-row select {
        padding-top: 17px;
        padding-bottom: 15px;
        border-radius: 9px;
        border: 1px solid #dedede !important;
    }
    .select2-container .select2-selection {
        border: 1px solid #dedede;
    }
    #billing_country_field .required_field, #billing_state_field .required_field {
        color: #ff6801;
        font-size: 10px;
        position: relative;
        height: 0;
        left: 10px;
        z-index: 10;
        width: 200px;
    }
}
@media only screen and (max-width: 767px) {
    /* 外层容器内边距，让内容不贴边 */
    .shop-checkout-review-order-table {
      padding: 0 15px;
    }
  
    /* 每个商品项 */
    .checkout_cart_item {
      display: flex;
      align-items: center;
      padding: 0px 0;
      border-bottom: 1px solid #e1e1e1;
      margin: 0px 0px 0px 0px;
    }
    .checkout_cart_item:last-child {
      border-bottom: none;
    }
    .checkout_cart_item img {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      margin-right: 12px;
    }
    .checkout_cart_item .product-name {
      flex: 1;
    }
    .checkout_cart_item .product-total {
      text-align: right;
      min-width: 60px;
    }
  
    /* 优惠券表单 */
    .custom-coupon-form {
      margin: 10px 0;
      padding: 12px;
      border: 1px solid #e1e1e1;
      border-radius: 4px;
      background: #fafafa;
    }
    .custom-coupon-form .form-row {
      width: 100%;
      margin-bottom: 8px;
    }
    .custom-coupon-form input.input-text {
      width: 100%;
      box-sizing: border-box;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .custom-coupon-form button#coupon_button {
      width: 100%;
      padding: 10px;
      border: none;
      background: #333;
      color: #fff;
      border-radius: 4px;
      font-size: 16px;
    }
  
    /* 小计、折扣、运费、总计 */
    .cart-subtotal,
    .cart-discount,
    .order-total {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid #e1e1e1;
    }
    /* 最后一条 —— 订单总计，加粗并去掉下边框 */
    .order-total {
      font-weight: 600;
      border-bottom: none;
      margin-top: 8px;
    }
  
    /* “Pay for bank transfer” 特殊行 */
    #pay_bacs {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #e1e1e1;
    }
    #pay_bacs:last-child {
      border-bottom: none;
    }
  /* 父容器的行列间距调小 */
  .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;              /* 从12px→8px */
  }
  
  /* 重置行内默认 margin/padding */
  .woocommerce-billing-fields .form-row {
    width: auto !important;
    margin: 0;
    padding: 0;
  }
  
  /* 两等分字段：First/Last、Company/Country、Phone/Email */
  #billing_first_name_field,
  #billing_last_name_field,
  #billing_company_field,
  #billing_country_field,
  #billing_phone_field,
  #billing_email_field {
    flex: 1 1 calc(50% - 8px);
    box-sizing: border-box;
    margin-bottom: 8px;    /* 每行底部留8px */
  }
  
  /* 整行字段：Street address、Address 2 */
  #billing_address_1_field,
  #billing_address_2_field {
    flex: 1 1 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 三等分字段：Postcode / City / State */
  #billing_postcode_field,
  #billing_city_field,
  #billing_state_field {
    flex: 1 1 calc(33.333% - 8px);
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 输入框内边距也调小点 */
  .woocommerce-billing-fields input.input-text,
  .woocommerce-billing-fields select {
    padding: 6px 8px;      /* 比默认更紧凑 */
  }
  /* 1. Shipping 字段容器变 flex，多行多列 */
  .woocommerce-shipping-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;              /* 行列间隙 */
    margin: 0;             /* 去掉默认外边距 */
    padding: 0;
  }
  
  /* 2. First name / Last name 两等分 */
  #shipping_first_name_field,
  #shipping_last_name_field {
    flex: 1 1 calc(50% - 8px);
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 3. Street address / Address 2 整行 */
  #shipping_address_1_field,
  #shipping_address_2_field {
    flex: 1 1 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 4. Country 半行 */
  #shipping_country_field {
    flex: 1 1 calc(50% - 8px);
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 5. Postcode / City / State 三等分 */
  #shipping_postcode_field,
  #shipping_city_field,
  #shipping_state_field {
    flex: 1 1 calc(33.333% - 8px);
    box-sizing: border-box;
    margin-bottom: 8px;
  }
  
  /* 6. 去掉 WooCommerce 自带的宽度限制，让我们的 flex 生效 */
  .woocommerce-shipping-fields .form-row {
    width: auto !important;
    margin: 0;
    padding: 0;
  }
  
  /* 7. 输入框内边距微调，更紧凑 */
  .woocommerce-shipping-fields input.input-text,
  .woocommerce-shipping-fields select {
    padding: 6px 8px;
  }
    /* 改为纵向排布 */
    .woocommerce-checkout {
      display: flex;
      flex-direction: column;
    }
    /* 右侧区块先渲染并加点下边距 */
    .checkout_form_right {
      order: 1;
      margin-bottom: 20px;    /* 让它和下面的表格／表单隔开 */
    }
    /* 左侧区块后渲染 */
    .checkout_form_left {
      order: 2;
    }
    .customer-phone-favorable{display:none}
  }