/* ===========================
LEVEL UP (v11-6)
- stile più professionale, coerente con BonusFree
- forza 1 card per riga su mobile (e in generale)
- filtri rapidi in stile "chip"
- modale filtri avanzati più compatta (no rosa)
=========================== */
/* =====================================================================
FILTER LAYOUT (match v14.1)
- cambia SOLO il layout dei controlli filtri (search + filtri rapidi + ordina + avanzati)
- non tocca il layout delle card
===================================================================== */
.tbf-container{
--tbf-bg:#eef5ff;
--tbf-border2:#d7e6ff;
--tbf-ink:#0b2b66;
--tbf-muted:#6b7a99;
}
/* Riga controlli */
.tbf-container .tbf-controls{
display:flex !important;
align-items:center !important;
gap:12px !important;
padding:12px 14px !important;
margin: 0 0 12px !important;
border-radius:18px !important;
background: #ffffff !important;
border:2px solid var(--tbf-border2) !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.10) !important;
}
/* Se non ci sono chip attive, evita che la prima card resti “attaccata” ai controlli */
.tbf-container .tbf-controls + .tbf-active-chips{ margin-top: 8px !important; }
.tbf-container .tbf-search-box{
flex:1 1 auto !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding: 0px !important;
border-radius:15px !important;
border:2px solid rgba(15, 62, 154, 0.10) !important;
background:#ffffff !important;
min-width: 220px !important;
}
.tbf-container .tbf-search-icon{ color:#063381 !important; }
.tbf-container .tbf-search-input{
flex:1 1 auto !important;
border:none !important;
outline:none !important;
background:transparent !important;
font-size:15px !important;
color: var(--tbf-ink) !important;
box-shadow:none !important;
}
.tbf-container .tbf-clear-search{
width:28px !important;
height:28px !important;
border-radius:999px !important;
border:1px solid rgba(15, 62, 154, 0.14) !important;
background: #f7faff !important;
color: rgba(11, 43, 102, 0.75) !important;
cursor:pointer !important;
font-size:18px !important;
line-height:1 !important;
}
.tbf-container .tbf-quick-btn{
white-space:nowrap !important;
padding:10px 14px !important;
border-radius:999px !important;
border:2px solid rgba(15, 62, 154, 0.12) !important;
background: rgba(255,255,255,0.85) !important;
color: var(--tbf-ink) !important;
font-weight:600 !important;
cursor:pointer !important;
}
/* Icone + chevron nei bottoni (visibili solo su mobile) */
.tbf-container .tbf-quick-btn .tbf-btn-icon,
.tbf-container .tbf-quick-btn .tbf-btn-chev,
.tbf-container .tbf-adv-icon-btn .tbf-btn-text,
.tbf-container .tbf-adv-icon-btn .tbf-btn-chev{
display:none !important;
}
.tbf-container .tbf-quick-btn,
.tbf-container .tbf-adv-icon-btn{
position: relative !important;
}
.tbf-container .tbf-quick-btn .tbf-btn-center,
.tbf-container .tbf-adv-icon-btn .tbf-btn-center{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
}
.tbf-container.tbf-filters-open .tbf-quick-btn{
background:#ffffff !important;
border-color: rgba(46, 123, 255, 0.45) !important;
box-shadow: 0 0 0 4px rgba(46, 123, 255, 0.10) !important;
}
.tbf-container .tbf-sort-pill{
display:flex !important;
align-items:center !important;
gap:8px !important;
padding:10px 12px !important;
border-radius:999px !important;
border:2px solid rgba(15, 62, 154, 0.12) !important;
background: rgba(255,255,255,0.85) !important;
}
.tbf-container .tbf-sort-label{
font-size:13px !important;
font-weight:600 !important;
color: rgba(11, 43, 102, 0.85) !important;
}
.tbf-container .tbf-sort-left{
display:flex !important;
align-items:center !important;
gap:8px !important;
}
/* Sottotag ("bonus" / "casino") visibile solo su mobile come nel mock */
.tbf-container .tbf-subtag{ display:none !important; font-weight:750 !important; }
/* Icone colorate: usiamo solo il colore dell'icona, niente sfondi accesi */
.tbf-container .tbf-sort-select{
border:none !important;
outline:none !important;
background:transparent !important;
padding:0 !important;
margin:0 !important;
box-shadow:none !important;
font-weight:600 !important;
color: var(--tbf-ink) !important;
cursor:pointer !important;
}
.tbf-container .tbf-adv-icon-btn{
width:42px !important;
height:42px !important;
border-radius:14px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:2px solid rgba(15, 62, 154, 0.12) !important;
background: rgba(255,255,255,0.85) !important;
color: #0b2b66 !important;
font-weight: 650 !important;
cursor:pointer !important;
}
.tbf-container .tbf-counter-line{
margin: 14px 0 12px !important;
color: rgba(11, 43, 102, 0.9) !important;
font-size: 18px !important;
padding-left: 24px !important;
box-sizing: border-box !important;
}
/* Mobile LISTA: integra contatore + toggle vista dentro la card controlli */
@media (max-width: 900px){
.tbf-container .tbf-controls .tbf-active-chips{
margin: 10px 0 0 !important;
}
.tbf-container .tbf-controls .tbf-counter-line{
margin: 10px 0 0 !important;
padding: 10px 0 0 !important;
padding-left: 0 !important;
border-top: 1px solid var(--tbf-border2) !important;
display:flex !important;
align-items:center !important;
justify-content: space-between !important;
font-size: 15px !important;
}
.tbf-container .tbf-controls .tbf-counter-left{
padding-left: 0 !important;
display:flex !important;
align-items:center !important;
gap: 8px !important;
}
.tbf-container .tbf-controls .tbf-view-toggle-inline{
margin: 0 !important;
}
}
@media (max-width: 760px){
.tbf-container .tbf-counter-line{ display:block !important; font-size:16px !important; margin: 10px 0 10px !important; padding-left: 14px !important; }
/* Mobile "app": stack pulito ma bottoni filtri in 2 colonne */
.tbf-container .tbf-controls{ flex-direction: column !important; align-items: stretch !important; }
.tbf-container .tbf-search-box{ width:100% !important; min-width: 0 !important; }
/* Riga filtri: 2 bottoni affiancati */
.tbf-container .tbf-filters-row{
display:flex !important;
gap: 10px !important;
width: 100% !important;
}
.tbf-container .tbf-filters-row > #tbf-toggle-filters,
.tbf-container .tbf-filters-row > #tbf-open-advanced{
flex: 1 1 0 !important;
width: auto !important;
height: 46px !important;
border-radius: 14px !important;
padding: 10px 42px 10px 12px !important; /* spazio riservato alla freccia */
}
/* Layout interno dei bottoni: testo non deve mai finire sotto la freccia */
.tbf-container #tbf-toggle-filters .tbf-btn-center,
.tbf-container #tbf-open-advanced .tbf-btn-center{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
.tbf-container #tbf-toggle-filters .tbf-btn-text,
.tbf-container #tbf-open-advanced .tbf-btn-text{
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tbf-container .tbf-sort-pill{ width:100% !important; justify-content: space-between !important; border-radius: 14px !important; padding: 10px 12px !important; }
/* Ordine mobile: Search, Filtri (row), Ordina */
.tbf-container .tbf-controls > .tbf-search-box{ order:1 !important; }
.tbf-container .tbf-controls > .tbf-filters-row{ order:2 !important; }
.tbf-container .tbf-controls > .tbf-sort-pill{ order:3 !important; }
/* mostra iconcina + freccetta come nel mock */
.tbf-container .tbf-quick-btn .tbf-btn-icon,
.tbf-container .tbf-quick-btn .tbf-btn-chev,
.tbf-container .tbf-adv-icon-btn .tbf-btn-text,
.tbf-container .tbf-adv-icon-btn .tbf-btn-chev{
display:inline-flex !important;
}
.tbf-container .tbf-subtag{ display:inline !important; }
.tbf-container .tbf-quick-btn .tbf-btn-chev,
.tbf-container .tbf-adv-icon-btn .tbf-btn-chev{
position:absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
opacity: 0.75 !important;
pointer-events: none !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
line-height: 1 !important;
}
/* Centro contenuti: testo a sinistra + ellissi (mai sotto la freccia) */
.tbf-container .tbf-quick-btn .tbf-btn-center,
.tbf-container .tbf-adv-icon-btn .tbf-btn-center{
width: 100% !important;
justify-content: flex-start !important;
}
.tbf-container .tbf-quick-btn .tbf-btn-text,
.tbf-container .tbf-adv-icon-btn .tbf-btn-text{
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tbf-container .tbf-btn-chev svg{ display:block !important; }
/* Filtri avanzati: stesso look del bottone pieno (non solo icona) */
.tbf-container .tbf-adv-icon-btn{
align-items:center !important;
justify-content:center !important;
gap: 10px !important;
}
/* Chevron che si gira quando i filtri rapidi sono aperti */
.tbf-container.tbf-filters-open .tbf-quick-btn .tbf-btn-chev{
transform: translateY(-50%) rotate(180deg) !important;
}
}
/* Icone colorate (solo icona, niente sfondi aggressivi) */
.tbf-container .tbf-icon-quick{ color: #e39b1c !important; }
.tbf-container .tbf-icon-adv{ color: #566581 !important; }
.tbf-container .tbf-sort-icon{ color: #2a63c9 !important; }
/* Ordina: elimina il "contorno interno" (selettore con bordo) dentro la pill */
.tbf-container .tbf-controls .tbf-sort-pill .tbf-sort-select{
border: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 30px 0 0 !important;
margin: 0 !important;
width: auto !important;
font-weight: 750 !important;
-webkit-appearance: none !important;
appearance: none !important;
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
}
/* Mobile: rendi il testo del select più "pulito" (niente box interno) */
.tbf-container .tbf-controls .tbf-sort-pill{
justify-content: space-between !important;
}
.tbf-container .tbf-controls .tbf-sort-pill .tbf-sort-select{
flex: 1 1 auto !important;
font-size: 16px !important;
line-height: 1.2 !important;
}
@media (max-width: 760px){
.tbf-container .tbf-controls .tbf-sort-pill{ border-radius: 18px !important; }
.tbf-container .tbf-controls .tbf-sort-pill .tbf-sort-select{ width: 100% !important; }
.tbf-container .tbf-controls .tbf-sort-pill .tbf-sort-select{ display: none !important; }
}
/* Pannello filtri rapidi */
.tbf-container .tbf-filters-section{
display:none !important;
margin: 10px 0 14px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.tbf-container.tbf-filters-open .tbf-filters-section{ display:block !important; }
.tbf-container .tbf-filters-panel{
background: rgba(255,255,255,0.92) !important;
border:2px solid var(--tbf-border2) !important;
border-radius:18px !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.08) !important;
overflow:hidden !important;
}
.tbf-container .tbf-filters-panel-head{
display:flex !important;
align-items:center !important;
justify-content: space-between !important;
padding: 12px 14px !important;
border-bottom: 1px solid rgba(15, 62, 154, 0.10) !important;
}
.tbf-container .tbf-filters-title{ font-weight:650 !important; color: var(--tbf-ink) !important; }
.tbf-container .tbf-reset-filters{
padding:8px 12px !important;
border-radius:999px !important;
border:2px solid rgba(15, 62, 154, 0.12) !important;
background:#ffffff !important;
cursor:pointer !important;
font-weight:600 !important;
color: rgba(11, 43, 102, 0.85) !important;
}
/* Chip style */
.tbf-container .tbf-filters-container{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
padding: 12px 14px 14px !important;
max-height: none !important;
overflow: visible !important;
}
.tbf-container .tbf-filter-option{ position:relative !important; padding:0 !important; background:transparent !important; border:none !important; }
.tbf-container .tbf-filter-option input{ position:absolute !important; opacity:0 !important; pointer-events:none !important; }
.tbf-container .tbf-filter-option .tbf-filter-chip{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding: 9px 12px !important;
border-radius:999px !important;
border:2px solid rgba(15, 62, 154, 0.10) !important;
background:#f7faff !important;
color: rgba(11, 43, 102, 0.9) !important;
font-weight:600 !important;
cursor:pointer !important;
}
.tbf-container .tbf-filter-chip-count{ opacity:.75 !important; font-weight:700 !important; }
.tbf-container .tbf-filter-option.is-active .tbf-filter-chip{
background: linear-gradient(90deg, #1c4a86, #2f5ea7) !important;
color:#ffffff !important;
border-color: transparent !important;
}
.tbf-container {
/* Design tokens (solo dentro il plugin) */
--tbf-brand: #0F3E9A;
--tbf-brand-2: #2e7bff;
--tbf-surface: #ffffff;
--tbf-soft: #eef5ff;
--tbf-border: #d7e6ff;
--tbf-text: #0b2b66;
}
/* Box sizing: evita overflow su mobile (es. bottone "Filtri avanzati" che esce a destra) */
.tbf-container, .tbf-container * { box-sizing: border-box; }
.tbf-adv-backdrop, .tbf-adv-backdrop * { box-sizing: border-box; }
/* ===========================
HOTFIX v11-7
- toolbar mobile: niente “scomposti” (stack pulito)
- modale: variabili disponibili anche fuori dal container + active leggibile
- close button: no rosa (stile BonusFree)
=========================== */
/* Toolbar mobile: impila e rendi full-width (Filtri avanzati + Ordina) */
@media (max-width: 680px) {
.tbf-container .tbf-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
/* Su alcuni temi mobile il width:100% sui figli può "sbordare" di 1-2px.
Qui tagliamo eventuali sbordi (e rendiamo l’effetto più pulito). */
overflow: hidden !important;
}
.tbf-container .tbf-adv-btn {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
justify-content: center !important;
/* meno aggressivo su mobile */
box-shadow: 0 4px 10px rgba(15, 62, 154, 0.06) !important;
}
.tbf-container .tbf-sort-box {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
justify-content: flex-start !important;
}
.tbf-container .tbf-sort-label {
font-size: 12px !important;
opacity: 0.75 !important;
padding-left: 2px !important;
}
.tbf-container .tbf-sort-select {
width: 100% !important;
}
}
/* Variabili anche nella modale (la modale è appesa al , non dentro .tbf-container) */
.tbf-adv-backdrop {
--tbf-brand: #0F3E9A;
--tbf-brand-2: #2e7bff;
--tbf-surface: #ffffff;
--tbf-soft: #eef5ff;
--tbf-border: #d7e6ff;
--tbf-text: #0b2b66;
}
/* Close button: stile BonusFree (niente rosa del tema) */
.tbf-adv-backdrop .tbf-adv-close {
all: unset !important;
width: 38px !important;
height: 38px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.tbf-adv-backdrop .tbf-adv-close:hover {
background: rgba(255, 255, 255, 0.28) !important;
}
/* Pills: active SEMPRE leggibile (anche se il tema forza background con !important) */
.tbf-adv-backdrop .tbf-pill { opacity: 1 !important; }
.tbf-adv-backdrop .tbf-pill.active,
.tbf-pill.active {
/* Blu meno acceso (più elegante / meno neon) */
background: linear-gradient(90deg, #1c4a86, #2f5ea7) !important;
color: #ffffff !important;
border-color: transparent !important;
opacity: 1 !important;
}
/* Mobile (griglia): 1 colonna fino a 900px (la lista resta invariata) */
@media screen and (max-width: 900px) {
.tbf-container:not(.tbf-mobile-list-view):not(.tbf-mobile-compact-grid) .tbf-cards {
display: grid !important;
grid-template-columns: 1fr !important;
}
}
/* Toolbar più "BonusFree" */
.tbf-container .tbf-toolbar {
padding: 10px 12px !important;
border-radius: 16px !important;
background: var(--tbf-soft) !important;
border: 2px solid var(--tbf-border) !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.10) !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
.tbf-container .tbf-adv-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 12px 14px !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
background: linear-gradient(180deg, #ffffff, #f6f9ff) !important;
border: 1.5px solid rgba(15, 62, 154, 0.18) !important;
color: var(--tbf-brand) !important;
border-radius: 14px !important;
font-weight: 850 !important;
box-shadow: 0 3px 8px rgba(15, 62, 154, 0.06) !important;
}
/* Niente icona "finta" (v11-5), ora usiamo SVG inline */
.tbf-container .tbf-adv-btn::before { content: none !important; }
.tbf-container .tbf-adv-btn:hover {
transform: none !important;
box-shadow: 0 6px 14px rgba(15, 62, 154, 0.10) !important;
}
.tbf-container .tbf-adv-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 10px;
background: rgba(15, 62, 154, 0.08);
}
.tbf-container .tbf-sort-select {
border: 2px solid rgba(15, 62, 154, 0.14) !important;
border-radius: 14px !important;
padding: 10px 12px !important;
box-shadow: 0 8px 18px rgba(15, 62, 154, 0.06) !important;
}
@media (max-width: 520px) {
.tbf-container .tbf-toolbar {
flex-wrap: wrap;
gap: 10px;
}
.tbf-container .tbf-sort-box {
width: 100%;
justify-content: space-between;
}
.tbf-container .tbf-sort-select {
width: 62%;
}
}
/* Filtri rapidi più compatti */
.tbf-container .tbf-filters-section {
background: rgba(255, 255, 255, 0.85) !important;
border: 2px solid var(--tbf-border) !important;
border-radius: 16px !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.08) !important;
}
.tbf-container .tbf-filters-header {
padding: 10px 12px !important;
background: transparent !important;
border-bottom: 1px solid rgba(15, 62, 154, 0.10) !important;
}
.tbf-container .tbf-filters-title {
color: var(--tbf-text) !important;
font-size: 16px !important;
font-weight: 900 !important;
}
.tbf-container .tbf-filter-dot {
width: 10px;
height: 10px;
border-radius: 999px;
display: inline-block;
background: linear-gradient(90deg, var(--tbf-brand), var(--tbf-brand-2));
box-shadow: 0 6px 14px rgba(46, 123, 255, 0.25);
}
.tbf-container .tbf-toggle-filters {
border-radius: 999px !important;
padding: 9px 14px !important;
border: 2px solid rgba(15, 62, 154, 0.14) !important;
background: var(--tbf-surface) !important;
color: var(--tbf-brand) !important;
font-weight: 700 !important;
}
/* Desktop: chips visibili, senza griglia a colonne */
@media (min-width: 901px) {
.tbf-container .tbf-filters-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 12px 12px 14px !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Mobile: chiuso di default, aperto on-demand */
@media (max-width: 900px) {
.tbf-container .tbf-filters-container {
display: none !important;
padding: 12px !important;
}
.tbf-container .tbf-filters-expanded .tbf-filters-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
}
.tbf-container .tbf-filter-option {
border-radius: 999px !important;
padding: 10px 12px !important;
border: 2px solid rgba(15, 62, 154, 0.12) !important;
background: #f6f9ff !important;
transform: none !important;
box-shadow: none !important;
}
.tbf-container .tbf-filter-option:hover {
border-color: rgba(15, 62, 154, 0.28) !important;
box-shadow: 0 10px 22px rgba(15, 62, 154, 0.10) !important;
}
.tbf-container .tbf-checkbox {
width: 16px !important;
height: 16px !important;
border-radius: 5px !important;
margin-right: 8px !important;
border: 2px solid rgba(15, 62, 154, 0.20) !important;
}
.tbf-container .tbf-filter-text {
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--tbf-text) !important;
}
.tbf-container .tbf-filter-count {
font-size: 12px !important;
font-weight: 750 !important;
}
.tbf-container .tbf-filter-option.is-active {
background: linear-gradient(90deg, var(--tbf-brand), var(--tbf-brand-2)) !important;
border-color: transparent !important;
}
.tbf-container .tbf-filter-option.is-active .tbf-filter-text,
.tbf-container .tbf-filter-option.is-active .tbf-filter-count {
color: #ffffff !important;
}
.tbf-container .tbf-filter-option.is-active input:checked + .tbf-checkbox {
background: #ffffff !important;
border-color: #ffffff !important;
}
.tbf-container .tbf-filter-option.is-active input:checked + .tbf-checkbox::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--tbf-brand);
font-size: 11px;
font-weight: 900;
}
.tbf-container .tbf-filters-actions {
padding: 10px 12px 12px !important;
background: transparent !important;
border-top: 0 !important;
justify-content: flex-start !important;
}
.tbf-container .tbf-reset-filters {
background: #bee4ff !important;
border: 2px solid rgba(15, 62, 154, 0.14) !important;
color: var(--tbf-brand) !important;
border-radius: 14px !important;
padding: 10px 14px !important;
box-shadow: none !important;
}
.tbf-container .tbf-reset-filters:hover {
background: var(--tbf-soft) !important;
}
/* Modale filtri avanzati: compatta e coerente (forza override su temi aggressivi) */
.tbf-adv-backdrop .tbf-adv-modal {
border-radius: 14px !important;
border: 1px solid rgba(15, 62, 154, 0.10) !important;
}
.tbf-adv-backdrop .tbf-adv-header {
padding: 12px 14px !important;
background: linear-gradient(90deg, var(--tbf-brand), var(--tbf-brand-2)) !important;
}
.tbf-adv-backdrop .tbf-adv-title {
font-weight: 950 !important;
}
.tbf-adv-backdrop .tbf-adv-body {
padding: 12px 14px 10px !important;
}
.tbf-adv-backdrop .tbf-adv-hint {
font-size: 12px !important;
color: rgba(11, 43, 102, 0.72) !important;
font-weight: 700 !important;
}
.tbf-adv-backdrop .tbf-adv-group {
background: #f6f9ff !important;
border: 1px solid rgba(15, 62, 154, 0.10) !important;
border-radius: 14px !important;
padding: 10px 10px 12px !important;
}
.tbf-adv-backdrop .tbf-adv-label {
font-size: 12px !important;
font-weight: 950 !important;
margin-bottom: 8px !important;
color: var(--tbf-text) !important;
}
.tbf-adv-backdrop .tbf-pill-group {
display: grid !important;
gap: 10px !important;
}
.tbf-adv-backdrop .tbf-pill-group[data-layout="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tbf-adv-backdrop .tbf-pill-group[data-layout="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 420px) {
.tbf-adv-backdrop .tbf-pill-group[data-layout="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.tbf-adv-backdrop .tbf-pill {
all: unset !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 10px !important;
border-radius: 12px !important;
border: 2px solid rgba(15, 62, 154, 0.14) !important;
background: #ffffff !important;
color: var(--tbf-brand) !important;
font-weight: 0 !important;
font-size: 13px !important;
line-height: 1 !important;
cursor: pointer !important;
user-select: none !important;
box-shadow: 0 10px 22px rgba(15, 62, 154, 0.06) !important;
}
.tbf-adv-backdrop .tbf-pill.active {
background: linear-gradient(90deg, #1d56c5, #2f5ea7) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 12px 26px rgba(15, 62, 154, 0.16) !important;
}
.tbf-adv-backdrop .tbf-adv-footer {
position: sticky;
bottom: 0;
background: #ffffff;
padding: 12px 14px 14px !important;
border-top: 1px solid rgba(15, 62, 154, 0.10) !important;
}
.tbf-adv-backdrop .tbf-adv-reset {
all: unset !important;
flex: 1;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 12px !important;
border-radius: 14px !important;
border: 2px solid rgba(15, 62, 154, 0.16) !important;
background: #ffffff !important;
color: var(--tbf-brand) !important;
font-weight: 0 !important;
cursor: pointer !important;
}
.tbf-adv-backdrop .tbf-adv-apply {
all: unset !important;
flex: 1.3;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 11px 12px !important;
border-radius: 14px !important;
background: #16a34a !important;
color: #ffffff !important;
font-weight: 0 !important;
cursor: pointer !important;
box-shadow: 0 12px 26px rgba(22, 163, 74, 0.20) !important;
}
/* ===========================
CONTENITORE GENERALE
=========================== */
.tbf-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0 30px 0 !important;
}
.tbf-cards { display: block; }
/* ===========================
TOP 3 SOPRA LISTA
(cards uguali, solo un blocco in piu)
=========================== */
.tbf-top-featured{
margin: 10px 0 14px !important;
}
.tbf-top-featured-head{
padding: 0 14px !important;
margin: 0 0 10px !important;
}
.tbf-top-title{
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: 'Poppins', Sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
text-shadow: 8px 4px 18px rgba(0, 0, 0, 0.46) !important;
color: #1D4799 !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* Emoji: icone colorate nei titoli */
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
.tbf-top-ico,
.tbf-divider-ico{
display: inline-flex !important;
align-items: center !important;
font-size: 22px !important;
line-height: 1 !important;
}
.tbf-top-ico svg{
width: 22px !important;
height: 22px !important;
color: #1D4799 !important;
filter: drop-shadow(8px 4px 18px rgba(0, 0, 0, 0.18));
}
.tbf-top-subtitle{
margin-top: 4px !important;
color: var(--tbf-muted) !important;
font-size: 13px !important;
}
.tbf-top-cards{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
align-items: stretch !important;
}
@media (max-width: 1100px){
.tbf-top-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 991px){
/* Mobile/Tablet: i Top 3 devono essere SOLO desktop */
.tbf-top-featured{ display: none !important; }
/* Anche il titolo separatore non serve su mobile */
.tbf-list-divider{ display: none !important; }
}
/* Top card in versione compatta (verticale) */
.tbf-card-top{
height: 100% !important;
}
/* Sfumatura dedicata alle Top 3 card (distinte dalla lista) */
.tbf-top-featured .tbf-card-top{
position: relative !important;
overflow: hidden !important;
background: linear-gradient(180deg, rgba(176, 229, 255, 0.48) 0%, rgba(255, 255, 255, 0.98) 50%, rgba(176, 229, 255, 0.26) 100%) !important;
border: 2px solid rgba(29, 71, 153, 0.14) !important;
box-shadow: 0 16px 36px rgba(29, 71, 153, 0.18) !important;
}
/* Glow sotto per farle risaltare */
.tbf-top-featured .tbf-card-top::after{
content: "";
position: absolute;
left: -20%;
right: -20%;
bottom: -28px;
height: 110px;
background: radial-gradient(ellipse at bottom, rgba(29, 71, 153, 0.30) 0%, rgba(176, 229, 255, 0.22) 35%, rgba(176, 229, 255, 0.0) 72%);
pointer-events: none;
}
/* Titolo separatore tra Top 3 e lista */
.tbf-list-divider{
padding: 0 14px !important;
margin: 10px 0 6px !important;
}
.tbf-list-divider::before{
content: "";
display: block;
height: 1px;
background: rgba(29, 71, 153, 0.12);
margin: 0 0 10px;
}
.tbf-divider-title{
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'Poppins', Sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
text-shadow: 8px 4px 18px rgba(0, 0, 0, 0.46) !important;
color: #1D4799 !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.tbf-divider-ico svg{
width: 22px !important;
height: 22px !important;
color: #1D4799 !important;
filter: drop-shadow(8px 4px 18px rgba(0, 0, 0, 0.18));
}
@media (max-width: 760px){
.tbf-top-title,
.tbf-divider-title{
font-size: 24px !important;
}
}
.tbf-card-top .tbf-card-summary{
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 12px !important;
padding: 16px 16px 14px !important;
}
.tbf-card-top .tbf-summary-left{
height: 120px !important;
border-radius: 14px !important;
}
.tbf-card-top .tbf-summary-left img{
max-width: 92% !important;
max-height: 92% !important;
}
.tbf-card-top .tbf-summary-middle{
padding: 0 !important;
}
.tbf-card-top .tbf-summary-actions{
flex-direction: row !important;
align-items: stretch !important;
justify-content: space-between !important;
gap: 10px !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
flex: 1 1 0 !important;
}
.tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
.tbf-card-top .tbf-summary-actions{
margin-top: auto !important;
}
.tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
.tbf-card-top .tbf-summary-actions{
margin-top: auto !important;
}
.tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
.tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
.tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-card-top .tbf-btn-cta,
.tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
/* Per le Top card nascondiamo "Dettagli" e contenuto espanso: devono restare compatte */
.tbf-card-top .tbf-card-footer,
.tbf-card-top .tbf-card-details{
display: none !important;
}
@media (max-width: 760px){
.tbf-top-featured-head{ padding: 0 10px !important; }
.tbf-top-title{ font-size: 24px !important; }
}
/* ===========================
BARRA DI RICERCA PREMIUM - SENZA LINEA BIANCA
=========================== */
.tbf-search-section {
margin-bottom: 25px;
}
.tbf-search-box {
position: relative;
display: flex;
align-items: center;
background: linear-gradient(135deg, #ffffff, #f8faff);
border-radius: 16px;
padding: 5px;
box-shadow: 0 10px 30px rgba(46, 123, 255, 0.1);
transition: all 0.3s ease;
}
.tbf-search-box:focus-within {
box-shadow: 0 15px 40px rgba(46, 123, 255, 0.2);
transform: translateY(-2px);
}
.tbf-search-icon {
position: absolute;
left: 20px;
color: #2e7bff;
width: 22px;
height: 22px;
z-index: 2;
}
.tbf-search-input {
flex: 1;
padding: 18px 25px 18px 55px;
font-size: 16px;
font-weight: 500;
color: #1d4799;
background: transparent;
border: none;
outline: none;
border-radius: 12px;
}
.tbf-search-input::placeholder {
color: #8a9bc9;
font-weight: 400;
}
/* RIMOSSA LA LINEA BIANCA - solo ombra */
.tbf-search-input:focus {
outline: none;
}
.tbf-clear-search {
position: absolute;
right: 15px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #ff6b6b;
color: white;
border: none;
border-radius: 50%;
font-size: 22px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
display: none;
}
.tbf-clear-search:hover {
background: #ff5252;
transform: scale(1.1);
box-shadow: 0 6px 18px rgba(255, 107, 107, 0.4);
}
/* ===========================
SEZIONE FILTRI PREMIUM - CON DIV AL POSTO DI H3
=========================== */
.tbf-filters-section {
margin-bottom: 30px;
background: linear-gradient(135deg, #ffffff, #f8faff);
border: 2px solid #e1e8ff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 35px rgba(46, 123, 255, 0.08);
}
.tbf-filters-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 5px;
background: linear-gradient(90deg, #1d4799, #2e7bff);
border-bottom: 2px solid #e1e8ff;
}
/* DIV invece di H3 per il titolo */
.tbf-filters-title {
margin: 0;
color: white;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
.tbf-filter-icon {
font-size: 24px;
background: rgba(255, 255, 255, 0.2);
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
.tbf-toggle-filters {
display: none;
padding: 10px 22px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
align-items: center;
gap: 8px;
}
.tbf-toggle-filters:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.tbf-toggle-icon {
font-size: 12px;
transition: transform 0.3s ease;
}
.tbf-filters-container {
padding: 25px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
max-height: 400px;
overflow-y: auto;
}
.tbf-filters-container::-webkit-scrollbar {
width: 8px;
}
.tbf-filters-container::-webkit-scrollbar-track {
background: #f1f5ff;
border-radius: 4px;
}
.tbf-filters-container::-webkit-scrollbar-thumb {
background: #c3d1ff;
border-radius: 4px;
}
.tbf-filters-container::-webkit-scrollbar-thumb:hover {
background: #a3b8ff;
}
.tbf-filter-option {
display: flex;
align-items: center;
padding: 16px 20px;
background: white;
border: 2px solid #e1e8ff;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
}
.tbf-filter-option:hover {
border-color: #2e7bff;
background: #f0f5ff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(46, 123, 255, 0.15);
}
.tbf-filter-option input[type="checkbox"] {
display: none;
}
.tbf-checkbox {
width: 22px;
height: 22px;
border: 2px solid #c3d1ff;
border-radius: 6px;
margin-right: 15px;
position: relative;
transition: all 0.3s ease;
background: white;
flex-shrink: 0;
}
.tbf-filter-option input:checked + .tbf-checkbox {
background: #2e7bff;
border-color: #2e7bff;
animation: checkPop 0.3s ease;
}
@keyframes checkPop {
0% { transform: scale(0.8); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.tbf-filter-option input:checked + .tbf-checkbox::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
font-weight: bold;
}
.tbf-filter-text {
font-size: 15px;
color: #1d4799;
font-weight: 500;
flex-grow: 1;
}
.tbf-filter-count {
color: #6b82c9;
font-size: 13px;
font-weight: 500;
margin-left: 5px;
}
.tbf-filters-actions {
padding: 20px 25px;
border-top: 2px solid #e1e8ff;
background: #f8faff;
display: flex;
justify-content: flex-end;
}
.tbf-reset-filters {
padding: 12px 28px;
background: linear-gradient(135deg, #ff6b6b, #ff5252);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.2);
}
.tbf-reset-filters:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
background: linear-gradient(135deg, #ff5252, #ff3838);
}
.tbf-reset-icon {
font-size: 18px;
}
/* Loading e nessun filtro */
.tbf-filters-loading,
.tbf-no-filters {
padding: 40px;
text-align: center;
color: #6b82c9;
font-style: italic;
background: rgba(225, 232, 255, 0.3);
border-radius: 12px;
border: 2px dashed #c3d1ff;
grid-column: 1 / -1;
}
/* ===========================
CONTATORE RISULTATI PREMIUM
=========================== */
.tbf-counter-section {
margin: 25px 0 30px;
}
.tbf-results-counter {
padding: 5px;
background: none;
border-radius: 16px;
color: #1d4799;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 10px 30px rgba(29, 71, 153, 0.2);
border: 0px solid rgba(255, 255, 255, 0.1);
}
.tbf-counter-icon {
font-size: 32px;
background: rgba(255, 255, 255, 0.2);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
flex-shrink: 0;
}
.tbf-counter-text {
font-size: 18px;
font-weight: 600;
flex-grow: 1;
}
.tbf-counter-text span {
font-weight: 800;
font-size: 28px;
margin: 0 5px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* ===========================
TOGGLE VISUALIZZAZIONE (GRIGLIA / LISTA) - MOBILE
=========================== */
.tbf-view-toggle {
display: none !important;
}
.tbf-view-toggle-label {
font-size: 14px;
font-weight: 600;
color: #1d4799;
white-space: nowrap;
}
.tbf-view-toggle-buttons {
display: inline-flex;
gap: 10px;
}
.tbf-view-btn {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
border: 2px solid rgba(29, 71, 153, 0.15);
background: #ffffff;
color: #1d4799;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
box-shadow: 0 6px 16px rgba(29, 71, 153, 0.08);
}
.tbf-view-icon {
font-size: 14px;
line-height: 1;
}
.tbf-view-btn.active {
background: linear-gradient(90deg, #1d4799, #2e7bff);
color: #ffffff;
border-color: rgba(46, 123, 255, 0.6);
box-shadow: 0 10px 22px rgba(46, 123, 255, 0.28);
}
.tbf-view-btn:active {
transform: scale(0.98);
}
/* ===========================
CARD LISTA BONUS
=========================== */
.tbf-card {
border-radius: 24px;
background-color: #ffffff;
box-shadow: 0 18px 40px rgba(9, 30, 66, 0.08);
border: 1px solid rgba(9, 30, 66, 0.06);
margin-bottom: 20px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.3s ease;
}
.tbf-card:hover {
transform: translateY(-2px);
box-shadow: 0 24px 52px rgba(9, 30, 66, 0.14);
}
.tbf-card-summary {
display: grid;
grid-template-columns: 165px minmax(0, 1fr) 240px;
gap: 22px;
align-items: center;
padding: 18px 24px 14px;
}
.tbf-summary-left {
width: 100%;
height: 160px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tbf-summary-left img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
.tbf-summary-middle {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 10px 10px 0px;
}
.tbf-summary-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0px;
}
.tbf-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
background: #ffc107;
color: #1d4799;
font-size: 0.85rem;
font-weight: 700;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.tbf-casino-name {
font-size: 1.3rem;
font-weight: 600;
margin: 0;
color: #1d4799;
}
.tbf-summary-bonus {
font-size: 0.98rem;
font-weight: 600;
color: #0051d8;
}
.tbf-summary-tags {
margin-top: 2px;
}
.tbf-tag-pill {
display: inline-block;
padding: 6px 12px;
border-radius: 6px;
background-color: gold;
color: #121111;
font-size: 0.80rem;
font-weight: 500;
margin-right: 6px;
margin-top: 4px;
}
/* ===========================
BADGE (lingua, licenza, accettazione, supporto)
=========================== */
.tbf-summary-badges {
margin: 2px 0 2px;
}
.tbf-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tbf-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
border: 1px solid rgba(9, 30, 66, 0.10);
background: #f3f6ff;
color: #1d4799;
}
.tbf-badge-lang {
background: #fff7cc;
color: #7a5b00;
}
.tbf-badge-license {
background: #d9fbe5;
color: #0f5c2f;
}
.tbf-badge-accept {
background: #e6f0ff;
color: #0b3b90;
}
.tbf-badge-block {
background: #ffe6e6;
color: #8a1f1f;
}
.tbf-badge-support {
background: #f0e6ff;
color: #4b2480;
}
/* ===========================
TOOLBAR (Filtri avanzati + Ordina) + CHIP filtri attivi
=========================== */
.tbf-toolbar {
width: 100%;
margin: 0 0 12px;
padding: 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tbf-adv-btn {
all: unset !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 11px 16px !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #ffffff, #f4f8ff) !important;
border: 2px solid rgba(46, 123, 255, 0.28) !important;
color: #1d4799 !important;
font-weight: 800 !important;
letter-spacing: 0.2px !important;
cursor: pointer !important;
box-shadow: 0 10px 22px rgba(46, 123, 255, 0.10) !important;
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease !important;
user-select: none !important;
white-space: nowrap !important;
}
.tbf-adv-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(46, 123, 255, 0.12);
}
.tbf-sort-box {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tbf-sort-label {
color: #1d4799;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
}
.tbf-sort-select {
padding: 10px 12px;
border-radius: 12px;
border: 2px solid #e1e8ff;
background: #ffffff;
color: #1d4799;
font-weight: 650;
cursor: pointer;
}
.tbf-active-chips {
width: 100%;
padding: 0 8px;
margin: 0 0 0px;
display: none;
flex-wrap: wrap;
gap: 10px;
}
.tbf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 1px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 750;
border: 1px solid rgba(9, 30, 66, 0.10);
background: #f3f6ff;
color: #1d4799;
}
.tbf-chip-adm { background: #d9fbe5; color: #0f5c2f; }
.tbf-chip-lang { background: #fff7cc; color: #7a5b00; }
.tbf-chip-accept { background: #e6f0ff; color: #0b3b90; }
.tbf-chip-block { background: #ffe6e6; color: #8a1f1f; }
.tbf-chip-license { background: #d9fbe5; color: #0f5c2f; }
.tbf-chip-pay { background: #f3f6ff; color: #1d4799; }
.tbf-chip-support { background: #f0e6ff; color: #4b2480; }
/* ===========================
MODAL FILTRI AVANZATI
=========================== */
.tbf-adv-backdrop {
position: fixed;
inset: 0;
z-index: 999999;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.tbf-adv-modal {
width: min(560px, 100%);
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255,255,255,0.2);
}
.tbf-adv-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: linear-gradient(90deg, #1d4799, #2e7bff);
color: #fff;
}
.tbf-adv-title {
font-size: 16px;
font-weight: 900;
letter-spacing: 0.2px;
}
.tbf-adv-close {
all: unset;
width: 36px;
height: 36px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255,255,255,0.2);
font-size: 22px;
font-weight: 900;
}
.tbf-adv-body {
padding: 12px 14px 8px;
max-height: 70vh;
overflow: auto;
}
.tbf-adv-hint {
font-size: 12px;
color: #5b74b4;
margin-bottom: 10px;
font-weight: 600;
}
.tbf-adv-group {
margin-bottom: 10px;
}
.tbf-adv-label {
font-size: 15px;
font-weight: 700;
color: #1d4799;
margin-bottom: 6px;
}
.tbf-pill-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tbf-pill {
all: unset !important;
cursor: pointer !important;
padding: 8px 12px !important;
border-radius: 999px !important;
border: 1.5px solid #d7e6ff !important;
background: #f6f9ff !important;
color: #1d4799 !important;
font-weight: 800 !important;
font-size: 12.5px !important;
line-height: 1 !important;
user-select: none !important;
transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.tbf-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46, 123, 255, 0.10); }
.tbf-pill.active { background: #2e7bff; color: #ffffff; border-color: #2e7bff; }
.tbf-adv-footer {
padding: 12px 14px 14px;
display: flex;
gap: 10px;
}
.tbf-adv-reset {
all: unset !important;
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 12px;
border: 2px solid rgba(46, 123, 255, 0.25);
background: #ffffff;
color: #1d4799;
font-weight: 900;
font-size: 14px;
cursor: pointer;
}
.tbf-adv-apply {
all: unset !important;
flex: 1.3;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 12px;
background: #16a34a;
color: #ffffff;
font-weight: 900;
font-size: 14px;
cursor: pointer;
box-shadow: 0 10px 22px rgba(22, 163, 74, 0.24);
}
@media (max-width: 600px) {
.tbf-adv-backdrop {
align-items: flex-end;
padding: 0;
}
.tbf-adv-modal {
width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.tbf-adv-body { padding: 16px 16px 10px; }
.tbf-adv-footer { padding: 14px 16px 18px; }
}
/* ===========================
DISCLAIMER FOOTER
=========================== */
.tbf-footer-disclaimer {
display: none;
}
.tbf-summary-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
/* ===========================
BOTTONI
=========================== */
.tbf-btn-cta,
.tbf-btn-review {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 18px;
border-radius: 15px !important;
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
border: 2px solid transparent;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.tbf-btn-cta {
background: #2e7bff;
color: #ffffff;
border-color: #2e7bff;
}
.tbf-btn-cta:hover {
background: #1b63d6;
border-color: #1b63d6;
box-shadow: 0 6px 16px rgba(46, 123, 255, 0.4);
transform: translateY(-1px);
}
.tbf-btn-review {
background: #23a64d;
color: #ffffff;
border-color: #23a64d;
}
.tbf-btn-review:hover {
background: #198a3d;
border-color: #198a3d;
box-shadow: 0 6px 16px rgba(35, 166, 77, 0.35);
transform: translateY(-1px);
}
/* ===========================
FOOTER "SCOPRI DI PIÙ"
=========================== */
.tbf-card-footer {
border-top: 1px solid rgba(9, 30, 66, 0.06);
background: #f1f1f187;
padding: 3px 0 4px;
display: flex;
justify-content: center;
}
.tbf-btn-more {
all: unset;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
color: #222222;
letter-spacing: 0.01em;
text-transform: none;
background: transparent;
border: none;
box-shadow: none;
padding: 2px 0;
margin: 0;
transition: color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.tbf-btn-more::after {
content: "▼";
font-size: 0.70rem;
transform-origin: center;
transition: transform 0.18s ease;
margin-top: 1px;
color: #222222;
}
.tbf-card-open .tbf-btn-more::after {
transform: rotate(180deg);
}
.tbf-btn-more:hover {
color: #000000;
transform: translateY(-1px);
opacity: 0.9;
}
/* ===========================
DETTAGLI NASCOSTI
=========================== */
.tbf-card-details {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.25s ease, opacity 0.2s ease;
background: #f8fbff;
}
.tbf-card-open .tbf-card-details {
max-height: 1000px;
opacity: 1;
}
.tbf-details-inner {
padding: 16px 24px 20px;
}
.tbf-details-content {
font-size: 0.95rem;
line-height: 1.6;
color: #333;
font-size: 12px !important;
}
/* ===========================
FILTRO ADM - TESTO SOTTO IL TOGGLE SU MOBILE
=========================== */
.tbf-filter-bar {
width: 100%;
margin: 0 0 20px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 8px;
}
.tbf-filter-switch {
display: inline-flex;
align-items: center;
cursor: pointer;
font-size: 14px;
gap: 8px;
}
.tbf-filter-switch input {
display: none !important;
}
.tbf-filter-slider {
position: relative;
width: 44px;
height: 24px;
border-radius: 999px;
background-color: #cfd4dc;
transition: background-color 0.2s ease;
flex-shrink: 0;
}
.tbf-filter-slider::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 2px;
left: 2px;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
transition: transform 0.2s ease;
}
.tbf-filter-switch input:checked + .tbf-filter-slider {
background-color: #2563eb;
}
.tbf-filter-switch input:checked + .tbf-filter-slider::before {
transform: translateX(20px);
}
.tbf-filter-text {
color: #111827;
font-weight: 500 !important;
white-space: nowrap; /* Mantiene il testo su una riga su desktop */
}
.tbf-geo-label {
display: block;
margin: 4px 0 0 12px;
font-size: 13px;
color: #374151;
line-height: 1.4;
padding-bottom: 15px;
}
.tbf-geo-flag {
font-size: 16px;
line-height: 1;
margin-right: 4px;
}
.tbf-geo-suggest-inline {
font-size: 12px;
opacity: 0.85;
}
/* ===========================
RESPONSIVE
=========================== */
@media screen and (max-width: 900px) {
/* Layout card */
.tbf-card-summary {
grid-template-columns: minmax(0, 1fr);
padding: 16px 16px 22px;
gap: 12px;
}
.tbf-summary-left {
height: 140px;
}
.tbf-card .tbf-summary-actions {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin-top: 8px !important;
padding-left: 0 !important;
}
.tbf-details-inner {
padding: 14px 16px 16px;
}
/* Barra ricerca mobile */
.tbf-search-box {
border-radius: 14px;
}
.tbf-search-input {
padding: 16px 20px 16px 50px;
font-size: 15px;
}
.tbf-search-icon {
left: 18px;
width: 20px;
height: 20px;
}
.tbf-clear-search {
right: 12px;
width: 32px;
height: 32px;
font-size: 20px;
}
/* Filtri mobile */
.tbf-toggle-filters {
display: flex;
}
.tbf-filters-header {
padding: 16px 20px;
}
.tbf-filters-title {
font-size: 16px;
}
.tbf-filters-container {
display: none;
padding: 20px;
grid-template-columns: 1fr;
max-height: 300px;
}
.tbf-filters-expanded .tbf-filters-container {
display: grid;
}
.tbf-filter-option {
padding: 14px 18px;
}
.tbf-filters-actions {
padding: 16px 20px;
justify-content: center;
}
.tbf-reset-filters {
width: 100%;
justify-content: center;
}
/* Contatore mobile */
.tbf-results-counter {
padding: 16px 24px;
border-radius: 14px;
}
.tbf-counter-icon {
width: 50px;
height: 50px;
font-size: 26px;
}
.tbf-counter-text {
font-size: 16px;
}
.tbf-counter-text span {
font-size: 24px;
}
/* Toggle visualizzazione visibile su mobile */
.tbf-view-toggle {
display: flex;
}
/* ===========================
MODALITÀ LISTA (MOBILE) - COMPATTA (v7)
- contenuto più a destra (più gap dal logo)
- logo a tutta altezza (anche sotto al footer) senza “bianco”
- angoli destri squadrati (no radius a destra)
- footer sempre banda grigio chiaro + "Scopri di più" più piccolo
=========================== */
.tbf-container.tbf-mobile-list-view {
--tbf-list-logo-w: 96px;
--tbf-list-gap: 16px;
--tbf-footer-shift: 30px;
}
.tbf-container.tbf-mobile-list-view .tbf-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 12px !important; /* squadrato a destra */
padding-bottom: 0 !important; /* niente spazio finto */
}
/* contenuto a destra del logo */
.tbf-container.tbf-mobile-list-view .tbf-card-summary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 10px 14px 8px calc(var(--tbf-list-logo-w) + var(--tbf-list-gap));
text-align: left;
}
/* logo incollato ai bordi, a tutta altezza (copre anche il footer sotto) */
.tbf-container.tbf-mobile-list-view .tbf-summary-left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: var(--tbf-list-logo-w);
background: #0b0b0b;
border-radius: 12px 0 0 12px !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
z-index: 3; /* sopra al footer */
}
.tbf-container.tbf-mobile-list-view .tbf-summary-left img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 10px;
border-radius: 0 !important;
}
/* in lista nascondo nome/rank: basta il logo */
.tbf-container.tbf-mobile-list-view .tbf-summary-top {
display: flex !important;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.tbf-container.tbf-mobile-list-view .tbf-casino-name {
display: block !important;
font-size: 1.05rem;
font-weight: 750;
color: #1d4799;
margin: 0;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-middle {
padding: 0 !important;
padding-left: 0 !important;
margin-left: 0 !important;
gap: 6px;
align-items: flex-start;
text-align: left;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-bonus {
font-size: 1.09rem !important;
line-height: 1.2;
font-weight: 550;
margin-top: 2px;
width: 100% !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-tags {
margin-top: 2px;
width: 100% !important;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* bottoni più piccoli e allineati a sinistra (niente shift) */
.tbf-container.tbf-mobile-list-view .tbf-summary-actions {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 0 !important; /* override padding-left !important del mobile base */
margin-top: 4px !important;
text-align: left !important;
width: 100% !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.tbf-container.tbf-mobile-list-view .tbf-btn-cta,
.tbf-container.tbf-mobile-list-view .tbf-btn-review {
padding: 10px 10px;
font-size: 0.72rem;
border-radius: 5px;
line-height: 1.0;
}
.tbf-container.tbf-mobile-list-view .tbf-btn-cta{
padding: 10px 10px;
font-size: 0.72rem;
border-radius: 5px;
line-height: 1.0;
}
.tbf-container.tbf-mobile-list-view .tbf-tag-pill {
padding: 4px 8px;
font-size: 0.66rem;
border-radius: 10px;
margin: 0 !important;
}
/* footer: banda grigio chiaro sempre visibile + testo più piccolo (v11)
- click sempre attivo (pointer-events: none sulla banda)
- centrato rispetto alla colonna contenuti (escludendo il logo)
*/
/* =====================================================================
EMBED MODE (Opzione A)
- si attiva SOLO quando il plugin è in single_mode (richiamo 1 casino)
- pensato per essere inserito in mezzo ad una recensione
- tema chiaro (niente blu notte)
===================================================================== */
.tbf-container.tbf-embed{
--tbf-embed-bg:#f7fbff;
--tbf-embed-border:#d9e2ef;
--tbf-embed-ink:#102a43;
--tbf-embed-muted:#52606d;
}
.tbf-container.tbf-embed .tbf-filter-bar,
.tbf-container.tbf-embed .tbf-controls,
.tbf-container.tbf-embed .tbf-list-divider,
.tbf-container.tbf-embed .tbf-top-featured{
display:none !important;
}
.tbf-container.tbf-embed{
padding: 0 !important;
background: transparent !important;
}
.tbf-container.tbf-embed .tbf-cards{
display:block !important;
}
.tbf-container.tbf-embed .tbf-card{
max-width: 780px !important;
margin: 18px auto !important;
border: 2px solid var(--tbf-embed-border) !important;
background: var(--tbf-embed-bg) !important;
border-radius: 22px !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.10) !important;
}
/* Header più “editoriale” */
.tbf-container.tbf-embed .tbf-summary{
background: linear-gradient(180deg, #eaf4ff 0%, #f7fbff 60%) !important;
border-radius: 22px !important;
}
.tbf-container.tbf-embed .tbf-title{
color: var(--tbf-embed-ink) !important;
font-size: 26px !important;
line-height: 1.15 !important;
}
.tbf-container.tbf-embed .tbf-subtitle,
.tbf-container.tbf-embed .tbf-meta,
.tbf-container.tbf-embed .tbf-small-text{
color: var(--tbf-embed-muted) !important;
}
/* CTA: su desktop ok inline, su mobile in 2 colonne pulite */
.tbf-container.tbf-embed .tbf-actions{
gap: 10px !important;
}
@media (max-width: 640px){
.tbf-container.tbf-embed .tbf-card{
}
.tbf-container.tbf-embed .tbf-actions{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.tbf-container.tbf-embed .tbf-btn{
width: 100% !important;
justify-content: center !important;
}
}
.tbf-container.tbf-mobile-list-view .tbf-card-footer {
position: relative !important;
height: 28px;
background: transparent;
border-top: none;
display: flex;
align-items: center;
justify-content: center;
padding-left: var(--tbf-list-logo-w);
box-sizing: border-box;
overflow: hidden;
}
.tbf-container.tbf-mobile-list-view .tbf-card-footer::before {
content: "";
position: absolute;
left: var(--tbf-list-logo-w);
right: 0;
top: 0;
bottom: 0;
background: #f1f1f187;
border-top: 1px solid rgba(9, 30, 66, 0.06);
pointer-events: none;
}
.tbf-container.tbf-mobile-list-view .tbf-btn-more {
position: relative;
z-index: 2;
width: 100%;
margin: 0;
padding: 0 30px;
justify-content: center;
text-align: center;
font-weight: 600;
color: #000000;
font-size: 0.60rem;
line-height: 1;
cursor: pointer;
}
.tbf-container.tbf-mobile-list-view .tbf-btn-more::after {
font-size: 0.52rem;
color: #000000;
}
}
@media screen and (max-width: 768px) {
.tbf-filter-bar {
flex-direction: column;
align-items: flex-start;
gap: 0px;
}
/* Modifica il toggle ADM per avere testo sotto su mobile */
.tbf-filter-switch {
flex-direction: row; /* Toggle a sinistra, testo a destra ma in colonna */
align-items: flex-start;
gap: 10px;
width: 100%;
}
.tbf-filter-slider {
margin-top: 2px; /* Allinea verticalmente con il testo */
}
.tbf-filter-text {
white-space: normal; /* Permette al testo di andare a capo */
font-size: 13px;
line-height: 1.4;
flex: 1; /* Prende tutto lo spazio rimanente */
}
.tbf-geo-label {
margin: 0;
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-left: 54px; /* Allinea con il testo del toggle (44px toggle + 10px gap) */
}
.tbf-geo-flag {
margin-right: 6px;
}
}
@media screen and (max-width: 600px) {
.tbf-container {
padding: 0 0 30px 0 !important;
}
.tbf-search-input {
padding: 14px 18px 14px 48px;
font-size: 14px;
}
/* Per schermi molto piccoli, riduci il padding del geo label */
.tbf-geo-label {
padding-left: 0;
margin-top: 0px;
}
/* Lista ancora più compatta su schermi piccoli */
.tbf-container.tbf-mobile-list-view {
--tbf-list-logo-w: 96px;
--tbf-list-gap: 16px;
--tbf-footer-shift: 30px;
}
.tbf-container.tbf-mobile-list-view .tbf-card-summary {
grid-template-columns: var(--tbf-list-logo-w) minmax(0, 1fr);
}
.tbf-container.tbf-mobile-list-view .tbf-summary-left {
height: 100%;
min-height: 100px;
border-radius: 24px 0 0 24px;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-bonus {
font-size: 0.9rem;
}
}
/* ===========================
VARIANTI COLORE TAG BONUS
=========================== */
/* Bonus senza deposito */
.tbf-tag-bonus-senza-deposito,
.tbf-tag-bonus-senza-deposito-scommesse {
background: linear-gradient(135deg, #ff9800, #ff6f00);
color: #ffffff;
}
/* Free Spins / Giri gratis */
.tbf-tag-freespins,
.tbf-tag-free-spins,
.tbf-tag-free-spin,
.tbf-tag-giri-gratis {
background: linear-gradient(135deg, #ffe600, #ffb300);
color: #121111;
}
/* Bonus di benvenuto */
.tbf-tag-bonus-di-benvenuto,
.tbf-tag-bonus-benvenuto,
.tbf-tag-welcome-bonus {
background: linear-gradient(135deg, #0051d8, #00a2ff);
color: #ffffff;
}
/* Cashback */
.tbf-tag-cashback,
.tbf-tag-rimborso {
background: linear-gradient(135deg, #00b894, #009170);
color: #ffffff;
}
/* NO ADM / non AAMS */
.tbf-tag-no-adm,
.tbf-tag-noadm,
.tbf-tag-no-adm-casino {
background: #263238;
color: #ffffff;
}
/* ===========================
MODALE AVVISO ADM ITALIA
=========================== */
.tbf-adm-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
}
.tbf-adm-modal {
width: 90%;
max-width: 420px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
padding: 20px 22px 18px;
font-family: inherit;
}
.tbf-adm-modal-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.tbf-adm-modal-icon {
font-size: 24px;
}
.tbf-adm-modal-title {
margin: 0;
color: #c62b2b;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.tbf-adm-modal-body p {
margin: 6px 0;
font-size: 14px;
color: #333333;
line-height: 1.5;
}
.tbf-adm-modal-flag {
margin-left: 4px;
}
.tbf-adm-modal-footer {
margin-top: 14px;
text-align: right;
}
.tbf-adm-modal-button {
border: none;
border-radius: 999px;
padding: 8px 18px;
background: #0F3E9A;
color: #ffffff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 16px rgba(15, 62, 154, 0.35);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tbf-adm-modal-button:hover {
background: #143d8a;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15, 62, 154, 0.45);
}
/* ===========================
CARD SINGOLA
=========================== */
.tbf-card-single {
padding: 0;
margin: 24px auto 20px;
max-width: 880px;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.tbf-card-single-simple {
background: #f5f7ff;
border-radius: 0;
padding: 24px 16px 20px;
}
.tbf-single-simple-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.tbf-single-simple-line {
display: none;
}
.tbf-single-simple-header::before,
.tbf-single-simple-header::after {
content: "";
flex: 1;
border-bottom: 1px solid #cfd5f2;
}
.tbf-single-simple-title {
margin: 0;
font-size: 1.05rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: #1f2937;
background: transparent;
white-space: nowrap;
}
.tbf-single-simple-body {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
padding: 24px 18px 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.tbf-single-simple-amount {
font-size: 2.4rem;
line-height: 1.1;
font-weight: 800;
color: #111827;
text-align: center;
}
.tbf-single-simple-subtitle {
font-size: 1.1rem;
font-weight: 600;
color: #111827;
text-align: center;
}
.tbf-single-simple-cta {
margin-top: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 34px;
border-radius: 999px;
background: #22c55e;
color: #ffffff;
font-weight: 700;
text-decoration: none;
border: none;
box-shadow: 0 12px 24px rgba(16, 185, 129, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tbf-single-simple-cta:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(16, 185, 129, 0.55);
background: #16a34a;
}
.tbf-card-footer-single {
border-top: 1px solid rgba(15, 23, 42, 0.08);
background: #f9fafb;
padding: 4px 0 6px;
display: flex;
justify-content: center;
}
/* ===========================
NESSUN RISULTATO
=========================== */
.tbf-no-results {
text-align: center;
padding: 60px 40px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border-radius: 20px;
color: #64748b;
font-size: 18px;
border: 3px dashed #cbd5e1;
margin: 40px 0;
}
.tbf-no-results::before {
content: "🔍";
display: block;
font-size: 60px;
margin-bottom: 25px;
opacity: 0.7;
}
/* ===========================
RESPONSIVE CARD SINGOLA
=========================== */
@media (max-width: 768px) {
.tbf-card-single {
margin: 16px auto 16px;
}
.tbf-card-single-simple {
padding: 20px 12px 18px;
border-radius: 0;
}
.tbf-single-simple-body {
padding: 20px 14px 18px;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.tbf-single-simple-amount {
font-size: 1.9rem;
}
.tbf-single-simple-title {
font-size: 0.9rem;
}
.tbf-single-simple-subtitle {
font-size: 1.05rem;
}
}
@media (min-width: 1024px) {
.tbf-card-single-simple {
padding: 28px 40px 26px;
}
.tbf-single-simple-body {
padding: 28px 32px 26px;
}
.tbf-single-simple-amount {
font-size: 2.6rem;
}
}
/* ===========================
STILE PER NASCONDERE FILTRI
=========================== */
.tbf-search-input-placeholder {
display: none !important;
}
@media screen and (max-width: 600px) {
.tbf-card-open .tbf-card-details{
max-height: 20000px !important;
}
}
@media screen and (max-width: 900px) {
.tbf-container.tbf-mobile-list-view .tbf-details-inner{
padding-left: calc(var(--tbf-list-logo-w) + var(--tbf-list-gap)) !important;
padding-right: 16px !important;
}
}
button.tbf-btn-more.tbf-toggle-details {
all: unset !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
cursor: pointer !important;
font-size: 0.70rem !important;
font-weight: 500 !important;
color: #000000 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 2px 0 !important;
margin: 0 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
padding-left: 30px !important;
}
/* OVERRIDE FORZATO: bottoni toggle "Griglia/Lista" come Blog */
@media (max-width: 900px){
/* colpisce SOLO i bottoni dentro il toggle della lista casinò */
.tbf-view-toggle .tbf-view-toggle-buttons button.tbf-view-btn,
.tbf-view-toggle button.tbf-view-btn{
-webkit-appearance: none !important;
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 10px 16px !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 2px solid #dfe3ec !important;
color: #1d4799 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
box-shadow: 0 10px 22px rgba(29,71,153,.10) !important;
text-transform: none !important;
white-space: nowrap !important;
cursor: pointer !important;
transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
.tbf-view-toggle button.tbf-view-btn:active{
transform: scale(.98) !important;
}
/* stato attivo (come blog) */
.tbf-view-toggle button.tbf-view-btn.active{
background: linear-gradient(90deg, #1d4799, #2e7bff) !important;
border-color: rgba(46,123,255,.60) !important;
color: #ffffff !important;
box-shadow: 0 10px 22px rgba(46,123,255,.28) !important;
}
}
@media screen and (max-width: 900px) {
/* Grid view mobile: 2 colonne (se NON list view) */
.tbf-container:not(.tbf-mobile-list-view):not(.tbf-mobile-compact-grid) .tbf-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 0px;
}
.tbf-container:not(.tbf-mobile-list-view) .tbf-card {
margin-bottom: 0;
border-radius: 18px;
}
.tbf-container:not(.tbf-mobile-list-view) .tbf-card-summary {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 14px 14px 12px;
gap: 10px;
}
.tbf-container:not(.tbf-mobile-list-view) .tbf-summary-left {
height: 110px;
border-radius: 14px;
}
.tbf-container:not(.tbf-mobile-list-view) .tbf-summary-actions {
align-items: stretch;
}
.tbf-container:not(.tbf-mobile-list-view) .tbf-btn-cta,
.tbf-container:not(.tbf-mobile-list-view) .tbf-btn-review {
width: 100%;
justify-content: center;
}
.tbf-container.tbf-mobile-list-view .tbf-badge {
font-size: 0.70rem;
padding: 4px 8px;
}
}
/* =====================================================================
HOTFIX UI (v14.5)
- Toggle vista (griglia/card) elegante: SOLO icone, niente "cerchioni"
- Toggle sulla stessa riga del contatore, a destra
- Fix: bottoni troppo grandi + blu acceso + padding eccessivo
===================================================================== */
/* Contatore: una sola riga, con toggle a destra (mobile). */
.tbf-container .tbf-counter-line{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap: 12px !important;
padding-right: 14px !important;
}
/* Toggle inline: niente margini/padding che lo fanno “galleggiare”. */
.tbf-container .tbf-view-toggle,
.tbf-container .tbf-view-toggle-inline{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
margin: 0 !important;
padding: 0 !important;
}
.tbf-container .tbf-view-toggle-buttons{
display:inline-flex !important;
gap: 8px !important;
}
/* Bottoni: compatti, squadrati con radius, zero padding, colori soft. */
.tbf-container .tbf-view-toggle button.tbf-view-btn{
-webkit-appearance:none !important;
appearance:none !important;
width: 34px !important;
height: 34px !important;
padding: 0 !important;
border-radius: 12px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
background: rgba(255,255,255,0.92) !important;
border: 2px solid rgba(15, 62, 154, 0.14) !important;
box-shadow: none !important;
color: rgba(11, 43, 102, 0.90) !important;
cursor:pointer !important;
}
/* SVG più leggibile senza ingrandire il contenitore */
.tbf-container .tbf-view-toggle .tbf-view-svg{
width: 22px !important;
height: 22px !important;
}
/* Stato attivo: niente gradient blu sparato, solo “highlight” elegante */
.tbf-container .tbf-view-toggle button.tbf-view-btn.active{
background: rgba(46, 123, 255, 0.10) !important;
border-color: rgba(46, 123, 255, 0.35) !important;
color: rgba(11, 43, 102, 1) !important;
box-shadow: none !important;
}
/* Mobile spacing del contatore: conserva leggibilità e allineamento */
@media (max-width: 760px){
.tbf-container .tbf-counter-line{
padding-left: 14px !important;
padding-right: 14px !important;
margin: 10px 0 10px !important;
}
}
/* ===========================
v14 controls (layout nuovo)
Evita che vecchie regole (.tbf-toggle-filters, .tbf-sort-select, ecc.)
facciano comparire bordi "doppi" o stili incoerenti.
=========================== */
.tbf-container .tbf-controls .tbf-toggle-filters.tbf-quick-btn{
display:flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
padding: 0px 0px !important;
border-radius: 20px !important;
border:2px solid rgba(15, 62, 154, 0.12) !important;
background: rgba(255,255,255,0.85) !important;
color: var(--tbf-ink) !important;
font-weight: 650 !important;
}
@media (max-width: 760px){
.tbf-container .tbf-controls .tbf-toggle-filters.tbf-quick-btn{ width:100% !important; border-radius: 16px !important; padding: 12px 12px !important; }
}
/* Desktop: nascondi toggle (serve solo su mobile) */
@media (min-width: 901px){
.tbf-container .tbf-view-toggle,
.tbf-container .tbf-view-toggle-inline{ display:none !important; }
}
/* =========================================================
PATCH v7.1 (2026-01-27) - FINAL OVERRIDE
Questo blocco è messo in fondo al CSS per battere eventuali override precedenti.
NON tocca desktop e NON tocca la vista mobile "card" (compact grid).
========================================================= */
@media (max-width: 900px){
/* 1) Vista LISTA: elimina qualunque banda sotto al logo */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{ align-items: stretch !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
}
/* 2) Vista LISTA: ripristina etichette dei filtri (rapidi/avanzati) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-text{ display: inline-flex !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-chev{ display: inline-flex !important; }
/* 3) Vista LISTA: "Dettagli" non attaccato al bordo destro */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{ margin-right: 8px !important; }
}
/* =========================================================
PATCH v7 (2026-01-27)
Richieste (NON tocca desktop e NON tocca mobile "vista card" / compact grid):
1) Vista LISTA mobile (container SENZA .tbf-mobile-compact-grid): elimina spazio sotto al logo
2) Ripristina le scritte dei filtri (Filtri rapidi / Filtri avanzati) su mobile lista
3) Sposta "Dettagli" leggermente a sinistra (non attaccato al bordo destro)
========================================================= */
@media (max-width: 900px){
/* 1) Logo: deve occupare tutta l'altezza della card (niente banda bianca sotto) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
align-items: stretch !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
height: auto !important; /* batte qualsiasi height fisso precedente */
min-height: 0 !important;
align-self: stretch !important;
}
/* 2) Toolbar filtri: ripristina le etichette testo SOLO in vista lista */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-text{
display: inline-flex !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-chev{
display: inline-flex !important;
}
/* 3) "Dettagli": un filo più a sinistra */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{
margin-right: 8px !important;
}
}
/* =========================================================
MOBILE LIST RESTYLE (v6.6.7)
- Applica SOLO alla vista LISTA su mobile (default: container SENZA .tbf-mobile-compact-grid)
- NON tocca la vista card/compact (.tbf-mobile-compact-grid)
Match richiesto: come screenshot "foto 2" (logo full-height a sinistra, contenuti puliti, bottoni compatti, dettagli come testo + freccia)
========================================================= */
@media (max-width: 760px){
/* Lista = 1 card per riga */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-cards{
display:flex !important;
flex-direction:column !important;
gap: 12px !important;
padding: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card{
margin: 0 !important;
}
/* Layout a 3 colonne: logo | contenuti | azioni */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
display:grid !important;
grid-template-columns: 92px minmax(0,1fr) 120px !important;
gap: 12px !important;
padding: 0 !important;
align-items: stretch !important;
}
/* Logo full-height */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
height: auto !important;
border-radius: 0 !important;
padding: 10px !important;
align-self: stretch !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left img{
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display:block !important;
}
/* Colonna centrale */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-middle{
padding: 12px 0 12px 0 !important;
display:flex !important;
flex-direction:column !important;
gap: 6px !important;
min-width: 0 !important;
}
/* Ordine contenuti: titolo -> bonus -> badge (tag tassonomia nascosti) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-top{ order: 1 !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus{ order: 2 !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-badges{ order: 3 !important; margin-top: auto !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-tags{ display:none !important; }
/* Titolo */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-casino-name{
font-size: 18px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-top{
gap: 8px !important;
align-items: center !important;
min-width: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-top .tbf-rank{
flex: 0 0 auto !important;
}
/* Bonus: NO box / NO sfondo / NO bordo */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 2px 0 2px !important;
border-radius: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-amount{
display:block !important;
font-size: 30px !important;
line-height: 1.0 !important;
font-weight: 900 !important;
color: #cd0a0a !important;
white-space: nowrap !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-label{
display:block !important;
font-size: 16px !important;
line-height: 1.15 !important;
font-weight: 900 !important;
color: #4a5677 !important;
}
/* Badge in basso */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-badges{
margin-top: 6px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badges{
display:flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badge{
font-size: 12px !important;
padding: 5px 9px !important;
border-radius: 999px !important;
line-height: 1 !important;
}
/* Colonna azioni: bottoni compatti + dettagli come testo */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-actions{
padding: 12px 12px 12px 0 !important;
display:flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-cta,
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-review{
width: 100% !important;
justify-content: center !important;
padding: 8px 10px !important;
border-radius: 12px !important;
font-size: 13px !important;
font-weight: 800 !important;
min-height: 36px !important;
}
/* Dettagli: NO bottone, solo testo + freccia */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{
display:inline-flex !important;
align-items:center !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 0 !important;
margin-top: 2px !important;
width: auto !important;
align-self: flex-start !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #2a63c9 !important;
font-weight: 800 !important;
font-size: 13px !important;
cursor: pointer !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link::after{
content:"";
width: 14px;
height: 14px;
display:inline-block;
background-repeat:no-repeat;
background-position:center;
background-size: 14px 14px;
opacity: 0.85;
transform: translateY(1px);
background-image: url('data:image/svg+xml;utf8,');
transition: transform 0.18s ease;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-open .tbf-details-link::after{
transform: translateY(1px) rotate(180deg);
}
/* Footer Dettagli sotto: non deve esistere in questa vista */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-footer{
display:none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
}
/* Label con icona (modale filtri avanzati) */
body .tbf-adv-backdrop .tbf-adv-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
body .tbf-adv-backdrop .tbf-adv-label .tbf-adv-ico {
width: 22px;
height: 22px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 62, 154, 0.08);
color: var(--tbf-brand);
}
body .tbf-adv-backdrop .tbf-adv-label .tbf-adv-ico svg {
width: 14px;
height: 14px;
}
/* Override “temi aggressivi”: active SEMPRE leggibile */
body .tbf-adv-backdrop .tbf-adv-modal .tbf-pill.active {
background: linear-gradient(90deg, #5277c1, #2e7bff) !important;
background-color: #0F3E9A !important;
color: #ffffff !important;
border-color: transparent !important;
opacity: 1 !important;
}
/* Close button: forza stile BonusFree anche se il tema usa !important */
body .tbf-adv-backdrop .tbf-adv-modal .tbf-adv-close {
all: unset !important;
width: 38px !important;
height: 38px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: #ffffff !important;
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
body .tbf-adv-backdrop .tbf-adv-modal .tbf-adv-close:hover {
background: rgba(255, 255, 255, 0.28) !important;
}
/* ===========================
UI FIX (v11-13)
- mobile: CTA + Recensione in una riga
- border-radius bottoni 12px
- loghi più alti
=========================== */
@media screen and (max-width: 900px){
.tbf-card .tbf-summary-actions{
width: 100% !important;
}
.tbf-card .tbf-btn-cta,
.tbf-card .tbf-btn-review{
flex: 1 1 0 !important;
min-width: 0 !important;
white-space: nowrap;
}
}
@media screen and (max-width: 900px){
.tbf-container.tbf-mobile-list-view .tbf-summary-actions{
width: 100% !important;
}
.tbf-container.tbf-mobile-list-view .tbf-btn-cta,
.tbf-container.tbf-mobile-list-view .tbf-btn-review{
flex: 1 1 0 !important;
min-width: 0 !important;
}
}
@media screen and (max-width: 900px){
.tbf-view-toggle {
display: none !important;
}
}
/* =========================================================
HOTFIX (v6.2)
- Toggle visualizzazione su mobile (Griglia / Card)
- Griglia (default): 1 card per riga su mobile
- Card: 2 colonne compatte stile app
Nota: questo blocco DEVE restare in fondo al file per vincere
su eventuali override del tema o regole precedenti.
========================================================= */
/* Toggle visibile su mobile, nascosto su desktop */
@media screen and (max-width: 900px){
.tbf-container .tbf-view-toggle{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 10px 0 14px !important;
padding: 0 15px !important;
}
}
/* ===== Desktop layout: sidebar filtri sempre visibile (non rompe mobile) ===== */
.tbf-desktop-sidebar{ display:none; }
@media (min-width: 992px) {
.tbf-desktop-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 18px;
align-items: start;
margin-top: 14px;
}
.tbf-desktop-sidebar {
display:block;
position: sticky;
top: 16px;
}
.tbf-desktop-sidebar-inner {
background: rgba(255,255,255,0.75);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 18px;
padding: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
}
.tbf-df-group { margin-bottom: 14px; }
.tbf-df-title {
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.tbf-df-ico{
width: 16px;
height: 16px;
opacity: .9;
flex: 0 0 auto;
}
.tbf-df-items { display: flex; flex-direction: column; gap: 8px; }
.tbf-df-row {
display: flex;
align-items: center;
gap: 10px;
background: #B0E5FF2B;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 14px;
padding: 10px 12px;
cursor: pointer;
}
.tbf-df-check { transform: scale(1.05); }
.tbf-df-radio { transform: scale(1.05); }
.tbf-df-label { flex: 1; font-size: 14px; color: #0C2C66; font-weight: 500; }
.tbf-df-count {
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
background: none;
color: #2E7BFF;
}
.tbf-df-empty { padding: 8px 0; opacity: 0.75; font-size: 13px; }
@media screen and (min-width: 901px){
.tbf-container .tbf-view-toggle{ display: none !important; }
}
/* ============
GRIGLIA (DEFAULT)
1 card per riga su mobile
============ */
@media screen and (max-width: 900px){
.tbf-container:not(.tbf-mobile-compact-grid):not(.tbf-mobile-list-view) .tbf-cards{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid):not(.tbf-mobile-list-view) .tbf-card{
margin-bottom: 0 !important;
}
}
/* ============
CARD
2 colonne compatte su mobile
============ */
@media screen and (max-width: 900px){
.tbf-container.tbf-mobile-compact-grid .tbf-cards{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 0 !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-card{
margin-bottom: 0 !important;
border-radius: 18px !important;
overflow: hidden !important;
height: 100% !important;
/*
IMPORTANT:
In Card view (riduci griglia), i filtri JS nascondono le card via inline style
(element.style.display = 'none'). Se qui mettiamo display con !important,
il CSS vince e i filtri "non funzionano" (soprattutto il toggle ADM).
*/
display: flex;
flex-direction: column !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-card-summary{
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 0 !important; /* logo a filo card */
position: relative !important;
flex: 1 1 auto !important;
min-height: 210px !important; /* uniforma altezza tile */
}
.tbf-container.tbf-mobile-compact-grid .tbf-summary-left{
height: 74px !important;
border-radius: 0 !important; /* la card già arrotonda */
margin: 0 !important;
width: 100% !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-summary-left img{
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
/* Sposta il rank sopra il logo, senza occupare spazio */
.tbf-container.tbf-mobile-compact-grid .tbf-summary-top{
margin: 0 !important;
height: 0 !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-rank{
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 3 !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-casino-name{
display: none !important; /* logo già comunica il nome */
}
.tbf-container.tbf-mobile-compact-grid .tbf-summary-middle{
padding: 10px 12px 0 !important;
}
/* Box bonus: titolo + testo centrati (Card view) */
.tbf-container.tbf-mobile-compact-grid .tbf-summary-bonus{
/*
Sovrascrive la regola globale che imposta display:flex !important.
In Card view vogliamo testo centrato e impaginazione "a blocchi".
*/
display: block !important;
margin: 0 !important;
padding: 10px 10px !important;
background: #f7faff !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
border-left: 0 !important; /* rimuove il “baffo” */
border-radius: 12px !important;
color: #0b2b66 !important;
text-align: center !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-summary-bonus .tbf-bonus-amount{
display: block !important;
font-size: 1.15rem !important;
line-height: 1.1 !important;
font-weight: 900 !important;
margin-bottom: 4px !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-summary-bonus .tbf-bonus-label{
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 0.86rem !important;
line-height: 1.25 !important;
/* Card view: testo centrato (no giustificato) */
text-align: center !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
/* Nascondi roba che sporca la tile */
.tbf-container.tbf-mobile-compact-grid .tbf-summary-badges,
.tbf-container.tbf-mobile-compact-grid .tbf-summary-tags,
.tbf-container.tbf-mobile-compact-grid .tbf-btn-review,
.tbf-container.tbf-mobile-compact-grid .tbf-card-footer,
.tbf-container.tbf-mobile-compact-grid .tbf-card-details{
display: none !important;
}
/* CTA full-width */
.tbf-container.tbf-mobile-compact-grid .tbf-summary-actions{
width: 100% !important;
align-items: stretch !important;
padding: 0 12px 12px !important;
margin-top: auto !important;
}
.tbf-container.tbf-mobile-compact-grid .tbf-btn-cta{
width: 100% !important;
justify-content: center !important;
border-radius: 12px !important;
/* più basso/compatto */
padding: 8px 10px !important;
font-size: 0.92rem !important;
font-weight: 850 !important;
}
}
/* ===========================
v11-12 ICONS + BONUS HIGHLIGHT
- icone inline per bottoni e badge bonus
- bonus più in risalto su mobile
=========================== */
.tbf-btn-cta,
.tbf-btn-review,
.tbf-single-simple-cta {
gap: 8px;
}
.tbf-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.tbf-btn-icon svg {
width: 16px;
height: 16px;
}
/* Tag "bonus type" con icona */
.tbf-tag-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(0,0,0,0.10);
}
.tbf-tag-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex: 0 0 14px;
opacity: 0.9;
}
.tbf-tag-ico svg {
width: 14px;
height: 14px;
}
/* Bonus più "hero" su mobile */
@media (max-width: 680px) {
.tbf-summary-bonus {
width: 100%;
display: inline-flex;
align-items: center;
background: rgba(46, 123, 255, 0.10);
border: 1px solid rgba(46, 123, 255, 0.20);
border-left: 4px solid rgba(46, 123, 255, 0.70);
padding: 8px 10px;
border-radius: 14px;
}
.tbf-btn-icon,
.tbf-btn-icon svg {
width: 14px;
height: 14px;
}
}
/* Mobile list-view: icone più piccole + bonus sempre evidenziato */
.tbf-container.tbf-mobile-list-view .tbf-summary-bonus {
background: rgba(46, 123, 255, 0.10) !important;
border: 1px solid rgba(46, 123, 255, 0.20) !important;
border-left: 4px solid rgba(46, 123, 255, 0.70) !important;
padding: 8px 10px !important;
border-radius: 14px !important;
}
.tbf-container.tbf-mobile-list-view .tbf-tag-ico,
.tbf-container.tbf-mobile-list-view .tbf-tag-ico svg {
width: 12px;
height: 12px;
}
/* =========================================================
Restyling compatto + professionale (v5.2)
- badge meno ovali
- tag bonus meno "sparati"
- +N tags su mobile
========================================================= */
.tbf-badges { gap: 6px; }
.tbf-badge {
border-radius: 10px !important;
padding: 4px 8px !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
border: 1px solid rgba(9, 30, 66, 0.10) !important;
background: #f5f7ff !important;
color: #1d4799 !important;
}
.tbf-tag-pill{
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 5px 9px !important;
border-radius: 10px !important; /* rounded-rectangle, non pill */
font-size: 0.76rem !important;
font-weight: 650 !important;
line-height: 1.05;
border: 1px solid rgba(46, 123, 255, 0.18);
background: #f6f8ff;
color: #1d4799;
}
/* varianti: soft, niente gradienti urlati */
.tbf-tag-bonus-senza-deposito,
.tbf-tag-bonus-senza-deposito-scommesse{
background: #fff4e2 !important;
border-color: rgba(255, 152, 0, 0.35) !important;
color: #7a4a00 !important;
}
.tbf-tag-freespins,
.tbf-tag-free-spins,
.tbf-tag-free-spin,
.tbf-tag-giri-gratis{
background: #fffbe6 !important;
border-color: rgba(255, 214, 10, 0.40) !important;
color: #6a4f00 !important;
}
.tbf-tag-bonus-di-benvenuto,
.tbf-tag-bonus-benvenuto,
.tbf-tag-welcome-bonus{
background: #eaf2ff !important;
border-color: rgba(0, 81, 216, 0.28) !important;
color: #0b3b90 !important;
}
.tbf-tag-cashback,
.tbf-tag-rimborso{
background: #eafff5 !important;
border-color: rgba(0, 184, 148, 0.28) !important;
color: #0f5c2f !important;
}
.tbf-tag-no-adm,
.tbf-tag-noadm,
.tbf-tag-no-adm-casino{
background: #f1f5f9 !important;
border-color: rgba(38, 50, 56, 0.18) !important;
color: #263238 !important;
}
/* +N / mostra meno */
.tbf-tag-hidden{ display:none !important; }
.tbf-tag-more{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
border-radius: 10px;
font-size: 0.74rem;
font-weight: 750;
border: 1px dashed rgba(46, 123, 255, 0.35);
background: #ffffff;
color: #1d4799;
cursor: pointer;
}
.tbf-tag-more:active{ transform: scale(0.98); }
/* Mobile: riduci aria, più densità */
@media screen and (max-width: 900px){
.tbf-card{ border-radius: 18px; }
.tbf-card-summary{ padding: 14px 14px 16px !important; gap: 10px !important; }
.tbf-summary-middle{ gap: 3px !important; padding: 6px 0 0 0 !important; }
.tbf-summary-left{ height: 120px !important; border-radius: 16px !important; }
.tbf-summary-bonus{ font-size: 0.95rem !important; }
}
/* Mobile-list view: badge/tag coerenti e non “cicciotti” */
@media screen and (max-width: 900px){
.tbf-container.tbf-mobile-list-view .tbf-badge{
border-radius: 10px !important;
padding: 4px 7px !important;
font-size: 0.70rem !important;
}
.tbf-container.tbf-mobile-list-view .tbf-tag-pill{
padding: 4px 8px !important;
font-size: 0.70rem !important;
border-radius: 10px !important;
}
}
/* ===========================
TBF COMPACT v5.3
- badge meno ovali
- tag bonus più soft (variant per icon kind)
- quick filters in stile chip su mobile
- +N tag su mobile
=========================== */
.tbf-badge{
border-radius: 10px !important;
padding: 5px 9px !important;
}
/* Pills (modale filtri avanzati) meno ovali */
.tbf-pill{
border-radius: 12px !important;
}
/* Tag in card: da "giallo urlato" a soft chips */
.tbf-summary-tags{
display:flex;
flex-wrap:wrap;
gap: 8px;
}
.tbf-tag-pill{
display:inline-flex !important;
align-items:center !important;
gap: 6px !important;
padding: 6px 10px !important;
border-radius: 10px !important;
background: #f6f9ff !important;
border: 1px solid #d7e6ff !important;
color: #0b2b66 !important;
font-size: 0.80rem !important;
font-weight: 700 !important;
margin: 0 !important;
}
.tbf-tag-pill .tbf-tag-ico svg{
width: 14px;
height: 14px;
display:block;
}
/* Varianti per tipo bonus (derivato dall'icona) */
.tbf-tag-kind-gift{
background:#fff7e6 !important;
border-color:#ffe0a3 !important;
color:#8a5200 !important;
}
.tbf-tag-kind-rotate{
background:#eefaff !important;
border-color:#bfe6ff !important;
color:#075985 !important;
}
.tbf-tag-kind-cashback{
background:#ecfdf5 !important;
border-color:#b7f7d3 !important;
color:#065f46 !important;
}
.tbf-tag-kind-crown{
background:#f5f3ff !important;
border-color:#d6ccff !important;
color:#4c1d95 !important;
}
/* Bottone +N */
.tbf-tag-more{
all: unset !important;
cursor: pointer !important;
padding: 6px 10px !important;
border-radius: 10px !important;
border: 1px dashed #c3d1ff !important;
background: #ffffff !important;
color: #1d4799 !important;
font-weight: 900 !important;
font-size: 0.78rem !important;
line-height: 1 !important;
}
.tbf-summary-tags.tbf-tags-expanded .tbf-tag-more{
border-style: solid !important;
background:#f6f9ff !important;
}
/* Mobile: filtri rapidi a chip (meno padding, niente hover/trasformazioni) */
@media (max-width: 900px){
.tbf-filters-expanded .tbf-filters-container{
display:flex !important;
flex-wrap:wrap !important;
gap: 10px !important;
}
.tbf-filter-option{
padding: 8px 10px !important;
border-radius: 12px !important;
border: 1px solid #d7e6ff !important;
background: #ffffff !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
}
.tbf-filter-option:hover{
transform: none !important;
box-shadow: none !important;
background:#f6f9ff !important;
}
.tbf-checkbox{
display:none !important;
}
.tbf-filter-text{
font-size: 13px !important;
font-weight: 800 !important;
}
.tbf-filter-count{
font-size: 12px !important;
opacity: 0.75 !important;
}
.tbf-filter-option.is-active{
background:#e6f0ff !important;
border-color:#2e7bff !important;
}
}
/* Ultra mobile: card più densa */
@media (max-width: 680px){
.tbf-card{
border-radius: 18px !important;
}
.tbf-card-summary{
padding: 14px 14px 16px !important;
gap: 10px !important;
}
.tbf-summary-left{
height: 120px !important;
border-radius: 16px !important;
}
.tbf-casino-name{
font-size: 1.15rem !important;
}
.tbf-summary-bonus{
font-size: 0.96rem !important;
}
}
/* =========================================================
TBF COMPACT v5.4 (fix “badge troppo ovali” + bonus box meno cicciotto)
- badge/tag: meno pill, più label
- bonus highlight: più sottile
========================================================= */
.tbf-badges{ gap: 6px !important; }
.tbf-badge{
border-radius: 6px !important;
padding: 4px 7px !important;
font-size: 0.70rem !important;
letter-spacing: 0.15px;
}
/* Rank: leggermente meno “giocattolo” */
.tbf-rank{
width: 26px !important;
height: 26px !important;
font-size: 0.80rem !important;
}
/* Tag: label compatte (non caramelle) */
.tbf-summary-tags{ gap: 8px !important; }
.tbf-tag-pill{
border-radius: 8px !important;
padding: 5px 9px !important;
font-size: 0.74rem !important;
font-weight: 750 !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
background: #f7faff !important;
}
/* +N coerente */
.tbf-tag-more{
border-radius: 8px !important;
padding: 5px 9px !important;
font-size: 0.74rem !important;
}
/* Bonus box: più sottile su mobile */
@media (max-width: 680px){
.tbf-summary-bonus{
background: #f7faff !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
border-left: 3px solid rgba(46, 123, 255, 0.75) !important;
padding: 6px 8px !important;
border-radius: 10px !important;
}
}
/* Densità card: un filo più compatta */
@media (max-width: 680px){
.tbf-card-summary{ padding: 12px 12px 14px !important; gap: 10px !important; }
.tbf-summary-middle{ padding: 6px 8px 6px 0 !important; gap: 3px !important; }
.tbf-summary-left{ height: 112px !important; border-radius: 14px !important; }
}
/* =========================================================
TBF COMPACT v5.5
- Bonus area: gerarchia (amount + label) per evitare l'effetto ammucchiata
- Badge: ripristino colori soft ma leggibili
- Footer: 'Dettagli' più pulito
========================================================= */
.tbf-container .tbf-summary-bonus{
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 4px 10px !important;
margin: 6px 0 6px !important;
padding: 8px 10px !important;
background: #f7faff !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
border-left: 3px solid rgba(46, 123, 255, 0.65) !important;
border-radius: 12px !important;
color: #0b2b66 !important;
}
.tbf-container .tbf-summary-bonus .tbf-bonus-amount{
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #cd0a0a !important;
white-space: nowrap !important;
}
.tbf-container .tbf-summary-bonus .tbf-bonus-label{
font-size: 0.85rem !important;
font-weight: 750 !important;
color: #1d4799 !important;
}
@media (max-width: 680px){
.tbf-container .tbf-summary-bonus{
padding: 7px 9px !important;
border-radius: 10px !important;
}
.tbf-container .tbf-summary-bonus .tbf-bonus-label{
font-size: 0.84rem !important;
}
}
/* Ripristino colore badge (soft, non carnevale) */
.tbf-container .tbf-badge{ background: #f5f7ff !important; }
.tbf-container .tbf-badge-license{
background: #d9fbe5 !important;
color: #0f5c2f !important;
border-color: rgba(0, 184, 148, 0.25) !important;
}
.tbf-container .tbf-badge-accept{
background: #e6f0ff !important;
color: #0b3b90 !important;
border-color: rgba(46, 123, 255, 0.35) !important;
}
.tbf-container .tbf-badge-lang{
background: #fff7cc !important;
color: #7a5b00 !important;
border-color: rgba(255, 214, 10, 0.45) !important;
}
.tbf-container .tbf-badge-support{
background: #f0e6ff !important;
color: #4b2480 !important;
border-color: rgba(140, 80, 255, 0.25) !important;
}
.tbf-container .tbf-badge-block{
background: #ffe6e6 !important;
color: #8a1f1f !important;
border-color: rgba(220, 38, 38, 0.25) !important;
}
/* Footer 'Dettagli' più coerente */
.tbf-container .tbf-card-footer{
background: #f7faff !important;
border-top: 1px solid rgba(15, 62, 154, 0.10) !important;
padding: 8px 0 10px !important;
}
.tbf-container .tbf-btn-more{
font-weight: 800 !important;
color: #0b2b66 !important;
padding: 4px 0 !important;
}
.tbf-container .tbf-btn-more::after{
color: #0b2b66 !important;
opacity: 0.85 !important;
}
.tbf-container .tbf-card-open .tbf-btn-more{
color: #0b3b90 !important;
}
/* v5.5: forza lo stesso layout bonus anche in mobile-list-view */
.tbf-container.tbf-mobile-list-view .tbf-summary-bonus{
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 4px 10px !important;
margin: 6px 0 6px !important;
padding: 8px 10px !important;
background: #f7faff !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
border-left: 3px solid rgb(255 46 46 / 65%) !important;
border-radius: 12px !important;
color: #0b2b66 !important;
}
/* =========================================================
BONUS TAGS: SFONDO COLORATO (PIENO) - PIÙ ACCESO
Nota: queste regole DEVONO stare in FONDO al file,
perché più sopra c'è .tbf-tag-pill { background: ... !important; }
========================================================= */
.tbf-tag-pill.tbf-tag-kind-gift{
/* Bonus senza deposito */
background: rgba(245, 158, 11, 0.28) !important; /* amber */
border-color: rgba(245, 158, 11, 0.55) !important;
color: #5a3200 !important;
}
.tbf-tag-pill.tbf-tag-kind-rotate{
/* FreeSpins */
background: rgba(59, 130, 246, 0.22) !important; /* blue */
border-color: rgba(59, 130, 246, 0.50) !important;
color: #0b3a7a !important;
}
.tbf-tag-pill.tbf-tag-kind-card{
/* Primo deposito */
background: rgba(34, 197, 94, 0.22) !important; /* green */
border-color: rgba(34, 197, 94, 0.45) !important;
color: #06401f !important;
}
/* Variante "ancora più acceso": se li vuoi più forti, alza gli alpha:
gift 0.28 -> 0.40 rotate 0.22 -> 0.34 card 0.22 -> 0.34
*/
/* =========================================================
FILTER LAYOUT OVERRIDES (v14.1)
- queste regole stanno in fondo per battere i vecchi stili (mobile/checkbox)
========================================================= */
/* Mobile: il pannello si apre/chiude con .tbf-filters-open sul container,
quindi NON nascondere la lista interna. */
@media (max-width: 900px) {
.tbf-container .tbf-filters-container{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
}
}
/* Chip: la label deve essere "invisibile" e lasciare lo stile al chip */
.tbf-container .tbf-filter-option{
position:relative !important;
padding:0 !important;
background:transparent !important;
border:none !important;
transform:none !important;
box-shadow:none !important;
}
.tbf-container .tbf-filter-option:hover{
border:none !important;
box-shadow:none !important;
}
.tbf-container .tbf-filter-option input{
position:absolute !important;
opacity:0 !important;
pointer-events:none !important;
}
.tbf-container .tbf-filter-option .tbf-filter-chip{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding: 9px 12px !important;
border-radius:999px !important;
border:2px solid rgba(15, 62, 154, 0.10) !important;
background:#f7faff !important;
color: rgba(11, 43, 102, 0.9) !important;
font-weight:600 !important;
cursor:pointer !important;
}
.tbf-container .tbf-filter-chip-count{ opacity:.75 !important; font-weight:700 !important; }
.tbf-container .tbf-filter-option.is-active .tbf-filter-chip{
background: linear-gradient(90deg, #1c4a86, #2f5ea7) !important;
color:#ffffff !important;
border-color: transparent !important;
}
/* =========================================================
MINIMAL VIEW TOGGLE (ICON-ONLY) - MOBILE
- due icone piccole (card/list vs griglia)
========================================================= */
@media screen and (max-width: 900px){
.tbf-container .tbf-view-toggle{
justify-content: flex-end !important;
padding: 0 14px !important;
}
.tbf-container .tbf-view-toggle-buttons{ gap: 8px !important; }
.tbf-container .tbf-view-btn{
width: 42px !important;
height: 42px !important;
padding: 0 !important;
border-radius: 14px !important;
gap: 0 !important;
}
.tbf-container .tbf-view-btn svg{
width: 18px !important;
height: 18px !important;
display: block !important;
}
}
/* =========================================================
HOTFIX v14.3
- View toggle (Griglia/Card) sulla stessa linea del contatore (a destra)
- Bottoni più grandi, quadrati con radius, colori meno "blu acceso"
========================================================= */
.tbf-container .tbf-counter-line{
display:flex !important;
align-items:center !important;
justify-content: space-between !important;
gap: 12px !important;
padding-right: 14px !important;
}
.tbf-container .tbf-counter-left{
min-width: 0 !important;
}
.tbf-container .tbf-view-toggle,
.tbf-container .tbf-view-toggle-inline{
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
@media screen and (min-width: 901px){
.tbf-container .tbf-view-toggle,
.tbf-container .tbf-view-toggle-inline{ display: none !important; }
}
@media screen and (max-width: 900px){
/* su mobile il toggle deve essere visibile, ma senza "riga sua" */
.tbf-container .tbf-view-toggle,
.tbf-container .tbf-view-toggle-inline{
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.tbf-container .tbf-view-toggle-buttons{
display: inline-flex !important;
gap: 8px !important;
}
.tbf-container .tbf-view-btn{
all: unset !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* SOLO icona leggibile: bottone piccolo, niente "cerchio" pieno */
width: 30px !important;
height: 30px !important;
border-radius: 9px !important; /* quadrato elegante */
border: 1px solid rgba(11, 43, 102, 0.16) !important;
background: transparent !important;
color: rgba(11, 43, 102, 0.72) !important;
cursor: pointer !important;
box-shadow: none !important;
transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
}
.tbf-container .tbf-view-btn svg{
width: 20px !important;
height: 20px !important;
display: block !important;
}
.tbf-container .tbf-view-btn:hover{
background: rgba(255, 255, 255, 0.70) !important;
border-color: rgba(11, 43, 102, 0.18) !important;
}
.tbf-container .tbf-view-btn.active{
/* attivo: leggermente pieno, MA senza blu acceso */
background: rgba(238, 245, 255, 1) !important;
color: rgba(11, 43, 102, 0.96) !important;
border-color: rgba(11, 43, 102, 0.26) !important;
box-shadow: none !important;
}
}
/* Mobile: il contatore deve rimanere in linea, non "block" */
@media (max-width: 760px){
.tbf-container .tbf-counter-line{
display:flex !important;
align-items:center !important;
justify-content: space-between !important;
padding-left: 14px !important;
padding-right: 14px !important;
}
}
/* ======================================================================
HOTFIX v6.2.3 (UI): subtag avanzati + Ordina centrato + dropdown custom
====================================================================== */
/* 1) "Filtri avanzati · Casino": niente grassetto aggressivo e spacing garantito */
.tbf-container #tbf-open-advanced .tbf-subtag{
font-weight: inherit !important;
letter-spacing: 0 !important;
}
/* 2) Ordina: usa dropdown custom (il select resta solo come stato/fallback) */
.tbf-container .tbf-sort-select{
display: none !important;
}
.tbf-container .tbf-sort-pill{
position: relative !important;
display: block !important;
padding: 0 !important;
}
/* bottone che eredita lo stile della pill */
.tbf-container .tbf-sort-btn{
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 10px 12px !important;
cursor: pointer !important;
font: inherit !important;
color: inherit !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important; /* 🔥 centraggio orizzontale richiesto */
font-size: 14px !important;
}
.tbf-container .tbf-sort-center{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important; /* centra il gruppo, non solo il testo */
}
.tbf-container .tbf-sort-dot{
opacity: .75 !important;
}
.tbf-container .tbf-sort-chev{
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
opacity: .75 !important;
pointer-events: none !important;
}
/* 3) Dropdown menu professionale */
.tbf-container .tbf-sort-menu{
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: calc(100% + 10px) !important;
width: min(420px, calc(100vw - 28px)) !important;
background: rgba(255,255,255,.96) !important;
border: 2px solid var(--tbf-border2) !important;
border-radius: 18px !important;
box-shadow: 0 14px 30px rgba(15, 62, 154, 0.12) !important;
padding: 10px !important;
z-index: 9999 !important;
display: none !important;
backdrop-filter: blur(6px);
}
.tbf-container.tbf-sort-open .tbf-sort-menu{
display: block !important;
}
.tbf-container .tbf-sort-option{
all: unset !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 12px !important;
border-radius: 14px !important;
cursor: pointer !important;
font-weight: 500 !important;
color: var(--tbf-ink) !important;
font-size: 14px !important;
padding-bottom: 5px !important;
}
.tbf-container .tbf-sort-option:hover{
background: rgba(46,123,255,0.08) !important;
}
.tbf-container .tbf-sort-option.is-active{
background: rgba(46,123,255,0.12) !important;
}
.tbf-container .tbf-sort-option.is-active::before{
content: "✓";
font-weight: 900;
color: var(--tbf-brand-2);
}
/* mobile: stesso respiro delle altre pill */
@media (max-width: 760px){
.tbf-container .tbf-sort-btn{
padding: 12px 12px !important;
}
}
/* ===== Desktop: rimuovi pulsante "Filtri avanzati" (i filtri sono già a sinistra) ===== */
@media (min-width: 992px){
#tbf-open-advanced{ display:none !important; }
}
/* ===== Icone sidebar desktop: colorate per categoria ===== */
.tbf-container .tbf-df-title{
display:flex;
align-items:center;
gap:10px;
}
.tbf-container .tbf-df-ico-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
}
.tbf-container .tbf-df-ico{
width:18px;
height:18px;
color: currentColor;
}
/* SVG: icone "piene" (solid) + dettagli bianchi */
.tbf-container .tbf-df-ico .tbf-ico-fill{ fill: currentColor !important; stroke: none !important; }
.tbf-container .tbf-df-ico .tbf-ico-detail{ stroke: #ffffff !important; fill: none !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
/* Colori per gruppi (solo icona) */
.tbf-container .tbf-df-group[data-kind="bonus"] .tbf-df-ico-wrap{ color:#e39b1c; }
.tbf-container .tbf-df-group[data-kind="license"] .tbf-df-ico-wrap{ color:#2a63c9; }
.tbf-container .tbf-df-group[data-kind="acceptance"] .tbf-df-ico-wrap{ color:#16a34a; }
.tbf-container .tbf-df-group[data-kind="language"] .tbf-df-ico-wrap{ color:#7c3aed; }
.tbf-container .tbf-df-group[data-kind="payments"] .tbf-df-ico-wrap{ color:#0ea5e9; }
.tbf-container .tbf-df-group[data-kind="support"] .tbf-df-ico-wrap{ color:#f97316; }
/* Titolo testo resta come prima (non colorare tutto il blocco) */
.tbf-container .tbf-df-group .tbf-df-title-text{
color: var(--tbf-text) !important;
}
/* Desktop: rimuovi Filtri rapidi (ora in sidebar) */
@media (min-width: 980px){
#tbf-toggle-filters,
.tbf-toggle-filters.tbf-quick-btn{
display:none !important;
}
}
/* ======================================================================
POLISH DESKTOP (v6.4.3): layout come mockup (Ordina + ADM in sidebar)
====================================================================== */
@media (min-width: 992px){
/* Sidebar: niente "pannello unico", ma card separate */
.tbf-desktop-sidebar-inner{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.tbf-sidebar-topcard{
background: rgba(255,255,255,0.78) !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 18px !important;
padding: 14px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
margin-bottom: 14px !important;
}
/* Ordina (in alto a sinistra) */
.tbf-desktop-sidebar .tbf-sort-pill{
width: 100% !important;
margin: 0 0 12px !important;
border-radius: 14px !important;
}
.tbf-desktop-sidebar .tbf-sort-btn{
justify-content: flex-start !important;
padding-left: 12px !important;
}
.tbf-desktop-sidebar .tbf-sort-center{
justify-content: flex-start !important;
gap: 10px !important;
}
.tbf-desktop-sidebar .tbf-sort-icon{ display:none !important; }
.tbf-desktop-sidebar .tbf-sort-label{
font-weight: 800 !important;
color: var(--tbf-ink) !important;
}
.tbf-desktop-sidebar .tbf-sort-value{
font-weight: 800 !important;
color: var(--tbf-brand-2) !important;
}
.tbf-desktop-sidebar .tbf-sort-chev{
right: 12px !important;
}
/* Dropdown del sort: allineato alla sidebar (non centrato pagina) */
.tbf-desktop-sidebar .tbf-sort-menu{
left: 0 !important;
transform: none !important;
width: 100% !important;
}
/* Toggle ADM sotto Ordina */
.tbf-sidebar-topcard .tbf-filter-bar{
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.tbf-sidebar-topcard .tbf-filter-switch{
align-items: flex-start !important;
gap: 10px !important;
}
.tbf-sidebar-topcard .tbf-filter-text{
white-space: normal !important;
line-height: 1.25 !important;
font-weight: 800 !important;
}
.tbf-sidebar-topcard .tbf-geo-label{
margin: 8px 0 0 0 !important;
}
/* Gruppi filtri: card distinte + più respiro */
.tbf-df-group{
background: #ffffff;
border: 1px solid rgba(0,0,0,0.06) !important;
border-radius: 18px !important;
padding: 14px !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.06) !important;
margin-bottom: 14px !important;
}
.tbf-df-title{
font-size: 15px !important;
margin-bottom: 10px !important;
gap: 10px !important;
}
.tbf-df-ico-wrap{
width: 28px !important;
height: 28px !important;
border-radius: 12px !important;
}
/* Tinte per icon-box (simili al mockup) */
.tbf-df-group[data-kind="bonus"] .tbf-df-ico-wrap{ background: rgba(239,68,68,0.14) !important; color:#ef4444 !important; }
.tbf-df-group[data-kind="license"] .tbf-df-ico-wrap{ background: rgba(59,130,246,0.14) !important; color:#3b82f6 !important; }
.tbf-df-group[data-kind="language"] .tbf-df-ico-wrap{ background: rgba(16,185,129,0.14) !important; color:#10b981 !important; }
.tbf-df-group[data-kind="acceptance"] .tbf-df-ico-wrap{ background: rgba(34,197,94,0.14) !important; color:#16a34a !important; }
.tbf-df-group[data-kind="payments"] .tbf-df-ico-wrap{ background: rgba(14,165,233,0.14) !important; color:#0ea5e9 !important; }
.tbf-df-group[data-kind="support"] .tbf-df-ico-wrap{ background: rgba(124,58,237,0.14) !important; color:#7c3aed !important; }
/* Main: ricerca a sinistra, senza "box" esterno */
.tbf-desktop-main .tbf-controls{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
gap: 0 !important;
justify-content: flex-start !important;
margin: 0 0 12px !important;
}
.tbf-desktop-main .tbf-search-box{
width: min(820px, 100%) !important;
margin: 0 !important;
}
/* Contatore risultati nel main (colonna destra) */
.tbf-desktop-main .tbf-counter-line{
padding: 12px 14px !important;
margin: 0 0 12px !important;
border-radius: 18px !important;
border: 2px solid rgba(46,123,255,0.18) !important;
background: rgba(238,245,255,0.95) !important;
box-shadow: 0 12px 26px rgba(46,123,255,0.10) !important;
}
.tbf-desktop-main .tbf-counter-left{
font-size: 20px !important;
font-weight: 600 !important;
color: var(--tbf-ink) !important;
}
.tbf-desktop-main .tbf-counter-ico{
margin-right: 10px !important;
}
/* Chips attivi nel main, sotto il contatore */
.tbf-desktop-main .tbf-active-chips{
padding: 0 !important;
margin: 0 0 14px !important;
}
}
/* ===========================
Mobile: ADM toggle visibile e in stile card (nessun impatto desktop)
=========================== */
@media (max-width: 760px){
.tbf-container .tbf-controls .tbf-filter-bar{
margin: 0 !important;
padding: 8px 0px 0px 12px!important;
background: linear-gradient(90deg, #D9EEFF 0%, #FFFFFF 100%) !important;
border: 2px solid var(--tbf-border2) !important;
border-radius: 18px !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.08) !important;
width: 100% !important;
}
/* Ordine mobile come mock: Search -> ADM -> Filtri rapidi -> Avanzati -> Ordina */
.tbf-container .tbf-controls .tbf-filter-bar{ order: 0 !important; }
.tbf-container .tbf-controls > .tbf-search-box{ order: 1 !important; }
.tbf-container .tbf-controls > #tbf-toggle-filters{ order: 6 !important; }
.tbf-container .tbf-controls > #tbf-open-advanced{ order: 4 !important; }
.tbf-container .tbf-controls > .tbf-sort-pill{ order: 5 !important; }
/* Allinea la riga "Utente italiano" sotto il testo del toggle */
.tbf-container .tbf-controls .tbf-filter-bar .tbf-geo-label{
padding-left: 54px !important;
}
}
@media (max-width: 760px) {
.tbf-sort-pill {
display: none !important;
}
}
@media (max-width: 760px) {
.tbf-container .tbf-controls .tbf-sort-pill {
border-radius: 18px !important;
display: none !important;
}
}
/* DESKTOP: Sidebar filtri sticky + scroll interno (robusto) */
@media (min-width: 992px){
/* Se il tema mette overflow strano su wrapper interni, questo aiuta lo sticky */
.tbf-container,
.tbf-container .tbf-desktop-grid{
overflow: visible !important;
}
.tbf-desktop-sidebar{
display: block !important;
position: sticky !important;
top: calc(16px + var(--wp-admin--admin-bar--height, 0px)) !important; /* non si incolla sotto admin bar */
align-self: start !important;
height: max-content;
z-index: 5;
}
/* Se la sidebar è più alta del viewport: scroll interno */
.tbf-desktop-sidebar-inner{
max-height: calc(100vh - 32px - var(--wp-admin--admin-bar--height, 0px)) !important;
overflow: auto !important;
overscroll-behavior: contain;
}
}
@media (min-width: 992px){
.tbf-desktop-sidebar{
position: sticky !important;
top: 16px !important;
align-self: flex-start !important;
}
/* niente scrollbar interna */
.tbf-desktop-sidebar-inner{
max-height: none !important;
overflow: visible !important;
}
}
/* ===== Top 3: fix wrap testo bottoni (no sillabazione) ===== */
.tbf-top-featured .tbf-card-top .tbf-btn-text{
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
}
.tbf-top-featured .tbf-card-top .tbf-btn-cta,
.tbf-top-featured .tbf-card-top .tbf-btn-review{
padding: 10px 10px !important;
border-radius: 12px !important;
font-size: 0.92rem !important;
min-width: 0 !important;
}
.tbf-top-featured .tbf-card-top .tbf-summary-actions{
margin-top: auto !important;
}
/* Badge numero 1-2-3 sul logo (solo Top 3) */
.tbf-top-featured .tbf-card-top .tbf-summary-left{
position: relative !important;
}
.tbf-top-rank-badge{
position: absolute !important;
top: 10px !important;
left: 10px !important;
width: 34px !important;
height: 34px !important;
border-radius: 999px !important;
background: #FFC400 !important;
color: #000 !important;
font-weight: 800 !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 10px 22px rgba(0,0,0,0.28) !important;
z-index: 5 !important;
}
/* Nella top card il rank interno (vicino al titolo) non serve */
.tbf-top-featured .tbf-card-top .tbf-summary-top .tbf-rank{
display: none !important;
}
/* =========================================================
DESKTOP RESTYLE ADDON (v6.6.1)
Obiettivo:
- Desktop: layout tipo mock (logo a tutta altezza a sinistra, padding più puliti)
- Desktop: 'Dettagli' come link blu nella colonna azioni, niente footer grigio
- Mobile: comportamento IDENTICO al plugin originale (footer Dettagli sotto in list-view, niente Dettagli in compact-grid)
========================================================= */
/* Dettagli-link (default: nascosto, lo abilitiamo solo su desktop) */
.tbf-details-link{ display:none !important; }
/* Mobile/tablet: niente Dettagli nella colonna azioni, si usa il footer (list-view) */
@media (max-width: 900px){
.tbf-details-link{ display:none !important; }
}
/* Desktop */
@media (min-width: 901px){
/* Griglia card: logo flush a sinistra, niente “aria” sotto */
.tbf-card-summary{
grid-template-columns: 170px minmax(0,1fr) 230px !important;
gap: 0 !important;
padding: 0 !important;
align-items: stretch !important;
}
.tbf-summary-left{
height: auto !important;
border-radius: 18px 0 0 18px !important;
padding: 10px !important;
align-self: stretch !important;
}
.tbf-summary-left img{
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
}
.tbf-summary-middle{
padding: 18px 0px 18px 22px !important;
gap: 10px !important;
}
.tbf-summary-actions{
padding: 18px 22px 18px !important;
justify-content: flex-start !important;
gap: 10px !important;
}
/* Ordine contenuti: titolo -> bonus -> badge (tag pills nascoste su desktop) */
.tbf-summary-top{ order: 1 !important; }
.tbf-summary-bonus{ order: 2 !important; }
.tbf-summary-badges{ order: 3 !important; }
.tbf-summary-tags{ display:none !important; }
/* Bonus: niente pill su desktop */
.tbf-container .tbf-summary-bonus{
background: transparent !important;
border: 0 !important;
border-left: 0 !important;
padding: 0 !important;
margin: 6px 0 2px !important;
border-radius: 0 !important;
display: block !important;
}
.tbf-container .tbf-summary-bonus .tbf-bonus-amount{
display:block !important;
font-size: 2.25rem !important;
line-height: 1.05 !important;
font-weight: 800 !important;
color: #cd0a0a !important;
white-space: nowrap !important;
}
.tbf-card.tbf-card-collapsible .tbf-bonus-label{
display:block !important;
font-size: 1.25rem !important;
line-height: 1.15 !important;
font-weight: 800 !important;
color: #4a5677 !important;
}
/* Dettagli: link blu con chevron, in colonna azioni */
.tbf-details-link{
display:inline-flex !important;
align-items:center !important;
gap: 6px !important;
cursor:pointer !important;
color:#2a63c9 !important;
font-weight: 750 !important;
font-size: 13px !important;
padding: 6px 8px !important;
border-radius: 10px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.tbf-details-link:hover{
text-decoration: underline !important;
}
.tbf-details-link::after{
content:"";
width: 14px;
height: 14px;
display:inline-block;
background-repeat:no-repeat;
background-position:center;
background-size: 14px 14px;
opacity: 0.85;
transform: translateY(1px);
background-image: url('data:image/svg+xml;utf8,');
transition: transform 0.18s ease;
}
.tbf-card-open .tbf-details-link::after{
transform: translateY(1px) rotate(180deg);
}
/* Su desktop non vogliamo il footer grigio a fondo card */
.tbf-card-footer{ display:none !important; }
/* Dettagli: separatore solo quando aperti */
.tbf-card-details{ border-top: 1px solid rgba(9,30,66,0.08) !important; }
.tbf-card:not(.tbf-card-open) .tbf-card-details{ border-top: 0 !important; }
}
/* Top 3: mai mostrare Dettagli-link */
.tbf-card-top .tbf-details-link{ display:none !important; }
/* =========================================================
MOBILE LIST FINAL OVERRIDE (v6.6.8)
Fix definitivo richiesto:
- Vista LISTA = container SENZA .tbf-mobile-compact-grid
- Mobile: layout orizzontale come mock (logo full-height, contenuto pulito)
- Badge ADM/lingua/accettazione in basso
- Nasconde i tag tassonomia (es. "Bonus senza deposito")
- Bottoni compatti (e sotto i 420px diventano solo icone)
- "Dettagli" = solo testo + freccia (niente bottone/box)
- Nasconde il footer Dettagli (duplicato)
NOTE: questo blocco è messo in fondo al CSS per battere i vecchi override.
========================================================= */
@media (max-width: 900px){
/* Card: niente padding esterno (evita banda bianca sotto al logo) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card{
padding: 0 !important;
overflow: hidden !important;
margin: 0 !important;
min-height: 0 !important;
}
/* Layout a 3 colonne: logo | contenuto | azioni */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
display: grid !important;
grid-template-columns: 84px minmax(0,1fr) 86px !important;
gap: 10px !important;
padding: 0 !important;
align-items: stretch !important;
overflow: hidden !important;
}
/* Logo a tutta altezza */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
height: auto !important;
align-self: stretch !important;
border-radius: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left img{
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
display: block !important;
}
/* Colonna centrale: titolo -> bonus -> badges (in basso) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-middle{
padding: 7px 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-top{ order: 1 !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus{ order: 2 !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-badges{ order: 3 !important; margin-top: auto !important; }
/* Nascondi tag tassonomia (pill beige) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-tags{ display: none !important; }
/* Titolo più compatto */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-casino-name{
font-size: 15px !important;
line-height: 1.1 !important;
font-weight: 850 !important;
margin: 0 !important;
}
/* Bonus: niente box/contorni */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus{
background: transparent !important;
border: 0 !important;
border-left: 0 !important;
padding: 0 !important;
margin: 2px 0 2px !important;
border-radius: 0 !important;
display: block !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-amount{
display: block !important;
font-size: 24px !important;
line-height: 1.0 !important;
font-weight: 900 !important;
color: #cd0a0a !important;
white-space: nowrap !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-label{
display: block !important;
font-size: 12px !important;
line-height: 1.15 !important;
font-weight: 850 !important;
color: #4a5677 !important;
}
/* Badge più piccoli */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badges{ gap: 4px !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badge{
font-size: 9px !important;
padding: 3px 5px !important;
border-radius: 999px !important;
line-height: 1 !important;
}
/* Colonna azioni: bottoni compatti */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-actions{
padding: 6px 6px 6px 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 5px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-cta,
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-review{
width: 100% !important;
justify-content: center !important;
padding: 5px 6px !important;
border-radius: 10px !important;
font-size: 10px !important;
font-weight: 850 !important;
min-height: 28px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-icon{ width: 12px !important; height: 12px !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-icon svg{ width: 12px !important; height: 12px !important; }
/* Dettagli: testo + freccia (re-abilitato su mobile) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 0 !important;
margin-top: 2px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #2a63c9 !important;
font-weight: 850 !important;
font-size: 11px !important;
cursor: pointer !important;
width: auto !important;
align-self: flex-start !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link::after{
content:"";
width: 12px;
height: 12px;
display:inline-block;
background-repeat:no-repeat;
background-position:center;
background-size: 12px 12px;
opacity: 0.85;
transform: translateY(1px);
background-image: url('data:image/svg+xml;utf8,');
transition: transform 0.18s ease;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-open .tbf-details-link::after{
transform: translateY(1px) rotate(180deg);
}
/* Footer Dettagli sotto: disabilitato in list mobile (duplicato e aumenta l'altezza) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-footer{
display: none !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
}
/* Schermi molto piccoli: CTA solo icone (meno altezza) */
@media (max-width: 420px){
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
grid-template-columns: 80px minmax(0,1fr) 74px !important;
gap: 8px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-text{ display: none !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-cta,
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-review{
padding: 0 !important;
min-height: 32px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-actions{ gap: 5px !important; padding: 6px 6px 6px 0 !important; }
}
/* =========================================================
MOBILE LIST ULTRA-COMPACT PATCH (v6.6.10)
Obiettivo: ridurre ALTEZZA card e "ammucchiata"
- bottoni molto più piccoli (quadrati compatti)
- badge più piccoli
- elimina qualsiasi spazio residuo sotto al logo
========================================================= */
@media (max-width: 900px){
/* stringi la colonna azioni e riduci l'intera card */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
grid-template-columns: 102px minmax(0,1fr) 58px !important;
gap: 8px !important;
}
/* elimina qualunque padding/margine che crea "banda" sotto al logo */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card.tbf-card-collapsible{
padding: 0 !important;
overflow: hidden !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
padding: 0 !important;
margin: 0 !important;
align-items: stretch !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
margin: 0 !important;
padding: 0 !important;
align-self: stretch !important;
display: flex !important;
}
/* colonna centrale più stretta */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-middle{
padding: 6px 0 !important;
gap: 3px !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-casino-name{ font-size: 14px !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-amount{ font-size: 20px !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-bonus .tbf-bonus-label{ font-size: 11px !important; }
/* badge più piccoli */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badges{ gap: 3px !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-badge{
font-size: 7.5px !important;
padding: 2px 4px !important;
}
/* azioni: bottoni piccoli (solo icone) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-actions{
padding: 6px 6px 6px 0 !important;
gap: 6px !important;
align-items: stretch !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-text{ display:none !important; }
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-cta,
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-review{
padding: 0 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
width: 100% !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-icon,
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-btn-icon svg{
width: 16px !important;
height: 16px !important;
}
/* Dettagli: testo piccolo, NON bottone */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{
font-size: 10px !important;
margin-top: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link::after{
width: 12px !important;
height: 12px !important;
background-size: 12px 12px !important;
}
}
/* =========================================================
DESKTOP FIX v6.6.2
- elimina QUALSIASI spazio residuo sotto al logo (footer/dettagli chiusi)
- difesa contro override del tema che reimpostano display/padding del footer
========================================================= */
@media (min-width: 901px){
/* footer: zero assoluto (anche se il tema prova a rimetterlo) */
.tbf-card.tbf-card-collapsible > .tbf-card-footer{
display: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
}
/* dettagli chiusi: non devono occupare neanche 1px */
.tbf-card.tbf-card-collapsible:not(.tbf-card-open) > .tbf-card-details{
display: none !important;
max-height: 0 !important;
opacity: 0 !important;
border: 0 !important;
}
/* quando apri, torna visibile */
.tbf-card.tbf-card-collapsible.tbf-card-open > .tbf-card-details{
display: block !important;
}
}
/* =========================================================
PATCH v7.1 (2026-01-27) - FINAL OVERRIDE
Fix richiesti SOLO per MOBILE LISTA (container SENZA .tbf-mobile-compact-grid)
- elimina lo spazio sotto al logo
- ripristina scritte "Filtri rapidi" e "Filtri avanzati" nella toolbar
- sposta "Dettagli" un filo a sinistra (non attaccato al bordo)
========================================================= */
@media (max-width: 900px){
/* 1) Logo: sempre full-height rispetto alla riga della card */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card-summary{
align-items: stretch !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-summary-left{
height: auto !important;
min-height: 0 !important;
align-self: stretch !important;
}
/* 2) Toolbar filtri: riabilita etichette testo (solo qui) */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-text{
display: inline-flex !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-controls .tbf-btn-chev{
display: inline-flex !important;
}
/* 3) Dettagli: un po' di respiro dal bordo destro */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-details-link{
margin-right: 8px !important;
}
/* Extra: evita che la sezione dettagli "chiusa" lasci anche 1px di spazio */
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card:not(.tbf-card-open) > .tbf-card-details{
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card:not(.tbf-card-open) > .tbf-card-details .tbf-details-inner{
padding: 0 !important;
}
.tbf-container:not(.tbf-mobile-compact-grid) .tbf-card.tbf-card-open > .tbf-card-details .tbf-details-inner{
padding: 16px 24px 20px !important;
}
}
/* =========================================================
BONUS TYPE BADGE OVER LOGO (v6.6.11)
- Rettangolo in basso a destra sul logo
- Bordo radius SOLO a sinistra
- Colore diverso per tipo bonus (gift/rotate/card/cashback/crown/sparkles)
========================================================= */
.tbf-summary-left{ position: relative; }
.tbf-logo-bonus-badge{
position: absolute;
right: 0;
bottom: 8px;
z-index: 5;
padding: 5px 10px 5px 10px;
font-size: 11px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.2px;
border-radius: 999px 0 0 999px;
max-width: 96%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 10px 22px rgba(0,0,0,0.22);
pointer-events: none;
}
/* Colori per tipo */
.tbf-logo-bonus-badge.tbf-bonus-type-gift{
background: linear-gradient(135deg, #ff9800, #ff6f00);
color: #ffffff;
}
.tbf-logo-bonus-badge.tbf-bonus-type-rotate{
background: linear-gradient(135deg, #ffe600, #ffb300);
color: #121111;
}
.tbf-logo-bonus-badge.tbf-bonus-type-card{
background: linear-gradient(135deg, #0051d8, #00a2ff);
color: #ffffff;
}
.tbf-logo-bonus-badge.tbf-bonus-type-cashback{
background: linear-gradient(135deg, #00b894, #009170);
color: #ffffff;
}
.tbf-logo-bonus-badge.tbf-bonus-type-crown{
background: linear-gradient(135deg, #8e44ad, #5b2c83);
color: #ffffff;
}
.tbf-logo-bonus-badge.tbf-bonus-type-sparkles{
background: linear-gradient(135deg, #2a63c9, #00132c);
color: #ffffff;
}
@media (max-width: 900px){
.tbf-logo-bonus-badge{
bottom: 6px;
padding: 4px 9px;
font-size: 10px;
}
}
/* ============================
MOBILE LISTA: Filtri in 2 colonne + colori premium
(non tocca desktop, non tocca mobile griglia/card)
============================ */
@media (max-width: 760px){
/* MOBILE: controlli compatti e coerenti (card unica), bottoni filtri affiancati */
.tbf-container .tbf-controls{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 14px 14px !important;
border-radius: 20px !important;
background: #ffffff !important; /* niente giallo sotto */
border: 2px solid rgba(15, 62, 154, 0.12) !important;
box-shadow: 0 10px 26px rgba(15, 62, 154, 0.10) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Search full width */
.tbf-container .tbf-controls .tbf-search-box{
width: 100% !important;
min-width: 0 !important;
}
/* Riga filtri: 2 colonne */
.tbf-container .tbf-controls .tbf-filters-row{
display: flex !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced{
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
height: 46px !important;
border-radius: 14px !important;
/* più spazio a destra per la freccia, così non “morde” il testo */
padding: 10px 34px 10px 12px !important;
box-sizing: border-box !important;
font-size: 14px !important;
font-weight: 750 !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.70),
0 8px 16px rgba(15, 62, 154, 0.10) !important; /* 3D pulito */
}
/* evita che il testo spinga i bottoni fuori */
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-center{
min-width: 0 !important;
width: 100% !important;
justify-content: flex-start !important;
}
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-text{
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Ordina full width */
.tbf-container .tbf-controls .tbf-sort-pill{
width: 100% !important; justify-content: space-between !important;
border-radius: 14px !important;
padding: 10px 12px !important;
}
/* === Bonus (oro/arancione) === */
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters{
background: linear-gradient(180deg, rgba(255, 215, 140, 0.85), rgba(255, 165, 52, 0.70)) !important;
border: 1px solid rgba(255, 138, 0, 0.45) !important;
}
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters .tbf-btn-icon{ color:#ff8a00 !important; }
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters .tbf-btn-text{ color:#0b2b66 !important; }
/* === Casino (blu) === */
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced{
background: linear-gradient(180deg, rgba(205, 227, 255, 0.95), rgba(150, 196, 255, 0.75)) !important;
border: 1px solid rgba(15, 62, 154, 0.28) !important;
}
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced .tbf-btn-icon{ color:#0f3e9a !important; }
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced .tbf-btn-text{ color:#0b2b66 !important; }
/* micro: freccette più eleganti */
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-chev{
opacity: .75 !important;
}
/* freccia leggermente più interna */
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-chev{ right: 12px !important; }
}
/* =====================================================================
APP MODE (mobile)
- barra controlli sticky
- stato compatto quando scrolli
- non tocca desktop
===================================================================== */
@media (max-width: 760px){
.tbf-container .tbf-appbar{
position: sticky !important;
top: 10px !important;
z-index: 999 !important;
border-radius: 22px !important;
background: rgba(255,255,255,0.92) !important;
border: 1px solid rgba(15, 62, 154, 0.14) !important;
box-shadow: 0 18px 40px rgba(15, 62, 154, 0.14) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
overflow: hidden !important;
margin: 0 0 12px !important;
}
/* la “card” vera e propria diventa l'appbar, quindi togliamo box/shadow doppi */
.tbf-container .tbf-appbar .tbf-controls{
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
padding: 12px 12px !important;
border-radius: 0 !important;
}
.tbf-container .tbf-appbar .tbf-active-chips{
padding: 0 12px 10px !important;
margin: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.tbf-container .tbf-appbar .tbf-counter-line{
margin: 0 !important;
padding: 10px 12px 12px !important;
border-top: 1px solid rgba(15, 62, 154, 0.10) !important;
}
/* Contatore: evita a capo e abilita formato corto in mini */
.tbf-container .tbf-appbar .tbf-counter-left{
min-width: 0 !important;
white-space: nowrap !important;
}
.tbf-container .tbf-appbar .tbf-counter-long{ display: inline !important; }
.tbf-container .tbf-appbar .tbf-counter-short{ display: none !important; }
/* Mini actions: di default nascoste (appaiono solo in mini) */
.tbf-container .tbf-appbar .tbf-mini-actions{ display: none !important; }
/* Stato compatto */
.tbf-container.tbf-app-mini .tbf-appbar{
top: 8px !important;
box-shadow: 0 14px 34px rgba(15, 62, 154, 0.16) !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-controls{
padding: 10px 12px !important;
gap: 10px !important;
}
/* In mini: riduci altezza reale */
.tbf-container.tbf-app-mini .tbf-appbar .tbf-filter-bar{ display:none !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-filters-row{ display:none !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-active-chips{ display:none !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-mini-actions{ display:flex !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-counter-line{
padding: 8px 12px 10px !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-counter-long{ display: none !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-counter-short{ display: inline !important; }
.tbf-container.tbf-app-mini .tbf-appbar .tbf-sort-pill{
display: none !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-search-box{
border-width: 1px !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-search-input{
font-size: 14px !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-active-chips{
padding-bottom: 8px !important;
}
/* Mini "Filtri" button (app-like) */
.tbf-container .tbf-appbar .tbf-mini-actions{
width: 100% !important;
margin-top: 8px !important;
position: relative !important;
}
.tbf-container .tbf-appbar .tbf-mini-filters-btn{
width: 100% !important;
height: 40px !important;
border-radius: 14px !important;
border: 1px solid rgba(15, 62, 154, 0.18) !important;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(235,243,255,0.92)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 18px rgba(15, 62, 154, 0.10) !important;
color: #0b2b66 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 0 12px !important;
}
.tbf-container .tbf-appbar .tbf-mini-filters-badge{
margin-left: auto !important;
min-width: 22px !important;
height: 22px !important;
border-radius: 999px !important;
padding: 0 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 800 !important;
font-size: 12px !important;
background: #ff8a00 !important;
color: #fff !important;
box-shadow: 0 6px 12px rgba(255, 138, 0, 0.22) !important;
}
.tbf-container .tbf-appbar .tbf-mini-filters-menu{
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: calc(100% + 8px) !important;
background: rgba(255,255,255,0.98) !important;
border: 1px solid rgba(15, 62, 154, 0.16) !important;
border-radius: 16px !important;
box-shadow: 0 22px 46px rgba(15, 62, 154, 0.18) !important;
padding: 8px !important;
z-index: 1002 !important;
}
.tbf-container .tbf-appbar .tbf-mini-menu-item{
width: 100% !important;
height: 42px !important;
border-radius: 12px !important;
border: 0 !important;
background: #f3f7ff !important;
color: #0b2b66 !important;
font-weight: 700 !important;
text-align: left !important;
padding: 0 12px !important;
}
.tbf-container .tbf-appbar .tbf-mini-menu-item + .tbf-mini-menu-item{ margin-top: 8px !important; }
}
/* ============================
MOBILE: Bottoni filtri "premium"
- più compatti
- micro-luce sopra
- ombra più "material" + pressione al tap
============================ */
@media (max-width: 760px){
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced{
height: 44px !important;
border-radius: 13px !important;
font-size: 13px !important;
letter-spacing: 0.1px !important;
position: relative !important;
overflow: hidden !important;
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.78),
inset 0 -2px 0 rgba(0,0,0,0.08),
0 10px 18px rgba(15, 62, 154, 0.12) !important;
/* spazio riservato alla freccia: mai sopra il testo */
padding-right: 38px !important;
}
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters .tbf-btn-text,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced .tbf-btn-text{
min-width: 0 !important;
flex: 1 1 auto !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters .tbf-btn-chev,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced .tbf-btn-chev{
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
}
/* micro-luce: fa "premium" senza sembrare giocattolo */
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters::before,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 58%;
background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
pointer-events: none;
}
/* assicura che testo, icona e freccia stiano sopra la "luce" */
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-center,
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-text,
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-icon,
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-chev{
position: relative !important;
z-index: 1 !important;
}
/* stato premuto */
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters:active,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced:active{
transform: translateY(1px) !important;
filter: saturate(1.05) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.60),
inset 0 -1px 0 rgba(0,0,0,0.10),
0 6px 12px rgba(15, 62, 154, 0.10) !important;
}
/* focus accessibile ma discreto */
.tbf-container .tbf-controls .tbf-filters-row #tbf-toggle-filters:focus-visible,
.tbf-container .tbf-controls .tbf-filters-row #tbf-open-advanced:focus-visible{
outline: 2px solid rgba(15, 62, 154, 0.25) !important;
outline-offset: 2px !important;
}
}
/* =========================================================
MOBILE: Fix overlap freccia vs testo (v6.6.16)
La freccia (.tbf-btn-chev) è INLINE nel layout del bottone.
Quindi: niente "right:" (inutile senza position), ma flex con chevron a fine riga.
========================================================= */
@media (max-width: 760px){
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-center{
display: flex !important;
width: 100% !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 8px !important;
min-width: 0 !important;
}
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-text{
flex: 1 1 auto !important;
min-width: 0 !important;
padding-right: 6px !important; /* respiro prima della freccia */
}
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-chev{
margin-left: auto !important;
flex: 0 0 auto !important;
position: static !important; /* disattiva qualsiasi tentativo di posizionamento */
right: auto !important;
/* allineamento verticale della freccia */
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* se la freccia è SVG, elimina l'allineamento a baseline */
.tbf-container .tbf-controls .tbf-filters-row .tbf-btn-chev svg{
display: block !important;
}
}
/* === APP-GRADE MOBILE FILTER BUTTONS (ANTI OVERLAP, FINAL) === */
@media (max-width: 760px){
.tbf-container .tbf-controls #tbf-toggle-filters,
.tbf-container .tbf-controls #tbf-open-advanced{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
position:relative !important;
overflow:hidden !important;
padding:10px 36px 10px 12px !important;
}
.tbf-container .tbf-controls .tbf-btn-text{
flex:1 1 auto !important;
min-width:0 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.tbf-container .tbf-controls .tbf-btn-chev{
position:absolute !important;
right:12px !important;
top:50% !important;
transform:translateY(-50%) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
pointer-events:none !important;
}
.tbf-container .tbf-controls .tbf-btn-chev svg{display:block !important;}
}
/* ============================
APP MODE v6.6.22: Mini 🔍 overlay search (mobile)
============================ */
@media (max-width: 760px){
/* In mini nascondi la search box (diventa overlay quando si apre) */
.tbf-container.tbf-app-mini .tbf-appbar .tbf-search-box{
display: none !important;
}
/* Mini actions: riga compatta */
.tbf-container.tbf-app-mini .tbf-appbar .tbf-mini-actions{
display: flex !important;
margin-top: 0 !important;
}
.tbf-container .tbf-appbar .tbf-mini-toprow{
display:flex !important;
align-items:center !important;
gap:10px !important;
width:100% !important;
}
.tbf-container .tbf-appbar .tbf-mini-search-btn{
width:40px !important;
min-width:40px !important;
height:40px !important;
border-radius: 14px !important;
border: 1px solid rgba(15, 62, 154, 0.18) !important;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(235,243,255,0.92)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 10px 18px rgba(15, 62, 154, 0.10) !important;
color:#0f3e9a !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
}
.tbf-container .tbf-appbar .tbf-mini-search-btn:active{
transform: translateY(1px) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 12px rgba(15, 62, 154, 0.10) !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-mini-filters-btn{
flex:1 1 auto !important;
width:auto !important;
margin:0 !important;
}
/* Contatore compatto: non deve mai andare a capo */
.tbf-container.tbf-app-mini .tbf-appbar .tbf-counter-line{
display:flex !important;
align-items:center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 8px 12px 8px !important;
}
.tbf-container.tbf-app-mini .tbf-appbar .tbf-counter-line *{
white-space: nowrap !important;
}
/* Overlay search quando si apre */
.tbf-container.tbf-search-open .tbf-appbar .tbf-search-box{
display:flex !important;
position: fixed !important;
left: 12px !important;
right: 12px !important;
top: calc(var(--tbf-appbar-top, 72px) + 10px) !important;
z-index: 999999 !important;
box-shadow: 0 18px 44px rgba(15, 62, 154, 0.18) !important;
}
.tbf-container.tbf-search-open .tbf-appbar .tbf-search-input{
font-size: 15px !important;
}
.tbf-container .tbf-appbar .tbf-close-search-overlay{
width: 34px !important;
height: 34px !important;
border-radius: 12px !important;
border: 1px solid rgba(15, 62, 154, 0.18) !important;
background: rgba(255,255,255,0.96) !important;
color:#0f3e9a !important;
margin-left: 8px !important;
display: inline-flex;
align-items:center;
justify-content:center;
flex: 0 0 auto;
}
.tbf-search-backdrop{
position: fixed;
inset: 0;
z-index: 999998;
background: rgba(9, 20, 45, 0.38);
backdrop-filter: blur(4px);
}
}
/* ==========================================
HARD OFF: nessuno sticky/fixed (sicurezza)
========================================== */
.tbf-container .tbf-appbar,
.tbf-container .tbf-appbar.is-fixed{ position: static !important; top:auto !important; left:auto !important; right:auto !important; }
.tbf-container .tbf-appbar::before{ content:none !important; }
.tbf-container .tbf-mini-actions{ display:none !important; }
.tbf-container .tbf-appbar-spacer{ display:none !important; height:0 !important; }
/* === FIX: contatore risultati una sola volta + no wrap brutto === */
@media (max-width: 900px){
.tbf-container .tbf-counter-left{
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
.tbf-container .tbf-counter-long{
white-space: nowrap !important;
}
}
/* === HOTFIX v13: mobile list view - CTA sempre a destra === */
@media screen and (max-width: 900px) {
.tbf-container.tbf-mobile-list-view .tbf-card-summary{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 76px !important;
grid-template-areas: "middle actions" !important;
column-gap: 8px !important;
row-gap: 0 !important;
align-items: start !important;
padding: 10px 8px 8px calc(var(--tbf-list-logo-w, 96px) + var(--tbf-list-gap, 16px)) !important;
text-align: left !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-left{
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: var(--tbf-list-logo-w, 96px) !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-middle{
grid-area: middle !important;
min-width: 0 !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-actions{
grid-area: actions !important;
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
text-align: center !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-actions .tbf-btn-cta,
.tbf-container.tbf-mobile-list-view .tbf-summary-actions .tbf-btn-review{
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 8px 5px !important;
font-size: 0.68rem !important;
line-height: 1 !important;
border-radius: 7px !important;
white-space: nowrap !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-actions .tbf-btn-icon{
display: none !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-bonus,
.tbf-container.tbf-mobile-list-view .tbf-summary-tags,
.tbf-container.tbf-mobile-list-view .tbf-summary-badges{
width: auto !important;
max-width: 100% !important;
}
}
@media screen and (max-width: 370px) {
.tbf-container.tbf-mobile-list-view{
--tbf-list-logo-w: 88px;
--tbf-list-gap: 12px;
}
.tbf-container.tbf-mobile-list-view .tbf-card-summary{
grid-template-columns: minmax(0, 1fr) 70px !important;
padding-right: 7px !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-actions{
width: 70px !important;
min-width: 70px !important;
max-width: 70px !important;
}
.tbf-container.tbf-mobile-list-view .tbf-summary-actions .tbf-btn-cta,
.tbf-container.tbf-mobile-list-view .tbf-summary-actions .tbf-btn-review{
font-size: 0.64rem !important;
padding: 7px 4px !important;
}
}
/* =========================================================
FIX Top 3: centra orizzontalmente il contenuto testuale
SOLO nelle 3 card in evidenza. Non tocca logo, bottoni,
card lista e layout mobile.
========================================================= */
.tbf-top-featured .tbf-card-top .tbf-summary-middle{
text-align: center !important;
align-items: center !important;
}
.tbf-top-featured .tbf-card-top .tbf-summary-top,
.tbf-top-featured .tbf-card-top .tbf-summary-badges,
.tbf-top-featured .tbf-card-top .tbf-summary-tags,
.tbf-top-featured .tbf-card-top .tbf-summary-bonus{
width: 100% !important;
justify-content: center !important;
align-items: center !important;
}
.tbf-top-featured .tbf-card-top .tbf-badges{
justify-content: center !important;
}
.tbf-top-featured .tbf-card-top .tbf-tag-pill{
margin-left: 3px !important;
margin-right: 3px !important;
}
/* v16 - shortcode singolo: mostra realmente il bonus offerto dentro gli articoli */
.tbf-card-single-simple .tbf-single-simple-body {
background: linear-gradient(180deg, #dff0ff 0%, #cbe7ff 100%) !important;
border-radius: 18px !important;
}
.tbf-single-simple-brand {
font-size: 1.15rem !important;
line-height: 1.2 !important;
font-weight: 850 !important;
color: #0f2d5c !important;
text-align: center !important;
margin-bottom: 2px !important;
}
.tbf-card-single-simple .tbf-single-simple-amount {
color: #d60000 !important;
font-weight: 950 !important;
letter-spacing: -0.03em !important;
}
.tbf-card-single-simple .tbf-single-simple-subtitle {
color: #405071 !important;
font-weight: 850 !important;
max-width: 760px !important;
}
@media (max-width: 768px) {
.tbf-single-simple-brand {
font-size: 1rem !important;
}
.tbf-card-single-simple .tbf-single-simple-amount {
font-size: 2rem !important;
}
}