/* Pay Bill modal - B60 OS tokens only */

.pay-bill-modal .ds-modal {
    max-width: 720px;
}

.pay-bill-method-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pay-bill-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 10px 8px;
    border: 2px solid var(--ds-border, var(--border));
    border-radius: var(--ds-radius-md, 12px);
    background: var(--ds-surface, #fff);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-primary, var(--text-primary));
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pay-bill-method-btn:hover {
    border-color: var(--ds-border-strong, var(--border));
}

.pay-bill-method-btn.is-selected {
    border-color: var(--ds-primary, var(--accent));
    box-shadow: 0 0 0 1px var(--ds-primary, var(--accent));
}

.pay-bill-method-btn .glyph {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ds-primary-tint, #EEF2FF);
    color: var(--ds-primary, var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pay-bill-totals {
    border-top: 1px solid var(--ds-border, var(--border));
    padding-top: 14px;
    margin-top: 8px;
}

.pay-bill-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--ds-text-secondary, var(--text-secondary));
    margin-bottom: 8px;
}

.pay-bill-total-row .value {
    font-variant-numeric: tabular-nums;
    color: var(--ds-text-primary, var(--text-primary));
}

.pay-bill-total-row.is-discount .value {
    color: var(--ds-success, #10B981);
    font-weight: 700;
}

.pay-bill-total-row.is-payable {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ds-border, var(--border));
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-text-primary, var(--text-primary));
}

.pay-bill-total-row.is-payable .value {
    font-size: 20px;
    font-weight: 700;
}

.pay-bill-cash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    background: var(--ds-surface-alt, var(--bg-tertiary));
    border-radius: var(--ds-radius-md, 12px);
    border: 1px solid var(--ds-border, var(--border));
}

.pay-bill-cash-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-secondary, var(--text-secondary));
    margin-bottom: 6px;
}

.pay-bill-cash-field input {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/*
 * Change mirrors the field beside it: label on the label line, number on the
 * number line. It used to be a horizontal label/value pair centred against
 * the whole box, so its text sat between the Amount Received label and its
 * input and lined up with neither.
 */
.pay-bill-change {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Right-aligned because every other money figure in this modal is --
       the bill amounts, the subtotal, the total payable. Centred, it lined
       up with the input's centred digits but with nothing else. */
    align-items: flex-end;
    text-align: end;
}

.pay-bill-change > span:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-text-secondary, var(--text-secondary));
    margin-bottom: 6px;
}

.pay-bill-change .value {
    /* Matches the input's height so the two sit on one line. */
    display: flex;
    align-items: center;
    min-height: 38px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ds-success, #10B981);
    font-variant-numeric: tabular-nums;
}

.pay-bill-quick-tender {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pay-bill-quick-tender .btn {
    flex: 1 1 auto;
    min-width: 72px;
}

@media (max-width: 640px) {
    .pay-bill-method-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pay-bill-cash-row {
        grid-template-columns: 1fr;
    }
}

/* Where cash over the total goes: change, tip, or the client's account. Shown
   only when there is an overpayment, so the ordinary exact-money case stays a
   single tap with nothing extra to read. */
.pay-bill-overpay {
    margin-block-start: var(--ds-space-3);
    padding: var(--ds-space-3);
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    background: var(--ds-bg-inset);
}

.pay-bill-overpay[hidden] {
    display: none;
}

.pay-bill-overpay-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-semibold);
    margin-block-end: var(--ds-space-2);
}

.pay-bill-overpay-modes {
    display: flex;
    gap: var(--ds-space-2);
}

.pay-bill-overpay-modes .btn {
    flex: 1;
    /* 40px: this is a decision made with a customer waiting, on a touch
       screen, about their money. */
    min-height: 40px;
}

.pay-bill-overpay-hint {
    margin: var(--ds-space-2) 0 0;
    font-size: var(--ds-text-xs);
    color: var(--ds-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: split or compact, and portrait either way

   This modal was a 520px column on a 1520x730 till -- solving a height
   problem in the one dimension the hardware does not have. Measured before
   this change it needed 69px of scroll, and that was without the discount
   panel open, the overpayment row, or the quick-tender strip on screen.

   Two shapes now, chosen by a setting because this is going out to more than
   one shop on more than one screen:

     split    bill on the left, money on the right. Wants width.
     compact  one column. Wants a narrow or portrait screen, or simply
              suits the person who prefers it.

   The markup is identical for both. Only .is-split / .is-compact differ, so
   there is one set of ids and one set of handlers to keep working.
   ═════════════════════════════════════════════════════════════════════════ */
.pay-bill-modal {
    display: grid;
    gap: var(--ds-space-4);
    align-items: start;
}

.pay-bill-col {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    min-width: 0;              /* or a long product name widens the column */
}

.pay-bill-modal.is-compact { grid-template-columns: minmax(0, 1fr); }
.pay-bill-modal.is-split   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/*
 * The gutter between the two columns.
 *
 * The grid gap was 16px and there was no divider, so the bill card's right
 * border finished 15px from the PAYMENT METHOD label and the two zones read
 * as one crowded field. Measured at 1520x730 the modal was using 513px of
 * the 671px available to it -- the room to fix this was already there and
 * simply unspent.
 *
 * 20px + a hairline + 20px, so the gutter is symmetric about the rule.
 */
.pay-bill-modal.is-split {
    column-gap: var(--ds-space-5);
    /*
     * Stretch, not start: the columns are different heights (295 vs 306
     * measured) and a rule that stops short of the shorter one reads as an
     * unfinished border rather than a divider. Both columns lay their
     * content out from the top regardless -- they are flex columns, so the
     * extra height lands at the bottom as space, not as stretched content.
     */
    align-items: stretch;
}

.pay-bill-modal.is-split .pay-bill-col-pay {
    border-inline-start: 1px solid var(--ds-border-subtle, var(--ds-border-default));
    padding-inline-start: var(--ds-space-5);
}

/* The blocks inside a column get the same air as the gutter between them. */
.pay-bill-modal.is-split .pay-bill-col { gap: var(--ds-space-4); }

/* The itemised bill is the one thing the two layouts differ on. In compact
   there is no room for it and no need: the cashier arrived from the order
   screen, where the lines are the screen. */
.pay-bill-modal.is-compact .pay-bill-bill-field { display: none; }

/* With the bill gone there is nothing above the totals for their top rule to
   separate them from, and it rendered as a stray line hanging under the modal
   title. The rule is a divider, so it goes when the thing it divides goes. */
.pay-bill-modal.is-compact .pay-bill-totals {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/*
 * Portrait, and anything too narrow to hold two columns.
 *
 * A split layout squeezed into 480px is worse than a stack -- the money column
 * gets ~220px, which is not enough for a quick-tender row. Both fall back to
 * one column, and the bill lines stay: a portrait screen is short of width,
 * not of height, so there is room to show them.
 *
 * orientation:portrait covers a rotated till whatever its resolution;
 * max-width covers a landscape screen that is simply small.
 */
@media (orientation: portrait), (max-width: 900px) {
    .pay-bill-modal.is-split { grid-template-columns: minmax(0, 1fr); }
}

/* The modal box itself has to match the layout inside it. :has() rather than a
   class on .modal, because Components.modal() does not take one -- the same
   approach pos.css already uses for the Charge modal. */
.modal:has(.pay-bill-modal.is-split)   { max-width: 980px; }
.modal:has(.pay-bill-modal.is-compact) { max-width: 560px; }

@media (orientation: portrait), (max-width: 900px) {
    .modal:has(.pay-bill-modal.is-split) { max-width: 560px; }
}

/* ── The itemised bill ─────────────────────────────────────────────────── */
.pay-bill-lines {
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

/* 13px, not --ds-text-sm. That token computes to 11.375px here, which put
   the bill two and a half points under the Subtotal line directly beneath
   it -- the smallest text in the modal on the one block a customer leans in
   to check. */
.pay-bill-line {
    display: flex;
    justify-content: space-between;
    gap: var(--ds-space-3);
    padding: 9px 12px;
    font-size: 13px;
}

.pay-bill-line + .pay-bill-line { border-top: 1px solid var(--ds-border-subtle, var(--ds-border-default)); }

.pay-bill-line-name { min-width: 0; overflow-wrap: anywhere; }

.pay-bill-line-amt {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── A labelled field ──────────────────────────────────────────────────── */
.pay-bill-field-label {
    display: block;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ds-text-secondary);
    margin-block-end: var(--ds-space-2);
}

/* ── Discount, in one row ──────────────────────────────────────────────── */
.pay-bill-disc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ds-space-2);
    align-items: center;
}

.pay-bill-seg {
    display: flex;
    border: 1px solid var(--ds-border-default);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.pay-bill-seg button {
    border: 0;
    padding: 8px 12px;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-fw-bold);
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    cursor: pointer;
    min-height: 38px;
}

.pay-bill-seg button.is-on {
    background: var(--ds-primary);
    color: var(--ds-on-primary, #fff);
}

.pay-bill-disc input {
    min-height: 38px;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border-default);
    background: var(--ds-surface);
    color: var(--ds-text-primary);
    text-align: center;
    font-family: var(--font-mono);
    font-weight: var(--ds-fw-bold);
    font-size: var(--ds-text-md);
    padding-inline: var(--ds-space-2);
}

.pay-bill-disc-clear {
    min-height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md);
    border: 1px solid var(--ds-border-default);
    background: var(--ds-surface);
    color: var(--ds-text-secondary);
    cursor: pointer;
}

/*
 * Compact on a short landscape screen.
 *
 * One column at 1520x730 measured 34px over. The split layout has the width to
 * absorb its blocks side by side; compact stacks all of them, so it is the one
 * that has to give something back. What it gives is the gap between blocks and
 * the section padding -- not a control height, and not the quick-tender row,
 * which is the fastest path through this screen.
 *
 * Gated on height rather than the layout class: a portrait screen running
 * compact has the room and keeps the roomier spacing.
 */
@media (max-height: 820px) {
    .pay-bill-modal.is-compact { gap: var(--ds-space-3); }
    .pay-bill-modal.is-compact .pay-bill-col { gap: var(--ds-space-2); }
    .pay-bill-modal.is-compact .pay-bill-field-label { margin-block-end: 4px; }
    .pay-bill-modal.is-compact .pay-bill-totals { padding-block: var(--ds-space-2); }
    .pay-bill-modal.is-compact .pay-bill-total-row { padding-block: 2px; }
    /* The cash block carries 16px above it and 14px inside, set for a screen
       with room. The quick-tender row under it is the fastest way through
       this modal, so the padding gives way before the buttons do. */
    .pay-bill-modal.is-compact .pay-bill-cash-row {
        margin-block-start: var(--ds-space-2);
        padding: var(--ds-space-2);
    }

    .pay-bill-modal.is-compact .pay-bill-quick-tender { margin-block-start: var(--ds-space-2); }
}

/*
 * The discount row inside the totals.
 *
 * It is a total row that happens to hold a control, so it keeps the row's
 * spacing and its right-aligned amount, and the control takes the space the
 * label used to. Auto width on the left, not 1fr: the segment and the field
 * should stay as wide as they need and leave the amount its column, rather
 * than pushing it off the edge on a narrow screen.
 */
.pay-bill-disc-row {
    gap: var(--ds-space-3);
    align-items: center;
}

/*
 * The field is capped rather than greedy. On 1fr it stretched to ~320px for
 * a value that is at most five characters, which made the one row in the
 * totals that holds a control the widest thing in the column -- louder than
 * the Total Payable underneath it.
 */
.pay-bill-disc-row .pay-bill-disc {
    flex: 0 1 auto;
    min-width: 0;
    /* The clear button only earns its width once there is something to clear,
       but keeping it in flow avoids the row twitching as you type. */
    grid-template-columns: auto minmax(0, 132px) auto;
}

.pay-bill-disc-row .value[hidden] { display: none; }

.pay-bill-disc-row .value {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Inside a totals row the control does not need to be as tall as it is when it
   is a field of its own. */
.pay-bill-disc-row .pay-bill-seg button,
.pay-bill-disc-row .pay-bill-disc input,
.pay-bill-disc-row .pay-bill-disc-clear {
    min-height: 34px;
}