.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* 
.modal-content {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
} */

.modal-content h2 {
    margin-bottom: 20px;
}

.role-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 30px;
}
#switchRoleBtn .btn {
    -webkit-animation: pulse 2s infinite;
            animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); }
    70% { -webkit-box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); }
    100% { -webkit-box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}

@keyframes pulse {
    0% { -webkit-box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); }
    70% { -webkit-box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); box-shadow: 0 0 0 10px rgba(13, 110, 253, 0); }
    100% { -webkit-box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
}


/* Shift the fixed header down by the bar height dynamically */
:root { --waitlist-bar-h: 44px; } /* adjust if your bar is taller */
#header.header.fixed-top { top: var(--waitlist-bar-h); }

/* Optional: make spacing a touch larger on small screens */
@media (max-width: 575.98px) {
  :root { --waitlist-bar-h: 56px; }
}
.waitlist-bar {
  background: #09b850;          /* dark bar background */
  color: #000;
  z-index: 1060;
  border-bottom: 1px solid #28a745; /* nice green bottom border */
}