/* Voorkomt een lay-outverschuiving (layout shift) door compensatie voor het verdwijnen van de scrollbalk van de body wanneer een modaal open is. */
body.modal-open {
    padding-right: 15px; /* Pas deze waarde aan indien nodig */
}

.pixelated-image {
    /* This property gives the image a pixelated look */
    image-rendering: pixelated; /* Standard property */
    /* The 'contain' value scales the image to fit within the container
       without distorting its aspect ratio. */
    object-fit: contain;
}

.hero-section {
    /* Position the background image */
    background-image: url("/images/cat_embroidery.webp");
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Apply the gradient overlay with a bit of transparency */
    background: linear-gradient(to right, var(--bs-primary-purple), var(--bs-secondary-pink));
    opacity: 0.8; /* Adjust this value to change how much the image shows through */
    z-index: 1;
}

.hero-section > * {
    position: relative;
    z-index: 2; /* Make sure the content is on top of the overlay */
}

.bg-gradient-feminine {
    background: linear-gradient(to right, var(--bs-primary-purple), var(--bs-secondary-pink));
}

/* Upload area specifieke styling */
/* CSS for the pulsing glow animation on the upload area */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 10px 15px rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
}

#upload-area {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 2px dashed rgba(255, 255, 255, 0.8);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 2rem 3rem; /* p-8 sm:p-12 lg:p-16 */
    max-width: 48rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    position: relative;
    animation: pulse-glow 2.5s infinite ease-in-out;
    transition: all 0.3s ease-in-out;
}

#upload-area:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

#upload-area.active-drag {
    /* Stop the pulsing animation when an item is being dragged */
    animation: none;
    box-shadow: 0 0 20px 5px #8B5CF6; /* Example color, you can adjust this */
}
#file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* Toegevoegde stijl voor de upload-spinner */
#upload-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 3rem;
    max-width: 48rem;
    margin: auto;
    min-height: 19rem; /* Zorgt ervoor dat de hoogte vergelijkbaar is met de upload-area */
}