/* /lotto/ page (lt- prefix). Loaded only there by mu-plugins/betadvisor-page-lotto.php. Mobile first. */

/* Compact head so the results reach the first screen */
.tpl-lotto .page-head { padding-top: 12px; padding-bottom: 12px; }
.tpl-lotto .page-head h1 { margin-bottom: .2em; }
.tpl-lotto .page-head .lead { margin-bottom: .3em; font-size: 1rem; }

/* ----- Results board ----- */
.lt-board { margin: 0 0 22px; padding: 12px; border-radius: var(--radius); border: 2px solid var(--green); background: #fff; box-shadow: var(--shadow); }
.lt-board__tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.lt-tab { flex: 1; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); background: #f6f4ee; color: var(--ink); font-weight: 800; font-size: .95rem; line-height: 1.2; }
.lt-tab small { font-weight: 600; font-size: .72rem; color: var(--ink-soft); }
.lt-tab.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.lt-tab.is-on small { color: var(--lime); }
.lt-panel__meta { margin: 0 0 8px !important; font-size: .82rem; color: var(--ink-soft); }
.lt-panel__meta b { color: var(--ink); }
.lt-panel__old { margin: 0 0 8px !important; padding: 8px 10px; border-radius: 8px; background: var(--red-soft); border: 1px solid var(--red-line); font-size: .82rem; }
.lt-draws { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lt-draw { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fbfaf6; border: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-items: center; }
@media (min-width: 700px) { .lt-draw { grid-template-columns: minmax(0, 1.2fr) auto auto auto auto; gap: 10px; } }
.lt-draw__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; min-width: 0; }
@media (min-width: 700px) { .lt-draw__head { flex-direction: column; gap: 0; } }
.lt-draw__name { font-weight: 800; font-size: .92rem; color: var(--ink); }
.lt-draw__time { font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
.lt-balls { display: inline-flex; gap: 5px; flex-wrap: nowrap; }
.lt-ball { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: .88rem; font-family: var(--font-head); transition: transform .15s; }
.lt-balls--win .lt-ball { background: radial-gradient(circle at 32% 28%, #3fa47a 0%, var(--green-2) 55%, var(--green) 100%); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.lt-balls--mac .lt-ball { width: 26px; height: 26px; font-size: .74rem; background: #e9e6dc; color: var(--ink-soft); }
.lt-ball.is-hit { background: radial-gradient(circle at 32% 28%, #ffe08a 0%, var(--gold) 60%, #c98a00 100%) !important; color: var(--gold-ink) !important; transform: scale(1.12); }
.lt-draw__mlabel { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.lt-draw__hit { font-size: .76rem; font-weight: 800; color: #8a5f00; }
.lt-draw__hit:empty { display: none; }
.lt-showmore { cursor: pointer; margin: 8px 0 0; width: 100%; padding: 8px; border-radius: 8px; border: 1px dashed var(--green-2); background: transparent; color: var(--green); font-weight: 800; }
.lt-check { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--green-soft); }
.lt-check label { display: block; font-weight: 800; color: var(--green); font-size: .9rem; margin-bottom: 6px; }
.lt-check__row { display: flex; gap: 6px; }
.lt-check__row input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: 700 1rem/1.2 var(--mono); background: #fff; }
.lt-check__row button { cursor: pointer; padding: 0 12px; border-radius: 8px; border: 1px solid var(--green-2); background: #fff; color: var(--green); font-weight: 700; }
.lt-check__out { margin: 6px 0 0 !important; font-size: .82rem; }
.lt-board__note { margin: 10px 0 0 !important; font-size: .74rem; color: var(--ink-soft); }
@media (max-width: 380px) { .lt-ball { width: 29px; height: 29px; font-size: .8rem; } .lt-balls--mac .lt-ball { width: 24px; height: 24px; } }

/* ----- Ticket and bet illustrations ----- */
.lt-sheet { margin: 0 0 18px; padding: 14px; border-radius: var(--radius); background: var(--green); color: #dbe9e2; }
.lt-sheet__t { margin: 0 0 10px !important; font-weight: 800; color: #fff; }
.lt-sheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; }
.lt-sheet__lbl { min-width: 128px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--lime); }
.lt-sheet__lbl--m { color: #a9c6b7; }
.lt-sheet .lt-balls--mac .lt-ball { background: rgba(255, 255, 255, .14); color: #dbe9e2; }
.lt-sheet__cap { margin: 6px 0 0 !important; font-size: .78rem; color: #a9c6b7; }

.lt-bets { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 0 0 18px; }
@media (min-width: 640px) { .lt-bets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lt-bet { padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; border-top: 4px solid var(--green-2); }
.lt-bet p { margin: 0 0 6px; font-size: .9rem; }
.lt-bet__t { font-weight: 800; color: var(--green); font-size: 1.02rem; }
.lt-bet__pick { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.lt-chip { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; background: var(--green-soft); color: var(--green); font-weight: 800; font-size: .82rem; }
.lt-chip--hit { background: var(--green-2); color: #fff; }
.lt-chip--miss { background: var(--red-soft); color: #a4511b; text-decoration: line-through; }
.lt-bet__res { font-size: .82rem !important; font-weight: 700; }

.lt-lines { margin: 0 0 18px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fbfaf6; }
.lt-lines__t { margin: 0 0 8px !important; font-weight: 800; color: var(--green); }
.lt-lines__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 640px) { .lt-lines__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.lt-line { display: flex; justify-content: center; gap: 4px; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.lt-line.is-win { border: 2px solid var(--green-2); background: #eef7f1; }
.lt-lines__cap { margin: 8px 0 0 !important; font-size: .8rem; color: var(--ink-soft); }

/* Odds ladder (log scale, widths set by class) */
.lt-odds { margin: 0 0 18px; padding: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.lt-odds__t { margin: 0 0 10px !important; font-weight: 800; color: var(--green); }
.lt-odds__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 0 0 8px; font-size: .84rem; }
@media (min-width: 640px) { .lt-odds__row { grid-template-columns: 110px minmax(0, 1fr) 150px; } }
.lt-odds__name { font-weight: 800; }
.lt-odds__track { height: 16px; border-radius: 8px; background: #f1efe8; overflow: hidden; }
.lt-odds__fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #b3261e, #d99a00); }
.lt-odds__v { grid-column: 2; font-weight: 700; color: var(--ink-soft); }
@media (min-width: 640px) { .lt-odds__v { grid-column: auto; text-align: right; } }
.lt-l1 { width: 100%; } .lt-l2 { width: 80%; } .lt-l3 { width: 58%; } .lt-l4 { width: 34%; } .lt-l5 { width: 5%; }
.lt-odds__cap { margin: 6px 0 0 !important; font-size: .76rem; color: var(--ink-soft); }

/* Money back per N100 */
.lt-back { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 0 0 18px; }
@media (min-width: 640px) { .lt-back { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lt-back__c { padding: 14px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); }
.lt-back__c p { margin: 0; font-size: .86rem; }
.lt-back__n { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--green); line-height: 1.1; }
.lt-back__c--lo .lt-back__n { color: #b3261e; }
.lt-back__bar { display: block; height: 10px; margin: 8px 0; border-radius: 5px; background: #f1efe8; overflow: hidden; }
.lt-back__bar span { display: block; height: 100%; background: var(--green-2); }
.lt-back__c--lo .lt-back__bar span { background: #b3261e; }
.lt-b100 { width: 100%; } .lt-b60 { width: 60%; } .lt-b18 { width: 18%; }

/* Perm calculator */
.lt-perm { margin: 0 0 20px; padding: 16px; border-radius: var(--radius); border: 2px solid var(--green-2); background: #fff; }
.lt-perm__t { margin: 0 0 10px !important; font-weight: 800; color: var(--green); font-size: 1.1rem; }
.lt-perm__in { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .lt-perm__in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lt-perm__in label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.lt-perm__in input, .lt-perm__in select { min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font: 700 1rem/1.2 var(--font); background: #fbfaf6; color: var(--ink); }
.lt-perm__out { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 8px; }
@media (min-width: 700px) { .lt-perm__out { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lt-perm__out div { padding: 10px; border-radius: 8px; background: var(--green-soft); }
.lt-perm__out dt { font-size: .72rem; color: var(--ink-soft); }
.lt-perm__out dd { margin: 0; font-weight: 800; color: var(--green); font-size: 1.02rem; }
.lt-perm__dist { margin: 0 0 6px !important; font-size: .8rem; color: var(--ink); }
.lt-perm__note { margin: 0 !important; font-size: .76rem; color: var(--ink-soft); }

/* Tables and callouts */
.lt-table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lt-table table { margin: 0; }
.lt-table tbody tr:nth-child(even) td { background: #fbfaf6; }
@media (max-width: 480px) { .lt-table th, .lt-table td { padding: 8px; font-size: .82rem; } }
.lt-keep { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 0 0 16px; }
@media (min-width: 640px) { .lt-keep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lt-keep__col { padding: 14px; border-radius: var(--radius-sm); background: #f4f9f1; border-left: 4px solid var(--green-2); }
.lt-keep__col--warn { background: var(--red-soft); border-left-color: var(--red-line); }
.lt-keep__t { margin: 0 0 6px !important; font-weight: 800; color: var(--green); }
.lt-keep__col--warn .lt-keep__t { color: #8a4415; }
.lt-keep ul { margin: 0; padding-left: 1.1em; font-size: .92rem; }
.lt-steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: lt; display: grid; gap: 8px; }
.lt-steps > li { margin: 0; position: relative; padding: 12px 14px 12px 54px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fbfaf6; counter-increment: lt; font-size: .92rem; }
.lt-steps > li::before { content: counter(lt); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 800; }
.lt-rg { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--green-soft); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .lt-ball { transition: none; } }