.rolling-questions {
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
}

.question-row {
    overflow-x: auto; /* Required for script-based scrolling */
    white-space: nowrap;
    margin-bottom: 10px;
    cursor: grab;
    /* Hide scrollbar for clean look */
    scrollbar-width: none; 
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    user-select: none; /* Prevents text selection while dragging */
}

.question-row::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.question-row:active {
    cursor: grabbing;
}

/* Force the cursor for Laptop users */
.question-row.grabbing {
    cursor: grabbing !important;
    scroll-behavior: auto !important; /* Prevents "laggy" dragging */
}

.question-row.grabbing .question-track {
    animation-play-state: paused !important;
    pointer-events: none; /* Prevents accidental clicks on pills while dragging */
}

.question-track {
    display: inline-flex;
    gap: 12px;
    animation: scroll-left 35s linear infinite;
}

.question-track.reverse {
    animation: scroll-right 40s linear infinite;
}

.question-pill {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.question-pill:hover {
    background: rgba(255, 215, 0, 0.25);
    transform: scale(1.05);
}

/* Animations */
@keyframes scroll-left {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

.question-row:hover .question-track {
    animation-play-state: paused;
}

.rolling-questions {
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}