.legal-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 1001;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
transition: opacity 0.3s ease;
}


.legal-modal-overlay.show {
display: flex;
opacity: 1;
}

.legal-modal-content {
width: 95%;
max-width: 32rem;
max-height: 85vh;
background: #1a1f2e;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
overflow: hidden;
position: relative;
animation: legalModalSlideIn 0.3s ease-out;
backdrop-filter: blur(12px);
}

@keyframes legalModalSlideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.legal-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem;
border-radius: 50%;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}

.legal-modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: scale(1.1) rotate(90deg);
}

.legal-modal-body {
padding: 1.5rem;
overflow-y: auto;
max-height: 85vh;
}

.legal-content h1 {
font-size: 1.5rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
padding: 1.5rem 1.5rem 0 1.5rem;
}

@media (max-width: 640px) {
.legal-content h1 {
padding: 1rem 1rem 0 1rem;
margin-bottom: 1rem;
}
}

.legal-content h2 {
font-size: 1.1rem;
font-weight: 600;
color: white;
margin-top: 1.5rem;
margin-bottom: 1rem;
padding: 0 1.5rem;
}

@media (max-width: 640px) {
.legal-content h2 {
padding: 0 1rem;
}
}

.legal-content p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
line-height: 1.6;
padding: 0 1.5rem;
}

@media (max-width: 640px) {
.legal-content p {
padding: 0 1rem;
}
}

.legal-content ul {
list-style-type: disc;
padding-left: 3rem;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
.legal-content ul {
padding-left: 2rem;
}
}

.legal-content li {
margin-bottom: 0.5rem;
line-height: 1.6;
}

.legal-content .last-updated {
font-style: italic;
color: rgba(255, 255, 255, 0.5);
margin-top: 2rem;
}

.legal-content .divider {
border-top: 1px solid #2d3748;
margin: 2rem 0;
}

.legal-content::-webkit-scrollbar {
width: 6px;
}

.legal-content::-webkit-scrollbar-track {
background: transparent;
}

.legal-content::-webkit-scrollbar-thumb {
background-color: #2d3748;
border-radius: 20px;
}

.legal-content::-webkit-scrollbar-thumb:hover {
background-color: #4a5568;
}

/* hide default scrollbar on desktop */
.legal-modal-body::-webkit-scrollbar {
width: 6px;
}

.legal-modal-body::-webkit-scrollbar-track {
background: transparent;
}

.legal-modal-body::-webkit-scrollbar-thumb {
background-color: #2d3748;
border-radius: 20px;
}

.legal-modal-body::-webkit-scrollbar-thumb:hover {
background-color: #4a5568;
}

@media (max-width: 640px) {
#legal-modal.legal-modal-overlay {
padding: 0 !important;
align-items: flex-end !important;
}

#legal-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: legalModalSlideUp 0.3s ease-out !important;
transform: none !important;
left: 0 !important;
top: 0 !important;
position: fixed !important;
z-index: 9999 !important;
}

#legal-modal .legal-modal-body {
padding: 0 !important;
max-height: none !important;
height: 100vh !important;
overflow-y: auto !important;
}

#legal-modal .legal-content {
padding: 0 !important;
margin: 0 !important;
height: 100vh !important;
}
}

@keyframes legalModalSlideUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes legalModalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes legalModalFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}