/* =============================================================================
   Tax Receipt — shared presentation for all five receipt partials
   (_VehicleReceipt, _RealEstateReceipt, _BusinessReceipt,
    _PersonalPropertyReceipt, _PlannedPaymentReceipt)

   Scoped entirely to #receiptSection, which every receipt already wraps its
   content in. Nothing here requires a markup change, so the paid/unpaid
   conditionals, the payment form, and the hidden fields are untouched.

   PALETTE is taken from the county's existing stylesheets rather than invented,
   so receipts read as part of the same site as the header, tab band, and cart:
     #193D6A  county navy   (header.css, nav.css)
     #277DA3  teal accent   (header.css, cart.css)
     #D1EEFC  pale blue     (nav.css tab band)
     #f59e0b  amber         (cart.css prior-year)
     #198754  success green (Main.css)

   ============================================================================= */

#receiptSection {
    --rc-navy: #193D6A;
    --rc-navy-soft: #2b5288;
    --rc-teal: #277DA3;
    --rc-pale: #D1EEFC;
    --rc-ink: #1F1F1F;
    --rc-muted: #5b6b7f;
    --rc-hairline: #dbe3ec;
    --rc-surface: #ffffff;
    --rc-surface-alt: #f7f9fc;

    color: var(--rc-ink);
    max-width: 62rem;
    margin-inline: auto;
    border-top: 0 !important; /* replaced by the masthead rule below */
}

/* Money and identifiers line up column-to-column. On a document that is
   mostly figures this does more for readability than any other single rule. */
#receiptSection {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   Masthead
   The receipt title block. A navy rule above it stands in for the letterhead
   edge and replaces the generic Bootstrap border-top.
   --------------------------------------------------------------------------- */
#receiptSection > .text-center:first-of-type {
    position: relative;
    padding-top: 1.75rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem !important;
    border-bottom: 1px solid var(--rc-hairline);
}

    #receiptSection > .text-center:first-of-type::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 3px;
        background: var(--rc-navy);
    }

/* The receipt icon reads as decoration at full size; quiet it down so the
   title carries the block. */
#receiptSection .bi-receipt {
    color: var(--rc-teal) !important;
    font-size: 1.5rem !important;
}

#receiptSection h4.fw-bold {
    font-size: 1.5rem !important;
    letter-spacing: -0.01em;
    color: var(--rc-navy);
    margin-bottom: .35rem !important;
}

/* Tax year / begins-on lines under the title */
#receiptSection > .text-center:first-of-type small {
    color: var(--rc-muted) !important;
    font-size: .8125rem;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------------------
   Section headers
   Existing markup: <h6 class="fw-bold border-bottom pb-2 mb-3">
   Rendered as a small uppercase eyebrow with a short teal rule — the rule
   marks where a section starts rather than boxing the content in.
   --------------------------------------------------------------------------- */
#receiptSection h6.fw-bold.border-bottom {
    position: relative;
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rc-navy);
    border-bottom: 1px solid var(--rc-hairline) !important;
    padding-bottom: .5rem !important;
    margin-bottom: 1.15rem !important;
}

    #receiptSection h6.fw-bold.border-bottom::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 2.5rem;
        height: 2px;
        background: var(--rc-teal);
    }

/* ---------------------------------------------------------------------------
   Label / value pairs
   Existing markup: <span class="text-muted d-block">Label</span>
                    <span class="fw-semibold">Value</span>
   --------------------------------------------------------------------------- */
#receiptSection .text-muted.d-block {
    color: var(--rc-muted) !important;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .15rem;
}

#receiptSection .row [class*="col"] > .fw-semibold:not(.btn) {
    font-size: .9375rem;
    color: var(--rc-ink);
    line-height: 1.4;
}

/* Give the paired rows room to breathe without touching the grid markup. */
#receiptSection .row.g-3 {
    row-gap: 1.15rem !important;
}

/* ---------------------------------------------------------------------------
   Amount owed — the signature element
   Existing markup: <div class="d-flex justify-content-between fw-bold fs-5">
   The figure the reader came for, so it gets the one strong treatment on the
   page: a tinted panel anchored by a navy edge.
   --------------------------------------------------------------------------- */
#receiptSection .d-flex.justify-content-between.fw-bold.fs-5 {
    align-items: baseline;
    gap: 1rem;
    background: var(--rc-pale);
    border-left: 4px solid var(--rc-navy);
    border-radius: .25rem;
    padding: 1rem 1.25rem;
    margin-top: .25rem;
}

    #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 > span:first-child {
        font-size: .8125rem !important;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--rc-navy);
    }

    #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 > span:last-child {
        font-size: 1.75rem !important;
        font-weight: 700;
        color: var(--rc-navy);
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

/* Line items above the total */
#receiptSection .d-flex.justify-content-between:not(.fw-bold) {
    padding: .35rem 0;
    font-size: .9375rem;
}

#receiptSection hr {
    border-color: var(--rc-hairline);
    opacity: 1;
    margin: 1rem 0 .5rem;
}

/* ---------------------------------------------------------------------------
   Status messages
   Bootstrap alerts, restyled as calm banded notes rather than coloured boxes.
   Amber matches the cart's prior-year treatment so the two agree.
   --------------------------------------------------------------------------- */
#receiptSection .alert {
    border: 1px solid var(--rc-hairline);
    border-left-width: 4px;
    border-radius: .25rem;
    padding: .85rem 1rem;
    font-size: .875rem;
}

#receiptSection .alert-success {
    background: #f0f9f4;
    border-left-color: #198754;
    color: #14532d;
}

#receiptSection .alert-warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
}

/*#receiptSection .alert-danger {
    background: #fef4f4;
    border-left-color: #b42318;
    color: #7a271a;
}*/
    #receiptSection .alert-danger {
        background: #277da32e;
        border-left-color: #277DA3;
        color: black;
    }

#receiptSection .alert-info {
    background: #f2f9fd;
    border-left-color: var(--rc-teal);
    color: #14405a;
}

/* ---------------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------------- */
#receiptSection .btn {
    font-size: .9375rem;
    letter-spacing: .01em;
    border-radius: .375rem !important;
}

#receiptSection .btn-dark {
    background: var(--rc-navy);
    border-color: var(--rc-navy);
}

    #receiptSection .btn-dark:hover,
    #receiptSection .btn-dark:focus {
        background: var(--rc-navy-soft);
        border-color: var(--rc-navy-soft);
    }

    #receiptSection .btn-outline-dark {
        color: #fff;
        border-color: var(--rc-navy);
    }

    #receiptSection .btn-outline-dark:hover,
    #receiptSection .btn-outline-dark:focus {
        background: var(--rc-navy-soft);
        border-color: var(--rc-navy-soft);
        color: #fff;
    }

/* Keyboard focus stays visible regardless of Bootstrap's own treatment. */
#receiptSection :is(a, button, input, select):focus-visible {
    outline: 3px solid var(--rc-teal);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Payment form
   --------------------------------------------------------------------------- */
#receiptSection #paymentForm {
    background: var(--rc-surface-alt);
    border: 1px solid var(--rc-hairline);
    border-radius: .5rem;
    padding: 1.5rem;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    #receiptSection h4.fw-bold {
        font-size: 1.25rem !important;
    }

    #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 {
        flex-direction: column;
        gap: .25rem;
        align-items: flex-start;
    }

        #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 > span:last-child {
            font-size: 1.5rem !important;
        }

    #receiptSection #paymentForm {
        padding: 1rem;
    }

    /* Stacked action buttons read better than two cramped halves. */
    #receiptSection .d-flex.gap-3 {
        flex-direction: column;
    }

        #receiptSection .d-flex.gap-3 > .btn {
            width: 100% !important;
        }
}

@media (prefers-reduced-motion: reduce) {
    #receiptSection * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Print
   Receipts get printed and filed, so drop tinted panels for ink economy and
   keep the structural rules that make the document scannable on paper.
   --------------------------------------------------------------------------- */
@media print {
        #receiptSection {
            max-width: none;
            color: #000;
        }
        
        #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 {
            background: transparent;
            border: 1px solid #000;
            border-left-width: 4px;
        }

        #receiptSection .d-flex.justify-content-between.fw-bold.fs-5 > span {
            color: #000 !important;
        }

        #receiptSection h6.fw-bold.border-bottom,
        #receiptSection h4.fw-bold {
            color: #000;
        }

        #receiptSection .alert {
            background: transparent;
            color: #000;
        }

        /* Controls are meaningless on paper. */
        #receiptSection .btn,
        #receiptSection .d-flex.gap-3 {
            display: none !important;
        }
    }

/* =============================================================================
   QR landing prompt (#qrVerifyPanel, in taxModal)
   Same section eyebrow and label/value styling as the receipt above, so the
   read-only bill summary looks like the receipt it leads to. Same palette,
   same values; scoped to the prompt so nothing else is affected.
   ============================================================================= */
#qrVerifyPanel {
    --rc-navy: #193D6A;
    --rc-teal: #277DA3;
    --rc-ink: #1F1F1F;
    --rc-muted: #5b6b7f;
    --rc-hairline: #dbe3ec;

    color: var(--rc-ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

    #qrVerifyPanel h6.fw-bold.border-bottom {
        position: relative;
        font-size: .75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--rc-navy);
        border-bottom: 1px solid var(--rc-hairline) !important;
        padding-bottom: .5rem !important;
        margin-bottom: 1.15rem !important;
    }

        #qrVerifyPanel h6.fw-bold.border-bottom::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            width: 2.5rem;
            height: 2px;
            background: var(--rc-teal);
        }

    #qrVerifyPanel .text-muted.d-block {
        color: var(--rc-muted) !important;
        font-size: .6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: .15rem;
    }

    #qrVerifyPanel .row [class*="col"] > .fw-semibold {
        font-size: .9375rem;
        color: var(--rc-ink);
        line-height: 1.4;
    }

    #qrVerifyPanel .row.g-3 {
        row-gap: 1.15rem !important;
    }