/* ============================================
    Bio Modal — Bootstrap 5 modal styling for personnel bio popup
    Used by OrrPersonnel.cshtml
    ============================================ */
/* Fix legacy .fade { opacity: 0 } in base.css overriding BS5 modal visibility */
.modal.fade.show {
    opacity: 1;
}

.modal-backdrop.fade.show {
    opacity: 0.5;
}

/* Override legacy CSS to restore BS5 modal-fullscreen behavior */
.bio-modal.modal {
    padding: 0 !important;
}

.bio-modal .modal-dialog.modal-fullscreen {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
}

.bio-modal .modal-content {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    text-align: left !important;
}

.bio-modal .modal-body {
    padding: 0 !important;
    position: relative;
}

    .bio-modal .modal-body > .section {
        margin: 0;
    }

        /* Restore tint-2 section background and padding inside the modal */
        .bio-modal .modal-body > .section.tint-2 {
            background-color: #ebe9e2 !important;
            padding: 1rem 0 !important;
            margin: 3rem 0 !important;
            min-height: 100%;
        }

    /* Force dark text and left alignment on bio content (override legacy white/center) */
    .bio-modal .modal-body .col-sm-7 .block,
    .bio-modal .modal-body .col-sm-7 .block * {
        color: #333 !important;
        text-align: left !important;
    }

        /* Heading color in the bio detail */
        .bio-modal .modal-body .col-sm-7 .block h3,
        .bio-modal .modal-body .col-sm-7 .block h3 a {
            color: #333447 !important;
        }

/* Large blue circled X close button */
.bio-modal button.btn-close.bio-modal-close,
.bio-modal .bio-modal-close.btn-close,
.bio-modal .bio-modal-close {
    position: absolute !important;
    top: 3rem !important;
    right: 3rem !important;
    z-index: 10 !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    min-height: 3rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 4px solid #0077c7 !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230077c7' stroke-width='2.5' stroke-linecap='round'%3e%3cline x1='4' y1='4' x2='12' y2='12'/%3e%3cline x1='12' y1='4' x2='4' y2='12'/%3e%3c/svg%3e") !important;
    background-position: center !important;
    background-size: 2.5rem auto !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease-in-out;
}

    .bio-modal button.btn-close.bio-modal-close:hover,
    .bio-modal .bio-modal-close.btn-close:hover,
    .bio-modal .bio-modal-close:hover {
        background-color: rgba(0, 119, 199, 0.1) !important;
        opacity: 1 !important;
    }

.bio-modal .btn-holder.btn-static {
    margin-top: 0px !important;
}