@charset "UTF-8";
/*---Shopping Card Page---*/
.main[data-type="subsidiary"] .main__content{
    background-image: none !important;
}
.main__content{
    padding-block: 5.5rem 5rem;
}
.order-path{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
}
.order-path__step{
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    gap:1rem;
    align-items: center;
    width: 100%;
}
.order-path__step * {
    transition: var(--transition__regular);
}
.order-path__step-number{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 100%;
    background-color:var(--color__primary-10);
    border: 0.2rem solid var(--color__secondary-30);
    color: var(--color__secondary-30);
    padding-block-start: 0.3rem;
    font-size: var(--font-size__normal-large);
    font-family: var(--font__normal-large);
}
.order-path__step--active .order-path__step-number{
    background-color: var(--color__secondary-base);
    border-color:var(--color__secondary-base);
    color:var(--color__secondary-10)
}
.order-path__step--active .order-path__step-text{
    color:var(--color__secondary-base);
}
.order-path__step-text{
    color:var(--color__secondary-30);
}
.order-path__divider{
    animation:none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -11px);
    z-index: -1;
    width: 47%;
    transition: var(--transition__regular);
    border-top: 0.2rem dashed var(--color__secondary-30);
}
.order-path__divider--active{
    animation:divider_fadeIn 1s ease infinite;
}
.shopping-cart{
    margin-block-start: 5rem;
}
.shopping-cart--MIP{
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition__regular);
}
.shopping-cart--MIP--active{
    display: flex;
    opacity: 100%;
    visibility: visible;
    pointer-events: visible;
}
.shopping-cart__title, .final-invoice__title{
    font-size: var(--font-size__ordinary-title-two);
    font-family: var(--font__ordinary-title-two);
    color: var(--color__secondary-base);
    margin-block-end: 1.8rem;
}
.user-orders{
    width: 100%;
    border-collapse: separate;
    table-layout: fixed;
}
.user-orders td, .user-orders th{
    background-color: var(--color__light-10);
    text-align: center;
    color: var(--color__primary-90);
}
.user-orders thead th{
    padding-block: 1rem;
    font-size: var(--font-size__normal-large);
    border-left: 0.1rem dashed var(--color__secondary-20);
    text-wrap: nowrap;
    font-family: var(--font__medium-normal-medium);
}
.user-orders tbody td{
    padding: 2rem 1rem;
    border-left: 0.1rem dashed var(--color__secondary-20);
    min-height: 100%;
    height: 100%;
}
.user-orders thead tr th{
    border-top: 0.1rem solid var(--color__secondary-20);
    border-bottom: 0.1rem solid var(--color__secondary-20);
}
.user-orders tbody tr{
    position: relative;
}
.delete-product{
    position: absolute;
    padding: 0.5rem 1.3rem 0.1rem 1.3rem;
    background-color: var(--color__red);
    color: var(--color__white);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    text-align: center;
    cursor: pointer;
    font-size: var(--font-size__caption);
    transition: var(--transition__regular);
    transform: rotate(-90deg) translateX(32%);
    top: 58%;
    left: -2.8rem;
    z-index:5;
}
.delete-product:hover{
    background-color: var(--color__dark-red);
}
.user-orders thead tr th:first-child, .user-orders tbody tr td:first-child{
    width: 3rem !important;
}
.user-orders thead tr th:first-child, .user-orders tbody tr td:first-child{
    border-right: 0.1rem solid var(--color__secondary-20);
}
.user-orders thead tr th:last-child, .user-orders tbody tr td:last-child{
    border-left: 0.1rem solid var(--color__secondary-20);
}
.user-orders thead tr th:nth-child(3){
    width: 10rem;
}
.user-orders thead tr th:nth-child(4){
    width: 12rem;
}
.user-orders thead tr th:nth-child(5){
    width: 9rem;
}
.user-orders thead tr th:nth-child(6){
    width: 10rem;
}
.user-orders tbody tr:last-child td{
    border-bottom: 0.1rem solid var(--color__secondary-20);
}
.user-orders tbody tr:not(:last-child) td{
    border-bottom: 0.1rem dashed var(--color__secondary-20);
}
.user-orders thead tr th:first-child{
    border-top-right-radius: 1rem !important;
}
.user-orders thead tr th:last-child{
    border-top-left-radius: 1rem !important;
}
.user-orders tbody tr:last-child td:first-child{
    border-bottom-right-radius: 1rem !important;
}
.user-orders tbody tr:last-child td:last-child{
    border-bottom-left-radius: 1rem !important;
}
.number-of-product{
    height:100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.5rem;
}
.number-of-product__button{
    cursor: pointer;
}
.number-of-product__result{
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    min-height: 3.5rem;
    background-color: var(--color__primary-10);
    display: flex;
    padding-block-start: 0.2rem;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 0.1rem solid var(--color__primary-30);
    color: var(--color__primary-100);
}
.final-amount{
    background-color: var(--color__light-10);
    border:0.1rem solid var(--color__secondary-20);
    border-radius:1rem;
    padding:3.5rem 1.5rem;
    margin-block-start: 4.52rem;
}
.final-amount__title{
    text-align: center;
    font-family: var(--font__ordinary-title-three);
    font-size: var(--font-size__ordinary-title-three);
    color: var(--color__secondary-base);
    margin-block-end: 3.5rem;
}
.final-amount-list{
    display: flex;
    flex-flow: column nowrap;
    gap: 1.5rem;
}
.final-amount-list__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.final-amount-list .final-amount-list__item:first-child *{
    color: var(--color__primary-90);
}
.final-amount-list .final-amount-list__item:nth-child(2) *{
    color: var(--color__green);
}
.final-amount-list .final-amount-list__item:last-child *{
    /*color: var(--color__red);*/
}
.final-amount-list__item .final-amount-list__item-content, .final-amount-list__item .final-amount-list__item-content--result{
    font-size: var(--font-size__normal-small);
    font-family: var(--font__normal-small);
}
.total-shopping-cart{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block: 3.5rem;
    gap:1.5rem;
}
.total-shopping-cart * {
    font-size: var(--font-size__normal-large);
    font-family: var(--font__normal-large-medium);
    color: var(--color__primary-90);
}
.order-completion-button, .final-payment{
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition__regular);
    background-color: var(--color__primary-80);
    padding:0.7rem 3rem;
    border-radius: 0.8rem;
    cursor: pointer;
}
.final-payment{
    padding-inline: 5rem;
}
.order-completion-button span, .final-payment span{
    color:var(--color__white);
}
.order-completion-button:hover, .final-payment:hover{
    background-color: var(--color__primary-90);
}
.shipping-information__input{
    display: block;
    width: 100%;
    height: 3.5rem;
    border: 0.1rem solid var(--color__secondary-20);
    color: var(--color__primary-80);
    border-radius:0.7rem;
    background-color: var(--color__light-10);
    padding-inline: 1rem;
    direction: rtl;
    font-size: var(--font-size__medium-normal);
    font-family: var(--font__medium-normal-medium);
    transition: var(--transition__regular);
}
.shipping-information__input--valid{
    border-color : var(--color__green) !important;
}
.shipping-information__input--invalid{
    border-color : var(--color__red) !important;
}
.shipping-information__input:focus{
    border-color: var(--color__secondary-60);
}
.shipping-information__input::placeholder{
    color:var(--color__teriery-60);
    font-family: var(--font__caption);
}
.shipping-information__select-box{
    display: block;
    width: 100%;
    background-color: var(--color__light-10);
    color:var(--color__teriery-60);
    border: 0.1rem solid var(--color__secondary-20);
    font-family: var(--font__normal-small);
    font-size: var(--font-size__normal-small);
    border-radius: 0.7rem;
    padding: 0.5rem 1rem;
    outline: none;
}
.shipping-information__select-box--valid{
    border-color : var(--color__green) !important;
}
.shipping-information__select-box--invalid{
    border-color : var(--color__red) !important;
}
.shipping-information__input--area{
    overflow: auto;
    padding-block-start: 0.5rem;
    height:11.6rem;
    outline: none;
    resize:none;
}
.final-invoice{
    background-color: var(--color__light-10);
    border:0.1rem solid var(--color__secondary-20);
    border-radius: 1rem;
    padding:3rem 1.5rem;
}
.final-invoice__title{
    text-align: center;
}
.final-invoice-list{
    display: flex;
    flex-flow: column nowrap;
    gap:2rem;
}
.final-invoice__item{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.final-invoice__item--head{
    justify-content: space-around;
    margin-block-end: 2rem;
}
.final-invoice__item-content, .final-invoice__item-content--result{
    color: var(--color__primary-90);
}
.final-invoice__item-content[data-name="total-cost"], .final-invoice__item-content[data-name="total-cost"] + span{
    font-size: var(--font-size__normal-large);
    font-family: var(--font__normal-large-medium);
}
.final-invoice__item:last-child{
    font-weight: bolder;
}
.final-invoice__item-content--head{
    display: block;
    width: 100%;
    border: 0.2rem solid var(--color__secondary-20);
    padding-block: 1rem;
    text-align: center;
    font-size: var(--font-size__normal-large);
    font-family: var(--font__normal-large-medium);
}
.final-invoice__item-content--head:first-child{
    border-top-right-radius: 2rem;
}
.final-invoice__item-content--head:last-child{
    border-bottom-left-radius: 2rem;
}
.payment-method{
    margin-block-start: 4rem;
    display: flex;
    align-items: center;
    gap:0.7rem;
}
.payment-method__input{
    accent-color: var(--color__primary-60);
}
.payment-method__label{
    color: var(--color__primary-80);
    font-size: var(--font-size__normal-small);
}
.final-payment{
    margin-block-start: 3.5rem;
}
.warning-not-login{
    width: 100%;
}
.warning-not-login__icon, .empty-shopping-cart__icon{
    margin-inline: auto;
    width: 12rem;
    height:12rem;
}
.warning-not-login__icon img, .empty-shopping-cart__icon img{
    width: 100%;
    height: 100%;
}
.warning-not-login__sub-title, .empty-shopping-cart__sub-title{
    width: 100%;
    max-width: 60rem;
    margin-block-start:3rem;
    margin-inline: auto;
    text-align: center;
    color:var(--color__secondary-base);
    font-size: var(--font-size__normal-large);
    font-family: var(--font__normal-large-medium);
    line-height: 1.5;
}
.warning-not-login__wrapper{
    margin-block-start: 4rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.warning-not-login__link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 3.7rem;
    background-color: var(--color__primary-80);
    border-radius:1rem;
    transition: var(--transition__regular);
    color: var(--color__white);
}
.warning-not-login__link:hover{
    background-color: var(--color__primary-90);
}
.empty-shopping-cart{
    width: 100%;
}
.empty-shopping-cart__link{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0.6rem 3rem;
    width:fit-content;
    margin-block-start: 2rem;
    margin-inline: auto;
    height: 3.7rem;
    background-color: var(--color__primary-80);
    border-radius:1rem;
    transition: var(--transition__regular);
    color: var(--color__white);
}
.empty-shopping-cart__link:hover{
    background-color: var(--color__primary-90);
}
/*---Animation---*/
@keyframes divider_fadeIn {
    100%{
        border-color: var(--color__dark-red);
    }
}
@media only screen and (max-width:992px) {
    .final-amount {
        margin-block-start: 2.5rem;
    }
    .final-amount-list__item .final-amount-list__item-content, .final-amount-list__item .final-amount-list__item-content--result {
        font-size: var(--font-size__medium-normal);
        font-family: var(--font__medium-normal);
    }
}
@media only screen and (max-width:768px){
    .user-orders thead th {
        font-size: var(--font-size__normal-small);
        font-family: var(--font__medium-normal-medium);
    }
    .user-orders thead tr th:nth-child(3), .user-orders tbody tr td:nth-child(3){
        width: 7rem !important;
    }
    .user-orders thead tr th:nth-child(4), .user-orders tbody tr td:nth-child(5){
        width: 9rem !important;
    }
    .user-orders thead tr th:nth-child(5), .user-orders tbody tr td:nth-child(5){
        width: 8rem !important;
    }
    .user-orders thead tr th:nth-child(6), .user-orders tbody tr td:nth-child(6){
        width: 8rem !important;
    }
}
@media only screen and (max-width:576px){
    .user-orders tbody tr td:nth-child(2){
        font-size: var(--font-size__caption);
        font-family: var(--font__medium-normal-medium);
    }
}
@media only screen and (max-width:475px){
    .user-orders thead th {
        font-size: var(--font-size__caption);
    }
    .user-orders thead tr th:nth-child(3), .user-orders tbody tr td:nth-child(3){
        width: 6rem !important;
    }
    .user-orders thead tr th:nth-child(4), .user-orders tbody tr td:nth-child(5){
        width: 7rem !important;
    }
    .user-orders thead tr th:nth-child(5), .user-orders tbody tr td:nth-child(5){
        width: 7rem !important;
    }
    .user-orders thead tr th:nth-child(6), .user-orders tbody tr td:nth-child(6){
        width: 8rem !important;
    }
    .number-of-product__result {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        min-height: 2.5rem;
    }
}
@media only screen and (max-width: 430px) {
    .user-orders thead tr th:nth-child(3), .user-orders tbody tr td:nth-child(3){
        display: none;
    }
}