/* Receipt card — rendered by Activate/Receipt.cshtml and Refill/Receipt.cshtml.
   Sibling of the Order Summary card (pricing-panel.css, PR #658): same dark
   header bar, sectioned rows with muted uppercase titles, brand-green Total
   Sale anchor. Replaces the prior left-aligned <table class="text-start"> that
   produced ragged label-value gaps and gave Total Sale no visual prominence.

   All rows in every section justify to the card edges (labels left, values
   right) so the eye lands at the same column boundary throughout — the prior
   design had section-specific alignment that read as misaligned.

   Every class is prefixed `receipt-` because this stylesheet is loaded
   site-wide. Generic names (.section, .row, .totals-footer) collided with
   the Canvas theme's .section (64px margin + gray bg + overflow:hidden) and
   pricing-panel.css's .totals-footer (2-col grid) on first ship — see PR
   history for the saga. Don't add a non-prefixed class here. */

.receipt-card {
    border: 1px solid #d1d5db;
    border-radius: 0.6rem;
    background: #fff;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 760px;
    margin: 0 auto;
}

/* ── Dark header bar ── */
.receipt-card .receipt-header {
    background: #111827;
    color: #f9fafb;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.receipt-card .receipt-header .title {
    font-size: 1.05rem;
    font-weight: 600;
}

.receipt-card .receipt-header .receipt-id {
    font-size: 0.95rem;
    font-weight: 500;
    color: #d1d5db;
}

/* ── Dealer block (composed onto _ReceiptHeader's .printLogo div) ── */
.receipt-card .dealer-block {
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #374151;
}

.receipt-card .dealer-block b {
    font-weight: 700;
    color: #111827;
    font-size: 1rem;
}

/* ── Sections ──
   Class is .receipt-section (not .section) because the Canvas theme defines a
   site-wide .section rule that adds 64px top/bottom margin, gray bg, and
   overflow:hidden — which destroyed the layout on first ship. */
.receipt-card .receipt-section {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
}

.receipt-card .receipt-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

/* Rows justify to card edges — labels left, values right — in every section.
   Class is named .receipt-row (not .row) to avoid collision with Bootstrap's
   .row grid — Bootstrap's `.row > *` rule forces width:100% on every direct
   child, which stacked the label and value on separate lines on first ship. */
.receipt-card .receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 1rem;
    padding: 0.22rem 0;
    font-size: 0.95rem;
}

.receipt-card .receipt-row .lbl {
    color: #6b7280;
    font-weight: 500;
}

.receipt-card .receipt-row .val {
    color: #111827;
    font-weight: 500;
    text-align: right;
}

.receipt-card .receipt-row .val.tabular {
    font-variant-numeric: tabular-nums;
}

/* When a row's value contains stacked content (an in-progress block, a
   multiline Wi-Fi address), align the label to the top and let the value
   wrap naturally on the right. */
.receipt-card .receipt-row.receipt-row-stacked {
    align-items: flex-start;
}

.receipt-card .receipt-row.receipt-row-stacked .val {
    text-align: right;
}

/* Line Items section — same row geometry; just darkens the label color so
   the line-item labels read as content (not metadata). */
.receipt-card .receipt-line-items .receipt-row .lbl {
    color: #374151;
}

.receipt-card .receipt-line-items .receipt-row .val {
    font-variant-numeric: tabular-nums;
}

/* eSIM instructions section — QR code centered, instruction text left. */
.receipt-card .receipt-section-instructions .instructions-block {
    text-align: center;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.5;
}

.receipt-card .receipt-section-instructions #qrcode {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.receipt-card .receipt-section-instructions b {
    color: #111827;
}

/* ── Total Sale footer cell ──
   Class is .receipt-totals-footer (not .totals-footer) because the latter is
   pricing-panel.css's class for the dual-totals grid (customer vs dealer)
   and would impose a 2-column grid that breaks this design's centered
   label-above-amount layout. */
.receipt-card .receipt-totals-footer {
    background: linear-gradient(180deg, #f0fdf4, #dcfce7);
    border-top: 1px solid #e5e7eb;
    padding: 1.1rem 1.25rem;
    text-align: center;
}

.receipt-card .receipt-totals-footer .lbl {
    display: block;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #166534;
    margin-bottom: 0.3rem;
}

.receipt-card .receipt-totals-footer .amount {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #14532d;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ── Thanks + Printed footer ── */
.receipt-card .receipt-footer {
    padding: 0.9rem 1.25rem 1rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

.receipt-card .receipt-footer .thanks {
    font-weight: 700;
    color: #111827;
    font-size: 0.95rem;
}

.receipt-card .receipt-footer .printed {
    font-size: 0.78rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.25rem;
}

/* ── Print fallbacks ──
   The legacy print.css caps #printArea to 300px (thermal-paper width) and
   was deliberately not modified for this redesign. The screen-mode chrome
   above (dark header, green totals footer) would print as white-on-white
   in browsers that default to print-color-adjust: economy, hiding the
   receipt's identity and total. These rules drop the colored backgrounds
   and re-darken the foreground when printing so the receipt prints
   identifiably even on a black-and-white printer, and collapse vertical
   spacing so a typical receipt fits one page.
*/
@media print {
    .receipt-card {
        border: none;
        box-shadow: none;
        max-width: 100%;
        margin: 0;
    }

    .receipt-card .receipt-header {
        background: transparent;
        color: #111827;
        padding: 0.3rem 0;
        border-bottom: 1px solid #111827;
    }

    .receipt-card .receipt-header .receipt-id {
        color: #4b5563;
    }

    .receipt-card .dealer-block {
        padding: 0.4rem 0;
    }

    .receipt-card .receipt-section {
        padding: 0.4rem 0;
    }

    .receipt-card .receipt-section-title {
        margin-bottom: 0.3rem;
    }

    .receipt-card .receipt-totals-footer {
        background: transparent;
        padding: 0.5rem 0;
        border-top: 2px solid #111827;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .receipt-card .receipt-totals-footer .lbl,
    .receipt-card .receipt-totals-footer .amount {
        color: #111827;
        display: inline-block;
        margin: 0;
    }

    .receipt-card .receipt-totals-footer .amount {
        font-size: 1.1rem;
    }

    .receipt-card .receipt-footer {
        padding: 0.4rem 0;
    }
}