/*
|--------------------------------------------------------------------------
| Shared Media Images
|--------------------------------------------------------------------------
*/

.media-thumbnail-strip {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-width: 0;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 4px 2px 7px;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}


.media-thumbnail {
    position: relative;

    width: 75px;
    height: 75px;
    flex: 0 0 75px;

    overflow: hidden;

    border: 1px solid #d8dee5;
    border-radius: 8px;

    background: #f3f6f9;
}


.media-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.media-thumbnail-viewer {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.media-thumbnail-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 22px;

    padding: 0 7px;

    border: 0;
    border-radius: 4px;

    background: #c62828;
    color: #fff;

    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}


.media-thumbnail-remove:hover,
.media-thumbnail-remove:focus-visible {
    background: #a61f1f;
}


/*
|--------------------------------------------------------------------------
| Responsive Full-Image Viewer
|--------------------------------------------------------------------------
*/

.media-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 7000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(5, 12, 18, 0.88);
}


.media-image-viewer[hidden] {
    display: none;
}


.media-image-viewer-stage {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}


.media-image-viewer-image {
    display: block;

    width: auto;
    height: auto;

    max-width: min(1100px, 96vw);
    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

    background: #fff;

    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}


.media-image-viewer-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 7001;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 7px;

    background: rgba(198, 40, 40, 0.96);
    color: #fff;

    font-size: 30px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;
}


.media-image-viewer-close:hover,
.media-image-viewer-close:focus-visible {
    background: #a61f1f;
}


@media (max-width: 600px) {

    .media-image-viewer {
        padding:
            max(10px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }


    .media-image-viewer-image {
        max-width: 96vw;
        max-height: 86vh;

        border-radius: 6px;
    }

}