/* about-modal.css */
#aboutModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    justify-content: center;
    align-items: center;
}

#aboutModal .modal-content {
    /* Bootstrap's own .modal-content sets display:flex on pages that
       load bootstrap.min.css — see change_pin_modal.ejs for the full
       explanation. Same collision, same fix. */
    display: block;
    background: white;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

#aboutModal .about-content {
    margin: 20px 0;
}

#aboutModal .about-section {
    margin-bottom: 20px;
}

#aboutModal .about-section h3 {
    color: #2c3e50;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

#aboutModal .contact-info a {
    color: #0d6efd;
    text-decoration: none;
}

#aboutModal .contact-info a:hover {
    text-decoration: underline;
}

#aboutModal .btn-close-row {
    /* Same fix as change_pin_modal.ejs's .btn-close-row: a floated
       trailing button isn't reliably contained within .modal-content's
       bounds (it was still leaking past the right edge here even with
       overflow-y:auto). A flex wrapper can't render outside the modal
       regardless. */
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

#aboutModal .btn-close {
    /* Bootstrap's global .btn-close (its modal-dismiss "X" icon) sets
       width:1em; height:1em, and opacity:var(--bs-btn-close-opacity)
       (0.5, rising to 0.75 on :hover), all unscoped. This button
       reuses that class name but never declared any of the three, so
       it inherited Bootstrap's tiny, washed-out dismiss-icon styling
       on any page loading bootstrap.min.css. See change_pin_modal.ejs
       for the full explanation. */
    width: auto;
    height: auto;
    opacity: 1;
    background: #f44336;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

#aboutModal .btn-close:hover {
    opacity: 1;
    background: #e0342a;
}
.version-info {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin: 20px 0 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}