/* /common/crop/crop-modal.css */
.crop-modal {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: rgba(0, 0, 0, 0.8);
    z-index: 9955;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.crop-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: min(90vw, 800px); /* Limit width to 90% of viewport or 800px */
    width: 100%;
    min-height: 200px; /* Ensure minimum height */
    max-height: calc(90vh - 100px); /* Account for padding and margins */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 20px auto; /* Center with auto horizontal margins */
    box-sizing: border-box;
}

.crop-modal-image-container {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    max-height: calc(60vh - 60px); /* Limit image height */
    overflow: hidden; /* Prevent image overflow */
}

.crop-modal-image-container img {
    max-width: 100%;
    max-height: calc(60vh - 60px); /* Constrain image height */
    object-fit: contain;
    display: block;
    margin: 0 auto; /* Center image */
}

.crop-modal-button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    width: 100%;
    flex-wrap: wrap; /* Allow buttons to wrap */
    padding: 10px 0; /* Add padding for spacing */
}

.crop-modal-button-container button {
    min-width: 100px; /* Ensure buttons have enough width */
    max-width: 200px; /* Limit button width */
    flex-grow: 0; /* Prevent buttons from stretching */
}

.crop-modal-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.crop-modal-image-container img {
    max-width: 100%;
    max-height: 60vh;
    height: auto;
}

.crop-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}