/* ----------------------------------- */
/* __---CHECK OUT PAGE CSS---___ */
/* ----------------------------------- */

.address {background-color: var(--c-light-bg); padding-block: 24px;}
.address .wrapper {display: grid; grid-template-columns: minmax(465px, 900px) minmax(250px, 450px); gap: 20px;}
.address .head {background-color: #fff; padding: 16px 24px;  border-radius: 8px;}
.address :where(.head, .payment) > :first-child {font-size: calc(var(--fs-base) + 4px); margin-bottom: 12px; font-weight: 700; color: var(--_c-dark);}
.address .payment {background-color: #fff; padding: 16px 24px; margin-block: 12px; border-radius: 8px;}
.address .credit-card {display: flex; align-items: center; gap: 10px;}
.address .credit-card > :first-child {display: flex; align-items: center; justify-content: center; border: 1px solid var(--_c-border);padding: 1px 4px; }
.address .credit-card > :nth-child(2) {font-size: var(--fs-xs); font-weight: 700; color: var(--_c-dark);}
.address .company-img {display: flex; align-items: center; gap: 4px; margin-top: 5px;}
.address .company-img > :first-child {display: flex; align-items: center; justify-content: center; border: 1px solid var(--_c-border);}
.address .company-img img {height: 14px; width: auto;}
.address .item {background-color: #fff; padding: 16px 24px; border-radius: 8px;}
.address .item > :where(:not(:first-child)) {border-bottom: 1px solid var(--_c-border);}
.address .item > :last-child {border-bottom: transparent;}
.address .item button {background: transparent; border: 0; width: 100%;}
.address .choiced {display: flex; align-items: center; justify-content: space-between;}
.address .choiced > :first-child {display: flex; align-items: center; gap: 12px; cursor: pointer;}
.address .choiced img {height: 16px; cursor: pointer;}
.address .choiced > :first-child > :nth-child(2) {font-size: calc(var(--fs-xs) + 1px); font-weight: 700; line-height: 20px; color: var(--_c-dark);}
.address .itemImg {display: flex; gap: 12px; padding-bottom: 10px; margin-block: 12px;}
.address .itemImg img {border-radius: 5px; height: 120px; width: 120px;}
.address .itemDescribe > :first-child {font-size: var(--fs-base); line-height: 21px; font-weight: 700;}
.address .itemDescribe > :nth-child(2) {display: block; font-size: calc(var(--fs-xs) - 2px); line-height: 16px; color: #999; margin-block: 2px;}
.address .aboutPrice {width: 150px; display: flex; flex-direction: column; align-items: start; justify-content: center;}
.address .aboutPrice > * {width: 100%; display: flex; align-items: center; gap: 1rem; font-size: calc(var(--fs-xs) - 1px); line-height: 16px; font-weight: 700;}
.address .aboutPrice > * > :first-child {width: 55px;}
.address .aboutPrice > :first-child { font-size: calc(var(--fs-xs) - 2px); line-height: 16px; }
.address .aboutPrice > :first-child > :first-child {width: unset;}
.address .aboutPrice > :nth-child(2) {margin-top: 16px;}
.address .estimate {display: flex; align-items: center; justify-content: space-between; gap: 1px; cursor: pointer;}
.address .time {display: flex; flex-direction: column; gap: 2px;}
.address .time > :where(:first-child, :last-child) {color: var(--_c-dark); font-size: calc(var(--fs-xs) - 1px);}
.address .time > :last-child > :first-child,
.address .time > :first-child {font-weight: 700;} 
.address .time > :first-child {align-self : start;}
.address .estimate img {height: 12px; width: 12px;}

.address  :where(.summary , .safeInfo) {background-color: #fff; padding: 16px 24px; border-radius: 8px;}
.address .summary {margin-bottom: 16px;}
.address .summary > :first-child {font-size: calc(var(--fs-base) + 4px); font-weight: 700; line-height: 1; color: var(--_c-dark);}
.address .subTotal {padding-block: 16px; border-bottom: 1px solid var(--_c-border);}
.address .subTotal > * {display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--fs-xs) + 1px); font-weight: 600; line-height: 12px; color: var(--_c-dark);}
.address .subTotal > :not(:last-child) {padding-bottom: 12px;}

.address .total {display: flex; justify-content: space-between; margin-block: 16px 10px;}
.address .total > :nth-child(2) {display: flex; flex-direction: column; align-items: end;}
.address .total > :first-child {font-size: calc( var(--fs-sm) + 1px); font-weight: 700;}
.address .total > :nth-child(2) > :first-child {font-size: calc(var(--fs-md) - 2px); font-weight: 700; line-height: 1;}
.address .total > :nth-child(2) > :nth-child(2) {font-size: calc(var(--fs-xs) - 1px); color: #999999;}
.address .summary .place {width: 100%; font-size: calc(var(--fs-base) + 2px); font-weight: 700; line-height: 24px; padding-block: 10px;}
.address .terms {font-size: calc(var(--fs-xs) - 1px); text-align: center; padding-top: 16px;}
.address .terms > :first-child  {max-width: 300px; display: block; color: #999; margin-inline: auto;}
.address .terms > :first-child > :first-child {display: inline; text-decoration: unset; color: var(--c-primary); padding-bottom: 3px; position: relative;}
.address .terms > :first-child > :first-child::before {content: ""; position: absolute; width: 100%; transform: scaleX(0); border-radius: 5px; height: 1px; bottom: 2px; left: 0; background: var(--c-primary); transform-origin: bottom right; transition: transform .25s ease-out;}
.address .terms > :first-child > :first-child:hover::before {transform: scaleX(1); transform-origin: bottom left;}

.address .safeInfo > :first-child {display: flex; align-items: center; gap: 5px;}
.address .safeInfo > :first-child img {height: 20px; width: 20px;}
.address .safeInfo > :nth-child(2) {font-size: calc(var(--fs-xs) + 1px); padding-block: 12px; color: #666;}
.address .safeInfo > :last-child {height: 22px; width: auto;}

@media only screen and (max-width: 768px) {
    .address .wrapper {grid-template-columns: 1fr;}
}
@media only screen and (max-width: 576px) {
    .address .itemImg {flex-direction: column;}
}
@media only screen and (max-width: 576px) {
    .address .summary .btn {font-weight: 500; padding-block: 6px;}
}

.addressSection {width: 100%; height: 100%; display: flex;}
.addressSection .title {font-size: calc(var(--fs-sm) + 2px); color: var(--_c-dark); padding-block: 12px 16px;}
.addressSection label {display: block; font-size: calc(var(--fs-xs) + 1px); font-weight: 700; line-height: 20px; margin-bottom: 12px;}
.addressSection .addressBox > :nth-child(2) { margin-block: 16px;}
.addressSection input {width: 100%; height: 40px; margin-left:2px; font-size: calc(var(--fs-xs) - 1px); padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; outline: 0;}
.addressSection input::placeholder {color: var(--_c-font-color);}
.addressSection input:focus {outline: 1px solid #000; border: 1px solid transparent;}
.addressSection .contactInfo {display: flex; gap: 16px;}
.addressSection .contactInfo > div {width: 100%;}
.addressSection .contactInfo > :first-child > :last-child {font-size: calc(var(--fs-xs) - 1px); line-height: 1.5; color: #666; margin-top: 6px;}
.addressSection .contactInfo > :nth-child(2) {width: 100%; display: flex;}
.addressSection .contactInfo > :nth-child(2) > :first-child {width: 40px; padding:8px; border-top-right-radius: unset; border-bottom-right-radius: unset; border-right: unset;}
.addressSection .addressInfo > :first-child {display: flex; gap: 16px; align-items: end;}
.addressSection .addressInfo > :first-child > :where(:first-child, :nth-child(2)) {width: 100%;}
.addressSection .addressInfo > :nth-child(2) {display: flex; gap: 16px; margin-block: 16px 24px;}
.addressSection .addressInfo > :nth-child(2) > :where(:first-child, :nth-child(2), :last-child) {width: 100%;}

@media only screen and (max-width: 768px) {
    .addressSection .box {margin-inline: 15px;}
}
@media only screen and (max-width: 576px) {
    .addressSection .box {padding: 0 20px 70px;}
    .addressSection .addressInfo > :nth-child(2) {flex-direction: column; margin-block: 16px;}
    .addressSection .contactInfo > :nth-child(2) > :first-child{ width: 56px;}
}
@media only screen and (max-width: 475px) {
    .addressSection .contactInfo {flex-direction: column;}
    .addressSection input, select {height: 35px;}
    .addressSection .addressBox > :nth-child(2) {margin-block: 12px;}
    .addressSection .addressInfo > :nth-child(2) {flex-direction: column; margin-block: 12px;}
    .addressSection .addressInfo > :first-child {flex-direction: column;}
}