.image-container {
    max-width: 500px;
    width: 100%;
    border: solid;
    border-width: 1px;
    border-color: dimgray;
    overflow: visible; 
    padding: 15px 15px 60px 15px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    position: relative; 
}

/* Style for cropped image */
.photostyle {
    max-width: 240px;
    max-height: 320px;
    border: 1px solid #ccc;
    object-fit: contain; /* Ensure image maintains aspect ratio */
    background-color: white; /* Ensure background is white for transparent images */
}

/* Image display within container */
#crop-image {
    max-width: 100%;
    max-height: 350px; 
    display: block;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast; /* Improve image sharpness on webkit browsers */
    image-rendering: crisp-edges; /* Improve image sharpness on Firefox */
    overflow: hidden; /* Contain the image */
}

/* Cropped image display */
#cropped-image {
    display: block;
    margin: 0 auto;
    background-color: white;
}

.jcrop-holder img {
    max-width: none !important; /* Override any max-width to prevent resizing */
    max-height: none !important; /* Override any max-height to prevent resizing */
    image-rendering: -webkit-optimize-contrast !important; /* Improve image sharpness on webkit browsers */
    image-rendering: crisp-edges !important; /* Improve image sharpness on Firefox */
}

/* Add container for crop image to contain it properly */
.crop-image-wrapper {
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}

/* Make the JCrop container responsive within the image-container */
.jcrop-holder {
    max-width: 100%;
    margin: 0 auto;
    background-color: white !important; /* Make background white, not black */
    margin-bottom: 60px !important; /* Ensure space for buttons below JCrop */
    overflow: visible !important; /* Allow crop handles and UI elements to be visible */
}

/* Ensure buttons are always visible */
#crop-button, #recrop-button {
    display: inline-block !important;
    margin-top: 15px;
    visibility: visible !important;
    position: relative;
    z-index: 1000; /* Ensure buttons appear above other elements */
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Additional button container class */
.button-container {
    position: relative !important;
}

/* Button container styling */
.text-center.mt-3 {
    margin-top: 1rem !important;
    min-height: 50px; /* Minimum height to ensure visibility */
    position: absolute; /* Position absolute instead of relative */
    bottom: 10px; /* Position at the bottom of the container */
    left: 0;
    width: 100%;
    z-index: 1000; /* Higher z-index to ensure visibility */
}

/* Ensure crop container properly centers content */
#crop-container, #existing-photo-container {
    text-align: center;
}

/* Fix for JCrop tracker handles positioning */
.jcrop-tracker {
    background: none !important;
}

/* Style for the crop image container */
.jcrop-holder div {
    border-radius: 0; /* Reset border radius */
}

/* Improve visibility of the crop selection handles */
.jcrop-handle {
    width: 10px !important;
    height: 10px !important;
    border: 1px solid #eee !important;
    background-color: #333 !important;
    opacity: 0.8 !important;
}

/* Make crop selection more visible */
.jcrop-selection {
    border: 2px solid #fff !important;
}