/* Style for elements that have been successfully dropped */
.dropped {
    background-color: #FFD700;
    /* Example color for the dropped state */
}

/* Base styles for draggable options */
.option {
    position: relative;
    /* Start with relative positioning; will change to fixed during drag */
    /* Removed transition to prevent unwanted animations during dragging */
    /* transition: transform 0.2s ease, opacity 0.2s ease; */

    /* Optional: Add other existing styles here */
    user-select: none;
}

/* Hover state for draggable options */
.option:hover {
    cursor: grab;
    /* Uncomment and define the animation if needed */
    /* background: linear-gradient(white, white) padding-box,
                 linear-gradient(to right, #B0C2FF, #00F0FF) border-box; */
    box-shadow: 0 0 15px #B0C2FF;

    /* Removed undefined animation to prevent errors */
    /* animation: changeColorRUE 0.35s forwards; */
    user-select: none;
}

/* Active state when the draggable is being grabbed */
.option:active {
    cursor: none;
}

.hovered-dropzone {
    background-color: #f0f8ff;
}

.dropzone.disabled {
    cursor: default;
}

/* Style for the dropzones */
span[id^="B2ex"] {
    border: 2px solid #6564b6;
    width: 15em;
    margin: 0.5em;
    padding: 0em 2em;
    border-radius: 1em;
}

/* Visual feedback when dragging */
.option.dragging {
    opacity: 0.7;
    transform: scale(1.05);
    transition: opacity 0.2s, transform 0.2s;
    cursor: none;
    width: 21%;
    box-sizing: border-box;
    position: absolute;
    z-index: 1000;
}

/* Limit text display while dragging to first couple of lines */
.option.dragging>p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90vw;

    .dropzone:hover {
        cursor: default;
    }

    /* Ensure that the parent container is positioned relatively */
    #options {
        position: relative;
        /* Ensures absolutely positioned children are relative to this container */

        margin: 1.1em 0 0 0;
    }

    /* Optional: Additional styles for smoother movement */

    .option {
        transition: transform 0.5s ease, opacity 0.5s ease;
        position: relative;
    }

    .moving-back {
        transform: translate(0, 0);
        opacity: 1;
    }

    .hidden {
        opacity: 0;
    }

    /* Add this to your CSS file or within <style> tags */
    .dropzone[data-dropped-id]:hover {
        cursor: pointer;
        border: 2px dashed #888;
        position: relative;
    }

    /* .dropzone[data-dropped-id]:hover::after {
    content: "Click to return";
    position: absolute;
    top: -25px;
    left: 0;
    background: #f0f0f0;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 12px;
    white-space: nowrap;
} */
    .option.hidden {
        opacity: 0;
        transform: translateY(0);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Define the animation when the option is moving back */
    .option.moving-back {
        opacity: 1;
        transform: translateY(-20px);
    }



    .topTitle {
        color: rgb(143, 233, 241);
        align-self: flex-start;
        margin-right: auto;
        /*font-size: 3.5rem;
    /*text-align: center;
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
    }

    /* Add this new style for the custom cursor */
    #text,
    #options {
        cursor: url('/assets/icons/highlighter-cursor.svg') 2 2, auto;
    }

    /* Highlight in yellow For Firefox */
    ::-moz-selection {
        background-color: rgba(255, 255, 0, 0.5);

    }

    /* Highlight in yellow For WebKit browsers (Chrome, Safari, Edge) */
    ::selection {
        background-color: rgba(255, 255, 0, 0.5);

    }

    #navAndTxtOpt {
        width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    #textAndOptions {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        height: 100vh;
        overflow: hidden;
    }

    #textAndOptions #text {
        width: 70%;
        padding: 1em;
        box-sizing: border-box;
        overflow-y: auto;

    }

    #textAndOptions .optBtnScrWrapper {
        width: 30%;
        /*  padding: 1em;*/
        box-sizing: border-box;
        overflow-y: auto;
        height: 100%;
    }

    /* Base styles for options (larger screens) */
    .option {
        min-width: auto;
        overflow: visible;
        padding: 1em;
        margin: 0.5em 0;
    }

    /* Adjust for smaller screens */
    @media (max-width: 800px) {
        .option {
            min-width: auto;
            overflow: auto;
            padding: 0.5em;
        }
    }