.orderBlock {
    --orderBlockPadding: 40px;
    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 top" "left right";
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
    grid-template-rows: max-content minmax(0, auto);
    column-gap: 40px;
}

.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: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 125%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

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

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

.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 .orderCardContainer {
    container-type: inline-size;
}

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

.orderBlock .orderRight {
    grid-area: right;
}

.orderInfoBlock {
    border-radius: 16px;
    background: #fafafa;
    padding-block: 4px;
}

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

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

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

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

.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;
}

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

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

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

.orderInfoBlock .row.total .value .muted {
    font-family: Onest;
    font-size: 18px;
    font-weight: 500;
    line-height: 133%;
}

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

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

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

.orderBlock .period {
    display: none;
}

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

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