.c-order {
    flex: 0 0 55%;
    max-width: 55%;
    padding: 0 25px 0 0;
    background-color: var(--main-background-color);
}

.order-page {
    width: 100%;
    height: 100%;
    background-color: var(--main-background-color);
}

.order-page__container {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 30px 30px 40px;
}

.order-page__container .title-section {
    display: none;
}

.c-order__radiobutton label {
    margin-bottom: 10px;
}

.c-order__checkbox label {
    margin-bottom: 10px;
}

.order-block {
    display: none
}
.order-page__container .container {
    margin: 0;
    padding: 0;
    max-width: none;
}

.order-block--current {
    display: block;
    -webkit-animation: showBlock .5s;
    animation: showBlock .5s
}
.payment-values__pay-info,
.payment-values__delivery-info,
.payment-values__info {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 10px;
}
.payment-values__pay-info,
.payment-values__pay,
.payment-values__info, 
.payment-values__name,
.payment-values__email,
.payment-values__phone,
.payment-values__delivery-info,
.payment-values__delivery {
    display: none;
}
.payment-values__pay-info._active,
.payment-values__pay._active,
.payment-values__info._active, 
.payment-values__name._active, 
.payment-values__email._active, 
.payment-values__phone._active, 
.payment-values__delivery-info._active,
.payment-values__delivery._active {
    display: block;
}

.payment-values__info-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--main-text-color);
    margin-bottom: 10px;
}
.payment-values__pay,
.payment-values__delivery,
.payment-values__name,
.payment-values__email,
.payment-values__phone {
    font-size: 14px;
    font-weight: 400;
    color: var(--secondary-text-color);
    margin-bottom: 5px;
}


@-webkit-keyframes showBlock {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes showBlock {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.order-slogan {
    color: #333;
    font-size: 28px
}

@media (max-width:1200px) {
    .order-slogan {
        position: absolute;
        top: 15px;
        left: 25px
    }
}



.order-tabs {
    display: flex;
    padding: 20px 0;
    flex-wrap: wrap;
}


.order-tabs__item {
    display: flex;
    align-items: center;
}

.order-tabs__text {
    font-size: 12px;
    color: var(--secondary-text-color)
}

.order-tabs__text--current {
    color: var(--main-text-color);
    font-weight: 500
}

.order-tabs__icon {
    width: 10px;
    height: 10px;
    display: block;
    margin: 0 8px;
    transform: rotate(-90deg);
}

.order-arrow {
    width: 15px;
    height: 15px;
    fill: #737373
}

.c-order__title {
    color: #333;
    font-size: 20px;
    margin-bottom: 20px;
    line-height: 20px
}

.delivery-details-list label {
    display: flex;
    padding-bottom: 20px;
    color: #545454;
    position: relative
}

.order-page .order-block label {
    position: relative
}

.c-form label [type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.c-form label:before {
    display: block;
    min-width: 15px;
    max-width: 15px;
    min-height: 15px;
    max-height: 15px;
    margin-right: 15px;
    content: '';
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff;
}

.agreement__label [type=checkbox] {
    position: absolute;
    top: 15px;
    left: 0;
    height: 100%!important;
    opacity: 0
}

.order-agreement .agreement__label span {
    padding-left: 40px
}

.order-agreement .agreement__label span::before {
    display: block;
    min-width: 15px;
    max-width: 15px;
    min-height: 15px;
    max-height: 15px;
    margin-right: 15px;
    content: '';
    border: 1px solid var(--border-color);
    background: #fff;
    position: absolute;
    left: 0
}



.active [type=radio]+span::before {
    background: #000
}

.order-agreement .agreement__label::before {
    display: none
}

.c-order__checkbox [type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%!important;
    opacity: 0
}

.c-order__title--small {
    color: #545454;
    font-size: 14px;
    margin-bottom: 20px
}

.order-steps-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.order-step-btn {
    margin: 5px;
    padding: 7px 12px;
    border-radius: 5px;
    background-color: var(--secondary-background-color);
    color: var(--third-text-color);
    transition: all 0.4s ease-in-out;
    font-size: 15px;
    height: fit-content;
}

.order-step-btn.order-step-btn--next {
    background: var(--accent-color);
    padding: 10px 15px;
}

.order-step-btn--prev {
    opacity: 0.8;
}

.order-step-btn:hover {
    background-color: var(--accent-color);
    opacity: 1;
}
.order-step-btn.order-step-btn--next:hover {
    background-color: var(--secondary-background-color);
}
.hasDatepicker {
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    padding: 13px 11px;
    border-radius: 5px;
    margin-bottom: 20px
}

.delivery-price-block {
    margin-left: 32px;
}

.order__title {
    font-size: 26px;
    font-weight: 400;
    color: var(--main-text-color);
}

.order-page .header__logo {
    width: 173px;
}

@media (max-width: 991px) {
    .order__title {
        font-size: 20px;
    }
}

.ui-datepicker {
    width: auto!important
}

.ui-datepicker-header {
    color: var(--main-text-color)!important;
    font-weight: 500!important;
    text-shadow: none!important;
    line-height: 30px!important;
    background-color: var(--main-background-color)!important;
    border: none!important
}

.c-order__list--item input,
.c-order__list--width textarea {
    color: #333;
    border: 1px solid #d9d9d9;
    width: 100%;
    border-radius: 5px;
    padding: 13px 11px;
    -webkit-appearance: none;
    margin-bottom: 15px;
    box-sizing: border-box
}

.c-order__list--item select {
    margin-bottom: 15px
}

.c-order-field__title {
    color: var(--main-text-color);
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 400
}

.c-order__payment label,
.c-order__payment li {
    display: flex;
    align-items: center
}

.c-order__payment li {
    margin-bottom: 20px;
    min-height: 20px;
    width: 100%;
}

.c-order__payment span {
    top: 0!important
}



.order-agreement {
    margin-bottom: 20px
}

.total-price-block .checkout-btn {
    color: var(--third-text-color);
    text-transform: uppercase;
    padding: 10px;
    border: none;
    background-color: var(--secondary-background-color);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    position: relative;
    border: none;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    margin-bottom: 5px;
}

.total-price-block .checkout-btn:hover {
    background-color: var(--accent-color);
}

.order-empty {
    border: 2px solid #f08080!important;
    -webkit-animation: orderBounce 1s ease;
    animation: orderBounce 1s ease
}

@-webkit-keyframes orderBounce {
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    60% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes orderBounce {
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }
    60% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.email-error {
    display: none
}

.email-error--open {
    display: block
}

@media (max-width: 991px) {
    .order-page__container {
        flex-direction: column-reverse;
        padding: 0;
        justify-content: flex-end;
    }
    .c-order {
        padding: 10px;
        width: 100%;
        max-width: none;
    }
}