/* 16/10 APOSTA GRÁTIS: bloco do cupom (.fbx), faixa do Esportes (.fbs), card em Prêmios e janela de regras (.fbm).
   Visual sóbrio de casa legalizada: superfície lisa, borda fina, verde só no que está ligado. Dados: api/brava-freebets.php */
/* ícone do dono (ingresso + bola, 16/10) como máscara: pega a cor do texto. assets/brava/icones/freebet.png */
.fbx-ico { flex: none; display: inline-block; width: 30px; height: 30px; background: currentColor; -webkit-mask: url(/assets/brava/icones/freebet.png?v=1) center / contain no-repeat; mask: url(/assets/brava/icones/freebet.png?v=1) center / contain no-repeat; }

/* bloco do cupom: mesma caixa do campo de valor (.stake), chave na cor da casa */
.fbx { margin: 0 0 9px; border-radius: 9px; border: 1px solid var(--line, hsla(0, 0%, 100%, .1)); background: var(--bg, #0d0e14); color: var(--txt, #fff); }
.fbx-top { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 8px 12px; }
.fbx-top .fbx-ico { color: var(--txt, #fff); }
.fbx-t { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.fbx-t b { font-size: 13px; font-weight: 700; line-height: 1.2; }
.fbx-t small { font-size: 11.5px; line-height: 1.3; color: var(--txt-3, hsla(0, 0%, 100%, .55)); }
.fbx-sw { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; padding: 0; background: var(--line, hsla(0, 0%, 100%, .18)); cursor: pointer; transition: background .15s; }
.fbx-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .4); transition: transform .15s; }
.fbx-sw[aria-checked=true] { background: var(--acc, #d20d0d); }
.fbx-sw[aria-checked=true]::after { transform: translateX(16px); }
.fbx-vals { display: flex; gap: 8px; padding: 0 12px 10px 53px; }
.fbx-vals button { flex: 1; max-width: 110px; height: 32px; border: 1px solid var(--line, hsla(0, 0%, 100%, .14)); background: var(--card, transparent); color: var(--txt, #fff); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fbx-vals button.on { border-color: var(--acc, #d20d0d); }
.fbx-aviso { margin: 0; padding: 9px 12px 0 53px; font-size: 12px; line-height: 1.4; color: #fbbf24; border-top: 1px solid var(--line, hsla(0, 0%, 100%, .08)); }
.fbx-nota { margin: 0; padding: 8px 12px 10px 53px; font-size: 11.5px; line-height: 1.4; color: var(--txt-3, hsla(0, 0%, 100%, .55)); }
.fbx-aviso + .fbx-nota { padding-top: 4px; }
.fbx-vals + .fbx-nota, .fbx-top + .fbx-nota { border-top: 1px solid var(--line, hsla(0, 0%, 100%, .08)); }
.fbx a[data-fb-regras], .fbx-dica a[data-fb-regras] { color: var(--txt, #fff); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.fbx-dica { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line, hsla(0, 0%, 100%, .1)); font-size: 12px; line-height: 1.4; color: var(--txt-2, hsla(0, 0%, 100%, .7)); }
.fbx-dica .fbx-ico { width: 22px; height: 22px; color: var(--txt, #fff); }
.fbx-dica b { color: var(--txt, #fff); }

/* faixa no topo do Esportes: card da casa */
.fbs { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line, hsla(0, 0%, 100%, .08)); background: var(--card, #17181c); color: var(--txt, #fff); }
.fbs-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg, #0d0e14); }
.fbs-ic .fbx-ico { width: 26px; height: 26px; color: var(--txt, #fff); }
.fbs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fbs-t b { font-size: 14px; font-weight: 700; line-height: 1.25; }
.fbs-t small { font-size: 12px; line-height: 1.35; color: var(--txt-3, hsla(0, 0%, 100%, .6)); }
.fbs-btn { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line, hsla(0, 0%, 100%, .2)); background: var(--bg, transparent); color: var(--txt, #fff); border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fbs-btn:hover { border-color: var(--acc, #d20d0d); }
.fbs { cursor: pointer; }
.fbs-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbs-seta { display: none; flex: none; color: var(--txt-3, #888); }
@media (max-width: 480px) { .fbs { gap: 11px; padding: 11px 12px; } .fbs-btn { display: none; } .fbs-seta { display: block; } .fbs-t b { font-size: 13.5px; } .fbs-t small { font-size: 11.5px; } }

/* janela de regras (folha que sobe no celular, caixa central no computador) */
.fbm { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: flex-end; justify-content: center; background: rgb(0 0 0 / .6); }
.fbm[hidden] { display: none; }
.fbm-box { width: 100%; max-width: 480px; max-height: 88vh; overflow: auto; border-radius: 16px 16px 0 0; background: var(--card, #15161b); color: var(--txt, #fff); padding: 18px 18px 22px; box-shadow: 0 -10px 40px rgb(0 0 0 / .5); animation: fbmSobe .22s ease-out; }
@media (min-width: 760px) { .fbm { align-items: center; } .fbm-box { border-radius: 16px; } }
@keyframes fbmSobe { from { transform: translateY(24px); opacity: 0; } }
.fbm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fbm-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.fbm-x { border: 0; background: hsla(0, 0%, 100%, .08); color: #fff; width: 32px; height: 32px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; }
.fbm h4 { margin: 16px 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: hsla(0, 0%, 100%, .5); font-weight: 700; }
.fbm-lista { display: grid; gap: 6px; }
.fbm-item { display: flex; border: 1px solid var(--line, transparent); align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; background: hsla(0, 0%, 100%, .05); }
.fbm-item b { font-size: 15px; }
.fbm-item small { display: block; font-size: 11.5px; color: hsla(0, 0%, 100%, .55); }
.fbm-item span { font-size: 11px; font-weight: 700; color: var(--txt-2, #ccc); }
.fbm-item .fbx-ico { width: 24px; height: 24px; margin-right: 12px; color: var(--txt, #fff); }
.fbm-item > div { display: flex; align-items: center; }
.fbm-passos { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 8px; }
.fbm-passos li { counter-increment: p; display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: hsla(0, 0%, 100%, .85); }
.fbm-passos li::before { content: counter(p); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: hsla(0, 0%, 100%, .1); font-size: 12px; font-weight: 800; }
.fbm-termos { margin: 0; padding-left: 18px; list-style: disc; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.45; color: hsla(0, 0%, 100%, .7); }
.fbm-vazio { font-size: 13px; color: hsla(0, 0%, 100%, .6); margin: 0; }
.fbm-cta { display: block; width: 100%; margin-top: 18px; border: 0; border-radius: 10px; padding: 13px; font: inherit; font-size: 14px; font-weight: 800; color: #fff; background: var(--acc, #d20d0d); cursor: pointer; text-align: center; text-decoration: none; }

/* 16/10 dono: cor própria da aposta grátis (verde, o mesmo do selo em Minhas apostas) em todo ícone */
.fbx-ico { --fb-cor: #22c55e; }
.fbx-top .fbx-ico, .fbx-dica .fbx-ico, .fbs-ic .fbx-ico, .fbm-item .fbx-ico { color: var(--fb-cor); }
.mbc-fb .fbx-ico { color: #4ade80; }