/*
 * gp-money.css — the one look for the order money box.
 *
 * Restyled 6 Aug 2026. Plan: docs/money-summary-consistency-fix-plan.md
 *
 * Loaded by:
 *   store-main/include/header.php   (seller portal)
 *   admin-latest/include/header.php (admin panel, which loads the same store screens)
 *
 * The Shoppers Vue component (Shared/MoneySummary.vue) carries the same rules
 * inline, because Shoppers does not load Snail assets. Keep the two in step:
 * any change here must be mirrored there, and vice versa.
 *
 * ---------------------------------------------------------------------------
 * DESIGN NOTES
 * ---------------------------------------------------------------------------
 * The box holds the most consequential numbers on the screen, so it is built to
 * be read, not decorated:
 *
 *   - a calm white surface with one hairline, rather than a loud fill;
 *   - block headings set small, spaced and quiet, so the AMOUNTS lead;
 *   - tabular figures, so decimal points line up down the column;
 *   - one accent only — the final row, tinted by what it asks the operator to do.
 *
 * Class prefix is gp-money- on purpose. Snail CSS is shared by every store
 * screen; nothing outside this box may inherit these rules.
 */

.gp-money-summary {
    background: #ffffff;
    border: 1px solid #e6e4de;
    border-radius: 10px;
    padding: 18px 20px;
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4842;
    box-shadow: 0 1px 2px rgba(28, 27, 24, 0.04);
}

/*
 * Pinned variant — the box stays on screen however far the page scrolls.
 *
 * Added 7 Aug 2026. On the POS till the cart panel is tall, so the box sat below
 * the fold: the figures that decide the sale were the ones you had to scroll for.
 *
 * position: fixed, NOT sticky. Sticky was tried first and does nothing here: a
 * sticky element can only travel inside its own parent, and this box's parent is
 * exactly as tall as the box. There is nowhere for it to slide, so it never
 * lifted off. Fixed takes it out of the page entirely and pins it to the window.
 *
 * The offset clears the store portal's fixed menu bar (.hometab, z-index 1022).
 * This box deliberately sits UNDER that bar, never over it, and a screen with a
 * different bar height can override --gp-money-sticky-offset.
 *
 * Being fixed, it no longer reserves its own space, so gp-money.js measures it
 * and pads the bottom of the page — otherwise it would cover the last rows of
 * whatever sits at the end of the screen.
 */
/*
 * Width: gp-money.js measures the column the box belongs to and pins it to
 * exactly that, so on the POS till it sits under the cart and leaves the Delivery
 * panel beside it fully visible. The left/right below are only the fallback for
 * the moment before that runs.
 */
.gp-money-summary--sticky {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: var(--gp-money-sticky-offset, 66px);
    z-index: 1021;
    margin-top: 0;
    box-shadow: 0 -4px 16px rgba(28, 27, 24, 0.10);
    /* A very long box must never eat the screen — it scrolls inside itself. */
    max-height: 40vh;
    overflow-y: auto;
}

.gp-money-block + .gp-money-block {
    border-top: 1px solid #efeee9;
    margin-top: 14px;
    padding-top: 14px;
}

/* Quiet heading. The numbers below it are the loud part. */
.gp-money-block-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #a39f95;
    margin-bottom: 9px;
}

/*
 * The box has to sit in a 500px slide-out cart as well as a full-width order
 * screen, so it wraps on its OWN width rather than the viewport's. Giving the
 * label a 300px flex-basis means the tax columns drop underneath the moment
 * there is not room for all three, instead of crushing the amount onto its own
 * line. No media query can do this — the viewport can be wide while the panel
 * is narrow.
 */
.gp-money-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 3px 0;
}

.gp-money-label {
    flex: 1 1 300px;
    min-width: 0;
}

.gp-money-label b {
    color: #1c1b18;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* Qty / weight / delivery type. Secondary information on the same line. */
.gp-money-meta {
    color: #a39f95;
    font-size: 12.5px;
    margin-left: 5px;
}

/*
 * The delivery breakdown icon sits inline, right after the delivery type, and
 * keeps the same look it has beside the delivery price rows — the box must not
 * invent a second style for the same control. Empty on store delivery and
 * pickup, so it takes no space there.
 */
.gp-money-delinfo {
    margin-left: 4px;
}

.gp-money-delinfo .delivery-breakdown-icon {
    font-size: 13px;
    vertical-align: baseline;
    cursor: pointer;
}

/*
 * Row 244-B, 11 Aug 2026 — sits in the same slot as the breakdown icon, on the
 * REVISED delivery line only, when the charge has been waived by the store's
 * "Return / Refund Free Pickup / Delivery" allowance. It replaces the ℹ icon
 * rather than joining it: there is no charge left to break down.
 */
.gp-money-waived {
    font-size: 12.5px;
    color: #1d9e75;
    white-space: nowrap;
}

/* The two tax columns, left-aligned in fixed slots so the figures stack cleanly. */
.gp-money-tax {
    flex: 0 0 115px;
    text-align: left;
    color: #8c887e;
    font-size: 12.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gp-money-line--total {
    border-top: 1px solid #efeee9;
    margin-top: 8px;
    padding-top: 10px;
}

.gp-money-line--total .gp-money-label {
    color: #1c1b18;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1 1 100%;
    width: 100%;
}

.gp-money-line--total .gp-money-label b {
    font-size: 15.5px;
    font-weight: 700;
    margin-left: auto;
}

/*
 * The final row is the only accent in the box. Its tint is set by
 * MoneyLabels::finalRow(), never by the screen.
 */
.gp-money-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.gp-money-final-label {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.01em;
}

.gp-money-final-right {
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}

.gp-money-final-amount {
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

.gp-money-action {
    border: 0;
    border-radius: 6px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    color: #ffffff;
    background: #1c1b18;
    transition: opacity 0.15s ease;
}

.gp-money-action:hover {
    opacity: 0.85;
}

.gp-money-action:focus-visible {
    outline: 2px solid #1c1b18;
    outline-offset: 2px;
}

/* pay = the customer owes us. */
.gp-money-tone-pay {
    background: #fbfaf7;
    border-color: #e6e4de;
}

.gp-money-tone-pay .gp-money-final-label,
.gp-money-tone-pay .gp-money-final-amount {
    color: #1c1b18;
}

/* refund = we owe the customer. The one place red is used. */
.gp-money-tone-refund {
    background: #fdf3f1;
    border-color: #f3d9d4;
}

.gp-money-tone-refund .gp-money-final-label,
.gp-money-tone-refund .gp-money-final-amount {
    color: #a33a2a;
}

.gp-money-tone-refund .gp-money-action {
    background: #a33a2a;
}

/* settled = nothing to move. Deliberately the quietest state. */
.gp-money-tone-settled {
    background: #f7f7f4;
    border-color: #eceae4;
}

.gp-money-tone-settled .gp-money-final-label,
.gp-money-tone-settled .gp-money-final-amount {
    color: #86827a;
}

.gp-money-tone-settled .gp-money-action {
    background: #6f6c65;
}

/*
 * A deduction inside the box — the Coupon line. Added 12 Aug 2026, Row 252.
 *
 * The invoices have always printed a coupon in red with a leading minus, so the
 * card keeps that. It is the only deduction in the box; the final row's refund
 * tint is a different thing and keeps its own colour.
 */
.gp-money-deduct {
    color: #a33a2a !important;
}

/*
 * Print variant — the card as it appears on an INVOICE. Added 12 Aug 2026, Row 252.
 *
 * Same rows, same words, same figures. What changes is only what a document does
 * not need: no shadow and no rounded card edge to fight the invoice's own frame,
 * and black text so it survives a black-and-white printer, where #4a4842 on white
 * comes out washed.
 *
 * There is no button and no sticky rule here because the partial does not render
 * them in print mode at all — see money.summary.php.
 */
.gp-money-summary--print {
    box-shadow: none;
    border-radius: 0;
    color: #000000;
    margin-top: 0;
}

.gp-money-summary--print .gp-money-meta,
.gp-money-summary--print .gp-money-tax {
    color: #444444;
}

@media print {
    .gp-money-summary--print {
        border: 1px solid #999999;
        page-break-inside: avoid;
    }
}

/* A line that does not apply is hidden. It is never renamed and never moved. */
.gp-money-hidden {
    display: none !important;
}

@media (max-width: 575.98px) {
    .gp-money-summary {
        padding: 14px 15px;
        font-size: 13px;
    }

    .gp-money-tax {
        text-align: left;
    }

    .gp-money-final {
        gap: 10px;
    }

    .gp-money-final-amount {
        font-size: 16px;
    }
}