.store-order-summary {
    width: 100%;
    min-width: 0;
}

    .store-order-summary.is-sticky {
        position: sticky;
        top: 1.25rem;
    }

.store-order-summary-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--store-white);
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius-lg);
    box-shadow: var(--store-shadow-md);
}

.store-order-summary-header {
    padding: 1.1rem 1.2rem;
    overflow: hidden;
    background: linear-gradient( 135deg, color-mix( in srgb, var(--store-main-color) 10%, transparent ), var(--store-white) 95% );
    border-bottom: 1px solid var(--store-border);
    border-radius: var(--store-radius-lg) var(--store-radius-lg) 0 0;
}

.store-order-summary-title-group {
    display: flex;
    align-items: center;
    gap: 0.78rem;
}

.store-order-summary-title-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    color: var(--store-white);
    background: linear-gradient( 145deg, var(--store-main-color), var(--store-main-color-dark) );
    border: 1px solid var(--store-main-color-dark);
    border-radius: 0.8rem;
}

.store-order-summary-heading {
    min-width: 0;
}

.store-order-summary-title {
    margin: 0;
    color: var(--store-text-main);
    font-size: 1.25rem;
    font-weight: 850;
    line-height: 1.3;
}

.store-order-summary-subtitle {
    display: block;
    margin-top: 0.1rem;
    color: var(--store-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.store-order-summary-body {
    padding: 0;
    background: var(--store-white);
}

.store-order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.85rem 1.2rem;
    color: var(--store-text-muted);
    background: var(--store-white);
    border-bottom: 1px solid var(--store-border);
    transition: background-color 150ms ease;
}

    .store-order-summary-row:hover {
        background: var(--store-surface-subtle);
    }

    .store-order-summary-row:last-child {
        border-bottom: 0;
    }

.store-order-summary-label {
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.store-order-summary-value {
    flex: 0 0 auto;
    color: var(--store-main-color-dark);
    font-weight: 850;
    white-space: nowrap;
}

.store-order-summary-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem 0.82rem;
    background: var(--store-white);
    border-top: 1px solid var(--store-border);
}

.store-order-summary-total-label {
    color: var(--store-text-main);
    font-size: 1rem;
    font-weight: 700;
}

.store-order-summary-total-value {
    color: var(--store-main-color-dark);
    font-size: 1.25rem;
    font-weight: 900;
    white-space: nowrap;
}

.store-order-summary-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1.2rem 1.2rem;
    color: var(--store-text-muted);
    background: var(--store-white);
    text-align: center;
}

.store-order-summary-note-icon {
    flex: 0 0 auto;
    margin-top: 0.05rem;
    color: var(--store-main-color);
}

.store-order-summary-note-copy {
    color: var(--store-text-muted);
    line-height: 1.4;
}

/* Loading state */

.store-order-summary-loading {
    display: flex;
    align-items: center;
    min-height: 5.4rem;
    padding: 1.25rem;
    overflow: hidden;
    background: linear-gradient( 135deg, color-mix( in srgb, var(--store-main-color) 10%, transparent ), var(--store-white) 95% );
    border-radius: inherit;
}

    .store-order-summary-loading .mud-progress-linear {
        width: 100%;
        overflow: hidden;
        background: color-mix( in srgb, var(--store-main-color) 14%, var(--store-white) );
        border-radius: 999px;
    }

    .store-order-summary-loading .mud-progress-linear-bar {
        background: linear-gradient( 90deg, var(--store-main-color-dark), var(--store-main-color), var(--store-tan) ) !important;
    }

/* Tablet */

@media (max-width: 959.98px) {
    .store-order-summary.is-sticky {
        position: static;
        margin-top: 1rem;
    }
}

/* Mobile */

@media (max-width: 599.98px) {
    .store-order-summary-card {
        border-radius: var(--store-radius-md);
    }

    .store-order-summary-header {
        padding: 1rem 0.95rem;
        border-radius: var(--store-radius-md) var(--store-radius-md) 0 0;
    }

    .store-order-summary-row,
    .store-order-summary-total-row {
        padding-inline: 0.95rem;
    }

    .store-order-summary-note {
        padding-inline: 0.95rem;
    }

    .store-order-summary-title-icon {
        width: 2.45rem;
        height: 2.45rem;
    }

    .store-order-summary-value,
    .store-order-summary-total-value {
        font-size: 0.95rem;
    }

    .store-order-summary-loading {
        padding: 1rem;
        border-radius: inherit;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .store-order-summary-row {
        transition: none;
    }
}

/* =========================================================
   Payment confirmation page
   ========================================================= */

.receipt-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: clamp(1rem, 3vw, 2.5rem);
    overflow: hidden;
    color: var(--store-text-main, #1d2a23);
}

/* =========================================================
   Loading and failure states
   ========================================================= */

.receipt-state-wrap {
    display: grid;
    width: 100%;
    min-height: calc(100vh - clamp(2rem, 6vw, 5rem));
    place-items: center;
}

    .receipt-state-wrap .receipt-state-card {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: min(100%, 34rem);
        padding: clamp(1.75rem, 5vw, 2.75rem);
        overflow: hidden;
        color: var(--store-text-main, #1d2a23);
        text-align: center;
        background: color-mix( in srgb, var(--store-white, #ffffff) 94%, transparent );
        border: 1px solid color-mix( in srgb, var(--store-main-color, #006838) 16%, var(--store-border, #dce3de) );
        border-radius: var(--store-radius-lg, 1.4rem);
        box-shadow: var( --store-shadow-lg, 0 1.4rem 3.5rem rgba(25, 55, 38, 0.17) );
        backdrop-filter: blur(14px);
    }

        .receipt-state-wrap .receipt-state-card::before {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 0.3rem;
            content: "";
            background: linear-gradient( 90deg, var(--store-main-color-dark, #004f2b), var(--store-main-color, #006838), var(--store-accent, #c1b49a) );
        }

    .receipt-state-wrap .receipt-loading-indicator {
        margin-bottom: 1.1rem;
        color: var(--store-main-color, #006838) !important;
        filter: drop-shadow( 0 0.45rem 0.6rem color-mix(in srgb, var(--store-main-color-dark, #004f2b) 10%, transparent) );
    }

    .receipt-state-wrap .receipt-state-title {
        margin: 0;
        color: var(--store-text-main, #1d2a23);
        font-weight: 900;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .receipt-state-wrap .receipt-state-message {
        max-width: 27rem;
        margin: 0.55rem auto 0;
        color: var(--store-text-muted, #667069);
        line-height: 1.6;
    }

.receipt-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin-bottom: 1.1rem;
    color: var(--store-main-color-dark, #004f2b);
    background: var(--store-main-color-pale, #edf7f1);
    border: 1px solid color-mix( in srgb, var(--store-main-color, #006838) 22%, var(--store-border, #dce3de) );
    border-radius: 50%;
}

    .receipt-state-icon.is-error {
        color: var(--store-danger, #9b3e34);
        background: var(--store-danger-soft, #fff1ef);
        border-color: color-mix( in srgb, var(--store-danger, #9b3e34) 24%, var(--store-border, #dce3de) );
    }

    .receipt-state-icon.is-success {
        color: var(--store-main-color-dark, #004f2b);
        background: var(--store-main-color-pale, #edf7f1);
        border-color: color-mix( in srgb, var(--store-main-color, #006838) 22%, var(--store-border, #dce3de) );
    }

/* =========================================================
   Responsive states
   ========================================================= */

@media (max-width: 599.98px) {
    .receipt-page {
        padding: 0.75rem;
    }

    .receipt-state-wrap {
        min-height: calc(100vh - 1.5rem);
    }

        .receipt-state-wrap  .receipt-state-card {
            padding: 1.75rem 1.15rem;
            border-radius: var(--store-radius-md, 1rem);
        }

    .receipt-state-icon {
        width: 3.75rem;
        height: 3.75rem;
    }
}

@media print {
    .receipt-state-wrap {
        display: none !important;
    }
}