/* Make modal dialog full screen and centered */
.portfolio-modal .modal-dialog {
    max-width: 60dvw !important;
    margin: 5dvh auto !important;
    height: 90dvh !important;
}

/* Make modal content fill the entire viewport */
.portfolio-modal .modal-content {
    height: 90dvh !important;
    border: none !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Fix the header at the top */
.portfolio-modal .modal-header {
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1055 !important;
    background-color: white !important;
}

/* Make the modal body scrollable */
.portfolio-modal .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Smooth scrolling for modal content */
.portfolio-modal .modal-body {
    scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.portfolio-modal .modal-body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.portfolio-modal .modal-body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Mobile view: Full screen modals */
@media (max-width: 768px) {
    .portfolio-modal .modal-dialog {
        max-width: 100dvw !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    .portfolio-modal .modal-content {
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .portfolio-modal .modal-body {
        padding: 1.5rem !important;
    }
}