.tfb-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 100000;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.tfb-modal-overlay.tfb-open {
display: flex;
}
.tfb-modal {
background: rgb(28, 36, 20);
width: 100%;
max-width: 480px;
height: 85vh;
max-height: 750px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.tfb-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 18px 10px;
flex-shrink: 0;
background: var(--t2);
}
.modal-nav-border {
height: 20px;
background: radial-gradient(circle at top, var(--t2) 20px, transparent 0);
background-size: 40px;
background-repeat: round;
margin-top: -1px;
}
.tfb-modal-title {
color: var(--l2);
font-size: 1rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.tfb-modal-close {
background: var(--t1);
border: none;
color: var(--l2);
border-radius: 50%;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: flex;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
padding: 10px;
}
.tfb-modal-close:hover {
background: var(--g2);
}
.tfb-modal-body {
flex: 1;
overflow: hidden;
}
.tfb-modal-close svg {
aspect-ratio: 1 / 1;
width: 100%;
height: 100%;
}
.tfb-iframe {
width: 100%;
height: 100%;
border: none;
}
body.tfb-modal-locked {
overflow: hidden;
}
@media (max-width:600px) {
.tfb-modal {
height: 100vh; }
}
@media (min-width:601px) {
.tfb-modal {
border-radius: 10px;
height: 90vh;
max-height: none;
}
.tfb-modal-overlay {
padding: 20px;
}
}