.full-image {
    display: block;
    position: relative;
    flex: 1;
    height: auto;
    min-height: 100vh;
    text-align: center;
    overflow: visible;
    /* Ensure image area takes remaining space after left panel */
    min-width: 0;
}

.full-image figure {
/*    display: inline;*/
    margin: 0;
/*    height: 100%;*/
}

    .full-image .modal-image, .full-image .modal-video {
        display: inline-block;
        width: auto;
        height: auto;
        max-height: 90vh;
        max-width: 90vw;
        margin: 20px;
        vertical-align: middle;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    }

.modal-video.video-placeholder {
    width: calc(100vw - 450px);
    max-width: 1200px;
    min-width: 400px;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: visible;
}

#previewModal .modal-dialog {
    max-width: 100% !important;
    width: 100%;
    height: 100vh;
    margin: 0;
    /* Override modal-dialog-centered to position at top */
    align-items: flex-start;
}

#previewModal .modal-dialog.modal-dialog-centered {
    min-height: 100vh;
    align-items: stretch;
}

#previewModal .modal-content.preview-modal-content,
#previewModal .modal-content {
    background-color: transparent;
    display: flex !important;
    flex-direction: row !important;
    pointer-events: none;
    border: none;
    width: 100%;
    height: auto;
    overflow: visible;
}

#previewModal .modal-content.preview-modal-content > *,
#previewModal .modal-content > * {
    pointer-events: auto;
}

#previewModal .modal {
    padding-left: 0 !important;
}

/* Ensure preview modal fills viewport and scrolls as whole page */
#previewModal {
    padding: 0 !important;
    overflow: hidden auto !important;
    overflow-y: auto !important;
}

#previewModal.modal {
    top: 0;
    left: 0;
}

/* Make previewModal a flex container for left-panel and modal-dialog */
/* Use higher specificity to override Bootstrap's .modal.show { display: block !important } */
.modal#previewModal.show,
#previewModal.modal.show {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
}

.modal#previewModal.show > .modal-dialog,
#previewModal.modal.show > .modal-dialog {
    flex: 1;
    margin: 0;
    max-width: none;
    width: auto;
    height: auto;
    overflow: visible;
}

    #previewModal .img-container > * {
        pointer-events: all;
    }

.left-panel {
    background-color: white;
    width: 400px;
    min-width: 400px;
    height: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-sizing: border-box;
}

.left-panel-bg {
    position: absolute;
    background-color: white;
    width: 400px;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

.img-container {
    position: relative;
}

    .img-container > .inline-img {
        display: inline;
    }

.modal-image-loading {
    position: absolute;
    top: 50%;
    left: 50%;
}

.modal-navbtn {
    position: absolute;
    border: none;
    height: 100%;
    width: 20%;
    top: 0; /* was 40% */
}

.modal-navbtn:focus {
    outline: 0;
}

.modal-navbtn-prev {
    left: 0;
    background: url(../img/prev.png) left 50% no-repeat;
}

.modal-navbtn-next {
    right: 0;
    background: url(../img/next.png) right 50% no-repeat;
}

.modal-btn-close {
    position: fixed;
    top: 20px;
    /* Center on image area: left panel is 400px, so center of remaining space */
    left: calc(400px + (100vw - 400px) / 2);
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border: none;
    z-index: 1060;
    background: url(../img/close.png) center no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

/* On mobile, left panel is hidden so center on full width */
@media (max-width: 750px) {
    .modal-btn-close {
        left: 50%;
        top: 10px;
    }
}

.modal-info {
    width: 400px;
    height: auto;
    overflow: visible;
    border-right: 1px solid #dee2e6;
    box-sizing: border-box;
    padding-bottom: 60px;
}

.modal-meta {
    margin: 15px; /* was 10px */
}

.modal-info-item {
    margin-top: 10px;
    display: table;
}

.modal-info-item > a {
    text-align: justify;
    word-break: break-all;
}

.modal-info-item h6 {
    white-space: nowrap;
    padding-right: 10px;
}

.modal-info-item > div, .modal-info-item > a {
    display: table-cell;
}

.modal-info-item {
    overflow: hidden;
    display: block;
}

.preview-footer {
    bottom: 0;
    display: block;
}

.h6, h6 {
    font-size: 1.4rem;
    font-family: 'Roboto Regular', sans-serif;
    display: table-caption;
    margin: inherit;
}

.modal-buttons {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-buttons .btn {
    margin: 0;
    width: 100%;
    border-radius: 0;
    padding: 10px 15px;
    font-weight: 500;
    text-align: center;
    border: none;
    border-left: 4px solid #0069d9;
}

.modal-btn-download {
    background-color: #6c757d !important;
    color: #fff !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.modal-btn-download:hover {
    background-color: #5a6268 !important;
}

.modal-btn-copyright {
    background-color: #007bff !important;
    color: #fff !important;
}

.modal-btn-copyright:hover {
    background-color: #0056b3 !important;
}

.sharethis-inline-share-buttons {
    margin: 10%
}

.modal-image-number {
    text-align: center;
    font-weight: bolder;
    padding-bottom: 10px;
}

@media (max-width: 750px) {
    .full-image {
        overflow: hidden;
        max-width: 100vw;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .full-image .modal-image, .full-image .modal-video {
        max-width: calc(100vw - 80px) !important;
        max-height: 80vh !important;
        width: auto !important;
        height: auto !important;
    }

    .bottom-panel {
        max-width: 750px;
        pointer-events: none !important;
    }

    .modal-navbtn {
        position: fixed !important;
        width: 40px !important;
        height: 60px !important;
        top: 50% !important;
        transform: translateY(-50%);
        z-index: 1100 !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
    }

    .modal-navbtn-prev {
        left: 5px !important;
        background-position: center !important;
    }

    .modal-navbtn-next {
        right: 5px !important;
        background-position: center !important;
    }

    .left-panel,
    .left-panel-helper,
    .left-panel-bg {
        width: 0;
        height: 0;
        display: none;
    }

    .modal-info {
        border: none;
        max-width: 400px;
        width: auto;
        margin: 20px auto;
        display: block;
        background-color: white;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 0.3rem;
        outline: 0;
        pointer-events: all !important;
        text-align: left;
        text-align: -webkit-left;
    }

    #previewModal {
        padding-right: 0 !important;
    }

    #previewModal .modal-content {
        flex-direction: column !important;
    }

    .img-container {
        position: relative;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-buttons {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 1099;
    }

    .nav-buttons .modal-navbtn {
        pointer-events: all;
    }
}

.modal-backdrop.show {
    opacity: 0.75 !important;
}

/* Nested modals should appear above the preview modal and backdrop */
#downloadModal, #copyrightModal {
    z-index: 1070 !important;
}

#downloadModal .modal-dialog, #copyrightModal .modal-dialog {
    z-index: 1071 !important;
}

#downloadModal .modal-content, #copyrightModal .modal-content {
    z-index: 1072 !important;
    position: relative;
}

/* Ensure backdrop for nested modals appears below the modal */
.nested-modal-backdrop {
    z-index: 1055 !important;
}

.bag-item {
    box-sizing: border-box;
    white-space: nowrap;
    border-radius: 0em;
    padding: 0.12em 0.4em 0.14em;
    margin: 0 0.5em 0 0;
    text-align: center;
    color: #ffffff;
    font-size: 1em;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
    position: relative;
    top: -0.15em;
    background-color: #999999;
}

.bag-item.color-blue { background-color: #1D3557; }
 
 
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Allow preview modal to scroll when content is taller than viewport */
.modal-open #previewModal.modal {
    overflow-y: auto !important;
}

/* Prevent body scroll when preview modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Also prevent html scroll */
html:has(body.modal-open) {
    overflow: hidden !important;
}

.modal-footer {
    margin-left: 15px;
    margin-right: 15px;
}

#downloadModal .modal-footer {
    height: auto;
}

.modal-download-img{
        max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}
.modal-download-img-container {
    min-width: 150px;
    max-width: 150px;
    min-height: 100px;
    max-height: 100px;
    overflow: hidden;
}

.bag-item.color-blue {
    background-color: #6f9ad1;
}

    .bag-item.color-red { background-color: #d37c7c; }

    .bag-item.color-green { background-color: #9bc268; }

    .bag-item.color-orange { background-color: #dea154; }

    .bag-item.color-yellow { background-color: #e9d641; }

    .bag-item.color-purple { background-color: #9f83d1; }

    .bag-item > a { 
        color: white; 
        text-decoration: none;
        }

@supports (-webkit-overflow-scrolling: touch) {
    .modal-open {
        position: fixed;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 0;
    }

        .modal-open .modal-dialog {
            position: fixed;
            height: 100%;
            pointer-events: all;
            width: calc(100vw - 14px);
        }

    .full-image {
        max-height: 100vh;
        height: 100vh;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        z-index: 5000;
    }
}

/* Disabled-style button for download (keeps button clickable to show warning) */
.btn-disabled-style {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: auto;
}