/*
Module Name: 订单中心
Author: DouCo Co.,Ltd.
Author URI: https://www.douphp.com/
*/
/* 订单
----------------------------------------------- */
#order {
 margin-top: 20px;
}
#order h3 {
 font-size: 16px;
 font-weight: bold;
 margin: 10px 0;
 color: #19B4EA;
}
#order h3 .timeOut {
 color: #999;
}
#order h3 b {
 color: red;
}
/* -- cartBox -- */
#order .cartBox {
 border: 1px solid #E4E4E4;
}
#order .cartBox dl {
 border-bottom: 1px solid #E4E4E4;
 padding: 8px 0;
 zoom: 1;
 overflow: hidden;
 line-height: 180%;
 display: flex;
 justify-content: space-between;
}
#order .cartBox dl.head {}
@media (max-width: 768px) {
 #order .cartBox dl.head {
  display: none;
 }
}
#order .cartBox dl.head b {
 color: #999;
}
#order .cartBox dt {
 width: 40%;
 padding-left: 10px;
 box-sizing: border-box;
}
#order .cartBox dt a {
 display: flex;
}
#order .cartBox dt a img {
 margin-right: 8px;
}
#order .cartBox dd {
 width: 15%;
 text-align: center;
 white-space: nowrap;
}
#order .cartBox dd.last {
 text-align: right;
 padding-right: 20px;
}
@media (max-width: 992px) {
 #order .cartBox dt {
  width: auto;
  margin-bottom: 10px;
 }
 #order .cartBox dd {
  width: auto;
  padding: 0 5px;
 }
 #order .cartBox dd.subtotal {
  display: none;
 }
 #order .cartBox dd.handler {
  display: inline-block;
  width: auto;
 }
}
#order .cartBox dd.name a {
 color: #0072C6;
}
/* -- 购物车数量加减 -- */
#order .cartBox .numberBox {
 width: 80px;
 margin: 0px auto;
 zoom: 1;
 overflow: hidden;
}
#order .cartBox .numberBox input, #order .cartBox .numberBox span {
 float: left;
 background: url(../images/icon_add_minus.gif) no-repeat;
 cursor: pointer
}
#order .cartBox .numberBox input {
 width: 35px;
 background: none;
 border: none;
 border-top: 1px solid #e8e8e8;
 border-bottom: 1px solid #e8e8e8;
 height: 20px;
 background-color: #FFF;
 text-align: center;
}
#order .cartBox .numberBox span.minus {
 text-indent: -9999px;
 display: block;
 background-position: left 0;
 width: 20px;
 height: 20px;
}
#order .cartBox .numberBox span.plus {
 text-indent: -9999px;
 display: block;
 background-position: -22px 0;
 width: 20px;
 height: 20px;
}
/* -- cart -- */
#order .cart .cartAction {
 zoom: 1;
 overflow: hidden;
 padding: 5px;
}
#order .cart .cartAction .btn-gray {
 float: left;
}
#order .cart .cartAction .btn {
 float: right;
}
#order .cart .cartBtn {
 zoom: 1;
 overflow: hidden;
 margin-top: 20px;
}
#order .cart .cartBtn ul {
 float: right;
 width: 560px;
 background-color: #0072C6;
 line-height: 45px;
 padding-left: 20px;
}
#order .cart .cartBtn ul em {
 display: block;
 background-color: #E0E0E0;
 float: left;
 width: 390px;
 padding: 0 15px;
 font-size: 14px;
}
#order .cart .cartBtn ul a {
 background: url(../images/icon_addcart.png) no-repeat 10px 50%;
 display: block;
 float: right;
 text-align: left;
 box-sizing: border-box;
 width: 140px;
 padding-left: 45px;
 color: #FFF;
 font-size: 16px;
 font-weight: bold;
}
#order .cart .cartBtn ul a i {
 font-weight: bold;
}
@media (max-width: 768px) {
 #order .cart .cartBtn ul {
  float: none;
  width: auto;
  padding-left: 0;
 }
 #order .cart .cartBtn ul em {
  float: none;
  width: auto;
 }
 #order .cart .cartBtn ul a {
  float: none;
  width: auto;
 }
}
#order .cart .cartEmpty {
 border-bottom: 1px solid #CBD1D3;
 background-color: #EFEFEF;
 font-size: 14px;
 text-align: center;
 padding: 20px 0;
}
/* -- checkout -- */
#order .checkout .checkBox {
 border: 1px solid #EEE;
 padding: 15px 25px 40px 25px;
}
@media (max-width: 768px) {
 #order .checkout .checkBox {
  border: 0;
  padding: 15px 0;
 }
}
#order .checkout h2 {
 font-size: 14px;
 margin-bottom: 15px;
}
#order .checkout h2 .more {
 float: right;
 font-size: 13px;
 font-weight: normal;
 margin-top: 8px;
}
#order .checkout .box {
 border-bottom: 1px solid #E4E4E4;
 padding-bottom: 15px;
 margin-bottom: 20px;
}
#order .checkout .box .table-div dl dt {
 width: 80px;
 font-size: 12px;
}
#order .checkout .box .checkbox {
 color: #19B4EA;
 font-size: 13px;
}
#order .checkout .address {
 position: relative;
}
#order .checkout .address .title {
 margin-bottom: 8px;
}
#order .checkout .address .title i {
}
#order .checkout .address .title .edit {
 font-size: 12px;
 display: inline-block;
 border: 1px solid #CCC;
 background-color: #F5F5F5;
 color: #999;
 padding: 2px 10px;
 margin-left: 10px;
 cursor: pointer;
}
#order .checkout .address .title .edit:hover {
 background-color: #FFF;
}
#order .checkout .address .item {
 margin-bottom: 8px;
}
#order .checkout .address .item em {
 color: #999;
}
#order .checkout .action {
 position: absolute;
 right: 0;
 top: 10px;
 text-align: center;
 font-size: 12px;
}
@media(max-width: 992px) {
 #order .checkout .action {
  position: absolute;
  right: 0;
  top: 0;
 }
}
#order .checkout .action .switch {
 color: #0072C6;
 cursor: pointer;
}
@media(max-width: 992px) {
 #order .checkout .action .switch {
  display: inline-block;
  border: 1px solid #DDD;
  background-color: #F5F5F5;
  padding: 2px 10px;
  cursor: pointer;
  margin-right: 10px;
 }
}
#order .checkout .action .add {
 border: 1px solid #DDD;
 background-color: #F5F5F5;
 padding: 4px 10px;
 margin-top: 5px;
 cursor: pointer;
}
@media(max-width: 992px) {
 #order .checkout .action .add {
  display: inline-block;
  margin-top: 0;
  padding: 2px 10px;
 }
}
#order .checkout .payment {
 zoom: 1;
 overflow: hidden;
}
#order .checkout .payment dd {
 float: left;
 width: 170px;
}
#order .checkout .cartBox {
 border: 0;
}
#order .checkout .shipping dl {
 zoom: 1;
 overflow: hidden;
 padding: 0 0 10px 2px;
}
#order .checkout .shipping dt {
 float: left;
 width: 120px;
}
#order .checkout .shipping dd {
 float: left;
 width: 350px;
}
#order .checkout .coupon .item {
 padding: 0 0 10px 2px;
}
#order .checkout .coupon .item em {
 color: #999;
 margin-left: 10px;
}
#order .checkout .cartBox dl {
 border-bottom: 1px solid #EEE;
}
#order .checkout .totalAmount {
 border-bottom: 1px solid #E4E4E4;
 margin: 20px 0 20px;
 padding-bottom: 20px;
 zoom: 1;
 overflow: hidden;
}
#order .checkout .totalAmount .list {
 float: right;
 width: 300px;
}
#order .checkout .totalAmount dl {
 zoom: 1;
 overflow: hidden;
 text-align: right;
 margin-bottom: 10px;
}
#order .checkout .totalAmount dt {
 float: left;
 width: 150px;
}
#order .checkout .totalAmount dd {
 float: left;
 width: 150px;
}
#order .checkout .totalAmount b {
 color: red;
 margin-right: 3px;
}
#order .checkout .orderSubmit {
 text-align: right;
}
#order .checkout .orderSubmit .orderAmount {
 margin-right: 20px;
 font-size: 15px;
}
#order .checkout .orderSubmit .orderAmount b {
 font-weight: bold;
 color: red;
}
#order .checkout .orderSubmit .submit {
 background-color: #19B4EA;
 color: #FFFFFF;
 padding: 10px 40px;
 text-decoration: none;
 cursor: pointer;
 font-size: 16px;
}
#order .checkout .orderSubmit .submit:hover {
 background-color: #44C4EE;
}
/* -- contact-box -- */
#order .contact-box .overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
}
#order .contact-box .popup {
 position: fixed;
 bottom: -100%; /* 初始位置在屏幕外 */
 left: 0;
 width: 100%;
 background-color: white;
 z-index: 1001; /* 在遮罩层之上 */
 transition: bottom 0.3s ease-out;
}
#order .contact-box .popup.active {
 bottom: 0; /* 弹出到屏幕底部 */
}
#order .contact-box .head {
 font-size: 16px;
 font-weight: bold;
 padding: 15px 25px 0 25px;
 zoom: 1;
 overflow: hidden;
}
#order .contact-box .head i {
 float: right;
 font-size: 25px;
 cursor: pointer;
}
#order .contact-box .box {
 padding: 10px;
 max-height: 60vh;
 overflow: auto;
}
#order .contact-box .list {
}
#order .contact-box .list .item {
 padding: 15px;
 cursor: pointer;
}
#order .contact-box .list .item i {
 font-size: 20px;
 margin-right: 10px;
}
#order .contact-box .list .item.active {
 border: 1px solid #19B4EA;
 color: #19B4EA;
}
#order .contact-box .list .item.active i {
 color: #19B4EA;
}
#order .contact-box .form {
 padding: 15px 16px;
}
/* -- complete -- */
#order .complete {
 border: 1px solid #E4E4E4;
 padding: 130px 0;
 text-align: center;
}
#order .complete p {
 padding: 15px 0;
}
#order .complete p.title {
 font-weight: bold;
 font-size: 16px;
}
#order .complete p.info {
 color: #19B4EA;
 font-size: 26px;
}
#order .complete p.info b {
 color: red;
 margin-right: 3px;
}
/* -- cashier -- */
#order .cashier .info {
 font-size: 14px;
 margin: 10px 0;
 color: #999;
}
#order .cashier .info .orderAmount {
 float: right;
}
#order .cashier .info .orderAmount b {
 color: red;
}
#order .cashier .payBox {
 text-align: center;
 padding: 50px 0 50px 0;
}
#order .cashier .otherPay {
 margin-top: 10px;
}
#order .cashier .otherPay a {
 font-size: 14px;
 color: #0072C6;
}