#orderBlock {
    --orderBlockPadding: 16px;
    grid-area: 1/1;
    z-index: 2;
    background: var(--color-bg);
    translate: 0% calc(100% + var(--shadowOffset));
    border-radius: 24px;
    pointer-events: none;
    transition:
        translate 1s ease,
        box-shadow 1s ease;
    box-shadow: 0 2px var(--shadowOffset) rgba(0, 0, 0, 0);
    padding-inline: var(--orderBlockPadding);
    padding-block: var(--orderBlockPadding);
    display: grid;
    grid-template-areas: "top" "left" "right";
    grid-template-columns: minmax(0, 450px);
    column-gap: 40px;
}

@media (min-width: 768px) {
    #orderBlock {
        --orderBlockPadding: 40px;
        grid-template-areas: "top top" "left right";
        grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
        grid-template-rows: max-content minmax(0, auto);
    }
}

#orderBlock.loading :where(.inputWrapper, .btn) {
    opacity: 0.6;
    cursor: progress;
}

#orderBlock .orderTop {
    display: flex;
    align-items: center;
    gap: 16px;
    grid-area: top;
}

#orderBlock .orderNav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-block-end: 16px;
}

#orderBlock .orderPrev {
    cursor: pointer;
    color: var(--color-gray-10);
}

#orderBlock .orderNext {
    cursor: pointer;
    color: var(--color-gray-10);
}

#orderBlock .orderNav .info {
    margin-inline: auto;
}

#orderBlock .orderNav .info .title {
    text-align: center;
    font-family: Onest;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (min-width: 768px) {
    #orderBlock .orderNav .info .title {
        font-size: 24px;
        gap: 8px;
    }
}

#orderBlock .orderNav .info .description {
    color: var(--color-gray-11);
    font-family: Onest;
    font-size: 12px;
    line-height: 114%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    text-align: center;
    margin-block-start: 4px;
}

@media (min-width: 768px) {
    #orderBlock .orderNav .info .description {
        font-size: 14px;
        gap: 4px;
        margin-block-start: 0;
    }
}

#orderBlock .orderLeft {
    grid-area: left;
}

#orderBlock .orderResultBlock {
    grid-area: result;
}

#orderBlock .orderResultBlock .cardContainerWrapper {
    position: relative;
    margin-inline: auto;
    margin-block-start: calc(var(--orderBlockPadding) * -1);
    padding-block-start: var(--orderBlockPadding);
    overflow: hidden;
}

#orderBlock .orderResultBlock .cardContainerWrapper .confeti {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 0;
    z-index: 5;
    scale: 0 0;
    translate: -50% -20%;
    transform-origin: 50% 0%;
    animation: confeti 15s ease-in-out 1 forwards;
    pointer-events: none;
}

@keyframes confeti {
    20%,
    to {
        scale: 1 1;
    }
    to {
        translate: -50% -10%;
    }
}

#orderBlock .orderResultBlock .cardContainerWrapper .cardContainer {
    container-type: inline-size;
    width: 450px;
    max-width: 100%;
    margin-inline: auto;
}

#orderBlock .orderResultBlock .info {
    margin-block-start: 24px;
}

#orderBlock .orderResultBlock .info .title {
    font-family: Onest;
    font-size: 18px;
    font-weight: 700;
    line-height: 141%;
    text-align: center;
    text-wrap: balance;
}

#orderBlock .orderResultBlock .info .title .name {
    white-space: nowrap;
}

@media (min-width: 768px) {
    #orderBlock .orderResultBlock .info .title {
        font-size: 24px;
        text-wrap: unset;
    }
}

#orderBlock .orderResultBlock .info .description {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-block-start: 6px;
    color: var(--color-gray-10);
    text-align: center;
    font-family: Onest;
    font-size: 12px;
    font-weight: 400;
    line-height: 114%;
}

@media (min-width: 768px) {
    #orderBlock .orderResultBlock .info .description {
        font-size: 14px;
    }
}

#orderBlock .orderResultBlock .info .title [data-card-title] {
    color: var(--color-orange-2);
}

#orderBlock .orderResultBlock .goToCardButton {
    display: flex;
    margin-inline: auto;
    margin-block-start: 44px;
    max-width: 322px;
}

#orderBlock .orderCloseButton {
    margin-inline-start: auto;
    cursor: pointer;
    width: 24px;
    aspect-ratio: 1/1;
    margin-inline-end: calc(var(--orderBlockPadding) / -2);
    margin-block-start: calc(var(--orderBlockPadding) / -2);
}

#orderBlock .orderLeft .orderCardContainer {
    container-type: inline-size;
}

#cardItems[data-active-card-type] #orderBlock {
    translate: unset;
    pointer-events: auto;
    box-shadow: 0 2px var(--shadowOffset) rgba(0, 0, 0, 0.085);
}

#orderBlock .orderRight {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    grid-area: right;
    margin-block-start: 24px;
}

@media (min-width: 768px) {
    #orderBlock .orderRight {
        margin-block-start: 0;
    }
}

#orderBlock .orderRight .orderInfoBlock {
    border-radius: 16px;
    background: #fafafa;
    padding-block: 4px;
    width: 100%;
}

#orderBlock .orderRight .orderInfoBlock .row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline: 16px;
    padding-block: 8px;
}

#orderBlock .orderRight .orderInfoBlock .row .head {
    color: var(--color-gray-10);
    font-family: Onest;
    font-size: 12px;
    font-weight: 400;
    line-height: 166%;
    white-space: nowrap;
}

#orderBlock .orderRight .orderInfoBlock .row .value {
    margin-inline-start: auto;
    font-family: Onest;
    font-size: 12px;
    font-weight: 600;
    line-height: 166%;
    text-align: right;
}

#orderBlock .orderRight .orderInfoBlock .row.total {
    padding-block-start: 16px;
    margin-block-start: 8px;
    position: relative;
}

#orderBlock .orderRight .orderInfoBlock .row.total::before {
    content: "";
    position: absolute;
    width: calc(100% - 16px * 2);
    height: 0;
    inset-block-start: 0;
    inset-inline-start: 16px;
    pointer-events: none;
    border-block-start: 1px solid #e1e8f1;
}

#orderBlock .orderRight .orderInfoBlock .row.total .value {
    font-family: Onest;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderInfoBlock .row.total .value {
        font-size: 24px;
    }
}

#orderBlock .orderRight .orderInfoBlock .muted {
    color: var(--color-gray-10);
}

#orderBlock .orderRight .orderInfoBlock .success {
    color: var(--color-success);
}

#orderBlock .orderRight .orderInfoBlock .row.total .value .muted {
    font-family: Onest;
    font-size: 14px;
    font-weight: 500;
    line-height: 133%;
    white-space: nowrap;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderInfoBlock .row.total .value .muted {
        font-size: 18px;
    }
}

#orderBlock .orderRight .orderInfoBlock .perSwitchButton {
    cursor: pointer;
    color: var(--color-btn-primary-right);
}

@media (hover: hover) {
    #orderBlock .orderRight .orderInfoBlock .perSwitchButton:hover {
        color: hsl(from var(--color-btn-primary-right) h s 40%);
    }
}

#orderBlock .orderRight .orderQrBlock .top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderQrBlock .top {
        flex-wrap: nowrap;
        gap: 28px;
    }
}

#orderBlock .orderRight .orderQrBlock .qrWrapper {
    position: relative;
    width: max-content;
    padding: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #fafafa;
    flex-shrink: 0;
    margin-inline: auto;
}

#orderBlock .orderRight .orderQrBlock .road {
    --badgeSize: 30px;
    list-style: none;
    counter-reset: item;
}

#orderBlock .orderRight .orderQrBlock .roadItem {
    display: flex;
    align-items: center;
    gap: 8px;
    counter-increment: item;
    color: var(--color-gray-11);
    font-family: Onest;
    font-size: 14px;
    font-weight: 500;
    line-height: 114%;
    position: relative;
}

#orderBlock .orderRight .orderQrBlock .roadItem::before {
    content: counter(item);
    width: var(--badgeSize);
    aspect-ratio: 1/1;
    flex-shrink: 0;
    color: var(--color-font-inverse);
    background: #0e6afc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Onest;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    isolation: isolate;
}

#orderBlock .orderRight .orderQrBlock .roadItem + .roadItem {
    padding-block-start: 32px;
}

#orderBlock .orderRight .orderQrBlock .roadItem + .roadItem::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 4px;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--badgeSize) / 2);
    translate: -50% -50%;
    background: hsl(from #0e6afc h s l / 50%);
    z-index: -1;
}

#orderBlock .orderRight .orderQrBlock .qrWrapper .icon {
    position: absolute;
    width: 60px;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: 2;
}

#orderBlock .orderRight .orderQrBlock .orderQrResult {
    border-radius: 12px;
    border: 1px solid var(--color-light-2);
    background: #fafafa;
    display: flex;
    padding: 10px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-block-start: 24px;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderQrBlock .orderQrResult {
        margin-block-start: 16px;
    }
}

#orderBlock .orderRight .orderQrBlock .orderQrResult .text {
    color: var(--color-gray-11);
    font-family: Onest;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 142%;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderQrBlock .orderQrResult .text {
        font-size: 14px;
    }
}

#orderBlock .orderRight .orderQrBlock .orderQrResult .price {
    font-family: Onest;
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
    margin-inline-start: auto;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderQrBlock .orderQrResult .price {
        font-size: 24px;
    }
}

#orderBlock .orderRight .orderQrBlock .orderQrResult .price .muted {
    font-size: 14px;
    font-weight: 500;
    line-height: 133%;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .orderQrBlock .orderQrResult .price .muted {
        font-size: 18px;
    }
}

#orderBlock .orderRight .orderQrBlock .orderQrSsl {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    gap: 8px;
    margin-block-start: 12px;
    color: var(--color-success);
    background: hsl(from currentColor h s l / 5%);
    border-radius: 12px;
}

#orderBlock .orderRight .orderQrBlock .payedButton {
    margin-block-start: 32px;
}

#orderBlock .orderRight .orderQrBlock .orderQrSsl .text {
    font-family: Onest;
    font-size: 12px;
    font-weight: 500;
    line-height: 166%;
}

#orderBlock
    .orderRight
    .orderInfoBlock
    .perSwitchButton:is(:active, :focus-visible, .active) {
    color: hsl(from var(--color-btn-primary-right) h s 30%);
}

#orderBlock .orderRight .period {
    display: none;
}

#orderBlock[data-card-period="month"] .orderRight .period.month {
    display: inline;
}

#orderBlock[data-card-period="year"] .orderRight .period.year {
    display: inline;
}

#orderBlock .orderRight .end {
    margin-block-start: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-block-start: 24px;
}

@media (min-width: 768px) {
    #orderBlock .orderRight .end {
        padding-block-start: 48px;
    }
}

#orderBlock .orderRight .end .inputs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#orderBlock
    .orderRight
    .end
    .inputs
    .inputWrapper:has(:placeholder-shown:not(:focus))
    .additional {
    opacity: 0;
}

#orderBlock
    .orderRight
    .end
    .inputs
    .inputWrapper:has(:placeholder-shown:focus)
    .additional
    .right {
    opacity: 0;
}

#orderBlock .orderRight .end .inputs .inputWrapper .additional {
    flex-shrink: 0;
    user-select: none;
}

#orderBlock .orderRight .end .inputs .inputWrapper {
    flex-grow: 1;
    flex-basis: 33%;
}

#orderBlock :where(.payedButton, .authButton, .submitButton, .goToCardButton) {
    width: 100%;
    border-radius: 16px;
    position: relative;
    isolation: isolate;
}

#orderBlock
    :where(.payedButton, .authButton, .submitButton, .goToCardButton)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        64.59% 70.63% at 30.32% 32.13%,
        transparent 0%,
        var(--color-orange-2) 100%
    );
    box-shadow: 4px 4px 12px 0 rgba(255, 255, 255, 0.16) inset;
    z-index: -1;
}

#orderBlock:not([class*="stage-"])
    :where(
        .inputWrapper.code,
        .inputWrapper.password,
        .orderQrBlock,
        .orderResultBlock,
        .authButton,
        .orderAuthBlock,
        .inputWrapperLabel:has(+ .inputWrapper)
    ) {
    display: none !important;
}

#orderBlock:is(.stage-code, .stage-qr, .stage-auth, .stage-result)
    :where(
        .orderCloseButton,
        .orderPrev,
        .orderNext,
        .perSwitchButton,
        .inputWrapper.email,
        .inputWrapper.deposit
    ) {
    display: none !important;
}

#orderBlock:is(.stage-code) :where(.inputWrapper.password, .authButton) {
    display: none !important;
}

#orderBlock:is(.stage-auth)
    :where(
        .inputWrapper.code,
        .submitButton,
        .inputWrapperLabel:has(+ .inputWrapper)
    ) {
    display: none !important;
}

#cardItems[data-active-card-type] .cards {
    display: none !important;
}

#orderBlock:is(.stage-qr, .stage-result) :where(.end, .orderInfoBlock) {
    display: none !important;
}

#orderBlock:not(.stage-qr) .orderQrBlock {
    display: none !important;
}

#orderBlock:not(.stage-result) .orderResultBlock {
    display: none !important;
}

#orderBlock.stage-result :where(.end, .orderLeft) {
    display: none !important;
}

#orderBlock.stage-result {
    grid-template-areas:
        "top"
        "result";
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content minmax(0, auto);
    position: relative;
}