.boosts-modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.7);
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}
.boosts-modal.active{
opacity:1;
pointer-events:all;
}
.boosts-modal-content{
background:#1a1f2e;
border:1px solid rgba(74,158,255,0.3);
border-radius:16px;
width:90%;
max-width:500px;
max-height:85vh;
display:flex;
flex-direction:column;
transform:scale(0.9);
transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.boosts-modal.active .boosts-modal-content{
transform:scale(1);
}
@media(max-width:768px){
.boosts-modal{
align-items:flex-end;
padding:0;
}
.boosts-modal-content{
width:100%;
max-width:none;
height:100vh;
max-height:100vh;
border-radius:0;
border:none;
transform:translateY(100%);
}
.boosts-modal.active .boosts-modal-content{
transform:translateY(0);
}
}
.boosts-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:24px;
border-bottom:1px solid rgba(255,255,255,0.1);
}
.boosts-modal-title-wrapper{
display:flex;
align-items:center;
gap:12px;
}
.boosts-modal-icon-wrapper{
width:32px;
height:32px;
background:rgba(59,130,246,0.2);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.boosts-modal-icon{
width:16px;
height:16px;
color:#60a5fa;
}
.boosts-modal-title{
font-size:20px;
font-weight:700;
color:#fff;
margin:0;
}
.boosts-modal-close{
padding:8px;
background:transparent;
border:none;
border-radius:50%;
cursor:pointer;
transition:background 0.2s ease;
color:rgba(255,255,255,0.7);
font-size:24px;
display:flex;
align-items:center;
justify-content:center;
}
.boosts-modal-close:hover{
background:rgba(255,255,255,0.1);
}
.boosts-modal-body{
overflow-y:auto;
padding:24px;
flex:1;
}
.boosts-modal-body::-webkit-scrollbar{
width:8px;
}
.boosts-modal-body::-webkit-scrollbar-track{
background:rgba(255,255,255,0.05);
border-radius:4px;
}
.boosts-modal-body::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.2);
border-radius:4px;
}
.boosts-modal-body::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,0.3);
}
.boosts-modal-description{
text-align:center;
margin-bottom:24px;
}
.boosts-modal-description p{
color:rgba(255,255,255,0.9);
line-height:1.6;
margin:0;
}
.boosts-modal-section{
margin-bottom:24px;
}
.boosts-modal-section-title{
font-size:18px;
font-weight:600;
color:#fff;
display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
}
.boosts-modal-section-title i{
color:#10b981;
}
.boosts-modal-section-title i.bi-eye{
color:#fbbf24;
}
.boosts-modal-section-title i.bi-fire{
color:#fb923c;
}
.boosts-modal-section-title i.bi-gift{
color:#ec4899;
}
.boosts-modal-section-title i.bi-shield-check{
color:#ef4444;
}
.boosts-modal-subtitle{
font-size:14px;
color:rgba(255,255,255,0.5);
font-weight:400;
}
.boosts-modal-section-desc{
color:rgba(255,255,255,0.7);
font-size:14px;
margin-bottom:12px;
}
.boosts-modal-quest-list{
display:flex;
flex-direction:column;
gap:8px;
}
.boosts-modal-quest-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px;
background:rgba(255,255,255,0.05);
border-radius:6px;
font-size:14px;
color:rgba(255,255,255,0.7);
}
.boosts-modal-quest-bonus{
background:rgba(16,185,129,0.1);
border:1px solid rgba(16,185,129,0.2);
}
.boosts-modal-reward{
color:#10b981;
font-weight:500;
}
.boosts-modal-reward-bonus{
color:#10b981;
font-weight:700;
}
.boosts-modal-bullet-list{
display:flex;
flex-direction:column;
gap:8px;
}
.boosts-modal-bullet-item{
display:flex;
align-items:center;
gap:8px;
color:rgba(255,255,255,0.7);
font-size:14px;
}
.boosts-modal-bullet{
width:6px;
height:6px;
background:rgba(255,255,255,0.4);
border-radius:50%;
flex-shrink:0;
}
.boosts-modal-bullet-red{
width:6px;
height:6px;
background:#ef4444;
border-radius:50%;
flex-shrink:0;
}
.boosts-modal-coming-soon{
color:rgba(255,255,255,0.5);
}
.boosts-modal-badge{
font-size:12px;
color:#60a5fa;
}
.boosts-modal-tax{
color:#ef4444;
font-weight:500;
}
.boosts-modal-message{
background:rgba(59,130,246,0.1);
border:1px solid rgba(59,130,246,0.2);
border-radius:8px;
padding:16px;
text-align:center;
}
.boosts-modal-message p{
color:#60a5fa;
font-weight:500;
margin:0;
}
.boosts-modal-footer{
padding:24px;
border-top:1px solid rgba(255,255,255,0.1);
}
.boosts-modal-button{
width:100%;
padding:12px 16px;
background:#3b82f6;
color:#fff;
border:none;
border-radius:8px;
font-size:16px;
font-weight:500;
cursor:pointer;
transition:background 0.2s ease;
}
.boosts-modal-button:hover{
background:#2563eb;
}