/* Lotto-specific UI: numbered draw balls, win colour, hero ball motif. */

.lotto-balls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.lotto-ball {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--app-ball-main-text);
    background: radial-gradient(circle at 32% 26%, #ffffff, #ced2e4 78%);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22), 0 5px 12px rgba(8, 4, 26, 0.45);
}

/* The two Euro numbers get the gold treatment. */
.lotto-ball--euro {
    color: var(--app-ball-euro-text);
    background: radial-gradient(circle at 32% 26%, var(--app-primary-soft), var(--app-primary-strong) 80%);
    box-shadow: inset 0 -3px 6px rgba(90, 60, 0, 0.3), 0 5px 14px rgba(245, 196, 81, 0.3);
}

.lotto-ball--sm {
    width: 1.95rem;
    height: 1.95rem;
    font-size: 0.82rem;
}

.lotto-ball--xs {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.72rem;
}

/* A played number that matches the drawn winning numbers (highlighted even when
   the row did not win a prize). A green ring reads on both white and gold balls. */
.lotto-ball--hit {
    outline: 3px solid var(--app-win);
    outline-offset: 1px;
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--app-win), 0 0 12px var(--app-win);
}

/* "+" separator between main and Euro numbers. */
.lotto-balls__plus {
    margin: 0 0.15rem;
    color: var(--app-muted);
    font-weight: 700;
}

.text-win {
    color: var(--app-win) !important;
}

/* Payment QR codes render as inline SVG (dark modules on white). The SVG carries
   a viewBox so it scales centred to this fixed size; a white frame keeps it
   scannable on the dark theme, and both codes share one size so they line up. */
.lotto-qr {
    display: inline-block;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: var(--app-radius-sm);
    line-height: 0;
}

.lotto-qr svg {
    display: block;
    width: 170px;
    height: 170px;
}

/* ---- Play-slip overview: compact, uniform filter & action controls ----- */
/* One shared control height so the date inputs, the day dropdown, the
   checkbox chip and the buttons line up flush; the global form theming in
   components.css would otherwise render them at different heights. */
.lotto-filter .form-control,
.lotto-filter select,
.lotto-filter .btn,
.lotto-slip__actions select,
.lotto-slip__actions .btn,
.lotto-check {
    height: 2.45rem;
    padding-block: 0;
    font-size: 0.9rem;
}

.lotto-filter select,
.lotto-slip__actions select {
    width: auto;
}

.lotto-filter select {
    min-width: 9rem;
}

/* Size the pool dropdown to its content instead of full width, and keep the
   buttons on one line and the same height as "Ignore". */
.lotto-slip__actions select {
    min-width: 12rem;
}

.lotto-filter .btn,
.lotto-slip__actions .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Checkbox styled as a chip that matches the inputs around it. */
.lotto-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0.9rem;
    margin: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background-color: rgba(8, 5, 20, 0.42);
    color: var(--app-text);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.lotto-check:has(input:checked) {
    border-color: rgba(245, 196, 81, 0.65);
    background: rgba(245, 196, 81, 0.12);
    color: var(--app-text-strong);
}

.lotto-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--app-primary);
    cursor: pointer;
}

/* Section headings get a small gold "ticket stub" marker. */
.app-main h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 2.25rem;
}

.app-main h2::before {
    flex: none;
    width: 0.5rem;
    height: 1.35rem;
    content: "";
    border-radius: 3px;
    background: linear-gradient(var(--app-primary-soft), var(--app-primary-strong));
    box-shadow: 0 0 14px rgba(245, 196, 81, 0.4);
}

/* Decorative ball strip in the home hero. */
.lotto-hero-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.75rem;
}

.lotto-hero-balls .lotto-ball {
    animation: lotto-ball-float 4s ease-in-out infinite;
}

.lotto-hero-balls .lotto-ball:nth-child(2) { animation-delay: 0.4s; }
.lotto-hero-balls .lotto-ball:nth-child(3) { animation-delay: 0.8s; }
.lotto-hero-balls .lotto-ball:nth-child(4) { animation-delay: 1.2s; }
.lotto-hero-balls .lotto-ball:nth-child(5) { animation-delay: 1.6s; }
.lotto-hero-balls .lotto-ball:nth-child(6) { animation-delay: 2s; }
.lotto-hero-balls .lotto-ball:nth-child(7) { animation-delay: 2.4s; }

@keyframes lotto-ball-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .lotto-hero-balls .lotto-ball {
        animation: none;
    }
}