/* styling/welcome.css */
/* Popup-overlay met invoerveld bij het openen van de site */

/* Donkere achtergrond over de hele pagina */
#welcome-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* De witte popup-box in het midden */
#welcome-box {
    background: #fff;
    padding: 28px;
    border-radius: 12px;
    width: min(520px, 92%);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Titel en tekst in de popup */
#welcome-box h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
}

#welcome-box p {
    margin: 0 0 12px;
    color: #333;
}

/* Tekstvak voor naam-invoer */
#welcome-box input#username {
    width: 85%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 12px;
}

/* Knop onder het invoerveld */
#welcome-box .buttons { margin-top: 6px; }

#continue-btn {
    padding: 9px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: #0078D7;
    color: white;
    font-weight: 600;
}

#continue-btn:hover { filter: brightness(0.95); }

/* Overlay verbergen (JS zet aria-hidden="true") */
#welcome-overlay[aria-hidden="true"] {
    display: none;
}