.ck-wizard {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .045)
}

.ck-wizard__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 560px;
    margin: 0 auto 28px
}

.ck-wizard__steps>i {
    height: 3px;
    flex: 1;
    background: #ececec;
    position: relative
}

.ck-wizard__steps>i:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #00102b;
    transform: scaleX(0);
    transform-origin: right;
    transition: .3s
}

.ck-wizard.is-step-2 .ck-wizard__steps>i:after {
    transform: scaleX(1)
}

.ck-wizard__step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    font-weight: 700
}

.ck-wizard__step b {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f3f3f3;
    color: #999;
    transition: .25s
}

.ck-wizard__step.active {
    color: #171717
}

.ck-wizard__step.active b {
    background: #00102b;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 35, 60, .25)
}

.ck-wizard__panel {
    display: none
}

.ck-wizard__panel.active {
    display: block
}

.ck-wizard__title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0f0f0
}

.ck-wizard__title>span {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #fff0f2;
    color: #00102b;
    font-size: 17px
}

.ck-wizard__title h3 {
    font-size: 17px;
    font-weight: 900;
    margin: 0 0 3px
}

.ck-wizard__title p {
    font-size: 11px;
    color: #999;
    margin: 0
}

.ck-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.ck-input {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.ck-input label {
    font-size: 12px;
    font-weight: 800
}

.ck-input input {
    height: 45px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 13px;
    outline: 0;
    transition: .2s
}

.ck-input input:focus {
    border-color: #00102b;
    box-shadow: 0 0 0 3px rgba(239, 35, 60, .07)
}

.ck-input small {
    font-size: 9px;
    color: #999
}

.ck-input.is-valid input {
    background: #f5fbf7;
    border-color: #b8dfc5
}

.ck-wizard__address-title {
    margin-top: 28px
}

.ck-address-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 17px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 13px
}

.ck-address-box .ck-field-group {
    margin: 5px 0
}

.ck-address-box #ck-new-address {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.ck-address-box select,
.ck-address-box textarea {
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    color: #333;
}

.ck-address-box select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px;
    padding-right: 12px;
}

.ck-wizard__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px
}

.ck-wizard__actions button {
    border-radius: 11px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer
}

.ck-wizard__back {
    border: 1.5px solid #e4e4e4;
    background: #fff;
    color: #333
}

.ck-wizard__next {
    border: 0;
    background: #00102b;
    color: #fff;
    min-width: 190px;
    box-shadow: 0 5px 14px rgba(239, 35, 60, .2)
}

#ck-wizard-payment-slot .ck-payment-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

#ck-wizard-payment-slot .ck-payment-item {
    min-height: 72px;
    border-radius: 13px;
    padding: 14px;
    background: #fff;
    position: relative
}

#ck-wizard-payment-slot .ck-payment-item.active {
    border-color: #00102b;
    background: #fff7f8;
    box-shadow: 0 0 0 3px rgba(239, 35, 60, .06)
}

#ck-wizard-payment-slot .ck-payment-item input {
    width: 17px;
    height: 17px
}

.ck-payment-note {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #effaf4;
    border: 1px solid #d9f0e3;
    color: #267449;
    border-radius: 12px;
    padding: 13px 15px;
    margin-top: 18px
}

.ck-payment-note>i {
    font-size: 23px
}

.ck-payment-note div {
    display: flex;
    flex-direction: column
}

.ck-payment-note b {
    font-size: 12px
}

.ck-payment-note small {
    font-size: 9px;
    margin-top: 2px
}

.ck-cart-hidden .ck-items-header,
.ck-cart-hidden>#ck-items,
.ck-cart-hidden>#ck-related-header,
.ck-cart-hidden>.ck-related-slider,
.ck-cart-hidden>.ck-trust-strip {
    display: none !important
}

.ck-summary.ck-wizard-mode #ck-main-checkout-btn,
.ck-summary.ck-wizard-mode .ck-continue-btn {
    display: none
}

.ck-summary.ck-wizard-mode>.ck-field-group,
.ck-summary.ck-wizard-mode>#ck-new-address,
.ck-summary.ck-wizard-mode>.ck-payment-list {
    display: none !important
}

@media(max-width:700px) {
    .ck-wizard {
        padding: 17px 13px
    }

    .ck-wizard__step span {
        font-size: 10px
    }

    .ck-customer-grid {
        grid-template-columns: 1fr
    }

    .ck-address-box #ck-new-address {
        grid-template-columns: 1fr
    }

    .ck-address-box #ck-new-address .ck-field-group:last-child {
        grid-column: auto
    }

    #ck-wizard-payment-slot .ck-payment-list {
        grid-template-columns: 1fr
    }

    .ck-wizard__actions {
        flex-direction: column-reverse
    }

    .ck-wizard__actions button {
        width: 100%
    }
}

#ck-wizard-payment-slot .ck-payment-item>i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff0f2;
    color: #00102b;
    font-size: 17px
}

#ck-wizard-payment-slot .ck-payment-item>span {
    display: flex;
    flex-direction: column;
    gap: 3px
}

#ck-wizard-payment-slot .ck-payment-item>span b {
    font-size: 12px
}

#ck-wizard-payment-slot .ck-payment-item>span small {
    font-size: 9px;
    color: #999
}

/* checkout-visible-flow */
.ck-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 8px auto 28px;
    padding: 17px 24px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, .04)
}

.ck-flow__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    color: #aaa;
    transition: .25s
}

.ck-flow__item>b {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f3f3f3;
    color: #aaa;
    font-size: 15px;
    transition: .25s
}

.ck-flow__item>span {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.ck-flow__item strong {
    font-size: 13px;
    font-weight: 900
}

.ck-flow__item small {
    font-size: 9px;
    color: #aaa
}

.ck-flow__line {
    width: 80px;
    height: 3px;
    background: #ececec;
    margin: 0 12px;
    position: relative;
    overflow: hidden
}

.ck-flow__line:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #00102b;
    transform: scaleX(0);
    transform-origin: right;
    transition: .35s
}

.ck-flow__item.active {
    color: #171717
}

.ck-flow__item.active>b {
    background: #00102b;
    color: #fff;
    box-shadow: 0 5px 15px rgba(239, 35, 60, .25)
}

.ck-flow__item.done {
    color: #26844b
}

.ck-flow__item.done>b {
    background: #e9f8ef;
    color: #26844b
}

.ck-flow__line.done:after {
    transform: scaleX(1)
}

@media(max-width:700px) {
    .ck-flow {
        padding: 13px 8px;
        margin-bottom: 18px
    }

    .ck-flow__item {
        min-width: 0;
        flex: 1;
        justify-content: center
    }

    .ck-flow__item>b {
        width: 36px;
        height: 36px
    }

    .ck-flow__item>span small {
        display: none
    }

    .ck-flow__item strong {
        font-size: 9px
    }

    .ck-flow__line {
        width: 22px;
        margin: 0 4px
    }
}

/* cart-supplier-summary */
.ck-supplier-summary {
    display: none;
    align-items: center;
    gap: 13px;
    background: linear-gradient(90deg, #fff8f1, #fff);
    border: 1px solid #f2dfcf;
    border-radius: 15px;
    padding: 13px 16px;
    margin-bottom: 15px
}

.ck-supplier-summary__icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #00102b;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 5px 13px rgba(239, 35, 60, .2)
}

.ck-supplier-summary__info {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.ck-supplier-summary__info small,
.ck-supplier-summary__delivery small {
    font-size: 9px;
    color: #999
}

.ck-supplier-summary__info strong {
    font-size: 15px;
    font-weight: 900;
    color: #1b1b1b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ck-supplier-summary__delivery {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid #eaded4;
    color: #00102b
}

.ck-supplier-summary__delivery>i {
    font-size: 21px
}

.ck-supplier-summary__delivery>span {
    display: flex;
    flex-direction: column
}

.ck-supplier-summary__delivery b {
    font-size: 12px;
    color: #333;
    margin-top: 2px
}

.ck-cart-hidden>#ck-supplier-summary {
    display: none !important
}

@media(max-width:600px) {
    .ck-supplier-summary {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .ck-supplier-summary__delivery {
        width: 100%;
        margin: 4px 0 0;
        padding: 9px 0 0;
        border-inline-start: 0;
        border-top: 1px solid #eaded4
    }
}