/* General body styling */
body {
    font-family: 'Inter', sans-serif;
}

/* Styles for a frame that is currently being dragged */
.frame.dragging {
    cursor: grabbing;
    z-index: 20;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
    transition: none; /* Disable transitions while dragging for immediate feedback */
}

/* Base styles for a picture frame */
.frame {
    position: absolute;
    background-color: white;
    /* padding and border are now set dynamically via JavaScript */
    border-radius: 4px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    cursor: grab;
}

/* Hover effect for frames */
.frame:hover {
    transform: scale(1.02);
    z-index: 10;
}

/* The inner matting of the frame */
.passe-partout {
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures the image doesn't spill out */
    border: 1px solid #eee; /* Added a light border for definition */
}

/* The area where the picture is displayed */
.picture-cutout {
    background-color: #a0a0a0;
    background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%), linear-gradient(-45deg, #b0b0b0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #b0b0b0 75%), linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
    background-size: 20px 20px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    transition: all 0.2s ease-in-out;
    width: 100%;
    height: 100%;
}

/* Styling for the uploaded image inside the frame */
.picture-cutout img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image cover the area without distortion */
    display: block;
}

/* Wrapper for handling pan and zoom transforms */
#transform-wrapper {
    transform-origin: 0 0;
}