/* Overlay stays full screen but centers the box */
    .alert-container {
        position: fixed;
        inset: 0; /* Shorthand for top/bottom/left/right: 0 */
        background-color: rgba(0, 0, 0, 0.7); 
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        padding: 40px; /* Space around the popup on small screens */
    }

    /* The actual "Small" Popup Box */
    .alert-wrapper {
        position: relative;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        
        /* THE FIX: Rigidly control the size */
        width: 100%;
        max-width: 450px;    /* Standard popup width */
        max-height: 80vh;    /* Limits height to 80% of screen */
        
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .alert-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f4f4f4; /* Subtle background if image is smaller */
    }

    .alert-img {
        max-width: 100%;
        max-height: 70vh; /* Ensures image doesn't push the box too tall */
        object-fit: contain; /* Keeps aspect ratio without cropping */
        display: block;
    }

    /* Close Button - positioned in corner */
    .alert-button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 11;
        cursor: pointer;
        width: 32px;
        height: 32px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }

    .close-btn-line {
        width: 16px;
        height: 2px;
        background-color: #333;
        position: absolute;
    }
    .is--1st { transform: rotate(45deg); }
    .is--2nd { transform: rotate(-45deg); }