/**
 * Page-specific styles for /vacancies only. Loaded via $pageCss in
 * app/pages/vacancies.php.
 *
 * The Apply modal's form is long (12+ fields), so on shorter viewports
 * it was overflowing past the top/bottom of the screen. Cap it at 80vh
 * and let the modal body scroll internally instead.
 */
#Apply .modal-dialog {
    max-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
}

#Apply .modal-content {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

/*
 * The close button (.light_box_close_button, custome.css) is
 * deliberately positioned outside the box via a negative offset. It
 * used to live inside .modal-content, which meant it got clipped/
 * caused a horizontal scrollbar once that box became overflow:auto
 * for the tall form. Moved to be a sibling of .modal-content (see
 * vacancies.php) so it's anchored to .modal-dialog instead - outside
 * the scrolling box, always visible, and no longer contributing to
 * .modal-content's scrollable area.
 */
#Apply .modal-dialog > .light_box_close_button {
    z-index: 10;
}

@media (max-width: 767px) {
    #Apply .modal-content {
        max-height: 85vh;
    }
}