@charset "utf-8";


/* cart_order.html */

.content {
    width: 100%;
    margin-top: 20px;
}

.co_how{
    display: flex; justify-content: space-between;
}

#orderSetTime {
    display: flex;
    align-items: center;
    letter-spacing: -0.04em;
    font-size: 12px;
}

#orderSetTime img{
    width: 12px;
    height: 12px;
    display: inline-block;
    padding-right: 4px;
}

.co_address{
    margin-top: 20px;
    border: 1px solid #F6F6F6;
    border-radius: 5px;
    padding: 15px;
}

.hr-8 {
    width: 100%;
    border: none;
    border-bottom: 10px solid #F6F6F6;
    margin: 20px 0;
    box-sizing: border-box;
}

.content h4{
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 10px;
}

#shopName,
#shopAddr,
#recipientPhone{
    font-size: 14px;
    font-weight: 400;
    display: block;
}

.hr-ad{
    width: 100%;
    height: 1px;
    background-color: #F6F6F6;
    border: none;
    margin: 15px 0;
}

.text-bold{
    color: #000;
}

#memberPhone-group{
    position: relative;
}
#memberPhone-group button{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#memberPhone-group button img{
    width: 6px;
    height: 12px;
    object-fit: contain;
}

/* 배달연락처 변경 */
#inputPhoneChange-group input{
    border: 1px solid #F6F6F6;
    width: 60%;
    height: 36px;
    padding-left: 15px;
    margin-top: 0px;

}
#inputPhoneChange-group input::placeholder{
    color: #D9D9D9;
    font-size: 14px;
}

#inputPhoneChangeBtn{
    background-color: #452812;
    font-size: 12px;
    padding: 4px 10px;
}

#inputPhoneChangeCancelBtn{
    background-color: #C3A792;
    font-size: 12px;
    padding: 4px 10px;
}
/* 배달연락처 변경 end*/

.border-dynamic-gray {
    border: var(--border-width) solid #F6F6F6;
    border-radius: 5px;
}

.co_msg input{
    border: 1px solid #F6F6F6;
    width: 100%;
    height: 36px;
    padding-left: 15px;
    margin-top: 10px;
}

.co_msg input::placeholder{
    color: #D9D9D9;
    font-size: 14px;
}

#deli_Req{
    margin-top: 20px;
}

#couponCnt{
    color: #452812;
    font-size: 12px;
}

.point-container{
    position: relative;
}
.point-container>div{
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}
.point-container .btn_useall{
    color: #452812;
    border: 1px solid #452812;
    border-radius: 5px;
    font-size: 12px;
    width: 64px;
    height: 26px;
}

.save-point{
    position: absolute;
    color: #452812;
    font-size: 12px;
    right: 0;
    top: -33px;
}

.input-container input {
    padding-right: 20px;
}


.input-container{
    display: flex;
    align-items: center;
}

.input-container #usingPoint{
    border-width: 0 0 1px;
    border-bottom: 1px solid #D9D9D9;
    text-align: right;
    font-size: 14px;
    line-height: 14px;
    width: 140px;
}

.point-container .fixed-text{
    color: #000;
    font-size: 16px;
    line-height: 10px;
    line-height: 14px;
}

#usingPoint::placeholder{
    color: #767676;
    font-size: 14px;
}

/* 결제정보 */
.payChoiceContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    gap: 50px;
}

.payChoiceContainer .custom-radio .card-box{
    display:flex;
    justify-content: center;
    width: 52px;
    height: 36px;
    margin: 0 auto;
}
.payChoiceContainer .custom-radio img{
    width: 48px;
    height: 30px;
    opacity: 0.9;
}
.payChoiceContainer .custom-radio:nth-child(2) img{
    width: 52px;
    height: 36px;
}

.payChoiceContainer .custom-radio p{
    font-size: 13px;
    margin: 4px 0 10px;
    font-weight: 600;
}


.custom-radio .radio-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #D9D9D9;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.custom-radio input[type="radio"]:checked + .radio-btn {
    width: 16px;
    height: 16px;
    border: 2px solid #452812;
}

.custom-radio .radio-btn .indicator {
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #452812;
    transform: translate(-50%, -50%);
}

#simplePayInfo{
    display: flex;
    flex-wrap: wrap;
    
}
#simplePayInfo>div{
    margin-bottom: 15px;
    width: 100%;
}

#simplePayInfo input {
    border: 1px solid #F6F6F6;
    width: 56px;
    height: 26px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}
#simplePayInfo input::placeholder{
    color: #D9D9D9;
    letter-spacing: 1px;
}

#simplePayInfo img{
    margin: 0 4px;
}

#simplePayInfo .w50{
    width: 50%;
}
#simplePayInfo .w50 input{
    width: 40px;
}

#simplePayInfo .bday input {
    width: 100px;
}

.custom-radio input[type="radio"]:checked .img-gra {
    opacity: 0.15;
}



/* 결제금액 */

.co_price ul{
    margin-top: 10px;
    margin-left: 15px;
}
.co_price li{
    margin-bottom: 4px;
    font-size: 14px;
}

.co_price li:last-child{
    font-weight: 600;
    margin-top: 16px;
    margin-left: -15px;
}

.co_price li #totalPrice{
    font-size: 16px;
    font-weight: 600;
}


.cart_order_terms{width: 100%; margin-top: 20px;}
.cart_order_terms > .accordion {
background-color: #efefef;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.cart_order_terms .active,.cart_order_terms .accordion:hover {
background-color: #efefef;
}

/* .cart_order_terms .accordion:after {
content: '▼';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
 */
.cart_order_terms .active:after {
content: "▲";
}

.cart_order_terms .panel {
padding: 0;
background-color: white;
max-height: 0;
overflow: hidden;
}
.cart_order_terms .panel p{padding: 15px 0; max-height: 150px; overflow-y:scroll;}


.cart_order_terms > .accordion {
    background-color: #F6F6F6;
    color: #767676;
    cursor: pointer;
    padding: 12px 5%;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    border-bottom: 1px solid #fff;
    font-size: 13px;
    position: relative;
}

.cart_order_terms .accordion:after {
    content: '';
    float: none;
    margin-left: 5px;
    background: url(../images/ic_down.png) center center no-repeat;
    width: 12px;
    height: 6px;
    background-size: 100% 100%;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.cart_order_terms .active:after {
    content: '';
    transform: rotate(180deg)
    }
    

.cart_order_terms .panel p {
    padding: 15px 5%;
    max-height: 150px;
    overflow-y: scroll;
    font-size: 12px;
    color: #767676;
}

#btn-pay{
    font-size: 16px;
    font-family: Pretendard-SemiBold;
    color: #fff;
    margin-top: 20px;
    width: 100%;
    background-color: #452812;
    padding: 0;
    border-radius: 5px;
    border: none;
    height: 50px;
}

/* 쿠폰, 쿠폰 팝업*/
.co_coupon>div{
    display: flex; justify-content: space-between;
    align-items: baseline;
}

.co_coupon .slc-coupon ul{
    width: 100%;
    margin-top: 10px;
}
.co_coupon .slc-coupon ul li{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #767676;
    align-items: center;
    margin-bottom: 10px;
}
.co_coupon .slc-coupon ul li:last-child{
    margin-bottom: 0;
}
.co_coupon .slc-coupon ul li .coupon-name{
    width: 75%;
}
.co_coupon .slc-coupon ul li .coupon-name img{
    display: inline;
    margin-right: 5px;
}

.coupon-box #title {
    margin-bottom: 5px;
}

.coupon-box #tag {
    color: #767676;
    font-weight: normal;
    font-size: 12px;
}

.popup .popup-box .popup-text p.cprice2,.coupon-download > div > p.cprice2 > b{
    color: #452812;
    font-size: 12px;
}

.empty-st{
    color: #767676 !important;
}


/* 240808 cart_order_simplepay.html*/

#simplePayInfo2{
    display: flex;
    flex-wrap: wrap;
}
#simplePayInfo2>div{
    margin-bottom: 15px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #f6f6f6;
    padding: 20px 15px;
    display: flex;
    flex-wrap: wrap;
}
#simplePayInfo2>div:last-child{
    margin-bottom: 0;
}

#simplePayInfo2 .card_num{
    width: 100%;
}

#simplePayInfo2 input {
    border: 1px solid #F6F6F6;
    width: 56px;
    height: 26px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
}
#simplePayInfo2 input::placeholder{
    color: #D9D9D9;
    letter-spacing: 1px;
}

#simplePayInfo2 img{
    margin: 0 4px;
    width: 8px;
}

#simplePayInfo2 .w50{
    width: 50%;
}
#simplePayInfo2 .w50 input{
    width: 40px;
}

#simplePayInfo2 .bday input {
    width: 100px;
}


#simplePayInfo .card-rgsted input::placeholder{
    color: #767676;
}
.othercard{
    font-size: 14px;
    font-weight: 600;
}

.content h4 {
    width: 100%;
}


/* 240808 쿠폰 팝업 수정 */

.coupon-box {
    border: 1px solid #767676;
    border-radius: 5px;
    position: relative;
}
.coupon-box .custom-radio{
    float: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}
.coupon-box .coupon-download > div{
    width: 85%;
}
.coupon-box .coupon-download > div:last-child {
    margin-left: 0px;
}

/* 240809 */

#simplePayInfo2 h4 {
    margin-top: 15px;
}

#simplePayInfo2 h4:first-child {
    margin-top: 0;
}

/* 240812 예약, 픽업 상단 */

.co_reserve #info #time{
    font-weight: 600;
    font-size: 16px;
}

#resvMemCount{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#resvMemCount p{
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

#resvMemCount .rsvNumBtn{
    display: flex;
    width: auto;
}

#resvMemCount .rsvNumBtn #rsvNum{
    font-size: 14px;
    line-height: 14px;
}

#resvMemCount .rsvNumBtn>div{
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    margin: 0 10px;
}


#resvMemCount .border-circle {
    width: 18px;
    height: 18px;
   text-align: center;
   font-size: 14px;
   line-height: 14px;
   color: #767676;
   display: flex;
   justify-content: center;
   align-items: center;
}

#co_pickup{
    border: none;
    padding: 0;
}

#co_pickup{
    border: 1px solid #F6F6F6;
    padding: 15px;
}

/* 240820 */
#btn-pay {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
     font-family: Pretendard-SemiBold;
    font-weight: 500;
    border: none;
    padding: 0;    
}

/* 240820 상세주소 */
#deliMemAddr{
    border: 1px solid #F6F6F6;
    width: 100%;
    height: 36px;
    padding-left: 15px;
    margin-top:6px;
}

#deliMemAddr::placeholder{
    color:#D9D9D9;   
}

/* 240822 */
#info{
    position: relative;
}
#info button,
#memberPhone-group button {
    position: absolute;
    top: auto;
    transform: none;
    right: 0;
    bottom: 0;
}
#info button img{
    width: 6px;
    height: 12px;
    object-fit: contain;
}
#shopName,
#shopName2 {
    font-size: 14px;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}

.edit-area{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#inputAddChange-group input,
#inputPhoneChange-group input {
    border: 1px solid #F6F6F6;
    width: auto;
    height: 36px;
    padding-left: 10px;
    margin-top: 0px;
}

#inputAddChange-group input,
#inputPhoneChange-group input{
    border: 1px solid #F6F6F6;
    width: 75%;
    height: 36px;
    padding-left: 10px;
    margin-top: 0px;
}
#inputAddChange-group input::placeholder,
#inputPhoneChange-group input::placeholder{
    color: #D9D9D9;
    font-size: 13px;
}

#inputAddChangeBtn,
#inputPhoneChangeBtn{
    background-color: #452812;
    font-size: 12px;
    padding: 4px 10px;
    height: 26px;
    white-space: nowrap;
    margin-left: 5px;
}

#inputAddChangeCancelBtn,
#inputPhoneChangeCancelBtn{
    background-color: #C3A792;
    font-size: 12px;
    padding: 4px 10px;
    height: 26px;
    white-space: nowrap;
    margin-left: 2px;
}


/* 240827 */

#simplePayInfo input{
    text-align: left;
    padding-left: 6px;
}

#simplePayInfo input::placeholder,
#simplePayInfo2 input::placeholder{
    color: #D9D9D9;
}

#simplePayInfo2 h4:first-child {
    margin-top: 15px;
}
#simplePayInfo2 .card-rgsted h4{
    margin-top: 0;
}

.cart_order_terms .active:after {
    content: '';
    transform: translateY(-50%) rotate(180deg);
}

/* 240903 */

#simplePayInfo .card_num input::placeholder,
#simplePayInfo2 .card_num input::placeholder {
    color: #D9D9D9;
}

/* 240904 */
.co_coupon .slc-coupon ul {
    width: 100%;
    margin-top: 0px;
}
.co_coupon .slc-coupon ul li{
    margin-top: 10px;
}