:root {
    --receipt-green: var(--apparel-green);
    --receipt-green-dark: #004d2a;
    --receipt-green-deep: var(--apparel-green-deep);
    --receipt-green-soft: #d5dfd5;
    --receipt-green-pale: #eef3ee;
    --receipt-tan: var(--apparel-tan);
    --receipt-tan-soft: #ece6da;
    --receipt-surface: var(--apparel-surface);
    --receipt-background: #f3f2f0;
    --receipt-ink: #1d2a23;
    --receipt-muted: #667069;
    --receipt-border: #d8ddd8;
    --receipt-danger: var(--apparel-danger);
    --receipt-danger-soft: var(--apparel-danger-soft);
    --receipt-shadow-sm: 0 0.35rem 1rem rgba(0, 61, 34, 0.08);
    --receipt-shadow-md: 0 1rem 2.5rem rgba(0, 61, 34, 0.13);
    --receipt-shadow-lg: 0 1.4rem 3.5rem rgba(0, 61, 34, 0.17);
}

html,
body,
.mud-layout,
.mud-main-content {
    background: var(--receipt-background) !important;
}

.receipt-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    color: var(--receipt-ink);
    background: radial-gradient( circle at 7% 8%, rgba(213, 223, 213, 0.92) 0 10rem, transparent 10.1rem), radial-gradient( circle at 95% 18%, rgba(193, 180, 154, 0.25) 0 15rem, transparent 15.1rem), linear-gradient( 145deg, #f8f7f5 0%, var(--receipt-background) 48%, #e9eee9 100%);
}

    .receipt-page::before,
    .receipt-page::after {
        position: absolute;
        z-index: -1;
        content: "";
        pointer-events: none;
        border-radius: 999px;
    }

    .receipt-page::before {
        top: 24rem;
        left: -8rem;
        width: 20rem;
        height: 20rem;
        background: rgba(0, 104, 56, 0.05);
    }

    .receipt-page::after {
        right: -7rem;
        bottom: 4rem;
        width: 18rem;
        height: 18rem;
        background: rgba(193, 180, 154, 0.16);
    }

.receipt-container {
    padding: 0 !important;
}

.receipt-shell {
    width: min(100%, 76rem);
    margin: 0 auto;
}

/* Successful payment header */

.receipt-success-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2.2rem);
    overflow: hidden;
    color: var(--apparel-on-primary);
    background: linear-gradient( 115deg, rgba(255, 255, 255, 0.06), transparent 48%), linear-gradient( 135deg, var(--receipt-green-deep), var(--receipt-green) 64%, var(--apparel-green-light));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--apparel-radius-lg);
    box-shadow: var(--receipt-shadow-lg);
}

    .receipt-success-banner::before,
    .receipt-success-banner::after {
        position: absolute;
        content: "";
        pointer-events: none;
        border-radius: 50%;
    }

    .receipt-success-banner::before {
        top: -8rem;
        right: -3rem;
        width: 23rem;
        height: 23rem;
        background: rgba(213, 223, 213, 0.13);
    }

    .receipt-success-banner::after {
        right: 14rem;
        bottom: -8rem;
        width: 15rem;
        height: 15rem;
        border: 2rem solid rgba(193, 180, 154, 0.12);
    }

.receipt-success-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 1rem;
}

.receipt-success-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    color: var(--receipt-green-dark);
    background: var(--apparel-surface);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    box-shadow: 0 0.65rem 1.4rem rgba(0, 61, 34, 0.24);
}

.receipt-success-copy {
    min-width: 0;
}

.receipt-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.3rem 0.65rem;
    color: var(--apparel-on-primary);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(8px);
}

.receipt-page .receipt-success-title {
    margin: 0;
    color: var(--apparel-on-primary);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.receipt-page .receipt-success-message {
    max-width: 42rem;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.55;
}

.receipt-actions {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.receipt-page .receipt-print-button {
    min-height: 3rem;
    padding-inline: 1.15rem;
    color: var(--receipt-green-dark) !important;
    background: var(--apparel-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--apparel-radius-sm);
    font-weight: 850;
    text-transform: none;
    box-shadow: 0 0.45rem 1rem rgba(0, 61, 34, 0.2);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

    .receipt-page .receipt-print-button:hover {
        background: var(--receipt-green-pale) !important;
        box-shadow: 0 0.65rem 1.2rem rgba(0, 61, 34, 0.26);
        transform: translateY(-1px);
    }

/* Receipt content */

.receipt-content-shell {
    padding: clamp(0.8rem, 2vw, 1.35rem);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: var(--apparel-radius-lg);
    box-shadow: var(--receipt-shadow-md);
    backdrop-filter: blur(14px);
}