.cartBox {
    padding: 70px 140px 100px;
    background: var(--gray) url('../../images/blog-bg.svg');
    background-size: cover;
    background-position: center center;
}

.cartBox .stepBox {
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stepBox .stepItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 26px;
}

.stepItem .iconBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-radius: 100%;
    background-color: var(--white);
    box-sizing: border-box;
}

.stepItem .iconBox i.icon {
    background-color: var(--black);
    width: 32px;
    height: 32px;
    -webkit-mask-size: 32px;
}

.stepItem .title {
    font-size: 16px;
}

.stepItem.active .iconBox {
    background-color: var(--red);
}

.stepItem.active .iconBox i.icon {
    background-color: var(--white);
}

.stepItem.active .title {
    font-weight: 900;
    color: var(--red);
}


.stepBox .separator {
    height: 1px;
    background-color: var(--white);
    flex: 1;
}

.cartBox .cartContent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
    margin: 64px 0;
}

.mobile {
    display: none;
}

.cartContent .cartRight {
    width: calc(25% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.cartRight h2 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.cartRight .rightItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.rightItems .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rightItems .item .title {
    font-size: 14px;
}

.rightItems .item .value {
    font-size: 14px;
}

.rightItems .item .value .itemPrice {
    font-weight: bold;
}

.rightItems .item .value.red {
    color: var(--red);
}

.cartRight .btn {
    font-size: 14px;
}

.cartBox .cartLeft {
    width: calc(75% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.cartLeft h2 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
    font-size: 16px;
    font-weight: normal;
}

.cartLeft h2 span {
    font-weight: bold;
}

.cartLeft .productBox {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.productBox .productItem {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
    border: 1px solid var(--gray);
}

.productItem .productImg {
    width: 100px;
    max-height: 76px;
    background-color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10px 30px;
    box-sizing: border-box;
}

.productItem .productContent {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.productContent h4 {
    margin: 0;
    font-size: 14px;
}

.productContent span {
    font-size: 12px;
}

.productContent .productItemPrice {
    font-size: 14px;
}

.productItem .productLeft {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}

.productLeft .productRemoveBtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.productRemoveBtn i.icon {
    width: 22px;
    height: 22px;
    -webkit-mask-size: 22px;
    background-color: var(--red);
}

.productLeft .productCount {
    display: flex;
    gap: 8px;
    align-items: center;
}

.productCount .productDecBtn,
.productCount .productIncBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray);
    border-radius: 3px;
    padding: 5px;
}

.productCount .productDecBtn i.icon,
.productCount .productIncBtn i.icon {
    width: 14px;
    height: 14px;
    -webkit-mask-size: 14px;
    background-color: var(--black);
}


/*  */
.cartBox .sendContent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
    margin: 64px 0;
}

.sendContent .sendRight {
    width: calc(25% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.sendRight h2 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.sendRight .rightItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.sendRight .topRightItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.topRightItems .productItem {
    display: flex;
    flex-direction: column;
}

.topRightItems .productItem .imgBox {
    width: 100%;
    background-color: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.topRightItems .productItem h6 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-top: 0;
}

.topRightItems .productItem span {
    font-size: 12px;
    margin-bottom: 2px;
}

.topRightItems .productItem span.price {
    font-size: 14px;
    margin-bottom: 10px;
}

.topRightItems .productItem .productCount {
    display: flex;
    gap: 8px;
    align-items: center;
}

.topRightItems .productItem .productCount .count {
    font-size: 16px;
    margin: 0;
}


.cartBox .sendLeft {
    width: calc(75% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.sendLeft h2 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
    font-size: 16px;
    font-weight: normal;
}

.sendLeft h2 span {
    font-weight: bold;
}

.sendLeft .formFields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.formFields .fieldGroup {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fieldGroup label {
    font-size: 14px;
    font-weight: normal;
}

.fieldGroup input,
.fieldGroup select,
.fieldGroup textarea {
    font-size: 12px;
    color: var(--black);
    border: 1px solid var(--gray);
    padding: 12px;
    font-family: 'Vazirmatn', sans-serif;
}

.fieldGroup input::placeholder,
.fieldGroup textarea::placeholder {
    color: #AFAFAF;
    opacity: 1;
}

.fieldGroup.addressBox,
.fieldGroup.zipCodeBox {
    width: 100% !important;
}

.noteBox {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--gray);
    padding: 12px 16px;
}

.noteBox p {
    font-size: 14px;
    margin: 0;
}

.noteBox i.icon {
    background-color: var(--black);
    width: 20px;
    height: 20px;
    -webkit-mask-size: 20px;
}

/*  */
.cartBox .payContent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 24px;
    margin: 64px 0;
}

.payContent .payRight {
    width: calc(25% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.payRight h2 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.payRight .rightItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.payRight .topRightItems {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cartBox .payLeft {
    width: calc(75% - 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.payRight .noteBox {
    align-items: flex-start;
}

.payRight .noteBox i.icon {
    flex: .1
}

.payRight .noteBox p {
    font-size: 12px;
    flex: 1;
}

.payLeft h2 {
    margin: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
    font-size: 16px;
    font-weight: normal;
}

.payLeft h2 span {
    font-weight: bold;
}

.payLeft .formFields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.payLeft .tab {
    gap: 16px;
}

.payLeft .tabItems {
    justify-content: flex-start;
    width: 100%;
}

.payLeft .tabContent {
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.payLeft .tabItem {
    font-size: 16px;
}

.payLeft .tabItem.active {
    font-weight: bold;
}

.payLeft .tabContent .noteBox {
    margin-bottom: 16px;
}

.payLeft .tabContent h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 18px;
}

.payLeft .tabContent > p {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 14px;
}

.payLeft .tabContent .accountBox {
    display: flex;
    align-items: center;
    gap: 32px;
    border: 1px solid var(--gray);
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
}

.accountBox .iconBox {
    background-color: var(--red);
    border-radius: 100%;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accountBox .iconBox i.icon {
    width: 32px;
    height: 32px;
    -webkit-mask-size: 32px;
    background-color: var(--white);
}

.accountBox .accountContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accountContent .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
}

.accountContent .item span {
    font-size: 14px;
}

.accountBox .btnBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.accountBox .btn {
    font-size: 12px;
    padding: 12px 17px;
}

.tabContent .separator {
    height: 1px;
    background-color: var(--gray);
    width: 100%;
    margin: 16px 0;
}

.fishForm h4 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
}

.fishForm {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.fishForm .uploadBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 18px;
    background-color: var(--gray);
    border: 1px dashed #B0B0B0;
    cursor: pointer;
    box-sizing: border-box;
}

.uploadBox input {
    display: none;
}

.uploadBox i.icon {
    background-color: #B0B0B0;
    width: 32px;
    height: 32px;
    -webkit-mask-size: 32px;
}

.uploadBox span {
    font-size: 14px;
    font-weight: bold;
    color: #B0B0B0;
}

.uploadBox .format {
    font-size: 12px;
    font-weight: normal;
}

.fishForm .fieldGroup {
    width: calc(50% - 8px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.fieldGroup input {
    position: relative;
}

.fieldGroup.dateBox::before {
    content: '';
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 20px;
    height: 20px;
    -webkit-mask-size: 20px;
    background-color: #000;
    -webkit-mask: url('../../images/calendar.svg') center center no-repeat;
    z-index: 1;
}

.fieldGroup.checkbox {
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid var(--gray);
    width: 100%;
}

.fieldGroup.checkbox input {
    margin: 0;
}

.walletForm {
    display: flex;
    flex-wrap: wrap;
    padding: 12px 16px;
    border: 1px solid var(--gray);
    gap: 16px;
}

.walletForm .fieldGroup {
    width: calc(38% - 16px/3*2);
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.walletForm .btnBox {
    width: calc(24% - 16px/3*2);
    display: flex;
    align-items: flex-end;
}

.walletForm .btnBox .btn {
    font-size: 12px;
    padding: 14px;
    width: 100%;
}

.walletForm .fieldGroup.walletAddressBox {
    width: 100%;
    position: relative;
}

.fieldGroup.walletAddressBox::before {
    content: '';
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 20px;
    height: 20px;
    -webkit-mask-size: 18px !important;
    background-color: #000;
    -webkit-mask: url('../../images/copy-outline.svg') center center no-repeat;
    z-index: 1;
}

/**/
.cartBox .completeContent {
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    margin: 64px 0;
    background-color: var(--white);
    box-shadow: 1px 2px 23.8px 0px #00000012;
}

.completeContent h2 {
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray);
}

.completeBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: center;
    width: 100%;
}

.completeBox .completeTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 30%;
}

.completeTop i.icon {
    width: 85px;
    height: 85px;
    -webkit-mask-size: 85px;
    background-color: var(--red);
}

.completeTop h3 {
    margin: 0;
    font-size: 18px;
}

.completeTop .topContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--gray);
    box-sizing: border-box;
}

.topContent .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topContent .item span {
    font-size: 14px;
}

.completeBox .completeBottom {
    display: flex;
    flex-direction: column;
    padding: 12px 31px;
    border: 1px solid var(--gray);
    width: 30%;
    box-sizing: border-box;
}

.completeBottom h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 24px;
}

.completeBottom .bottomContent {
    display: flex;
    flex-direction: column;
    gap: 51px;
}

.bottomContent .bottomItem {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bottomItem .iconBox {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    padding: 13px;
    border-radius: 100%;
}

.bottomItem .iconBox i.icon {
    width: 24px;
    height: 24px;
    -webkit-mask-size: 24px;
}

.bottomItem .itemContent {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.itemContent h6 {
    font-size: 14px;
    margin: 0;
}

.itemContent p {
    font-size: 14px;
    margin: 0;
}

.completeBottom .btn {
    margin-top: 32px;
    align-self: center;
}

/* Mobile */
@media screen and (max-width: 767px) {
    .mobile {
        display: flex;
    }

    .cartBox {
        padding: 24px 32px;
        background-size: contain;
    }

    .cartBox .stepBox {
        padding: 0;
    }

    .stepBox .stepItem {
        padding: 12px;
    }

    .stepBox .stepItem:first-child {
        padding-right: 0;
    }

    .stepBox .stepItem:last-child {
        padding-left: 0;
    }

    .stepItem .iconBox {
        padding: 9px;
    }

    .stepItem .iconBox i.icon {
        width: 24px;
        height: 24px;
        -webkit-mask-size: 24px;
    }

    .stepItem .title {
        display: none;
    }

    .cartBox .cartContent {
        margin: 24px 0;
    }

    .cartContent .cartRight {
        display: none;
    }

    .cartRight.mobile {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        background-color: unset;
        box-shadow: none;
    }

    .cartRight.mobile .rightItems {
        border-bottom: unset;
        padding-bottom: 0;
    }

    .cartRight.mobile .rightItems .total {
        padding-top: 16px;
        border-top: 1px solid var(--gray);
    }

    .cartBox .cartLeft {
        width: 100%;
        box-sizing: border-box;
        padding: 25px 16px;
    }

    .productBox .productItem {
        padding: 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .productItem .productImg {
        padding: 14px 22px;
        flex: .3
    }

    .productImg img {
        width: 100%;
    }

    .productContent .productItemPrice {
        font-size: 12px;
    }

    .productItem .productLeft {
        width: 100%;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .cartBox .sendContent {
        margin: 24px 0;
    }

    .sendContent .sendRight {
        display: none;
    }

    .sendContent .sendLeft {
        width: 100%;
        box-sizing: border-box;
        padding: 25px 16px;
    }

    .formFields .fieldGroup {
        width: 100%;
    }

    .fieldGroup label,
    .fieldGroup input,
    .fieldGroup textarea,
    .fieldGroup select {
        font-size: 12px;
    }

    .noteBox {
        align-items: flex-start;
    }

    .noteBox i.icon {
        flex: .1
    }

    .noteBox p {
        font-size: 12px;
        flex: 1
    }

    .sendLeft .btn.mobile {
        font-size: 14px;
        justify-content: center;
    }

    .cartBox .payContent {
        margin: 24px 0;
    }

    .payContent .payRight {
        display: none;
    }

    .payContent .payLeft {
        width: 100%;
        box-sizing: border-box;
        padding: 25px 16px;
    }

    .tab .tabItems {
        scrollbar-width: thin;
    }

    .payLeft .tabContents .tabContent {
        padding: 0;
    }

    .payLeft .tabContent h3 {
        font-size: 16px;
    }

    .payLeft .tabContent p {
        font-size: 12px;
    }

    .payLeft .tabContent .accountBox {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px
    }

    .accountBox .accountContent {
        width: 100%;
    }

    .accountContent .item {
        gap: 20px
    }

    .accountBox .btnBox {
        width: 100%;
    }

    .accountBox .btnBox .btn {
        width: 100%;
    }

    .fishForm h4 {
        font-size: 16px;
        margin-bottom: 0;
    }

    .fishForm .uploadBox {
        padding: 47px 18px;
    }

    .fishForm .fieldGroup {
        width: 100%;
    }

    .fieldGroup.checkbox {
        align-items: flex-start;
    }

    .fieldGroup.checkbox label {
        font-size: 14px !important;
    }

    .payLeft .mobile {
        flex-direction: column;
        gap: 16px
    }

    .payLeft .mobile .btn {
        font-size: 14px;
    }

    .walletForm .fieldGroup {
        width: 100%;
    }

    .walletForm .btnBox {
        width: 100%;
    }

    .cartBox .completeContent {
        margin: 24px 0;
        box-sizing: border-box;
        padding: 25px 16px;
    }

    .completeBox .completeTop {
        width: 100%;
    }

    .completeTop i.icon {
        width: 74px;
        height: 74px;
        -webkit-mask-size: 74px;
    }

    .topContent .item span {
        font-size: 12px;
    }

    .completeBox .completeBottom {
        width: 100%;
        padding: 12px 16px;
    }

    .bottomItem .iconBox {
        padding: 9px;
    }

    .bottomItem .iconBox i.icon {
        width: 32px;
        height: 32px;
        -webkit-mask-size: 32px;
    }

    .itemContent h6 {
        font-size: 14px;
    }

    .itemContent p {
        font-size: 12px;
    }

    .completeBottom .btn {
        width: 100%;
        box-sizing: border-box;
    }

}