/* Hero Slider */
#prev, #next {
    z-index: 10; /* Make sure buttons are above the images */
}

/* Hero Slider */
#slider {
    display: flex;
    transition: transform 1s ease;  /* Smooth transition */
}

#slider > div {
    flex: 0 0 100%;  /* Ensure each slide takes up 100% width */
}

#prev, #next {
    z-index: 10;  /* Ensure buttons are above the images */
}

/* Optional: Add a hover effect for buttons */
#prev:hover, #next:hover {
    opacity: 0.7;
}

/* Drag And Drops */
.placeholder {
    width: 2px; /* Vertical line for horizontal sorting */
    background-color: blue;
    margin: 0 2px; /* Horizontal margin */
    /* Ensure placeholder stretches vertically to match other items */
    height: auto;
    align-self: stretch; /* Important for flex items */
}
.is-dragging {
    opacity: 0.5;
}
/* Optional: Add some padding to the drop areas for better visual */
.dropArea, .h-60.overflow-auto.my-2 {
    padding: 8px;
    box-sizing: border-box; /* Ensures padding doesn't add to total width */
}
.items {
    /* Ensure items within the dropArea respect their widths */
    display: flex;
    flex-direction: column; /* Stack input and width controls */
    align-items: flex-start; /* Align contents to start */
    margin-bottom: 8px; /* Space between dropped items */
    box-sizing: border-box;
}
.items > div:first-child { /* The div containing the input */
    width: 100%; /* Make the input container full width of its parent (.items) */
}

/* *** NEW CSS for Drop Area to enable Grid/Flexbox behavior *** */
.dropArea {
    display: flex; /* Use flexbox for horizontal layout and wrapping */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    align-items: flex-start; /* Align items to the start of the cross axis (top) */
    align-content: flex-start; /* Align lines to the start of the container */
    /* gap: 8px; */
}