.boosts-display-desktop{
position:fixed;
top:96px;
right:24px;
z-index:50;
display:none;
}
@media(min-width:768px){
.boosts-display-desktop{
display:block;
}
}
.boosts-display-mobile{
position:fixed;
top:80px;
right:16px;
z-index:50;
display:block;
}
@media(min-width:768px){
.boosts-display-mobile{
display:none;
}
}
.boosts-button{
display:flex;
align-items:center;
gap:8px;
background:rgba(0,0,0,0.2);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
padding:8px 12px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
transition:all 0.2s ease;
cursor:pointer;
}
.boosts-button:hover{
background:rgba(0,0,0,0.3);
border-color:rgba(255,255,255,0.2);
}
.boosts-button-mobile{
display:flex;
align-items:center;
gap:6px;
background:rgba(0,0,0,0.3);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
border-radius:9999px;
padding:6px 10px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
transition:all 0.2s ease;
cursor:pointer;
}
.boosts-button-mobile:hover{
background:rgba(0,0,0,0.4);
border-color:rgba(255,255,255,0.2);
}
.boosts-icon{
width:16px;
height:16px;
color:#60a5fa;
transition:transform 0.2s ease;
}
.boosts-button:hover .boosts-icon{
transform:scale(1.1);
}
.boosts-icon-mobile{
width:14px;
height:14px;
color:#60a5fa;
transition:transform 0.2s ease;
}
.boosts-button-mobile:hover .boosts-icon-mobile{
transform:scale(1.1);
}
.boosts-balance{
font-size:14px;
font-weight:500;
color:rgba(255,255,255,0.9);
}
.boosts-label{
font-size:12px;
color:rgba(255,255,255,0.6);
}
.boosts-balance-mobile{
font-size:14px;
font-weight:500;
color:rgba(255,255,255,0.9);
}
.boosts-tooltip{
pointer-events:none;
position:absolute;
left:50%;
bottom:-32px;
transform:translateX(-50%);
white-space:nowrap;
font-size:11px;
color:rgba(255,255,255,0.9);
background:rgba(0,0,0,0.8);
border:1px solid rgba(255,255,255,0.1);
border-radius:4px;
padding:4px 8px;
opacity:0;
transition:opacity 0.2s ease;
}
.boosts-button:hover .boosts-tooltip,.boosts-button-mobile:hover .boosts-tooltip{
opacity:1;
}