#help-modal{
display:none;
}
#help-modal.show{
display:flex;
}
#help-modal .legal-modal-body{
max-height:calc(85vh - 80px);
overflow-y:auto;
}
.help-modal-header{
background:linear-gradient(135deg,rgba(16,185,129,0.15) 0%,rgba(5,150,105,0.15) 100%);
border-bottom:1px solid rgba(16,185,129,0.3);
padding:20px 24px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
}
.help-header-content{
display:flex;
align-items:center;
gap:12px;
flex:1;
}
.help-header-icon{
font-size:24px;
color:#10b981;
animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-4px);
}
}
.help-modal-header h2{
margin:0;
font-size:18px;
font-weight:600;
color:white;
}
.help-modal-header .legal-modal-close{
position:relative;
top:auto;
right:auto;
width:36px;
height:36px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.2);
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.help-modal-header .legal-modal-close svg{
width:18px;
height:18px;
stroke-width:2.5;
}
.help-modal-header .legal-modal-close:hover{
background:rgba(239,68,68,0.2);
border-color:rgba(239,68,68,0.4);
}
.help-modal-header .legal-modal-close:hover svg{
stroke:#ef4444;
}
.help-section{
margin-bottom:24px;
padding:20px;
background:rgba(255,255,255,0.03);
border-radius:8px;
border:1px solid rgba(255,255,255,0.08);
}
.help-section-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px;
}
.help-number{
width:32px;
height:32px;
background:rgba(16,185,129,0.2);
color:#10b981;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
flex-shrink:0;
}
.help-section-header h3{
margin:0;
font-size:16px;
font-weight:600;
color:white;
}
.help-list{
list-style:none;
padding:0;
margin:0;
}
.help-list li{
padding:8px 0 8px 24px;
color:rgba(255,255,255,0.85);
font-size:14px;
line-height:1.6;
position:relative;
}
.help-list li::before{
content:'→';
position:absolute;
left:0;
color:#10b981;
font-weight:700;
}
.help-list li strong{
color:#10b981;
font-weight:600;
}
.help-note{
padding:16px 20px;
background:rgba(59,130,246,0.1);
border-radius:8px;
border-left:3px solid #3b82f6;
display:flex;
align-items:flex-start;
gap:12px;
margin-top:24px;
}
.help-note i{
font-size:20px;
color:#3b82f6;
flex-shrink:0;
margin-top:2px;
}
.help-note p{
margin:0;
color:rgba(255,255,255,0.9);
font-size:14px;
line-height:1.6;
}
@media(max-width:640px){
#help-modal.legal-modal-overlay{
padding:0 !important;
align-items:flex-end !important;
}
#help-modal .legal-modal-content{
width:100vw !important;
max-width:none !important;
max-height:none !important;
height:100vh !important;
border-radius:0 !important;
border:none !important;
box-shadow:none !important;
animation:helpModalSlideUp 0.3s ease-out !important;
transform:none !important;
left:0 !important;
top:0 !important;
position:fixed !important;
z-index:9999 !important;
}
#help-modal .legal-modal-body{
max-height:calc(100vh - 80px) !important;
overflow-y:auto !important;
}
.help-modal-header{
padding:16px 20px;
}
.help-modal-header h2{
font-size:16px;
}
.help-header-icon{
font-size:20px;
}
.help-section{
padding:16px;
}
}
@keyframes helpModalSlideUp{
from{
transform:translateY(100%);
}
to{
transform:translateY(0);
}
}