/* ---------------------------------------------------------
   Cropped preview containers (fixed aspect ratio + cropping)
--------------------------------------------------------- */

.preview-crop-4-3 {
    width: 60px;               /* horizontal preview size */
    aspect-ratio: 4 / 3;
    overflow: hidden;

    /* Center image inside the crop area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-crop-3-4 {
    width: 40px;               /* vertical preview size */
    aspect-ratio: 3 / 4;
    overflow: hidden;

    /* Center image inside the crop area */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* image inside the preview box */
.preview-crop-4-3 img,
.preview-crop-3-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* performs actual cropping */
    display: block;
}

/* ---------------------------------------------------------
   Center the entire preview component in the Dash column
--------------------------------------------------------- */

.layout-option {
    display: flex;
    flex-direction: column;
    align-items: center;      /* horizontal centering */
    justify-content: center;  /* vertical centering */
    text-align: center;
}

.dash-spinner {
    position: absolute !important;
    z-index: 5000 !important;
}