/* ===============================
   PAGE & CONTAINER
================================ */

.receipt-page {
    min-height: 70vh;
    padding: 2.5rem 1rem;
    display: flex;
    justify-content: center;
}

.receipt-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
}

/* ===============================
   CARD
================================ */

.receipt-card {
    width: 100%;
    max-width: 920px;
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 30px 70px rgba(0,0,0,.35);
    box-sizing: border-box;
}

/* ===============================
   HEADER
================================ */

.receipt-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.header-left h1 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
}

.header-left p {
    margin-top: .3rem;
    font-size: .9rem;
    color: #64748b;
}

.status.success {
    align-self: flex-start;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    background: #dcfce7;
    color: #166534;
}

/* ===============================
   META
================================ */

.receipt-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.receipt-meta label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
}

.receipt-meta span {
    display: block;
    margin-top: .2rem;
    font-size: .95rem;
    font-weight: 600;
}

/* ===============================
   TABLE (RESPONSIVE)
================================ */

.receipt-items {
    margin-bottom: 1.8rem;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-scroll table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
    padding: .85rem .7rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: .9rem;
    white-space: nowrap;
}

.table-scroll th {
    font-weight: 700;
    color: #334155;
}

.table-scroll .right {
    text-align: right;
}

/* ===============================
   TOTAL
================================ */

.receipt-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 900;
    margin-top: 1.5rem;
}

/* ===============================
   ACTIONS
================================ */

.receipt-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn {
    padding: .75rem 1.6rem;
    border-radius: 14px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: .2s ease;
}

.btn.primary {
    background: #6d28d9;
    color: #fff;
}

.btn.primary:hover {
    background: #5b21b6;
}

.btn.secondary {
    background: #e5e7eb;
    color: #020617;
    text-decoration: none;
}

.btn.secondary:hover {
    background: #d1d5db;
}

/* ===============================
   MOBILE FIXES
================================ */

@media (max-width: 640px) {

    .receipt-card {
        padding: 1.8rem 1.2rem;
        border-radius: 18px;
    }

    .receipt-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .receipt-actions {
        flex-direction: column;
        align-items: center;
        gap: .7rem;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}

/* ===============================
   PRINT (NO SHADOW)
================================ */

@media print {

    body {
        background: #ffffff;
    }

    .receipt-page {
        padding: 0;
    }

    .receipt-card {
        box-shadow: none !important;   /* ✅ FIXED */
        border-radius: 0;
    }

    .receipt-actions {
        display: none;
    }
}