#upload-area-ic.drag-over {
    border-color: #2ecc71;
    /* Tailwind secondary color */
    background-color: rgba(46, 204, 113, 0.05);
}

.image-container-ic {
    max-width: 100%;
    /* Ensure it doesn't overflow its parent */
    /* Max height can be useful to prevent overly tall images from taking too much space */
    max-height: 60vh;
    margin-bottom: 1rem;
    display: flex;
    /* For centering the image if it's smaller than the container */
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    /* Placeholder bg for the container */
}

#image-to-crop-ic {
    display: block;
    /* Cropper.js works best with block display */
    max-width: 100%;
    /* Image itself should also be responsive within its container */
    max-height: 60vh;
    /* Match container's max-height */
    opacity: 0;
    /* Hide initially until Cropper.js initializes */
    transition: opacity 0.3s ease-in-out;
}

#image-to-crop-ic.cropper-hidden {
    /* Cropper.js adds this class */
    opacity: 1 !important;
    /* Override if Cropper.js hides it by default */
}

#image-to-crop-ic.loaded {
    opacity: 1;
}


/* Cropper.js specific overrides if needed - default styles are generally good */
/* .cropper-view-box,
.cropper-face {
  border-radius: .25rem; 
} */

.btn-aspect-ratio.active {
    background-color: #3498db;
    /* primary */
    color: white;
    font-weight: 600;
}

#cropped-image-preview-ic {
    background-color: #f9fafb;
    /* gray-50 to see transparency if PNG */
}


/* Responsive adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 1.8rem;
    }

    .image-container-ic,
    #image-to-crop-ic {
        max-height: 50vh;
    }
}