.gsl-modal[hidden] {
display: none;
}
.gsl-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.gsl-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
filter: blur(6px);
}
.gsl-modal__dialog {
position: relative;
width: calc(100% - 32px);
max-width: 720px;
max-height: 80vh;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
z-index: 1;
}
.gsl-modal__header {
display: flex;
align-items: center;
gap: 12px 16px;
}
.gsl-modal__title {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #0f172a;
flex: 1 1 auto;
min-width: 0;
}
.gsl-modal__close {
margin-left: auto;
border: none;
background: #f0f0f0;
width: 40px;
height: 40px;
border-radius: 999px;
font-size: 28px;
line-height: 1;
cursor: pointer;
color: var(--gsl-modal-close-color, #026cbc);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gsl-modal__content {
font-size: 15px;
color: #1f2937;
line-height: 1.6;
overflow: auto;
max-height: min(70vh, 520px);
position: relative;
}
.gsl-modal .popup-content {
background: transparent;
padding: 0;
max-width: none;
border-radius: 0;
}
.gsl-modal__content p:first-child {
margin-top: 0;
}
.gsl-modal__content p:last-child {
margin-bottom: 0;
}
body.gsl-modal-open {
overflow: hidden;
}
.gsl-modal__content::after {
content: '';
position: sticky;
left: 0;
right: 0;
bottom: 0;
height: 32px;
display: block;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
opacity: 0;
transition: opacity 0.2s ease;
}
.gsl-modal__dialog.is-scrollable .gsl-modal__content::after {
opacity: 1;
}
.gsl-modal__dialog.is-at-bottom .gsl-modal__content::after {
opacity: 0;
}