/**
 * Common styles for image tools
 * Ensures proper aspect ratio handling and consistent UI
 */

/* Image Preview with proper aspect ratio */
.image-preview {
    max-width: 100%;
    max-height: 300px;
    margin: 0 auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    object-fit: contain; /* Ensures aspect ratio is maintained */
    width: auto; /* Allow width to adjust based on height */
    height: auto; /* Allow height to adjust based on width */
}

/* Image container for maintaining aspect ratio */
.image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
}

/* Ensure canvas elements maintain aspect ratio */
canvas {
    max-width: 100%;
    height: auto !important;
}

/* Resize preview container with proper aspect ratio */
.resize-preview-container {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
}

/* Crop container with proper aspect ratio */
.crop-container {
    max-width: 100%;
    overflow: hidden;
}

#crop-preview {
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* Result preview with proper aspect ratio */
#result-preview, #original-preview {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}