/* Checkout */

.checkout-page {
    min-height: 100%;
    padding-block: clamp(var(--rg-space-10), 6vw, 80px);
    background: var(--rg-surface-page);
}
.checkout-shell {
    max-width: var(--rg-layout-content-max-width);
}

.checkout-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rg-space-6);
    margin-bottom: var(--rg-space-10);
}

.checkout-header .mud-typography-h2 {
    margin-bottom: var(--rg-space-2);
    letter-spacing: -0.035em;
}

.checkout-header .mud-typography-body1 {
    max-width: 620px;
    line-height: 1.7;
}

.checkout-currency-select {
    width: 116px;
    flex: 0 0 auto;
}

.checkout-grid {
    align-items: start;
}

.checkout-surface {
    padding: var(--rg-space-8);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container);
}

.checkout-cart-item {
    padding-block: var(--rg-space-5);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.checkout-item-visual {
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    overflow: hidden;
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
}

.checkout-item-visual img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: contain;
}

.checkout-item-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.checkout-item-copy .mud-typography-body2 {
    max-width: 480px;
    line-height: 1.6;
}

.checkout-item-price {
    margin-top: var(--rg-space-2);
    font-weight: var(--rg-font-weight-strong);
}

.checkout-order-line {
    padding-block: var(--rg-space-3);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.checkout-order-surface .checkout-order-line:last-child {
    border-bottom: 0;
}

.checkout-invoice-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-space-3);
    padding: var(--rg-space-4);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
}

.checkout-invoice-note > .mud-icon-root {
    justify-self: center;
}

.checkout-invoice-note .mud-typography-caption {
    display: block;
    margin-top: var(--rg-space-1);
    line-height: 1.55;
}

.checkout-customer-details {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
}

.checkout-details-form {
    padding-top: var(--rg-space-1);
}

.checkout-submit-action {
    padding-top: var(--rg-space-2);
}

.checkout-alert {
    border-radius: var(--rg-shape-card);
}

.checkout-account-surface {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-4);
}

.checkout-account-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
}

/* Payment */

.checkout-payment-back {
    margin-bottom: var(--rg-space-3);
    margin-inline-start: calc(-1 * var(--rg-space-3));
    font-weight: var(--rg-font-weight-medium);
}

html:has(.checkout-payment-page) {
    overflow-y: scroll;
}

body:has(.checkout-payment-page) {
    overflow-x: clip;
    overflow-y: visible;
}

body:has(.checkout-payment-page) .mud-layout > .mud-main-content {
    padding-top: 0;
}

.page-stagger > .checkout-payment-page {
    animation: none;
}

.checkout-payment-grid {
    align-items: start;
}

.checkout-section-heading {
    margin-bottom: var(--rg-space-5);
}

.checkout-payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-3);
}

.checkout-payment-options .mud-input-control-input-container,
.checkout-payment-options .mud-radio-group {
    width: 100%;
}

.checkout-payment-options .mud-radio-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rg-space-3);
}

.checkout-payment-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rg-space-3);
    width: 100%;
    padding: var(--rg-space-4);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
}

.checkout-payment-option.is-selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--rg-surface-container-nested));
}

.checkout-payment-option.is-disabled {
    border-color: var(--mud-palette-action-disabled-background);
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-action-disabled);
    cursor: not-allowed;
}

.checkout-payment-option.is-disabled .mud-typography,
.checkout-payment-option.is-disabled .checkout-payment-option-icon {
    color: var(--mud-palette-action-disabled);
}

.checkout-payment-option-icon {
    color: var(--mud-palette-text-secondary);
}

.checkout-payment-option > .mud-input-control {
    position: relative;
    inset-inline-start: calc(-1 * var(--rg-space-2));
    width: var(--rg-control-height-sm);
    min-width: var(--rg-control-height-sm);
    margin: 0;
}

.checkout-payment-option.is-selected .checkout-payment-option-icon {
    color: var(--mud-palette-primary);
}

.checkout-payment-option-copy {
    min-width: 0;
}

.checkout-payment-option-copy .mud-typography-body2 {
    margin-top: var(--rg-space-1);
}

.checkout-payment-method-note {
    margin-top: var(--rg-space-5);
}

.checkout-payment-loading,
.checkout-payment-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-4);
    min-height: 320px;
}

.checkout-payment-summary {
    position: sticky;
    top: calc(var(--rg-layout-topnav-height) + var(--rg-space-6));
}

.checkout-payment-summary-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--rg-space-4);
    padding-block: var(--rg-space-4);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.checkout-payment-summary-line:first-child {
    padding-top: 0;
}

.checkout-payment-summary-line:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.checkout-payment-summary-line .mud-typography-caption {
    display: block;
    margin-top: var(--rg-space-1);
}

.checkout-payment-total {
    flex-wrap: nowrap;
    padding-top: var(--rg-space-2);
}

.checkout-payment-total .mud-typography {
    white-space: nowrap;
}

.checkout-payment-total .mud-typography-h5 {
    font-weight: var(--rg-font-weight-bold);
}

.checkout-consent-control {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
    position: relative;
    padding-bottom: var(--rg-space-6);
}

.checkout-consent-control > .mud-input-control {
    position: static;
    flex: 0 0 auto;
}

.checkout-consent-label {
    min-width: 0;
}

.checkout-consent-control .mud-input-control-helper-container {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
}

.checkout-payment-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-2);
}

/* Order confirmation */

.checkout-success-shell {
    max-width: 760px;
}

.checkout-success-surface {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rg-space-4);
    padding: var(--rg-space-12);
    text-align: center;
}

.checkout-success-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--rg-status-success-text);
}

.checkout-success-icon .mud-icon-root {
    font-size: 72px;
}

.checkout-success-intro {
    max-width: 560px;
    line-height: 1.7;
}

.checkout-success-reference {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-space-6);
    width: min(100%, 440px);
    padding: var(--rg-space-4);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-container-nested);
    text-align: left;
}

.checkout-success-reference .mud-typography-h6 {
    margin-top: var(--rg-space-1);
    font-weight: var(--rg-font-weight-bold);
    letter-spacing: 0.04em;
}

.checkout-success-surface > .mud-divider {
    width: 100%;
}

.checkout-success-next {
    max-width: 560px;
}

.checkout-success-actions {
    flex-wrap: wrap;
    margin-top: var(--rg-space-2);
}

@media (max-width: 959.98px) {
    .checkout-page {
        padding-block: var(--rg-space-8);
    }

    .checkout-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: var(--rg-space-8);
    }

    .checkout-payment-summary {
        position: static;
    }
}

@media (max-width: 599.98px) {
    .checkout-page {
        padding-block: var(--rg-space-6);
    }

    .checkout-surface {
        padding: var(--rg-space-5);
    }

    .checkout-cart-item-row {
        align-items: flex-start;
    }

    .checkout-item-visual {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    .checkout-item-visual img {
        width: 64px;
        height: 64px;
    }

    .checkout-success-surface {
        padding: var(--rg-space-6);
    }

    .checkout-success-actions {
        flex-direction: column;
        width: 100%;
    }

    .checkout-success-actions .mud-button-root {
        width: 100%;
    }
}