/* Daily card ticket drawn from its rows (templates/parts/slip.php): a paper betting slip with
   torn edges, scaling with its box (container query units). Used on the back of the card
   (assets/css/cards.css) and in the image panel of a ticket (assets/css/tickets.css). */

.bm-slip { --tone: #c9962a; container-type: inline-size; display: grid; text-align: left; place-items: center; width: 100%; height: 100%; padding: 6%; box-sizing: border-box; background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--tone) 30%, #0b1230), #050914 75%); }
.bm-slip--silver { --tone: #8d9aa8; }
.bm-slip--bronze { --tone: #b8733f; }
.bm-slip *, .bm-slip *::before, .bm-slip *::after { box-sizing: border-box; }

/* The paper: off-white, faint lines, torn top and bottom edge, a slight tilt. */
.bm-slip__paper { position: relative; display: flex; flex-direction: column; gap: 3cqw; width: 100%; max-height: 100%; overflow: hidden; padding: 7cqw 6cqw 6cqw; color: #1d1d22; font-family: var(--bm-hud, "Chakra Petch", monospace); font-size: 4.2cqw; line-height: 1.25; transform: rotate(-1.2deg);
	background: repeating-linear-gradient(180deg, transparent 0 5.8cqw, rgba(0, 0, 0, .025) 5.8cqw 6cqw), linear-gradient(180deg, #fbf8f1, #efeae0);
	box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .55);
	-webkit-mask: radial-gradient(1.6cqw at 50% 0, #0000 98%, #000) 0 0 / 4cqw 51% repeat-x, radial-gradient(1.6cqw at 50% 100%, #0000 98%, #000) 0 100% / 4cqw 51% repeat-x;
	mask: radial-gradient(1.6cqw at 50% 0, #0000 98%, #000) 0 0 / 4cqw 51% repeat-x, radial-gradient(1.6cqw at 50% 100%, #0000 98%, #000) 0 100% / 4cqw 51% repeat-x; }

.bm-slip__head { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: .5cqw dashed rgba(0, 0, 0, .35); }
.bm-slip__brand { font: 700 7.4cqw/1 var(--bm-display, Impact, sans-serif); letter-spacing: .03em; }
.bm-slip__brand b { color: var(--tone); }
.bm-slip__tier { padding: 1cqw 2.6cqw .7cqw; border-radius: 1cqw; background: var(--tone); color: #fff; font: 700 5.4cqw/1 var(--bm-display, Impact, sans-serif); letter-spacing: .06em; }
.bm-slip__meta { display: flex; justify-content: space-between; gap: 2cqw; margin: 0; color: #5a5a64; font-size: 3.6cqw; text-transform: uppercase; letter-spacing: .06em; }

.bm-slip__rows { display: grid; gap: 2.6cqw; margin: 0; padding: 0; list-style: none; counter-reset: bm-slip; }
.bm-slip__rows li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4cqw 2cqw; margin: 0; padding: 0 0 2.6cqw 6.4cqw; border-bottom: .3cqw dotted rgba(0, 0, 0, .3); counter-increment: bm-slip; }
.bm-slip__rows li::before { content: counter(bm-slip); position: absolute; top: .2cqw; left: 0; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #1d1d22; color: #fbf8f1; font-size: 3cqw; font-weight: 700; }
.bm-slip__match { grid-column: 1; font-weight: 700; overflow-wrap: anywhere; }
.bm-slip__time { grid-column: 1; color: #6a6a74; font-size: 3.4cqw; }
.bm-slip__pick { grid-column: 1; color: #3b3b44; font-size: 3.8cqw; }
.bm-slip__pick b { color: #111; }
.bm-slip__odds { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding: 1cqw 1.8cqw; border: .4cqw solid #1d1d22; border-radius: 1cqw; font-weight: 700; font-size: 4.4cqw; }

.bm-slip__total { display: flex; align-items: baseline; justify-content: space-between; margin: auto 0 0; padding-top: 1cqw; font-size: 4cqw; text-transform: uppercase; letter-spacing: .06em; }
.bm-slip__total strong { font: 700 10cqw/.9 var(--bm-display, Impact, sans-serif); letter-spacing: .02em; }
.bm-slip__barcode { display: block; height: 9cqw; margin-top: 1cqw; background: repeating-linear-gradient(90deg, #1d1d22 0 .5cqw, transparent .5cqw 1cqw, #1d1d22 1cqw 2.2cqw, transparent 2.2cqw 2.8cqw, #1d1d22 2.8cqw 3.2cqw, transparent 3.2cqw 4.4cqw); }
.bm-slip__id { align-self: center; margin-top: -1.6cqw; color: #6a6a74; font-size: 3cqw; letter-spacing: .3em; }

/* The zoom button around the slip, with a magnifier. */
.bm-slip-zoom { all: unset; position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; cursor: zoom-in; }
.bm-slip-zoom:focus-visible { outline: 3px solid var(--bm-cyan, #3ff0ff); outline-offset: -3px; }
.bm-slip-zoom__icon { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: rgba(4, 10, 34, .82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 4px 12px rgba(0, 0, 0, .35); transition: transform .2s; }
.bm-slip-zoom:hover .bm-slip-zoom__icon { transform: scale(1.08); }

/* Filling its place (the back of the card, the ticket's image panel): the paper is the whole
   surface – no frame, no tilt, no torn edges; the total and barcode sit at the bottom. */
:is(.bm-fut__back, .bm-ticket__media--slip) .bm-slip { padding: 0; background: linear-gradient(180deg, #fbf8f1, #ece6da); }
:is(.bm-fut__back, .bm-ticket__media--slip) .bm-slip__paper { height: 100%; max-height: none; transform: none; box-shadow: none; -webkit-mask: none; mask: none; }
.bm-fut__back .bm-slip-zoom { position: absolute; inset: 0; }
.bm-fut__back .bm-slip__paper { padding: 13% 8% 22%; }
.bm-fut__back .bm-slip-zoom__icon { top: auto; right: auto; left: 50%; bottom: 7%; margin-left: -20px; }

/* Large, in the lightbox. */
.bm-lightbox__html { width: min(92vw, 480px); max-height: calc(100dvh - 150px); overflow-y: auto; }
.bm-lightbox__html .bm-slip { height: auto; padding: 4px; background: none; }
.bm-lightbox__html .bm-slip__paper { transform: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }

/* The ticket panel has its own "Szelvény nagyítása" button – no magnifier over the slip. */
.bm-ticket__media--slip .bm-slip-zoom__icon { display: none; }