.wzl-surebet { /* Podpięte pod design tokeny Weszło — flipują z klasą light/dark na . Fallbacki (po przecinku) działają, gdy widget jest użyty poza weszlo.com. */ --wzl-card: var(--neutral-surface-default, #1e1e1e); --wzl-inset: var(--neutral-surface-weak, #141414); --wzl-border: var(--neutral-border-weak, #333333); --wzl-text: var(--neutral-content-strong, #f2f2f2); --wzl-muted: var(--neutral-content-weak, #9a9a9a); --wzl-accent: var(--action-surface-strong, #f5a623); /* pomarańcz Weszło */ --wzl-accent-arb: #1fa254; /* zielony = surebet (stały, czytelny na obu motywach) */ --wzl-accent-bad: #d93a2b; /* czerwony = brak arbitrażu */ max-width: 520px; margin: 1.5em 0; padding: 22px; border: 1px solid var(--wzl-border); border-radius: 12px; background: var(--wzl-card); color: var(--wzl-text); font-family: inherit; box-sizing: border-box; } .wzl-surebet * { box-sizing: border-box; } /* Zakładki dwudrogowy / trzydrogowy */ .wzl-surebet__tabs { display: flex; gap: 6px; margin-bottom: 20px; background: var(--wzl-inset); padding: 4px; border-radius: 8px; border: 1px solid var(--wzl-border); } .wzl-surebet__tab { flex: 1; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--wzl-muted); font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; } .wzl-surebet__tab:hover { color: var(--wzl-text); } .wzl-surebet__tab.is-active { background: rgba(255, 152, 26, .15); /* pomarańczowy tint — czytelny na light i dark */ color: var(--wzl-accent); } /* Stawka */ .wzl-surebet__stake { margin-bottom: 16px; } .wzl-surebet label { display: block; font-size: 13px; font-weight: 600; color: var(--wzl-muted); margin-bottom: 6px; } .wzl-surebet__input, .wzl-surebet__odds { width: 100%; padding: 11px 12px; border: 1px solid var(--wzl-border); border-radius: 8px; font-size: 15px; background: var(--wzl-card); color: var(--wzl-text); } .wzl-surebet__input::placeholder, .wzl-surebet__odds::placeholder { color: var(--wzl-muted); opacity: .7; } .wzl-surebet__input:focus, .wzl-surebet__odds:focus { outline: none; border-color: var(--wzl-accent); box-shadow: 0 0 0 3px rgba(255, 152, 26, .18); } /* Nogi (kursy) */ .wzl-surebet__legs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .wzl-surebet__legresult { margin-top: 7px; font-size: 13px; color: var(--wzl-muted); min-height: 1em; } .wzl-surebet__legresult strong { color: var(--wzl-accent); } /* Podsumowanie */ .wzl-surebet__summary { border-top: 1px solid var(--wzl-border); padding-top: 18px; } .wzl-surebet__verdict { font-weight: 700; font-size: 15px; margin-bottom: 16px; color: var(--wzl-muted); } .wzl-surebet__verdict.is-arb { color: var(--wzl-accent-arb); } .wzl-surebet__verdict.is-noarb { color: var(--wzl-accent-bad); } .wzl-surebet__metrics { display: flex; gap: 10px; } .wzl-surebet__metrics > div { flex: 1; background: var(--wzl-inset); border: 1px solid var(--wzl-border); border-radius: 8px; padding: 12px 10px; text-align: center; } .wzl-surebet__metrics span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--wzl-muted); margin-bottom: 5px; } .wzl-surebet__metrics strong { font-size: 16px; color: var(--wzl-text); } @media (max-width: 480px) { .wzl-surebet__metrics { flex-direction: column; } }