/*
 * Individual décimo page. Only layout glue: every visual of the ticket, stock
 * and stepper comes from the existing components in style.css.
 *
 * The ticket is laid out at the exact size of the list card (the reference
 * size below) and scaled as a whole to the stage width, so the number sits
 * exactly where the list puts it, whatever units the calibration tokens use.
 * js/decimo-page.js sets --lfx-ticket-scale = stage width / reference width.
 */
.lfx-decimo {
    --lfx-ticket-ref-width: 232;
    --lfx-ticket-ref-height: 145;
}

.lfx-decimo .lfx-decimo-stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.6;
    border-radius: var(--tblr-border-radius);
}

.lfx-decimo .lfx-decimo-stage .lottery-ticket-image {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--lfx-ticket-ref-width) * 1px);
    height: calc(var(--lfx-ticket-ref-height) * 1px);
    transform: scale(var(--lfx-ticket-scale, 1));
    transform-origin: 0 0;
}

.lfx-decimo .ticket-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

/* Same small-screen number placement as the list. */
@media (max-width: 576px) {
    .lfx-decimo .ticket-number {
        top: 10px;
        left: 35%;
    }
}

/* 44px touch targets on the existing stepper. */
.lfx-decimo .quantity-controls .quantity-btn,
.lfx-decimo-bar .quantity-controls .quantity-btn {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
}

@media (max-width: 767px) {
    .lfx-decimo {
        --lfx-ticket-ref-width: 211.2;
        --lfx-ticket-ref-height: 132;
        padding-bottom: 5rem;
    }
}

/* The sticky bar CTA takes the remaining width without overflowing. */
.lfx-decimo-bar [data-decimo-buy] {
    min-width: 0;
    min-height: 2.75rem;
}