/* ==========================================================================
   ts-receipt — printed betting slip design
   Shared by: member/betting.php, member/ticket_report.php,
              app/betting.php, app/ticket_report.php,
              app/tickets.php, app/reports.php
   Every rule is scoped under .ts-receipt so it never leaks into page chrome.
   ========================================================================== */

@font-face {
    font-family: 'TSKhmer';
    src: url('/assets/font/Battambang-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'TSKhmer';
    src: url('/assets/font/KhmerOSBattambang-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
/* Only ever reached for the riel sign (៛) — Khmer Chrieng draws it at full
   digit height, which is what the printed slip uses. */
@font-face {
    font-family: 'TSRiel';
    src: url('/assets/font/Khmer%20Chrieng1%20Regular.ttf') format('truetype');
    font-display: swap;
}
/* Display face for the tagline under the logo. */
@font-face {
    font-family: 'TSBrand';
    src: url('/assets/font/Kh%20Jrung%20Thom.ttf') format('truetype');
    font-display: swap;
}
/* Latin/digits. Deliberately NOT called 'Arial': every host page redeclares that
   family as a webfont pointing at Arial.ttf, and app/tickets.php even maps
   font-weight:bold to the same Regular file — so the browser matches a "bold"
   face that is really regular and skips synthetic bolding, leaving 400/600/700
   identical. Owning the name here keeps font-weight working on the slip. */
@font-face {
    font-family: 'TSLatin';
    src: url('/assets/font/Arial.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

/* ── Slip ─────────────────────────────────────────────────────────────── */
.ts-receipt {
    --ts-pad: 14px;

    /* ── Fonts — change them HERE, nowhere else ──────────────────────────
       Every rule below points at one of these four, so editing a stack here
       updates the whole slip. Adding font-family to an individual rule
       re-creates the old problem where a change appeared to do nothing.

       --ts-font        numbers, amounts, dates: Latin-first. 'TSRiel'/'TSKhmer'
                        trail it so Khmer characters — the riel sign ៛ above all —
                        get a real glyph instead of an undersized system fallback.
       --ts-font-khmer  Khmer prose: labels, the drag note, the footer line.
       --ts-font-brand  display face for the tagline and the draw title.
       --ts-font-symbol glyphs the Khmer faces lack, e.g. the ↓ on a range bet. */
    --ts-font:        'TSLatin', Helvetica, 'TSRiel', 'TSKhmer', sans-serif;
    --ts-font-khmer:  'TSKhmer', 'Battambang', 'Hanuman', 'Kantumruy Pro', sans-serif;
    --ts-font-brand:  'TSBrand', 'TSKhmer', 'Battambang', 'Hanuman', 'Kantumruy Pro', sans-serif;
    --ts-font-symbol: 'TSLatin', Helvetica, sans-serif;

    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 15px var(--ts-pad) 40px;
    background: #fff;
    color: #000;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--ts-font);
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.ts-receipt,
.ts-receipt * { box-sizing: border-box; }

/* ── Brand block ──────────────────────────────────────────────────────── */
.ts-receipt .ts-brand { text-align: center; }
.ts-receipt .ts-brand-name { line-height: 0; }
.ts-receipt .ts-brand-name img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
}
.ts-receipt .ts-brand-sub {
    font-family: var(--ts-font-brand);
    font-size: 18px;
    font-weight: 400 ;
    /* Kh Jrung Thom ships upright only, so this is a synthesized oblique. */
    font-style: italic;
    line-height: 1.4;
    margin-top: 2px;

}

/* ── Separators — full bleed to both edges of the slip ────────────────── */
.ts-receipt .ts-rule {
    height: 0;
    border: 0;
    border-top: 1.5px solid currentColor;
    margin: 5px calc(1 * var(--ts-pad));
}

/* ── Draw title (display_name.display_html) ───────────────────────────── */
.ts-receipt .ts-lottery-name { text-align: center; margin: 0; }
.ts-receipt .ts-lottery-name .lottery-names {
    display: block;
    margin: 0;
    font-family: var(--ts-font-brand);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
}
.ts-receipt .ts-lottery-name .khmer-lottery,
.ts-receipt .ts-lottery-name .draw-times,
.ts-receipt .ts-lottery-name .Time-font {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
}

/* ── Meta block: "draw time / #code" then "date / placed time" ────────── */
.ts-receipt .ts-meta {
    text-align: center;
    font-family: var(--ts-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
}
.ts-receipt .ts-meta-line { white-space: nowrap; }

/* ── Entries ──────────────────────────────────────────────────────────── */
.ts-receipt .ts-entry-list {
    margin: 0;
    padding-left: 30px;
    text-align: left;
    font-family: var(--ts-font);
    min-height: 0;
}
.ts-receipt .ts-bet-groups { margin: 0; }
.ts-receipt .ts-group-title {
    display: inline-block;
    margin: 3px 0;
    text-align: left;
    font-family: var(--ts-font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .5px;
    /* Drawn as a border, not text-decoration: html2canvas 1.4.1 ignores
       text-underline-offset, so the exported image lost the gap. */
    border-bottom: 1px solid currentColor;
    padding-bottom: 0px;
}
.ts-receipt .ts-bet-groups:first-child .ts-group-title { margin-top: 0; }
.ts-receipt .ts-bet-group { display: block; }

.ts-receipt .ts-entry-row {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.ts-receipt .ts-entry-num {
    flex: 0 0 auto;
    min-width: 0px;
    font-weight: 600;
}
.ts-receipt .ts-entry-type { margin-left: 5px; font-weight: 600; }
.ts-receipt .ts-entry-sep {
    flex: 0 0 14px;
    text-align: center;
    font-weight: 600;
}
.ts-receipt .ts-entry-amt {
    flex: 1 1 auto;
    font-family: inherit;
    font-weight: 600;
}
.ts-receipt .ts-entry-count { margin-left: 6px; font-weight: 600; }

/* Range/drag bets: start row, the covered-count note, end row */
.ts-receipt .ts-drag-display {
    display: block;
    margin: 0;
    text-align: left;
}
.ts-receipt .ts-drag-display .drag-row {
    display: flex;
    align-items: baseline;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.ts-receipt .ts-drag-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    font-family: var(--ts-font-khmer);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}
/* Khmer faces have no ↓ (U+2193), so keep it on a stack that does. */
.ts-receipt .ts-drag-arrow {
    font-family: var(--ts-font-symbol);
    line-height: 1;
}

/* ── Check-ticket QR (build({extra})) — member/ticket_report.php, app/reports.php.
   Lives here so both pages render it identically; it used to be page-level and
   the two copies had drifted (80px vs 90px code, different margins). ── */
.ts-receipt .ts-qr-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 8px 0 4px;
}
.ts-receipt .ts-qr-row canvas,
.ts-receipt .ts-qr-row img {
    width: 90px !important;
    height: 90px !important;
}
.ts-receipt .ts-qr-label {
    font-family: var(--ts-font-khmer);
    font-size: 13px;
    font-weight: 400;
    color: inherit;
}

/* Winning row highlight */
.ts-receipt .ts-entry-row.ts-won-highlight {
    padding: 0 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #fff7a0 0%, #ffe24d 100%);
}
.ts-receipt .ts-winner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    border-radius: 50%;
    background: #e53e3e;
    color: #fff;
    font-family: var(--ts-font-symbol);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ── Totals ───────────────────────────────────────────────────────────── */
.ts-receipt .ts-total-bar {
    margin: 0;
    padding-left: 15px;
    border: 0;
    text-align: left;
}
.ts-receipt .ts-total-row {
    display: flex;
    align-items: baseline;
    margin: 0;
    font-family: var(--ts-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}
.ts-receipt .ts-total-label {
    flex: 0 0 40%;
    font-family: var(--ts-font-khmer);
    font-weight: 400;
}
.ts-receipt .ts-total-sep {
    flex: 0 0 14px;
    text-align: center;
    font-weight: 600;
}
.ts-receipt .ts-total-value {
    flex: 1 1 auto;
    font-family: var(--ts-font);
    font-size: 20px;
    font-weight: 600;
}
.ts-receipt .ts-win-row .ts-total-value,
.ts-receipt .ts-total-value.win { color: #15803d; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ts-receipt .ts-receipt-footer {
    margin-top: 6px;
    text-align: center;
    font-family: var(--ts-font);
}
.ts-receipt .ts-footer-note {
    font-family: var(--ts-font-brand);
    font-size: 18.5px;
    font-weight: 400;
    line-height: 1.5;
}
.ts-receipt .ts-footer-serial {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
}

/* ── Retired markup from the previous design ──────────────────────────── */
.ts-receipt .ts-receipt-logo,
.ts-receipt .ts-bottom-text,
.ts-receipt .ts-receipt-hr,
.ts-receipt .ts-receipt-footer .footer-line1,
.ts-receipt .ts-receipt-footer .footer-line2,
.ts-receipt .ts-receipt-footer .footer-line3 { display: none; }