/* ===================================
   MODULE CUSTOM STYLES
   =================================== */

/* Drag and Drop Utilities */
.drag-me {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.position-abs {
    position: absolute !important;
}

/* Icon Styling */
.oi {
    font-size: 0.8em;
    font-weight: 200;
}

/* ===================================
   LOADER ANIMATION
   =================================== */

.qanda-loader {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
    background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: lqanda 1s infinite linear;
}

@keyframes lqanda {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%;
    }
    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%;
    }
    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%;
    }
    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%;
    }
}

/* ===================================
   DRAG AND DROP STYLES
   =================================== */

/* Input Type Items (Draggable Field Types) */
.input-type-item {
    cursor: grab;
    transition: transform 0.2s ease;
}

.input-type-item:active {
    cursor: grabbing;
}

.input-type-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

/* Question Drop Zones */
.question-drop-zone.drag-over {
    background-color: #e3f2fd;
    border-color: #2196f3 !important;
    border-style: solid !important;
}

.question-item.drag-over {
    background-color: #fff3e0;
    border-color: #ff9800 !important;
    border-style: solid !important;
}

/* Drag Handles */
.drag-handle {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.drag-handle:hover {
    opacity: 1;
}

/* Drop Zone Indicators */
.drop-zone-indicator {
    margin: 5px 0;
    padding: 10px;
    border: 2px dashed #ccc;
    border-radius: 5px;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.drop-zone-indicator.active {
    border-color: #28a745;
    background-color: #d4edda;
    opacity: 1;
}

.drop-indicator {
    color: #6c757d;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.drop-zone-indicator.active .drop-indicator {
    color: #155724;
    font-weight: 500;
}

/* ===================================
   STICKY SIDEBAR
   =================================== */

/* Ensure parent containers don't interfere with sticky positioning */
.sticky-sidebar-container {
    position: relative;
    height: fit-content;
}

.sticky-sidebar {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 80px; /* Increased to account for header height */
    max-height: calc(100vh - 100px); /* Adjusted for better viewport fit */
    overflow-y: auto;
    align-self: flex-start; /* Ensures it sticks to the top of its flex container */
}

/* Ensure the row container doesn't interfere */
.qanda-designer-row {
    align-items: flex-start !important;
}

/* Custom Scrollbar for Sticky Sidebar */
.sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}

.sticky-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sticky-sidebar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.sticky-sidebar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive Behavior for Sidebar */
@media (max-width: 991.98px) {
    .sticky-sidebar {
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
        align-self: auto;
    }
}